/* ============================================================
   Editorial spec — flat ink-on-paper. No glass, no gradients,
   no blur, no particles. Hairline rules, disciplined grid,
   one deliberate red accent (editorial markup).
   ============================================================ */
:root {
  --paper: #FAFAF8;
  --paper-2: #F1EFE9;
  --ink: #1A1815;
  --ink-2: #46433D;
  --muted: #6B675F;
  --faint: #767268;
  --rule: rgba(26, 24, 21, 0.16);
  --rule-strong: rgba(26, 24, 21, 0.32);
  --accent: #C6362A;
  --accent-soft: rgba(198, 54, 42, 0.09);
  --ok: #3B7A4B;
  --display: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif;
  --body: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --maxw: 820px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #151412; --paper-2: #1D1B18; --ink: #ECEAE3; --ink-2: #B8B4AB;
    --muted: #928D82; --faint: #847F74; --rule: rgba(236,234,227,0.15);
    --rule-strong: rgba(236,234,227,0.30); --accent: #E5604D;
    --accent-soft: rgba(229,96,77,0.12); --ok: #6BAF7A; color-scheme: dark;
  }
}
:root[data-theme="light"] {
  --paper:#FAFAF8; --paper-2:#F1EFE9; --ink:#1A1815; --ink-2:#46433D; --muted:#6B675F;
  --faint:#767268; --rule:rgba(26,24,21,0.16); --rule-strong:rgba(26,24,21,0.32);
  --accent:#C6362A; --accent-soft:rgba(198,54,42,0.09); --ok:#3B7A4B; color-scheme: light;
}
:root[data-theme="dark"] {
  --paper:#151412; --paper-2:#1D1B18; --ink:#ECEAE3; --ink-2:#B8B4AB; --muted:#928D82;
  --faint:#847F74; --rule:rgba(236,234,227,0.15); --rule-strong:rgba(236,234,227,0.30);
  --accent:#E5604D; --accent-soft:rgba(229,96,77,0.12); --ok:#6BAF7A; color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink-2);
  font-family: var(--body); font-size: 18px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px 120px; }

/* ---- document top bar ---- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 28px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--muted);
  background: var(--paper); border-bottom: 1px solid var(--rule);
}
.topbar .doc-id { color: var(--ink); }
.topbar .dot { color: var(--faint); padding: 0 7px; }
.toggle {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink); background: none; border: 1px solid var(--rule-strong); border-radius: 2px;
  padding: 6px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  transition: border-color .15s ease, color .15s ease;
}
.toggle:hover { border-color: var(--accent); color: var(--accent); }
.toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- reveals (subtle) ---- */
.rise { opacity: 0; transform: translateY(12px); }
.in .rise { animation: rise .6s cubic-bezier(.22,.61,.36,1) forwards; }
.in .rise.d1 { animation-delay: .04s; } .in .rise.d2 { animation-delay: .12s; }
.in .rise.d3 { animation-delay: .20s; } .in .rise.d4 { animation-delay: .30s; }
.in .rise.d5 { animation-delay: .40s; } .in .rise.d6 { animation-delay: .50s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---- cover ---- */
.cover { padding: 64px 0 8px; }
.kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.kicker b { color: var(--accent); font-weight: 600; }
.kicker .dot { color: var(--faint); }
.metaline { font-family: var(--mono); font-size: 12px; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 3px 0; align-items: center;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 12px 0; margin: 22px 0 30px; }
.metaline span { color: var(--ink); }
.metaline .k { color: var(--muted); padding-left: 16px; text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; }
.metaline .k:first-child { padding-left: 0; }

h1.title { font-family: var(--display); font-weight: 800; font-size: clamp(3.3rem, 9.5vw, 6.6rem);
  line-height: 0.9; letter-spacing: -0.038em; margin: 6px 0 0; color: var(--ink); text-wrap: balance; }
h1.title .u { color: var(--accent); }
.draw { display: block; height: 4px; width: 128px; margin-top: 26px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; }
.in .draw { animation: draw .7s .35s cubic-bezier(.6,0,.15,1) forwards; }
@keyframes draw { to { transform: scaleX(1); } }

.thesis { font-family: var(--body); font-size: clamp(1.15rem, 2.4vw, 1.4rem); color: var(--ink-2);
  max-width: 62ch; margin: 28px 0 0; line-height: 1.55; }
.thesis em { font-style: normal; color: var(--ink); box-shadow: inset 0 -0.5em 0 var(--accent-soft); }

.status-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.pill { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 6px 11px; border: 1px solid var(--rule-strong); border-radius: 2px; background: none;
  display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.pill .led { width: 6px; height: 6px; border-radius: 0; background: var(--muted); transform: rotate(45deg); }
.pill.hot { border-color: var(--accent); color: var(--ink); }
.pill.hot .led { background: var(--accent); }
.statusval { transition: opacity .24s ease; }
.statusval.swap { opacity: 0; }

/* ---- section labels ---- */
.section-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); display: flex; align-items: baseline; gap: 16px; margin: 76px 0 24px;
  padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.section-label .n { font-family: var(--display); font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800;
  color: var(--accent); letter-spacing: -0.03em; line-height: 0.7; }

/* ---- metrics: ruled data table ---- */
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); }
.metric { padding: 20px 18px 22px; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.metric:nth-child(3n) { border-right: 0; }
.metric .v { font-family: var(--display); font-weight: 800; font-size: clamp(2.1rem, 5.8vw, 3.2rem);
  line-height: 0.95; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--ink); }
.metric.eng .v { color: var(--accent); }
.metric .l { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--muted); margin-top: 10px; line-height: 1.5; }

/* ---- shipped / decision log ---- */
.ship { position: relative; border: 1px solid var(--rule-strong); border-radius: 3px;
  padding: 26px 26px 24px; margin-top: 22px; background: var(--paper); }
.ship-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule); padding-bottom: 14px; }
.ship-head .idx { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.ship h2 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 5.2vw, 2.9rem); margin: 8px 0 3px;
  letter-spacing: -0.03em; color: var(--ink); }
.ship .sub { color: var(--muted); font-size: 0.95rem; font-family: var(--body); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.tag { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 4px 9px; border: 1px solid var(--rule); border-radius: 2px; color: var(--muted); }

.constraint { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); line-height: 1.7;
  border-left: 2px solid var(--accent); background: var(--accent-soft); padding: 12px 15px; margin: 22px 0 4px;
  display: flex; gap: 10px; align-items: flex-start; }
.constraint .lab { color: var(--accent); white-space: nowrap; font-weight: 600; }

.prompt { font-family: var(--display); font-weight: 700; font-size: clamp(1.45rem, 3.2vw, 1.85rem); color: var(--ink); margin: 22px 0 4px; line-height: 1.18; letter-spacing: -0.02em; }
.prompt-hint { font-family: var(--mono); font-size: 11.5px; color: var(--faint); margin-bottom: 18px; }

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
@media (max-width: 560px) { .choices { grid-template-columns: 1fr; } .metrics { grid-template-columns: repeat(2, 1fr); } .metric:nth-child(3n){border-right:1px solid var(--rule);} .metric:nth-child(2n){border-right:0;} }
.choice { text-align: left; cursor: pointer; font-family: var(--body); position: relative;
  border: 0; border-right: 1px solid var(--rule); padding: 17px 18px; background: none; color: var(--ink);
  transition: background .15s ease; }
.choices .choice:last-child { border-right: 0; }
@media (max-width: 560px) { .choice { border-right: 0; border-bottom: 1px solid var(--rule); } .choices .choice:last-child { border-bottom: 0; } }
.choice:hover { background: var(--paper-2); }
.choice:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.choice .opt { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.choice .txt { display: block; margin-top: 8px; font-size: 1rem; line-height: 1.4; }
.choice .bar { height: 2px; background: var(--rule); margin-top: 15px; overflow: hidden; opacity: 0; transition: opacity .3s ease; }
.choice .bar i { display: block; height: 100%; width: 0; background: var(--muted); transition: width .9s cubic-bezier(.22,.61,.36,1); }
.choice .pct { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin-top: 8px; opacity: 0; height: 0; transition: opacity .3s ease; }
.choices.voted .bar, .choices.voted .pct { opacity: 1; } .choices.voted .pct { height: auto; }
.choices.voted .choice { cursor: default; } .choices.voted .choice:hover { background: none; }
.choice.mine { background: var(--accent-soft); }
.choice.mine .bar i { background: var(--accent); }
.choice .yours, .choice .hers { position: absolute; top: 10px; font-family: var(--mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 2px; opacity: 0; transition: opacity .3s ease .15s; }
.choice .yours { right: 12px; color: var(--muted); border: 1px solid var(--rule-strong); }
.choice .hers { left: 12px; color: #fff; background: var(--accent); }
.choices.voted .choice.picked .yours { opacity: 1; }
.choices.voted .choice.mine .hers { opacity: 1; }

.reveal { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .55s ease, opacity .5s ease, margin .5s ease; }
.reveal.open { max-height: 620px; opacity: 1; margin-top: 22px; }
.verdict { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ok);
  display: flex; align-items: center; gap: 9px; padding-top: 20px; border-top: 1px solid var(--rule); }
.verdict .box { width: 14px; height: 14px; border: 1px solid var(--ok); display: inline-flex; align-items: center; justify-content: center; color: var(--ok); font-size: 9px; }
.reveal h3 { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 3.4vw, 2rem); margin: 16px 0 10px; color: var(--ink); letter-spacing: -0.025em; line-height: 1.05; }
.reveal p { font-family: var(--body); color: var(--ink-2); margin: 0 0 16px; font-size: 1.02rem; line-height: 1.6; }
.reveal p em { font-style: normal; color: var(--ink); box-shadow: inset 0 -0.5em 0 var(--accent-soft); }
.outcome { display: flex; flex-wrap: wrap; gap: 8px; }
.badge { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 6px 11px; border: 1px solid var(--rule-strong); border-radius: 2px; color: var(--ink-2); }
.badge.win { border-color: var(--accent); color: var(--accent); }

.built-toggle { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent); background: none; border: 0; cursor: pointer; padding: 14px 8px 4px 0; margin-top: 6px;
  display: inline-flex; align-items: center; gap: 6px; }
.built-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.built { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s ease, opacity .4s ease;
  font-family: var(--mono); font-size: 12px; color: var(--ink-2); line-height: 1.7; }
.built.open { max-height: 260px; opacity: 1; margin-top: 12px; }

/* ---- changelog: ruled release history ---- */
.changelog { border-top: 1px solid var(--rule); }
.rel { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.rel .ver { font-family: var(--mono); font-size: 12px; color: var(--ink); text-transform: uppercase; letter-spacing: 0.03em; }
.rel.upcoming .ver::after { content: " · upcoming"; color: var(--accent); }
.rel h4 { font-family: var(--display); font-weight: 600; font-size: 1.15rem; margin: 0 0 3px; color: var(--ink); letter-spacing: -0.01em; }
.rel .role { color: var(--muted); font-size: 0.92rem; font-family: var(--body); }
.rel .note { color: var(--ink-2); font-size: 0.95rem; margin-top: 8px; font-family: var(--body); line-height: 1.55; }

/* ---- roadmap ---- */
.roadmap { font-family: var(--display); font-weight: 600; font-size: clamp(1.7rem, 4.2vw, 2.7rem); color: var(--ink);
  max-width: 26ch; line-height: 1.12; letter-spacing: -0.025em; }
.roadmap em { font-style: normal; color: var(--ink); box-shadow: inset 0 -0.5em 0 var(--accent-soft); }

/* ---- appendix ---- */
.appendix { display: flex; flex-wrap: wrap; gap: 10px; }
.appendix a { font-family: var(--mono); font-size: 12px; text-decoration: none; color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: 2px; padding: 10px 15px;
  transition: border-color .15s ease, color .15s ease; }
.appendix a:hover { border-color: var(--accent); color: var(--accent); }
.appendix a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- figures ---- */
.figure { margin: 28px 0; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.figure img { display: block; width: 100%; height: auto; }
.figure figcaption { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--muted); padding: 10px 14px; border-top: 1px solid var(--rule); }

/* ---- spec-boot loader (reskinned: flat paper, mono, red) ---- */
#loader { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  background: var(--paper); transition: opacity .5s ease, visibility .5s; }
#loader.done { opacity: 0; visibility: hidden; }
#loader .boot { font-family: var(--mono); font-size: clamp(12px, 2.6vw, 14px); color: var(--ink-2); width: min(90vw, 460px); }
#loader .bootlog { margin: 0; white-space: pre-wrap; line-height: 1.9; }
#loader .bootlog .ok { color: var(--ok); }
#loader .bootlog .accent { color: var(--accent); }
#loader .cursor { display: inline-block; width: 0.55em; color: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---- scroll-progress rule (thin, solid) ---- */
#scrollrail { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 9997; pointer-events: none; }
#scrollrail i { display: block; height: 100%; width: 0%; background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  #loader, #scrollrail { display: none !important; }
  .rise { opacity: 1 !important; transform: none !important; }
  .draw { transform: scaleX(1) !important; }
  .reveal { transition: none; }
  * { animation: none !important; }
}