/* ---------------------------------------------------------------- tokens */
:root {
  /* palette follows the v20-v23 experiment surfaces: lime on warm near-black */
  --ink:#080907; --panel:#171914; --panel-2:#1e211a; --hair:#2c3025;
  --fg:#f5f3ec; --fg-dim:#a9ab9c; --fg-mute:#7d8072;
  --accent:#dfff72; --accent-bright:#ecffa8; --accent-dim:#7d9440;
  --paper:#f5f3ec;
  --blue-1:#0d4774; --blue-2:#062a4d; --blue-3:#041a31; --beam:#c8ff4d;
  --sel:#2f3a18; --sel-line:#7d9440;
  --rej:#8d462c; --rej-fill:rgba(141,70,44,.15);
  --best-fill:rgba(200,255,77,.10);
  /* stage tokens never flip: a render is viewed on a dark plate, always */
  --stage:#050806; --stage-2:#0d100b; --stage-hair:#232a1e;
  --r:3px; --pad:clamp(18px,4vw,34px);
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--ink); color:var(--fg);
  font:400 15.5px/1.62 var(--sans); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video { display:block; max-width:100%; }
/* Every image carries width/height attributes so the layout does not jump while
   the bytes arrive. Those attributes are presentational hints, so without this
   the intrinsic pixel height beats the aspect-ratio the card asks for and a
   1280x720 plate renders 720px tall in a 373px column. Class rules that really
   do want a fixed height still outrank this. */
img,video { height:auto; }
a { color:var(--accent); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover { color:var(--accent-bright); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }

/* --------------------------------------------------- type: two registers */
.lab {
  font:500 10px/1.5 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--fg-mute);
}
.lab.a { color:var(--accent); }
h1,h2,h3 { font-family:var(--serif); font-weight:400; margin:0; }
h1 { font-size:clamp(2.3rem,6.2vw,4.4rem); line-height:.95; letter-spacing:-.038em; max-width:16ch; }
h2 { font-size:clamp(1.85rem,4.3vw,3.15rem); line-height:1.02; letter-spacing:-.032em; max-width:20ch; }
h3 { font-size:1.05rem; line-height:1.35; letter-spacing:-.012em; }
p  { margin:0 0 1.05em; max-width:62ch; color:var(--fg-dim); }
p b, p strong { color:var(--fg); font-weight:600; }
.num { font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

/* --------------------------------------------------------------- chrome */
.wrap { max-width:1220px; margin:0 auto; padding:0 var(--pad); }
.mast {
  position:sticky; top:0; z-index:60; backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--ink) 86%, transparent);
  border-bottom:1px solid var(--hair);
}
.mast .wrap { display:flex; align-items:center; gap:13px; height:54px; }
.mark { position:relative; width:22px; height:22px; flex:none; }
.mark span { position:absolute; left:5px; top:5px; width:12px; height:12px; background:var(--accent); transform:rotate(45deg); }
.mark i { position:absolute; left:0; right:0; height:1px; background:var(--accent-dim); }
.mark i:nth-of-type(1){ top:2px; } .mark i:nth-of-type(2){ top:11px; } .mark i:nth-of-type(3){ top:20px; }
.mast .who { font:500 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
/* min-width:0 is what stops the nav widening the document. A flex item's floor
   is its content, so without it the row of links is unshrinkable and any link
   added past what fits pushes the whole page sideways - which is what adding
   "Missing angles" did between 820px and 1040px, giving a 944px document in a
   920px window and a horizontal scrollbar under every section on the page. */
.mast nav { margin-left:auto; display:flex; gap:2px; min-width:0; overflow-x:auto; scrollbar-width:none; }
.mast nav::-webkit-scrollbar { display:none; }
.mast nav a { flex:none; }
.mast nav a {
  padding:6px 10px; border-radius:2px; text-decoration:none;
  font:500 10px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--fg-mute);
}
.mast nav a:hover { color:var(--fg); background:var(--panel-2); }
/* Where you are, in a document that is sixteen thousand pixels tall. Without
   this the nav tells you what exists but never what you are looking at. */
.mast nav a.on { color:var(--ink); background:var(--accent); }
/* The narrow layout used to drop the nav entirely, which left the phone with
   twenty-eight thousand pixels of scroll and no way to move through it. It
   scrolls sideways instead. */
/* 1040px, not 820: twelve links stop fitting beside the title well before the
   old breakpoint, and between the two the nav was scrolling sideways in a strip
   a few hundred pixels wide. On its own row it has the full width to scroll in. */
@media (max-width:1040px){
  .mast .wrap { height:auto; padding-top:8px; padding-bottom:8px; flex-wrap:wrap; }
  .mast nav {
    order:3; width:100%; margin-left:0; gap:4px; -webkit-overflow-scrolling:touch;
  }
}

/* The one thing a first-time reader wants is the house, and it sits past the
   halfway mark behind the plan cleanup. The narrative order is right; what was
   missing was a way to skip it. */
.jump { margin-top:18px; }
.jump a {
  display:inline-block; padding:9px 14px; border-radius:2px;
  border:1px solid var(--accent-dim); color:var(--accent); text-decoration:none;
  font:500 12px/1 var(--mono); letter-spacing:.04em;
}
.jump a:hover { background:var(--accent); color:var(--ink); border-color:var(--accent); }
.jump span { display:block; margin-top:7px; color:var(--fg-mute); font:11px var(--mono); }

section { padding:clamp(56px,8vw,108px) 0; border-top:1px solid var(--hair); scroll-margin-top:64px; }
.head { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(20px,4vw,54px); align-items:end; margin-bottom:clamp(26px,4vw,46px); }
.head .detail { max-width:42ch; }
.head .detail p:last-child { margin-bottom:0; }
@media (max-width:920px){ .head { grid-template-columns:1fr; align-items:start; } }
.eyebrow { display:flex; align-items:center; gap:9px; margin-bottom:15px; }
.eyebrow::after { content:""; flex:1; height:1px; background:var(--hair); }

/* ---------------------------------------------------------------- cards */
.grid { display:grid; gap:14px; }
.g2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
/* The reconstruction picker held five cards for a while and needed a .g5 that
   stepped 5 -> 3 -> 2 -> 1, because on .g4 the fifth sat alone on a second row
   with three columns of white beside it. It is eight cards now, which .g4
   divides evenly at every width, so .g5 has gone. */
@media (max-width:920px){ .g3,.g4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .g2,.g3,.g4 { grid-template-columns:1fr; } }

.card { background:var(--panel); border:1px solid var(--hair); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; }
.card > img, .card > video { width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--stage); }
.card.paper > img { object-fit:contain; background:var(--paper); }
/* Line-art evidence needs its full frame. Cropping hides the registered camera marks. */
.card.tech > img { object-fit:contain; aspect-ratio:4/3; background:var(--stage); padding:7px; }
.card .body { padding:13px 15px 15px; display:flex; flex-direction:column; gap:7px; flex:1; }
.card .body p { font-size:13.5px; line-height:1.55; margin:0; color:var(--fg-mute); }
.card.sel  { border-color:var(--sel-line); background:var(--panel); }
.card.best { border-color:var(--accent); background:var(--panel); }
.card.rej  { border-color:color-mix(in srgb,var(--rej) 55%, var(--hair)); background:var(--panel); }

.tag { display:inline-block; padding:3px 7px; border-radius:2px; font:600 9px/1.35 var(--mono); letter-spacing:.13em; text-transform:uppercase; }
.tag.sel  { background:var(--sel); color:var(--accent-bright); }
.tag.best { background:var(--accent); color:#1b1710; }
.tag.rej  { background:var(--rej-fill); color:#e0a79d; border:1px solid color-mix(in srgb,var(--rej) 60%, transparent); }
@media (prefers-color-scheme: light){ .tag.rej { color:#7a3a31; } .tag.best { color:#fffdf8; } }
.tagrow { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }

.kv { display:grid; grid-template-columns:auto 1fr; gap:2px 12px; font:400 11.5px/1.6 var(--mono); margin:0; }
.kv dt { color:var(--fg-mute); letter-spacing:.05em; }
.kv dd { margin:0; color:var(--fg); font-variant-numeric:tabular-nums; }
.kv dd.warn { color:#e0a79d; }
/* `num warn` marks a number that reads badly. It has been in the pages since
   the angles work and was never given a color, so it rendered as an ordinary
   number and the mark did nothing. */
.num.warn { color:#e0a79d; }
@media (prefers-color-scheme: light){ .kv dd.warn, .num.warn { color:#8d462c; } }

/* =================================================================== HERO */
/* the hero has one job: put the running sequence above the fold */
.hero { padding:clamp(18px,3vw,32px) 0 clamp(38px,5vw,64px); border-top:0; }
.hero .title {
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(18px,3.5vw,48px); align-items:end; margin-bottom:clamp(18px,2.6vw,28px);
}
.hero h1 { font-size:clamp(2.1rem,4.6vw,3.5rem); max-width:24ch; }
.hero .title p { font-size:15px; margin:0 0 4px; }
@media (max-width:920px){ .hero .title { grid-template-columns:1fr; align-items:start; } }

.stage {
  position:relative; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden;
  background:var(--stage);
  border:1px solid var(--stage-hair); contain:paint layout;
  isolation:isolate;
}
.stage:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.hero-frame {
  position:absolute; inset:0; z-index:1; margin:0; overflow:hidden; opacity:0;
  background:#071016; pointer-events:none;
}
.hero-frame img {
  width:100%; height:100%; max-width:none; object-fit:cover;
  transform:translate3d(var(--hero-shift,0),0,0) scale(var(--hero-scale,1));
  transform-origin:50% 50%;
}
.hero-frame--plan { background:linear-gradient(145deg,#d9d3c7,#eee8dc 54%,#c9c3b8); }
.hero-frame--plan img { object-fit:contain; box-sizing:border-box; padding:clamp(10px,1.7vw,24px); }
.hero-frame--retrace { clip-path:inset(0 calc(100% - var(--plan-reveal,0%)) 0 0); }
.hero-frame--camera img { object-position:50% 48%; }
.hero-frame--line { background:#f2f0e8; }
.hero-frame--style { clip-path:inset(0 calc(100% - var(--style-reveal,0%)) 0 0); }
.hero-frame--world img { object-position:50% 50%; }
.hero-stage-wash {
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(3,8,11,.2),transparent 24%),
    linear-gradient(180deg,transparent 56%,rgba(3,7,10,.82));
}
.hero-divider {
  position:absolute; z-index:4; top:0; bottom:0; width:1px; pointer-events:none;
  background:rgba(223,255,114,.9); box-shadow:0 0 16px rgba(200,255,77,.76);
}
.hero-divider--plan { left:var(--plan-reveal,0%); opacity:var(--plan-divider-o,0); }
.hero-divider--style { left:var(--style-reveal,0%); opacity:var(--style-divider-o,0); }
.hero-phase { position:absolute; z-index:6; left:0; right:0; top:0; height:3px; background:rgba(255,255,255,.09); }
.hero-phase i { display:block; width:0; height:100%; background:var(--accent); box-shadow:0 0 18px rgba(200,255,77,.5); }
.hero-stage-toggle {
  position:absolute; z-index:8; left:50%; top:50%; transform:translate(-50%,-50%);
  appearance:none; cursor:pointer; border:1px solid rgba(255,255,255,.34); border-radius:2px;
  padding:11px 17px; color:#fff; background:rgba(5,10,14,.78); backdrop-filter:blur(8px);
  font:600 10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
}
.hero-stage-toggle:hover { border-color:var(--accent); color:var(--accent-bright); }
.hero-stage-toggle[hidden] { display:none; }

.prov, .readout {
  position:absolute; padding:7px 10px; border-radius:2px;
  background:rgba(10,12,15,.72); border:1px solid rgba(255,255,255,.11);
  backdrop-filter:blur(6px); pointer-events:none;
  font:500 9.5px/1.5 var(--mono); letter-spacing:.12em; text-transform:uppercase;
}
.prov { z-index:7; left:12px; bottom:12px; color:#ecffa8; max-width:min(68%,560px); }
.prov b { display:block; color:#fff; letter-spacing:.14em; }
.readout { z-index:7; right:12px; bottom:12px; color:#b9b6ae; text-align:right; }
.readout b { color:#ecffa8; font-weight:600; }
@media (max-width:660px){
  .readout { display:none; }
  .prov { left:8px; bottom:8px; padding:4px 7px; font-size:8px; letter-spacing:.09em; max-width:calc(100% - 16px); }
  .hero-frame--plan img { padding:7px; }
}

.transport { margin-top:14px; display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.transport .hint { color:var(--fg-mute); font:400 12px/1.5 var(--sans); }
.btn {
  appearance:none; cursor:pointer; border:1px solid var(--hair); background:var(--panel-2); color:var(--fg);
  border-radius:2px; padding:7px 11px; font:500 10px/1.3 var(--mono); letter-spacing:.13em; text-transform:uppercase;
}
.btn:hover { border-color:var(--accent-dim); color:var(--accent-bright); }
.btn.on { background:var(--sel); border-color:var(--sel-line); color:var(--accent-bright); }
.btn.icon { width:40px; display:grid; place-items:center; padding:7px 0; font-size:11px; }
.hero-play { min-width:76px; }
.scrub { flex:1 1 220px; min-width:140px; }
input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:22px; background:transparent; cursor:pointer; }
input[type=range]::-webkit-slider-runnable-track { height:3px; border-radius:2px; background:var(--hair); }
input[type=range]::-moz-range-track { height:3px; border-radius:2px; background:var(--hair); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:13px; height:13px; border-radius:50%; background:var(--accent);
  margin-top:-5px; border:0; box-shadow:0 0 0 4px rgba(200,255,77,.16);
}
input[type=range]::-moz-range-thumb { width:13px; height:13px; border:0; border-radius:50%; background:var(--accent); }
.hero-time { color:var(--fg); font:500 10px/1 var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.hero-key-hint { color:var(--fg-mute); font:400 10px/1.4 var(--mono); white-space:nowrap; }
.beats { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:5px; margin-top:11px; }
.beats button {
  appearance:none; cursor:pointer; background:transparent; border:1px solid var(--hair); color:var(--fg-mute);
  border-radius:2px; min-width:0; padding:7px 8px; text-align:left;
  font:500 9px/1.25 var(--mono); letter-spacing:.09em; text-transform:uppercase;
}
.beats button span { display:block; margin-bottom:3px; color:var(--fg-faint); font-size:8px; }
.beats button:hover { color:var(--fg); border-color:var(--accent-dim); }
.beats button.on { background:var(--accent); border-color:var(--accent); color:#1b1710; }
.beats button.on span { color:rgba(27,23,16,.62); }
.hero-sequence-note { max-width:86ch; margin:11px 0 0; color:var(--fg-mute); font-size:11.5px; }
@media (prefers-color-scheme: light){ .beats button.on { color:#fffdf8; } }
@media (max-width:900px){
  .beats { display:flex; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
  .beats button { flex:0 0 112px; }
  .hero-key-hint { display:none; }
}
@media (max-width:560px){
  .hero-transport { gap:6px; }
  .hero-play { min-width:68px; }
  .hero-time { width:100%; order:3; }
}
@media (prefers-reduced-motion:reduce){
  .hero-frame img { transform:none !important; }
  .hero-divider { display:none; }
}

/* --------------------------------------------------------- data ladders */
.ladder { display:flex; flex-direction:column; gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:var(--r); overflow:hidden; }
.rung { display:grid; grid-template-columns:minmax(150px,1.2fr) minmax(0,2fr) auto; gap:14px; align-items:center; background:var(--panel); padding:11px 15px; }
.rung .who { font:500 11.5px/1.4 var(--mono); letter-spacing:.04em; color:var(--fg); }
.rung .who small { display:block; font:400 10px/1.55 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--fg-mute); }
.rung .bar { height:7px; border-radius:4px; background:var(--panel-2); position:relative; overflow:hidden; }
.rung .bar i { position:absolute; inset:0 auto 0 0; border-radius:4px; background:var(--accent-dim); }
.rung .val { font:600 13px/1.25 var(--mono); font-variant-numeric:tabular-nums; color:var(--fg); white-space:nowrap; text-align:right; }
.rung .val small { display:block; font:400 9.5px/1.5 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-mute); }
.rung.best { background:var(--panel); }
.rung.best .bar i { background:var(--accent); }
.rung.best .val { color:var(--accent-bright); }
.rung.rej .bar i { background:var(--rej); }
.rung.rej .who, .rung.rej .val { color:var(--fg-mute); }
.rung.rej .val { text-decoration:line-through; text-decoration-color:var(--rej); }
@media (max-width:640px){ .rung { grid-template-columns:1fr auto; } .rung .bar { grid-column:1/-1; } }

/* ------------------------------------------------------- world selector */
.worlds { display:grid; grid-template-columns:minmax(0,1fr) 272px; gap:14px; }
@media (max-width:920px){ .worlds { grid-template-columns:1fr; } }
.wstage { position:relative; border-radius:var(--r); overflow:hidden; background:var(--stage); border:1px solid var(--stage-hair); aspect-ratio:16/9; }
.wstage img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s ease; }
/* The room frames are captures of the world-select surface itself, so they
   arrive at 1280x694 with their own rail, title and status chips baked in. The
   selector beside them carries that information from the schema instead, so the
   frame is pushed out and offset to show the render area alone: x 150-1280,
   y 95-648. The exterior treatments below are plain 16:9 renders and are not. */
#wstage { aspect-ratio:1130/553; }
#wstage img { left:-13.27%; top:-17.18%; width:113.27%; max-width:none; height:125.5%; }
.wstage img.on { opacity:1; }
.wstage .cap { position:absolute; left:0; right:0; bottom:0; padding:40px 18px 15px; background:rgba(8,10,13,.86); }
.wstage .cap h3 { color:#fff; font-size:1.5rem; }
.wstage .cap .lab { color:#b9b6ae; }
.wstage .cap .lab.a { color:#ecffa8; }
.wpanel { display:flex; flex-direction:column; gap:9px; min-width:0; }
.wlist { display:flex; flex-direction:column; gap:3px; max-height:330px; overflow:auto; padding-right:3px; }
.wlist button {
  appearance:none; cursor:pointer; text-align:left; display:flex; gap:10px; align-items:center;
  background:transparent; border:1px solid transparent; border-radius:2px; padding:7px 9px; color:var(--fg-dim);
  font:400 13px/1.35 var(--sans); width:100%;
}
.wlist button:hover { background:var(--panel-2); color:var(--fg); }
.wlist button.on { background:var(--panel-2); border-color:var(--sel-line); color:var(--fg); }
.wlist button .n { font:500 9.5px/1 var(--mono); letter-spacing:.1em; color:var(--fg-mute); width:16px; flex:none; }
.wlist button.on .n { color:var(--accent); }
.wlist button .d { margin-left:auto; font:400 10px/1 var(--mono); color:var(--fg-mute); white-space:nowrap; }
.modes { display:flex; gap:5px; margin-bottom:12px; }
.mode-section { display:none; } .mode-section.visible { display:block; }

/* ---------------------------------------------------------------- media */
.loader { position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--stage-hair); background:var(--stage); }
.loader iframe { width:100%; height:clamp(400px,60vh,640px); border:0; display:block; }
.loader .gate { display:grid; place-items:center; gap:12px; padding:clamp(40px,8vw,90px) 20px; text-align:center; }
.loader .gate p { color:var(--fg-mute); font-size:13px; max-width:48ch; margin:0; }
/* The tour recording carries a 16 px frame margin and 131 px of empty stage
   under the studio panel, so the frame is cropped to the panel itself: x 16-1264,
   y 16-590 of 1280x720. Native controls would land under that crop, which is why
   the transport below the frame is the control surface. */
.vcrop { aspect-ratio:1248/574; }
.vcrop video { position:absolute; left:-1.282%; top:-2.787%; width:102.564%; max-width:none; height:125.436%; object-fit:cover; background:var(--stage); }
.chapters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:11px; }
@media (max-width:920px){ .chapters { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .chapters { grid-template-columns:1fr; } }
.chapters button { appearance:none; cursor:pointer; background:var(--panel); border:1px solid var(--hair); border-radius:2px; padding:8px 10px; color:var(--fg-mute); text-align:left; font:400 11px/1.45 var(--sans); }
.chapters button:hover { border-color:var(--accent-dim); color:var(--fg-dim); }
.chapters button.on { border-color:var(--accent); color:var(--fg); background:var(--sel); }
.chapters button b { display:block; font:500 9.5px/1.6 var(--mono); letter-spacing:.11em; text-transform:uppercase; color:var(--accent); }
/* A generated chart, given the same frame as a video or a plate so it does not
   read as a foreign object dropped into the page. */
.fig { margin:clamp(24px,4vw,40px) 0 0; border:1px solid var(--hair); border-radius:var(--r); background:var(--panel); overflow:hidden; }
.fig img { display:block; width:100%; height:auto; }
.fig figcaption { padding:12px 15px 14px; border-top:1px solid var(--hair); max-width:none; }
/* The generated diagrams are 980px wide with 10px type baked in. Letting one
   shrink to a 380px phone renders that type at 4px, which is unreadable at any
   size of screen. Scroll the drawing instead and leave the caption, which
   carries the same numbers as running text, at the full width of the card. */
.figscroll { overflow-x:auto; overscroll-behavior-x:contain; }
.figscroll img { min-width:720px; }
/* A contact plate is evidence and ships at the size it was judged at, so it
   overrides the global fit-the-column rule and the figure scrolls instead.
   Scaled down to the text column its tiles land near 85px, which is the exact
   resolution at which soft and streaked stop being distinguishable, the one
   distinction the plate exists to support. */
.figscroll img.contact-plate { max-width:none; width:auto; }
.note { font:400 12px/1.65 var(--mono); color:var(--fg-mute); letter-spacing:.01em; max-width:78ch; }
.note b { color:var(--fg-dim); font-weight:600; }
.split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
@media (max-width:800px){ .split { grid-template-columns:1fr; } }
.bignum { font:400 2.5rem/1 var(--serif); color:var(--fg); letter-spacing:-.02em; }

footer { border-top:1px solid var(--hair); padding:44px 0 68px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ------------------------------------------------- per-page section strip */
/* The masthead lists the six pages. This strip lists the sections of the page
   you are on, and marks the one under the masthead as you scroll. It is what
   the scrollspy binds to now that the sections live on separate documents. */
.onthispage {
  position:sticky; top:54px; z-index:55; border-bottom:1px solid var(--hair);
  background:color-mix(in srgb, var(--ink) 92%, transparent); backdrop-filter:blur(14px);
}
.onthispage .wrap { display:flex; align-items:center; gap:8px; min-height:38px; overflow-x:auto; scrollbar-width:none; }
.onthispage .wrap::-webkit-scrollbar { display:none; }
.onthispage b {
  flex:none; font:500 9.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-mute);
}
.onthispage a {
  flex:none; padding:5px 9px; border-radius:2px; text-decoration:none; color:var(--fg-dim);
  font:400 11px/1 var(--mono); letter-spacing:.05em;
}
.onthispage a:hover { color:var(--fg); background:var(--panel-2); }
.onthispage a.on { color:var(--accent); background:var(--sel); }
@media (max-width:1040px){ .onthispage { top:0; position:static; } }

/* ------------------------------------------------------------ page turner */
.turner { border-top:1px solid var(--hair); margin-top:clamp(40px,7vw,80px); }
.turner .wrap { display:flex; gap:14px; padding-top:26px; padding-bottom:26px; flex-wrap:wrap; }
.turner a {
  flex:1 1 260px; text-decoration:none; border:1px solid var(--hair); border-radius:var(--r);
  padding:16px 18px; background:var(--panel); color:var(--fg);
}
.turner a:hover { border-color:var(--accent-dim); background:var(--panel-2); }
.turner .lab { display:block; margin-bottom:7px; }
.turner strong { font:400 1.15rem/1.3 var(--serif); letter-spacing:-.01em; }
.turner .rev { text-align:right; }

/* ------------------------------------------------------------- contents */
.toc { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.toc a {
  display:block; text-decoration:none; color:var(--fg); border:1px solid var(--hair);
  border-radius:var(--r); background:var(--panel); padding:18px 20px 20px;
}
.toc a:hover { border-color:var(--accent-dim); background:var(--panel-2); }
.toc strong { display:block; font:400 1.25rem/1.25 var(--serif); letter-spacing:-.01em; margin:9px 0 8px; }
.toc p { font:400 13.5px/1.6 var(--sans); color:var(--fg-dim); margin:0; }
.toc ul { list-style:none; margin:12px 0 0; padding:0; }
.toc li { font:400 11px/1.9 var(--mono); letter-spacing:.03em; color:var(--fg-mute); }
.toc li::before { content:'\00a0\00b7\00a0'; color:var(--accent-dim); }

/* ======================================================= release editorial */
/* The archive uses the Casa Cornell palette and typography, while giving the
   research enough width to read. Narrative text never falls into four-column
   cards; compact columns are reserved for metrics and labels. */
:root {
  --page:1280px;
  --reading:72ch;
  --media:1120px;
}
.wrap { max-width:var(--page); }
section { padding-block:clamp(40px,5vw,72px); }
.head {
  display:block;
  max-width:var(--reading);
  margin-bottom:clamp(24px,3vw,38px);
}
.head h2 { max-width:19ch; }
.head .detail {
  max-width:var(--reading);
  margin-top:18px;
}
.head .detail p { max-width:var(--reading); }
.grid.g4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.toc { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
.toc a { min-height:0; }
.toc ul { display:none; }
.note { max-width:88ch; font-size:12.5px; }
.turner { margin-top:0; }

.chapter { scroll-margin-top:104px; }
.chapter__header { max-width:var(--reading); margin-bottom:clamp(24px,3vw,38px); }
.chapter__header h2 { max-width:20ch; }
.chapter__meta {
  margin:0 0 12px;
  color:var(--accent);
  font:500 10px/1.5 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.chapter__lede,
.body-copy { max-width:var(--reading); font:400 16px/1.7 var(--sans); color:var(--fg-dim); }
.chapter__lede { margin-top:16px; }
.subchapter { margin-top:clamp(34px,4vw,56px); }
.subchapter > h3 { max-width:38ch; font-size:clamp(1.3rem,2.4vw,1.8rem); margin-bottom:12px; }
.subchapter > p { max-width:var(--reading); }
.wrap > .head[style*="margin-top"],
.wrap > .eyebrow[style*="margin-top"] { margin-top:clamp(34px,4vw,56px) !important; }
.wrap > h3[style*="margin-top"] { margin-top:clamp(30px,4vw,48px) !important; }
.research-appendix { max-width:var(--media); }
.research-appendix > .evidence-drawer__body { padding:clamp(16px,3vw,28px); }

.chapter__media,
.evidence-media {
  margin:clamp(24px,3vw,38px) 0 0;
  max-width:var(--media);
  border:1px solid var(--hair);
  border-radius:var(--r);
  background:var(--panel);
  overflow:hidden;
}
.chapter__media > a,
.evidence-media > a { display:block; background:var(--stage); }
.chapter__media img,
.chapter__media video,
.evidence-media img,
.evidence-media video { width:100%; height:auto; }
.chapter__media figcaption,
.evidence-media figcaption { max-width:none; padding:14px 16px 9px; color:var(--fg-dim); }
.media-actions,
.primary-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0 16px 16px;
}
.primary-actions { padding:0; margin-top:22px; }
.media-actions a,
.primary-actions a,
.action-link {
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:8px 12px;
  border:1px solid var(--hair);
  border-radius:8px;
  background:var(--panel-2);
  color:var(--fg);
  text-decoration:none;
  font:500 10px/1.25 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.primary-actions a:first-child,
.media-actions a.primary { border-color:var(--accent); background:var(--accent); color:#16190f; }
.media-actions a:hover,
.primary-actions a:hover,
.action-link:hover { border-color:var(--accent); color:var(--accent-bright); }
.primary-actions a:first-child:hover,
.media-actions a.primary:hover { color:#050605; background:var(--accent-bright); }

.studio-embed {
  overflow:hidden;
  border:1px solid var(--hair);
  border-radius:var(--r);
  background:var(--stage);
}
.studio-embed iframe {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  border:0;
  background:var(--stage);
}
.studio-embed__caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:11px 14px;
  border-top:1px solid var(--hair);
  background:var(--panel);
  color:var(--fg-mute);
  font:500 9px/1.4 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.studio-embed__caption a { color:var(--accent); }

.capability-index {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:18px;
  border-top:1px solid var(--hair);
  border-left:1px solid var(--hair);
}
.capability-index > div {
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:18px;
  align-items:start;
  min-height:82px;
  padding:16px 18px;
  border-right:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  background:var(--panel);
}
.capability-index span {
  color:var(--accent);
  font:500 10px/1.5 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.capability-index strong {
  color:var(--fg);
  font:400 15px/1.5 var(--sans);
}
@media (max-width:760px) {
  .capability-index { grid-template-columns:1fr; }
  .capability-index > div { grid-template-columns:92px minmax(0,1fr); }
}

.evidence-drawer {
  max-width:var(--media);
  margin-top:14px;
  border:1px solid var(--hair);
  border-radius:2px;
  background:var(--panel);
}
.evidence-drawer summary {
  cursor:pointer;
  padding:12px 15px;
  color:var(--fg-dim);
  font:500 10px/1.4 var(--mono);
  letter-spacing:.11em;
  text-transform:uppercase;
}
.evidence-drawer[open] summary { border-bottom:1px solid var(--hair); color:var(--accent); }
.evidence-drawer__body { padding:15px; }
.evidence-drawer__body p:last-child { margin-bottom:0; }
.evidence-links { display:flex; flex-wrap:wrap; gap:8px 14px; }

.era-map { display:grid; gap:1px; border:1px solid var(--hair); border-radius:var(--r); overflow:hidden; }
.era-map a {
  display:grid;
  grid-template-columns:minmax(132px,.34fr) minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  padding:16px 18px;
  background:var(--panel);
  color:var(--fg);
  text-decoration:none;
}
.era-map a:hover { background:var(--panel-2); }
.era-map time { color:var(--accent); font:500 10px/1.45 var(--mono); letter-spacing:.08em; }
.era-map strong { font:400 1.08rem/1.35 var(--serif); }
.era-map span { color:var(--fg-mute); font-size:13px; }
.era-map i { font:500 9px/1.3 var(--mono); font-style:normal; color:var(--fg-mute); text-transform:uppercase; letter-spacing:.1em; }

.run-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.run-card { border:1px solid var(--hair); border-radius:2px; background:var(--panel); overflow:hidden; }
.run-card__body { padding:15px 16px 16px; }
.run-card h3 { margin:7px 0 8px; font-size:1.12rem; }
.run-card p { font-size:13.5px; line-height:1.6; margin-bottom:10px; }
.run-card__meta { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.run-card__facts { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
.run-card__facts span {
  padding:4px 7px;
  border:1px solid var(--hair);
  border-radius:2px;
  color:var(--fg-mute);
  background:var(--panel-2);
  font:500 9px/1.35 var(--mono);
  letter-spacing:.04em;
}
.run-card__media {
  margin:0 0 12px;
  overflow:hidden;
  border:1px solid var(--hair);
  border-radius:2px;
  background:var(--stage);
}
.run-card__media img,
.run-card__media video {
  display:block;
  width:100%;
  max-height:34rem;
  object-fit:contain;
  background:var(--stage);
}
.run-card__media figcaption {
  padding:8px 10px;
  border-top:1px solid var(--hair);
  color:var(--fg-mute);
  font:600 9px/1.4 var(--mono);
  overflow-wrap:anywhere;
}
.recorded-path {
  display:grid;
  gap:4px;
  width:100%;
  padding:9px 10px;
  border:1px solid var(--hair);
  border-radius:2px;
  color:var(--fg-mute);
}
.recorded-path code {
  white-space:normal;
  overflow-wrap:anywhere;
  color:var(--fg-faint);
}
.state {
  display:inline-flex;
  padding:3px 7px;
  border:1px solid var(--hair);
  border-radius:2px;
  color:var(--fg-mute);
  font:600 9px/1.4 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.state--accepted { color:var(--accent-bright); border-color:var(--accent-dim); background:var(--sel); }
.state--rejected { color:#e0a79d; border-color:color-mix(in srgb,var(--rej) 65%,var(--hair)); background:var(--rej-fill); }

.metric-strip { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
.archive-toolbar {
  position:sticky;
  top:92px;
  z-index:20;
  display:grid;
  grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(142px,.65fr)) auto;
  gap:9px;
  padding:12px;
  margin-bottom:22px;
  border:1px solid var(--hair);
  border-radius:2px;
  background:color-mix(in srgb,var(--ink) 92%,transparent);
  backdrop-filter:blur(14px);
}
.archive-toolbar input,
.archive-toolbar select {
  width:100%;
  min-height:38px;
  padding:8px 10px;
  border:1px solid var(--hair);
  border-radius:2px;
  background:var(--panel-2);
  color:var(--fg);
  font:400 12px/1.4 var(--mono);
}
.archive-count { align-self:center; color:var(--fg-mute); font:500 10px/1.4 var(--mono); white-space:nowrap; }
.archive-era { margin-top:clamp(34px,5vw,64px); }
.archive-era__head { display:flex; align-items:end; gap:18px; border-bottom:1px solid var(--hair); padding-bottom:12px; margin-bottom:12px; }
.archive-era__head h2 { font-size:clamp(1.5rem,3vw,2.2rem); max-width:none; }
.archive-era__head p { margin:0 0 2px auto; font:400 11px/1.4 var(--mono); color:var(--fg-mute); }

@media (max-width:800px) {
  section { padding-block:40px; }
  .toc,.run-grid,.grid.g4,.metric-strip { grid-template-columns:1fr !important; }
  .era-map a { grid-template-columns:1fr; gap:5px; }
  .archive-toolbar { position:static; grid-template-columns:1fr; }
  .archive-era__head { display:block; }
  .archive-era__head p { margin-top:8px; }
  .studio-embed iframe { aspect-ratio:4/5; }
  .studio-embed__caption { align-items:flex-start; flex-direction:column; }
}

/* =================================================================== */
/* Presentation pass: balanced heads, full-width orphans, the splat      */
/* showcase, the demo stage, the lightbox, and the motion layer.        */
/* Everything here respects prefers-reduced-motion.                     */
/* =================================================================== */

/* The earlier reading-column pass capped every section head at 72ch, which
   parked a wide dead margin to the right of every title on wide screens.
   Titles read better beside their detail than stacked above a void. */
.head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(20px, 4vw, 54px);
  align-items: start;
  max-width: none;
}
.head h2 { max-width: 26ch; }
.head .detail { margin-top: 4px; }
@media (max-width: 920px) {
  .head { grid-template-columns: 1fr; }
  .head .detail { margin-top: 14px; }
}

/* A grid with a lone card in its last row reads as a rendering bug. The odd
   one out now takes the full measure. */
.g2 > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
.g3 > *:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
.g4 > *:last-child:nth-child(4n+1) { grid-column: 1 / -1; }
.g4 { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }

/* Keep anchored sections below the sticky masthead. */
html { scroll-padding-top: 92px; }

/* The studio embed's capture fallback gets the same stage the live iframe had. */
.studio-embed img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
@media (max-width: 800px) {
  .studio-embed img { aspect-ratio: 4 / 5; }
}

/* ------------------------------------------------------- splat showcase */
.splat-cycle { margin-top: 6px; }
.splat-cycle__stage {
  position: relative;
  width: 100%;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--stage);
  aspect-ratio: 16 / 9;
  min-height: 320px;
}
.splat-cycle__stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.splat-cycle__stage iframe.on { opacity: 1; }
.splat-cycle__stage > [data-sc-fallback] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.splat-cycle__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(5, 8, 6, .86);
}
.splat-cycle__text { display: grid; gap: 3px; min-width: 0; }
.splat-cycle__text strong { font: 400 1.05rem/1.2 var(--serif); color: var(--fg); }
.splat-cycle__text .lab { text-transform: none; letter-spacing: .03em; color: var(--fg-dim); }
.splat-cycle__text .tag { justify-self: start; margin-bottom: 3px; }
.splat-cycle__actions { display: flex; gap: 8px; flex: 0 0 auto; }
.splat-cycle__actions .btn { min-height: 34px; }
.splat-cycle__railwrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.splat-cycle__rail { display: flex; gap: 6px; flex-wrap: wrap; }
.splat-cycle__rail button {
  min-width: 34px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--hair);
  border-radius: 2px;
  background: var(--panel);
  color: var(--fg-dim);
  font: 600 10.5px/1 var(--mono);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.splat-cycle__rail button:hover { color: var(--fg); border-color: var(--accent-dim); }
.splat-cycle__rail button.on {
  color: #0d100b;
  background: var(--accent);
  border-color: var(--accent);
}
@media (max-width: 700px) {
  .splat-cycle__cap { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------ demo stage */
.demo-grid { display: grid; gap: 18px; }
.demo-card {
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--panel);
  overflow: hidden;
}
.demo-card__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 4px;
}
.demo-card__head h3 { margin: 8px 0 0; font: 400 1.3rem/1.25 var(--serif); }
.demo-card__note {
  padding: 6px 18px 14px;
  color: var(--fg-dim);
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 88ch;
}
.demo-card__stage {
  position: relative;
  border-top: 1px solid var(--hair);
  background:var(--stage);
  min-height: 200px;
}
.demo-card__stage:not(.is-live) { display: grid; place-items: center; padding: clamp(30px, 6vw, 70px) 18px; }
.demo-card__stage.is-live { min-height: 0; }
.demo-card__stage iframe {
  display: block;
  width: 100%;
  height: clamp(420px, 72vh, 780px);
  border: 0;
  background: var(--stage);
}
@media (max-width: 800px) {
  .demo-card__head { flex-direction: column; }
  .demo-card__head .btn { align-self: flex-start; }
}

/* --------------------------------------------------------------- lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 4vw, 48px);
  background: rgba(4, 6, 4, .93);
  backdrop-filter: blur(10px);
}
.lightbox.open { display: flex; }
.lightbox__fig {
  margin: 0;
  max-width: min(1400px, 96vw);
  display: grid;
  gap: 12px;
  justify-items: center;
}
.lightbox__fig img {
  max-width: 100%;
  max-height: 82vh;
  border-radius: 2px;
  border: 1px solid var(--hair);
  background: var(--stage);
}
.lightbox__fig figcaption {
  max-width: 90ch;
  text-align: center;
  color: var(--fg-dim);
  font-size: 13px;
  line-height: 1.55;
}
.lightbox__count {
  color: var(--fg-mute);
  font: 600 10px/1 var(--mono);
  letter-spacing: .1em;
}
.lightbox__close, .lightbox__nav {
  position: fixed;
  z-index: 2;
  height: 42px;
  min-width: 42px;
  border: 1px solid var(--hair);
  border-radius: 2px;
  background: rgba(13, 16, 11, .85);
  color: var(--fg);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.lightbox__close { top: 18px; right: 18px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); padding: 0 14px; }
.lightbox__prev { left: 14px; }
.lightbox__next { right: 14px; }
.lightbox__close:hover, .lightbox__nav:hover { border-color: var(--accent-dim); color: var(--accent); }
img.zoomable { cursor: zoom-in; }

/* ---------------------------------------------------------- motion layer */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.in { opacity: 1; transform: none; }
  .mast { transition: box-shadow .35s ease, background .35s ease; }
  .mast.scrolled { box-shadow: 0 12px 34px rgba(0, 0, 0, .38); }
  body { animation: page-arrive .6s ease both; }
  @keyframes page-arrive {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
}