@scope (#projects) {
/* This route alone uses the existing Poto palette/type/spacing.
   Added paper-flow ratios and bounded blur durations reproduce the approved exhibit. */
:scope { --poto-paper:#fff;--paper-surface-rgb:255 255 255;--paper-curtain:#101010;--poto-ink:#101010;--poto-muted:#595959;--poto-rule:#cfcfcf;--poto-blue-mid:#326aa6;--poto-space-xs:.25rem;--poto-space-sm:.5rem;--poto-space-md:1rem;--poto-space-lg:1.5rem;--poto-space-xl:2rem;--poto-space-xxl:3rem;--poto-control-height:2.5rem;--poto-ease:cubic-bezier(.16,1,.3,1);--poto-fast:180ms;--paper-text-settle:700ms;--paper-page-wipe:650ms;color-scheme:light; }
:scope:where(html[data-landscape-mode='night'] *) { --poto-paper:#101010;--poto-ink:#fff;--poto-muted:#c4d9ee;--poto-rule:#595959;--poto-blue-mid:#759cc9;--paper-surface-rgb:16 16 16;color-scheme:dark; }
* { box-sizing:border-box; }
:scope { scrollbar-width:thin;scrollbar-color:var(--poto-rule) var(--poto-paper); }
:scope { margin:0;background:var(--poto-paper);color:var(--poto-ink);font-family:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit;color:inherit; }
a { color:inherit;text-underline-offset:.25em;text-decoration-thickness:1px; }
button:focus-visible,a:focus-visible { outline:2px solid var(--poto-blue-mid);outline-offset:var(--poto-space-xs); }
::selection { color:var(--poto-paper);background:var(--poto-ink); }
[hidden] { display:none!important; }
.project-stage { position:relative;padding:calc(var(--poto-control-height) * 4) var(--poto-space-xl) var(--poto-space-xxl); }
.project-sidebar h2 { font-size:clamp(2.75rem,4.2vw,4.5rem);font-weight:600;line-height:1;letter-spacing:-.035em;margin:0 0 var(--poto-space-lg); }
.project-intro { max-width:23ch;color:var(--poto-muted);font-size:1rem;line-height:1.4;margin:0; }
.project-meta { display:grid;grid-template-columns:5rem 1fr;gap:var(--poto-space-md);margin:0;font-size:.875rem;line-height:1.4; }
.project-meta dt { color:var(--poto-muted); }
.project-meta dd { margin:0; }
.project-meta dd strong { font-weight:500; }
.project-counter { display:flex;align-items:baseline;gap:var(--poto-space-sm);font-variant-numeric:tabular-nums; }
.project-counter output { font-size:clamp(6rem,13vw,11rem);font-weight:500;line-height:.85;letter-spacing:-.04em; }
.project-counter>span:last-child { font-size:.75rem;align-self:flex-start; }
.project-stream { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--poto-space-xxl);margin-top:var(--poto-space-xxl); }
.project-cover { margin:0;min-width:0; }
.project-cover a { display:block;text-decoration:none;border-radius:var(--poto-space-lg); }
.project-cover img { display:block;width:100%;height:auto;border-radius:var(--poto-space-lg); }
.project-cover figcaption { padding-top:var(--poto-space-md);font-size:1.25rem; }
.project-cover figcaption span { display:block;font-size:.875rem;color:var(--poto-muted);margin-top:var(--poto-space-xs); }
.project-index { display:none; }
.project-footer { display:flex;justify-content:flex-end;gap:var(--poto-space-lg);padding:var(--poto-space-lg) var(--poto-space-xl);color:var(--poto-muted);font-size:.8125rem; }
.project-footer a { font-size:.875rem; }
.paper-canvas { position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none; }
.paper-hit-area { position:absolute;z-index:3;display:block;cursor:pointer; }
.paper-hit-area:focus-visible { outline-offset:var(--poto-space-sm); }
:scope[data-enhanced] .project-stage { height:100svh;min-height:36rem;position:sticky;top:0;padding:0;overflow:clip; }
:scope[data-enhanced] .project-sidebar { position:absolute;inset:0 auto 0 0;width:33%;pointer-events:none; }
:scope[data-enhanced] .project-heading { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
:scope[data-enhanced] .project-meta { position:absolute;z-index:4;top:39%;left:var(--poto-space-lg);width:90%;font-size:.75rem;grid-template-columns:3.5rem 1fr;gap:var(--poto-space-md); }
/* Keep the ordinal inside the information rail, above the cover layer and clear of the footer. */
:scope[data-enhanced] .project-counter { position:absolute;z-index:4;left:var(--poto-space-lg);top:auto;bottom:calc(var(--poto-control-height) + var(--poto-space-xxl) + var(--poto-space-sm));width:auto; }
:scope[data-enhanced] .project-stream { position:absolute;inset:0;width:100%;height:100%;margin:0;display:block;perspective:1100px;pointer-events:none; }
:scope[data-enhanced] .project-cover { position:absolute;top:0;left:0;transform-origin:50% 50%; }
:scope[data-enhanced] .project-cover a { pointer-events:auto;background:var(--poto-paper); }
:scope[data-enhanced] .project-cover figcaption { display:none; }
:scope[data-renderer='webgl'] .project-stream { display:none; }
:scope[data-enhanced] .project-index { display:block;position:absolute;z-index:10;right:8%;top:0;height:100%;width:24%;overflow:clip;pointer-events:none;mask-image:linear-gradient(to bottom,transparent 3%,#000 24%,#000 77%,transparent 98%); }
.project-index ol { list-style:none;margin:0;padding:0; }
.project-index li { height:11.25rem;display:flex;align-items:center;justify-content:center;pointer-events:none; }
.project-index button { width:100%;min-height:var(--poto-control-height);border:0;padding:var(--poto-space-sm);background:none;cursor:pointer;text-align:center;pointer-events:auto;touch-action:pan-y; }
.project-index button span { display:block;font-size:.75rem;color:var(--poto-muted);margin-bottom:var(--poto-space-sm); }
.project-index button strong { display:block;font-size:1.3rem;font-weight:500;line-height:1.1;overflow-wrap:anywhere;text-transform:uppercase; }
.project-index button i { display:block;height:1px;width:.875rem;margin:var(--poto-space-md) auto;background:currentColor; }
.project-description { margin:0 auto;max-width:30ch;font-size:.875rem;line-height:1.35;font-weight:400;text-transform:none; }
.project-mobile-description { display:none; }
.project-cover figcaption p { max-width:40ch;font-size:1rem;line-height:1.4;margin:var(--poto-space-sm) 0 0; }
.paper-choice { position:absolute;z-index:3;border:0;padding:0;background:transparent;cursor:pointer;touch-action:pan-y; }
:scope[data-enhanced] .project-cover:not([aria-hidden='false']) a { pointer-events:none; }
.project-index button:focus-visible { outline-offset:-var(--poto-space-md); }
.project-index button:hover strong { text-decoration:underline;text-underline-offset:.2em; }
.project-meta,#work-number { transition:filter var(--paper-text-settle) var(--poto-ease),opacity var(--paper-text-settle) var(--poto-ease); }
.project-meta.is-changing,#work-number.is-changing { filter:blur(7px);opacity:.62;transition-duration:140ms; }
:scope[data-enhanced] .project-footer { position:absolute;z-index:10;inset:auto 0 0;padding:var(--poto-space-lg);color:var(--poto-ink);pointer-events:none;background:linear-gradient(to top,var(--poto-paper) 0%,rgb(var(--paper-surface-rgb)/.92) 35%,transparent 100%); }
.project-footer a { pointer-events:auto;min-height:var(--poto-control-height);display:flex;align-items:center; }
.project-status { position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
.project-curtain { position:fixed;inset:0;z-index:30;background:var(--paper-curtain);transform:translateY(101%);pointer-events:none;transition:transform var(--paper-page-wipe) cubic-bezier(.76,0,.24,1); }
:scope.is-leaving .project-curtain { transform:translateY(0);pointer-events:auto; }
@media(max-width:900px) and (min-width:701px) {
 :scope[data-enhanced] .project-meta { grid-template-columns:3rem 1fr;font-size:.7rem; }
 :scope[data-enhanced] .project-index { right:3%;width:26%; }
 .project-index button strong { font-size:1.1rem; }
}
@media(max-width:700px) {
 .project-stage { padding:calc(var(--poto-control-height) * 4) var(--poto-space-md) var(--poto-space-xl); }
 .project-stream { grid-template-columns:1fr; }
 :scope[data-enhanced] .project-stage { min-height:34rem; }
 :scope[data-enhanced] .project-sidebar { width:100%; }
 :scope[data-enhanced] .project-heading { width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
 .project-sidebar h2 { font-size:2.5rem;margin-bottom:var(--poto-space-sm); }
 .project-intro { font-size:.875rem;max-width:none; }
 :scope[data-enhanced] .project-meta { display:grid;top:18%;left:var(--poto-space-md);width:calc(100% - var(--poto-space-xl));grid-template-columns:3rem 1fr;font-size:.75rem; }
 :scope[data-enhanced] .project-meta dt:nth-of-type(3),:scope[data-enhanced] #project-scope,:scope[data-enhanced] .project-index { display:none; }
 :scope[data-enhanced] .project-mobile-description { display:block;grid-column:1/-1;max-width:38ch;line-height:1.35; }
 :scope[data-enhanced] .project-counter { left:var(--poto-space-md);top:auto;bottom:calc(var(--poto-control-height) + var(--poto-space-xl) + var(--poto-space-sm));width:auto;z-index:4; }
 .project-counter output { font-size:5rem; }
 :scope[data-enhanced] .project-footer { padding:var(--poto-space-md);align-items:end;background:var(--poto-paper); }
 .project-footer a { max-width:22ch;text-align:right; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; } }

}

/* Entrance ratios describe the approved scroll choreography, not global tokens. */
#projects { position:relative; isolation:isolate; }
#projects[data-enhanced] .paper-canvas,
#projects[data-enhanced] .project-stream {
 transform:translateY(calc((1 - var(--project-arrival,0))*25vh)) rotate(calc((1 - var(--project-arrival,0))*-6deg));
 opacity:var(--project-arrival,0);
}
#projects[data-enhanced] :is(.project-meta,.project-counter,.project-index,.project-footer) { opacity:var(--project-arrival,0); }
#projects[data-enhanced]:not([data-arrived]) :is(.paper-hit-area,.paper-choice) { pointer-events:none!important; }
#projects[data-enhanced] .project-heading { clip-path:none; width:auto; height:auto; overflow:visible; top:18%; left:var(--poto-space-lg); opacity:calc(1 - var(--project-arrival,0)); }
#projects[data-enhanced] .project-heading h2 { font-size:clamp(2.75rem,4.2vw,4.5rem); }
/* Main-story paragraph styling must not override the gallery's local theme. */
#projects :is(.project-description,.project-mobile-description) { color:var(--poto-ink); }
@media(min-width:701px) { #projects { margin-top:-100svh; } }