:root {
  --paper:      #FCFBF9;
  --surface:    #FFFFFF;
  --raised:     #F6F4F0;
  --ink:        #17181B;
  --ink-soft:   #3D4046;
  --muted:      #6B6F77;
  --rule:       #E6E2DB;
  --rule-firm:  #CFC9BF;
  --accent:     #25406B;
  --accent-ink: #1B3153;
  --accent-bg:  #EEF2F8;
  --data:       #A8621B;
  --data-bg:    #FBF2E7;
  --good:       #1F6B4F;
  --warn:       #8C5A16;

  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --measure: 68ch;
  --pad: clamp(16px, 4vw, 28px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #101216;
    --surface:    #171A20;
    --raised:     #1C2027;
    --ink:        #E8E6E2;
    --ink-soft:   #C6C4BF;
    --muted:      #949AA4;
    --rule:       #272B33;
    --rule-firm:  #3A404A;
    --accent:     #92B2E2;
    --accent-ink: #B9CEEE;
    --accent-bg:  #17202E;
    --data:       #DD9A50;
    --data-bg:    #2A1F12;
    --good:       #5CB894;
    --warn:       #D9A55C;
  }
}
:root[data-theme="dark"] {
  --paper: #101216; --surface: #171A20; --raised: #1C2027;
  --ink: #E8E6E2; --ink-soft: #C6C4BF; --muted: #949AA4;
  --rule: #272B33; --rule-firm: #3A404A;
  --accent: #92B2E2; --accent-ink: #B9CEEE; --accent-bg: #17202E;
  --data: #DD9A50; --data-bg: #2A1F12; --good: #5CB894; --warn: #D9A55C;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.68;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------- chrome -- */

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: #fff; padding: 10px 16px; z-index: 50;
}
.skip:focus { left: 12px; top: 12px; }

header.site {
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(1.2);
}
.bar {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--pad);
  display: flex; align-items: center; gap: 24px; min-height: 60px;
}
.wordmark {
  font-family: var(--sans); font-weight: 700; font-size: 17px;
  letter-spacing: -0.02em; color: var(--ink); text-decoration: none;
  display: flex; align-items: baseline; gap: 1px; white-space: nowrap;
}
.wordmark span { color: var(--accent); }
nav.top { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
nav.top a {
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--ink-soft); text-decoration: none; padding: 6px 0;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
nav.top a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* On narrow screens the six links wrapped into a six-row stack, and because
   the header is sticky that stack — ~270px tall — sat over a third of the
   viewport while scrolling. A single row that scrolls sideways keeps the header
   at 56px and needs no JavaScript; the trailing fade tells the thumb there is
   more to the right. */
@media (max-width: 1079px) {
  .bar { flex-wrap: nowrap; gap: 16px; min-height: 56px; }
  nav.top {
    flex-wrap: nowrap; gap: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin-left: 0; padding-right: 28px;
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  nav.top::-webkit-scrollbar { display: none; }
  .kicker { letter-spacing: 0.09em; }
}

/* ------------------------------------------------------------------ page -- */

main { max-width: 1200px; margin: 0 auto; padding: 0 var(--pad) 96px; }

.layout { display: block; }
@media (min-width: 1080px) {
  .layout { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 56px; align-items: start; }
}

article { max-width: var(--measure); min-width: 0; }

/* ----------------------------------------------------------------- type --- */

h1 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1.1;
  letter-spacing: -0.025em; margin: 0 0 14px; text-wrap: balance;
}
h2 {
  font-family: var(--sans); font-weight: 650;
  font-size: clamp(1.35rem, 2.6vw, 1.65rem); line-height: 1.22;
  letter-spacing: -0.016em; margin: 2.4em 0 0.55em; text-wrap: balance;
  padding-top: 0.5em; border-top: 1px solid var(--rule);
}
h3 {
  font-family: var(--sans); font-weight: 650; font-size: 1.16rem;
  letter-spacing: -0.01em; margin: 1.9em 0 0.4em; text-wrap: balance;
}
h4 {
  font-family: var(--sans); font-weight: 600; font-size: 1rem;
  letter-spacing: 0.005em; margin: 1.6em 0 0.3em; color: var(--ink-soft);
}
h2 .anchor, h3 .anchor, h4 .anchor {
  font-family: var(--mono); color: var(--rule-firm); text-decoration: none;
  margin-left: 8px; opacity: 0; font-size: 0.8em; font-weight: 400;
}
h2:hover .anchor, h3:hover .anchor, h4:hover .anchor { opacity: 1; }
.anchor:focus { opacity: 1; }

p { margin: 0 0 1.15em; }
article > p:first-of-type { font-size: 1.06em; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); }

strong { font-weight: 650; }
code { font-family: var(--mono); font-size: 0.88em; background: var(--raised); padding: 1px 5px; border-radius: 3px; }

ul, ol { margin: 0 0 1.3em; padding-left: 1.35em; }
li { margin-bottom: 0.45em; }
li::marker { color: var(--muted); }

blockquote {
  margin: 1.6em 0; padding: 2px 0 2px 20px;
  border-left: 3px solid var(--accent); color: var(--ink-soft); font-style: italic;
}

/* --------------------------------------------------------------- lede ----- */

.lede { color: var(--muted); font-family: var(--sans); font-size: 14px; margin: 0 0 26px; }
.lede .dot { margin: 0 8px; color: var(--rule-firm); }

.kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 12px;
}

/* ------------------------------------------------------------- summary ---- */

aside.summary {
  background: var(--accent-bg);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  padding: 22px 26px 6px;
  margin: 0 0 34px;
  border-radius: 3px;
}
aside.summary h2 {
  border: 0; padding: 0; margin: 0 0 10px;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  font-family: var(--mono); font-weight: 500; color: var(--accent);
}
aside.summary p { font-size: 0.97em; color: var(--ink-soft); }
aside.summary ul { font-size: 0.97em; }

/* ---------------------------------------------------------------- table --- */

.scroll { overflow-x: auto; margin: 1.7em 0; border: 1px solid var(--rule); border-radius: 3px; }
table { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: 15px; }
thead th {
  background: var(--raised); text-align: left; font-weight: 600; color: var(--ink-soft);
  padding: 11px 14px; border-bottom: 1px solid var(--rule-firm); white-space: nowrap;
  font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase;
}
tbody th { text-align: left; font-weight: 600; }
td, tbody th { padding: 11px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--raised) 45%, transparent); }
td { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- chart --- */

figure.chart { margin: 2em 0; padding: 0; }
figure.chart svg { display: block; width: 100%; height: auto; }
figure.chart figcaption {
  font-family: var(--sans); font-size: 13.5px; color: var(--muted);
  margin-top: 10px; line-height: 1.5;
}
figure.chart figcaption b { color: var(--ink-soft); font-weight: 600; }

/* ----------------------------------------------------------- references --- */

section.refs { margin-top: 3em; }
section.refs h2 { font-size: 1.05rem; }
ol.reflist { font-size: 15px; font-family: var(--sans); color: var(--ink-soft); padding-left: 1.6em; }
ol.reflist li { margin-bottom: 0.7em; line-height: 1.5; }

section.disclaimer { margin-top: 2.4em; }
section.disclaimer h2 { font-size: 0.95rem; color: var(--muted); }
.fine { font-size: 14.5px; color: var(--muted); font-family: var(--sans); line-height: 1.6; }

/* ------------------------------------------------------------------ toc --- */

.toc { display: none; }
@media (min-width: 1080px) {
  .toc {
    display: block; position: sticky; top: 92px;
    font-family: var(--sans); font-size: 13.5px;
    max-height: calc(100vh - 130px); overflow-y: auto;
  }
  .toc h2 {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted);
    margin: 0 0 12px; border: 0; padding: 0; font-weight: 500;
  }
  .toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
  .toc li { margin: 0; }
  .toc a {
    display: block; padding: 5px 0 5px 14px; margin-left: -1px;
    color: var(--muted); text-decoration: none; border-left: 2px solid transparent;
    line-height: 1.35;
  }
  .toc a:hover { color: var(--accent); border-left-color: var(--accent); }
}

/* ----------------------------------------------------------------- home --- */

.hero { padding: 56px 0 40px; border-bottom: 1px solid var(--rule); margin-bottom: 44px; }
.hero h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); max-width: 16ch; }
.hero p { max-width: 56ch; color: var(--ink-soft); font-size: 1.1em; }

.cards { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 34px 0; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .cards.three { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--surface); padding: 22px 24px; text-decoration: none; color: inherit; display: block; }
.card:hover { background: var(--raised); }
.card h3 { margin: 0 0 6px; font-size: 1.02rem; }
.card p { margin: 0; font-size: 14.5px; color: var(--muted); font-family: var(--sans); line-height: 1.5; }
.card .n { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: 8px; }

.index-list { list-style: none; padding: 0; margin: 0; }
.index-list li { border-bottom: 1px solid var(--rule); }
.index-list a { display: block; padding: 15px 0; text-decoration: none; color: inherit; }
.index-list a:hover .t { color: var(--accent); }
.index-list .t { font-family: var(--sans); font-weight: 600; font-size: 1.02rem; display: block; margin-bottom: 3px; }
.index-list .d { font-family: var(--sans); font-size: 14px; color: var(--muted); line-height: 1.5; }

/* ---------------------------------------------------------------- footer -- */

footer.site {
  border-top: 1px solid var(--rule); background: var(--surface);
  padding: 40px 0; font-family: var(--sans); font-size: 14px; color: var(--muted);
}
footer.site .bar { display: block; min-height: 0; }
footer.site nav { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 18px; }
footer.site a { color: var(--ink-soft); text-decoration: none; }
footer.site a:hover { color: var(--accent); text-decoration: underline; }
footer.site p { margin: 0 0 8px; max-width: 70ch; line-height: 1.6; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

@media (max-width: 620px) {
  body { font-size: 17.5px; line-height: 1.62; }
  h2 { margin-top: 2em; }
}
.deck {
  font-family: var(--sans);
  font-size: clamp(1.02rem, 2.1vw, 1.18rem);
  line-height: 1.4;
  font-weight: 500;
  color: var(--muted);
  margin: -4px 0 24px;
  max-width: 46ch;
  text-wrap: balance;
}
.tool { margin: 8px 0 0; }

.tool fieldset {
  border: 1px solid var(--rule); border-radius: 4px;
  padding: 18px 20px 20px; margin: 0 0 18px; background: var(--surface);
}
.tool legend {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--accent); padding: 0 8px;
}

.tool label { display: block; font-family: var(--sans); font-size: 15px; font-weight: 500; margin: 0 0 6px; color: var(--ink); }
.tool .hint { display: block; font-family: var(--sans); font-size: 13.5px; color: var(--muted); font-weight: 400; margin-top: 3px; line-height: 1.45; }

.tool .field { margin: 0 0 18px; }
.tool .field:last-child { margin-bottom: 0; }

.tool input[type="text"], .tool input[type="number"], .tool input[type="date"], .tool select, .tool textarea {
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-firm); border-radius: 3px;
  padding: 11px 12px; width: 100%; max-width: 26rem; min-height: 44px;
}
.tool input:focus-visible, .tool select:focus-visible, .tool textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.tool input[type="range"] { width: 100%; max-width: 26rem; accent-color: var(--accent); min-height: 44px; }

/* Radio and checkbox groups as tappable cards — 44px targets, obvious state. */
.tool .choices { display: flex; flex-wrap: wrap; gap: 8px; }
.tool .choices label {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  border: 1px solid var(--rule-firm); border-radius: 999px;
  padding: 9px 15px; min-height: 44px; cursor: pointer;
  font-size: 14.5px; font-weight: 500; background: var(--surface);
  transition: border-color .12s, background .12s;
}
.tool .choices label:hover { border-color: var(--accent); }
.tool .choices input { accent-color: var(--accent); margin: 0; width: 16px; height: 16px; }
.tool .choices input:checked + span,
.tool .choices label:has(input:checked) { color: var(--accent-ink); }
.tool .choices label:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
.tool .choices input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.tool button, .tool .btn {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  background: var(--accent); color: var(--surface);
  border: 1px solid var(--accent); border-radius: 3px;
  padding: 12px 20px; min-height: 44px; cursor: pointer;
}
.tool button:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.tool button.secondary { background: transparent; color: var(--accent); }
.tool button.secondary:hover { background: var(--accent-bg); }
.tool button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The result panel. Deliberately distinct from the article body so nobody
   mistakes a computed projection for prose that was written and reviewed. */
.tool .result {
  border: 1px solid var(--rule); border-left: 3px solid var(--data);
  background: var(--data-bg); border-radius: 3px;
  padding: 20px 22px; margin: 22px 0 0;
}
.tool .result h2, .tool .result h3 {
  font-family: var(--sans); border: 0; padding: 0; margin: 0 0 10px;
  font-size: 1.05rem; letter-spacing: -0.01em;
}
.tool .result p { font-size: 15.5px; }
.tool .result[hidden] { display: none; }

.tool .readout {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.5rem; font-weight: 500; color: var(--ink);
}
.tool .readout .unit { font-size: 0.6em; color: var(--muted); margin-left: 3px; }

/* A number's provenance, shown inline. This is the whole trust mechanism:
   every figure carries the guide it came from. */
.tool .src {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  letter-spacing: 0.04em; white-space: nowrap;
}

.tool .flag {
  border: 1px solid var(--warn); border-left: 3px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  padding: 14px 16px; margin: 16px 0; border-radius: 3px;
  font-family: var(--sans); font-size: 14.5px; line-height: 1.55;
}
.tool .flag strong { color: var(--warn); }

.tool-foot { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule); }
.tool-disclaimer { font-family: var(--sans); font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0 0 10px; }
.tool-disclaimer strong { color: var(--ink-soft); }
.tool-sources { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin: 0 0 10px; }
.tool-related { font-family: var(--sans); font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; }
.tool-related a { text-transform: capitalize; }

/* Drawn figures inside articles. */
figure.figure-drawn svg { display: block; width: 100%; height: auto; margin: 0 auto; max-width: 640px; }

@media (max-width: 620px) {
  .tool fieldset { padding: 15px 16px 17px; }
  .tool .choices label { font-size: 14px; padding: 9px 13px; }
}
.toc-mobile { display: none; }
@media (max-width: 1079px) {
  .toc-mobile {
    display: block; margin: 0 0 28px;
    border: 1px solid var(--rule); border-radius: 4px; background: var(--surface);
  }
  .toc-mobile > summary {
    font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink-soft);
    padding: 13px 16px; cursor: pointer; list-style: none;
    display: flex; align-items: center; justify-content: space-between; min-height: 44px;
  }
  .toc-mobile > summary::-webkit-details-marker { display: none; }
  .toc-mobile > summary::after {
    content: ""; width: 8px; height: 8px; margin-left: 10px; flex: none;
    border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
    transform: rotate(45deg) translateY(-2px); transition: transform .15s;
  }
  .toc-mobile[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
  .toc-mobile > summary .n { font-family: var(--mono); font-size: 11px; color: var(--muted); font-weight: 400; margin-left: auto; }
  .toc-mobile ol { margin: 0; padding: 0 16px 14px 34px; }
  .toc-mobile li { margin: 0 0 8px; }
  .toc-mobile a { font-family: var(--sans); font-size: 14.5px; color: var(--ink-soft); text-decoration: none; line-height: 1.4; display: block; padding: 3px 0; }
  .toc-mobile a:hover { color: var(--accent); }
}
.hero.home h1 { max-width: 15ch; }

.stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
  margin: 30px 0 40px;
}
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--surface); padding: 18px 20px 16px; }
.stat .v {
  display: block; font-family: var(--sans); font-weight: 700;
  font-size: clamp(28px, 5vw, 38px); line-height: 1; letter-spacing: -0.03em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.stat .l {
  display: block; margin-top: 7px; font-family: var(--sans); font-size: 13px;
  line-height: 1.35; color: var(--muted);
}

.asks { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 22px 0 12px; }
@media (min-width: 720px) { .asks { grid-template-columns: repeat(2, 1fr); } }
.ask {
  background: var(--surface); padding: 20px 22px 18px; text-decoration: none;
  color: inherit; display: flex; flex-direction: column; gap: 7px;
}
.ask:hover { background: var(--raised); }
.ask .q {
  font-family: var(--sans); font-weight: 600; font-size: 1.02rem;
  line-height: 1.3; color: var(--ink);
}
.ask .a { font-family: var(--sans); font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.ask .go {
  margin-top: auto; padding-top: 8px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--accent);
  display: inline-flex; align-items: center; gap: 6px;
}
.ask .go svg { transition: transform .15s; }
.ask:hover .go svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .ask .go svg { transition: none; } }
.asks-note { margin: 0 0 34px; }
html { scroll-padding-top: 78px; }
h2[id], h3[id], h4[id], [id^="fig-"], .refs, .disclaimer { scroll-margin-top: 78px; }
@media (max-width: 1079px) { html { scroll-padding-top: 66px; } h2[id], h3[id], h4[id], [id^="fig-"] { scroll-margin-top: 66px; } }
h2[id]:target, h3[id]:target, h4[id]:target { animation: anchor-land 1.4s ease-out 1; }
@keyframes anchor-land {
  0%, 45% { background: var(--accent-bg); box-shadow: -10px 0 0 var(--accent-bg), 10px 0 0 var(--accent-bg); }
  100%    { background: transparent; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { h2[id]:target, h3[id]:target, h4[id]:target { animation: none; } }
details.embed { margin: 14px 0 0; border-top: 1px solid var(--rule); padding-top: 10px; }
details.embed > summary {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--muted);
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 0; min-height: 28px;
}
details.embed > summary::-webkit-details-marker { display: none; }
details.embed > summary::before {
  content: ""; width: 6px; height: 6px; flex: none;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s;
}
details.embed[open] > summary::before { transform: rotate(45deg); }
details.embed > summary:hover { color: var(--accent); }
details.embed .fine { margin: 8px 0; font-size: 12.5px; }
details.embed textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  font-family: var(--mono); font-size: 12px; line-height: 1.55;
  color: var(--ink-soft); background: var(--raised);
  border: 1px solid var(--rule); border-radius: 3px; padding: 10px 12px;
}
details.embed textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { details.embed > summary::before { transition: none; } }

.fig-entry { margin: 0 0 54px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.fig-entry:last-child { border-bottom: 0; }
.fig-entry > h2 { margin-top: 0; }
.fig-entry .fine a { color: var(--accent); }
.qa { margin: 0 0 4px; padding: 0 0 0 16px; border-left: 2px solid var(--rule); }
.qa + .qa { margin-top: 18px; }
.qa > h3.q {
  margin: 0 0 6px; font-family: var(--sans); font-size: 1rem; font-weight: 600;
  line-height: 1.35; color: var(--ink); letter-spacing: -0.005em;
}
.qa > p { margin: 0; color: var(--ink-soft); }
.qa:hover { border-left-color: var(--rule-firm); }
.qa > h3.q > .anchor { font-size: 0.85em; }
@media (max-width: 560px) {
  figure.chart.figure-drawn {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 10px 10px 0;
    background: var(--surface);
  }
  figure.chart.figure-drawn > svg { min-width: 430px; margin: 0; }
  figure.chart.figure-drawn figcaption { padding: 0 2px 12px; }
}
/* --------------------------------------------------------- header search -- */

.rgs {
  position: relative;
  font-family: var(--sans);
  flex: 1 1 190px;
  min-width: 44px;
  max-width: 300px;
}
.rgs-form { position: relative; margin: 0; display: block; }

/* The hidden attribute is how everything here is shown and hidden, and the
   UA sheet rule [hidden] { display: none } is an ordinary author-beatable one:
   .rgs-clear { display: flex } silently wins over it. That left the clear
   button laid out at 44x44 over the collapsed field on a phone, eating the tap
   that should have opened search, and left the "see all" strip rendering as a
   blank sticky bar under every short result list. Hiding is not optional
   styling, so it is stated once, here, and it wins. */
.rgs [hidden], .rgs-page [hidden] { display: none !important; }

.rgs-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.rgs-ico {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}

.rgs-in {
  width: 100%; height: 44px; min-height: 44px;
  padding: 0 34px 0 35px; margin: 0;
  font-family: var(--sans); font-size: 15px; font-weight: 500; line-height: 1.2;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule-firm); border-radius: 999px;
  -webkit-appearance: none; appearance: none;
}
.rgs-in::placeholder { color: var(--muted); opacity: 1; }
.rgs-in::-webkit-search-cancel-button, .rgs-in::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.rgs-in:hover { border-color: var(--accent); }
.rgs-in:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.rgs-clear {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 999px; cursor: pointer; color: var(--muted);
}
.rgs-clear:hover { color: var(--ink); }
.rgs-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* The submit button is visually hidden because Enter already submits and the
   field carries the magnifier — but it stays in the tab order, so a keyboard
   user was landing on a 3px invisible control with nothing to see. It surfaces
   over the right end of the field while it holds focus and clips away again
   after, so nothing moves. */
.rgs-go:focus-visible {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  width: auto; height: 36px; margin: 0; padding: 0 14px;
  clip: auto; clip-path: none; overflow: visible; white-space: nowrap; z-index: 9;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--accent-ink); background: var(--accent-bg);
  border: 1px solid var(--accent); border-radius: 999px; cursor: pointer;
  outline: 2px solid var(--accent); outline-offset: 1px;
}

/* -------------------------------------------------------------- the panel -- */

.rgs-panel {
  position: absolute; z-index: 6; top: calc(100% + 8px); right: 0;
  width: min(92vw, 400px);
  background: var(--surface);
  border: 1px solid var(--rule-firm); border-radius: 4px;
  box-shadow: 0 12px 34px color-mix(in srgb, var(--ink) 16%, transparent);
  max-height: min(70vh, 460px); overflow-y: auto; overscroll-behavior: contain;
}
.rgs-list { list-style: none; margin: 0; padding: 0; }
.rgs-list li { margin: 0; }

.rgs-hit {
  display: block; padding: 10px 15px 11px 12px;
  min-height: 44px; text-decoration: none; color: var(--ink);
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--rule);
}
.rgs-list li:last-child .rgs-hit { border-bottom: 0; }
.rgs-hit .t { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.rgs-hit .c {
  display: block; margin-top: 3px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
/* Two encodings for the active row, never colour alone: the rule on the left
   edge is what tells you where you are if the tint is not distinguishable. */
.rgs-hit:hover { background: var(--raised); }
.rgs-hit[aria-selected="true"] {
  background: var(--accent-bg); border-left-color: var(--accent);
}
.rgs-hit[aria-selected="true"] .t { color: var(--accent-ink); }
.rgs-hit mark { background: var(--data-bg); color: var(--ink); border-radius: 2px; padding: 0 1px; }

.rgs-empty { margin: 0; padding: 14px 15px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.rgs-empty a { color: var(--accent); }

/* Sticky: with eight results the panel scrolls, and the way out to the full
   result set should not be something you have to scroll to find. */
.rgs-all {
  display: block; padding: 12px 15px; min-height: 44px;
  position: sticky; bottom: 0;
  border-top: 1px solid var(--rule); background: var(--raised);
  font-size: 13.5px; font-weight: 600; color: var(--accent); text-decoration: none;
}
.rgs-all:hover { background: var(--accent-bg); text-decoration: underline; }
.rgs-all:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ------------------------------------------------------- the compact box -- */
/* Two problems, one answer. Below 1080px the bar is one non-wrapping row and
   the nav already scrolls sideways inside it, so a 190px input would leave the
   nav about 60px wide. Between 1080 and 1200 the bar is wide enough not to
   scroll but not wide enough for everything: measured at 1120px, a 181px input
   pushed the seven nav links onto three rows and took the sticky header from
   60px to 94px. The wordmark, the nav and a 190px field need about 1150px
   before they fit, so the box stays a 44px target until then and expands over
   the nav on focus — with :focus-within, so it works before the script loads
   and keeps working if the script never loads. */
@media (max-width: 1199px) {
  .rgs { flex: 0 0 44px; max-width: 44px; min-width: 44px; height: 44px; margin-left: auto; }
  /* The form is the containing block for the input, the icon and the clear
     button. Once the input goes absolute on focus the form has nothing left in
     flow, so without this it collapses to zero height and every "top: 50%"
     inside it centres on the bar's top edge instead of on the bar. */
  .rgs-form { height: 100%; }
  .rgs-in {
    width: 44px; padding: 0 0 0 40px;
    background: transparent; border-color: transparent;
  }
  .rgs-in::placeholder { color: transparent; }
  .rgs-ico { left: 14px; }
  .rgs:focus-within .rgs-in, .rgs[data-open] .rgs-in {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 7;
    width: min(78vw, 340px); padding: 0 40px 0 16px;
    background: var(--paper); border-color: var(--rule-firm);
  }
  .rgs:focus-within .rgs-in::placeholder, .rgs[data-open] .rgs-in::placeholder { color: var(--muted); }
  .rgs:focus-within .rgs-ico, .rgs[data-open] .rgs-ico { display: none; }
  .rgs-clear { z-index: 8; }
  .rgs-panel { width: min(92vw, 360px); }
}

/* The expanded field is min(78vw, 340px) anchored to the right edge, so it only
   reaches back as far as the wordmark on a phone — above about 560px there is
   clear space between them and hiding the wordmark would be gratuitous. Below
   it the wordmark steps out of the way while someone is typing rather than
   being half-covered by an opaque pill. Layout is untouched — visibility, not
   display — and where :has() is not supported the rule is simply dropped and
   the field overlaps, which is the pattern every mobile header uses anyway. */
@media (max-width: 560px) {
  .bar:has(.rgs:focus-within) .wordmark, .bar:has(.rgs[data-open]) .wordmark { visibility: hidden; }
}

/* ----------------------------------------------------------- /search/ page -- */

.rgs-page { max-width: var(--measure); }
.rgs-pform { margin: 0 0 22px; }
.rgs-pform label {
  display: block; font-family: var(--sans); font-size: 15px; font-weight: 500;
  color: var(--ink); margin: 0 0 8px;
}
.rgs-prow { display: flex; gap: 10px; flex-wrap: wrap; }
.rgs-pin {
  flex: 1 1 240px; min-width: 0; min-height: 48px;
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule-firm); border-radius: 3px;
  padding: 12px 14px; -webkit-appearance: none; appearance: none;
}
.rgs-pin::placeholder { color: var(--muted); opacity: 1; }
.rgs-pin:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rgs-pgo {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  background: var(--accent); color: var(--surface);
  border: 1px solid var(--accent); border-radius: 3px;
  padding: 12px 22px; min-height: 48px; cursor: pointer;
}
.rgs-pgo:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.rgs-pgo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.rgs-pcount {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 6px; min-height: 1.2em;
}
.rgs-presults { margin: 0; }
.rgs-presults .c {
  display: block; margin-top: 5px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent);
}
.rgs-presults mark { background: var(--data-bg); color: var(--ink); border-radius: 2px; padding: 0 1px; }
.rgs-noscript, .rgs-pnone {
  font-family: var(--sans); font-size: 15px; color: var(--muted);
  line-height: 1.6; border-left: 3px solid var(--rule-firm); padding: 2px 0 2px 16px; margin: 8px 0 0;
}

@media (max-width: 620px) {
  .rgs-pgo { flex: 1 1 100%; }
}
/* --------------------------------------------------------- breadcrumbs --- */
.crumbs { font-family: var(--sans); font-size: 13px; margin: 0 0 14px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.crumbs li { margin: 0; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.crumbs li + li::before { content: "/"; color: var(--rule-firm); }
/* 8px of vertical padding rather than 3: at 13px these are the first links on
   the page and a 19px-tall tap target on a phone is a coin toss. The li is
   flex, so the padding grows the hit box without moving the baseline. */
.crumbs a { color: var(--muted); text-decoration: none; padding: 8px 0; margin: -8px 0; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }
@media (min-width: 720px) { .crumbs [aria-current="page"] { max-width: 48ch; } }

/* ----------------------------------------------------- reading progress --- */
/* Sits above the sticky header (z-index 20) and takes the structural accent,
   never the data ochre, so it cannot be mistaken for a measurement. */
.rp { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 30; pointer-events: none; }
.rp-i { height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--accent); }

/* ---------------------------------------------------------- back to top --- */
.totop {
  position: fixed; z-index: 25;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; min-width: 44px; padding: 0 15px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; line-height: 1;
  color: var(--accent); background: var(--surface);
  border: 1px solid var(--rule-firm); border-radius: 999px; cursor: pointer;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 14%, transparent);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.totop:hover { color: var(--accent-ink); border-color: var(--accent); }
/* visibility, not opacity alone: a button faded to zero is still tabbable. */
.totop[data-on="0"] { opacity: 0; visibility: hidden; transform: translateY(8px); }
@media (prefers-reduced-motion: reduce) { .totop { transition: none; } }

/* ------------------------------------------------------------- key facts -- */
.keyfacts {
  border: 1px solid var(--rule); border-top: 3px solid var(--data);
  background: var(--surface); border-radius: 3px;
  padding: 16px 18px 14px; margin: 0 0 30px;
}
.keyfacts h2 {
  border: 0; padding: 0; margin: 0 0 12px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--data);
}
.keyfacts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
@media (min-width: 560px) {
  .keyfacts ul { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px; }
}
.keyfacts li { margin: 0; min-width: 0; }
.kf-v {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.45rem; font-weight: 500; line-height: 1.1;
  color: var(--ink); margin: 0 0 4px;
}
.kf-u { font-size: 0.56em; color: var(--muted); margin-left: 2px; }
.kf-l { font-family: var(--sans); font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); margin: 0 0 5px; }
.kf-s { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--muted); margin: 0; cursor: help; }
.kf-note { font-family: var(--sans); font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 15px 0 0; }

/* ------------------------------------------------------------ toc active -- */
/* Weight and a rule as well as colour — colour alone is not an encoding. */
.toc a.is-here, .toc-mobile a.is-here { color: var(--accent); font-weight: 600; }
.toc a.is-here { border-left-color: var(--accent); }

/* ------------------------------------------------------------- copy link -- */
/* There is no hover on a phone, so the anchors are permanently faint there
   rather than invisible, and padded out to something a thumb can hit.
   Written as a.anchor rather than .anchor purely to outrank the theme's own
   "h2 .anchor { opacity: 0 }" whichever order the build concatenates the two. */
h2 a.anchor, h3 a.anchor, h4 a.anchor { position: relative; padding: 6px; margin-left: 2px; }
@media (hover: none) {
  h2 a.anchor, h3 a.anchor, h4 a.anchor { opacity: 0.45; }
  /* A "#" set at 0.8em with 6px of padding is about a 26px target, and a thumb
     needs 44. The hit area is grown with an out-of-flow pseudo-element instead
     of real padding so the heading's line box does not change, and it is anchored
     to the anchor's left edge and grown rightwards into the empty end of the
     line rather than centred, which would put it over the last few words of the
     heading — sometimes an internal link the resolver put there. */
  h2 a.anchor::before, h3 a.anchor::before, h4 a.anchor::before {
    content: ""; position: absolute; left: 0; top: 50%;
    width: 44px; height: 44px; transform: translateY(-50%);
  }
}
.anchor[data-copied] { opacity: 1; color: var(--good); }
.anchor[data-copied]::after {
  content: "copied"; font-family: var(--sans); font-size: 11px;
  font-weight: 600; letter-spacing: 0.02em; margin-left: 5px;
}
/* The live region, and the spoken half of a key-facts source line: a title
   attribute is a mouse affordance and nothing else — it never appears on a
   phone, which is where this site is read, and screen readers vary on whether
   they announce it at all. The tile's provenance is therefore in the text as
   well, hidden from sight rather than from the accessibility tree. */
.ux-say, .kf-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

@media print { .rp, .totop { display: none; } }