/* ---------------------------------------------------------------- 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:14px; --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;
}
@media (prefers-color-scheme: light) {
  :root {
    /* lime is unreadable as text on paper, so light mode carries the v20 olive */
    --ink:#f3f3ea; --panel:#fffef8; --panel-2:#ececdf; --hair:#d8dac7;
    --fg:#171914; --fg-dim:#4e5145; --fg-mute:#74776b;
    --accent:#36570f; --accent-bright:#28430a; --accent-dim:#a7b487;
    --sel:#e6efcc; --sel-line:#8fa65a; --rej-fill:rgba(141,70,44,.10);
    --best-fill:rgba(54,87,15,.10);
  }
}
* { 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:7px; 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:9px;
  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: show the whole artifact rather than a cropped black tile */
.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:linear-gradient(180deg,var(--sel),transparent 130px),var(--panel); }
.card.best { border-color:var(--accent); box-shadow:0 0 0 1px rgba(200,255,77,.16), 0 20px 50px rgba(0,0,0,.3); background:linear-gradient(180deg,var(--best-fill),transparent 160px),var(--panel); }
.card.rej  { border-color:color-mix(in srgb,var(--rej) 55%, var(--hair)); background:linear-gradient(180deg,var(--rej-fill),transparent 130px),var(--panel); }

.tag { display:inline-block; padding:3px 7px; border-radius:5px; 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; }
@media (prefers-color-scheme: light){ .kv dd.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:radial-gradient(120% 100% at 50% 0%, var(--stage-2), var(--stage) 70%);
  border:1px solid var(--stage-hair); box-shadow:0 34px 90px rgba(0,0,0,.42); contain:paint;
}
@media (max-width:560px){ .stage { aspect-ratio:4/3; } }
.plate { position:absolute; inset:0; background:var(--paper); opacity:var(--plate-o,1); }
.sheet { position:absolute; inset:3.2% 3.6%; opacity:var(--sheet-o,1); }
.sheet .layer { position:absolute; inset:0; }
.sheet img { width:100%; height:100%; object-fit:contain; }
/* The beam wipes the photograph into the cleaned plate. Both are 1952x978 of the
   same sheet, pixel registered, so the seam falls exactly on the line it is
   crossing. The plate is the file the pipeline wrote, not a filter imitating it. */
.sheet .clean { clip-path:inset(0 calc(100% - var(--scan-x,0%)) 0 0); opacity:var(--clean-o,0); }
/* The blueprint color arrives after the sheet is clean, and it is a treatment of
   the cleaned plate: invert the ink, screen it over the blue. Color is
   presentation, the lines under it are the evidence. */
.sheet .blue {
  background:linear-gradient(142deg,var(--blue-1),var(--blue-2) 72%,var(--blue-3));
  opacity:var(--blue-o,0);
}
.sheet .blue img { filter:grayscale(1) invert(1) contrast(2.15) brightness(1.06); mix-blend-mode:screen; opacity:.92; }
.sheet .tr { position:absolute; inset:0; opacity:var(--tr-o,0); }
.sheet .tr svg { width:100%; height:100%; }
.beam {
  position:absolute; top:0; bottom:0; left:var(--scan-x,0%); width:2px;
  background:var(--beam); opacity:var(--beam-o,0);
  box-shadow:0 0 10px #dfff72, 0 0 34px rgba(200,255,77,.9), -14px 0 45px rgba(200,255,77,.24);
}
.beamchip {
  position:absolute; top:11px; left:clamp(10px,calc(var(--scan-x,0%) + 12px),calc(100% - 176px));
  padding:5px 8px; border-radius:6px; background:rgba(6,26,44,.82); border:1px solid rgba(133,233,255,.4);
  color:var(--beam); opacity:var(--beam-o,0); white-space:nowrap;
  font:500 9.5px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase;
}
#geo { position:absolute; inset:0; width:100%; height:100%; opacity:var(--geo-o,0); }
#geo text { font-family:var(--sans); fill:#f2efe7; paint-order:stroke; stroke:rgba(8,10,13,.75); stroke-width:3.2px; stroke-linejoin:round; }
#geo text.dim { font-family:var(--mono); fill:#ecffa8; letter-spacing:.03em; }
.styleplate { position:absolute; inset:0; opacity:var(--style-o,0); }
.styleplate img { width:100%; height:100%; object-fit:cover; }
.styleplate::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 42%,rgba(8,10,13,.74)); }

.prov, .readout {
  position:absolute; padding:7px 10px; border-radius:8px;
  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 { left:12px; bottom:12px; color:#ecffa8; max-width:min(62%,430px); }
.prov b { display:block; color:#fff; letter-spacing:.14em; }
.readout { right:12px; bottom:12px; color:#b9b6ae; text-align:right; }
.readout b { color:#ecffa8; font-weight:600; }
/* the phone stage is about 175px tall, so the chip is tightened rather than
   allowed to sit over a quarter of the sheet */
@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); }
}

.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:8px; 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; }
.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); }
.beats { display:flex; flex-wrap:wrap; gap:5px; margin-top:11px; }
.beats button {
  appearance:none; cursor:pointer; background:transparent; border:1px solid var(--hair); color:var(--fg-mute);
  border-radius:20px; padding:5px 11px; font:500 9.5px/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase;
}
.beats button:hover { color:var(--fg); border-color:var(--accent-dim); }
.beats button.on { background:var(--accent); border-color:var(--accent); color:#1b1710; }
@media (prefers-color-scheme: light){ .beats button.on { color:#fffdf8; } }

/* --------------------------------------------------------- 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:linear-gradient(90deg,var(--best-fill),transparent 60%),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:linear-gradient(transparent,rgba(8,10,13,.92)); }
.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:9px; 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:9px; 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:6px; 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); }