/* =========================================================================
   Season Zero — ON AIR
   Lauren Bush, Creator + Host
   Base: editorial white / chrome / pool aqua. Signal accents per capability.
   ========================================================================= */

/* ---------- fonts (self hosted, no external requests) ---------- */
@font-face{font-family:'Archivo';src:url('../fonts/archivo-var.woff2') format('woff2-variations');
  font-weight:100 900;font-stretch:62% 125%;font-display:swap;}
@font-face{font-family:'ArchivoBlack';src:url('../fonts/archivo-black.woff2') format('woff2');
  font-weight:400;font-display:swap;}
@font-face{font-family:'InterVar';src:url('../fonts/inter-var.woff2') format('woff2-variations');
  font-weight:100 900;font-display:swap;}
@font-face{font-family:'SpaceMono';src:url('../fonts/space-mono-400.woff2') format('woff2');
  font-weight:400;font-display:swap;}

/* ---------- tokens ---------- */
:root{
  --white:#ffffff;
  --paper:#f1f4f6;
  --paper-2:#e6ebee;
  --chrome:#c3ced4;
  --chrome-dim:#9aa8b0;
  --ink:#0d0f13;
  --ink-soft:#3b4149;

  --aqua:#0bbcd0;
  --aqua-deep:#048b9c;
  --pink:#ff1e86;
  --violet:#6a2be0;
  --coral:#ff6a44;
  --amber:#ffab00;

  --bg:var(--white);
  --fg:var(--ink);
  --rule:rgba(13,15,19,.16);
  --panel:rgba(255,255,255,.86);
  --scrim:linear-gradient(180deg,rgba(8,10,14,.42) 0%,rgba(8,10,14,0) 28%,rgba(8,10,14,0) 46%,rgba(8,10,14,.72) 100%);
  --tally:var(--chrome-dim);
  --signal:var(--aqua);

  --f-display:'Archivo','ArchivoBlack','Helvetica Neue',Arial,sans-serif;
  --f-body:'InterVar','Helvetica Neue',Arial,sans-serif;
  --f-mono:'SpaceMono','SFMono-Regular',Consolas,monospace;

  --gut:clamp(16px,3.6vw,44px);
  --maxw:1320px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:.5s;
}

/* Broadcast cue state: the signal goes hot. Not a dark corporate theme, a live state. */
:root[data-cue="broadcast"]{
  --bg:#0b0c10;
  --fg:#f4f7f8;
  --paper:#14161c;
  --paper-2:#1b1e26;
  --rule:rgba(244,247,248,.18);
  --panel:rgba(11,12,16,.82);
  --scrim:linear-gradient(180deg,rgba(4,5,8,.6) 0%,rgba(4,5,8,.1) 30%,rgba(4,5,8,.2) 52%,rgba(4,5,8,.88) 100%);
  --tally:var(--pink);
  --chrome:#39424a;
  --ink-soft:#b3bec6;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--f-body);font-size:clamp(15px,1.02vw,17px);line-height:1.6;
  font-variation-settings:'wght' 400,'opsz' 18;
  -webkit-font-smoothing:antialiased;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit}
:where(button,a,[tabindex]):focus-visible{
  outline:3px solid var(--pink);outline-offset:3px;border-radius:3px;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--pink);color:#fff;
  padding:.8rem 1.2rem;font:700 .85rem/1 var(--f-mono);letter-spacing:.06em;
}
.skip:focus{left:0}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--f-display);margin:0;line-height:.94;text-wrap:balance}
.eyebrow{
  font:400 .72rem/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);display:flex;align-items:center;gap:.6rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--signal);flex:none}
.lede{font-size:clamp(1.05rem,1.5vw,1.32rem);line-height:1.5;color:var(--fg);max-width:62ch}
.muted{color:var(--ink-soft)}
.mono{font-family:var(--f-mono);letter-spacing:.08em;text-transform:uppercase;font-size:.72rem}

/* =========================================================================
   MASTHEAD
   ========================================================================= */
.rig{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;gap:var(--gut);
  padding:.7rem var(--gut);
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  border-bottom:1px solid var(--rule);
  backdrop-filter:saturate(1.4) blur(14px);
}
.wordmark{
  font-family:var(--f-display);font-variation-settings:'wght' 800,'wdth' 68;
  font-size:1.02rem;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;
  display:flex;align-items:center;gap:.5rem;white-space:nowrap;
}
.tally{
  width:9px;height:9px;border-radius:50%;background:var(--tally);flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--tally) 60%,transparent);
}
:root[data-cue="broadcast"] .tally{animation:pulse 2s var(--ease) infinite}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pink) 55%,transparent)}
  50%{box-shadow:0 0 0 7px rgba(255,30,134,0)}
}
.rig nav{margin-left:auto;display:flex;align-items:center;gap:1.5rem}
.rig nav a{
  font:400 .74rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-soft);padding:.4rem 0;border-bottom:2px solid transparent;
}
.rig nav a:hover{color:var(--fg);border-color:var(--signal)}
.rig .book{
  background:var(--pink);color:#fff;border:0;padding:.62rem 1.05rem;text-decoration:none;
  font:400 .72rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
  border-bottom:0;white-space:nowrap;
}
.rig .book:hover{background:var(--ink);color:var(--white)}
:root[data-cue="broadcast"] .rig .book:hover{background:var(--white);color:var(--ink)}
@media (max-width:860px){.rig nav .hide-sm{display:none}}

/* =========================================================================
   LAYER 1 — THE STAGE (ON AIR first viewport)
   One authored world. The live vertical plate dominates, off-centre and
   bleeding past the frame; real evidence sits behind it at other scales;
   identity resolves inside the lower third as a broadcast name super;
   TUNE is a vertical rail, not a strip under the picture.
   ========================================================================= */
.stage{
  position:relative;min-height:100svh;min-height:100vh;overflow:clip;isolation:isolate;
  background:var(--paper);
  transition:background var(--dur) var(--ease);
  --rail:clamp(104px,9vw,136px);
  --plate-h:108svh;
  --plate-w:calc(var(--plate-h) * 9 / 16);
  --plate-right:clamp(28px,7vw,120px);
}
.stage::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 70% at 88% 8%,color-mix(in srgb,var(--signal) 16%,transparent) 0%,transparent 62%),
    repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px 96px);
  opacity:.9;transition:background var(--dur) var(--ease);
}

/* ---- the live plate: native vertical aspect, never force-cropped ---- */
.signals{
  position:absolute;z-index:2;
  top:-6svh;height:var(--plate-h);
  right:var(--plate-right);width:var(--plate-w);
  background:#0b0c10;overflow:hidden;
  box-shadow:0 40px 90px rgba(10,12,18,.34);
}
.signal{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity .42s var(--ease)}
.signal[data-active]{opacity:1;visibility:visible}
.signal video,.signal img.plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.signal[data-lane="host"] video,.signal[data-lane="host"] img.plate{object-position:32% 42%}
.signal[data-lane="create"] video,.signal[data-lane="create"] img.plate{object-position:50% 58%}
.signal[data-lane="explain"] img.plate{object-position:47% 24%}
.signal[data-lane="activate"] img.plate{object-position:53% 40%}
.signal::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,8,11,.55) 0,rgba(6,8,11,0) 26%,rgba(6,8,11,0) 58%,rgba(6,8,11,.7) 100%);
}
.sigbug{
  position:absolute;z-index:3;left:0;top:clamp(78px,11svh,120px);
  display:flex;align-items:center;gap:.5rem;
  background:var(--signal);color:#06171b;
  font:400 .6rem/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  padding:.45rem .7rem .45rem .6rem;
}
.sigbug .rec{width:7px;height:7px;border-radius:50%;background:#06171b}
:root[data-cue="broadcast"] .sigbug{background:var(--pink);color:#fff}
:root[data-cue="broadcast"] .sigbug .rec{background:#fff;animation:pulse 2s var(--ease) infinite}
.monitor-foot{
  position:absolute;z-index:3;left:0;right:0;bottom:0;padding:.7rem .8rem 1.4rem;
  color:#fff;font:400 .56rem/1.5 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  display:flex;justify-content:space-between;gap:.8rem;align-items:flex-end;
}
.monitor-foot .mute{border:1px solid rgba(255,255,255,.45);padding:.25rem .4rem}

/* source monitor inside a still-led signal */
.srcmon{
  position:absolute;right:10px;bottom:64px;width:56%;z-index:4;margin:0;
  border:1px solid rgba(255,255,255,.5);background:#000;box-shadow:0 14px 34px rgba(0,0,0,.5);
}
.srcmon video{position:static;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.srcmon figcaption{
  font:400 .5rem/1.35 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:rgba(0,0,0,.8);padding:.3rem .4rem;
}

/* ---- evidence field: real frames, other scales, off-axis, partly cropped ---- */
.field{position:absolute;inset:0;z-index:1;pointer-events:none}
.field figure{position:absolute;margin:0;overflow:hidden;background:#0b0c10;
  box-shadow:0 18px 40px rgba(10,12,18,.2)}
.field img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.field figure::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--signal);z-index:2}
.field figure::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--paper) 34%,transparent)}
:root[data-cue="broadcast"] .field figure::after{background:rgba(8,10,14,.42)}
.field .f1{left:calc(var(--rail) - clamp(30px,3vw,54px));top:4svh;width:clamp(140px,14vw,206px);aspect-ratio:9/16}
.field .f2{left:calc(var(--rail) + 9vw);top:calc(11svh + 30px);width:clamp(120px,12vw,182px);aspect-ratio:9/16}
.field .f3{left:calc(var(--rail) + 20vw);top:-5svh;width:clamp(160px,18vw,278px);aspect-ratio:3/4}

/* ---- ring mark, straddling the plate's top-left corner ---- */
.rings{
  position:absolute;z-index:5;pointer-events:none;
  right:calc(var(--plate-right) + var(--plate-w) - clamp(38px,3.4vw,58px));
  top:clamp(120px,22svh,250px);
}
.rings svg{width:clamp(76px,8vw,124px);height:auto;display:block}
.rings circle{fill:none;stroke:var(--signal)}
.rings .r-spin{transform-origin:50% 50%;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- timecode ---- */
.timecode{
  position:absolute;z-index:6;top:clamp(72px,9svh,104px);left:calc(var(--rail) + clamp(14px,2vw,26px));
  font:400 .66rem/1 var(--f-mono);letter-spacing:.16em;color:var(--ink-soft);
  display:flex;align-items:center;gap:.55rem;margin:0;
  background:var(--bg);padding:.45rem .6rem;border:1px solid var(--rule);
}
.timecode .dot{width:7px;height:7px;border-radius:50%;background:var(--tally)}
.timecode .live{color:var(--pink)}

/* ---- lower third: the identity resolves here ---- */
.stage-inner{
  position:absolute;z-index:6;left:calc(var(--rail) + clamp(14px,2vw,26px));
  bottom:clamp(30px,7svh,74px);width:min(608px,50vw);
}
.lower-third{
  display:flex;align-items:stretch;background:var(--bg);
  border:1px solid var(--rule);border-left:0;
  box-shadow:0 26px 64px rgba(13,15,19,.16);
}
.lower-third .bars{width:9px;flex:none;display:flex;flex-direction:column}
.lower-third .bars span{flex:1}
.lt-body{padding:0 0 1rem;min-width:0;flex:1}
.name-super{
  padding:1rem clamp(.95rem,1.5vw,1.3rem) .9rem;
  border-bottom:1px solid var(--rule);
  background:linear-gradient(90deg,color-mix(in srgb,var(--signal) 12%,transparent),transparent 62%);
}
.name-super h1{
  font-variation-settings:'wght' 850,'wdth' 64;
  font-size:clamp(1.9rem,3.1vw,2.85rem);letter-spacing:-.018em;text-transform:uppercase;line-height:.9;
}
.name-super h1 .sub{
  display:block;font-variation-settings:'wght' 500,'wdth' 92;
  font-size:clamp(.72rem,.92vw,.86rem);letter-spacing:.24em;margin-top:.5rem;color:var(--ink-soft);
}
.promise{
  margin:.55rem 0 0;font-family:var(--f-display);
  font-variation-settings:'wght' 550,'wdth' 100;font-style:italic;
  font-size:clamp(.95rem,1.35vw,1.18rem);line-height:1.15;
}
.promise b{font-variation-settings:'wght' 820,'wdth' 100;color:var(--aqua-deep);font-style:normal}
:root[data-cue="broadcast"] .promise b{color:var(--signal)}
.lt-kicker{
  margin:.85rem 0 0;padding:0 clamp(.95rem,1.5vw,1.3rem);
  font:400 .58rem/1.4 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--aqua-deep);display:flex;gap:.4rem;align-items:baseline;flex-wrap:wrap;
}
:root[data-cue="broadcast"] .lt-kicker{color:var(--signal)}
.lt-title{
  font-family:var(--f-display);font-variation-settings:'wght' 780,'wdth' 74;
  font-size:clamp(1rem,1.55vw,1.3rem);text-transform:uppercase;
  margin:.28rem 0 .3rem;padding:0 clamp(.95rem,1.5vw,1.3rem);line-height:1.02;
}
.lt-stamp{
  margin:0;padding:0 clamp(.95rem,1.5vw,1.3rem);
  font:400 .58rem/1.55 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
}
.lt-stamp .lbl{color:var(--ink-soft);display:block;font-size:.52rem;letter-spacing:.2em;margin-bottom:.1rem}
.cap-note{margin:.55rem 0 0;padding:0 clamp(.95rem,1.5vw,1.3rem);
  font:400 .78rem/1.5 var(--f-body);color:var(--ink-soft);max-width:50ch}
.lt-actions{display:flex;gap:.45rem;margin-top:.85rem;padding:0 clamp(.95rem,1.5vw,1.3rem);flex-wrap:wrap}
.lt-actions button,.lt-actions a{
  font:400 .64rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  padding:.58rem .8rem;border:1px solid var(--rule);background:transparent;color:var(--fg);
  cursor:pointer;text-decoration:none;
}
.lt-actions .primary{background:var(--ink);border-color:var(--ink);color:var(--white);font-weight:700}
:root[data-cue="broadcast"] .lt-actions .primary{background:var(--pink);border-color:var(--pink)}
.lt-actions button:hover,.lt-actions a:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.lt-actions .primary:hover{background:var(--signal);border-color:var(--signal);color:#06171b}

/* ---- TUNE rail ---- */
.deck{
  position:absolute;z-index:7;left:0;top:0;bottom:0;width:var(--rail);
  border-right:1px solid var(--rule);background:var(--bg);
  transition:background var(--dur) var(--ease);
}
.deck-inner{
  height:100%;display:flex;flex-direction:column;justify-content:center;gap:1.1rem;
  padding:clamp(64px,9svh,96px) 0 1.2rem;
}
.rail-label{
  margin:0;position:absolute;top:clamp(74px,9.4svh,108px);left:50%;transform:translateX(-50%);
  font:400 .58rem/1 var(--f-mono);letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft);
}
.tune{display:flex;flex-direction:column;gap:0}
.tune button{
  cursor:pointer;background:transparent;color:var(--ink-soft);
  border:0;border-left:4px solid transparent;
  padding:.85rem .5rem .85rem clamp(12px,1.5vw,20px);text-align:left;
  font:400 .68rem/1.1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  transition:color .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease);
}
.tune button span.n{display:block;font-size:.52rem;letter-spacing:.2em;opacity:.6;margin-bottom:.3rem}
.tune button:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 5%,transparent)}
.tune button[aria-selected="true"]{color:var(--fg);border-left-color:var(--c);font-weight:700}
.tune button[aria-selected="true"] span.n{opacity:1;color:var(--c)}
.deck-right{margin-top:auto;padding:0 .5rem;display:flex;justify-content:center}
.cue{
  display:inline-flex;flex-direction:column;align-items:center;gap:.45rem;cursor:pointer;
  font:400 .56rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  background:transparent;border:1px solid var(--rule);padding:.6rem .5rem;width:100%;
}
.cue:hover{color:var(--fg);border-color:var(--fg)}
.cue .sw{width:30px;height:15px;border-radius:9px;background:var(--chrome);position:relative;flex:none}
.cue .sw::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;
  background:#fff;transition:transform .28s var(--ease)}
:root[data-cue="broadcast"] .cue .sw{background:var(--pink)}
:root[data-cue="broadcast"] .cue .sw::after{transform:translateX(15px)}
.cue .state{color:var(--fg);text-align:center}

/* ---- opening choreography ---- */
.stage .lower-third,.stage .deck,.stage .rings,.stage .timecode,.stage .sigbug,.stage .field figure{
  opacity:0;transform:translateY(12px);
}
.stage.woke .timecode{animation:rise .6s var(--ease) .3s forwards}
.stage.woke .sigbug{animation:rise .6s var(--ease) 1.1s forwards}
.stage.woke .field figure{animation:rise .9s var(--ease) 2.4s forwards}
.stage.woke .field .f2{animation-delay:2.6s}
.stage.woke .field .f3{animation-delay:2.8s}
.stage.woke .field .f4{animation-delay:3s}
.stage.woke .lower-third{animation:rise .85s var(--ease) 3.4s forwards}
.stage.woke .rings{animation:rise .9s var(--ease) 5.2s forwards}
.stage.woke .deck{animation:rise .8s var(--ease) 6.4s forwards}
@keyframes rise{to{opacity:1;transform:none}}
.wake-flash{position:absolute;inset:0;z-index:9;background:#fff;pointer-events:none;opacity:0}
.stage.woke .wake-flash{animation:flash 1s var(--ease) forwards}
@keyframes flash{0%{opacity:1}30%{opacity:.22}100%{opacity:0}}

/* ---- narrow desktop ---- */
@media (max-width:1180px){
  .stage{--plate-h:100svh;--plate-right:clamp(16px,3vw,52px)}
  .signals{top:-2svh}
  .stage-inner{width:min(520px,52vw)}
  .field .f3{display:none}
  .cap-note{display:none}
}

/* ---- MOBILE: preserved. one strong full-bleed signal per screen ---- */
@media (max-width:900px){
  .stage{display:block;background:#0b0c10;--rail:0px}
  .stage::before,.field{display:none}
  .signals{position:absolute;inset:0;width:auto;height:auto;top:0;box-shadow:none}
  .signal::after{
    background:linear-gradient(180deg,rgba(6,8,11,.55) 0,rgba(6,8,11,.05) 26%,rgba(6,8,11,.35) 56%,rgba(6,8,11,.93) 100%);
  }
  .signal[data-lane="host"] video,.signal[data-lane="host"] img.plate{object-position:30% 42%}
  .signal[data-lane="explain"] img.plate{object-position:47% 20%}
  .rings,.sigbug,.srcmon,.monitor-foot{display:none}
  .stage-inner{
    position:relative;z-index:4;left:auto;bottom:auto;width:auto;
    min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
    padding:76px var(--gut) 100px;
  }
  .timecode{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.7);top:70px;left:var(--gut);
    background:transparent;border:0;padding:0}
  .lower-third{
    background:rgba(10,12,16,.78);backdrop-filter:blur(10px) saturate(1.3);
    border:0;border-left:5px solid var(--signal);color:#fff;box-shadow:none;
  }
  .lower-third .bars{display:none}
  .lt-body{padding-bottom:.85rem}
  .name-super{border-bottom-color:rgba(255,255,255,.2);padding:.8rem .9rem .7rem;
    background:linear-gradient(90deg,color-mix(in srgb,var(--signal) 22%,transparent),transparent 70%)}
  .name-super h1{font-size:clamp(2.1rem,9.2vw,3rem)}
  .name-super h1 .sub{color:rgba(255,255,255,.82)}
  .promise{color:#fff;font-size:1.02rem}
  .promise b{color:var(--signal)}
  .lt-kicker{color:var(--signal);font-size:.55rem;padding:0 .9rem;margin-top:.75rem}
  .lt-kicker #lt-client{display:none}
  .lt-title{font-size:1.1rem;padding:0 .9rem;margin:.26rem 0 .3rem}
  .lt-stamp{font-size:.55rem;line-height:1.45;padding:0 .9rem;color:rgba(255,255,255,.92)}
  .lt-stamp .lbl{color:rgba(255,255,255,.6)}
  .cap-note{display:none}
  .lt-actions{margin-top:.75rem;gap:.4rem;padding:0 .9rem}
  .lt-actions button,.lt-actions a{border-color:rgba(255,255,255,.42);color:#fff;flex:1;text-align:center;
    padding:.6rem .4rem;font-size:.6rem;letter-spacing:.08em}
  .lt-actions .primary{background:var(--signal);border-color:var(--signal);color:#06171b}
  /* header already carries Book Lauren; the mobile lower third keeps OPEN only */
  .lower-third .lt-actions a{display:none}
  .lt-stamp{letter-spacing:.06em;overflow-wrap:break-word}
  .deck{
    position:fixed;left:0;right:0;top:auto;bottom:0;width:auto;z-index:50;
    background:color-mix(in srgb,#0b0c10 88%,transparent);backdrop-filter:blur(12px);
    border-right:0;border-top:1px solid rgba(255,255,255,.2);
  }
  .deck-inner{flex-direction:row;height:auto;padding:.3rem 12px .45rem;gap:.15rem;align-items:stretch}
  .rail-label{display:none}
  .tune{flex-direction:row;flex:1;gap:.15rem}
  .tune button{
    flex:1;border-left:0;border-top:3px solid rgba(255,255,255,.24);
    color:rgba(255,255,255,.6);font-size:.58rem;letter-spacing:.06em;padding:.5rem .18rem .4rem;
  }
  .tune button span.n{margin-bottom:.22rem}
  .tune button:hover,.tune button[aria-selected="true"]{color:#fff;background:transparent}
  .tune button[aria-selected="true"]{border-top-color:var(--c);border-left-color:transparent}
  .deck-right{display:none}
  .cue.mobile-cue{
    display:inline-flex;flex-direction:row;align-items:center;gap:.5rem;
    position:absolute;top:66px;right:var(--gut);z-index:6;width:auto;
    color:#fff;border-color:rgba(255,255,255,.4);background:rgba(10,12,16,.5);padding:.5rem .7rem;
  }
  .cue.mobile-cue .state{color:#fff}
}
@media (min-width:901px){.cue.mobile-cue{display:none}}

/* =========================================================================
   LAYER 2 — the comprehensive site body
   ========================================================================= */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
section.band{padding:clamp(56px,8.5vh,110px) 0;border-top:1px solid var(--rule);position:relative}
section.band.tint{background:var(--paper)}
/* deeper sections carry the on-air state, not just the hero */
section.band.oncam{
  background:#0b0c10;color:#f4f7f8;border-top:0;
  --rule:rgba(244,247,248,.18);--ink-soft:#aab4bd;--bg:#0b0c10;--fg:#f4f7f8;--paper:#14161c;
}
section.band.oncam::before{
  content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,var(--pink) 0 25%,var(--violet) 25% 50%,var(--aqua) 50% 75%,var(--coral) 75% 100%);
}
/* editorial transition between signals */
.seam{
  display:flex;align-items:center;gap:1rem;padding:1.15rem 0;border-top:1px solid var(--rule);
  font:400 .6rem/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);
}
.seam::after{content:"";flex:1;height:1px;background:var(--rule)}
.seam b{color:var(--fg);font-weight:400}
.band-head{display:grid;gap:1rem;margin-bottom:clamp(26px,4vh,48px)}
.band-head h2{
  font-variation-settings:'wght' 820,'wdth' 68;
  font-size:clamp(2rem,5.6vw,4rem);text-transform:uppercase;letter-spacing:-.02em;
}
.band-head p{margin:0;max-width:64ch;color:var(--ink-soft);font-size:clamp(1rem,1.25vw,1.14rem)}
@media (min-width:900px){
  .band-head{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:end;gap:2.4rem}
}

/* --- watch grid --- */
.watch{display:grid;gap:clamp(12px,1.5vw,20px);grid-template-columns:repeat(6,1fr)}
.watch>*{grid-column:span 6}
@media (min-width:820px){
  .watch>*{grid-column:span 2}
  .watch .lead{grid-column:span 6}
  .watch .wide{grid-column:span 3}
}
/* lead: full-width feature, media beside copy, much larger scale */
.clip.lead{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto;border-width:2px}
.clip.lead .bar{grid-column:1/-1}
@media (min-width:820px){
  .clip.lead{grid-template-columns:minmax(0,40%) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:stretch}
  .clip.lead .media{grid-row:2;grid-column:1;aspect-ratio:4/5;height:auto;min-height:0}
  .clip.lead figcaption{grid-row:2;grid-column:2}
  .clip.lead figcaption{align-content:center;padding:clamp(1.4rem,3vw,2.6rem)}
  .clip.lead h3{font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:.98}
  .clip.lead p{font-size:1rem;max-width:52ch}
  .clip.lead .fmt{font-size:.66rem}
}
.clip{
  position:relative;margin:0;background:var(--paper);border:1px solid var(--rule);
  overflow:hidden;display:flex;flex-direction:column;
}
.clip .media{position:relative;aspect-ratio:4/5;overflow:hidden;background:#0d0f13}
.clip .media img,.clip .media video{width:100%;height:100%;object-fit:cover}
.clip .bar{height:4px;background:var(--c,var(--aqua))}
.clip figcaption{padding:.85rem 1rem 1.05rem;display:grid;gap:.4rem}
.clip .fmt{font:400 .6rem/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--c)}
.clip h3{font-variation-settings:'wght' 720,'wdth' 82;font-size:1.02rem;text-transform:uppercase;line-height:1.1}
.clip p{margin:0;font-size:.85rem;color:var(--ink-soft);line-height:1.5}
.clip .stampline{font:400 .58rem/1.5 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg);opacity:.75}
.clip .play{
  position:absolute;left:.7rem;bottom:.7rem;z-index:4;
  display:inline-flex;align-items:center;gap:.45rem;
  font:400 .6rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:rgba(10,12,16,.72);padding:.4rem .55rem;border:1px solid rgba(255,255,255,.35);
}
.clip .play.static{opacity:.92}
/* real playback affordance, only on cards that actually play */
.clip button.play.playable{
  cursor:pointer;font-weight:700;background:var(--c);color:#06171b;border-color:var(--c);
  padding:.55rem .8rem;
}
.clip button.play.playable:hover{background:#fff;border-color:#fff;color:var(--ink)}
.clip button.play.playable .tri{
  width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent currentColor;flex:none;
}
.clip .media:has(button.play.playable)::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(6,8,11,.55) 100%);
}
.clip a.mask{position:absolute;inset:0;z-index:3}

.clip .media.typeset{
  display:grid;align-content:center;gap:.7rem;padding:1.4rem 1.2rem;
  background:var(--ink);color:#fff;aspect-ratio:4/5;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 46px);
}
.clip .media.typeset .kicker{font:400 .58rem/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--c)}
.clip .media.typeset .big{
  font-family:var(--f-display);font-variation-settings:'wght' 850,'wdth' 64;
  font-size:clamp(1.6rem,3.4vw,2.5rem);text-transform:uppercase;line-height:.92;
}
.clip .media.typeset .line{font:400 .6rem/1.5 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.clip .media.typeset .rule{height:3px;background:var(--c);width:52px}

/* --- bio --- */
.bio{display:grid;gap:clamp(24px,4vw,52px);align-items:start}
@media (min-width:860px){.bio{grid-template-columns:minmax(0,320px) minmax(0,1fr)}}
.bio .portrait{position:relative;border:1px solid var(--rule)}
.bio .portrait img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.bio .portrait .tag{
  position:absolute;left:0;bottom:0;background:var(--pink);color:#fff;
  font:400 .6rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;padding:.5rem .7rem;
}
.bio p{max-width:62ch}
.bio p:first-of-type{font-size:clamp(1.08rem,1.6vw,1.35rem);line-height:1.45}
.facts{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.4rem;padding:0;list-style:none}
.facts li{
  font:400 .64rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--rule);padding:.5rem .7rem;color:var(--ink-soft);
}

/* --- selected work --- */
.work{display:grid;gap:clamp(16px,1.8vw,24px)}
.route .items .item.feature{grid-column:1/-1;padding:clamp(1.1rem,2.4vw,1.8rem)}
.route .items .item.feature h4{font-size:clamp(1.15rem,1.9vw,1.5rem)}
.route .items .item.feature p{font-size:.98rem}
.route{border:1px solid var(--rule);background:var(--paper);overflow:hidden}
.route>.rhead{
  display:flex;align-items:center;gap:clamp(.8rem,2vw,1.6rem);flex-wrap:wrap;
  padding:clamp(.9rem,1.6vw,1.5rem) clamp(1rem,2vw,1.6rem);border-bottom:1px solid var(--rule);
  border-left:8px solid var(--c);
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) 14%,transparent),transparent 58%);
}
.route>.rhead .num{
  margin:0;font-family:var(--f-display);font-variation-settings:'wght' 850,'wdth' 64;
  font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:.8;color:var(--c);flex:none;
}
.route>.rhead h3{font-variation-settings:'wght' 850,'wdth' 66;
  font-size:clamp(1.6rem,3.4vw,2.6rem);text-transform:uppercase;line-height:.9}
.route>.rhead .role{margin:0 0 0 auto;text-align:right}
@media (max-width:700px){.route>.rhead .role{margin-left:0;text-align:left;width:100%}}
.route>.rhead .role{font:400 .62rem/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.route .items{display:grid;gap:1px;background:var(--rule)}
.route .items:has(.feature){grid-template-columns:1fr}
@media (min-width:780px){.route .items[data-cols="2"]{grid-template-columns:1fr 1fr}}
.item{background:var(--bg);padding:1.1rem;display:grid;gap:.5rem;align-content:start}
.item h4{font-variation-settings:'wght' 700,'wdth' 88;font-size:1rem}
.item p{margin:0;font-size:.9rem;color:var(--ink-soft)}
.item .meta{font:400 .58rem/1.55 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.item .receipt{
  display:inline-flex;align-items:center;gap:.45rem;align-self:start;
  font:400 .62rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  background:var(--amber);color:#20160a;padding:.42rem .6rem;font-weight:700;justify-self:start;
}
.item a.ext{
  font:400 .64rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  border-bottom:2px solid var(--c);text-decoration:none;padding-bottom:2px;align-self:start;justify-self:start;
}
.item a.ext:hover{background:var(--c);color:#fff}

/* --- range strip --- */
.range{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(8px,1vw,14px);align-items:end}
.range figure:nth-child(2n){transform:translateY(clamp(10px,2.2vw,34px))}
.range figure:nth-child(3n) img{aspect-ratio:3/4}
.range figure{margin:0;position:relative;border:1px solid var(--rule);overflow:hidden}
.range img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.range figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:.45rem .55rem;
  font:400 .56rem/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(8,10,14,.85));
}

/* --- credibility --- */
.cred{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (min-width:760px){.cred{grid-template-columns:repeat(3,1fr)}}
.cred div{background:var(--bg);padding:clamp(1.1rem,2vw,1.6rem);display:grid;gap:.4rem;align-content:start}
.cred div:first-child{background:color-mix(in srgb,var(--aqua) 12%,var(--bg))}
.cred h3{font-variation-settings:'wght' 700,'wdth' 84;font-size:.98rem;text-transform:uppercase}
.cred p{margin:0;font-size:.86rem;color:var(--ink-soft)}

/* --- contact --- */
.contact{
  display:grid;gap:clamp(20px,3vw,40px);align-items:center;
  border:1px solid var(--rule);padding:clamp(22px,4vw,48px);background:var(--paper);
}
@media (min-width:880px){.contact{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.contact h2{font-variation-settings:'wght' 840,'wdth' 66;font-size:clamp(2rem,5.2vw,3.5rem);text-transform:uppercase}
.btn{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;cursor:pointer;
  background:var(--pink);color:#fff;border:0;padding:1rem 1.5rem;
  font:400 .78rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;font-weight:700;
}
.btn:hover{background:var(--ink);color:var(--white)}
:root[data-cue="broadcast"] .btn:hover{background:var(--white);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--rule);font-weight:400}
.btn.ghost:hover{background:var(--fg);color:var(--bg)}
.btnrow{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.4rem}

footer.foot{border-top:1px solid var(--rule);padding:2.2rem 0 3rem;font-size:.8rem;color:var(--ink-soft)}
footer.foot .fgrid{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center;justify-content:space-between}
footer.foot a{text-decoration:none;border-bottom:1px solid var(--rule)}

/* =========================================================================
   OPEN — the project file drawer
   ========================================================================= */
.drawer{
  position:fixed;z-index:120;inset:0 0 0 auto;width:min(560px,100%);
  background:var(--bg);border-left:1px solid var(--rule);
  transform:translateX(101%);transition:transform .42s var(--ease);
  display:flex;flex-direction:column;box-shadow:-30px 0 80px rgba(0,0,0,.28);
}
.drawer[data-open]{transform:none}
.drawer-scrim{
  position:fixed;inset:0;z-index:110;background:rgba(6,8,11,.5);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
}
.drawer-scrim[data-open]{opacity:1;visibility:visible}
.drawer header{
  display:flex;align-items:flex-start;gap:1rem;padding:1.1rem 1.2rem;
  border-bottom:1px solid var(--rule);border-top:6px solid var(--signal);
}
.drawer header .k{font:400 .6rem/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--signal)}
.drawer header h2{font-variation-settings:'wght' 800,'wdth' 74;font-size:1.45rem;text-transform:uppercase;margin-top:.4rem;line-height:1}
.drawer .close{
  margin-left:auto;flex:none;background:transparent;border:1px solid var(--rule);color:var(--fg);
  width:38px;height:38px;cursor:pointer;font-size:1.1rem;line-height:1;
}
.drawer .close:hover{background:var(--fg);color:var(--bg)}
.drawer .body{overflow-y:auto;padding:1.2rem;display:grid;gap:1.1rem;flex:1}
.file dl{margin:0;display:grid;gap:.75rem}
.file dt{font:400 .58rem/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.file dd{margin:.25rem 0 0;font-size:.92rem;line-height:1.5}
.evgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.evgrid img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border:1px solid var(--rule)}
.drawer footer{padding:1rem 1.2rem;border-top:1px solid var(--rule);display:flex;gap:.6rem;flex-wrap:wrap}
@media (max-width:620px){
  .drawer{inset:auto 0 0 0;width:100%;height:88svh;transform:translateY(101%);border-left:0;border-top:1px solid var(--rule)}
  .drawer[data-open]{transform:none}
}

/* =========================================================================
   PLAYER — modal playback, reuses the drawer scrim, focus and Escape pattern
   ========================================================================= */
.player{
  position:fixed;inset:0;z-index:140;display:grid;place-items:center;
  padding:clamp(12px,3vw,40px);opacity:0;pointer-events:none;
  transition:opacity .32s var(--ease);
}
.player[hidden]{display:none}
.player[data-open]{opacity:1;pointer-events:auto}
#player-scrim{z-index:135}
.player-inner{
  width:min(1020px,100%);max-height:92svh;display:flex;flex-direction:column;
  background:var(--bg);border:1px solid var(--rule);border-top:6px solid var(--c,var(--aqua));
  box-shadow:0 40px 100px rgba(6,8,11,.5);
}
.player header{
  display:flex;align-items:flex-start;gap:1rem;padding:.95rem 1.1rem;border-bottom:1px solid var(--rule);
}
.player header .k{
  margin:0;font:400 .56rem/1.5 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
.player header h2{
  font-variation-settings:'wght' 800,'wdth' 74;font-size:clamp(1.05rem,2vw,1.5rem);
  text-transform:uppercase;margin-top:.3rem;line-height:1;
}
.player .close{
  margin-left:auto;flex:none;background:transparent;border:1px solid var(--rule);color:var(--fg);
  width:38px;height:38px;cursor:pointer;font-size:1rem;line-height:1;
}
.player .close:hover{background:var(--fg);color:var(--bg)}
.player-stage{background:#07080b;display:grid;place-items:center;min-height:0;flex:1}
.player-stage video{max-width:100%;max-height:64svh;width:auto;height:auto;display:block}
.player-note{
  margin:0;padding:.8rem 1.1rem;border-top:1px solid var(--rule);
  font-size:.82rem;line-height:1.5;color:var(--ink-soft);
}
@media (max-width:620px){
  .player-inner{max-height:96svh}
  .player-stage video{max-height:54svh}
}

/* =========================================================================
   MOTION / MEDIA PREFERENCES
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .stage .identity,.stage .lower-third,.stage .deck,.stage .rings,.stage .timecode,.stage .srcmon{
    opacity:1;transform:none}
  .wake-flash{display:none}
  .rings .r-spin{animation:none}
}
@media print{.stage,.deck,.drawer,.rig{display:none}}

/* =========================================================================
   R4 — CREATIVE POLISH: proof wall, project tapes, set gallery, GitHub pass
   ========================================================================= */
.proof-index{
  border-block:1px solid var(--rule);background:var(--ink);color:#fff;overflow:hidden;
}
.proof-index-track{
  width:max-content;min-width:100%;display:flex;justify-content:space-between;gap:2rem;
  padding:.72rem var(--gut);font:400 .62rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  background-image:linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:48px 100%;
}
.proof-index-track span{white-space:nowrap;display:flex;align-items:center;gap:.55rem}
.proof-index-track span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--aqua)}
.proof-index-track span:nth-child(2)::before{background:var(--pink)}
.proof-index-track span:nth-child(3)::before{background:var(--violet)}
.proof-index-track span:nth-child(4)::before{background:var(--coral)}
@media(max-width:760px){.proof-index{overflow-x:auto}.proof-index-track{justify-content:flex-start}}

/* Give the stage a little more breathing room without losing the proof collage. */
@media(min-width:980px){
  .stage .field .f3{display:none}
  .stage .field .f1{top:8svh;left:calc(var(--rail) + 2vw);width:clamp(130px,12vw,180px)}
  .stage .field .f2{top:18svh;left:calc(var(--rail) + 12vw);width:clamp(118px,10vw,160px)}
  .lower-third{max-width:min(690px,56vw)}
  .signals::before,.signals::after{content:"";position:absolute;z-index:8;pointer-events:none;width:32px;height:32px}
  .signals::before{left:10px;top:10px;border-left:2px solid rgba(255,255,255,.65);border-top:2px solid rgba(255,255,255,.65)}
  .signals::after{right:10px;bottom:10px;border-right:2px solid rgba(255,255,255,.65);border-bottom:2px solid rgba(255,255,255,.65)}
}

/* Proof wall: every tile has a real destination. */
.proof-wall{background:
  radial-gradient(80% 42% at 100% 0%,color-mix(in srgb,var(--aqua) 8%,transparent),transparent 70%),
  var(--bg)}
.clip{box-shadow:0 16px 48px rgba(13,15,19,.05)}
.clip::after{content:"";position:absolute;right:8px;top:8px;width:14px;height:14px;border-top:1px solid var(--c);border-right:1px solid var(--c);z-index:6;pointer-events:none}
.clip .proof-chip{
  position:absolute;right:.7rem;top:.7rem;z-index:5;background:rgba(255,255,255,.9);color:#0d0f13;
  border:1px solid rgba(13,15,19,.18);padding:.35rem .48rem;
  font:700 .52rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
}
.clip button.play.project-trigger,.clip button.play.gallery-trigger{
  cursor:pointer;font-weight:700;background:#fff;color:#0d0f13;border-color:#fff;padding:.55rem .8rem;
}
.clip button.play.project-trigger:hover,.clip button.play.gallery-trigger:hover{background:var(--c);border-color:var(--c)}
.scrambled-collage{background:#16130c!important;isolation:isolate}
.scrambled-collage::before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 72% 18%,rgba(255,171,0,.4),transparent 34%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 40px);z-index:0}
.scrambled-collage img{position:absolute!important;border:1px solid rgba(255,255,255,.55);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.scrambled-main{inset:5% auto 7% 8%!important;width:62%!important;height:88%!important;object-fit:cover!important;transform:rotate(-2deg)}
.scrambled-float.one{right:5%;top:8%;width:38%!important;height:46%!important;object-fit:cover!important;transform:rotate(4deg)}
.scrambled-float.two{right:10%;bottom:8%;width:32%!important;height:37%!important;object-fit:cover!important;transform:rotate(-3deg)}
.receipt-card .receipt-stamp{
  justify-self:start;border:1px solid rgba(255,255,255,.45);padding:.32rem .48rem;
  font:400 .52rem/1 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;color:#fff;
}

/* Project tapes: Selected Work now behaves like production evidence, not stacked cards. */
.work-band{background:
  linear-gradient(180deg,transparent 0 8%,color-mix(in srgb,var(--paper) 78%,transparent) 8% 92%,transparent 92%)}
.route{background:var(--bg);box-shadow:0 22px 60px rgba(13,15,19,.06)}
.route-grid{display:grid;grid-template-columns:1.18fr .82fr;min-height:400px}
.route-grid.reverse{grid-template-columns:.82fr 1.18fr}
.route-grid.reverse .route-copy{order:1}.route-grid.reverse .route-visual{order:2}
.route-visual{position:relative;margin:0;min-height:360px;overflow:hidden;background:#0b0c10;border-right:1px solid var(--rule)}
.route-grid.reverse .route-visual{border-right:0;border-left:1px solid var(--rule)}
.route-visual img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.route-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(6,8,11,.82));pointer-events:none}
.route-visual figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.15rem;color:#fff;display:grid;gap:.3rem}
.route-visual figcaption span{font:400 .58rem/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--c)}
.route-visual figcaption b{font-family:var(--f-display);font-variation-settings:'wght' 790,'wdth' 76;font-size:clamp(1.3rem,2.5vw,2rem);line-height:.95;text-transform:uppercase}
.route-copy{padding:clamp(1.4rem,3vw,2.5rem);display:grid;align-content:center;gap:1rem;background:var(--bg)}
.route-copy h4{font-variation-settings:'wght' 780,'wdth' 78;font-size:clamp(1.35rem,2.6vw,2.1rem);text-transform:uppercase;line-height:1}
.route-copy>p{margin:0;color:var(--ink-soft);max-width:56ch}
.route-copy .meta{font:400 .6rem/1.55 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.tape-action{
  position:absolute;z-index:4;right:1rem;top:1rem;background:var(--c);color:#071014;border:0;padding:.68rem .9rem;
  font:700 .62rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
}
.tape-action:hover{background:#fff;color:#0d0f13}
.inline-action{
  justify-self:start;background:transparent;color:var(--fg);border:1px solid var(--rule);border-bottom:3px solid var(--c,var(--signal));
  padding:.7rem .85rem;font:700 .62rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
}
.inline-action:hover{background:var(--fg);color:var(--bg)}
.mini-proof,.scrambled-mini{display:grid;grid-template-columns:92px 1fr;align-items:center;gap:.8rem;border-top:1px solid var(--rule);padding-top:1rem}
.mini-proof img{width:92px;height:74px;object-fit:cover;border:1px solid var(--rule)}
.mini-proof span,.scrambled-mini span{display:grid;gap:.25rem}
.mini-proof b,.scrambled-mini b{font-family:var(--f-display);font-variation-settings:'wght' 700,'wdth' 82;text-transform:uppercase;line-height:1}
.mini-proof small,.scrambled-mini small{font:400 .56rem/1.45 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.scrambled-mini{grid-template-columns:70px 70px 1fr}
.scrambled-mini img{width:70px;height:88px;object-fit:cover;border:1px solid var(--rule);transform:rotate(-2deg)}
.scrambled-mini img:nth-child(2){transform:rotate(3deg)}
.receipt-panel{display:grid;grid-template-columns:auto 1fr;gap:.3rem .8rem;border:1px solid var(--rule);border-left:7px solid var(--amber);padding:1rem;background:var(--paper)}
.receipt-panel strong{grid-row:1/3;font-family:var(--f-display);font-variation-settings:'wght' 850,'wdth' 64;font-size:2.2rem;line-height:.85;color:var(--coral)}
.receipt-panel span{font-size:.82rem;color:var(--ink-soft)}
.receipt-panel a{justify-self:start;font:400 .58rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid var(--coral)}
@media(max-width:820px){
  .route-grid,.route-grid.reverse{grid-template-columns:1fr}
  .route-grid.reverse .route-copy,.route-grid.reverse .route-visual{order:initial}
  .route-visual,.route-grid.reverse .route-visual{min-height:320px;border:0;border-bottom:1px solid var(--rule)}
}

/* Player: keep the vertical film intact, but make the modal feel like a project room. */
.player-inner{width:min(1120px,100%)}
.player-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);min-height:0;flex:1}
.player-stage{position:relative;isolation:isolate;background:#07080b;overflow:hidden}
.player-stage::before{content:"";position:absolute;inset:-8%;z-index:-2;background:
  linear-gradient(rgba(4,5,8,.72),rgba(4,5,8,.84)),var(--poster);background-size:cover;background-position:center;filter:blur(18px);transform:scale(1.08)}
.player-stage::after{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 44px)}
.player-stage video{z-index:1;box-shadow:0 22px 70px rgba(0,0,0,.55)}
.player-side{border-left:1px solid var(--rule);padding:clamp(1rem,2.4vw,1.6rem);display:grid;align-content:center;gap:1rem;background:var(--bg)}
.player-side .player-note{padding:0;border:0;font-size:.94rem}
.player-side .btn{justify-self:start}
@media(max-width:760px){
  .player-layout{grid-template-columns:1fr}
  .player-side{border-left:0;border-top:1px solid var(--rule)}
  .player-stage video{max-height:50svh}
}

/* Approved visual gallery. */
.gallery-modal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:clamp(12px,3vw,40px);opacity:0;pointer-events:none;transition:opacity .32s var(--ease)}
.gallery-modal[hidden]{display:none}.gallery-modal[data-open]{opacity:1;pointer-events:auto}#gallery-scrim{z-index:145}
.gallery-inner{width:min(1120px,100%);max-height:94svh;overflow:auto;background:var(--bg);border:1px solid var(--rule);border-top:6px solid var(--amber);box-shadow:0 40px 100px rgba(6,8,11,.5)}
.gallery-inner header{display:flex;align-items:flex-start;gap:1rem;padding:1rem 1.1rem;border-bottom:1px solid var(--rule)}
.gallery-inner header .k{margin:0;font:400 .58rem/1.5 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.gallery-inner header h2{font-variation-settings:'wght' 820,'wdth' 70;font-size:clamp(1.4rem,3vw,2.2rem);text-transform:uppercase;margin-top:.25rem}
.gallery-inner .close{margin-left:auto;flex:none;background:transparent;border:1px solid var(--rule);color:var(--fg);width:38px;height:38px;cursor:pointer}
.gallery-grid{display:grid;grid-template-columns:1.15fr .85fr .85fr;gap:8px;padding:8px;background:#0b0c10}
.gallery-grid figure{margin:0;position:relative;min-height:420px;overflow:hidden;background:#111}
.gallery-grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gallery-grid figure:nth-child(2),.gallery-grid figure:nth-child(3){min-height:360px}
.gallery-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:.7rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.82));font:400 .56rem/1.45 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.gallery-inner footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.1rem;border-top:1px solid var(--rule)}
.gallery-inner footer p{margin:0;font:400 .62rem/1.5 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
@media(max-width:760px){.gallery-grid{grid-template-columns:1fr}.gallery-grid figure,.gallery-grid figure:nth-child(2),.gallery-grid figure:nth-child(3){min-height:58svh}.gallery-inner footer{align-items:flex-start;flex-direction:column}}

/* =========================================================================
   R5 — WORLD + MOTION PASS (2026 native platform features, progressive)
   View Transitions · scroll-linked reveals · reactive signal canvas
   pointer light · proof-tape depth · cross-document continuity
   ========================================================================= */

@property --page-progress{syntax:"<number>";inherits:true;initial-value:0}
@property --ring-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --glow-x{syntax:"<percentage>";inherits:true;initial-value:50%}
@property --glow-y{syntax:"<percentage>";inherits:true;initial-value:40%}
@property --tilt-x{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --tilt-y{syntax:"<angle>";inherits:false;initial-value:0deg}

html{scroll-behavior:smooth;--page-progress:0}
@view-transition{navigation:auto}
.wordmark{view-transition-name:site-wordmark}
.signal[data-active]{view-transition-name:active-signal}
.lt-title{view-transition-name:active-title}
.lt-stamp{view-transition-name:active-stamp}
.field{view-transition-name:evidence-field}

::view-transition-group(active-signal),
::view-transition-group(active-title),
::view-transition-group(active-stamp),
::view-transition-group(evidence-field){animation-duration:.58s;animation-timing-function:var(--ease)}
::view-transition-old(active-signal){animation:r5-signal-old .34s var(--ease) both}
::view-transition-new(active-signal){animation:r5-signal-new .58s var(--ease) both}
::view-transition-old(active-title),::view-transition-old(active-stamp){animation:r5-copy-old .22s ease both}
::view-transition-new(active-title),::view-transition-new(active-stamp){animation:r5-copy-new .46s var(--ease) both}
::view-transition-old(evidence-field){animation:r5-field-old .24s ease both}
::view-transition-new(evidence-field){animation:r5-field-new .6s var(--ease) both}
@keyframes r5-signal-old{to{opacity:0;filter:saturate(.4) blur(8px);transform:scale(.975) rotate(-.35deg)}}
@keyframes r5-signal-new{from{opacity:0;clip-path:inset(0 0 100% 0);filter:saturate(1.35) contrast(1.08);transform:scale(1.025)}to{opacity:1;clip-path:inset(0);filter:none;transform:none}}
@keyframes r5-copy-old{to{opacity:0;transform:translateY(-12px)}}
@keyframes r5-copy-new{from{opacity:0;transform:translateY(18px);letter-spacing:.03em}to{opacity:1;transform:none}}
@keyframes r5-field-old{to{opacity:0;transform:translateX(-2vw)}}
@keyframes r5-field-new{from{opacity:0;transform:translateX(3vw) scale(.98)}to{opacity:1;transform:none}}
html[data-vt="back"]::view-transition-new(active-signal){animation-name:r5-signal-new-back}
@keyframes r5-signal-new-back{from{opacity:0;clip-path:inset(100% 0 0 0);filter:saturate(1.3);transform:scale(1.02)}to{opacity:1;clip-path:inset(0);filter:none;transform:none}}

/* Native page-progress line. JS supplies the number so unsupported scroll timelines still work. */
.rig::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--pink),var(--violet),var(--aqua),var(--coral));transform-origin:left;transform:scaleX(var(--page-progress));will-change:transform}

/* Persistent world dial: a quiet coordinate, not a dashboard. */
.world-dial{position:fixed;z-index:52;right:clamp(10px,1.8vw,26px);top:50%;transform:translateY(-50%);display:grid;justify-items:center;gap:.48rem;color:var(--fg);mix-blend-mode:difference;pointer-events:none}
.world-pip{width:9px;height:9px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 7px color-mix(in srgb,var(--signal) 18%,transparent);transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.world-index{font:400 .56rem/1 var(--f-mono);letter-spacing:.16em}
.world-label{font:400 .52rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg);max-height:120px;overflow:hidden}
@media(max-width:1040px){.world-dial{display:none}}

/* Reactive signal field and pointer light. */
.signal-field{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.54;mix-blend-mode:multiply;transition:opacity .4s var(--ease)}
:root[data-cue="broadcast"] .signal-field{mix-blend-mode:screen;opacity:.38}
.stage::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(440px circle at var(--glow-x) var(--glow-y),color-mix(in srgb,var(--signal) 18%,transparent),transparent 68%);mix-blend-mode:screen;opacity:.72;transition:opacity .35s var(--ease)}
.rings::before{content:"";position:absolute;inset:-16%;border-radius:50%;background:conic-gradient(from var(--ring-angle),transparent 0 34%,color-mix(in srgb,var(--signal) 58%,transparent) 42%,transparent 50% 84%,color-mix(in srgb,var(--signal) 35%,transparent) 90%,transparent);filter:blur(9px);opacity:.5;animation:r5-orbit 12s linear infinite;z-index:-1}
@keyframes r5-orbit{to{--ring-angle:360deg}}

/* The signal ticker has physical movement but remains readable and pausable. */
.proof-index{overflow:hidden}
.proof-index-track{width:max-content;min-width:100%;animation:r5-ticker 30s linear infinite}
.proof-index:hover .proof-index-track,.proof-index:focus-within .proof-index-track{animation-play-state:paused}
@keyframes r5-ticker{to{transform:translateX(-18%)}}

/* Current section in nav. */
.rig nav a[aria-current="location"]{color:var(--fg);border-color:var(--signal)}

/* Native scroll-linked choreography. */
@keyframes r5-world-enter{
  from{opacity:.18;transform:translateY(46px) scale(.982);filter:saturate(.55);clip-path:inset(8% 0 0 0)}
  to{opacity:1;transform:none;filter:none;clip-path:inset(0)}
}
@supports (animation-timeline:view()){
  .world-reveal{animation:r5-world-enter both linear;animation-timeline:view();animation-range:entry 4% cover 34%}
  .range .world-reveal:nth-child(2n){animation-range:entry 10% cover 38%}
}
.no-scroll-timeline .world-reveal{opacity:0;transform:translateY(34px) scale(.99);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.no-scroll-timeline .world-reveal[data-revealed]{opacity:1;transform:none}

/* Pointer-responsive proof surfaces. This is restrained depth, not novelty-card tilt. */
.tilt-surface{--tilt-x:0deg;--tilt-y:0deg;--spot-x:50%;--spot-y:50%;transform:perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transform-style:preserve-3d;transition:transform .35s var(--ease);will-change:transform}
.tilt-surface::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(340px circle at var(--spot-x) var(--spot-y),rgba(255,255,255,.23),transparent 58%);mix-blend-mode:soft-light;opacity:0;transition:opacity .25s ease}
.tilt-surface[data-tilting]::before{opacity:1}
.route-visual img,.offair-photo img,.range .tilt-surface img{transition:transform .75s var(--ease),filter .45s ease}
.tilt-surface[data-tilting] img{transform:scale(1.028)}

/* Before-the-cue interlude: personal texture without turning the site into a selfie grid. */
.offair-band{overflow:hidden;background:
  radial-gradient(75% 90% at 3% 20%,color-mix(in srgb,var(--coral) 12%,transparent),transparent 62%),
  linear-gradient(135deg,var(--paper),var(--bg) 62%)}
.offair-shell{display:grid;grid-template-columns:minmax(250px,.78fr) minmax(300px,1.15fr) minmax(170px,.52fr);gap:clamp(18px,3.5vw,52px);align-items:center;position:relative}
.offair-photo{position:relative;margin:0;min-height:530px;overflow:hidden;border:1px solid var(--rule);box-shadow:0 28px 70px rgba(13,15,19,.14);transform:perspective(1100px) rotate(-2deg) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))}
.offair-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:45% 35%}
.offair-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:1rem;background:linear-gradient(transparent,rgba(6,8,11,.88));color:#fff;display:grid;gap:.25rem;z-index:4}
.offair-photo figcaption span{font:400 .56rem/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--coral)}
.offair-photo figcaption b{font-family:var(--f-display);font-variation-settings:'wght' 800,'wdth' 72;text-transform:uppercase;font-size:clamp(1.4rem,2.6vw,2.1rem)}
.offair-copy{display:grid;gap:1.15rem;align-content:center}
.offair-copy h2{font-variation-settings:'wght' 840,'wdth' 65;font-size:clamp(2.4rem,5.8vw,5.7rem);text-transform:uppercase;letter-spacing:-.04em;max-width:10ch}
.offair-copy>p:not(.eyebrow){max-width:52ch;color:var(--ink-soft);font-size:1.02rem}
.callboard{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule);background:var(--rule);gap:1px}
.callboard span{background:var(--bg);padding:.8rem .9rem;font:400 .62rem/1.45 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;display:flex;gap:.7rem;align-items:center}
.callboard b{color:var(--coral)}
.offair-stack{position:relative;min-height:430px}
.offair-stack figure{position:absolute;margin:0;width:74%;aspect-ratio:3/4;overflow:hidden;border:1px solid rgba(255,255,255,.7);box-shadow:0 26px 60px rgba(13,15,19,.2);transition:transform .6s var(--ease)}
.offair-stack figure:nth-child(1){left:2%;top:6%;transform:rotate(-7deg)}
.offair-stack figure:nth-child(2){right:0;top:24%;transform:rotate(6deg)}
.offair-stack figure:nth-child(3){left:10%;bottom:0;transform:rotate(-1deg)}
.offair-stack img{width:100%;height:100%;object-fit:cover}
.offair-shell:hover .offair-stack figure:nth-child(1){transform:translate(-10px,-10px) rotate(-9deg)}
.offair-shell:hover .offair-stack figure:nth-child(2){transform:translate(10px,-6px) rotate(8deg)}
.offair-shell:hover .offair-stack figure:nth-child(3){transform:translateY(10px) rotate(1deg)}
@media(max-width:930px){.offair-shell{grid-template-columns:.8fr 1.2fr}.offair-stack{display:none}.offair-photo{min-height:480px}.offair-copy h2{max-width:12ch}}
@media(max-width:640px){.offair-shell{grid-template-columns:1fr}.offair-photo{min-height:62svh;transform:rotate(-1deg)}.callboard{grid-template-columns:1fr 1fr}.offair-copy h2{font-size:clamp(2.3rem,13vw,4.2rem)}}

/* Scrambled Up becomes a living set stack instead of a static collage. */
.scrambled-main{animation:r5-card-main 8s var(--ease) infinite alternate}
.scrambled-float.one{animation:r5-card-one 9s var(--ease) .4s infinite alternate}
.scrambled-float.two{animation:r5-card-two 7s var(--ease) .8s infinite alternate}
.scrambled-collage:hover img,.scrambled-collage:focus-within img{animation-play-state:paused}
@keyframes r5-card-main{to{transform:translate(1.5%,-1%) rotate(-1deg) scale(1.015)}}
@keyframes r5-card-one{to{transform:translate(-4%,4%) rotate(1deg) scale(1.025)}}
@keyframes r5-card-two{to{transform:translate(3%,-4%) rotate(-5deg) scale(1.02)}}

/* Gallery becomes a swipeable set roll with scroll snap. */
.gallery-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,34vw);grid-template-columns:none;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:inline mandatory;scrollbar-width:thin;scrollbar-color:var(--amber) #17181d;align-items:stretch}
.gallery-grid figure,.gallery-grid figure:nth-child(2),.gallery-grid figure:nth-child(3){min-height:min(68svh,680px);scroll-snap-align:center;transition:transform .45s var(--ease),filter .35s ease}
.gallery-grid figure:nth-child(3n+1){transform:rotate(-1deg)}
.gallery-grid figure:nth-child(3n+2){transform:translateY(10px) rotate(1deg)}
.gallery-grid figure:hover,.gallery-grid figure:focus-within{transform:translateY(-6px) rotate(0) scale(1.01);z-index:2}
@media(max-width:760px){.gallery-grid{grid-template-columns:none;grid-auto-columns:84vw}.gallery-grid figure,.gallery-grid figure:nth-child(2),.gallery-grid figure:nth-child(3){min-height:65svh}}

/* Project tapes get a moving light edge and distinct lane energy. */
.route{position:relative;isolation:isolate}
.route::before{content:"";position:absolute;inset:0;z-index:4;padding:1px;pointer-events:none;background:conic-gradient(from var(--ring-angle),transparent 0 36%,color-mix(in srgb,var(--c) 56%,transparent) 44%,transparent 52% 88%,color-mix(in srgb,var(--c) 36%,transparent) 94%,transparent);opacity:.38;animation:r5-orbit 18s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.route:hover::before{opacity:.52}
.route-visual::before{z-index:3}
.route-visual figcaption,.tape-action{transform:translateZ(24px)}

/* Body seams feel like channel changes rather than section dividers. */
.seam{position:relative;overflow:hidden}
.seam::before{content:"";position:absolute;left:0;bottom:0;width:34%;height:2px;background:linear-gradient(90deg,var(--pink),var(--violet),var(--aqua),var(--coral));transform:translateX(-110%);transition:transform .8s var(--ease)}
section:hover>.wrap>.seam::before{transform:translateX(0)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .proof-index-track,.rings::before,.route::before,.scrambled-collage img{animation:none!important}
  .signal-field{display:none}
  .stage::after{display:none}
  .tilt-surface,.tilt-surface img,.offair-stack figure{transform:none!important;transition:none!important}
  .world-reveal{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important;filter:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:.001ms!important}
}

.range .tilt-surface:nth-child(2n){transform:translateY(clamp(10px,2.2vw,34px)) perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))}

@media(max-width:900px){
  .deck{left:10px;right:10px;bottom:10px;border:1px solid rgba(255,255,255,.22);width:auto}
  .stage-inner{padding-bottom:116px}
}
@media(max-width:640px){.offair-photo img{object-position:48% 8%}}