/* Sumvant — the home page set like a printed annual report. One wide column with generous margins,
   hairline rules, roman-numeral chapters, oversized numerals, margin notes; every demo is a numbered
   figure with a caption. Paper page, ink text, night for weight (chapter numerals, rules, the night
   stage), gold only for the stamp, the proof numerals, the current chapter and the four shift words;
   green for the one primary button. No grid, no gradients, no shadows, no cards. Every page loads
   this sheet (booking.css stays: the modal carries its own tokens; legal.css extends the two legal
   pages; discovery.html and demo.html keep their own inline styles for the workbook and the player).
   Faces: Fraunces (self-hosted, the display serif), the system sans for text, IBM Plex Mono only in
   receipts and the ledger. Standing rule for shipped files: no dollar-sign character anywhere. */

/* ---- fonts: latin subsets in assets/fonts, licences in tools/fonts ---- */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/fraunces-500.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/fraunces-500-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plexmono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plexmono-500.woff2") format("woff2"); }
/* metric-matched stand-ins: a late font swaps in without moving the layout */
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); size-adjust: 94%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Plex Mono Fallback"; src: local("Menlo"), local("Courier New"); ascent-override: 102.5%; descent-override: 27.5%; line-gap-override: 0%; }

:root {
  --paper: #f8f7f3;
  --paper-2: #f1f0eb;
  --white: #fdfcfa;
  --ink: #1a2332;
  --mut: #5b6575;
  --faint: #7c8696;
  --night: #1f2547;
  --rule: #1f2547;
  --rule-soft: rgba(31, 37, 71, .28);
  --rule-faint: rgba(31, 37, 71, .14);
  --gold: #a07a34;
  --gold-light: #e2cc96;
  --ac: #0f7b52;
  --ac-deep: #0a5c3d;
  --acbg: #e9f5ef;
  --amber: #7a4f0b;
  --amberbg: #faf3e3;
  --np: #fafbfc;                      /* paper on the night stage */
  --np-72: rgba(250, 251, 252, .72);
  --np-50: rgba(250, 251, 252, .5);
  --nline: rgba(250, 251, 252, .18);
  --nline-soft: rgba(250, 251, 252, .1);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --disp: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --out: cubic-bezier(.19, 1, .22, 1);
  --io: cubic-bezier(.65, .05, .36, 1);
  --col: 820px;
  --measure: 620px;
  --gutter: 24px;
  --mast-h: 72px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--mast-h) + 24px); background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; animation: pagein .38s var(--out) both; transition: opacity .17s linear; }
body.leaving { opacity: 0; }
@keyframes pagein { from { opacity: 0; } to { opacity: 1; } }
::selection { background: rgba(160, 122, 52, .22); }
a { color: inherit; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 9px 14px; background: var(--ink); color: var(--paper); font-size: 13px; text-decoration: none; transform: translateY(-250%); transition: transform .25s var(--out); }
.skip:focus { transform: none; }

/* ---- links and the one button ---- */
.tlink { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--rule-soft); text-decoration-thickness: 1px; text-underline-offset: 5px; transition: text-decoration-color .2s; }
.tlink:hover, .tlink:focus-visible { text-decoration-color: var(--ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 22px; border: 0; border-radius: 3px; background: var(--ac); color: #fff; font: 600 15px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .2s; }
.btn:hover { background: var(--ac-deep); }
.btn:active { transform: translateY(1px); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }

/* ---- 0 · masthead: wordmark, text nav, one button, a single hairline under it ---- */
.mast { position: sticky; top: 0; z-index: 80; background: var(--paper); border-bottom: 1px solid var(--rule); }
.mast-in { position: relative; width: min(100% - 2 * var(--gutter), 1280px); min-height: var(--mast-h); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.logo { position: relative; z-index: 2; display: inline-flex; align-items: center; font-size: 22px; line-height: 1; color: var(--night); text-decoration: none; }
.logo .wm { display: block; width: 7.479em; height: 1.111em; flex: none; fill: currentColor; }
.nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; margin-right: 10px; }
.nav-links a { font-size: 14.5px; color: var(--mut); text-decoration: none; transition: color .2s; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-soft); text-underline-offset: 6px; }
.nav-right { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; }
.mast .btn { padding: 10px 16px; font-size: 14px; }
.menu-btn { display: none; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--rule-soft); border-radius: 3px; background: transparent; color: var(--ink); font: 600 13px/1 var(--sans); cursor: pointer; }
.menu-btn i { position: relative; width: 14px; height: 1.5px; background: currentColor; }
.menu-btn i::before, .menu-btn i::after { content: ""; position: absolute; left: 0; width: 14px; height: 1.5px; background: currentColor; transition: transform .25s var(--out); }
.menu-btn i::before { top: -5px; } .menu-btn i::after { top: 5px; }
.menu-btn[aria-expanded="true"] i { background: transparent; }
.menu-btn[aria-expanded="true"] i::before { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i::after { transform: translateY(-5px) rotate(-45deg); }

/* ---- the page: a sticky chapter index in the left margin, one column, notes in the right margin ---- */
.page { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, var(--col)) minmax(250px, 1.15fr); column-gap: 24px; width: min(100% - 2 * var(--gutter), 1280px); margin: 0 auto; }
.toc { grid-column: 1; align-self: start; position: sticky; top: calc(var(--mast-h) + 48px); margin-top: calc(var(--mast-h) + 48px); }
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc li + li { margin-top: 10px; }
.toc a { display: flex; align-items: baseline; gap: 12px; color: var(--mut); text-decoration: none; font-size: 13px; transition: color .25s; }
.toc a i { flex: none; width: 2.2em; font: 500 17px/1 var(--disp); font-style: normal; color: var(--rule-soft); letter-spacing: .02em; transition: color .25s; }
.toc a span { min-width: 0; }   /* a long chapter name wraps inside the margin rather than crossing into the column */
.toc a:hover, .toc a:focus-visible { color: var(--ink); }
.toc a.on { color: var(--ink); }
.toc a.on i { color: var(--gold); }
.report { grid-column: 2; min-width: 0; }

/* ---- chapters: a hairline, the roman numeral oversized in the serif, the title ---- */
.ch { padding-top: clamp(72px, 9vw, 128px); }
.ch:first-child { padding-top: clamp(40px, 5vw, 64px); }
.ch-head { display: flex; align-items: baseline; gap: 22px; padding-top: 22px; border-top: 1px solid var(--rule); }
.ch-head .num { font: 500 clamp(60px, 7.6vw, 100px)/.88 var(--disp); color: var(--night); letter-spacing: -.01em; }
.ch-head h2 { font: 500 clamp(26px, 3vw, 38px)/1.12 var(--disp); letter-spacing: -.012em; color: var(--ink); }
.ch-rv { opacity: 0; transform: translateY(16px); transition: opacity 1.4s var(--out), transform 1.4s var(--out); }
.ch-rv.in { opacity: 1; transform: none; }

/* type */
.prose { max-width: var(--measure); }
.lead { margin-top: 28px; max-width: 560px; font-size: 18px; line-height: 1.6; color: var(--mut); }
.line { margin-top: 28px; max-width: var(--measure); color: var(--mut); }
h3 { font: 500 clamp(22px, 2.3vw, 27px)/1.22 var(--disp); letter-spacing: -.01em; color: var(--ink); }
.foot-note { margin-top: 16px; color: var(--faint); font-size: 13px; }

/* figures: a plain frame with a hairline, a numbered caption, a note in the margin */
.fig { position: relative; margin-top: clamp(40px, 5vw, 56px); }
.fig > figcaption { margin-top: 12px; max-width: var(--measure); color: var(--mut); font-size: 13px; line-height: 1.55; }
.fig > figcaption b { color: var(--ink); font-weight: 600; }
.fig > figcaption button { margin-left: 10px; padding: 0; border: 0; background: none; color: var(--ink); font: 500 13px/1.55 var(--sans); text-decoration: underline; text-decoration-color: var(--rule-soft); text-underline-offset: 4px; cursor: pointer; }
.fig > figcaption button:hover { text-decoration-color: var(--ink); }
.note { position: absolute; left: calc(100% + 36px); top: 0; width: 200px; padding-top: 10px; border-top: 1px solid var(--rule-soft); color: var(--mut); font-size: 13px; line-height: 1.55; }
.note b { color: var(--ink); font-weight: 600; }
.still { border: 1px solid var(--rule-soft); background: var(--white); }
.still img { width: 100%; height: auto; }

/* ledger rows: claim left, one sentence right */
.rows { margin-top: clamp(36px, 4vw, 48px); border-top: 1px solid var(--rule); }
.rows > div { display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, .58fr); gap: 8px 40px; padding: 22px 0; border-bottom: 1px solid var(--rule-soft); }
.rows dt { font: 500 clamp(19px, 1.9vw, 22px)/1.3 var(--disp); letter-spacing: -.01em; color: var(--ink); }
.rows dd { color: var(--mut); }
.rows dd span { display: block; }
.rows dd span + span { margin-top: 6px; }

/* ============ I · THE WORK — the hero and Fig. 1 ============ */
h1 { margin-top: clamp(40px, 5vw, 64px); font: 500 clamp(38px, 5.7vw, 76px)/1.05 var(--disp); letter-spacing: -.028em; color: var(--ink); }
h1 em { font-style: italic; color: var(--night); letter-spacing: -.015em; }
.clip { display: block; overflow: hidden; }
.clip > span { display: block; white-space: nowrap; transform: translateY(112%); transition: transform 1.05s var(--out); }
.played .clip > span { transform: none; }
.clip:nth-child(2) > span { transition-delay: .09s; }
.hero .actions { margin-top: 32px; }
.hero .actions .tlink { font-weight: 500; }

/* Fig. 1 — the hover-scrub demo in a plain frame: queue, detail, log, the scrub strip */
.vg { position: relative; }
.vg-window { position: relative; overflow: hidden; overflow: clip; border: 1px solid var(--rule-soft); background: #fff; }
.vg-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--rule-faint); background: var(--paper-2); }
.vg-app { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mut); font: 500 11.5px var(--sans); }
.vg-sess { white-space: nowrap; color: var(--mut); font: 500 10px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.vg-body { display: grid; grid-template-columns: 214px 1fr; }
.vg-queue { border-right: 1px solid var(--rule-faint); background: var(--paper-2); padding: 12px; display: flex; flex-direction: column; gap: 7px; }
.vg-qhead { display: flex; justify-content: space-between; color: var(--faint); font: 500 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 2px 2px 5px; }
.vg-item { padding: 9px 10px; border: 1px solid var(--rule-faint); border-radius: 3px; background: #fff; font-size: 11.5px; line-height: 1.35; transition: border-color .3s, transform .55s var(--io), opacity .55s var(--io), background .3s; }
.vg-item small { display: block; color: var(--faint); font-size: 10px; }
.vg-item.hover { border-color: var(--ac); }
.vg-item.active { border-color: var(--ac); background: var(--acbg); }
.vg-item.gone { opacity: 0; transform: translateX(-14px); }
.vg-bins { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding-top: 9px; }
.vg-bin { padding: 8px 9px; border-radius: 3px; font: 600 10px var(--sans); }
.vg-bin b { display: block; font: 500 16px var(--mono); letter-spacing: -.02em; transition: transform .3s var(--out); }
.vg-bin.pop b { transform: scale(1.2); }
.vg-bin.ok { background: var(--acbg); color: var(--ac-deep); }
.vg-bin.rev { background: var(--amberbg); color: var(--amber); }
.vg-detail { padding: 16px 18px 14px; display: flex; flex-direction: column; min-height: 246px; }
.vg-dhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.vg-dhead b { font-size: 13.5px; letter-spacing: -.01em; }
.vg-chip { padding: 4px 9px; border: 1px solid var(--rule-faint); border-radius: 3px; background: var(--paper-2); color: var(--faint); font: 500 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; transition: background .3s, color .3s, border-color .3s; }
.vg-chip.on { background: var(--acbg); border-color: rgba(15, 123, 82, .3); color: var(--ac-deep); }
.vg-chip.warn { background: var(--amberbg); border-color: rgba(122, 79, 11, .3); color: var(--amber); }
.vg-rows { display: grid; gap: 8px; }
.vg-row { display: grid; grid-template-columns: 84px 1fr 16px; align-items: center; gap: 10px; }
.vg-row label { color: var(--faint); font: 500 10.5px var(--sans); }
.vg-field { position: relative; min-height: 29px; display: flex; align-items: center; padding: 0 9px; border: 1px solid var(--rule-faint); border-radius: 3px; background: #fff; font: 500 12px var(--mono); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; transition: border-color .25s, background .25s; }
.vg-field.focus { border-color: var(--ac); }
.vg-field.sweep::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(15, 123, 82, .12), transparent 70%); animation: sweep .55s var(--io); }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.vg-caret { display: none; width: 1.5px; height: 14px; margin-left: 2px; background: var(--ac); animation: blink 1s steps(1) infinite; }
.vg-field.focus .vg-caret { display: block; }
@keyframes blink { 50% { opacity: 0; } }
.vg-check { width: 15px; height: 15px; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .35s var(--out); }
.vg-check.on { opacity: 1; transform: none; }
.vg-check path { stroke: var(--ac); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vg-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; }
.vg-file { padding: 9px 18px; border-radius: 3px; background: var(--ink); color: #fff; font: 600 12px var(--sans); transition: transform .2s var(--out), background .3s; }
.vg-file.press { transform: scale(.96) translateY(1px); }
.vg-file.warn { background: var(--amber); }
.vg-verify { color: var(--faint); font: 500 10.5px var(--mono); }
.vg-verify.ok { color: var(--ac-deep); }
.vg-rule { margin-top: 12px; padding: 8px 11px; border-left: 2px solid var(--amber); background: var(--amberbg); color: var(--amber); font: 500 11px var(--sans); opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .4s var(--out); }
.vg-rule.on { opacity: 1; transform: none; }
.vg-log { border-top: 1px solid var(--rule-faint); background: var(--paper-2); padding: 9px 14px; height: 58px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; }
.vg-log div { color: var(--faint); font: 400 9.5px/1.5 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-log div:last-child { color: var(--mut); }
.vg-log em { color: var(--ac-deep); font-style: normal; }
.vg-log .warnl em { color: var(--amber); }
.vg-cursor { position: absolute; z-index: 5; left: 0; top: 0; width: 17px; filter: drop-shadow(0 2px 3px rgba(26, 35, 50, .35)); transition-property: transform; transition-timing-function: cubic-bezier(.2, .75, .25, 1); pointer-events: none; transform-origin: 2px 2px; }
.vg-cursor.hide { opacity: 0; }
.vg-ripple { position: absolute; z-index: 4; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 2px solid var(--ac); border-radius: 50%; opacity: 0; pointer-events: none; }
.vg-ripple.go { animation: ripple .5s var(--out); }
@keyframes ripple { from { opacity: .7; transform: scale(.25); } to { opacity: 0; transform: scale(1); } }
.vg-stamp { position: absolute; z-index: 6; right: 26px; bottom: 112px; padding: 7px 13px; border: 2px solid var(--gold); border-radius: 4px; color: var(--gold); background: rgba(255, 255, 255, .9); font: 500 13px var(--mono); letter-spacing: .16em; transform: rotate(-8deg) scale(1.6); opacity: 0; pointer-events: none; }
.vg-stamp.go { animation: stamp 1.5s var(--out); }
.vg-stamp.warn { border-color: var(--ink); color: var(--ink); }
@keyframes stamp { 0% { opacity: 0; transform: rotate(-8deg) scale(1.6); } 12% { opacity: 1; transform: rotate(-8deg) scale(.96); } 18% { transform: rotate(-8deg) scale(1.04); } 24%, 78% { opacity: 1; transform: rotate(-8deg) scale(1); } 100% { opacity: 0; transform: rotate(-8deg) scale(1); } }
.vg-scrub { position: relative; height: 30px; border-top: 1px solid var(--rule-faint); background: #fff; display: grid; grid-template-columns: repeat(4, 1fr); cursor: ew-resize; touch-action: none; user-select: none; opacity: .6; transition: opacity .3s; }
.vg:hover .vg-scrub, .vg-scrub:focus-visible { opacity: 1; }
.vg-scrub:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ink); }
.vg-ch { position: relative; display: flex; align-items: center; padding-left: 10px; border-right: 1px solid var(--rule-faint); color: var(--faint); font: 500 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.vg-ch:last-child { border-right: 0; }
.vg-ch i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--rule-faint); }
.vg-ch i:nth-child(1) { left: 25%; } .vg-ch i:nth-child(2) { left: 50%; } .vg-ch i:nth-child(3) { left: 75%; }
.vg-head { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--ink); transform: translateX(var(--x, 0px)); transition: transform .25s var(--out); pointer-events: none; }
.vg-head::after { content: ""; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.vg-scrub.scrubbing .vg-head { transition: none; }

/* ============ III · HOW IT RUNS — Fig. 2–4, each with a two-line paragraph ============ */
.how { margin-top: clamp(32px, 4vw, 44px); border-top: 1px solid var(--rule); }
.how .step { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 20px 48px; padding: 36px 0; border-bottom: 1px solid var(--rule-soft); }
.how .step p { margin-top: 12px; color: var(--mut); max-width: 28ch; }
.how .fig { margin-top: 0; }

/* ============ IV · ONE SHIFT, RECORDED — Fig. 5 and Fig. 6 from one recording, cropped ============ */
.crop { position: relative; overflow: hidden; width: 100%; aspect-ratio: var(--w) / var(--h); border: 1px solid var(--rule-soft); background: #fff; }
.crop video { position: absolute; left: calc(-100% * var(--x) / var(--w)); top: calc(-100% * var(--y) / var(--h)); width: calc(100% * 1920 / var(--w)); height: auto; max-width: none; aspect-ratio: 1920 / 1052; object-fit: cover; }
.crop.app { --x: 0; --y: 90; --w: 1198; --h: 950; }
.crop.console { --x: 1200; --y: 34; --w: 720; --h: 1018; width: min(100%, calc(86vh * 720 / 1018)); min-width: min(100%, 380px); margin: 0 auto; }
.words { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; margin: clamp(40px, 5vw, 56px) 0 0; padding: 0; list-style: none; }
.words li { color: var(--rule-soft); font: 500 clamp(24px, 3vw, 34px)/1.2 var(--disp); letter-spacing: -.01em; transition: color .35s; }
.words li + li::before { content: "·"; margin: 0 .55em; color: var(--rule-soft); }
.words li.on { color: var(--gold); }
.words.all li { color: var(--gold); }

/* ============ V · ONE NIGHT — the night stage: the clock, the ledger, then the receipt ============ */
.night-track { position: relative; height: 300vh; margin-top: clamp(40px, 5vw, 56px); }
.night-stage { position: sticky; top: var(--mast-h); height: calc(100vh - var(--mast-h)); min-height: 640px; overflow: hidden; display: grid; align-items: center; padding: 0 clamp(24px, 2.5vw, 32px); background: var(--sky, var(--night)); color: var(--np); transition: background 1.2s linear; }
.night-in { width: 100%; display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(32px, 4.5vw, 60px); align-items: center; }
.clock { font: 500 clamp(60px, 8.2vw, 105px)/.95 var(--disp); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--np); }
.clock small { display: block; margin-bottom: 18px; color: var(--np-72); font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.clock i { font-style: normal; font-size: .36em; color: var(--np-72); letter-spacing: -.01em; margin-left: 8px; }
.office { margin-top: 26px; max-width: 360px; color: var(--np-72); font-size: 15px; }
.office b { color: var(--np); font-weight: 600; }
.ledger { position: relative; border: 1px solid var(--nline); transition: opacity .6s var(--out); }
.ledger-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--nline-soft); color: var(--np-50); font: 500 9.5px var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.ledger-head span:last-child { color: var(--np-72); }
.ledger-lines { height: 300px; padding: 10px 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; overflow: hidden; }
.ll { display: none; grid-template-columns: 62px 1fr; gap: 12px; font: 400 12px/1.5 var(--mono); color: var(--np-72); }
.ll.on { display: grid; animation: llin .5s var(--out) both; }
@keyframes llin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ll b { color: var(--np-50); font-weight: 500; }
.ll em { font-style: normal; color: var(--np); font-weight: 500; }
.ll.warn em { font-style: italic; }
.ll.morning { color: var(--np); font-weight: 500; }
.tally { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--nline-soft); }
.tally div { padding: 12px 16px; border-right: 1px solid var(--nline-soft); }
.tally div:last-child { border-right: 0; }
.tally small { display: block; color: var(--np-50); font: 500 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
.tally b { font: 500 20px var(--disp); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--np); }
/* the morning: the ledger gives way to the receipt */
.night-out { position: relative; }
.night-out .receipt { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity .6s var(--out); pointer-events: none; }
.night-out.morning .ledger { opacity: 0; }
.night-out.morning .receipt { opacity: 1; pointer-events: auto; }
.night-hint { position: absolute; right: 24px; bottom: 18px; color: var(--np-50); font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
/* the night's stages as a list: phones and reduced motion, under the clock (home.js writes the rows) */
.night-stages { display: none; margin: 26px 0 0; border-top: 1px solid var(--nline); }
.night-stages div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--nline-soft); color: var(--np-72); font-size: 14px; line-height: 1.5; }
.night-stages b { color: var(--np); font: 500 12px/1.6 var(--mono); letter-spacing: .04em; }
.night-stages span b { color: var(--np); font: 600 14px/1.5 var(--sans); letter-spacing: 0; }
.night-cap { margin-top: 12px; color: var(--mut); font-size: 13px; }

/* ============ THE RECEIPT (from the night prototype): a paper strip, torn top and bottom ============ */
.receipt { width: 380px; max-width: 100%; }
.rc-paper {
  position: relative; padding: 32px 24px 34px; background: var(--white); color: var(--ink);
  font: 400 13px/1.5 var(--mono); font-variant-numeric: tabular-nums; isolation: isolate;
  --tooth-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 6L5 0l5 6z'/%3E%3C/svg%3E");
  --tooth-bot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--tooth-top), var(--tooth-bot), linear-gradient(#000, #000);
  -webkit-mask-size: 10px 6px, 10px 6px, 100% calc(100% - 12px);
  -webkit-mask-position: 0 0, 0 100%, 0 6px;
  -webkit-mask-repeat: repeat-x, repeat-x, no-repeat;
  mask-image: var(--tooth-top), var(--tooth-bot), linear-gradient(#000, #000);
  mask-size: 10px 6px, 10px 6px, 100% calc(100% - 12px);
  mask-position: 0 0, 0 100%, 0 6px;
  mask-repeat: repeat-x, repeat-x, no-repeat;
}
.rc-paper::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .06; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E"); }
.on-paper .rc-paper { border-left: 1px solid var(--rule-faint); border-right: 1px solid var(--rule-faint); background: #fff; }
.rc-head { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: end; padding-bottom: 14px; border-bottom: 1px dashed var(--rule-soft); }
.rc-wm { display: inline-flex; color: var(--night); font-size: 10px; line-height: 1; }
.rc-wm svg { display: block; width: 7.479em; height: 1.111em; fill: currentColor; }
.rc-kind { font-weight: 500; letter-spacing: .14em; text-align: right; }
.rc-meta { color: var(--mut); }
.rc-meta + .rc-meta { text-align: right; }
.rc-lines { margin: 0; padding: 14px 0 12px; list-style: none; }
.rc-lines li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; padding: 4px 0; }
.rc-lines .rc-t { color: var(--mut); white-space: nowrap; }
.rc-sub { position: relative; padding: 16px 0; border-top: 1px dashed var(--rule-soft); border-bottom: 1px dashed var(--rule-soft); font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.rc-sub b { display: block; padding-right: 92px; font-weight: 500; }
.rc-foot { margin: 14px 0 0; color: var(--mut); }
.rc-stamp { position: absolute; right: 2px; top: 50%; padding: 5px 9px 4px; border: 2px solid var(--gold); border-radius: 4px; color: var(--gold); font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: .18em; mix-blend-mode: multiply; opacity: .92; transform: translateY(-50%) rotate(-7deg); }
.rc-stamp::after { content: ""; position: absolute; inset: -2px; border-radius: 4px; background: var(--gold-light); opacity: .12; }
/* printing: JS adds .rc-live, then .on to each item as it prints; otherwise the receipt is simply printed */
.rc-live .rc-lines li, .rc-live .rc-sub, .rc-live .rc-foot { opacity: 0; transition: opacity .22s ease; }
.rc-live .rc-lines li.on, .rc-live .rc-sub.on, .rc-live .rc-foot.on { opacity: 1; }
.rc-live .rc-stamp { transition: opacity .3s ease .3s, transform .35s cubic-bezier(.2, .9, .3, 1.25) .3s; }
.rc-live .rc-sub:not(.on) .rc-stamp { opacity: 0; transform: translateY(-50%) rotate(-7deg) scale(1.5); }
.night-out { min-width: 0; }
.night-out .receipt { width: 440px; max-width: none; }
.night-out .rc-paper { padding: 22px 22px 24px; font-size: 12px; }
.night-out .rc-head { padding-bottom: 10px; }
.night-out .rc-lines { padding: 10px 0 8px; }
.night-out .rc-lines li { grid-template-columns: 58px minmax(0, 1fr); padding: 2px 0; }
.night-out .rc-sub { font-size: 16px; padding: 11px 0; }
.night-out .rc-foot { margin-top: 10px; }

/* ============ VI · PROOF — four oversized numerals on hairlines; the systems line ============ */
.ptiles { margin-top: clamp(36px, 4vw, 48px); border-top: 1px solid var(--rule); }
.ptile { display: grid; grid-template-columns: minmax(0, .46fr) minmax(0, .54fr); gap: 8px 40px; align-items: baseline; padding: 18px 0 22px; border-bottom: 1px solid var(--rule-soft); }
.ptile b { font: 500 clamp(64px, 8.4vw, 112px)/1 var(--disp); letter-spacing: -.03em; color: var(--gold); font-variant-numeric: tabular-nums; }
.ptile b small { font-size: .5em; margin-left: 2px; vertical-align: .34em; font-weight: 500; }
.ptile span { color: var(--mut); max-width: 26ch; }
.systems { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 0; margin: clamp(48px, 6vw, 72px) 0 0; padding: 22px 0 0; border-top: 1px solid var(--rule); list-style: none; }
.systems li { font: 500 clamp(22px, 2.6vw, 30px)/1.25 var(--disp); letter-spacing: -.01em; color: var(--ink); }
.systems li + li::before { content: "·"; margin: 0 .5em; color: var(--rule-soft); }
.systems + .foot-note { margin-top: 14px; }

/* ============ VII · GIVE IT A TASK — the chore engine printing Fig. 7, the house rules, who it's for ============ */
.ask { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 28px; max-width: 420px; }
.ask input { width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid var(--rule-soft); border-radius: 3px; background: #fff; color: var(--ink); font: 500 16px var(--sans); transition: border-color .25s; }
.ask input:focus { outline: none; border-color: var(--ink); }
.ask input::placeholder { color: var(--faint); }
.examples { margin-top: 14px; max-width: 560px; color: var(--mut); font-size: 14px; line-height: 1.7; }
.examples button { padding: 0; border: 0; background: none; color: var(--ink); font: 500 14px/1.7 var(--sans); text-decoration: underline; text-decoration-color: var(--rule-soft); text-underline-offset: 4px; cursor: pointer; transition: text-decoration-color .2s; }
.examples button:hover { text-decoration-color: var(--ink); }
.task { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(32px, 5vw, 64px); align-items: start; }
.task .fig { margin-top: 0; }
.task .ask-side { padding-top: 6px; }
/* Fig. 8 — the house rules: three sentences, flip one, the routing changes */
.rules-demo { border: 1px solid var(--rule-soft); background: #fff; }
.rules-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--rule-faint); background: var(--paper-2); }
.rules-head b { font-size: 13px; }
.rules-head span { color: var(--faint); font: 500 9.5px var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.rules-list { padding: 8px 18px; }
.rule-row { display: flex; align-items: center; gap: 13px; padding: 11px 0; border-bottom: 1px dashed var(--rule-faint); }
.rule-row:last-child { border-bottom: 0; }
.rule-sw { flex: none; width: 38px; height: 22px; border: 0; border-radius: 999px; background: #c4ccd6; position: relative; cursor: pointer; transition: background .3s; }
.rule-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .3s var(--out); }
.rule-sw[aria-pressed="true"] { background: var(--ink); }
.rule-sw[aria-pressed="true"]::after { transform: translateX(16px); }
.rule-text { font: 500 13px/1.45 var(--sans); color: var(--ink); }
.rule-text em { font-style: normal; color: var(--ac-deep); font-weight: 600; }
.rule-row.off .rule-text, .rule-row.off .rule-text em { color: var(--faint); }
.rule-row.flash .rule-text em { animation: flash .8s var(--out); }
@keyframes flash { 30% { background: var(--acbg); } }
.flow { position: relative; height: 210px; border-top: 1px solid var(--rule-faint); background: var(--paper-2); overflow: hidden; overflow: clip; }
.flow-item { position: absolute; top: 16px; left: 50%; padding: 7px 11px; border: 1px solid var(--rule-soft); border-radius: 3px; background: #fff; font: 500 11px var(--mono); letter-spacing: -.01em; white-space: nowrap; transform: translate(-50%, -60px); transition: transform 2.1s var(--io), opacity .5s; will-change: transform; }
.flow-item.team { border-color: rgba(122, 79, 11, .45); color: var(--amber); }
.flow-item.auto { border-color: rgba(15, 123, 82, .45); color: var(--ac-deep); }
.flow-bins { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule-faint); }
.fbin { padding: 13px 18px; background: #fff; }
.fbin + .fbin { border-left: 1px solid var(--rule-faint); }
.fbin small { display: block; color: var(--faint); font: 500 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
.fbin b { display: inline-block; font: 500 21px var(--disp); letter-spacing: -.02em; transition: transform .3s var(--out); }
.fbin.pop b { transform: scale(1.25); }
.fbin.ok b { color: var(--ac-deep); } .fbin.rev b { color: var(--amber); }
/* the founder: photo keyed out, chest-up, two lines */
.founder { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: end; margin-top: clamp(48px, 6vw, 72px); padding-top: 28px; border-top: 1px solid var(--rule); }
.founder picture, .founder img { display: block; width: 100%; height: auto; }
.founder .who { padding-bottom: 12px; }
.founder .who p + p { margin-top: 10px; color: var(--mut); max-width: 40ch; }
/* how it starts */
.start { margin-top: clamp(48px, 6vw, 72px); padding-top: 28px; border-top: 1px solid var(--rule); }
.start p { margin-top: 14px; max-width: var(--measure); color: var(--mut); }
.start .actions { margin-top: 28px; }

/* ---- the footer: light, one hairline, one row ---- */
.site-foot { width: min(100% - 2 * var(--gutter), 1280px); margin: clamp(72px, 9vw, 128px) auto 0; padding: 26px 0 44px; border-top: 1px solid var(--rule); }
.site-foot .row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; font-size: 13.5px; }
.site-foot .logo { font-size: 18px; margin-right: auto; }
.site-foot a { color: var(--mut); text-decoration: none; }
.site-foot a:hover, .site-foot a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.site-foot .mail { color: var(--ink); }

/* ---- narrower screens ---- */
@media (max-width: 1239px) {
  .page { grid-template-columns: minmax(130px, 1fr) minmax(0, var(--col)) minmax(24px, .6fr); }
  .note { position: static; width: auto; max-width: var(--measure); margin-top: 14px; padding-top: 10px; }
}
@media (max-width: 1099px) {
  .page { display: block; width: min(100% - 2 * var(--gutter), var(--col)); }
  .toc { display: none; }
}
@media (max-width: 960px) {
  .menu-btn { display: inline-flex; }
  .nav-links { display: none; }
  .nav-links.open { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 6px 0 10px; background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .nav-links.open a { padding: 12px 0; font-size: 16px; border-bottom: 1px solid var(--rule-faint); }
  .nav-links.open a:last-child { border-bottom: 0; }
  .nav-links.open a[aria-current="page"] { text-decoration: none; color: var(--ink); }
}
@media (max-width: 859px) {
  .task { grid-template-columns: 1fr; }
  .task .receipt { margin: 0 auto; }
  .how .step { grid-template-columns: 1fr; gap: 18px; }
  .how .step p { max-width: 40ch; }
  .night-in { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 28px; }
  .clock { font-size: clamp(60px, 14vw, 105px); }
  .ledger-lines { height: 220px; }
  .founder { grid-template-columns: 170px minmax(0, 1fr); align-items: end; }
}
@media (max-width: 719px) {
  :root { --gutter: 16px; --mast-h: 60px; }
  .logo { font-size: 19px; }
  .mast .btn { padding: 9px 12px; font-size: 13px; }
  .menu-btn { padding: 10px 10px; font-size: 0; gap: 0; }
  .ch-head { gap: 16px; }
  .rows > div { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .ptile { grid-template-columns: 1fr; gap: 4px; padding: 16px 0 20px; }
  .receipt { width: 100%; }
  .rc-paper { padding: 28px 18px 30px; }
  .rc-lines li { grid-template-columns: 58px minmax(0, 1fr); }
  .vg-body { grid-template-columns: 1fr; }
  .vg-queue { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--rule-faint); }
  .vg-qhead { width: 100%; }
  .vg-item { flex: 1 1 40%; }
  .vg-bins { margin: 0; width: 100%; }
  .tally { grid-template-columns: 1fr 1fr; }
  .tally div:nth-child(2) { border-right: 0; }
  .tally div:nth-child(-n+2) { border-bottom: 1px solid var(--nline-soft); }
  /* phones: no scroll theatre; the stages stack, the ledger reads finished, the receipt is printed */
  .night-track { height: auto; }
  .night-stage { display: block; position: static; height: auto; min-height: 0; padding: 40px var(--gutter) 44px; }
  .night-hint { display: none; }
  .night-stages { display: block; }
  .night-out .ledger, .night-out.morning .ledger { opacity: 1; }
  .night-out .receipt, .night-out.morning .receipt { position: static; transform: none; opacity: 1; max-width: 100%; margin: 28px auto 0; pointer-events: auto; }
  .words li { font-size: 22px; }
  .founder { grid-template-columns: 1fr; gap: 20px; }
  .founder picture { max-width: 220px; }
  .site-foot .row { gap: 10px 18px; }
  .site-foot .logo { flex-basis: 100%; margin-right: 0; }
}
@media (max-width: 540px) {
  h1 { font-size: clamp(32px, 9.4vw, 40px); opacity: 0; transform: translateY(14px); transition: opacity .9s var(--out) .1s, transform .9s var(--out) .1s; }
  .played h1 { opacity: 1; transform: none; }
  .clip, .clip > span { display: inline; white-space: normal; transform: none; transition: none; }
}
@media (max-width: 380px) { .logo { font-size: 17px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { animation: none; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .ch-rv, .clip > span, h1, .ll { opacity: 1; transform: none; }
  .vg-cursor, .night-hint { display: none; }
  .rc-live .rc-lines li, .rc-live .rc-sub, .rc-live .rc-foot, .rc-live .rc-sub:not(.on) .rc-stamp { opacity: 1; transition: none; }
  .rc-live .rc-sub:not(.on) .rc-stamp { transform: translateY(-50%) rotate(-7deg); }
  .words li { color: var(--ink); }
  /* no scroll theatre: the night reads as one finished ledger and a printed receipt */
  .night-track { height: auto; }
  .night-stage { display: block; position: static; height: auto; min-height: 0; padding: 48px clamp(24px, 4vw, 56px) 44px; }
  .night-stages { display: block; }
  .night-out .ledger, .night-out.morning .ledger { opacity: 1; }
  .night-out .receipt, .night-out.morning .receipt { position: static; transform: none; opacity: 1; margin: 28px auto 0; pointer-events: auto; }
}

/* ============ EVERY PAGE — the shell on the other pages ============
   A secondary page opens with its title set like a chapter title (the serif, upright, ink) and a lead,
   then chapters with the same numerals, hairlines, figures and ledgers as the home page. The page-
   specific pieces follow: the how-it-works diagram, the About "make it guess" demo, the legal reading
   column, the brand specimens, the discovery workbook's and the demo player's frames. */
.ch.opener > div { padding-top: 22px; border-top: 1px solid var(--rule); }
.ch.opener h1 { margin-top: 0; }
.copy { margin-top: 24px; max-width: var(--measure); color: var(--mut); font-size: 17px; line-height: 1.65; }
.copy + .copy, h3 + .copy { margin-top: 14px; }
.copy b, .copy strong { color: var(--ink); font-weight: 600; }
.copy em { font-style: italic; color: var(--ink); }
.copy code, .bfiles code { color: var(--ink); font: 500 13px var(--mono); overflow-wrap: anywhere; }
.lead a, .copy a, .rows dd a, .stub .tlink, .note a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--rule-soft); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.lead a:hover, .copy a:hover, .rows dd a:hover { text-decoration-color: var(--ink); }
.story h3 { margin-top: clamp(36px, 4.5vw, 52px); }
.pull { margin-top: clamp(44px, 5.5vw, 64px); max-width: 760px; color: var(--ink); font: 500 clamp(26px, 3.2vw, 40px)/1.18 var(--disp); letter-spacing: -.02em; }
.pull em { font-style: italic; color: var(--night); }
.rows dd p + p { margin-top: 8px; }
.rows.qa dt { font-size: clamp(18px, 1.8vw, 21px); }
.tasks { margin: 28px 0 0; padding: 0; list-style: none; max-width: var(--measure); border-top: 1px solid var(--rule); }
.tasks li { padding: 12px 0; border-bottom: 1px solid var(--rule-soft); color: var(--ink); }
.fig-receipt { max-width: 380px; }
.ptiles + .foot-note span + span::before { content: "·"; margin: 0 .5em; }

/* how-it-works: the diagram (Fig. 1) in a plain frame; the wide drawing on desktop, the tall one on phones */
.diagram { padding: clamp(18px, 3.4vw, 40px); border: 1px solid var(--rule-soft); background: var(--white); }
.diagram svg { display: block; width: 100%; height: auto; }
.diagram .tall { display: none; }
.dg-box { fill: #fff; stroke: var(--rule-soft); stroke-width: 1.5; }
.dg-core { fill: var(--paper-2); stroke: var(--night); stroke-width: 1.6; }
.dg-title { fill: var(--ink); font: 600 17px var(--sans); }
.dg-core-title { fill: var(--night); font: 500 22px var(--disp); }
.dg-note { fill: var(--mut); font: 500 12.5px var(--sans); }
.dg-label { fill: var(--ac-deep); font: 500 10.5px var(--mono); letter-spacing: .02em; }
.dg-label.team { fill: var(--amber); }
.dg-line { fill: none; stroke: var(--ac); stroke-width: 1.6; }
.dg-line.team { stroke: var(--amber); }
.dg-line.loop { stroke: var(--night); stroke-dasharray: 4 5; }
.dg-head { fill: var(--ac); } .dg-head.team { fill: var(--amber); } .dg-head.loop { fill: var(--night); }

/* about: "Try to make it guess" (assets/js/about.js) in a plain frame */
.guess { border: 1px solid var(--rule-soft); background: #fff; }
.guess-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--rule-faint); background: var(--paper-2); }
.guess-head b { font-size: 13px; }
.guess-head span { color: var(--faint); font: 500 9.5px var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.guess-head span strong { color: var(--ac-deep); font-size: 12px; margin-left: 4px; }
.guess-task { margin: 0; padding: 16px 18px 12px; color: var(--ink); font: 500 13px/1.55 var(--sans); }
.guess-task code { padding: 2px 6px; border: 1px solid var(--rule-faint); border-radius: 3px; background: var(--paper-2); font: 500 12px var(--mono); }
.guess-task code.blank { border-style: dashed; border-color: var(--amber); color: var(--amber); background: var(--amberbg); }
.guess-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 18px 16px; }
.guess-btn { padding: 9px 14px; border: 1px solid var(--rule-soft); border-radius: 3px; background: #fff; color: var(--ink); font: 600 13px/1 var(--sans); cursor: pointer; transition: border-color .2s; }
.guess-btn:hover { border-color: var(--ink); }
.guess-log { min-height: 118px; padding: 12px 18px 14px; border-top: 1px solid var(--rule-faint); background: var(--paper-2); font: 400 12px/1.65 var(--mono); color: var(--mut); }
.guess-log div { animation: llin .45s var(--out) both; }
.guess-log .you { color: var(--faint); }
.guess-log .ns em { font-style: normal; color: var(--ac-deep); }
.guess-log .ns.ask em { color: var(--amber); }
.guess-log .idle { color: var(--faint); }

/* the legal pages: the reading column (legal.css adds the headings, lists and emphasis) */
.stub { max-width: 640px; margin-top: clamp(28px, 4vw, 40px); color: var(--mut); font-size: 16.5px; line-height: 1.7; }
.stub p { margin: 0 0 16px; }
.stub a { color: var(--ac-deep); font-weight: 600; }
.label { margin-bottom: 20px; color: var(--faint); font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; }

/* brand.html: the specimens */
.bgrid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule-soft); }
.bpane { display: flex; align-items: flex-end; gap: 30px; flex-wrap: wrap; padding: 36px; background: #fff; color: var(--night); }
.bpane.on-night { background: var(--night); color: #f3f5fb; }
.bpane figure { margin: 0; display: grid; gap: 10px; justify-items: start; }
.bpane figcaption { color: var(--faint); font: 500 10px var(--mono); letter-spacing: .08em; }
.bpane.on-night figcaption { color: #a3acd0; }
.bpane svg, .bpane img { display: block; fill: currentColor; }
.on-night .logo, .logo.on-night { color: #f3f5fb; }
.bspec { padding: clamp(20px, 4vw, 44px); border: 1px solid var(--rule-soft); background: #fff; }
.bspec svg { display: block; width: 100%; max-width: 620px; height: auto; margin: 0 auto; }
.bspec .ink { fill: var(--night); } .bspec .unit { fill: var(--ac); opacity: .3; }
.bspec .room { fill: var(--acbg); stroke: var(--ac); stroke-width: 1.2; stroke-dasharray: 5 4; }
.bspec .box { fill: #fff; stroke: var(--rule-soft); stroke-width: 1; }
.bdo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bdo figure { margin: 0; border: 1px solid var(--rule-soft); background: #fff; }
.bdo .art { display: grid; place-items: center; height: 132px; padding: 0 16px; overflow: hidden; }
.bdo .art.on-night { background: var(--night); }
.bdo .art .logo { font-size: 22px; }
.bdo .serif { color: var(--night); font: 500 26px var(--disp); letter-spacing: .05em; }
.bdo .art img { display: block; max-width: 100%; }
.bdo figcaption { padding: 14px 16px 16px; border-top: 1px solid var(--rule-faint); color: var(--mut); font-size: 13.5px; line-height: 1.5; }
.bdo figcaption b { display: block; margin-bottom: 4px; color: var(--ac-deep); font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.bdo .no figcaption b { color: var(--amber); }
.bfiles { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.bfiles li { display: grid; grid-template-columns: 76px minmax(0, 230px) minmax(0, 1fr); gap: 6px 22px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule-soft); color: var(--mut); font-size: 14.5px; }
.bfiles .th { display: grid; place-items: center; width: 76px; height: 52px; border: 1px solid var(--rule-faint); background: #fff; overflow: hidden; }
.bfiles .th.on-night { background: var(--night); border-color: var(--night); }
.bfiles .th img { display: block; max-width: 60px; max-height: 36px; width: auto; height: auto; }

/* discovery.html keeps its workbook styles inline; demo.html keeps its player inline. Their frames: */
.workbook-page { width: min(100% - 2 * var(--gutter), 1280px); margin: 0 auto; }
.demo-page { width: min(100% - 2 * var(--gutter), 1280px); margin: 0 auto; padding-top: clamp(24px, 3vw, 36px); }

@media (max-width: 1000px) { .bgrid { grid-template-columns: 1fr; } .bdo { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .diagram .wide { display: none; } .diagram .tall { display: block; max-width: 360px; margin: 0 auto; } }
@media (max-width: 620px) { .bpane { padding: 26px 20px; gap: 22px 28px; } .bdo { grid-template-columns: 1fr; } .bfiles li { grid-template-columns: 76px minmax(0, 1fr); } .bfiles li span:last-child { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .guess-log div { animation: none; } }

@media print { .mast, .toc, .site-foot .row a:not(.logo) { display: none; } body { background: #fff; } }