/* The two faces are the packaged ones the demo already serves — `../fonts/`
   rather than a second vendored copy beside this file, which is what the lab
   piece carried. A `url()` resolves against the stylesheet, so this is
   `/static/fonts/…` wherever the document lives. */
@font-face{font-family:"Archivo VF";src:url("../fonts/archivo-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:block;font-style:normal}
@font-face{font-family:"JetBrains Mono VF";src:url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");font-weight:100 800;font-display:block;font-style:normal}

:root{
  --void:#08080a; --pitch:#040405; --plate:#0e0e12; --plate2:#141419; --plate3:#1a1a20;
  --seam:#242429; --seam2:#33333b;
  --fg:#f3f0ea; --fg2:#9d968c; --fg3:#6b665e;
  /* the one accent — gold */
  --gold:#e7b455; --gold-hi:#f6cd78; --gold-ink:#120c02;
  --gold-6:rgba(231,180,85,.06); --gold-12:rgba(231,180,85,.12);
  --gold-24:rgba(231,180,85,.24); --gold-44:rgba(231,180,85,.44);
  /* the seen channel — the machine reading the screen. Semantic only. */
  --seen:#c9f938; --seen-24:rgba(201,249,56,.24); --seen-48:rgba(201,249,56,.48);
  --sans:"Archivo VF",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono VF",ui-monospace,SFMono-Regular,monospace;
  --gut:clamp(20px,4.2vw,72px);
  --maxw:1460px;
}
*{margin:0;padding:0;box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--pitch);color:var(--fg);font-family:var(--sans);font-size:16px;
  line-height:1.55;font-weight:340;letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--gold-ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.mono,.id{font-family:var(--mono);font-variant-ligatures:none}
.id{text-transform:none}
.ml{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;color:var(--fg3);font-variant-ligatures:none;line-height:1.4}
.ml.gold{color:var(--gold)}
.ml.seen{color:var(--seen)}
/* The accent as a class rather than as a `style=` attribute. The lab piece
   wrote `style="color:var(--gold)"` in three places, two of them inside
   strings the script builds; the served page runs under the demo's CSP, where
   `style-src 'self'` refuses a style attribute wherever it was written. Same
   colour, same elements — see the graduation note in `index.html`. */
.gold{color:var(--gold)}
.kick{display:flex;align-items:center;gap:12px}
.kick s{display:block;width:34px;height:1px;background:var(--gold);text-decoration:none;flex:none}

h1,h2,h3{font-weight:200;letter-spacing:-.034em;line-height:1;text-wrap:balance}
h1{font-size:clamp(2.7rem,5.6vw,5.6rem);line-height:.96;letter-spacing:-.04em;color:#fff}
h1 em{font-style:normal;color:var(--gold);font-weight:200}
h2{font-size:clamp(1.9rem,3.5vw,3.35rem);font-weight:210}
h2 em{font-style:normal;color:var(--gold);font-weight:210}
.lede{font-size:clamp(.98rem,1.12vw,1.1rem);line-height:1.62;color:var(--fg2);
  max-width:60ch;font-weight:340}
.lede b{color:var(--fg);font-weight:500}

/* ── top rail — floats over the room ─────────────────────────────── */
.rail{position:absolute;top:0;left:0;right:0;z-index:30;border-bottom:1px solid rgba(255,255,255,.07)}
.railin{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 0 14px}
.mark b{font-family:var(--sans);font-weight:500;font-size:16.5px;letter-spacing:-.035em;color:var(--fg)}
.mark b i{font-style:normal;color:var(--gold)}
.railmeta{display:flex;align-items:center;gap:16px}

/* ── beat 1 · the room ───────────────────────────────────────────── */
.hero{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;
  display:flex;flex-direction:column;border-bottom:1px solid var(--seam)}
.wallwrap{position:absolute;inset:-5%;z-index:0;overflow:hidden}
/* the gate breathes. Amplitude is deliberately small: the lit tile is placed
   with measured clearance from the copy and the light table, and that
   clearance has to survive the whole drift cycle. */
@keyframes drift{
  0%{transform:translate3d(-.5%,-.4%,0) scale(1.012)}
  50%{transform:translate3d(.4%,.3%,0) scale(1.024)}
  100%{transform:translate3d(-.2%,.5%,0) scale(1.012)}}
.wallwrap{animation:drift 150s ease-in-out infinite alternate}
/* v1's wall texture: the frames butt, no gap and no hairline between them —
   one surface, not a grid of cards (Tom, 2026-08-10). */
.wall{display:grid;width:100%;height:100%;gap:0;background:#07070a;grid-auto-rows:1fr}
.wt{position:relative;overflow:hidden;background:#07070a}
.wt img{width:100%;height:100%;object-fit:cover;
  filter:brightness(.52) saturate(.72) contrast(1.05);
  transition:filter .5s linear}
.wall.searching .wt img{filter:brightness(.13) saturate(.2)}
/* the found tile is under the scrim, so it is lit past it, not just to normal */
.wall .wt.hit img{filter:brightness(1.34) saturate(1.04) contrast(1.02);transition-duration:.25s}
.wall .wt.hit{z-index:2}
.wall .wt.hit::after{content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 2px var(--gold)}
.wall .wt.hit::before{content:'src';position:absolute;left:0;top:0;z-index:2;
  background:var(--gold);color:var(--gold-ink);font-family:var(--mono);font-size:7.5px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:2px 5px;line-height:1.2}
.scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(102deg,rgba(4,4,5,.9) 0%,rgba(4,4,5,.62) 30%,rgba(4,4,5,.26) 58%,rgba(4,4,5,.1) 100%),
  linear-gradient(to bottom,rgba(4,4,5,.62) 0%,rgba(4,4,5,.06) 22%,rgba(4,4,5,.06) 70%,rgba(4,4,5,.72) 100%)}

.heroin{position:relative;z-index:5;flex:1;max-width:var(--maxw);margin:0 auto;width:100%;
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);align-items:center;
  gap:clamp(28px,3.4vw,60px);padding:clamp(84px,9vh,120px) var(--gut) clamp(64px,7vh,90px)}
.herocopy{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(16px,1.9vw,26px);
  max-width:37rem}
.herocopy .lede{color:#c9c2b6;text-shadow:0 1px 18px rgba(0,0,0,.85);max-width:46ch}
.herocopy .lede b{color:#fff}

/* the query bar: the machine's one input */
.slug{width:100%;max-width:560px;display:flex;align-items:stretch;height:52px;
  background:rgba(8,8,11,.94);border:1px solid var(--seam2);
  box-shadow:0 22px 50px -18px rgba(0,0,0,.9)}
.slug .ic{width:44px;display:grid;place-items:center;color:var(--gold);
  border-right:1px solid var(--seam)}
.slug .ic svg{width:13px;height:13px}
.slug .q{flex:1;min-width:0;display:flex;align-items:center;padding:0 13px;
  font-family:var(--mono);font-size:13.5px;color:var(--fg);white-space:nowrap;
  overflow:hidden;font-variant-ligatures:none}
.caret{display:inline-block;width:8px;height:17px;background:var(--gold);
  margin-left:3px;flex:none;opacity:0}
.slug.typing .caret{opacity:1;animation:blink 1.05s steps(1,end) infinite}
@keyframes blink{0%,52%{opacity:1}53%,100%{opacity:0}}
.slug .st{display:flex;align-items:center;padding:0 14px;border-left:1px solid var(--seam);
  font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg3);background:#0a0a0e;white-space:nowrap}
.slug .st[data-s="reading"],.slug .st[data-s="scanning"]{background:var(--gold);color:var(--gold-ink)}
.slug .st[data-s="lifted"]{color:var(--gold)}

.ctarow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* `line-height:normal` is stated because the CTA is an `<a>` now (it points at
   /demo): a form control does not inherit line-height, so the button was on
   `normal` and an anchor takes the body's 1.55 — two pixels of button height,
   and the hero column is centred, so it moved the H1, the lede and the query
   bar a pixel each. `normal` is what the button had; it is measured, at 46px.*/
.cta{display:inline-flex;align-items:center;gap:12px;background:var(--gold);color:var(--gold-ink);
  font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:-.012em;line-height:normal;
  padding:14px 20px 14px 22px;border:1px solid var(--gold);cursor:pointer;
  transition:background .16s ease}
.cta:hover{background:var(--gold-hi)}
.cta svg{width:12px;height:12px;flex:none}
.chips{display:flex;flex-wrap:wrap;border:1px solid var(--seam2);background:rgba(8,8,11,.9)}
.chips button{padding:0 12px;height:44px;background:transparent;border:0;
  border-right:1px solid var(--seam);color:var(--fg3);font-family:var(--mono);font-size:10px;
  letter-spacing:.05em;cursor:pointer;font-variant-ligatures:none;max-width:38vw;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .16s ease}
.chips button:last-child{border-right:0}
.chips button:hover{color:var(--fg)}
.chips button.on{background:var(--gold-12);color:var(--gold)}
.canned{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg3);line-height:1.7;font-variant-ligatures:none}

/* the light table — where the lifted frame lands */
.bench{position:relative;width:100%;background:var(--plate);border:1px solid var(--seam2);
  box-shadow:0 44px 90px -28px rgba(0,0,0,.95);opacity:1;transition:opacity .3s linear}
/* between questions the table steps back, but not so far that the wall
   reads through it — the frames behind it are v1-sized now */
.bench.idle{opacity:.72}
/* veiled: laid out at final size but not yet shown — the lift is in flight.
   The frame slot itself stays, empty, as the landing pad; hiding the image
   and the boxes rather than the figure, because populateBench sets the
   figure's opacity inline and inline beats a class. */
.bench.veil .frame>img,.bench.veil .frame .det,
.bench.veil .benchsay,.bench.veil .benchfoot{opacity:0}
.bench::before{content:"";position:absolute;left:-1px;top:-1px;width:12px;height:1px;background:var(--gold)}
.bench::after{content:"";position:absolute;left:-1px;top:-1px;width:1px;height:12px;background:var(--gold)}
.benchhead{display:flex;align-items:center;gap:12px;padding:9px 14px;
  border-bottom:1px solid var(--seam);background:var(--plate2);min-height:32px;flex-wrap:wrap}
.benchhead .r{margin-left:auto}
.benchsay{padding:16px 18px 15px;border-top:1px solid var(--seam);display:flex;
  flex-direction:column;gap:11px}
.said{font-size:clamp(1rem,1.24vw,1.24rem);line-height:1.36;font-weight:330;
  letter-spacing:-.022em;color:var(--fg);border-left:1px solid var(--gold);
  padding-left:14px;max-width:58ch;text-wrap:pretty}
.who{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.who strong{font-size:14px;font-weight:520;letter-spacing:-.02em}
.who em{font-style:normal;font-size:13px;color:var(--fg2);font-weight:340}
.who em::before{content:"";display:inline-block;width:1px;height:9px;background:var(--seam2);
  margin-right:10px;vertical-align:baseline}
.benchfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--seam);padding:11px 16px;background:var(--plate2)}
.benchfoot .r{margin-left:auto}

/* the frame and its detections — boxes exactly where ocr_lines put them */
.frame{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;isolation:isolate}
/* the table's slot before anything has been lifted onto it. Only the markup's
   own figure carries this id — populateBench replaces it with a fresh one and
   sets the opacity through the CSSOM, which is the inline the comment above
   `.bench.veil` is about. */
#benchframe{opacity:0}
.frame>img{width:100%;height:100%;object-fit:cover;display:block}
.frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.det{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);
  outline:1px solid rgba(201,249,56,.22);pointer-events:none}
.det.on{outline:1.5px solid var(--seen)}
.det .tab{position:absolute;left:-1.5px;bottom:100%;margin-bottom:3px;
  background:var(--seen);color:#0a1400;font-family:var(--mono);font-size:8.5px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:2.5px 6px;
  white-space:nowrap;line-height:1.1;display:flex;gap:7px;align-items:center}
.det .tab i{font-style:normal;font-weight:500;opacity:.66;letter-spacing:.06em;text-transform:none}
@keyframes acq{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
.frame.acq .det{animation:acq .45s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:calc(var(--i)*46ms + 120ms)}

/* the lift — a frame coming off the wall.
   Sized at the landing rect and scaled DOWN onto the source tile, so the
   flight is one composited transform: no per-frame layout, no jitter, and
   the two rects are both 16:9 so nothing is ever squashed. The outline is
   counter-scaled at the start so it reads as 2px the whole way. */
.lift{position:fixed;z-index:60;overflow:hidden;background:#000;pointer-events:none;
  transform-origin:0 0;will-change:transform;
  outline:2px solid var(--gold);box-shadow:0 40px 90px -20px rgba(0,0,0,.95);
  transition:transform .82s cubic-bezier(.22,.72,.2,1),
    outline-width .82s cubic-bezier(.22,.72,.2,1)}
.lift img{width:100%;height:100%;object-fit:cover}
/* the landing pad: the table's empty frame slot is drawn while the frame is
   still in the air, so the lift is visibly going somewhere */
.bench.veil .frame{outline:1px solid var(--gold-24);outline-offset:-1px}

/* the receipt slab */
.receipt{display:inline-flex;align-items:stretch;font-family:var(--mono);font-size:13px;
  font-weight:600;line-height:1;border:1px solid var(--gold);color:var(--gold);
  background:var(--gold-6);letter-spacing:-.01em;font-variant-ligatures:none;
  align-self:flex-start;transition:background .16s ease}
.receipt span{padding:9px 0 9px 11px;display:flex;align-items:center}
.receipt span.vid{padding-left:0;color:var(--fg)}
.receipt b{background:var(--gold);color:var(--gold-ink);padding:9px 11px;display:flex;
  align-items:center;gap:8px;font-weight:700;margin-left:11px}
.receipt svg{width:9px;height:9px;flex:none}
.receipt.sm{font-size:11px}
.receipt.sm span{padding:6px 0 6px 8px}
.receipt.sm span.vid{padding-left:0}
.receipt.sm b{padding:6px 8px;margin-left:8px}
.receipt:hover{background:var(--gold-12)}

.herofoot{position:relative;z-index:5;border-top:1px solid rgba(255,255,255,.07)}
.herofoot .in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 0;flex-wrap:wrap}

/* ── section chassis ─────────────────────────────────────────────── */
section.beat{position:relative;background:var(--void);
  padding:clamp(64px,7.4vw,124px) 0;border-bottom:1px solid var(--seam)}
.bhead{display:flex;flex-direction:column;gap:20px;max-width:74ch}
.bhead h2{max-width:20ch}
.legendrow{display:flex;gap:clamp(18px,2.6vw,44px);flex-wrap:wrap;
  margin-top:clamp(22px,2.4vw,34px)}
.lg{display:flex;gap:10px;align-items:baseline;max-width:34ch}
.lg i{width:11px;height:11px;display:block;flex:none;transform:translateY(1px)}
.lg i.hd{background:var(--gold)}
.lg i.sn{outline:1.5px solid var(--seen);outline-offset:-1.5px;background:rgba(201,249,56,.1)}
.lg i.fr{background:var(--plate3);outline:1px solid var(--seam2)}
.lg p{font-size:13px;line-height:1.5;color:var(--fg2)}
.lg p b{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg)}

/* ── beat 2 · the bench of stills ────────────────────────────────── */
.plates{margin-top:clamp(34px,4vw,58px);border-top:1px solid var(--seam)}
.plateswrap{position:relative}
.plate{position:relative;display:grid;
  grid-template-columns:52px minmax(0,1.02fr) minmax(0,1fr);
  gap:0 clamp(20px,2.6vw,44px);align-items:center;
  padding:clamp(26px,3vw,44px) 0;border-bottom:1px solid var(--seam)}
.plate .vlab{writing-mode:vertical-rl;transform:rotate(180deg);align-self:stretch;
  display:flex;align-items:center;justify-content:flex-end;
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--fg3);border-left:1px solid var(--seam);
  padding-left:4px;font-variant-ligatures:none}
.plate .vlab u{text-decoration:none;color:var(--gold)}
.plate .th{position:relative;background:var(--plate);border:1px solid var(--seam2);padding:8px}
.plate .bd{display:flex;flex-direction:column;gap:12px;min-width:0}
.plate:nth-child(even){grid-template-columns:52px minmax(0,1fr) minmax(0,1.02fr)}
.plate:nth-child(even) .th{order:3}
.plate:nth-child(even) .bd{order:2}
.seenline{display:flex;gap:10px;align-items:flex-start;font-family:var(--mono);font-size:11.5px;
  line-height:1.5;color:var(--seen);min-width:0;font-variant-ligatures:none}
.seenline .ll{color:var(--fg3);flex:none;letter-spacing:.16em;font-size:9.5px;font-weight:700;
  text-transform:uppercase;padding-top:2px}
.seenline p{min-width:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
.note{font-family:var(--mono);font-size:11px;line-height:1.55;color:var(--gold);
  letter-spacing:.005em;font-variant-ligatures:none;max-width:74ch}
.note::before{content:"note: ";color:var(--fg3)}
.mfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:2px}
.mfoot .r{margin-left:auto}

/* the ledger — counts up when the machine shows its books */
.ledger{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--seam2);background:var(--plate);margin-top:clamp(34px,4vw,58px)}
.ledger div{padding:20px 22px 22px;border-right:1px solid var(--seam);min-width:0}
.ledger div:last-child{border-right:0}
.ledger dt{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--fg3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.ledger dd{font-family:var(--mono);font-size:clamp(1.6rem,2.5vw,2.5rem);font-weight:300;
  letter-spacing:-.045em;margin-top:9px;font-variant-numeric:tabular-nums;color:var(--fg)}
.ledger dd u{text-decoration:none;color:var(--gold);font-size:.44em;font-weight:500;
  letter-spacing:0;margin-left:2px}
.ledgernote{margin-top:12px}

/* ── beat 3 · the wall, full width, drifting (v4's treatment, Tom's pick) ──
   Alternating rows, a constant few px/s, every tile carrying its own id and
   timecode. The corpus was watched; the wall moves at reading pace and at
   nothing else. Class names carry a b- prefix: this page already spends
   .wt on the hero wall and .slug on the query bar. */
/* the three measurements the beat-3 markup used to carry as `style=` */
#corpus{padding-bottom:clamp(44px,5vw,84px)}
#wallband{margin-top:clamp(34px,4vw,58px)}
.wallband{border-top:1px solid var(--seam);border-bottom:1px solid var(--seam);
  background:var(--pitch);overflow:hidden}
.wrow{overflow:hidden;border-bottom:1px solid var(--seam)}
.wrow:last-child{border-bottom:0}
.wtrack{display:flex;gap:1px;width:max-content;
  animation:wdrift 900s linear infinite}
.wtrack.rev{animation-direction:reverse}
@keyframes wdrift{from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-1*var(--shift,3000px)),0,0)}}
.bwt{position:relative;flex:none;width:clamp(132px,13.4vw,200px);aspect-ratio:16/9;
  overflow:hidden;background:#000}
.bwt img{width:100%;height:100%;object-fit:cover;filter:saturate(.78) brightness(.7);
  transition:filter .2s linear}
.bwt:hover img{filter:none}
.bwt a{display:block;position:relative;color:inherit;text-decoration:none;cursor:pointer}
.bwt a:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.bwt::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.045)}
.bwt .bslug{position:absolute;left:0;right:0;bottom:0;display:flex;
  justify-content:space-between;gap:6px;padding:2.5px 5px 3px;background:rgba(3,5,8,.72);
  font-family:var(--mono);font-size:7.5px;line-height:1;letter-spacing:.04em;
  color:rgba(226,236,246,.66);white-space:nowrap;overflow:hidden;font-variant-ligatures:none}
.bwt .bslug b{font-weight:600;color:rgba(226,236,246,.45)}
/* the roadmap affordance: honest about being next — dashed, gold, no fill */
.follow{display:flex;align-items:center;justify-content:center;gap:12px;
  outline:1px dashed var(--gold-44);outline-offset:-4px;padding:16px;
  margin-top:clamp(20px,2.2vw,30px);
  text-align:center;background:var(--pitch);transition:background .18s ease}
.follow:hover{background:var(--gold-6)}
.follow span{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);line-height:1.4}
.followsub{font-family:var(--mono);font-size:10.5px;color:var(--fg3);letter-spacing:.02em;
  display:block;text-transform:none;font-weight:400;margin-top:4px}
.bandmeta{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  flex-wrap:wrap;padding:16px 0 0}

/* ── beat 4 · the booth log — v4's terminal (v1's look, v2's air) ──────
   Tom's pick, 2026-08-10: the transcript reads as a transcript, not as a
   results table. Only v5's typing-in of the question is kept on top of it,
   because the motion law's inventory lists it. */
.term{border:1px solid var(--seam2);background:#0a0a0e;
  box-shadow:0 40px 90px -34px rgba(0,0,0,.9);margin-top:clamp(34px,4vw,58px)}
.termhead{display:flex;align-items:center;gap:14px;padding:12px 18px;
  border-bottom:1px solid var(--seam);background:var(--plate2);flex-wrap:wrap}
.termhead .r{margin-left:auto}
.termbody{padding:clamp(22px,2.4vw,36px) clamp(18px,2.4vw,36px) clamp(26px,2.8vw,40px);
  font-family:var(--mono);font-size:12.5px;line-height:1.85;font-variant-ligatures:none;
  color:var(--fg2);overflow-x:auto}
.termbody .ask{display:flex;gap:13px;align-items:flex-start;padding-bottom:22px;
  border-bottom:1px solid var(--seam);margin-bottom:24px}
.termbody .ask .pfx{color:var(--gold);font-weight:700;flex:none;padding-top:5px}
.termbody .q{color:var(--fg);font-family:var(--sans);font-size:clamp(1.05rem,1.6vw,1.5rem);
  font-weight:250;letter-spacing:-.028em;line-height:1.26;max-width:52ch;min-height:1.3em}
.termbody .ask .caret2{display:none;width:8px;height:15px;background:var(--gold);flex:none;
  margin-top:7px}
.term.typingq .ask .caret2{display:block;animation:blink 1.05s steps(1,end) infinite}
.termrest{transition:opacity .55s linear}
.term.veiled .termrest{opacity:0}
.call{white-space:pre-wrap;word-break:break-word;color:var(--fg);margin:22px 0 2px}
.call .k{color:var(--gold);font-weight:600}
.call .arg{color:var(--fg2)}
.ret{color:var(--fg3);margin-bottom:6px}
.say{color:var(--fg);font-family:var(--sans);font-size:15.5px;line-height:1.68;
  font-weight:340;max-width:70ch;margin:16px 0 18px}
.say.last{margin-bottom:0}      /* the log's closing paragraph sits on the foot */
.say b{font-weight:560}
.say .id{font-size:.9em;color:var(--fg)}
.q-cite{border-left:1px solid var(--gold);padding:4px 0 4px 16px;margin:0 0 20px}
.q-cite p{font-family:var(--sans);font-size:15.5px;line-height:1.55;color:var(--fg);
  font-weight:340;max-width:70ch}
.q-cite .who2{margin-top:9px;display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--fg3)}
.q-cite .who2 b{color:var(--fg2);font-weight:600}
.q-cite .who2 a{color:var(--gold)}
.q-cite .who2 a:hover{text-decoration:underline}
.termfoot{border-top:1px solid var(--seam);padding:18px;background:var(--plate2);
  display:flex;flex-direction:column;gap:10px}
.termfoot .note{max-width:112ch}

/* ── beat 5 · quickstart + footer ────────────────────────────────── */
.starts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;
  margin-top:clamp(34px,4vw,58px)}
.start{display:flex;flex-direction:column;gap:11px;min-width:0}
.copybox{display:flex;align-items:stretch;border:1px solid var(--seam2);background:var(--plate);
  min-width:0}
.copybox code{flex:1 1 0;min-width:0;font-family:var(--mono);font-size:13px;color:var(--fg);
  padding:14px 16px;overflow-x:auto;white-space:nowrap;font-variant-ligatures:none;
  letter-spacing:-.01em}
.copybox code i{font-style:normal;color:var(--fg3)}
.copybox button{border:0;border-left:1px solid var(--seam2);background:transparent;
  color:var(--gold);font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.19em;padding:0 15px;cursor:pointer;
  transition:background .16s ease,color .16s ease}
.copybox button:hover{background:var(--gold);color:var(--gold-ink)}
.startnote{font-family:var(--mono);font-size:11px;color:var(--fg3);letter-spacing:.02em;
  line-height:1.6;font-variant-ligatures:none}
.fbase{margin-top:clamp(24px,2.6vw,38px);padding-top:16px;border-top:1px solid var(--seam);
  display:flex;gap:18px;flex-wrap:wrap;align-items:baseline}
.fbase .r{margin-left:auto}
#run{border-bottom:0}           /* the last beat sits on the footer, not on a seam */

footer{background:var(--void);padding:clamp(40px,4.6vw,64px) 0 clamp(44px,5vw,70px)}
.fgrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(24px,3vw,60px);align-items:start}
.fgrid p{font-size:14.5px;line-height:1.62;color:var(--fg2);max-width:56ch;font-weight:340}
.fgrid p + p,.fgrid .ml + p{margin-top:12px}
.fgrid a.lnk{color:var(--gold);border-bottom:1px solid var(--gold-44)}
.fmark{display:flex;align-items:flex-end;justify-content:flex-end}
.fmark b{font-size:clamp(2.2rem,4.4vw,4rem);font-weight:250;letter-spacing:-.045em;
  color:var(--fg);line-height:.9}
.fmark b i{font-style:normal;color:var(--gold)}

/* ── responsive ──────────────────────────────────────────────────── */
@media (max-width:1120px){
  /* stacked: the lane between the copy and the light table is sized in JS to
     one wall tile plus air, so the found frame has somewhere clear to sit
     directly above the table it is about to land on. minmax(0,·) because a
     bare 1fr lets the table's longest mono token widen the whole hero. */
  .heroin{grid-template-columns:minmax(0,1fr);align-items:start;
    row-gap:var(--lane,112px);column-gap:30px;
    padding-top:clamp(76px,10vh,110px)}
  .herocopy{max-width:44rem;min-width:0}
  .bench{max-width:640px;min-width:0}
  .plate{grid-template-columns:36px minmax(0,1fr)}
  .plate .th{grid-column:2;margin-bottom:14px}
  .plate .bd{grid-column:2}
  .plate:nth-child(even){grid-template-columns:36px minmax(0,1fr)}
  .plate:nth-child(even) .th{order:0}
  .plate:nth-child(even) .bd{order:0}
  .ledger{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ledger div:nth-child(2){border-right:0}
  .ledger div:nth-child(-n+2){border-bottom:1px solid var(--seam)}
}
@media (max-width:780px){
  body{font-size:15px}
  .hero{min-height:0}
  .heroin{padding-top:84px;padding-bottom:44px}
  .slug{height:46px}
  .slug .q{font-size:11px;padding:0 10px}
  .slug .st{font-size:7.6px;padding:0 9px;letter-spacing:.13em}
  .caret{width:6px;height:13px}
  .chips button{max-width:none;flex:1 1 auto;height:40px;font-size:9px}
  .cta{width:100%;justify-content:space-between}
  .hide-s{display:none}
  .railin{padding:12px 0;gap:10px}
  .railmeta{gap:9px}
  .railmeta .ml{font-size:8.6px;letter-spacing:.15em}
  .mark b{font-size:15px}
  .frame .det .tab{display:none}
  .benchhead{font-size:9px;gap:8px}
  .plate,.plate:nth-child(even){grid-template-columns:1fr;padding:22px 0}
  .plate .vlab{writing-mode:horizontal-tb;transform:none;border-left:0;padding:0 0 12px;
    justify-content:flex-start;letter-spacing:.19em}
  .plate .th,.plate .bd{grid-column:1}
  .plate:nth-child(even) .th{order:0}
  .plate:nth-child(even) .bd{order:0}
  .ledger{grid-template-columns:1fr}
  .ledger div{border-right:0;border-bottom:1px solid var(--seam);padding:15px 16px 16px}
  .ledger div:last-child{border-bottom:0}
  .ledger dd{font-size:1.9rem}
  .termbody{font-size:11.5px}
  .say,.q-cite p{font-size:14.5px}
  /* at 390 the wall band's own tiles carry the id; the slug stays, the
     hairline goes — same reasoning as the hero wall */
  .bwt{width:clamp(116px,32vw,150px)}
  .starts{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr;gap:26px}
  .fmark{justify-content:flex-start}
}

/* the whole page freezes: end states only */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wallwrap,.wtrack{animation:none}
  .slug.typing .caret,.term.typingq .ask .caret2{animation:none}
  .frame.acq .det{animation:none}
  .wt img,.bwt img,.follow,.termrest,.bench,.lift{transition:none}
  .term.veiled .termrest{opacity:1}
}