/* ═══════════════════════════════════════════════════════════════════════════
   WULING KENDARI — style.css
   1. TOKENS      2. RESET/BASE   3. TYPE      4. STAGE
   5. SIGNAL      6. CHROME       7. CHAPTERS  8. LEAD DRAWER   9. RESPONSIVE
   Motion lives in motion.css.
   ═════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────── 1. TOKENS ─────────────────────────────── */
:root{
  --void:#050506;
  --ink:#070707;
  --paper:#f4f1ec;
  --mute:#9a978f;
  --dim:#5c5a55;
  --sig:#e2231a;
  --sig-hot:#ff4a30;
  --steel:#b7bac0;

  --hair:rgba(244,241,236,.12);
  --hair-2:rgba(244,241,236,.06);

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --gut:clamp(20px,4.4vw,80px);
  --r:0px;
  --r-soft:2px;

  --disp:"Archivo","Archivo Narrow","Arial Narrow",Impact,sans-serif;
  --text:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* live values written by JS */
  --vel:0;          /* scroll velocity, -1..1  */
  --sheen:-70%;     /* rim-light sweep position */
  --sheen-o:0;
}

/* ──────────────────────────── 2. RESET / BASE ──────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip;background:var(--void)}
body{
  font-family:var(--text);color:var(--paper);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
img,svg,figure{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
ul,ol,dl{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit}
address{font-style:normal}
:focus-visible{outline:2px solid var(--sig-hot);outline-offset:3px}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;top:-80px;left:16px;z-index:999;background:var(--sig);color:#fff;padding:12px 18px;font-weight:700}
.skip:focus{top:16px}
.sig{color:var(--sig)}

/* ─────────────────────────────── 3. TYPE ───────────────────────────────── */
.hd,.hero-type,.lane__t,.rb__n,.beat__v b,.lead__t{
  font-family:var(--disp);font-weight:800;font-stretch:72%;
  font-variation-settings:"wdth" 70,"wght" 800;
  text-transform:uppercase;line-height:.85;letter-spacing:-.015em;
}
.hero-type{font-size:clamp(46px,8.6vw,146px)}
.hd--xl{font-size:clamp(40px,7.6vw,124px)}
.hd--lg{font-size:clamp(32px,5.4vw,88px)}
.hd--md{font-size:clamp(30px,4.4vw,72px)}

.ch__no{
  font-family:var(--disp);font-size:11px;font-variation-settings:"wdth" 80,"wght" 700;
  letter-spacing:.32em;text-transform:uppercase;color:var(--sig);
}
.note{font-size:11.5px;color:var(--dim);max-width:52ch;line-height:1.6}

/* ─────────────────────────────── 4. STAGE ──────────────────────────────── */
.stage{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.stage__void{position:absolute;inset:0;background:var(--void)}

/* The sunset sits ABOVE the vehicle's roofline in the top-right corner, which
   is the only place it can be read — behind the car it is simply occluded. */
.stage__sky{
  position:absolute;right:-2%;top:-30%;width:min(54%,780px);height:116%;
  background:url("../assets/sky.webp") center 30%/cover no-repeat;
  opacity:1;
  /* the fade must reach zero BEFORE the element's own left edge, otherwise the
     crop shows up as a hard vertical seam in the middle of the frame */
  -webkit-mask-image:radial-gradient(64% 84% at 74% 30%,#000 22%,transparent 92%);
  mask-image:radial-gradient(64% 84% at 74% 30%,#000 22%,transparent 92%);
  will-change:transform;
}
.stage__grade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,var(--void) 2%,rgba(5,5,6,.88) 24%,rgba(5,5,6,.34) 48%,rgba(5,5,6,0) 68%),
    linear-gradient(180deg,rgba(5,5,6,.62) 0%,rgba(5,5,6,0) 15%);
}
.stage__floor{
  position:absolute;left:0;right:0;bottom:0;height:46%;
  background:
    linear-gradient(180deg,rgba(5,5,6,0) 0%,rgba(6,6,8,.72) 34%,#050506 92%),
    radial-gradient(120% 100% at 50% 0%,rgba(226,35,26,.10),transparent 62%);
  will-change:transform;
}
.stage__glow{
  position:absolute;left:50%;top:58%;width:130vmax;height:130vmax;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(226,35,26,.16) 0%,rgba(255,90,42,.06) 26%,transparent 58%);
  will-change:transform,opacity;
}

/* ── vehicle ───────────────────────────────────────────────────────────────
   DEFAULT = the static composition. This is what you get with no JavaScript,
   with a blocked module (opening the file straight off disk), or on a phone:
   the car simply sits in the lower half of the hero and nothing overlaps.
   The cinematic fixed stage is opt-in, added only once app.js has booted. */
/* DEFAULT: an ordinary block in the flow of chapter 00. Because it takes up
   real space, the copy above it can never be overlapped — at any width, at
   any height, with or without JavaScript. padding-bottom leaves room for the
   reflection, which hangs below the car's own box. */
.veh-layer{
  position:relative;z-index:3;pointer-events:none;
  margin-top:clamp(24px,5vh,60px);
  padding-bottom:14%;
}
.veh-cam{
  position:relative;
  width:min(88%,600px);margin:0 auto;aspect-ratio:1076/688;
  transform-origin:50% 62%;
  will-change:transform;
}
/* Only the car's own box is interactive — a full-viewport catcher would eat
   clicks meant for the page underneath it. */
.can-pin .veh-cam{pointer-events:auto;cursor:grab}
.can-pin .veh-cam:active{cursor:grabbing}

/* ── enhanced: fixed cinematic stage (wide viewport + motion allowed) ─────
   position:fixed ignores where the element sits in the DOM, so the block
   simply lifts out of the flow and becomes the stage. Nothing has to move. */
.can-pin .veh-layer{
  position:fixed;top:0;left:0;right:0;height:100svh;
  margin:0;padding:0;
  transition:opacity .5s var(--ease);
}
.can-pin .veh-cam{
  position:absolute;left:67%;top:58%;
  width:min(56vw,1076px);margin:0;
  transform:translate3d(-50%,-50%,0);
}
.veh{position:absolute;inset:0;opacity:0;visibility:hidden}
.veh.is-on{opacity:1;visibility:visible}
/* On the runway every paint is on the rail at once, so neighbours can peek in
   from the frame edges instead of appearing out of nowhere. */
.is-runway .veh{visibility:visible;will-change:transform,opacity;
  transition:opacity .35s var(--ease)}
.veh__body{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* the rim-light rake: a moving gradient clipped to the car's own alpha */
.veh__sheen{
  position:absolute;inset:0;
  background:linear-gradient(102deg,
    transparent 40%,
    rgba(255,246,232,.60) 47.5%,
    rgba(255,138,86,.42) 51%,
    transparent 59%);
  background-size:280% 100%;
  background-position:var(--sheen) 0;
  -webkit-mask-image:var(--m);mask-image:var(--m);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  mix-blend-mode:screen;
  opacity:var(--sheen-o);
  pointer-events:none;
}
.veh__mirror{
  position:absolute;left:0;top:100%;width:100%;height:100%;object-fit:contain;
  transform:scaleY(-1);transform-origin:top;
  opacity:.26;
  -webkit-mask-image:linear-gradient(#000 0%,rgba(0,0,0,.40) 28%,transparent 66%);
  mask-image:linear-gradient(#000 0%,rgba(0,0,0,.40) 28%,transparent 66%);
}
.veh-shadow{
  position:absolute;left:50%;bottom:-2%;width:88%;height:12%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(0,0,0,.85) 0%,rgba(0,0,0,.45) 42%,transparent 72%);
  filter:blur(6px);
  will-change:transform,opacity;
}

/* ─────────────────────────────── 5. SIGNAL ─────────────────────────────── */
.signal{
  position:fixed;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;
}
.signal--back{z-index:2}    /* horizon: reads behind the vehicle */
.signal--front{z-index:6;opacity:0}  /* road line / CTA rule: steps in front */
.signal path{
  fill:none;stroke:var(--sig-hot);stroke-width:.16;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 6px rgba(255,74,48,.85)) drop-shadow(0 0 22px rgba(226,35,26,.55));
  stroke-linecap:round;
}

/* ─────────────────────────────── 6. CHROME ─────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:20px var(--gut);
}
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(180deg,rgba(5,5,6,.9),rgba(5,5,6,0));
  transition:opacity .5s var(--ease);
}
.nav.is-stuck::before{opacity:1}

.mark{font-family:var(--disp);font-variation-settings:"wdth" 76,"wght" 800;
  letter-spacing:.1em;font-size:15px;white-space:nowrap}
.mark span{color:var(--sig)}
.mark b{margin-left:.4em;font-weight:inherit}

.nav__mid{display:flex;gap:clamp(14px,2.2vw,34px)}
.nav__mid a{
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);padding:6px 0;position:relative;transition:color .3s
}
.nav__mid a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--sig);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav__mid a:hover,.nav__mid a.is-here{color:var(--paper)}
.nav__mid a:hover::after,.nav__mid a.is-here::after{transform:scaleX(1);transform-origin:left}

.nav__end{display:flex;align-items:center;gap:14px}
.nav__now{font-family:var(--disp);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:13px 22px;border:1px solid transparent;border-radius:var(--r);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
  will-change:transform;white-space:nowrap
}
.btn svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.7}
.btn--solid,.btn--signal{background:var(--sig);color:#fff}
.btn--solid:hover,.btn--signal:hover{background:var(--paper);color:var(--ink)}
.btn--quiet{border-color:var(--hair);color:var(--mute)}
.btn--quiet:hover{color:var(--paper);border-color:var(--paper)}
.btn--big{padding:clamp(18px,2.4vw,26px) clamp(30px,4vw,52px);font-size:clamp(12px,1.2vw,15px);
  letter-spacing:.18em;background:var(--sig);color:#fff}
.btn--big:hover{background:var(--paper);color:var(--ink)}

.burger{display:none;width:40px;height:40px;border:1px solid var(--hair);position:relative}
.burger i{position:absolute;left:11px;width:18px;height:1px;background:var(--paper);transition:transform .4s var(--ease)}
.burger i:nth-child(1){top:16px}
.burger i:nth-child(2){top:22px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.rail{position:fixed;left:calc(var(--gut) * .42);top:50%;transform:translateY(-50%);z-index:29;
  display:flex;flex-direction:column;gap:16px}
.rail a{display:flex;align-items:center;gap:12px;color:var(--dim);transition:color .4s}
.rail a i{display:block;width:16px;height:1px;background:currentColor;transition:width .5s var(--ease)}
.rail a span{font-family:var(--disp);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  opacity:0;transform:translateX(-6px);transition:opacity .4s,transform .4s var(--ease)}
.rail a:hover span,.rail a.is-on span{opacity:1;transform:none}
.rail a.is-on{color:var(--sig)}
.rail a.is-on i{width:30px}

.grain{
  position:fixed;inset:-6vmax;z-index:8;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
.vignette{
  position:fixed;inset:0;z-index:7;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 46%,transparent 52%,rgba(0,0,0,.62) 100%);
}

/* ────────────────────────────── 7. CHAPTERS ────────────────────────────── */
/* No z-index here on purpose. Giving <main> a stacking context would lift the
   chapter type ABOVE the vehicle layer (z 3) and the car would end up printed
   behind the headline instead of cropping over it. */
main{position:relative}
.ch{position:relative;padding:0 var(--gut)}
/* Static chapters size to their content. Forcing 100svh here would clip on a
   short laptop; the pinned mode sets its own height in motion.css. */
.pin{position:relative;display:grid;align-content:center;
  padding:clamp(60px,10vh,120px) 0;gap:clamp(22px,3vh,40px)}
.can-pin .pin{padding:112px 0 92px}

/* 00 — ignition ---------------------------------------------------------- */
/* No height reservation needed: the vehicle block is in the flow and pushes
   the section open by itself, so overlap is structurally impossible. */
.ch0{display:grid;align-content:start;padding-top:13svh;
  padding-bottom:clamp(40px,7vh,90px);gap:clamp(14px,2vh,26px)}
.can-pin .ch0{min-height:100svh;padding-bottom:120px}
.drive,.hero-place{display:none}
.can-pin .drive{display:flex}
.can-pin .hero-place{display:block}
.hero-type{max-width:min(14ch,92vw);font-size:clamp(40px,7vw,116px)}
.can-pin .hero-type{font-size:clamp(44px,8vw,132px)}
.msk{display:block;overflow:hidden}
/* In pinned mode the left column is a protected reading field that must never
   sit under the car. In the static layout there is nothing to protect it from,
   so it can use the full width. */
.hero-sub,.hero-cta,.ch0 .ch__no{position:relative;z-index:6}
.can-pin .hero-sub,.can-pin .hero-cta,.can-pin .ch0 .ch__no{max-width:min(430px,40vw)}
.hero-sub{font-size:13.5px;color:var(--mute);line-height:1.7}
.hero-place{position:absolute;right:var(--gut);bottom:52px;text-align:right;
  font-family:var(--disp);font-size:13px;font-variation-settings:"wdth" 78,"wght" 700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mute);z-index:6;line-height:1.5}
.hero-place span{display:block;margin-top:6px;font-size:9.5px;letter-spacing:.18em;color:var(--dim)}

.drive{position:absolute;left:var(--gut);bottom:52px;display:flex;align-items:center;gap:14px;z-index:6}
.drive__k{font-size:9.5px;letter-spacing:calc(.24em + var(--vel) * .06em);text-transform:uppercase;
  color:var(--mute);transition:letter-spacing .4s var(--ease)}
.drive__bar{display:block;width:clamp(60px,9vw,130px);height:1px;background:var(--hair-2)}
.drive__bar i{display:block;height:100%;width:0;background:var(--sig)}

.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}

/* 01 — orbit ------------------------------------------------------------- */
.ch1 .pin{max-width:min(430px,40vw)}
.beats{display:grid;gap:0;border-top:1px solid var(--hair-2)}
.beat{display:grid;gap:4px;padding:22px 0;border-bottom:1px solid var(--hair-2)}
.beat__k{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.beat__v{display:flex;align-items:baseline;gap:8px}
.beat__v b{font-size:clamp(38px,4.6vw,72px);line-height:.9}
.beat__v em{font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.beat__d{font-size:12.5px;color:var(--mute);max-width:34ch;line-height:1.6}
.pin__hint{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}

/* 02 — inside the signal ------------------------------------------------- */
.ch2 .pin{max-width:min(430px,40vw)}
.scan{display:grid;gap:0;border-top:1px solid var(--hair-2)}
.scan__i{display:grid;gap:5px;padding:18px 0;border-bottom:1px solid var(--hair-2)}
.scan__i b{font-family:var(--disp);font-variation-settings:"wdth" 76,"wght" 700;
  font-size:17px;letter-spacing:.06em;text-transform:uppercase}
.scan__i span{font-size:12.5px;color:var(--mute);max-width:38ch}

/* 03 — runway ------------------------------------------------------------ */
.ch3 .pin{padding-bottom:112px}
/* Default: a plain readable stack. Stacking the lanes on one absolute spot is
   only safe once JS is driving the travel, so that is scoped to .can-pin. */
.runway{position:relative;display:grid;gap:32px;outline:none}
.lane{display:grid;gap:14px;padding-bottom:28px;border-bottom:1px solid var(--hair-2)}
.lane:last-child{border-bottom:0;padding-bottom:0}
.can-pin .runway{display:block;height:clamp(280px,42svh,420px)}
.can-pin .lane{
  position:absolute;left:0;top:0;width:min(430px,46vw);height:100%;
  align-content:center;padding-bottom:0;border-bottom:0;
  will-change:transform,opacity;
}
.lane__no{font-family:var(--disp);font-size:11px;letter-spacing:.28em;color:var(--sig)}
.lane__t{font-size:clamp(34px,5.4vw,88px)}
.lane__spec{display:grid;gap:0;border-top:1px solid var(--hair-2);max-width:340px}
.lane__spec>div{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--hair-2)}
.lane__spec dt{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.lane__spec dd{font-family:var(--disp);font-variation-settings:"wdth" 78,"wght" 700;font-size:16px}

/* Everything except the runway itself is confined to the reading column, so
   the CTA can never end up sitting underneath the vehicle. */
.ch3__head,.runway__foot,.ch3 .note{max-width:min(360px,38vw)}
.runway__foot{display:grid;gap:14px;justify-items:start}
.runway__ticks{display:flex;gap:10px;font-family:var(--disp);font-size:10px;letter-spacing:.2em}
.runway__ticks span{color:var(--dim);transition:color .4s}
.runway__ticks span.is-on{color:var(--sig)}
.runway__help{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* 04 — road to kendari --------------------------------------------------- */
.ch4{padding-top:clamp(80px,16vh,200px);padding-bottom:clamp(60px,10vh,140px)}
.road{max-width:min(900px,86vw);margin-bottom:clamp(60px,10vh,130px)}
.road__lead{margin-top:28px;max-width:46ch;font-size:15px;color:var(--mute);line-height:1.75}
.beats-road{display:grid;gap:clamp(48px,9vh,120px)}
.rb{display:grid;grid-template-columns:minmax(200px,38%) 1fr;gap:clamp(20px,4vw,64px);align-items:baseline;
  will-change:transform}
.rb--r{grid-template-columns:1fr minmax(200px,38%)}
.rb--r figcaption{order:-1}
.rb__n{font-size:clamp(44px,7.6vw,116px);line-height:.85;color:var(--sig)}
.rb__n span{display:block;margin-top:10px;font-size:11px;letter-spacing:.22em;color:var(--dim);
  font-variation-settings:"wdth" 82,"wght" 600}
.rb figcaption{font-size:14px;color:var(--mute);max-width:40ch;line-height:1.7;
  border-top:1px solid var(--hair-2);padding-top:16px}

/* 05 — your turn --------------------------------------------------------- */
.ch5{min-height:96svh;display:grid;align-content:center;gap:clamp(28px,5vh,56px);
  padding-top:clamp(60px,10vh,120px);padding-bottom:clamp(50px,8vh,90px)}
.finale{display:grid;justify-items:start;gap:16px}
.finale__u{display:block;width:0;height:2px;background:var(--sig-hot);
  box-shadow:0 0 12px rgba(255,74,48,.8)}
.finale__alt{font-size:12.5px;color:var(--mute)}
.finale__alt a{color:var(--paper);border-bottom:1px solid var(--hair)}
.fin-info{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  border-top:1px solid var(--hair-2);padding-top:26px;font-size:12.5px;color:var(--mute);line-height:1.7}
.fin-info b{color:var(--paper)}
.legal{font-size:11px;color:var(--dim);max-width:70ch;line-height:1.6}

/* ─────────────────────────── 8. LEAD DRAWER ────────────────────────────── */
.lead{position:fixed;inset:0;z-index:60;display:grid;place-items:center}
.lead[hidden]{display:none}
.lead__scrim{position:absolute;inset:0;background:rgba(4,4,5,.86);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px)}
.lead__panel{
  position:relative;width:min(560px,calc(100% - 32px));max-height:calc(100svh - 40px);
  overflow:auto;padding:clamp(28px,4vw,52px);
  background:linear-gradient(180deg,#0c0c0f,#08080a);
  border:1px solid var(--hair);
}
.lead__panel::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--sig)}
.lead__x{position:absolute;right:16px;top:14px;width:36px;height:36px;color:var(--mute);font-size:15px}
.lead__x:hover{color:var(--paper)}
.lead__no{font-family:var(--disp);font-size:10.5px;letter-spacing:.26em;color:var(--sig);margin-bottom:12px}
.lead__t{font-size:clamp(22px,2.6vw,34px);margin-bottom:26px}

.step{border:0;display:none}
.step.is-on{display:block}
.step legend{font-family:var(--disp);font-variation-settings:"wdth" 74,"wght" 800;
  font-size:clamp(20px,2.4vw,30px);text-transform:uppercase;line-height:.95;margin-bottom:22px}
.lead input[type=text],.lead input[type=tel]{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--hair);
  padding:14px 2px;font-size:clamp(17px,2vw,22px);transition:border-color .3s
}
.lead input::placeholder{color:var(--dim)}
.lead input:focus{border-bottom-color:var(--sig)}

.picks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.picks label{position:relative;display:block;cursor:pointer}
.picks input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.picks span{display:block;padding:14px 15px;border:1px solid var(--hair-2);font-size:12.5px;
  color:var(--mute);transition:border-color .3s,color .3s,background .3s}
.picks input:checked+span{border-color:var(--sig);color:var(--paper);background:rgba(226,35,26,.10)}
.picks input:focus-visible+span{outline:2px solid var(--sig-hot);outline-offset:2px}

.lead__err{margin-top:16px;font-size:12.5px;color:var(--sig-hot)}
.lead__nav{display:flex;gap:10px;margin-top:28px}
.lead__out{display:block;margin-top:22px;padding-top:20px;border-top:1px solid var(--hair-2);
  font-size:13px;color:var(--mute);line-height:1.7}
.lead__out b{color:var(--paper)}
.lead__msg{display:block;margin:12px 0;padding:14px;border:1px solid var(--hair-2);
  font-size:12.5px;color:var(--paper);white-space:pre-wrap;word-break:break-word}
.lead__out .btn{margin:6px 8px 0 0}

/* ───────────────────────────── 9. RESPONSIVE ───────────────────────────── */
/* Narrower desktops: the reading column tightens and the camera anchor slides
   right, so the vehicle can never crowd chapter 01/02 text. Verified by
   tools/check-collisions.py across 1280-2560px. */
@media (max-width:1400px){
  .ch1 .pin,.ch2 .pin{max-width:min(360px,38vw)}
  .veh-cam{left:70%}
}
@media (max-width:1180px){
  .nav__now{display:none}
}

/* ── tablet ───────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .rail{display:none}
  .nav__mid{
    position:fixed;inset:0;z-index:-1;flex-direction:column;justify-content:center;
    align-items:flex-start;gap:6px;padding:0 var(--gut);background:rgba(5,5,6,.97);
    opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s
  }
  .nav__mid.is-open{opacity:1;visibility:visible;z-index:28}
  .nav__mid a{font-family:var(--disp);font-variation-settings:"wdth" 72,"wght" 800;
    font-size:clamp(30px,7vw,54px);letter-spacing:.02em;color:var(--paper)}
  .burger{display:block;position:relative;z-index:31}
  .nav .btn--signal{display:none}

  .ch1 .pin,.ch2 .pin{max-width:none}
  .lane{width:min(460px,72vw)}
}

/* ── mobile: native scroll, no pinning, vehicle sits IN the flow ───────── */
@media (max-width:760px){
  /* stays in the flow — just wider, and bled slightly past the gutters */
  .veh-layer{margin-inline:calc(var(--gut) * -0.5);padding-bottom:16%}
  .veh-cam{width:min(100%,520px)}
  .veh__mirror{opacity:.16}
  .stage__sky{width:100%;right:0;top:-6%;height:74%;opacity:.62;
    -webkit-mask-image:radial-gradient(90% 62% at 62% 26%,#000 22%,transparent 86%);
    mask-image:radial-gradient(90% 62% at 62% 26%,#000 22%,transparent 86%)}
  .stage__grade{background:linear-gradient(180deg,rgba(5,5,6,.94) 0%,rgba(5,5,6,.2) 34%,rgba(5,5,6,.86) 88%)}
  .vignette{background:radial-gradient(130% 80% at 50% 40%,transparent 58%,rgba(0,0,0,.55) 100%)}

  .ch0{padding-top:96px;padding-bottom:34px}
  .hero-type{font-size:clamp(40px,11.5vw,58px)}
  .hero-place{display:none}
  .drive{position:static;margin-top:10px}
  .hero-cta{margin-top:22px;max-width:none;flex-direction:column;align-items:stretch}
  .hero-cta .btn{justify-content:center;padding-block:16px}
  .hero-sub,.ch0 .ch__no{max-width:none}

  .pin{min-height:auto;padding:60px 0}
  .beat__v b{font-size:clamp(40px,13vw,64px)}

  .runway{height:auto;display:flex;gap:0;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
  .runway::-webkit-scrollbar{display:none}
  .lane{position:relative;left:auto;top:auto;flex:0 0 82%;scroll-snap-align:center;
    height:auto;padding-right:22px;opacity:1;transform:none}
  .runway__foot{gap:14px}
  .runway__foot .btn{flex:1;justify-content:center}

  .rb,.rb--r{grid-template-columns:1fr;gap:16px}
  .rb--r figcaption{order:0}
  .fin-info{grid-template-columns:1fr;gap:18px}
  .picks{grid-template-columns:1fr}
  .finale{justify-items:stretch}
  .btn--big{justify-content:center}
}

@media (max-width:400px){
  .hero-type{font-size:clamp(38px,11.6vw,54px)}
}