/* Dingbat Labs — proposal C, "Reel".
   The site as a film about four games: main titles over the real black hole,
   a curved reel of the games, one chapter per game, the cast, end credits. */

:root{
  --ink:#05040a; --ink2:#0a0810; --ink3:#121019;
  --fg:#f4ede6; --mut:#b9aba4; --dim:#948580;      /* mut 8.6:1, dim 5.6:1 on ink */
  --ember:#ff6a2a; --amber:#ffab4d; --cream:#ffd9a0;
  --line:rgba(255,217,160,.14); --line2:rgba(255,217,160,.26);
  --accent:#ffab4d;

  --disp:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

  --gut:clamp(16px,4vw,64px);
  --maxw:1640px;
  --film:cubic-bezier(.16,1,.3,1);
  --cut:cubic-bezier(.76,0,.24,1);
}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
html.is-loading body{overflow:hidden}
html.is-opening,html.is-opening body{overflow:hidden}   /* the timed open plays out in full (main.js boot) */
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
em{font-style:italic}
.mono{font-family:var(--mono);font-weight:400}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
::selection{background:var(--ember);color:var(--ink)}

/* Focus rings are drawn, not left to the UA: the UA ring disappears on black. */
:focus-visible{outline:2px solid var(--cream);outline-offset:4px;border-radius:4px}

.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--cream);color:var(--ink);
  padding:10px 16px;border-radius:999px;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}
.skip:focus{top:16px}

/* SplitText masks clip at the line box; give descenders and italic overhang
   room without moving the layout */
.word-mask,.char-mask,.ch-c-mask{padding:0 .07em .16em 0;margin:0 -.07em -.16em 0}

/* Lenis — recommended base CSS */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}

.eyebrow{display:flex;gap:14px;align-items:baseline;margin:0 0 22px;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.05rem,1.4vw,1.3rem);color:var(--cream)}
.eyebrow .mono{font-style:normal;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ember)}

/* ----------------------------------------------------------- projection */
.projection{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--ink)}
#hole{position:absolute;inset:0;width:100%;height:100%;display:block}
.hole-still{position:absolute;inset:0;display:none;background:#000 url(/assets/hole-still.jpg) center/cover no-repeat}
.nogl #hole{display:none!important}
.nogl .hole-still{display:block}
.projection-vig{position:absolute;inset:0;background:radial-gradient(130% 95% at 50% 50%,transparent 45%,rgba(5,4,10,.72) 100%)}
.projection.is-off{visibility:hidden}

/* ---------------------------------------------------------------- grain
   A 160px noise tile from JS, jittered in steps so it reads as film stock
   rather than sliding. Normal blend: overlay vanishes on near-black. */
.grain{position:fixed;inset:-60px;z-index:90;pointer-events:none;opacity:.075;
  background-image:var(--grain);background-size:160px 160px;animation:grain 1s steps(8) infinite}
@keyframes grain{
  0%{transform:translate(0,0)}12%{transform:translate(-22px,14px)}25%{transform:translate(18px,-30px)}
  37%{transform:translate(-36px,-8px)}50%{transform:translate(30px,26px)}62%{transform:translate(-10px,40px)}
  75%{transform:translate(40px,-18px)}87%{transform:translate(-28px,-36px)}100%{transform:translate(0,0)}}

/* ------------------------------------------------------------ letterbox */
.bars{position:fixed;inset:0;z-index:60;pointer-events:none}
.bar{position:absolute;left:0;right:0;height:50.5svh;background:#000;will-change:transform;transform:scaleY(1)}
.bar-top{top:0;transform-origin:50% 0}
.bar-bot{bottom:0;transform-origin:50% 100%}

/* --------------------------------------------------------------- leader */
.leader{position:fixed;inset:0;z-index:150;display:grid;place-items:center;background:#08070b;color:var(--cream)}
.leader-ring,.leader-sweep{position:absolute;width:min(62vmin,520px);aspect-ratio:1}
.leader-ring{fill:none;stroke:rgba(255,217,160,.32);stroke-width:.6}
.leader-ring line{stroke:rgba(255,217,160,.18)}
.leader-sweep{border-radius:50%;clip-path:circle(43% at 50% 50%);
  background:conic-gradient(from 0deg,rgba(255,171,77,.22) 0deg,rgba(255,171,77,.22) var(--sweep,0deg),transparent var(--sweep,0deg))}
.leader-n{position:relative;font-family:var(--disp);font-weight:800;font-size:min(30vmin,240px);line-height:1;
  color:var(--cream);font-variant-numeric:tabular-nums}
.leader-meta{position:absolute;left:var(--gut);right:var(--gut);bottom:max(28px,4vh);display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
.leader-pct{color:var(--cream);font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;align-items:center;justify-content:space-between;
  padding:max(16px,env(safe-area-inset-top)) var(--gut) 16px;pointer-events:none}
.nav>*{pointer-events:auto}
.nav::before{content:"";position:absolute;inset:0 0 -30px;z-index:-1;pointer-events:none;opacity:var(--navbg,0);
  background:linear-gradient(180deg,rgba(5,4,10,.9),rgba(5,4,10,0));transition:opacity .5s}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--disp);font-weight:800;font-size:1.05rem;
  letter-spacing:.2em;text-transform:uppercase}
.brand img{width:34px;height:34px}
.nav-links ul{display:flex;gap:clamp(18px,2.6vw,40px);list-style:none;margin:0;padding:0}
.nav-links a{position:relative;display:inline-block;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mut);padding:6px 0;transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--cream);
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--film)}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--fg)}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
.menu-btn{display:none;align-items:center;gap:12px;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;padding:10px 0 10px 10px}
.menu-btn i{position:relative;width:22px;height:8px}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .5s var(--film)}
.menu-btn i::before{top:0}.menu-btn i::after{bottom:0}
.menu-btn[aria-expanded=true] i::before{transform:translateY(3.25px) rotate(45deg)}
.menu-btn[aria-expanded=true] i::after{transform:translateY(-3.25px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:65;background:rgba(5,4,10,.97);display:flex;flex-direction:column;justify-content:center;
  padding:110px var(--gut) 40px}
.menu[hidden]{display:none}
.menu ol{list-style:none;margin:0;padding:0}
.menu li{overflow:hidden;border-bottom:1px solid var(--line)}
.menu a{display:flex;align-items:baseline;gap:18px;padding:12px 0;font-family:var(--disp);font-weight:800;
  font-size:clamp(2.6rem,13vw,4.6rem);line-height:1;text-transform:uppercase;letter-spacing:.01em}
.menu small{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--ember);font-weight:400}
.menu-foot{margin:28px 0 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--dim)}

@media (max-width:820px){
  .nav-links{display:none}
  .menu-btn{display:inline-flex}
  .brand{font-size:.92rem;letter-spacing:.16em}
  .brand img{width:30px;height:30px}
}

/* ---------------------------------------------------------------- slate */
.slate{position:fixed;left:var(--gut);right:var(--gut);bottom:max(16px,env(safe-area-inset-bottom));z-index:70;
  display:flex;align-items:center;gap:14px;pointer-events:none;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.slate-dot{width:6px;height:6px;border-radius:50%;background:var(--ember);box-shadow:0 0 12px var(--ember);animation:blink 2s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.slate-tc{color:var(--cream);font-variant-numeric:tabular-nums;letter-spacing:.12em}
.slate-bar{flex:0 1 160px;height:1px;background:var(--line);position:relative;overflow:hidden}
.slate-bar i{position:absolute;inset:0;background:var(--cream);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.slate-scene{margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:620px){.slate-bar{display:none}.slate{font-size:.58rem;gap:10px}}

/* ------------------------------------------------------------- titles */
.titles{position:relative;z-index:2;height:100svh;overflow:hidden}
.title-card{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:0 var(--gut);
  visibility:hidden;opacity:0}
.titles-black{position:absolute;inset:0;background:var(--ink);opacity:0;pointer-events:none}

.card-presents p{margin:0}
.presents-a{font-family:var(--sans);font-weight:500;font-size:clamp(.8rem,1.1vw,1rem);letter-spacing:.62em;
  text-transform:uppercase;color:var(--fg);padding-left:.62em}
.presents-b{font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.4vw,2.2rem);color:var(--cream);margin-top:14px!important}
.card-presents{align-content:center;gap:0}

.card-starring{display:block}
.starring-credit{position:absolute;left:0;right:0;top:calc(var(--lbpx,12svh) + 3svh);display:grid;gap:4px;justify-items:center;z-index:2}
.st-label{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,1.8vw,1.6rem);color:var(--cream)}
.st-names{font-family:var(--disp);font-weight:800;font-size:clamp(2.6rem,6.4vw,6.4rem);line-height:.95;text-transform:uppercase;letter-spacing:.02em}
.st-names b{font-weight:800}
.st-names em{font-family:var(--serif);font-weight:400;text-transform:none;font-size:.46em;color:var(--cream);letter-spacing:0;vertical-align:.35em;margin:0 .2em}
.starring-portrait{position:absolute;left:50%;bottom:var(--lbpx,12svh);margin:0;width:min(78vw,calc(58svh * 1600 / 1420),1080px);translate:-50% 0;
  /* stands on the bottom letterbox bar and fades only the chests into it.
     Luna's chin is at ~84% of the cut-out: it used to sit behind the bar
     and inside a fade that ran 52-86%, so her chin was gone (Scott, 2026-10-02) */
  -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent 100%);mask-image:linear-gradient(180deg,#000 88%,transparent 100%)}
/* the glow is a separate gradient, not filter:drop-shadow — a filter on a
   masked image composites as a dark slab over the canvas in some renderers */
.starring-portrait img{width:100%;height:auto;position:relative}
.starring-portrait::before{content:"";position:absolute;inset:18% 6% 0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,106,42,.22),transparent);filter:blur(10px)}
.dog-note{position:absolute;margin:0;display:grid;gap:2px;text-align:left;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mut);z-index:2}
.dog-note span{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:1.35rem;color:var(--cream)}
/* each note ends 16px outside the portrait, anchored by its inner edge: anchored
   by the outer one, Luna's ran in under her ear (half-width = width/2 above).
   On a window too narrow for that, min() keeps them on screen (12rem ~ a note). */
.note-luna{right:min(calc(50% + min(39vw,29svh * 1600 / 1420,540px) + 16px),calc(100% - var(--gut) - 12rem));bottom:calc(var(--lbpx,12svh) + 18svh);text-align:right;justify-items:end}
.note-zeus{left:min(calc(50% + min(39vw,29svh * 1600 / 1420,540px) + 16px),calc(100% - var(--gut) - 12rem));bottom:calc(var(--lbpx,12svh) + 30svh)}
@media (max-width:700px){
  .dog-note{display:none}
  .starring-portrait{width:min(112vw,620px)}
}

.card-title{align-content:center}
.title-wrap{display:grid;justify-items:center;will-change:transform}
.title-kicker{margin:0 0 clamp(14px,2vh,24px);font-family:var(--mono);font-size:.68rem;letter-spacing:.42em;text-transform:uppercase;color:var(--ember);overflow:hidden}
.title-kicker span{display:inline-block;padding-left:.42em}
.title-h{margin:0;font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:.8;letter-spacing:-.005em;
  font-size:clamp(4.4rem,min(17vw,27svh),19rem);display:flex;flex-wrap:wrap;justify-content:center;column-gap:.18em}
.title-h .tl{display:block}
.title-h .tl-a{color:#fff}
.title-h .tl-b{background:linear-gradient(96deg,var(--cream),var(--amber) 36%,var(--ember) 72%,#ff2d1c);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* SplitText chars inherit the gradient only if each carries it; clip per char instead */
.title-h .tl-b .ch-c{background:inherit;-webkit-background-clip:text;background-clip:text}
.title-sub{margin:clamp(16px,2.6vh,30px) 0 0;max-width:34ch;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.15rem,1.9vw,1.8rem);line-height:1.3;color:var(--cream)}
.title-extras{position:absolute;inset:0;pointer-events:none}
.title-extras>*{pointer-events:auto}
.billing{position:absolute;left:50%;bottom:calc(var(--lbpx,12svh) + 5svh);transform:translateX(-50%);width:min(860px,88vw);margin:0;
  font-family:var(--disp);font-weight:600;font-size:clamp(.72rem,1vw,.92rem);line-height:1.05;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(244,237,230,.42);text-align:center;text-wrap:balance}
.billing b{font-weight:900;color:rgba(244,237,230,.7)}
.roll-cue{position:absolute;right:var(--gut);bottom:calc(var(--lbpx,12svh) + 5svh);display:flex;flex-direction:column;align-items:center;gap:12px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);writing-mode:vertical-rl}
.roll-cue i{width:1px;height:46px;background:linear-gradient(180deg,var(--ember),transparent);animation:drip 2.4s var(--cut) infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:900px),(max-height:1040px){.billing{display:none}}
@media (max-width:620px){.title-h{font-size:min(22vw,22svh)}.title-kicker{letter-spacing:.3em}}
@media (max-width:620px){.roll-cue{right:50%;translate:50% 0;writing-mode:horizontal-tb;flex-direction:column-reverse}.roll-cue i{height:30px}}

.tagline{margin:0;font-family:var(--serif);font-size:clamp(2.2rem,6vw,6.4rem);line-height:1.02;letter-spacing:-.01em;max-width:14ch;color:var(--fg)}
.tagline em{color:var(--cream)}

/* ---------------------------------------------------------------- work */
.work{position:relative;z-index:3;background:var(--ink)}
.work-stage{position:relative;height:100svh;overflow:hidden;isolation:isolate}
.work-bleed{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(70% 55% at 50% 58%,color-mix(in oklab,var(--accent) 22%,transparent),transparent 70%),
    radial-gradient(120% 80% at 50% 120%,color-mix(in oklab,var(--accent) 14%,transparent),transparent 60%),
    var(--ink)}
.reel-gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;opacity:0}
/* scrims so the type holds over bright frames, under the type, over the reel */
.work-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(48% 38% at 0% 18%,rgba(5,4,10,.78),transparent 70%),
  radial-gradient(52% 40% at 0% 88%,rgba(5,4,10,.82),transparent 70%),
  linear-gradient(180deg,rgba(5,4,10,.5),transparent 18%,transparent 82%,rgba(5,4,10,.6))}
.work.is-strip .work-stage::after{display:none}
.work-head{position:absolute;left:var(--gut);top:clamp(86px,13svh,150px);z-index:2;pointer-events:none}
.work-head h2{margin:0;font-family:var(--disp);font-weight:800;text-transform:uppercase;line-height:.88;
  font-size:clamp(2.6rem,4.6vw,5rem);letter-spacing:.005em}
.work-note{margin:14px 0 0;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,237,230,.55)}
.work-head h2 em{font-family:var(--serif);font-weight:400;text-transform:none;color:var(--cream);font-size:.86em;letter-spacing:-.01em}
.work-caption{position:absolute;left:var(--gut);bottom:clamp(64px,10svh,110px);z-index:2;display:grid;gap:4px;pointer-events:none}
.wc-num{font-size:.68rem;letter-spacing:.24em;color:var(--accent);transition:color .6s}
.wc-name-mask{display:block;overflow:hidden;padding-bottom:.04em}
.wc-name{display:block;font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:.9;
  font-size:clamp(3rem,6.2vw,7rem)}
.wc-meta{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.wc-status::before{content:"● ";color:var(--accent)}
.work-hint{position:absolute;right:var(--gut);top:clamp(96px,14svh,160px);z-index:2;display:flex;gap:18px;margin:0;
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.work-hint span+span::before{content:"/";margin-right:18px;color:var(--line2)}
.work-index{position:absolute;right:var(--gut);bottom:clamp(64px,10svh,110px);z-index:2}
.work-index ol{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.work-index button{position:relative;display:grid;gap:6px;text-align:left;padding:10px 12px 12px;min-width:118px;border-radius:12px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);transition:color .4s,background .4s}
.work-index button b{font-family:var(--disp);font-weight:800;font-size:1.15rem;letter-spacing:.06em;color:var(--mut);transition:color .4s}
.work-index button::before{content:"";height:2px;border-radius:2px;background:var(--line);order:-1;transition:background .4s}
.work-index button[aria-current=true]{color:var(--fg)}
.work-index button[aria-current=true] b{color:var(--fg)}
.work-index button[aria-current=true]::before{background:var(--g)}
.work-index button:hover{background:rgba(255,255,255,.04)}
@media (max-width:1180px){.work-index button{min-width:0}.work-index button span{display:none}}

/* film strip: phones and no-WebGL */
.strip{display:none}
.work.is-strip .work-stage{height:auto;min-height:0;padding:clamp(96px,16vh,140px) 0 clamp(80px,12vh,120px)}
.work.is-strip .reel-gl,.work.is-strip .work-caption,.work.is-strip .work-index,.work.is-strip .work-hint{display:none}
.work.is-strip .work-head{position:relative;left:auto;top:auto;padding:0 var(--gut);margin-bottom:34px}
.work.is-strip .strip{display:block}
.strip-track{list-style:none;margin:0;padding:22px var(--gut);display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--gut);overscroll-behavior-x:contain;scrollbar-width:none;
  /* sprocket holes, top and bottom, as a repeating mask-free gradient */
  background:
    radial-gradient(circle at 50% 50%,var(--ink) 3.5px,transparent 4px) 0 6px/22px 12px repeat-x,
    radial-gradient(circle at 50% 50%,var(--ink) 3.5px,transparent 4px) 0 calc(100% - 6px)/22px 12px repeat-x,
    #16131c;
  background-attachment:local}
.strip-track::-webkit-scrollbar{display:none}
.strip-track li{flex:0 0 min(56vw,280px);scroll-snap-align:start}
.strip-frame{display:block;width:100%;text-align:left;background:#000;border-radius:6px;overflow:hidden;position:relative}
.strip-frame img{width:100%;aspect-ratio:506/1100;object-fit:cover;opacity:.92}
.strip-frame .sf-cap{position:absolute;left:0;right:0;bottom:0;padding:60px 16px 16px;display:grid;gap:2px;
  background:linear-gradient(180deg,transparent,rgba(5,4,10,.92) 60%)}
.sf-cap small{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--g)}
.sf-cap b{font-family:var(--disp);font-weight:900;font-size:2.2rem;line-height:.9;text-transform:uppercase}
.sf-cap span{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}

/* ------------------------------------------------------------ chapters */
.chapters{position:relative;z-index:3;background:var(--ink)}
.ch{position:relative;overflow:hidden;min-height:100svh;--accent:#fff;isolation:isolate}
.ch-bleed{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60% 70% at 72% 58%,color-mix(in oklab,var(--accent) 30%,transparent),transparent 68%),
    radial-gradient(90% 60% at 20% 110%,color-mix(in oklab,var(--accent) 12%,transparent),transparent 70%)}
.ch-num{position:absolute;z-index:-1;right:-.04em;top:50%;translate:0 -52%;pointer-events:none;
  font-family:var(--disp);font-weight:900;line-height:.74;font-size:min(62svh,46vw);letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px color-mix(in oklab,var(--accent) 70%,transparent);opacity:.55}
.ch-inner{position:relative;max-width:var(--maxw);margin:0 auto;min-height:100svh;padding:clamp(100px,14svh,150px) var(--gut) clamp(70px,10svh,110px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,96px);align-items:center}
.ch-copy{max-width:600px;container-type:inline-size}
.ch-eyebrow{margin:0 0 18px;display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.ch-eyebrow em{font-family:var(--serif);font-size:clamp(1.2rem,1.6vw,1.5rem);color:var(--accent)}
.ch-eyebrow .mono{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
/* nowrap and sized to the column: the per-letter split let "Mezzotin|t" break
   mid-word. Measured: the longest name is 4.59em of Big Shoulders 900, so 21cqi fits. */
.ch-name{margin:0;font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:.82;
  font-size:min(clamp(3.6rem,8.4vw,10rem),21cqi);letter-spacing:-.005em;white-space:nowrap}
.ch-line{margin:22px 0 0;font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2.4rem);line-height:1.12;color:var(--fg);max-width:32ch;text-wrap:balance}
.ch-blurb{margin:22px 0 0;color:var(--mut);max-width:50ch;font-size:clamp(.98rem,1.05vw,1.08rem);line-height:1.7}
.ch-facts{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:0;max-width:480px}
.ch-facts li{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
.ch-facts li:last-child{border-bottom:1px solid var(--line)}
.ch-facts li span{color:var(--dim)}
.ch-foot{margin-top:28px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.status{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent)}
.btn-open{display:inline-flex;align-items:center;gap:12px;padding:14px 22px;border-radius:999px;border:1px solid color-mix(in oklab,var(--accent) 60%,transparent);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg);transition:background .4s,color .4s,border-color .4s}
.btn-open:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.btn-open i{font-style:normal;transition:transform .5s var(--film)}
.btn-open:hover i{transform:translateX(4px)}

.ch-phones{position:relative;height:min(76svh,820px);min-height:420px}
.ch-phones .phone{position:absolute;top:50%;left:50%}
.ch-phones .p-front{width:min(18vw,25svh,330px);translate:-50% -50%;z-index:3}
.ch-phones .p-back{width:min(14vw,20svh,270px);translate:-128% -62%;z-index:1}
.ch-phones .p-mid{width:min(15vw,21svh,285px);translate:30% -36%;z-index:2}

/* a CSS iPhone: bezel, glass edge, island */
.phone{margin:0;padding:3.2%;border-radius:15% / 7%;background:linear-gradient(145deg,#2a2730,#0c0b10 45%,#1d1b22);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 0 0 1.5px #000,0 40px 90px -30px rgba(0,0,0,.9),
    0 30px 120px -40px color-mix(in oklab,var(--accent) 55%,transparent)}
.phone .screen{position:relative;border-radius:12.6% / 5.8%;overflow:hidden;background:#000}
.phone .screen::after{content:"";position:absolute;left:50%;top:1.6%;width:29%;height:2.6%;transform:translateX(-50%);border-radius:99px;background:#000}
.phone img{width:100%;aspect-ratio:506/1100;object-fit:cover}

/* Desktop: the four chapters share one pinned stage and dissolve into one
   another (phones occupy identical frames, so the dissolve is a match cut). */
.chapters.staged{height:100svh}
.chapters.staged .ch{position:absolute;inset:0}
.chapters.staged .ch:not(:first-child){opacity:0;pointer-events:none}

@media (max-width:959px){
  .ch-inner{grid-template-columns:1fr;gap:40px;align-content:center}
  .ch-num{font-size:min(70vw,52svh);top:clamp(70px,12svh,120px);translate:none;right:-.06em}
  .ch-phones{height:auto;min-height:0;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gut) * -1);
    padding:10px var(--gut) 30px;scrollbar-width:none}
  .ch-phones::-webkit-scrollbar{display:none}
  .ch-phones .phone{position:relative;top:auto;left:auto;translate:none;flex:0 0 min(56vw,250px);width:auto;scroll-snap-align:center}
  .ch-phones .p-front{order:-1}
}

/* ------------------------------------------------------------- studio */
.studio{position:relative;z-index:3;background:var(--ink);padding:clamp(110px,16vh,190px) 0 clamp(80px,12vh,150px)}
.studio-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
/* "Two dogs, one standard, / infinite density." -- the first line is 10.07em of
   Big Shoulders 900, so 9.6cqi of the header holds it on one line; a 16ch cap
   had broken it into three with "standard," alone. Phones let it wrap. */
.studio-head{container-type:inline-size}
.studio-head h2{margin:0;max-width:none;text-wrap:balance;font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:.86;
  font-size:min(clamp(3rem,7.4vw,8.6rem),9.6cqi)}
@media(max-width:760px){.studio-head h2{font-size:clamp(2.4rem,11vw,3.4rem)}.studio-head .br-wide{display:none}}
.studio-head h2 em{display:inline;font-family:var(--serif);font-weight:400;text-transform:none;color:var(--cream);font-size:.84em;letter-spacing:-.01em}

.cast{margin-top:clamp(56px,9vh,110px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(30px,5vw,90px);align-items:end}
.cast-still{margin:0}
/* 1.85:1, not 2.39: the two faces span ~780 of the portrait's 1420 px, and a
   2.39 frame shows ~590 of them, which cut Luna off at the nose */
.cast-frame{position:relative;aspect-ratio:1.85/1;overflow:hidden;border-radius:4px;
  background:radial-gradient(80% 120% at 50% 100%,rgba(255,106,42,.32),transparent 70%),radial-gradient(60% 80% at 50% 0%,#1a1018,#07060b)}
.cast-frame::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--line);border-radius:inherit;pointer-events:none}
/* cover-cropped to the faces; object-position, not offsets, so a final
   portrait of a similar aspect drops in under the same filename */
.cast-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 76%;will-change:transform}
.cast-still figcaption{margin-top:14px;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.cast-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(26px,4vh,44px)}
.cast-card{padding-top:20px;border-top:1px solid var(--line2)}
.cast-card h3{margin:0;font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(3rem,5vw,5.6rem);line-height:.84}
.cast-as{margin:0 0 6px;font-family:var(--disp);font-weight:700;font-size:.95rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.cast-as em{font-family:var(--serif);font-weight:400;font-size:1.25rem;letter-spacing:0;text-transform:none;color:var(--cream)}
.cast-trait{margin:12px 0 10px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ember)}
.cast-card p:last-child{margin:0;color:var(--mut);max-width:46ch}

.statement{margin:clamp(110px,18vh,220px) auto 0;max-width:26ch;font-family:var(--serif);
  font-size:clamp(2rem,4.4vw,4.6rem);line-height:1.08;letter-spacing:-.012em;text-align:center;color:var(--fg)}
.notes{margin:clamp(100px,16vh,190px) 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:clamp(24px,4vw,70px)}
.notes-h{margin:0;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ember);font-weight:400}
.notes ol{list-style:none;margin:0;padding:0}
.notes li{position:relative;display:grid;grid-template-columns:70px 1fr;gap:16px;padding:22px 0;align-items:baseline;
  font-family:var(--disp);font-weight:700;font-size:clamp(1.4rem,2.4vw,2.4rem);line-height:1.08;text-transform:uppercase;letter-spacing:.01em}
.notes li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line2);transform-origin:0 50%;transform:scaleX(var(--draw,1))}
.notes li b{font-size:.7rem;letter-spacing:.2em;color:var(--dim);font-weight:400}
@media (max-width:900px){
  .cast{grid-template-columns:1fr}
  .notes{grid-template-columns:1fr}
  .notes li{grid-template-columns:44px 1fr}
}

/* ------------------------------------------------------------ credits */
.credits{position:relative;z-index:2;background:linear-gradient(180deg,var(--ink) 0,rgba(5,4,10,0) 40svh);text-align:center}
.roll{padding:clamp(140px,26vh,280px) var(--gut) 10svh}
.roll-head{margin:0 0 clamp(60px,10vh,110px);font-family:var(--disp);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.2rem,4.6vw,4.6rem);line-height:.9}
.roll-head em{font-family:var(--serif);font-weight:400;text-transform:none;color:var(--cream);font-size:.66em}
.roll-list{margin:0 auto;max-width:760px;display:grid;gap:clamp(22px,3.4vh,36px)}
.roll-list div{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px);align-items:baseline}
.roll-list dt{text-align:right;font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
.roll-list dd{margin:0;text-align:left;font-family:var(--disp);font-weight:700;font-size:clamp(1.25rem,2vw,1.8rem);line-height:1.08;
  text-transform:uppercase;letter-spacing:.04em;text-shadow:0 1px 2px #000,0 0 24px rgba(0,0,0,.9)}
.roll-list dt,.roll-note,.roll-head{text-shadow:0 1px 2px #000,0 0 18px rgba(0,0,0,.95)}
.roll-note{margin:clamp(80px,14vh,140px) auto 0;font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,1.7vw,1.5rem);color:var(--cream);line-height:1.4}
.final{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  padding:16svh var(--gut) 22svh}
.final-mark{width:56px;height:56px;margin-bottom:28px}
.final .eyebrow{justify-content:center;margin-bottom:14px}
.final-mail{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(1.9rem,min(4.6vw,8svh),5rem);line-height:.95;
  letter-spacing:.005em;display:inline-block;padding:0 .1em;background:linear-gradient(var(--cream),var(--cream)) 0 100%/0 2px no-repeat;
  transition:background-size .7s var(--film),color .4s;overflow-wrap:anywhere}
.final-mail:hover,.final-mail:focus-visible{background-size:100% 2px;color:var(--cream)}
.final-support{margin:28px 0 0;color:var(--mut);max-width:44ch;line-height:1.7}
.final-support a{color:var(--cream);border-bottom:1px solid var(--line2)}
.final-support a:hover{border-color:var(--cream)}
.final-legal{margin:26px 0 0;display:flex;gap:24px;flex-wrap:wrap;justify-content:center;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase}
.final-legal a{color:var(--cream);padding:6px 0;border-bottom:1px solid var(--line2);transition:border-color .3s}
.final-legal a:hover{border-color:var(--cream)}
.final-copy{margin:22px 0 0;font-size:.82rem;color:var(--dim)}

/* --------------------------------------------------------- chapter view */
.cv{position:fixed;inset:0;z-index:80;--accent:#fff}
.cv[hidden]{display:none}
.cv-bg{position:absolute;inset:0;background:
  radial-gradient(70% 80% at 74% 60%,color-mix(in oklab,var(--accent) 26%,transparent),transparent 70%),
  radial-gradient(80% 60% at 0% 100%,color-mix(in oklab,var(--accent) 10%,transparent),transparent 70%),#07060b}
.cv-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain}
.cv-top{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;
  padding:max(18px,env(safe-area-inset-top)) var(--gut) 14px}
.cv-chapter{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.cv-close{display:inline-flex;align-items:center;gap:12px;padding:12px 18px;border-radius:999px;border:1px solid var(--line2);
  background:rgba(5,4,10,.6);backdrop-filter:blur(10px);font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;transition:border-color .3s}
.cv-close:hover{border-color:var(--cream)}
.cv-close i{position:relative;width:12px;height:12px}
.cv-close i::before,.cv-close i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;transform:rotate(45deg)}
.cv-close i::after{transform:rotate(-45deg)}
.cv-body{max-width:var(--maxw);margin:0 auto;padding:clamp(10px,4vh,50px) var(--gut) 30px;display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:clamp(30px,5vw,90px);align-items:center;min-height:calc(100svh - 170px)}
.cv-id{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.cv-icon{width:60px;height:60px;border-radius:23%;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 14px 40px -10px color-mix(in oklab,var(--accent) 60%,transparent)}
.cv-kind{margin:0;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.cv-name{margin:0;font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:.82;font-size:clamp(3.4rem,7.4vw,8.6rem)}
.cv-line{margin:20px 0 0;font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.2vw,2.2rem);line-height:1.15;color:var(--accent);max-width:32ch;text-wrap:balance}
.cv-blurb{margin:20px 0 0;color:var(--mut);max-width:48ch;line-height:1.7}
.cv-facts{list-style:none;margin:24px 0 0;padding:0;max-width:440px}
.cv-facts li{padding:10px 0;border-top:1px solid var(--line);font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.cv-facts li:last-child{border-bottom:1px solid var(--line)}
.cv-status{margin:22px 0 0}
.cv-phones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,28px);align-items:center;justify-items:center}
.cv-phones .phone{width:min(100%,30svh)}
.cv-phones .phone:nth-child(even){translate:0 8%}
.cv-nav{max-width:var(--maxw);margin:0 auto;padding:10px var(--gut) max(40px,8vh);display:flex;justify-content:space-between;gap:20px}
.cv-nav button{display:inline-flex;gap:12px;align-items:center;font-family:var(--disp);font-weight:800;font-size:clamp(1.2rem,2vw,1.8rem);
  text-transform:uppercase;letter-spacing:.04em;color:var(--mut);padding:10px 0;transition:color .3s}
.cv-nav button:hover{color:var(--fg)}
.cv-nav i{font-style:normal;font-family:var(--mono);font-size:.8em}
@media (max-width:1000px){
  .cv-body{grid-template-columns:1fr;min-height:0}
  .cv-phones{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gut) * -1);padding:10px var(--gut) 30px;scrollbar-width:none}
  .cv-phones::-webkit-scrollbar{display:none}
  .cv-phones .phone{flex:0 0 min(58vw,260px);scroll-snap-align:center;translate:none}
}
.flip-clone{position:fixed;z-index:85;margin:0;object-fit:cover;pointer-events:none;will-change:transform,width,height}
html.cv-open{overflow:hidden}

/* --------------------------------------------------------------- cursor */
.cursor{display:none}
html.has-cursor .cursor{display:block;position:fixed;left:0;top:0;z-index:120;pointer-events:none}
html.has-cursor,html.has-cursor a,html.has-cursor button,html.has-cursor .reel-gl{cursor:none}
.cursor-dot{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--cream)}
.cursor-ring{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:1px solid rgba(255,217,160,.5);
  display:grid;place-items:center;transition:width .5s var(--film),height .5s var(--film),margin .5s var(--film),background-color .4s,border-color .4s}
.cursor-label{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .3s;padding-left:.2em}
.cursor[data-state=link] .cursor-ring{width:58px;height:58px;margin:-29px 0 0 -29px;border-color:var(--cream);background:rgba(255,217,160,.08)}
.cursor[data-state=drag] .cursor-ring,.cursor[data-state=open] .cursor-ring{width:96px;height:96px;margin:-48px 0 0 -48px}
.cursor[data-state=drag] .cursor-ring{background:rgba(244,237,230,.92);border-color:transparent}
.cursor[data-state=open] .cursor-ring{background:var(--accent);border-color:transparent}
.cursor[data-state=drag] .cursor-label,.cursor[data-state=open] .cursor-label{opacity:1}
.cursor[data-state=drag] .cursor-dot,.cursor[data-state=open] .cursor-dot,.cursor[data-state=link] .cursor-dot{opacity:0}
.cursor.is-down .cursor-ring{transform:scale(.86)}
.cursor.is-hidden{opacity:0}

/* -------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .roll-cue i,.slate-dot{animation:none}
  *{scroll-behavior:auto!important}
}

/* a censor bar's own mask in the chapter names (main.js initChapters): the box is
   the bar's, so layout and baseline are untouched; the clip is let out round the
   bar's 1.2deg tilt, which is why it travels 130% rather than 110% to clear it */
/* inline-grid so the box is exactly the bar's: an inline-block took the name's
   line box, 40% taller, and the outgoing bar stayed visible in the difference */
.redact-mask{display:inline-grid;vertical-align:-.04em;clip-path:inset(-.1em -.3em)}

/* ------------------------------------------------------------ tune the hole
   hole.js builds the panel (.thead/.trows/.k/.tacts); dressed like the slate.
   Native cursor inside: the reel's custom cursor is no use on a slider. */
.tune{position:fixed;right:var(--gut);bottom:52px;z-index:96;width:300px;max-height:calc(100svh - 140px);overflow:auto;
  overscroll-behavior:contain;background:rgba(8,6,12,.94);border:1px solid var(--line);border-radius:6px;
  backdrop-filter:blur(14px);font-family:var(--mono);font-size:.66rem;color:var(--mut);display:none}
.tune.on{display:block}
html.has-cursor .tune, html.has-cursor .tune *{cursor:auto}
html.has-cursor .tune button, html.has-cursor .tune input{cursor:pointer}
.tune .thead{display:flex;justify-content:space-between;align-items:center;padding:11px 13px;
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1;background:rgba(8,6,12,.97)}
.tune .thead b{color:var(--ember);letter-spacing:.2em;font-weight:500}
.tune .thead button{flex:0;padding:4px 9px}
.tune .trows{padding:2px 0 12px}
.tune h3{margin:14px 13px 2px;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.24em;color:var(--dim);text-transform:uppercase}
.tune .k{display:grid;grid-template-columns:1fr auto;gap:2px 8px;margin:9px 0 2px;padding:4px 13px 2px;align-items:center}
.tune .k label{letter-spacing:.08em;color:var(--mut)}
.tune .k output{color:var(--cream);font-variant-numeric:tabular-nums}
.tune .k.ro output{color:var(--amber)}
.tune .k small{grid-column:1/-1;color:var(--dim);font-size:9.5px;line-height:1.35;margin-top:2px}
.tune input[type=range]{grid-column:1/-1;width:100%;height:16px;accent-color:var(--ember);background:transparent;margin:0}
.tune .tacts{display:flex;gap:7px;padding:0 13px 13px}
.tune button{flex:1;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 6px;border-radius:4px;border:1px solid var(--line);background:transparent;color:var(--mut)}
.tune button:hover{border-color:var(--ember);color:var(--cream)}
/* above the slate, below the roll cue's column; over the letterbox bars */
.tunebtn{position:fixed;right:var(--gut);bottom:52px;z-index:71;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);background:rgba(8,6,12,.8);border:1px solid var(--line);
  padding:9px 14px;border-radius:999px;backdrop-filter:blur(8px);transition:opacity .4s,color .2s}
.tunebtn:hover{color:var(--cream);border-color:var(--ember)}
.tunebtn.off,.tunebtn.hide{opacity:0;pointer-events:none}
.tune.off{display:none}
@media (max-width:620px){ .tune{left:12px;right:12px;width:auto;bottom:12px} }