/* ═══════════════════════════════════════════════════════════════
   APEX PERFORMANCE
   Palette argument: HOT is live data. COLD is dead data.
   Cold slate is the only cool hue on the page and appears
   exclusively where an identifier has been destroyed.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ground + neutrals, tinted toward the brand hue for cohesion */
  --void:  oklch(0.145 0.006 45);
  --elev:  oklch(0.190 0.008 45);
  --line:  oklch(0.265 0.010 45);
  --line2: oklch(0.340 0.014 45);

  --text:  oklch(0.962 0.009 60);
  --muted: oklch(0.707 0.012 55);
  --dim:   oklch(0.610 0.014 50);   /* 4.5:1 on --void */

  /* live */
  --hot:   oklch(0.705 0.191 37.5);
  --acc:   oklch(0.734 0.139 44);
  --warm:  oklch(0.824 0.084 42);

  /* dead — the only cold hue in the system.
     The signal is the HUE SHIFT away from the warm palette,
     never dimness; destroyed data must stay legible. */
  --dead:  oklch(0.660 0.055 235);

  --disp: "Cabinet Grotesk", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* 4pt scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* type scale, ~1.3 ratio */
  --t-xs: 0.6875rem;
  --t-sm: 0.875rem;
  --t-md: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);
  --t-lg: clamp(1.3rem, 1.05rem + 1.15vw, 1.95rem);
  --t-xl: clamp(1.9rem, 1.3rem + 2.9vw, 3.6rem);
  --t-2xl: clamp(2.6rem, 1.5rem + 5.4vw, 6.5rem);

  --gutter: clamp(20px, 5vw, 92px);
  --barh: 56px;              /* the fixed chrome; sticky things offset by it */
  --measure: 62ch;

  --ease: cubic-bezier(.16,1,.3,1);   /* ease-out-expo */
  --ease2: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--void);
  color:var(--text);
  font-family:var(--disp);
  font-weight:400;
  font-size:var(--t-md);
  line-height:1.62;              /* +0.07 for light-on-dark */
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'tnum' 1,'ss01' 1;
  overflow-x:clip;          /* clip, not hidden — hidden makes body a scroll container */
}

::selection{ background:var(--hot); color:var(--void); }

a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--hot);
  outline-offset:4px;
  border-radius:2px;
}

/* ───────────── atmosphere ───────────── */

.grain{
  position:fixed; inset:-50%;
  pointer-events:none; z-index:100;
  opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ambient{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.orb{ position:absolute; border-radius:50%; display:block; }
.orb-a{
  width:130vmax; height:130vmax; top:-72vmax; right:-46vmax;
  background:radial-gradient(circle, oklch(0.705 0.191 37.5 / .085) 0%, transparent 62%);
  animation:drift 34s var(--ease2) infinite alternate;
}
.orb-b{
  width:96vmax; height:96vmax; bottom:-58vmax; left:-40vmax;
  background:radial-gradient(circle, oklch(0.430 0.026 235 / .11) 0%, transparent 64%);
  animation:drift 44s var(--ease2) infinite alternate-reverse;
}
@keyframes drift{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(4vw,3vh,0) } }

/* ───────────── chrome ───────────── */

/* Fixed, since the page became long enough to need destinations. It
   was absolute while the site was five movements and had none. */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s5);
  height:var(--barh); padding:0 var(--gutter);
  background:var(--void); border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:var(--t-xs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.mark{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); flex:none; }
.mark__glyph{ width:15px; height:15px; fill:var(--hot); flex:none; }
.mark__word{ letter-spacing:.14em; }

.topnav{
  display:flex; align-items:center; gap:var(--s5);
  min-width:0; overflow-x:auto; scrollbar-width:none;
}
.topnav::-webkit-scrollbar{ display:none; }
.topnav a{
  position:relative; flex:none; padding:6px 0;
  text-decoration:none; color:var(--dim); white-space:nowrap;
  transition:color .3s var(--ease);
}
.topnav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--hot); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.topnav a:hover{ color:var(--muted); }
.topnav a.is-here{ color:var(--hot); }
.topnav a.is-here::after{ transform:scaleX(1); }

/* how far through the argument the reader is */
.progress{ position:absolute; left:0; right:0; bottom:-1px; height:1px; }
.progress span{
  display:block; height:100%; width:0; background:var(--hot);
  transform-origin:left;
}

/* the fixed bar must not sit on top of an anchored section */
.screen{ scroll-margin-top:var(--barh); }

/* ───────────── screens: one screen, one point ───────────── */

.screen{
  position:relative; z-index:2;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--s10) var(--gutter) var(--s9);
}
.wrap{ width:100%; max-width:1180px; margin:0; }

.eyebrow{
  font-family:var(--mono); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--hot);
  margin:0 0 var(--s5);
}

.head{
  font-family:var(--disp); font-weight:800;
  font-size:var(--t-xl); line-height:1.06; letter-spacing:-.032em;
  margin:0 0 var(--s5); max-width:19ch;
}
.sub{ color:var(--muted); max-width:var(--measure); margin:0 0 var(--s7); }

/* ── 01 the claim ── */

.claim{
  font-family:var(--disp); font-weight:800;
  font-size:var(--t-2xl); line-height:.95; letter-spacing:-.045em;
  margin:0; max-width:15ch;
}
.claim em{ font-style:normal; color:var(--hot); }

.lede{
  margin:var(--s6) 0 0; max-width:52ch;
  color:var(--muted); font-size:var(--t-lg); line-height:1.42; font-weight:400;
}

.scroll-cue{
  position:absolute; left:var(--gutter); bottom:var(--s7);
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:var(--t-xs);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); text-decoration:none;
  transition:color .4s var(--ease);
}
.scroll-cue svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; }
.scroll-cue svg path{ animation:nudge 2.6s var(--ease2) infinite; }
.scroll-cue:hover{ color:var(--hot); }
@keyframes nudge{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(3px) } }

/* ── 02 the proof: the signature element ── */

.proof{
  margin:var(--s7) 0 var(--s6);
  border:1px solid var(--line);
  background:var(--elev);
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
}
.proof__input{ padding:var(--s6); border-right:1px solid var(--line); }
.proof__label{
  display:block; font-family:var(--mono); font-size:var(--t-xs);
  letter-spacing:.15em; text-transform:uppercase; color:var(--dim);
  margin-bottom:var(--s3);
}
.proof__field{
  width:100%; background:transparent; border:0;
  border-bottom:1px solid var(--line2);
  color:var(--text); font-family:var(--mono);
  font-size:clamp(1.05rem,.75rem + 1.15vw,1.65rem);
  font-weight:500; letter-spacing:.04em;
  padding:var(--s3) 0; border-radius:0;
  transition:border-color .35s var(--ease);
}
.proof__field:focus{ outline:none; border-bottom-color:var(--hot); }
.proof__field::placeholder{ color:var(--dim); }
.proof__hint{
  margin:var(--s4) 0 0; font-size:var(--t-sm);
  color:var(--dim); line-height:1.5; max-width:34ch;
}

.proof__readout{ padding:var(--s6); display:flex; flex-direction:column; gap:var(--s4); }

.row{ display:flex; flex-direction:column; gap:6px; }
.row__key{
  font-family:var(--mono); font-size:var(--t-xs);
  letter-spacing:.15em; text-transform:uppercase; color:var(--dim);
}
.row__val{
  font-family:var(--mono); font-weight:500;
  font-size:clamp(1rem,.7rem + 1.05vw,1.5rem);
  letter-spacing:.055em; word-break:break-all; min-height:1.4em;
  color:var(--warm);
}
.row--after .row__val{ color:var(--muted); }

/* a digit that has been destroyed goes cold */
.d{ transition:color .5s var(--ease), opacity .5s var(--ease); }
.d.is-dead{ color:var(--dead); }
.d.is-doomed{ color:var(--hot); }

.verdict{
  margin:var(--s2) 0 0; font-size:var(--t-sm); line-height:1.5;
  color:var(--muted); border-top:1px solid var(--line); padding-top:var(--s4);
}
.verdict strong{ color:var(--hot); font-weight:700; }
.verdict.is-safe strong{ color:var(--warm); }

.footnote{
  margin:0; max-width:var(--measure);
  font-size:var(--t-sm); color:var(--dim); line-height:1.6;
}
.footnote strong{ color:var(--muted); font-weight:600; }

/* ── 03 the eight: a register, not a card grid ── */

.rack{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }

.defect{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:baseline; gap:var(--s5);
  padding:var(--s4) var(--s2);
  border-bottom:1px solid var(--line);
  transition:background-color .45s var(--ease), padding-left .45s var(--ease);
}
.defect:hover{ background:var(--elev); padding-left:var(--s4); }

.defect__code{
  font-family:var(--mono); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.1em; color:var(--dim);
  transition:color .45s var(--ease);
}
.defect:hover .defect__code{ color:var(--hot); }

.defect__name{
  margin:0; font-family:var(--disp); font-weight:500;
  font-size:clamp(1rem,.9rem + .5vw,1.35rem);
  letter-spacing:-.018em; line-height:1.25; color:var(--text);
}

.defect__spec{
  font-family:var(--mono); font-size:var(--t-sm);
  color:var(--dead);                 /* damaged data is cold */
  white-space:nowrap; letter-spacing:.03em;
}
.defect__spec i{ font-style:normal; color:var(--dim); padding:0 .25em; }

/* ── 04 who ── */

/* No CV table. A table of institutions, roles and dates is the tell
   of someone applying for something. The name carries the section;
   the credentials are mentioned once, quietly, and not argued. */

.name{
  font-family:var(--disp); font-weight:800;
  font-size:clamp(2.4rem, 1.35rem + 4.6vw, 5.4rem);
  line-height:.97; letter-spacing:-.046em;
  margin:0 0 var(--s6);
}

.creed{
  margin:0 0 var(--s6); max-width:24ch;
  font-family:var(--disp); font-weight:500;
  font-size:var(--t-lg); line-height:1.3; letter-spacing:-.02em;
  color:var(--text);
}
.creed em{ font-style:normal; color:var(--hot); }

.marks{
  margin:0 0 var(--s8);
  font-family:var(--mono); font-size:var(--t-xs); font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--dim); line-height:2.1;
}
.marks i{ font-style:normal; color:var(--line2); padding:0 .75em; }

.who__close{
  margin:0; max-width:var(--measure);
  color:var(--muted); font-size:var(--t-md);
}

/* ── 05 contact ── */

.screen--gauge{ justify-content:flex-start; }
.screen--contact{ justify-content:center; }
.closer{
  font-family:var(--disp); font-weight:800;
  font-size:var(--t-xl); line-height:1.08; letter-spacing:-.034em;
  margin:0 0 var(--s7); max-width:17ch;
}
.closer em{ font-style:normal; color:var(--muted); }

.mailto{
  display:inline-block; text-decoration:none;
  font-family:var(--mono); font-weight:500;
  font-size:clamp(1rem,.75rem + .95vw,1.5rem);
  color:var(--hot); letter-spacing:.01em;
  padding-bottom:6px; border-bottom:1px solid oklch(0.705 0.191 37.5 / .35);
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.mailto:hover{ color:var(--warm); border-bottom-color:var(--warm); }

.foot{
  position:absolute; left:var(--gutter); right:var(--gutter); bottom:var(--s6);
  display:flex; justify-content:space-between; gap:var(--s4);
  border-top:1px solid var(--line); padding-top:var(--s4);
  font-family:var(--mono); font-size:var(--t-xs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}

/* ── the strip note: the widget must not alter input silently ── */

.proof__note{
  margin:var(--s3) 0 0; max-width:34ch;
  font-size:var(--t-sm); line-height:1.5; color:var(--warm);
}
.proof__note[hidden]{ display:none; }

/* ── 05 the gauge ──
   Same ruled register as the eight, not a card stack. The choice rows
   inherit the page's one rule: hot is live. A selected option is live
   data; nothing here is destroyed, so cold slate never appears. */

.gauge{ margin:var(--s7) 0 var(--s6); }
.stages{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }

.stage{ padding:var(--s6) var(--s2); border-bottom:1px solid var(--line); }

.stage__head{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:var(--s5); align-items:baseline;
}
.stage__code{
  font-family:var(--mono); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.1em; color:var(--dim);
}
.stage__name{
  margin:0 0 8px; font-family:var(--mono); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--hot);
}
.stage__q{
  margin:0; max-width:46ch;
  font-family:var(--disp); font-weight:500;
  font-size:clamp(1rem,.9rem + .5vw,1.35rem);
  letter-spacing:-.018em; line-height:1.3; color:var(--text);
}

.opts{ display:grid; gap:2px; margin:var(--s5) 0 0; }

.opt{
  display:grid; grid-template-columns:auto auto minmax(0,1fr);
  gap:var(--s4); align-items:start;
  padding:var(--s3) var(--s4);
  border:1px solid transparent;
  color:var(--muted); font-size:var(--t-sm); line-height:1.55;
  cursor:pointer;
  transition:background-color .28s var(--ease), color .28s var(--ease),
             border-color .28s var(--ease);
}
.opt:hover{ background:var(--elev); color:var(--text); }

.opt input{
  appearance:none; -webkit-appearance:none;
  margin:0; width:11px; height:11px; flex:none;
  border:1px solid var(--line2); border-radius:0; background:transparent;
  transform:translateY(.42em);
  transition:background-color .28s var(--ease), border-color .28s var(--ease);
}
.opt input:checked{ background:var(--hot); border-color:var(--hot); }
.opt input:focus-visible{ outline:2px solid var(--hot); outline-offset:3px; }

.opt.is-picked,
.opt:has(input:checked){ background:var(--elev); border-color:var(--line); color:var(--text); }

.gauge__out{
  margin:0 0 var(--s6);
  border:1px solid var(--line); background:var(--elev);
  padding:var(--s6);
  display:flex; flex-direction:column; gap:var(--s4);
}

.opt__lvl{
  font-family:var(--mono); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.08em; color:var(--dim);
  transition:color .28s var(--ease);
}
.opt.is-picked .opt__lvl,
.opt:has(input:checked) .opt__lvl{ color:var(--hot); }

.stage__sub{
  margin:0 0 10px; font-size:var(--t-sm);
  color:var(--dim); line-height:1.45;
}

/* ── 03b the strip ──
   An instrument-panel comic, not a pastiche: the same hairline panels,
   mono voice and hot/cold rule as the rest of the page. The animation
   is the joke — the promise edits itself and a digit goes cold. */

.screen--aside{ min-height:auto; padding:var(--s9) var(--gutter); }

.strip{
  display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line); background:var(--elev);
  margin:var(--s6) 0 var(--s5);
}
.panel{
  position:relative; margin:0;
  padding:var(--s6) var(--s5) var(--s5);
  display:flex; flex-direction:column; justify-content:space-between;
  gap:var(--s6); min-height:270px;
}
.panel + .panel{ border-left:1px solid var(--line); }
.panel__n{
  position:absolute; top:var(--s4); left:var(--s5);
  font-family:var(--mono); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.1em; color:var(--line2);
}
.panel__talk{ display:flex; padding-top:var(--s4); }
.panel__talk:has(.bubble--r){ justify-content:flex-end; }

.bubble{
  position:relative; margin:0; max-width:26ch;
  border:1px solid var(--line2); background:var(--void);
  padding:var(--s3) var(--s4);
  font-size:var(--t-sm); line-height:1.45; color:var(--text);
}
/* the tail, drawn as a rotated corner so it inherits the hairline */
.bubble::after{
  content:""; position:absolute; bottom:-5px; left:22px;
  width:8px; height:8px; background:var(--void);
  border-right:1px solid var(--line2); border-bottom:1px solid var(--line2);
  transform:rotate(45deg);
}
.bubble--r::after{ left:auto; right:22px; }

/* the clause that quietly leaves */
.clause{ display:inline-block; white-space:nowrap; overflow:hidden; vertical-align:bottom; max-width:22ch; }

.panel__cast{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.panel__cast--r{ align-items:flex-end; }
/* nowrap, and the row may not shrink: the swapped digit is an
   inline-block and a squeezed flex item will break the line before it */
.panel__cast--pair{ flex-direction:row; align-items:flex-end; gap:var(--s4); flex-wrap:nowrap; }
.panel__cast--pair .ch--row{ flex:0 1 auto; min-width:0; }
.panel__cast--pair .ch__digits{ font-size:clamp(.62rem,.5rem + .3vw,.8rem); }

.ch{ position:relative; display:block; }
.ch__face{ display:flex; gap:7px; margin:0 0 7px 3px; }
.ch__face i{ width:4px; height:4px; background:var(--muted); display:block; border-radius:50%; }

.ch--sheet{ width:74px; height:56px; border:1px solid var(--line2); background:var(--void); padding:5px 6px; }
.ch--sheet .ch__bar{
  position:absolute; inset:0 0 auto 0; height:9px;
  background:oklch(0.705 0.191 37.5 / .22); border-bottom:1px solid var(--line2);
}
.ch--sheet .ch__face{ margin:14px 0 6px 4px; }
.ch--sheet .ch__grid{ display:block; height:14px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.ch--sm{ width:56px; height:46px; }
.ch--sm .ch__face{ margin:12px 0 4px 3px; }
.ch--sm .ch__grid{ height:8px; }

.ch--row{ border:1px solid var(--line2); background:var(--void); padding:6px 10px 8px; white-space:nowrap; }
.ch__digits{
  display:block; font-family:var(--mono); font-weight:500;
  font-size:clamp(.72rem,.6rem + .35vw,.95rem);
  letter-spacing:.04em; color:var(--warm); white-space:nowrap;
}
/* both digits occupy one grid cell, so they overlap and cross-fade.
   Absolute children would collapse the box to zero height and drop the
   digit below the baseline. */
.swap{ display:inline-grid; vertical-align:baseline; }
.swap b{ grid-area:1 / 1; font-weight:500; }
.swap__a{ color:var(--hot); }
.swap__b{ color:var(--dead); opacity:0; }

.ch__name{
  font-family:var(--mono); font-size:var(--t-xs);
  letter-spacing:.15em; text-transform:uppercase; color:var(--dim);
}

.strip__cap{
  margin:0; display:flex; align-items:baseline; gap:var(--s5); flex-wrap:wrap;
  font-size:var(--t-sm); color:var(--dim);
}
.replay{
  border:0; background:none; padding:0; cursor:pointer;
  font-family:var(--mono); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--hot);
  transition:color .3s var(--ease);
}
.replay:hover{ color:var(--warm); }

/* the run. fill-mode both, so reduced motion lands on the end state
   and the gag still reads as a finished strip. */
.strip.is-running .panel{ animation:panelIn .5s var(--ease) both; }
.strip.is-running .panel:nth-child(2){ animation-delay:.45s; }
.strip.is-running .panel:nth-child(3){ animation-delay:.9s; }
.strip.is-running .clause{ animation:clauseOut .7s var(--ease) 2.1s both; }
.strip.is-running .swap__a{ animation:fadeOut .5s var(--ease) 2.5s both; }
.strip.is-running .swap__b{ animation:fadeIn .5s var(--ease) 2.5s both; }

@keyframes panelIn{ from{ opacity:0; transform:translate3d(0,10px,0) } to{ opacity:1; transform:none } }
@keyframes clauseOut{ from{ opacity:1; max-width:22ch } to{ opacity:0; max-width:0 } }
@keyframes fadeOut{ from{ opacity:1 } to{ opacity:0 } }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }

/* ── the ladder ──
   Shown before the questions. Without it the four options read as four
   opinions rather than four rungs, which is the whole instrument. */

.ladder{
  margin:0 0 var(--s7);
  border:1px solid var(--line); background:var(--elev);
  padding:var(--s5) var(--s6);
}
.ladder__key{
  margin:0 0 var(--s4);
  font-family:var(--mono); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
}
.ladder__list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ladder__list li{
  display:grid; grid-template-columns:auto auto minmax(0,1fr);
  gap:var(--s4); align-items:baseline;
  font-size:var(--t-sm); line-height:1.5;
}
.lvl{
  font-family:var(--mono); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.08em; color:var(--hot);
}
.ladder__list b{ font-weight:600; color:var(--text); white-space:nowrap; }
.ladder__list li > span:last-child{ color:var(--muted); }

/* ── the spine: a pipeline, not a legend ──
   Dashed hairline and dim while a stage is unanswered; solid, hot and
   connected once it is. The dashed-connector vocabulary is borrowed from
   diagrammatic fintech work; the palette rule is unchanged — hot is live. */

.spine{
  position:sticky; top:var(--barh); z-index:20;
  margin:0 0 var(--s7); padding:var(--s4) var(--s2) var(--s5);
  background:var(--void); border-bottom:1px solid var(--line);
}
.spine__top{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s4); margin:0 0 var(--s5);
  font-family:var(--mono); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
}
.spine__label{ color:var(--dim); }
.spine__count{ color:var(--hot); flex:none; }

.spine__list{ list-style:none; margin:0; padding:0; display:flex; }

.spine__cell{
  position:relative; flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center;
}
/* the connector to the next node */
.spine__cell::after{
  content:""; position:absolute; top:13px; height:1px;
  left:calc(50% + 17px); width:calc(100% - 34px);
  background:repeating-linear-gradient(90deg, var(--line2) 0 3px, transparent 3px 7px);
  transition:background-image .4s var(--ease);
}
.spine__cell:last-child::after{ display:none; }

.spine__node{
  display:grid; place-items:center;
  width:27px; height:27px; flex:none;
  border:1px dashed var(--line2); background:var(--void);
  transition:border-color .35s var(--ease), border-style .35s var(--ease),
             background-color .35s var(--ease);
}
.spine__node b{
  font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.02em; color:var(--line2);
  transition:color .35s var(--ease);
}
.spine__cell i{
  font-style:normal; font-family:var(--mono);
  font-size:9.5px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--dim); line-height:1.35;
  transition:color .35s var(--ease);
}

.spine__cell.is-set .spine__node{ border-style:solid; border-color:var(--hot); }
.spine__cell.is-set .spine__node b{ color:var(--hot); }
.spine__cell.is-set i{ color:var(--muted); }
.spine__cell.is-set::after{
  background:repeating-linear-gradient(90deg, var(--hot) 0 3px, transparent 3px 7px);
  animation:ants 1.1s linear infinite;
}
@keyframes ants{ to{ background-position:7px 0 } }

/* ── the ask, once the seven are answered ── */

.acts{ margin:var(--s5) 0 0; padding:var(--s5) 0 0; border-top:1px solid var(--line); }
.acts[hidden]{ display:none; }
.acts__q{
  margin:0 0 var(--s4);
  font-family:var(--mono); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
}
.chips{ display:flex; flex-wrap:wrap; gap:var(--s2); margin:0 0 var(--s5); }
.chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:var(--s2) var(--s4);
  border:1px solid var(--line2); color:var(--muted);
  font-size:var(--t-sm); cursor:pointer;
  transition:border-color .28s var(--ease), color .28s var(--ease);
}
.chip input{
  appearance:none; -webkit-appearance:none;
  margin:0; width:9px; height:9px; flex:none; border-radius:0;
  border:1px solid var(--line2); background:transparent;
  transition:background-color .28s var(--ease), border-color .28s var(--ease);
}
.chip input:checked{ background:var(--hot); border-color:var(--hot); }
.chip:has(input:checked){ border-color:var(--hot); color:var(--text); }
.chip input:focus-visible{ outline:2px solid var(--hot); outline-offset:3px; }

.acts__btns{ display:flex; flex-wrap:wrap; gap:var(--s3); margin:0 0 var(--s4); }
.btn{
  display:inline-flex; align-items:center; text-decoration:none;
  padding:var(--s3) var(--s5);
  border:1px solid var(--line2); color:var(--text);
  font-family:var(--mono); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  transition:border-color .3s var(--ease), color .3s var(--ease),
             background-color .3s var(--ease);
}
.btn:hover{ border-color:var(--hot); color:var(--hot); }
.btn--primary{ background:var(--hot); border-color:var(--hot); color:var(--void); }
.btn--primary:hover{ background:var(--warm); border-color:var(--warm); color:var(--void); }
.acts__note{
  margin:0; max-width:64ch;
  font-size:var(--t-sm); color:var(--dim); line-height:1.55;
}

/* ── 06 the doors: the proof panel's geometry, reused ── */

.doors{
  margin:0 0 var(--s7);
  border:1px solid var(--line); background:var(--elev);
  display:grid; grid-template-columns:1fr 1fr;
}
.door{ padding:var(--s6); }
.door + .door{ border-left:1px solid var(--line); }
.door__name{
  margin:0 0 var(--s3);
  font-family:var(--disp); font-weight:700;
  font-size:clamp(1.05rem,.95rem + .5vw,1.4rem);
  letter-spacing:-.022em; color:var(--text);
}
.door__body{
  margin:0 0 var(--s4); color:var(--muted);
  font-size:var(--t-sm); line-height:1.6;
}
.door__note{
  margin:0; font-family:var(--mono); font-size:var(--t-xs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}

/* ───────────── reveal ───────────── */

.reveal{ opacity:0; transform:translate3d(0,18px,0); }

/* The hidden state belongs to JavaScript. If main.js never runs, the
   failsafe in the document head restores `no-js` and everything shows. */
.no-js .reveal,
.no-js .defect{ opacity:1; transform:none; }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.reveal[data-delay="1"].is-in{ transition-delay:.05s }
.reveal[data-delay="2"].is-in{ transition-delay:.10s }
.reveal[data-delay="3"].is-in{ transition-delay:.15s }
.defect.is-in{ transition:opacity .5s var(--ease), transform .5s var(--ease),
                          background-color .45s var(--ease), padding-left .45s var(--ease); }

/* ───────────── responsive ───────────── */

@media (max-width:900px){
  .proof{ grid-template-columns:1fr; }
  .proof__input{ border-right:0; border-bottom:1px solid var(--line); }
  .doors{ grid-template-columns:1fr; }
  .door + .door{ border-left:0; border-top:1px solid var(--line); }
}

@media (max-width:620px){
  .screen{ padding:var(--s9) var(--gutter) var(--s8); min-height:auto; }
  .screen--claim{ min-height:calc(100svh - var(--barh)); }
  .claim{ max-width:none; }
  .defect{ grid-template-columns:auto minmax(0,1fr); row-gap:6px; }
  .defect__spec{ grid-column:2; white-space:normal; }
  .mark__word{ display:none; }
  .foot{ position:static; margin-top:var(--s8); }
  .scroll-cue{ position:static; margin-top:var(--s7); }
  .stage{ padding:var(--s5) 0; }
  .stage__head{ gap:var(--s4); }
  .opt{ padding:var(--s3) var(--s2); gap:var(--s3); }
  .gauge__out{ padding:var(--s5); }
  .door{ padding:var(--s5); }
  .ladder{ padding:var(--s5); }
  .ladder__list li{ grid-template-columns:auto minmax(0,1fr); row-gap:2px; }
  .ladder__list li > span:last-child{ grid-column:2; }
  /* a sticky rail eats too much of a phone viewport; and seven nodes in
     one row leaves no room for the labels */
  .spine{ position:static; padding:var(--s4) 0; }
  .spine__list{ flex-wrap:wrap; row-gap:var(--s4); }
  .spine__cell{ flex:0 0 25%; }
  .spine__cell::after{ display:none; }
  .opt{ grid-template-columns:auto auto minmax(0,1fr); gap:var(--s3); }
  .btn{ flex:1 1 auto; justify-content:center; }
  .strip{ grid-template-columns:1fr; }
  .panel{ min-height:0; padding:var(--s6) var(--s5) var(--s5); }
  .panel + .panel{ border-left:0; border-top:1px solid var(--line); }
}

/* ───────────── reduced motion ───────────── */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}