/*
Theme Name: Lantern
Theme URI: https://lantern.example/
Author: Lantern Lighting Design
Description: LANTERN — a theme for a lighting design practice. The page is not styled, it is lit: scrolling runs a cue stack, and a set of registered custom properties carries the lighting state that every other rule reads. The hero renders volumetric beams in haze off the main thread; the desk mixes six lanterns additively in linear light. Colour is authored in OKLCH because a dimmer is a lightness axis. Layout is a cue sheet aligned on subgrid.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: lantern
*/

/* ============================================================
   LANTERN · DESIGN SYSTEM
   ------------------------------------------------------------
   One idea: a lighting designer decides what the audience can see.
   So the site is lit rather than decorated. Four registered
   properties below — key, wash, haze, tint — are the lighting
   state. Scroll drives them; everything else reads them. Change a
   cue and the whole page changes together, because it is all
   downstream of one source.
   ============================================================ */

/* Registered so they can be interpolated. Without @property these are
   just strings and no transition or scroll timeline can touch them. */
@property --key  { syntax: "<number>";     inherits: true; initial-value: 1; }
@property --wash { syntax: "<number>";     inherits: true; initial-value: 1; }
@property --haze { syntax: "<number>";     inherits: true; initial-value: 0.5; }
@property --tint { syntax: "<angle>";      inherits: true; initial-value: 70deg; }
@property --gate { syntax: "<percentage>"; inherits: true; initial-value: 0%; }

:root{
  /* — House blacks — a theatre black is never pure black. Serge and
       painted ply read warm-neutral, and pure #000 next to them looks
       like a hole in the page. — */
  --pit:    oklch(8.5% 0.006 70);
  --black:  oklch(13%  0.007 70);
  --flat:   oklch(18%  0.008 72);   /* painted flat: raised surfaces */
  --edge:   oklch(24%  0.009 72);

  /* — Print — */
  --chalk:  oklch(96%  0.008 82);
  --dust:   oklch(79%  0.012 78);
  --grey:   oklch(58%  0.011 76);
  --dim:    oklch(42%  0.010 74);

  /* — Gels — the whole accent set. Authored in OKLCH because a fader
       is a lightness axis: dimming a gel is a move along L, not a
       fade to grey, and only a perceptual space gets that right. — */
  --gel-straw: oklch(86% 0.125 84);
  --gel-amber: oklch(73% 0.170 60);
  --gel-rose:  oklch(67% 0.160 16);
  --gel-lav:   oklch(71% 0.115 312);
  --gel-steel: oklch(69% 0.100 242);
  --gel-congo: oklch(46% 0.175 266);

  /* Boldness is spent in exactly one place: the channel that is live.
     Every other gel stays inside the beams and the desk. */
  --live: var(--gel-straw);

  /* Hairlines derived from the ink rather than hard-coded greys, so a
     change to --dust carries through instead of drifting. */
  --rule:  color-mix(in oklab, var(--dust) 14%, transparent);
  --rule2: color-mix(in oklab, var(--dust) 8%,  transparent);

  --ff-disp: "Instrument Serif", "Playfair Display", Georgia, serif;
  --ff-body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-mono: "IBM Plex Mono", "SF Mono", Consolas, monospace;

  --gut: clamp(20px, 4.4vw, 80px);
  --ease: cubic-bezier(.2,.85,.25,1);
  --slow: cubic-bezier(.16,1,.3,1);

  color-scheme: dark;
}

*{ box-sizing: border-box }
html{ -webkit-text-size-adjust:100%; scrollbar-color: var(--edge) var(--pit) }

body{
  margin:0;
  background: var(--pit);
  color: var(--dust);
  font-family: var(--ff-body);
  font-size: 16.5px;
  line-height: 1.68;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* The house lights. Everything sits on top of this, and it is driven
     by --key/--tint, so a cue change relights the whole page at once. */
  background-image:
    radial-gradient(120% 78% at 50% -10%,
      oklch(from var(--black) calc(l + 0.10 * var(--key)) c h) 0%,
      transparent 62%);
  background-attachment: fixed;
}

img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
p{ margin:0 }

h1,h2,h3,h4,h5{
  margin:0; font-weight:400; color: var(--chalk);
  font-family: var(--ff-disp);
  line-height:1.02; letter-spacing:-.02em;
  text-wrap: balance;
}
/* Instrument Serif has no true italic on the variable axis we load, so
   the second voice in a heading is a weight-and-colour shift instead of
   a slant. Faking an oblique on a high-contrast serif looks cheap. */
.alt{ color: color-mix(in oklab, var(--chalk) 55%, var(--gel-straw)) }

/* Trim the font's built-in leading so optical alignment is real rather
   than eyeballed. This is what stops buttons reading a pixel low. */
@supports (text-box: trim-both cap alphabetic){
  h1,h2,h3,h4,h5,.btn s{ text-box: trim-both cap alphabetic }
}
p, li{ text-wrap: pretty }
@supports (hanging-punctuation: first){
  .body__in p{ hanging-punctuation: first last }
}

:focus-visible{ outline:2px solid var(--live); outline-offset:3px }
::selection{ background: color-mix(in oklab, var(--gel-amber) 45%, transparent); color: var(--chalk) }

.wrap{ max-width:1580px; margin:0 auto; padding:0 var(--gut) }
.wrap--n{ max-width:1120px }

/* ============================================================
   CUE TAG — the structural device. Q-number plus fade time in
   seconds, both real: the number is where the section sits in the
   stack, the time is how long the state takes to arrive.
   ============================================================ */
.q{
  display:inline-flex; align-items:baseline; gap:.75em;
  font-family: var(--ff-mono); font-size:11px; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase; color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.q b{ font-weight:400; color: var(--live) }
.q i{ font-style:normal; color: var(--grey) }
.q s{ text-decoration:none; width:22px; height:1px; background:var(--rule);
      display:inline-block; transform:translateY(-4px) }

/* ============================================================
   HEADER
   ============================================================ */
.nav{ position:fixed; inset:0 0 auto; z-index:60; padding:20px 0;
  transition: background .55s var(--ease), padding .55s var(--ease),
              box-shadow .55s var(--ease), backdrop-filter .55s }
.nav.solid{
  background: color-mix(in oklab, var(--pit) 82%, transparent);
  backdrop-filter: blur(20px) saturate(1.3);
  padding:12px 0; box-shadow:0 1px 0 var(--rule2);
}
.nav__in{ display:flex; align-items:center; justify-content:space-between; gap:26px }
.brand{ display:flex; align-items:baseline; gap:11px; color:var(--chalk) }
.brand b{ font-family:var(--ff-disp); font-size:27px; font-weight:400; letter-spacing:.01em }
.brand span{ font-family:var(--ff-mono); font-size:9px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--dim) }

.menu{ display:flex; align-items:center; gap:clamp(16px,2.3vw,38px); list-style:none; margin:0; padding:0 }
.menu a{ position:relative; font-size:13.5px; letter-spacing:.03em; padding:6px 0; color:var(--dust) }
.menu a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: var(--live); transform:scaleX(0); transform-origin:right;
  transition: transform .5s var(--ease) }
.menu a:hover{ color:var(--chalk) }
.menu a:hover::after{ transform:scaleX(1); transform-origin:left }
.navtog{ display:none; background:none; border:0; padding:9px; cursor:pointer; color:var(--dust) }
.navtog span{ display:block; width:23px; height:1px; background:currentColor; margin:5px 0 }
@media(max-width:1000px){
  .navtog{ display:block }
  .menu{ position:fixed; inset:0; flex-direction:column; justify-content:center;
    background: var(--black); gap:24px; transform:translateY(-101%);
    transition: transform .7s var(--slow); z-index:59 }
  .menu.open{ transform:none }
  .menu a{ font-size:26px; font-family:var(--ff-disp); color:var(--chalk) }
}

/* ============================================================
   THE STAGE — volumetric beams, rendered in a worker
   ============================================================ */
.stage{ position:relative; height:100svh; min-height:640px; overflow:hidden; background:var(--pit) }
.stage__cv{ position:absolute; inset:0; width:100%; height:100%; display:block;
  /* The bitmap is deliberately small — beams in haze are low frequency,
     so upscaling is not a compromise, it is the correct filter. */
  image-rendering:auto }
/* No worker / no canvas: a static gradient standing in for the same rig */
.stage__fb{ position:absolute; inset:0; opacity:0; transition:opacity .9s; pointer-events:none;
  background:
    conic-gradient(from 200deg at 22% -8%, transparent 0 12deg,
      color-mix(in oklab, var(--gel-steel) 26%, transparent) 18deg, transparent 26deg),
    conic-gradient(from 160deg at 78% -8%, transparent 0 12deg,
      color-mix(in oklab, var(--gel-amber) 24%, transparent) 18deg, transparent 26deg),
    radial-gradient(70% 55% at 50% 92%, color-mix(in oklab, var(--gel-straw) 18%, transparent), transparent 70%) }
.stage.is-fallback .stage__fb{ opacity:1 }

/* Haze grain. A paint worklet where it exists, a tiled SVG where it
   does not — both read as the same dust in the beam. */
.stage__haze{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  opacity: calc(.10 + .22 * var(--haze));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E") }
@supports (background: paint(haze)){
  .stage__haze{ background-image: paint(haze) }
}

.stage__in{ position:relative; z-index:3; height:100%; display:flex; flex-direction:column;
  justify-content:flex-end; padding-bottom:clamp(54px,9vh,100px) }
.stage h1{ color:var(--chalk); font-size:clamp(3.2rem,10.5vw,11rem); line-height:.86;
  letter-spacing:-.035em; max-width:13ch;
  text-shadow: 0 0 clamp(30px,6vw,90px) color-mix(in oklab, var(--gel-straw) 18%, transparent) }
.stage__k{ display:flex; align-items:center; gap:13px; margin-bottom:24px;
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--grey) }
.stage__k s{ width:40px; height:1px; background:var(--rule); text-decoration:none }
.stage__sub{ margin-top:28px; max-width:47ch; font-size:15px; line-height:1.75; color:var(--dust) }
.stage__meta{ position:absolute; right:var(--gut); bottom:clamp(54px,9vh,100px); z-index:3;
  text-align:right; font-family:var(--ff-mono); font-size:10px; letter-spacing:.14em;
  color:var(--dim); line-height:2 }
.stage__meta b{ display:block; color:var(--dust); font-weight:400; font-size:11px }
@media(max-width:900px){ .stage__meta{ display:none } }

/* Line-mask reveal */
.lm{ display:block; overflow:hidden }
.lm>i{ display:block; font-style:normal; transform:translateY(112%);
  transition: transform 1.15s var(--slow) }
.lm.in>i, .in .lm>i{ transform:none }
.lm.d1>i{ transition-delay:.09s } .lm.d2>i{ transition-delay:.18s } .lm.d3>i{ transition-delay:.27s }

.scroller{ position:absolute; left:50%; bottom:24px; z-index:4; transform:translateX(-50%);
  width:1px; height:50px; background:var(--rule); overflow:hidden }
.scroller::after{ content:""; position:absolute; inset:0; background:var(--live);
  animation: sc 2.8s var(--ease) infinite }
@keyframes sc{ 0%{transform:translateY(-100%)} 55%,100%{transform:translateY(100%)} }

/* ============================================================
   CREDIT TICKER
   ============================================================ */
.credits{ border-block:1px solid var(--rule2); padding:17px 0; overflow:hidden; background:var(--black) }
.credits__t{ display:flex; width:max-content; animation: roll 52s linear infinite }
.credits:hover .credits__t{ animation-play-state:paused }
@keyframes roll{ to{ transform:translateX(-50%) } }
.credits__t span{ display:inline-flex; align-items:center; gap:40px; padding-right:40px;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--grey); white-space:nowrap }
.credits__t span::after{ content:""; width:4px; height:4px; border-radius:50%;
  background:var(--live); opacity:.55; flex:none }

/* ============================================================
   THE CUE SHEET — the page skeleton.
   One grid declared once on .sheet; every cue opts into the SAME
   tracks with subgrid, so the Q-number rail, the body column and the
   meta column line up down the entire page no matter how long any
   individual cue runs. This is the thing that reads as precision.
   ============================================================ */
.sheet{
  display:grid;
  grid-template-columns:
    [rail] clamp(4.5rem, 7vw, 8.5rem)
    [body] minmax(0, 1fr)
    [meta] clamp(0px, 14vw, 15rem);
  column-gap: clamp(18px, 3vw, 54px);
}
.cue{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: subgrid;
  padding-block: clamp(76px, 11vh, 150px);
  border-top:1px solid var(--rule2);
  align-content:start;
}
.cue:first-child{ border-top:0 }
.cue__rail{ grid-column: rail; position:sticky; top:96px; align-self:start }
.cue__b{ grid-column: body; min-width:0 }
.cue__m{ grid-column: meta; min-width:0 }
.cue--full > *{ grid-column: body / -1 }
.cue__rail .n{ display:block; font-family:var(--ff-mono); font-size:13px;
  letter-spacing:.06em; color:var(--live); font-variant-numeric:tabular-nums }
.cue__rail .t{ display:block; margin-top:6px; font-family:var(--ff-mono);
  font-size:10px; letter-spacing:.14em; color:var(--dim) }
.cue__rail .l{ display:block; margin-top:16px; width:1px; height:clamp(28px,5vh,60px);
  background:linear-gradient(var(--rule), transparent) }
@media(max-width:900px){
  .sheet{ grid-template-columns:[rail] 1fr; }
  .cue{ grid-template-columns:1fr; row-gap:22px; padding-block:clamp(56px,8vh,90px) }
  .cue__rail, .cue__b, .cue__m, .cue--full > *{ grid-column:1 }
  .cue__rail{ position:static; display:flex; align-items:baseline; gap:14px }
  .cue__rail .l{ display:none } .cue__rail .t{ margin-top:0 }
}

.cue h2{ font-size:clamp(2.2rem,5.6vw,4.8rem) }
.cue__lead{ margin-top:22px; max-width:52ch; font-size:15.5px; line-height:1.74; color:var(--dust) }
.cue__m p{ font-size:13px; line-height:1.7; color:var(--grey) }

.cue__fig{ margin:clamp(30px,5vh,56px) 0 0 }
.cue__fig img{ width:100%; aspect-ratio:16/9; object-fit:cover;
  filter:brightness(.66) saturate(.8) contrast(1.04) }

/* Figure plate for the meta column. The number is set in the display
   face at a size the body column never reaches, so the eye reads it as
   a caption to the whole cue rather than another paragraph. */
.tag{ border-top:1px solid var(--rule); padding-top:16px;
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.1em;
  line-height:1.7; color:var(--dim) }
.tag b{ display:block; font-family:var(--ff-disp); font-size:clamp(2.4rem,4vw,3.4rem);
  font-weight:400; letter-spacing:-.03em; color:var(--live); line-height:1; margin-bottom:9px;
  font-variant-numeric:tabular-nums }
@media(max-width:900px){
  .tag{ border-top:0; display:flex; align-items:baseline; gap:14px; padding-top:0 }
  .tag b{ margin-bottom:0; font-size:2.2rem }
}

/* Desk fallback where OffscreenCanvas is missing */
.house.is-fallback{ background:
  radial-gradient(60% 90% at 30% 10%, color-mix(in oklab,var(--gel-steel) 22%,transparent), transparent 70%),
  radial-gradient(60% 90% at 72% 12%, color-mix(in oklab,var(--gel-amber) 20%,transparent), transparent 70%),
  var(--pit) }

/* ============================================================
   PRODUCTIONS — the work.
   Each card carries the gel its design was built around, and the card
   lights with that gel on hover. The colour is data, not decoration.
   ============================================================ */
.works{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2.6vw,44px);
  margin-top:clamp(30px,5vh,60px) }
@media(max-width:760px){ .works{ grid-template-columns:1fr } }
.work{ position:relative; display:block; container-type:inline-size; container-name:work }
.work__f{ position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--flat) }
.work__f img{ width:100%; height:100%; object-fit:cover;
  filter: brightness(.62) saturate(.75) contrast(1.05);
  transform:scale(1.03);
  transition: transform 1.5s var(--slow), filter 1s var(--ease) }
.work:hover .work__f img{ transform:scale(1.07); filter:brightness(.86) saturate(1) contrast(1.02) }
/* The gel wash — a real lighting move: the card is lit, not tinted.
   Screen blend adds light rather than staining the photograph. */
.work__f::after{ content:""; position:absolute; inset:0; pointer-events:none;
  mix-blend-mode:screen; opacity:0; transition:opacity .8s var(--ease);
  background: radial-gradient(120% 100% at 50% 0%,
    color-mix(in oklab, var(--g, var(--gel-steel)) 55%, transparent), transparent 72%) }
.work:hover .work__f::after{ opacity:1 }
.work__b{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:18px 2px 0 }
.work__b h3{ font-size:clamp(1.25rem,1.9vw,1.7rem); transition:color .45s }
.work:hover .work__b h3{ color: color-mix(in oklab, var(--chalk) 40%, var(--g, var(--gel-steel))) }
.work__b em{ font-style:normal; font-family:var(--ff-mono); font-size:10.5px;
  letter-spacing:.12em; color:var(--dim); white-space:nowrap; flex:none }
.work__d{ padding:8px 2px 0; font-size:13.5px; line-height:1.66; color:var(--grey); max-width:46ch }
/* Container query, not a media query: the card reflows on its own
   width, so it behaves the same in the grid, the archive and a sidebar. */
@container work (max-width: 340px){
  .work__b{ flex-direction:column; gap:6px }
  .work__b em{ white-space:normal }
  .work__d{ display:none }
}

/* ============================================================
   THE DESK — six lanterns mixed additively, in linear light
   ============================================================ */
.desk{ background:var(--black); padding-block:clamp(80px,12vh,160px); position:relative; overflow:hidden }
.desk::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(90deg, var(--rule2) 0 1px, transparent 1px 40px) }
.desk .wrap{ position:relative; z-index:1 }
.rig{ display:grid; grid-template-columns:minmax(0,1fr) clamp(280px,26vw,340px);
  gap:clamp(24px,3.4vw,52px); align-items:start; margin-top:clamp(28px,4vh,52px) }
@media(max-width:920px){ .rig{ grid-template-columns:1fr } }

.house{ position:relative; aspect-ratio:16/10; background:var(--pit);
  border:1px solid var(--rule2); overflow:hidden }
.house canvas{ position:absolute; inset:0; width:100%; height:100%; display:block }
.house__lab{ position:absolute; left:14px; bottom:12px; z-index:2;
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.16em; color:var(--dim) }
.house__mix{ position:absolute; right:14px; bottom:12px; z-index:2; text-align:right;
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.1em; color:var(--grey) }
.house__mix b{ display:inline-block; width:11px; height:11px; vertical-align:-1px;
  margin-right:7px; border:1px solid var(--rule) }

.faders{ border:1px solid var(--rule2); background:var(--flat); padding:20px 20px 24px }
.faders h4{ font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--dim); margin:0 0 16px; font-weight:400 }
.ch{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px;
  padding:9px 0; border-top:1px solid var(--rule2) }
.ch:first-of-type{ border-top:0 }
.ch__sw{ width:13px; height:13px; border:1px solid var(--rule); flex:none }
.ch__n{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.08em; color:var(--dust);
  display:flex; flex-direction:column; gap:2px; min-width:0 }
.ch__n i{ font-style:normal; font-size:9px; color:var(--dim); letter-spacing:.14em }
.ch input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:20px;
  background:transparent; cursor:pointer; margin:0 }
.ch input[type=range]::-webkit-slider-runnable-track{ height:2px; background:var(--edge) }
.ch input[type=range]::-moz-range-track{ height:2px; background:var(--edge) }
.ch input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none;
  width:9px; height:18px; margin-top:-8px; background:var(--dust); border:0; border-radius:1px }
.ch input[type=range]::-moz-range-thumb{ width:9px; height:18px; background:var(--dust);
  border:0; border-radius:1px }
.ch input[type=range]:focus-visible::-webkit-slider-thumb{ background:var(--live) }
.ch__v{ font-family:var(--ff-mono); font-size:10.5px; color:var(--grey);
  font-variant-numeric:tabular-nums; min-width:3ch; text-align:right }
.presets{ display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; padding-top:16px;
  border-top:1px solid var(--rule2) }
.presets button{ flex:1 1 auto; min-width:70px; background:transparent; color:var(--grey);
  border:1px solid var(--rule2); padding:8px 10px; cursor:pointer;
  font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  transition: color .35s, border-color .35s, background .35s }
.presets button:hover{ color:var(--chalk); border-color:var(--rule) }
.presets button.on{ color:var(--pit); background:var(--live); border-color:var(--live) }
.desk__note{ margin-top:18px; padding-top:14px; border-top:1px solid var(--rule2);
  font-size:12.5px; line-height:1.66; color:var(--dim) }
.desk__note code{ font-family:var(--ff-mono); font-size:11px; color:var(--live) }

/* ============================================================
   PROCESS — seven stages, as a cue list
   ============================================================ */
.stages{ display:grid; gap:1px; background:var(--rule2); border:1px solid var(--rule2);
  grid-template-columns:repeat(7,minmax(0,1fr)); margin-top:clamp(28px,4vh,52px) }
@media(max-width:1100px){ .stages{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
@media(max-width:640px){ .stages{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.stg{ background:var(--black); padding:26px 20px 30px; position:relative;
  transition: background .5s var(--ease) }
.stg:hover{ background:var(--flat) }
.stg b{ display:block; font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.18em;
  color:var(--live); margin-bottom:22px; font-weight:400 }
.stg h4{ font-family:var(--ff-disp); font-size:22px; margin:0 0 9px }
.stg p{ font-size:12.5px; line-height:1.62; color:var(--grey) }
.stg::after{ content:""; position:absolute; inset:auto 0 0; height:2px; background:var(--live);
  transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease) }
.stg:hover::after{ transform:scaleX(1) }

/* ============================================================
   FIGURES
   ============================================================ */
.figs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,3.2vw,56px);
  margin-top:clamp(28px,4vh,52px) }
@media(max-width:900px){ .figs{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.fig{ border-top:1px solid var(--rule); padding-top:22px }
.fig b{ display:block; font-family:var(--ff-disp); font-size:clamp(2.8rem,6vw,5rem);
  font-weight:400; color:var(--chalk); line-height:.94; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums }
.fig b sup{ font-size:.3em; vertical-align:super; color:var(--live); letter-spacing:0 }
.fig span{ display:block; margin-top:12px; font-size:12.5px; line-height:1.6; color:var(--grey) }

/* ============================================================
   FULL-BLEED PLATE
   ============================================================ */
.plate{ position:relative; min-height:78vh; display:flex; align-items:flex-end;
  overflow:hidden; background:var(--pit) }
.plate img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(.55) saturate(.8) }
.plate__s{ position:absolute; inset:0; background:
  linear-gradient(180deg, color-mix(in oklab,var(--pit) 25%,transparent) 0%,
                          color-mix(in oklab,var(--pit) 40%,transparent) 45%,
                          var(--pit) 100%) }
.plate__in{ position:relative; z-index:2; padding:0 var(--gut) clamp(50px,9vh,96px); max-width:800px }
.plate h2{ font-size:clamp(2rem,5vw,4rem) }
.plate p{ margin-top:18px; max-width:46ch; font-size:14.5px; line-height:1.7; color:var(--dust) }
.cred{ position:absolute; right:var(--gut); bottom:14px; z-index:2;
  font-family:var(--ff-mono); font-size:9px; letter-spacing:.04em; color:var(--dim) }

/* ============================================================
   NOTES
   ============================================================ */
.notes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(22px,3vw,48px);
  margin-top:clamp(28px,4vh,52px) }
@media(max-width:900px){ .notes{ grid-template-columns:1fr } }
.note{ display:block; border-top:1px solid var(--rule); padding-top:20px;
  transition: border-color .5s var(--ease) }
.note:hover{ border-top-color:var(--live) }
.note time{ font-family:var(--ff-mono); font-size:10px; letter-spacing:.16em; color:var(--dim) }
.note h3{ font-size:clamp(1.1rem,1.6vw,1.4rem); margin:12px 0 10px; line-height:1.24;
  transition:color .4s }
.note:hover h3{ color:var(--live) }
.note p{ font-size:13px; line-height:1.64; color:var(--grey) }

/* ============================================================
   CLOSING / BUTTONS / FOOTER
   ============================================================ */
.end{ position:relative; padding-block:clamp(96px,15vh,190px); overflow:hidden; text-align:center;
  background:var(--black) }
.end__cv{ position:absolute; inset:0; width:100%; height:100%; display:block;
  pointer-events:none; opacity:.6 }
.end .wrap{ position:relative; z-index:2 }
.end h2{ font-size:clamp(2.1rem,5.4vw,4.4rem); max-width:17ch; margin:0 auto }
.end p{ margin:22px auto 0; max-width:46ch; font-size:14.5px; line-height:1.7; color:var(--dust) }
.acts{ margin-top:38px; display:flex; gap:13px; flex-wrap:wrap; justify-content:center }

.btn{ position:relative; display:inline-flex; align-items:center; gap:11px;
  padding:15px 34px; border:1px solid var(--rule); color:var(--dust); overflow:hidden;
  font-size:13.5px; letter-spacing:.04em;
  transition: color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease) }
.btn s{ position:relative; z-index:2; text-decoration:none }
.btn::before{ content:""; position:absolute; inset:0; background:var(--dust);
  transform:translateY(101%); transition:transform .55s var(--slow) }
.btn:hover{ color:var(--pit); border-color:var(--dust) }
.btn:hover::before{ transform:translateY(0) }
.btn--l{ border-color:var(--live); color:var(--live) }
.btn--l::before{ background:var(--live) }
.btn--l:hover{ color:var(--pit); border-color:var(--live) }

.foot{ background:var(--pit); border-top:1px solid var(--rule2);
  padding:clamp(54px,8vh,88px) 0 26px }
.foot__g{ display:grid; grid-template-columns:minmax(0,2.4fr) repeat(3,minmax(0,1.4fr));
  gap:clamp(20px,4vw,60px); padding-bottom:clamp(36px,6vh,60px) }
@media(max-width:900px){ .foot__g{ grid-template-columns:1fr 1fr } }
@media(max-width:540px){ .foot__g{ grid-template-columns:1fr } }
.foot__g p{ margin-top:16px; font-size:13px; line-height:1.72; color:var(--grey); max-width:38ch }
.foot__g h5{ margin:0 0 15px; font-family:var(--ff-mono); font-size:9px; font-weight:400;
  letter-spacing:.26em; text-transform:uppercase; color:var(--dim) }
.foot__g ul{ margin:0; padding:0; list-style:none }
.foot__g li{ margin-bottom:10px; font-size:13.5px }
.foot__g li a{ transition:color .4s } .foot__g li a:hover{ color:var(--live) }
.foot__b{ border-top:1px solid var(--rule2); padding-top:20px; display:flex;
  justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.08em; color:var(--dim) }

/* ============================================================
   INTERIOR PAGES
   ============================================================ */
.phead{ padding:clamp(140px,20vh,220px) 0 clamp(44px,7vh,80px); border-bottom:1px solid var(--rule2) }
.phead h1{ font-size:clamp(2.4rem,6.4vw,5.4rem) }
.phead .q{ margin-bottom:20px }
.phead p{ margin-top:20px; max-width:56ch; font-size:15px; line-height:1.72 }

.body{ padding:clamp(52px,9vh,96px) 0 clamp(78px,12vh,146px) }
.body__in{ max-width:740px }
.body__in>*+*{ margin-top:24px }
.body__in p{ font-size:15.5px; line-height:1.78 }
.body__in h2{ font-size:clamp(1.5rem,2.8vw,2.2rem); margin-top:50px }
.body__in h3{ font-size:clamp(1.2rem,2.1vw,1.55rem); margin-top:36px }
.body__in ul,.body__in ol{ padding-left:1.15em }
.body__in li{ margin-bottom:8px; font-size:15px; line-height:1.7 }
.body__in img{ margin:32px 0 }
.body__in blockquote{ margin:32px 0; padding:2px 0 2px 24px; border-left:2px solid var(--live);
  font-family:var(--ff-disp); font-size:19px; line-height:1.4; color:var(--chalk) }
.body__in a{ color:var(--live); border-bottom:1px solid color-mix(in oklab,var(--live) 35%,transparent) }

/* Production spec sheet */
.spec{ border-top:1px solid var(--rule); margin-top:42px; padding-top:20px }
.spec dl{ display:grid; grid-template-columns:clamp(90px,18%,140px) minmax(0,1fr); margin:0 }
.spec dt,.spec dd{ padding:12px 0; border-bottom:1px solid var(--rule2); margin:0 }
.spec dt{ font-family:var(--ff-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim) }
.spec dd{ font-size:14px; color:var(--dust) }

.pagenav{ display:flex; border:1px solid var(--rule2); width:fit-content; margin-top:52px;
  font-family:var(--ff-mono); font-size:12px }
.pagenav .page-numbers{ padding:11px 18px; border-right:1px solid var(--rule2); color:var(--grey);
  transition:background .4s, color .4s }
.pagenav .page-numbers:last-child{ border-right:0 }
.pagenav a.page-numbers:hover{ background:var(--flat); color:var(--chalk) }
.pagenav .page-numbers.current{ color:var(--live) }

.empty{ padding:clamp(46px,8vh,88px) 0; font-size:15px }
.searchform{ display:flex; border:1px solid var(--rule); max-width:440px; margin-top:22px }
.searchform input[type=search]{ flex:1; border:0; background:none; padding:13px 17px;
  font-size:14px; color:var(--chalk); font-family:var(--ff-body) }
.searchform input[type=search]:focus{ outline:none }
.searchform button{ border:0; border-left:1px solid var(--rule); background:none; padding:0 20px;
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.14em; color:var(--grey);
  cursor:pointer; transition:color .4s }
.searchform button:hover{ color:var(--live) }

/* ============================================================
   CURSOR — a follow spot. Fine pointers only.
   ============================================================ */
html.spot, html.spot a, html.spot button{ cursor:none }
html.spot input, html.spot textarea, html.spot select{ cursor:auto }
.sdot,.sring{ position:fixed; top:0; left:0; z-index:999; pointer-events:none;
  border-radius:50%; transform:translate(-50%,-50%) }
.sdot{ width:4px; height:4px; background:var(--live) }
.sring{ width:30px; height:30px; border:1px solid color-mix(in oklab,var(--live) 45%,transparent);
  transition: width .35s var(--ease), height .35s var(--ease), background .35s, border-color .35s }
.sring.big{ width:64px; height:64px; border-color:var(--live);
  background: radial-gradient(closest-side, color-mix(in oklab,var(--live) 10%,transparent), transparent) }
@media(max-width:1000px),(pointer:coarse){
  .sdot,.sring{ display:none!important }
  html.spot, html.spot a, html.spot button{ cursor:auto }
}

/* ============================================================
   REVEALS
   Scroll-driven where supported so the browser runs them off the main
   thread; the IntersectionObserver path in main.js only takes over
   where animation-timeline is missing.
   ============================================================ */
.rv{ opacity:0; transform:translateY(24px);
  transition: opacity 1s var(--slow), transform 1s var(--slow) }
.rv.in{ opacity:1; transform:none }
.rv[data-d="1"]{ transition-delay:.08s } .rv[data-d="2"]{ transition-delay:.16s }
.rv[data-d="3"]{ transition-delay:.24s } .rv[data-d="4"]{ transition-delay:.32s }

@supports (animation-timeline: view()){
  html.sdw .rv{ opacity:1; transform:none; transition:none;
    animation: lift both linear; animation-timeline: view();
    animation-range: entry 8% cover 26% }
  @keyframes lift{ from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:none } }
}

/* Entry animation with no JS at all */
@starting-style{ .cue{ opacity:0 } }
.cue{ opacity:1; transition:opacity .8s var(--ease) }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms!important; animation-iteration-count:1!important;
     transition-duration:.01ms!important }
  .rv{ opacity:1; transform:none }
  .lm>i{ transform:none }
  .credits__t{ animation:none }
  html.sdw .rv{ animation:none }
}