/* ==================================================================
   RULE BY DEFAULT · Major Labs Archive 001 · page styles
   Built on the approved prototype (archive-001-front-door).
   One palette only: navy ground, blue structure, yellow accent.
   The print stylesheet (the booklet PDF) is at the end of this file.
================================================================== */

/* ------------------------------------------------------------------
   TOKENS. Every color and font on the page comes from here.
   The 3D scene reads the same variables.
------------------------------------------------------------------- */
:root {
  --ink: #0b1120;            /* page ground and scene clear color */
  --ink-2: #0f172a;          /* card ground */
  --ink-3: #16213a;          /* raised dark panel */
  --art: #080d19;            /* ground behind a plate */
  --hair: rgba(148,163,184,.16);
  --accent: #e0a106;         /* amber: mass, shut doors */
  --accent-hot: #facc15;     /* yellow: glow, headline accent */
  --accent-soft: rgba(250,204,21,.14);
  --on-accent: #0b1120;
  --wire: #6ea8ff;           /* blue: wireframes, open doors, chips */
  --wire-soft: rgba(59,130,246,.18);
  --wire-line: rgba(110,168,255,.6);
  --door-light: #eaf3ff;
  --paper: #dfe3ea;          /* prose sheet */
  --paper-rgb: 223,227,234;
  --paper-hi: #eef1f6;       /* callout on the sheet */
  --paper-ink: #0f172a;
  --paper-muted: #4b5568;
  --paper-accent: #1d4ed8;   /* blue is the text accent on paper; yellow fails contrast there */
  --paper-wire: #1e3a8a;
  --paper-link: #1e3a8a;     /* links and small labels on the glass panel: darker, so they hold up when the scene behind is dark */
  --text: #e8edf6;
  --muted: #8a96ab;
  --caption: #f6e3a1;        /* italic captions on dark cards */
  --font-display: 'Marcellus', 'Times New Roman', serif;
  --font-body: 'Newsreader', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html { background: var(--ink); overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0; background: var(--ink); color: var(--text);
  font-family: var(--font-body); font-size: 19px; line-height: 1.62;
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
figure { margin: 0; }
::selection { background: var(--accent-hot); color: var(--on-accent); }
.print-only { display: none; }

/* ---------------- fixed scene ----------------
   The CSS ground below is what shows when JavaScript is off or WebGL is
   missing. When the scene runs, its canvas covers it. */
#scene {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(60% 50% at 66% 46%, var(--accent-soft), transparent 70%),
    linear-gradient(to bottom, transparent 0 46%, var(--wire-soft) 46.1%, transparent 46.4%),
    repeating-linear-gradient(90deg, transparent 0 78px, var(--wire-soft) 78px 79px),
    repeating-linear-gradient(0deg, transparent 0 78px, var(--wire-soft) 78px 79px),
    var(--ink);
}

/* ---------------- nav ---------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: 50px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 0 28px;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--hair);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
}
.brand { white-space: nowrap; text-decoration: none; }
.brand b { font-weight: 700; color: #fff; letter-spacing: .3em; }
.brand i { font-family: var(--font-body); font-style: italic; text-transform: none; letter-spacing: .06em; font-size: 14px; color: var(--muted); }
.tabs { display: flex; gap: 26px; }
.tabs a { text-decoration: none; color: var(--muted); padding: 6px 0 5px; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.tabs a:hover { color: var(--text); }
.tabs a.on { color: var(--accent-hot); border-bottom-color: var(--accent-hot); }
.tag { justify-self: end; color: var(--muted); white-space: nowrap; }

/* ---------------- layout ---------------- */
main { position: relative; z-index: 5; }
.wrap { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.mono { font-family: var(--font-mono); letter-spacing: .2em; text-transform: uppercase; font-size: 11px; }

/* ---------------- hero ---------------- */
.hero { position: relative; min-height: 100vh; padding: 92px 0 90px; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 92%, transparent) 0%, color-mix(in srgb, var(--ink) 78%, transparent) 34%, transparent 66%);
}
.hero .wrap { position: relative; width: min(1380px, calc(100% - 64px)); }
.eyebrow { display: flex; align-items: center; gap: 14px; color: var(--accent-hot); }
.eyebrow .sq {
  display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none;
  background: var(--accent); color: var(--on-accent); font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; font-weight: 600;
}
h1 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(3rem, 8.2vw, 7.4rem); line-height: .98; letter-spacing: .005em;
  margin: 26px 0 26px; color: #f4f0e8;
  text-shadow: 0 2px 30px rgba(0,0,0,.7);
}
h1 em { font-style: normal; color: var(--accent-hot); text-shadow: 0 0 34px var(--accent-soft), 0 2px 30px rgba(0,0,0,.7); }
.standfirst {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(1.02rem, 1.55vw, 1.42rem); line-height: 1.3; max-width: 33em; margin: 0 0 38px; color: #f4f0e8;
  text-shadow: 0 2px 24px rgba(0,0,0,.8);
}
.checked {
  max-width: 600px; padding: 18px 20px 20px;
  background: color-mix(in srgb, var(--ink-2) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--hair); border-left: 2px solid var(--wire);
  font-family: var(--font-mono); font-size: 13px; line-height: 1.85; color: #d9d6cf;
}
.checked .lab { background: var(--wire-soft); color: var(--wire); padding: 2px 7px; font-weight: 600; margin-right: 4px; }
.checked p { margin: 0 0 10px; } .checked p:last-child { margin: 0; color: var(--muted); }
.scrollcue { margin-top: 34px; color: var(--muted); display: flex; align-items: center; gap: 12px; }
.scrollcue::before { content: ""; width: 42px; height: 1px; background: var(--wire-line); }

/* ---------------- paper sheet ---------------- */
.sheet {
  width: min(1140px, calc(100% - 32px)); margin: 0 auto; padding: 84px 0 0;
  /* Glass, not card: clearer at the empty margins so the scene shows through, denser behind the words.
     Tune with --glass-center and --glass-edge, or live with ?glass=70 (center percent).
     Each act can carry its own center value: see the data-act rules below. */
  background: linear-gradient(90deg,
    rgba(var(--paper-rgb), var(--glass-edge, .44)) 0%,
    rgba(var(--paper-rgb), var(--glass-center, .76)) 24%,
    rgba(var(--paper-rgb), var(--glass-center, .76)) 76%,
    rgba(var(--paper-rgb), var(--glass-edge, .44)) 100%);
  -webkit-backdrop-filter: blur(9px) saturate(135%); backdrop-filter: blur(9px) saturate(135%);
  color: var(--paper-ink);
  box-shadow: 0 40px 120px rgba(0,0,0,.6);
}
.col { width: min(560px, calc(100% - 44px)); margin: 0 auto; }
.kicker { color: var(--paper-link); border-left: 2px solid var(--paper-link); padding-left: 14px; margin-bottom: 22px; }
.kicker b { font-weight: 700; margin-right: 10px; }
.ch-title {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.9rem, 3.7vw, 3.05rem); line-height: 1.04; letter-spacing: .01em;
  margin: 0 0 38px; color: var(--paper-ink); text-wrap: balance;
}
.sheet p { margin: 0 0 1.25em; }
.sheet p.lede { font-size: 1.2em; line-height: 1.5; }
.sheet p.closer { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em; font-size: 1.3em; line-height: 1.2; margin: 1.6em 0 0; color: var(--paper-link); }
.sheet a { color: var(--paper-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.frame {
  margin: 40px 0 34px; padding: 24px 26px 26px; background: var(--paper-hi);
  border-top: 2px solid var(--paper-accent); box-shadow: 0 10px 40px rgba(0,0,0,.12);
}
.frame .mono { color: var(--paper-accent); display: block; margin-bottom: 10px; }
.frame p { font-style: italic; font-weight: 600; font-size: 1.08em; line-height: 1.5; margin: 0; }
.pull {
  margin: 36px 0 34px; padding: 2px 0 2px 24px; border-left: 2px solid var(--paper-accent);
}
.pull p { font-family: var(--font-display); font-size: 1.36em; line-height: 1.24; letter-spacing: .005em; margin: 0; text-wrap: balance; }
.sheet-end { height: 84px; }

/* chapters */
.chapter { padding-top: 130px; scroll-margin-top: 0; }
.chapter .visuals { padding-top: 48px; }

.chapter .visuals.mid { padding-bottom: 48px; }
.sheet.cont { padding-top: 64px; }

/* illustration slot: full width of the sheet, 16 by 9 (4 by 3 on phones). The files are 1312 px wide and are never shown wider. */
.illus { position: relative; margin: 6px auto 52px; max-width: 1312px; }
.illus .pic { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--art); border-top: 1px solid var(--wire-line); border-bottom: 1px solid var(--wire-line); }
.illus img { display: block; width: 100%; height: 100%; object-fit: cover; }
.illus figcaption { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; padding: 12px 22px 12px; background: rgba(var(--paper-rgb), .5); }
.illus figcaption i { font-size: 16px; color: var(--paper-ink); max-width: 46em; }
.illus figcaption .mono { color: var(--paper-muted); font-size: 10.5px; }
.tagchip {
  position: absolute; top: 10px; left: 10px; z-index: 2; padding: 5px 9px;
  background: color-mix(in srgb, var(--ink) 82%, transparent); border: 1px solid var(--hair);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #d8d5cd;
}

/* contents: rows that carry text edge to edge get an extra ground */
.contents-sec { padding-top: 40px; }
.contents { background: rgba(var(--paper-rgb), .5); padding-top: 22px; }
.contents-sec .sheet { padding-top: 0; }
.contents > .mono { display: block; color: var(--paper-link); padding: 0 22px 22px; line-height: 1.9; }
.toc { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(0,0,0,.18); }
.toc a {
  display: grid; grid-template-columns: 50px 96px 1fr auto; gap: 18px; align-items: center;
  padding: 14px 22px; border-bottom: 1px solid rgba(0,0,0,.14); text-decoration: none; color: var(--paper-ink);
  transition: background .2s;
}
.toc a:hover { background: rgba(255,255,255,.35); }
.toc .n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: var(--paper-muted); }
.toc .th { width: 96px; height: 54px; background: var(--ink-2); border: 1px solid rgba(0,0,0,.4); display: block; }
.toc .th svg { width: 100%; height: 100%; display: block; }
.toc h3 { font-family: var(--font-display); text-transform: uppercase; font-weight: 400; font-size: 21px; letter-spacing: .02em; line-height: 1.15; margin: 0; }
.toc p { margin: 3px 0 0; font-size: 17px; line-height: 1.35; color: #3c3a36; }
.chip {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
  padding: 5px 9px; border: 1px solid var(--paper-wire); color: var(--paper-wire);
}

/* ---------------- evidence cards ---------------- */
.visuals { width: min(1180px, calc(100% - 32px)); margin: 0 auto; display: grid; gap: 20px; }
.vrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.vrow.solo, .vrow.wide { grid-template-columns: minmax(0, 1fr); }
.card {
  position: relative; margin: 0; display: flex; flex-direction: column; min-width: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink-2) 96%, transparent), color-mix(in srgb, var(--ink-3) 92%, transparent));
  border: 1px solid var(--hair); box-shadow: 0 24px 70px rgba(0,0,0,.55);
  scroll-margin-top: 80px;
}
.card .art { position: relative; border-bottom: 1px solid var(--hair); background: var(--art); min-width: 0; }
.vrow.pair .card .art { aspect-ratio: 4 / 3; }
.card .art > svg { display: block; width: 100%; height: 100%; }
.card .body { padding: 20px 22px 22px; }
.card h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 21px; line-height: 1.15; letter-spacing: .02em; margin: 0 0 10px; color: #f6f2ea; }
.card h3 code { font-family: var(--font-mono); font-size: 12px; color: var(--accent-hot); text-transform: none; margin-left: 6px; letter-spacing: .02em; white-space: nowrap; }
.card .cap { font-style: italic; font-size: 17.5px; line-height: 1.48; color: var(--caption); margin: 0 0 14px; }
.card .prov { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; line-height: 1.6; color: var(--muted); margin: 0; }
/* a single card in a row lies on its side: plate left, words right */
.vrow.solo .card { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); }
.vrow.solo .card .art { border-bottom: 0; border-right: 1px solid var(--hair); aspect-ratio: 4 / 3; }
.vrow.solo .card .body { align-self: center; padding: 26px 30px; }
/* words set as a plate take the height they need */
.vrow.solo .card .art:has(.doc), .vrow.solo .card .art:has(.codeplate) { aspect-ratio: auto; }

/* svg text styles used inside plates */
.art text { font-family: var(--font-mono); fill: #cfccc4; font-size: 11px; }
.art text.sm { font-size: 9px; }
.art text.dim { fill: var(--muted); }
.art text.hot { fill: var(--accent-hot); }
.art text.acc { fill: var(--accent); }
.art text.cool { fill: var(--wire); }
.art text.lite { fill: var(--door-light); }
.art text.big { font-family: var(--font-display); font-size: 40px; }
.art text.num { font-size: 15px; font-weight: 600; }
.art .f-hot { fill: var(--accent-hot); } .art .f-acc { fill: var(--accent); } .art .f-cool { fill: var(--wire); } .art .f-lite { fill: var(--door-light); }
.art .f-dim { fill: rgba(255,255,255,.1); } .art .f-mid { fill: rgba(255,255,255,.3); }
.art .s-cool { stroke: var(--wire); fill: none; } .art .s-hot { stroke: var(--accent-hot); fill: none; } .art .s-acc { stroke: var(--accent); fill: none; } .art .s-dim { stroke: rgba(255,255,255,.14); fill: none; }

/* document plates: words re-typeset as plates, with the source underneath */
.doc {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 22px; overflow: hidden;
  width: 100%; height: 100%; min-height: 300px; padding: 62px 30px 28px;
  background:
    radial-gradient(90% 80% at 12% 0%, var(--accent-soft), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(255,255,255,.028) 31px 32px),
    var(--ink-2);
  color: var(--text);
}
.doc .mark { position: absolute; top: 18px; right: 24px; font-family: var(--font-display); font-size: 84px; line-height: .8; color: var(--accent-hot); opacity: .9; }
.doc blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(21px, 2.1vw, 27px); line-height: 1.22; letter-spacing: .01em; color: #f6f3ec; text-wrap: balance; }
.doc blockquote em { font-style: normal; color: var(--accent-hot); }
.doc cite { display: block; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--wire-line); font-style: normal; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; line-height: 1.6; text-transform: uppercase; color: var(--wire); }
.doc.long blockquote { font-size: clamp(17px, 1.55vw, 20px); line-height: 1.32; text-wrap: pretty; }
.doc.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; align-items: start; padding: 66px 40px 36px; }
.doc.two > div + div { border-left: 1px solid var(--hair); padding-left: 44px; }
.doc .lab { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.doc.two blockquote + blockquote { margin-top: 16px; }

/* code plate */
.codeplate {
  width: 100%; height: 100%; min-height: 300px; display: flex; flex-direction: column; justify-content: center; padding: 62px 30px 28px;
  background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(255,255,255,.028) 31px 32px), var(--ink-2);
  font-family: var(--font-mono); color: #d9d6cf;
}
.codeplate .lab { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.codeplate .head { font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; color: #f6f3ec; margin: 0 0 8px; }
.codeplate .gap { color: var(--muted); font-size: 12px; margin: 0 0 22px; padding: 10px 0; border-top: 1px dashed var(--hair); border-bottom: 1px dashed var(--hair); }
.codeplate .say { font-size: 13px; margin: 0 0 8px; }
.codeplate pre { margin: 0 0 12px; padding: 14px 16px; background: var(--art); border: 1px solid var(--wire-line); border-left: 2px solid var(--accent-hot); color: var(--accent-hot); font-family: var(--font-mono); font-size: clamp(11.5px, 1.1vw, 14px); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.codeplate cite { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--wire-line); font-style: normal; font-size: 10.5px; letter-spacing: .18em; line-height: 1.6; text-transform: uppercase; color: var(--wire); }

/* the wide drawn plate */
.vrow.wide .card .art { aspect-ratio: auto; }
.exchange {
  position: relative; display: grid; grid-template-columns: 1.25fr auto 1fr; align-items: center; gap: clamp(16px, 3vw, 44px);
  min-height: 400px; padding: clamp(54px, 5vw, 64px) clamp(22px, 4vw, 54px) clamp(30px, 4vw, 54px); overflow: hidden;
  background:
    radial-gradient(60% 90% at 86% 50%, var(--accent-soft), transparent 72%),
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(255,255,255,.03) 63px 64px),
    var(--ink-2);
  color: var(--text);
}
.exchange.even { grid-template-columns: 1fr auto 1fr; background:
    radial-gradient(50% 90% at 14% 50%, var(--accent-soft), transparent 72%),
    radial-gradient(50% 90% at 86% 50%, var(--wire-soft), transparent 72%),
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(255,255,255,.03) 63px 64px),
    var(--ink-2); }
.exchange .corner { position: absolute; width: 14px; height: 14px; border: solid var(--accent-hot); border-width: 0; }
.exchange .corner.tr { top: 8px; right: 8px; border-top-width: 2px; border-right-width: 2px; }
.exchange .corner.bl { bottom: 8px; left: 8px; border-bottom-width: 2px; border-left-width: 2px; }
.exchange .corner.br { bottom: 8px; right: 8px; border-bottom-width: 2px; border-right-width: 2px; }
.exchange .lab { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.exchange pre { margin: 0; font-family: var(--font-mono); font-size: clamp(11px, 1.25vw, 15px); line-height: 1.7; color: var(--wire); white-space: pre-wrap; overflow-wrap: anywhere; }
.exchange pre b { color: #f6f3ec; font-weight: 600; }
.exchange blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(19px, 2vw, 26px); line-height: 1.24; color: #f6f3ec; text-wrap: balance; }
.exchange .arrow { width: clamp(30px, 6vw, 90px); height: 1px; background: var(--wire-line); position: relative; }
.exchange .arrow::after { content: ""; position: absolute; right: 0; top: -4px; border-left: 8px solid var(--wire); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.exchange .versus { align-self: stretch; display: grid; place-items: center; border-left: 1px solid var(--wire-line); border-right: 1px solid var(--wire-line); padding: 0 clamp(10px, 1.6vw, 22px); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); text-align: center; line-height: 1.9; }
.exchange .code { font-family: var(--font-mono); font-weight: 700; font-size: clamp(54px, 9vw, 128px); line-height: .9; color: var(--accent-hot); text-shadow: 0 0 40px var(--accent-soft); }
.exchange .code.cool { color: var(--wire); text-shadow: 0 0 40px var(--wire-soft); }
.exchange .code small { font-size: .3em; font-weight: 500; letter-spacing: .08em; color: var(--muted); text-shadow: none; white-space: nowrap; }
.exchange .word { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(15px, 1.9vw, 24px); line-height: 1.2; letter-spacing: .04em; color: #f6f3ec; margin-top: 14px; text-wrap: balance; }
.exchange .word.s { font-size: clamp(14px, 1.45vw, 19px); }

/* tables inside cards */
.tablewrap { padding: 56px 22px 22px; }
.card table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; color: #d7d4cc; }
.card th, .card td { padding: 11px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); font-weight: 400; }
.card thead th { color: var(--muted); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.card td.n { color: var(--wire); font-weight: 600; white-space: nowrap; }
.card td.base { color: var(--accent-hot); font-weight: 600; white-space: nowrap; }
.card td.when { white-space: nowrap; color: #d7d4cc; }
.card td.pred { width: 58%; font-family: var(--font-body); font-size: 17px; line-height: 1.42; color: #ece8df; }
.card td.pred b { font-weight: 600; color: #fff; }
.card td.who { font-family: var(--font-display); text-transform: uppercase; font-size: 17px; letter-spacing: .03em; color: #f6f2ea; white-space: nowrap; }
.card td.what { font-family: var(--font-body); font-size: 16.5px; line-height: 1.4; color: #ece8df; }
.card td.said { font-family: var(--font-body); font-size: 16.5px; line-height: 1.4; color: var(--caption); }
.card td.said q { quotes: '\201C' '\201D'; font-style: italic; }
.card td.said small { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; line-height: 1.5; color: var(--muted); font-style: normal; }
.card tr.kept td { background: rgba(250,204,21,.06); }
.card tr.kept td.who, .card tr.kept td.n { color: var(--accent-hot); }
.card tr.rule td { padding: 12px 12px 8px; border-bottom: 0; color: var(--accent-hot); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }

/* ---------------- dark panels: method, sources ---------------- */
.dark {
  width: min(1140px, calc(100% - 32px)); margin: 80px auto 0; padding: 64px clamp(22px, 5vw, 70px) 66px;
  background: color-mix(in srgb, var(--ink-2) 90%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--hair); border-top: 2px solid var(--wire);
  box-shadow: 0 40px 120px rgba(0,0,0,.6);
}
.panel-sec { padding-top: 50px; }
.dark > .mono { color: var(--wire); display: block; margin-bottom: 14px; }
.dark h2 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.05; margin: 0; color: #f4f0e8;
  text-shadow: 0 2px 24px rgba(0,0,0,.8);
}
.dark .intro { max-width: 640px; color: #d9d6cf; margin: 18px 0 40px; }
.cols2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 44px; }
.cols2 h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; color: var(--accent-hot); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
.cols2 p { margin: 0; font-size: 17px; line-height: 1.5; color: #d9d6cf; }
.srcs { list-style: none; margin: 30px 0 0; padding: 0; counter-reset: s; columns: 2 380px; column-gap: 40px; }
.srcs li { break-inside: avoid; position: relative; padding: 11px 0 11px 40px; border-bottom: 1px solid var(--hair); font-size: 17px; line-height: 1.4; }
.srcs li::before { counter-increment: s; content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 14px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.srcs a { text-decoration: none; border-bottom: 1px solid var(--wire-line); }
.srcs a:hover { color: var(--wire); }
.srcs span { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* closing question */
.closing { width: min(900px, calc(100% - 44px)); margin: 0 auto; padding: 120px 0 0; text-align: center; }
.closing p { margin: 0; font-style: italic; font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.25; color: #f4f0e8; text-shadow: 0 2px 24px rgba(0,0,0,.9); text-wrap: balance; }
.closing::before { content: ""; display: block; width: 42px; height: 1px; margin: 0 auto 30px; background: var(--accent-hot); }

/* ---------------- booklet gate ---------------- */
.gate { padding: 120px 0 120px; }
.gate-card {
  width: min(980px, calc(100% - 32px)); margin: 0 auto; display: grid; grid-template-columns: 360px 1fr;
  background: rgba(var(--paper-rgb), .94); color: var(--paper-ink);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  box-shadow: 0 50px 140px rgba(0,0,0,.7);
}
.cover { position: relative; background: var(--ink-2); padding: 34px; display: grid; place-items: center; overflow: hidden; }
.cover::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 60% at 50% 60%, var(--accent-soft), transparent 70%); }
.book {
  position: relative; width: 236px; aspect-ratio: 210 / 297; background: var(--ink); color: var(--text);
  border: 1px solid var(--hair); border-left: 5px solid var(--accent);
  box-shadow: 14px 18px 0 -6px rgba(0,0,0,.55), 0 30px 60px rgba(0,0,0,.7);
  transform: rotate(-3.5deg); padding: 18px 16px; display: flex; flex-direction: column; overflow: hidden;
}
.book .mono { font-size: 8.5px; color: var(--muted); position: relative; }
.book img { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 56%; object-fit: cover; object-position: 50% 100%; opacity: .95; }
.book b { position: relative; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 30px; line-height: 1; color: #f4f0e8; margin-top: 12px; }
.book b em { font-style: normal; color: var(--accent-hot); }
.book .sp { flex: 1; }
.gate-copy { padding: 52px clamp(24px, 5vw, 58px) 50px; min-width: 0; }
.gate-copy .mono { color: var(--paper-accent); }
.gate-copy h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.04; margin: 14px 0 18px; }
.gate-copy p { margin: 0 0 22px; }
.gate-copy ul { margin: 0 0 26px; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--paper-muted); }
.gate-copy li { padding: 7px 0; border-top: 1px solid rgba(0,0,0,.14); display: flex; justify-content: space-between; gap: 14px; }
.gate-copy li b { font-weight: 600; color: var(--paper-ink); text-align: right; }
form.sub { position: relative; display: flex; gap: 0; border: 1px solid var(--paper-ink); background: rgba(255,255,255,.45); }
form.sub input[type="email"] {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 16px 16px; color: var(--paper-ink); color-scheme: light;
  font-family: var(--font-mono); font-size: 13.5px; outline: none;
}
form.sub input::placeholder { color: #7a766d; }
form.sub button {
  border: 0; background: var(--paper-ink); color: var(--paper); padding: 0 22px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  transition: background .2s;
}
form.sub button:hover, form.sub button:focus-visible { background: var(--paper-accent); }
form.sub button[disabled] { opacity: .6; cursor: default; }
form.sub:focus-within { outline: 2px solid var(--paper-accent); outline-offset: 2px; }
.fine { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--paper-muted); margin: 14px 0 0 !important; line-height: 1.6; }
.done, .local-note { display: none; margin-top: 16px; padding: 14px 16px; border-left: 2px solid var(--paper-accent); background: var(--paper-hi); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65; }
.done.show, .local-note.show { display: block; }
.done.error { border-left-color: #b45309; }
.local-note b { display: block; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-accent); margin-bottom: 6px; }
.local-note a { color: var(--paper-accent); }

footer { position: relative; z-index: 5; padding: 0 16px 70px; text-align: center; color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; line-height: 2.1; }
footer span { background: color-mix(in srgb, var(--ink) 80%, transparent); padding: 4px 10px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
footer .local { letter-spacing: .18em; text-transform: uppercase; font-size: 10.5px; }

/* ---------------- progress dots ---------------- */
.dots { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 15; display: flex; flex-direction: column; gap: 15px; align-items: center; }
.dots::before { content: ""; position: absolute; top: 4px; bottom: 4px; width: 1px; background: var(--hair); }
.dots a { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #55607a; transition: background .2s, box-shadow .2s, transform .2s; }
.dots a.on { background: var(--accent-hot); box-shadow: 0 0 14px 2px var(--accent-hot); transform: scale(1.25); }
.dots a span { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); white-space: nowrap; opacity: 0; pointer-events: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text); background: var(--ink-2); padding: 4px 8px; border: 1px solid var(--hair); transition: opacity .2s; }
.dots a:hover span, .dots a:focus-visible span { opacity: 1; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--wire); outline-offset: 3px; }

/* scene alone, for cover art and stills (?clean=1) */
html.clean main, html.clean header.nav, html.clean .dots, html.clean footer { display: none !important; }
html.clean, html.clean body { height: 100%; overflow: hidden; }

/* ---------------- small screens ---------------- */
@media screen and (max-width: 1080px) {
  .tabs { gap: 18px; }
  .nav { letter-spacing: .16em; }
}
@media screen and (max-width: 980px) {
  .tabs { display: none; }
  .nav { grid-template-columns: 1fr auto; padding: 0 16px; }
  .cols2 { grid-template-columns: 1fr; }
  .gate-card { grid-template-columns: 1fr; }
  .cover { padding: 40px 20px 30px; }
  .vrow.solo .card { grid-template-columns: minmax(0, 1fr); }
  .vrow.solo .card .art { border-right: 0; border-bottom: 1px solid var(--hair); }
  .vrow.solo .card .body { padding: 20px 22px 22px; }
}
@media screen and (max-width: 760px) {
  .vrow { grid-template-columns: minmax(0, 1fr); }
  .exchange, .exchange.even { grid-template-columns: 1fr; min-height: 0; gap: 22px; }
  .exchange .arrow { display: none; }
  .exchange .versus { border: 0; border-top: 1px solid var(--wire-line); border-bottom: 1px solid var(--wire-line); padding: 8px 0; }
  .exchange .versus br { display: none; }
  .doc.two { grid-template-columns: 1fr; gap: 26px; padding: 62px 24px 28px; }
  .doc.two > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); padding-top: 24px; }
  .vrow.pair .card .art:has(.doc), .vrow.solo .card .art:has(.doc), .vrow.solo .card .art:has(.codeplate) { aspect-ratio: auto; }
  .doc, .codeplate { min-height: 260px; }
  /* tables stack: each row becomes a block */
  .card table, .card tbody, .card tr, .card td { display: block; }
  .card thead { display: none; }
  .card tr { padding: 14px 0; border-bottom: 1px solid var(--hair); }
  .card td { padding: 2px 0; border: 0; white-space: normal !important; width: auto !important; }
  .card td[data-l]::before { content: attr(data-l) " "; font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin-right: 6px; }
  .card tr.rule { padding: 14px 0 0; border: 0; }
  .tablewrap { padding: 52px 18px 12px; }
}
@media screen and (max-width: 640px) {
  body { font-size: 18px; }
  .nav { font-size: 9.5px; letter-spacing: .14em; }
  .brand i { display: none; }
  .hero { padding: 84px 0 70px; }
  .hero::before { background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 93%, transparent) 0%, color-mix(in srgb, var(--ink) 88%, transparent) 62%, color-mix(in srgb, var(--ink) 40%, transparent) 100%); }
  .hero .wrap { width: calc(100% - 32px); }
  .eyebrow { font-size: 9.5px; letter-spacing: .14em; gap: 10px; }
  h1 { font-size: clamp(2.6rem, 14.5vw, 4rem); margin: 22px 0 20px; }
  .standfirst { font-size: 1rem; margin-bottom: 28px; }
  .checked { font-size: 12px; padding: 14px; }
  .sheet { padding-top: 54px; background: rgba(var(--paper-rgb), var(--glass-center, .8)); }
  .chapter { padding-top: 84px; }
  .illus .pic { aspect-ratio: 4 / 3; }
  .illus figcaption { padding: 10px 16px 10px; }
  .toc a { grid-template-columns: 28px 1fr; gap: 6px 12px; padding: 14px 16px; }
  .toc .th { display: none; }
  .toc .chip { grid-column: 2; justify-self: start; }
  .toc h3 { font-size: 19px; }
  .contents > .mono { padding: 0 16px 18px; }
  .dark { margin-top: 56px; padding-top: 46px; padding-bottom: 46px; }
  form.sub { flex-direction: column; }
  form.sub button { padding: 16px; }
  .dots { display: none; }
  .closing { padding-top: 84px; }
  .gate { padding: 90px 0 80px; }
  footer { padding: 0 16px 50px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ==================================================================
   PRINT: the booklet PDF. A4, a cover page with no margin, body pages
   with margins. Every shadow, filter and blend mode is switched off,
   because macOS Preview draws blurred shadows as solid dark rectangles.
================================================================== */
@page { size: A4; margin: 15mm 14mm 16mm; }
@page cover { size: A4; margin: 0; }
@media print {
  *, *::before, *::after {
    text-shadow: none !important; box-shadow: none !important; filter: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; mix-blend-mode: normal !important;
    transition: none !important; animation: none !important;
  }
  html, body { background: #fff !important; overflow: visible !important; }
  body { font-size: 11.5pt; line-height: 1.5; color: #10131c; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #scene, header.nav, .dots, .scrollcue, form.sub, .done, .local-note, footer, .sheet-end, .screen-only { display: none !important; }
  .print-only { display: block; }
  main { display: block; }
  a { color: inherit; text-decoration: none; }
  section { padding: 0 !important; margin: 0 !important; }

  /* cover: the street still fills the page, with a solid navy band behind the title block */
  .hero { page: cover; position: relative; height: 297mm; min-height: 0; padding: 0 !important; overflow: hidden; break-after: page;
    background: var(--ink) url("print/cover.jpg") center bottom / cover no-repeat; }
  .hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: auto; height: 178mm; background: var(--ink); border-bottom: 0.4mm solid var(--accent-hot); }
  .hero .wrap { position: relative; width: auto; margin: 0; padding: 20mm 18mm 0; }
  .hero .print-brand { font-family: var(--font-mono); font-size: 8.5pt; letter-spacing: .3em; text-transform: uppercase; color: #fff; margin-bottom: 14mm; }
  .hero .print-brand i { font-family: var(--font-body); font-style: italic; letter-spacing: .02em; text-transform: none; color: var(--muted); font-size: 11pt; }
  .eyebrow { font-size: 7.6pt; }
  h1 { font-size: 50pt; line-height: 1; margin: 7mm 0 6mm; }
  .standfirst { font-size: 11.5pt; line-height: 1.3; max-width: 150mm; margin: 0 0 8mm; }
  .checked { max-width: 150mm; font-size: 7.9pt; line-height: 1.6; background: var(--ink-2); padding: 4mm 5mm; }
  .checked p { margin: 0 0 2mm; }
  .hero .print-foot { position: absolute; left: 18mm; right: 18mm; bottom: 12mm; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 7.5pt; letter-spacing: .2em; text-transform: uppercase; color: #e8edf6; }
  .hero .print-foot span { background: var(--ink); padding: 1.2mm 2.4mm; }

  /* prose */
  .sheet { width: auto; margin: 0; padding: 0; background: none !important; color: #10131c; }
  .contents, .illus figcaption { background: none !important; padding-top: 0; }
  .sheet .col { width: auto; max-width: 132mm; margin: 0 auto; }
  .sheet p { orphans: 3; widows: 3; }
  .sheet p.lede { font-size: 13pt; line-height: 1.38; }
  .sheet p.closer { font-size: 14pt; break-before: avoid; }
  .kicker { margin-bottom: 4mm; font-size: 7.6pt; }
  .ch-title { font-size: 25pt; margin: 0 0 7mm; break-after: avoid; }
  .frame { break-inside: avoid; background: #eef1f6; margin: 7mm 0 6mm; padding: 5mm 6mm; }
  .pull { break-inside: avoid; margin: 7mm 0 6mm; padding-left: 6mm; }
  .pull p { font-size: 15pt; }

  /* A chapter starts on a new page only when less than about half a page is left.
     The spacer cannot be split, so it moves to the next page when it does not fit,
     and the negative margin lets the chapter head sit on top of it. */
  .chapter { padding: 0 !important; }
  .chapter .need { display: block; height: 150mm; margin-bottom: -150mm; break-inside: avoid; }
  .chapter.has-still .need { height: 262mm; margin-bottom: -262mm; }
  .chapter .head { padding-top: 10mm; break-inside: avoid; break-after: avoid; }
  .chapter.has-still .head { padding-top: 0; }
  .kicker { break-after: avoid; }
  .visuals.mid { padding-bottom: 7mm !important; }
  .contents-sec .sheet, .chapter .sheet { break-before: auto; }

  /* contents */
  .contents > .mono { padding: 0 0 4mm; font-size: 7.6pt; }
  .toc a { padding: 2.4mm 0; break-inside: avoid; grid-template-columns: 9mm 21mm 1fr auto; gap: 4mm; }
  .toc .th { width: 19mm; height: 10.7mm; }
  .toc h3 { font-size: 12pt; margin: 0; }
  .toc p { font-size: 9.6pt; margin: 0; line-height: 1.3; }
  .chip { font-size: 6.6pt; padding: 1mm 2mm; }
  .contents-sec { break-after: page; }

  /* illustrations and scene stills */
  .illus, .still { break-inside: avoid; margin: 0 0 7mm; }
  .illus .pic, .still .pic { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 0.2mm solid var(--wire); background: var(--art); }
  .still .pic { aspect-ratio: 2 / 1; }
  .still img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .illus figcaption, .still figcaption { display: flex; justify-content: space-between; gap: 6mm; padding: 2mm 0 0; }
  .illus figcaption i, .still figcaption i { font-size: 9.6pt; color: #10131c; }
  .illus figcaption .mono, .still figcaption .mono { font-size: 6.6pt; color: #4b5568; letter-spacing: .14em; }
  .tagchip { font-size: 6.4pt; padding: 1mm 2mm; top: 2.4mm; left: 2.4mm; background: var(--ink); }

  /* cards: dark, kept whole, two to a row */
  .visuals { width: auto; margin: 0; padding: 5mm 0 0 !important; display: block; }
  .vrow, .vrow.pair, .vrow.solo, .vrow.wide { break-inside: avoid; gap: 5mm; margin: 0 0 5mm; grid-template-columns: 1fr; }
  .vrow.pair { break-inside: auto; }
  .card { break-inside: avoid; background: var(--ink-2); border: 0.2mm solid rgba(110,168,255,.45); }
  .vrow.solo .card, .vrow.pair .card { display: grid; grid-template-columns: 55fr 45fr; }
  .vrow.solo .card .art, .vrow.pair .card .art { border-right: 0.2mm solid rgba(110,168,255,.3); border-bottom: 0; aspect-ratio: 4 / 3; }
  .vrow.solo .card .art:has(.doc), .vrow.solo .card .art:has(.codeplate), .vrow.pair .card .art:has(.doc) { aspect-ratio: auto; }
  .vrow.pair .card .body { align-self: center; }
  .card .body { padding: 5mm; }
  .vrow.solo .card .body, .vrow.pair .card .body { padding: 6mm 7mm; }
  .card h3 { font-size: 12.5pt; margin-bottom: 2.4mm; }
  .card h3 code { font-size: 7.4pt; }
  .card .cap { font-size: 9.8pt; line-height: 1.4; margin-bottom: 3mm; }
  .card .prov { font-size: 6.6pt; }
  .doc, .codeplate { min-height: 0; padding: 15mm 6mm 6mm; gap: 4mm; }
  .doc blockquote { font-size: 14pt; }
  .doc.long blockquote { font-size: 10.6pt; line-height: 1.3; }
  .doc .mark { font-size: 40pt; top: 4mm; right: 5mm; }
  .doc cite, .codeplate cite { font-size: 6.4pt; margin-top: 2.4mm; padding-top: 2mm; }
  .doc .lab, .codeplate .lab, .exchange .lab { font-size: 6.6pt; margin-bottom: 2.4mm; }
  .doc.two { padding: 15mm 8mm 8mm; gap: 0 8mm; }
  .doc.two > div + div { padding-left: 8mm; }
  .codeplate .head { font-size: 15pt; margin-bottom: 2mm; }
  .codeplate .gap { font-size: 7.4pt; margin-bottom: 4mm; padding: 2mm 0; }
  .codeplate .say { font-size: 8.4pt; margin-bottom: 2mm; }
  .codeplate pre { font-size: 7.6pt; padding: 3mm; margin-bottom: 3mm; }
  .exchange { min-height: 50mm; padding: 13mm 10mm 7mm; gap: 8mm; }
  .exchange pre { font-size: 8.4pt; }
  .exchange blockquote { font-size: 13pt; }
  .exchange .code { font-size: 58pt; }
  .exchange .word { font-size: 11.5pt; margin-top: 3mm; }
  .exchange .word.s { font-size: 10pt; }
  .exchange .versus { font-size: 6.6pt; padding: 0 4mm; }
  .tablewrap { padding: 12mm 5mm 3mm; }
  .card table { font-size: 7.6pt; }
  .card th, .card td { padding: 2.1mm 2.4mm; }
  .card thead th { font-size: 6.4pt; }
  .card td.pred, .card td.what, .card td.said { font-size: 9.6pt; line-height: 1.34; }
  .card td.who { font-size: 10pt; }
  .card td.said small { font-size: 6.2pt; }
  .card tr { break-inside: avoid; }
  .card td.pred { width: 60%; }
  .card td.when { white-space: normal; }
  .card tr.rule td { font-size: 6.4pt; padding: 2.6mm 2.4mm 1.4mm; }

  /* method, sources */
  .panel-sec { break-before: page; }
  .dark { width: auto; margin: 0; padding: 7mm 8mm; color: #e8edf6; background: var(--ink-2); border: 0; border-top: 0.6mm solid var(--wire); }
  .dark > .mono { font-size: 7.6pt; margin-bottom: 3mm; }
  .dark h2 { font-size: 20pt; }
  .dark .intro { font-size: 10.5pt; margin: 3mm 0 7mm; }
  .cols2 { gap: 7mm 8mm; }
  .cols2 h4 { font-size: 7.4pt; margin-bottom: 3mm; padding-bottom: 2mm; }
  .cols2 p { font-size: 9.8pt; line-height: 1.42; }
  /* a grid, read across, so the list can run over a page end between rows */
  .srcs { columns: auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 7mm; margin-top: 2mm; }
  .srcs li { min-width: 0; }
  #sources .dark { padding-top: 6mm; padding-bottom: 5mm; }
  #sources .dark h2 { font-size: 17pt; }
  .srcs li { font-size: 8.2pt; line-height: 1.18; padding: .45mm 0 .45mm 7mm; }
  .srcs li::before { top: .9mm; font-size: 6.6pt; }
  .srcs span { font-size: 5.6pt; line-height: 1.3; }
  .srcs a { display: block; border-bottom: 0 !important; }
  .srcs a::after { content: attr(href); display: block; font-family: var(--font-mono); font-size: 5.2pt; letter-spacing: 0; line-height: 1.22; color: var(--wire); word-break: break-all; }

  /* closing question and back page */
  .closing { break-before: page; width: auto; padding: 46mm 0 0 !important; }
  .closing p { color: #10131c; font-size: 22pt; }
  .gate { padding: 22mm 0 0 !important; }
  .gate-card { width: auto; grid-template-columns: 58mm 1fr; background: #e6e9ef; break-inside: avoid; }
  .gate-copy { padding: 9mm; }
  .gate-copy h2 { font-size: 18pt; margin: 3mm 0 4mm; }
  .gate-copy p { font-size: 10.4pt; margin: 0 0 4mm; }
  .gate-copy ul { font-size: 8pt; margin: 0 0 5mm; }
  .gate-copy .fine { display: none !important; }
  .gate-copy .disclaimer { font-family: var(--font-mono); font-size: 7.4pt; line-height: 1.6; color: var(--paper-muted); margin: 0; }
  .cover { padding: 8mm; }
  .book { width: 42mm; padding: 4mm 3.5mm; transform: none; }
  .book b { font-size: 13pt; margin-top: 2mm; }
  .book .mono { font-size: 5pt; }
}