/* 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 stage (2026-10-22): Hayden's final take, the lightboxes rendered into it, the title and the plate on its wall
   (tools/make_stage.py). The doors are links laid over the lightboxes, moved every frame by src/js/stage.js. */
.take { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.take--next { opacity: 0; }   /* the copy waiting at frame 1 for the loop's hand-over (src/js/stage.js) */
.take.is-showing { opacity: 1; z-index: 2; }
.doors { position: absolute; z-index: 3; inset: 0; }
.door { position: absolute; display: block; pointer-events: none; border-radius: 4% / 3%; --clear: 1;
  transition: box-shadow .35s ease, background-color .35s ease; }
.door.is-on { pointer-events: auto; }  /* a door off screen keeps its place in the tab order */
/* A door in hand lights its lightbox (Hayden, 2026-10-20: "the whole image lights up"), dimmed while it's behind him. */
.door.is-lit, .door:hover, .door:focus-visible {
  box-shadow: 0 0 calc(3.4cqw * var(--clear)) calc(.9cqw * var(--clear)) rgba(255, 246, 222, calc(.5 * var(--clear)));
  background-color: rgba(255, 250, 235, calc(.14 * var(--clear))); }
.door:focus-visible { outline: 3px solid var(--telescope-yellow); outline-offset: 4px; }
/* With reduced motion the take holds on its first frame and the wall copy hangs as a still row of doors. */
.wall { display: none; }
/* The still layout's sizes (reduced motion): the wall copy hangs above the take's ledge. */
.stage { --stage-h: calc(100cqw / 1.85); --ledge: 40.2cqw; --wall-h: 40.6cqw; }
.plate-first { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; }

/* 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; }

.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); }


/* 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) {
  .take, .doors { display: none; }
  .wall { display: block; }
  .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; }
}

/* A phone held upright (Hayden, 2026-10-25: "a 9:16 slice of the homepage ... keep me in the frame on the right side
   for vertical orientation or use the same clip as the website for horizontal"). Held sideways, a phone gets the stage
   exactly as the desktop does. */
@media (orientation: portrait) and (max-width: 899px), (orientation: portrait) and (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 { width: min(100vw, calc((100svh - 64px) * 9 / 16)); aspect-ratio: 9 / 16; margin: 0 auto; }
  .take, .plate-first { object-position: 61% 0; }   /* him at about 55-84% across the slice */
  .sound-toggle { font-size: 11px; padding: 8px 12px; right: 12px; bottom: 12px; }   /* a size a thumb can find */
  .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; }
}