/* The walkway: one 1.85:1 take, letterboxed in black like a print on a screen (Hayden, 2026-10-20: half the bars
   of scope, so the picture breathes and the walkway shows down to its floor). Heights are in frame-width units. */
/* The nav and the contact links always sit in black bands above and below the picture, centred in them
   (Hayden, 2026-10-20): the frame shrinks, black at its sides, rather than run under them on a wide screen. */
.page-home { --band: 56px; --stage-w: min(100vw, calc((100vh - 2 * var(--band)) * 1.85)); --bar: calc((100vh - var(--stage-w) / 1.85) / 2);
  height: 100vh; overflow: hidden; background: #000; color: var(--white); }
.page-home .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; height: var(--bar); padding-top: 0; padding-bottom: 0;
  align-items: center; justify-content: flex-end; } /* no wordmark here: the title card names him */
.page-home .site-header .site-nav a { padding-top: 5px; padding-bottom: 5px; }
/* Hung on the picture's own edges when black shows at its sides; on the page margin when it fills the width. */
.page-home .site-header { padding-right: max(var(--gutter), (100vw - var(--stage-w)) / 2); }
.page-home .site-footer { padding-left: max(var(--gutter), (100vw - var(--stage-w)) / 2); }
.page-home .site-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; height: var(--bar); padding-top: 0; padding-bottom: 0;
  align-items: center; color: #C9C9C4; }
.page-home main { position: fixed; inset: 0; display: grid; place-items: center; }

.stage { position: relative; width: var(--stage-w); aspect-ratio: 1.85 / 1; overflow: hidden; container-type: inline-size; background: var(--ink); }
/* The rail sits low, at the rider's belt (Hayden, 2026-10-20: "move the rail down about 15% to show more of the figure",
   then "I like rail8_t12"). The siding strip is stitched for this band (tools/stitch_walkway.py, rail argument 8). */
.stage { --stage-h: calc(100cqw / 1.85); --rail-band: 8cqw; --wall-h: calc(var(--stage-h) - var(--rail-band)); }
.plate-first, .handrail { position: absolute; left: 0; width: 100%; display: block; pointer-events: none; }
.plate-first { top: 0; height: 100%; object-fit: cover; }
/* The walkway's side: Hayden's Veo siding scanned into a still strip (2026-10-20). Like the wall, it loops on
   its own period and slides at the wall's speed; its handrail band is uniform, so the rail appears to ride along. */
.handrail { bottom: 0; height: var(--rail-band); z-index: 3; overflow: hidden; background: #111; }
.handrail { --rail-h: var(--rail-band); }
.handrail-surface { position: absolute; top: 0; right: 0; height: 100%; width: calc(var(--strip-aspect) * var(--rail-h) + 100cqw);
  background-repeat: repeat-x; background-position: right top; background-size: auto 100%; will-change: transform; }

/* The wall fills the frame above the walkway's side; the doors hang centred on it. */
.wall { position: absolute; left: 0; right: 0; top: 0; height: var(--wall-h); z-index: 1; }
/* The wall surface loops on its own period (one strip width) so its texture never jumps when the doors wrap. */
.wall-surface { position: absolute; top: 0; right: 0; height: 100%; width: calc(var(--strip-aspect) * var(--wall-h) + 100cqw);
  background-repeat: repeat-x; background-position: right top; background-size: auto 100%; will-change: transform;
  filter: brightness(.8) saturate(.92); /* the corridor sits a stop under the lit cases */ }
.wall-track { position: absolute; top: 0; right: 0; display: flex; flex-direction: row-reverse; height: 100%; width: max-content; will-change: transform; }
.wall-copy { display: flex; flex-direction: row-reverse; align-items: flex-start; height: 100%; padding-top: var(--door-top); }

/* The title card: sign letters on the empty wall, The Graduate's way. */
.wall-title { width: 100cqw; flex: none; align-self: flex-start; height: var(--door-h); display: flex; flex-direction: column; justify-content: center; padding-left: 7.5cqw; /* centred on the doors' line */
  color: var(--white); text-shadow: 0 .08cqw 0 rgba(0,0,0,.42), 0 .16cqw .22cqw rgba(0,0,0,.26); /* raised letters lit from above */ }
.wall-title-name { display: block; font: 700 7.6cqw/.86 var(--font-display); letter-spacing: .012em; text-transform: uppercase; }
.wall-title-name .mc { text-transform: none; font-size: .62em; vertical-align: .52em; letter-spacing: 0; margin: 0 .02em 0 .01em; }
/* The role in the same condensed face, its capitals about 40% of the name's. */
.wall-title-role { display: block; margin-top: 1cqw; padding-left: .25cqw; font: 600 3cqw/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }

/* Doors: spaced so the next enters at the left edge as the last passes the rider (about 62% across).
   Centre-to-centre gap = rider-x + door-width / 2. */
.stage { --rider-x: 62cqw; }
/* A door is Hayden's photographed lightbox case (second render 2026-10-20, the slimmer frame), at its own proportions.
   --wu is a door-relative unit for the wall art's type: a door is 26 units tall. */
/* The doors hang at the rider's eye line, where they were before the rail dropped; the wall runs on below them. */
.wall { --door-h: 32.2cqw; --door-top: 2.93cqw; --wu: calc(var(--door-h) / 26); --door-w: calc(var(--door-h) * .6963); }
/* The rider's framing, tuned to Hayden's take (2026-10-20, tools/make_rider.sh: a 500 x 820 crop, his body centre 46.6%
   across). His head stands where the stand-in's did; the rail's top crosses at his hands and jacket hem (source row 985),
   with the clip running 35 px of source below it so its cut edge stays hidden; the title line sits inside his head and
   neck at every frame of the take, across the height the name passes through. */
.stage { --rider-h: 38.24cqw; --rider-foot: 6.37cqw; --rider-w: calc(var(--rider-h) * 500 / 820); --rider-centre: .466; --title-clip: calc(var(--rider-x) - .7cqw); }
.title-line { position: absolute; left: var(--title-clip); top: 0; width: 0; height: 0; pointer-events: none; }
/* Rider layer, between the wall and the handrail. The dev stand-in's body centre sits about 48% across its frame. */
.rider.is-syncing { opacity: 0; }  /* until the take is on the wall's clock (src/js/wall.js) */
.rider { position: absolute; z-index: 2; bottom: var(--rider-foot); height: var(--rider-h); width: var(--rider-w); left: calc(var(--rider-x) - var(--rider-w) * var(--rider-centre)); pointer-events: none; } /* behind the rail, below his hands hidden */

/* Each door is a 1960s airline-ad lightbox: the photographed aluminium case on top, with the lit header
   (the section's colour) and the work, printed as a transparency, showing through its two openings.
   The openings' positions are measured from the render; the panels run a hair under the case's edges. */
.poster { position: relative; flex: none; display: block; width: var(--door-w); height: var(--door-h); min-width: 0; min-height: 0;
  margin: 0 calc((var(--rider-x) - var(--door-w) / 2) / 2); color: inherit; text-decoration: none; }
.poster::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: url(/assets/plate/lightbox-case.webp) 0 0 / 100% 100% no-repeat; }
.poster--ai     { --door-colour: var(--organization-green); --door-ink: var(--white); }
.poster--film   { --door-colour: var(--reese);              --door-ink: var(--ink); }
.poster--stills { --door-colour: var(--telescope-yellow);   --door-ink: var(--ink); }
.door-label { position: absolute; left: 8.97%; right: 9.07%; top: 6.15%; height: 11.18%;
  display: flex; align-items: center; justify-content: center; padding-top: .16em;
  background: var(--door-colour); color: var(--door-ink);
  font: 600 calc(var(--wu) * 1.2)/1 var(--font-display); letter-spacing: .5em; text-indent: .5em; text-transform: uppercase; }
.poster-case { position: absolute; left: 9.175%; right: 9.226%; top: 20.962%; bottom: 6.477%; display: block; overflow: hidden; }
/* The acrylic face picks up a faint reflection of the ceiling tubes. */
.poster-case::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.16'/%3E%3C/svg%3E"),
    linear-gradient(112deg, rgba(255,255,255,0) 34%, rgba(255,255,255,.06) 41%, rgba(255,255,255,.09) 44%, rgba(255,255,255,.03) 50%, rgba(255,255,255,0) 58%),
    linear-gradient(174deg, rgba(255,255,255,0) 6%, rgba(255,255,255,.12) 11%, rgba(255,255,255,.03) 19%, rgba(255,255,255,0) 30%); }
/* The platform's light (critic round 7: the poster read as pasted on). Over the header and the art, under the case:
   a cool cast pulling their colour about 5% toward the walkway's blue; the face above carries the film's grain and
   a faint diagonal glare on the acrylic. */
.poster::before { content: ""; position: absolute; z-index: 1; left: 8.97%; right: 9.07%; top: 6.15%; bottom: 6.477%;
  background-color: rgba(70, 104, 150, .06); pointer-events: none; }

/* A door in hand lights up (Hayden, 2026-10-20: "the whole image lights up"): the case rests a little dim,
   like a lightbox with its tubes off, then the whole of it comes up bright and throws light on the wall. */
.poster { filter: brightness(.82) saturate(.92) drop-shadow(0 .35cqw .5cqw rgba(0,0,0,.45));
  border-radius: 4%/3%; transition: filter .35s ease, box-shadow .35s ease; }
.poster.is-lit, .poster:hover, .poster:focus-visible {
  filter: brightness(1.12) saturate(1.05) drop-shadow(0 .35cqw .5cqw rgba(0,0,0,.45));
  box-shadow: 0 0 3.4cqw .9cqw rgba(255,246,222,.5); }
.poster:focus-visible { outline: 3px solid var(--telescope-yellow); outline-offset: calc(var(--wu) * .6); }

/* The easter egg: an aluminium maker's plate low on the wall, the size of a postage stamp. */
.easter-egg { flex: none; align-self: flex-end; margin: 0 5cqw 2.2cqw; padding: .3cqw .6cqw .2cqw .7cqw;
  font: 600 .56cqw/1 var(--font-display); letter-spacing: .3em; text-transform: uppercase; color: #3B3B37;
  background: var(--alu); box-shadow: inset 0 0 0 1px rgba(0,0,0,.28), 0 .05cqw .1cqw rgba(0,0,0,.45); }

.sound-toggle { position: absolute; right: 2cqw; bottom: 2cqw; z-index: 5; font: 600 1cqw/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase;
  color: var(--white); background: #000; border: 1px solid #555; padding: .5cqw .9cqw; cursor: pointer; }
.sound-toggle[hidden] { display: none; }

.phone-index { display: none; }

@media (prefers-reduced-motion: reduce) {
  .poster { transition: none; }
  .wall-track { position: static; transform: none !important; flex-direction: row; width: 100%; }
  .wall-copy[aria-hidden] { display: none; }
  .wall { --door-h: 22cqw; --door-top: 4.5cqw; }
  .wall-copy { flex-direction: row; width: 100%; justify-content: space-evenly; padding: var(--door-top) 2cqw 0; }
  .wall-title { width: auto; height: auto; justify-content: flex-start; flex: 0 1 15cqw; margin-top: 0; align-self: flex-start; padding: 2cqw 0 0; }
  .wall-title-name { font-size: 3.4cqw; }
  .wall-title-role { font-size: .9cqw; margin-top: .8cqw; }
  .poster { margin: 0; }
  .easter-egg { display: none; }
  .rider { display: none; }
}

@media (max-width: 899px), (pointer: coarse) and (max-width: 1023px) {
  .page-home { height: auto; overflow: auto; }
  .page-home main, .page-home .site-header, .page-home .site-footer { position: static; height: auto; }
  .page-home main { display: block; place-items: normal; }
  .page-home .site-header { padding-bottom: 22px; }
  .page-home .site-footer { padding-top: 24px; }
  .stage { display: none; }
  .phone-index { display: flex; flex-direction: column; }
  .phone-door { display: flex; align-items: flex-end; min-height: 26vh; padding: 14px var(--gutter);
    font: 800 clamp(72px, 24vw, 160px)/.8 var(--font-display); text-transform: uppercase; text-decoration: none; color: var(--ink); }
  .phone-door--ai { background: var(--organization-green); color: var(--white); }
  .phone-door--film { background: var(--reese); }
  .phone-door--stills { background: var(--telescope-yellow); }
  .phone-door:focus-visible { outline: 3px solid var(--white); outline-offset: -6px; }
}