/* =====================================================================
   NOWHERE CITY, whitepaper.css
   The whitepaper as a page of the city. It loads after style.css, which
   brings the shared header, nav and footer; this file only styles the
   paper: the same limited palette, hard pixel edges and box-shadow bevels,
   tuned for long reading (about 70 characters a line, generous spacing,
   a sticky contents panel on wide screens).
   ===================================================================== */

:root {
  /* palette (same tokens as style.css) */
  --ink: #1c1f36;
  --night: #262b4a;
  --steel7: #353b6e;
  --steel6: #4b55a0;
  --steel5: #6f7fd1;
  --steel3: #a9b3ea;
  --steel1: #e1e5fb;
  --paper: #fffaf2;
  --paper2: #ece6f6;
  --paper3: #c3bce6;
  --paper4: #555b85;
  --grass6: #15707f;
  --grass5: #36bccd;
  --grass3: #9fe3ea;
  --brick: #a6452f;
  --lamp: #ffd36a;
  --lamp-d: #c9962e;
  --ember: #ff7a2f;
  --fire: #e0412a;
  --fee: #46d0d8;
  --mint: #8ee8d8;
  --term: #141733;
  --blueprint: #2b3166;

  --ui: "Quantico", "Trebuchet MS", system-ui, sans-serif;
  --body: "Quantico", "Trebuchet MS", system-ui, sans-serif;
  --mono: "Kode Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text: #262b47;
  --text-soft: #4c5274;
  --link: #8e3524;
  --focus: var(--lamp);
  --bevel-hi: #ffffff;
  --shadow: 4px 4px 0 rgba(28, 31, 70, .55);
  --measure: 70ch;
  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-width: 0;
  color: var(--ink);
  font: 400 18px/1.5 var(--body);
  background-color: #2f3563;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 2px, transparent 2px);
  background-size: 32px 32px;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, pre { margin: 0; }
img, canvas, svg { image-rendering: pixelated; image-rendering: crisp-edges; }
svg { overflow: visible; }
code {
  font-family: var(--mono); font-size: .9em; font-weight: 500;
  padding: 0 4px;
  background: rgba(94, 83, 57, .14);
  box-shadow: inset 0 -2px 0 rgba(94, 83, 57, .22);
  overflow-wrap: anywhere;
}
code.addr { word-break: break-all; }
sub, sup { font-size: .7em; line-height: 0; }
b, strong { font-weight: 700; }

.sprites { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.paper .sec, .paper .title { --focus: #b5331c; }
.toc, .callout-dark, .fx-b, .fig-box, .split, .hop, .chain-end { --focus: var(--lamp); }
#content:focus { outline: none; }

/* ---------------- icons and buttons ---------------- */
.ico { display: inline-block; flex: none; vertical-align: middle; }
.ico-16 { width: 16px; height: 16px; }
.ico-32 { width: 32px; height: 32px; }

/* ---------------- page grid ---------------- */
.wp {
  width: 100%; max-width: 1240px; margin: 0 auto;
  padding: 28px 20px 52px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px;
}
.wp-main { min-width: 0; }

/* ---------------- contents ---------------- */
.toc { min-width: 0; }
.toc-win {
  color: var(--paper); background: var(--night);
  border: 2px solid var(--ink);
  box-shadow: inset 2px 2px 0 var(--steel6), var(--shadow);
  scrollbar-color: var(--steel5) var(--night);
}
.toc-sum {
  display: flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 8px 12px;
  list-style: none; cursor: pointer;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255, 255, 255, .07) 2px 4px), var(--steel7);
  border-bottom: 2px solid var(--ink);
}
.toc-d:not([open]) .toc-sum { border-bottom: 0; }
.toc-sum::-webkit-details-marker { display: none; }
.toc-sum-t { font: 700 13px/1 var(--ui); text-transform: uppercase; letter-spacing: .04em; color: var(--lamp); }
.toc-sum-n { flex: 1; font: 400 11px/1 var(--ui); text-transform: uppercase; color: var(--steel3); }
.toc-sum::after {
  content: ""; width: 12px; height: 8px; flex: none;
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, 100% 25%, 83% 25%, 83% 50%, 67% 50%, 67% 75%, 33% 75%, 33% 50%, 17% 50%, 17% 25%, 0 25%);
}
.toc-d[open] .toc-sum::after { transform: rotate(180deg); }
.toc-list { list-style: none; margin: 0; padding: 8px 6px 8px; display: grid; gap: 2px; }
.toc-list a {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 5px 8px 5px 6px;
  font: 400 15px/1.3 var(--body); color: #e6e9fb; text-decoration: none;
  border: 2px solid transparent;
}
.toc-list a:hover { color: var(--paper); background: var(--steel7); }
.toc-n {
  flex: none; display: grid; place-items: center;
  min-width: 26px; height: 19px; padding: 0 3px;
  font: 700 11px/1 var(--ui); color: var(--ink); background: var(--steel3);
}
.toc-t { min-width: 0; padding-top: 1px; }
.toc-list a[aria-current] { color: var(--lamp); background: var(--steel7); border-color: var(--lamp); }
.toc-list a[aria-current] .toc-n { background: var(--lamp); }
.toc-back {
  display: flex; align-items: center; gap: 8px;
  margin: 0 6px 8px; padding: 8px 10px;
  font: 700 12px/1 var(--ui); text-transform: uppercase; letter-spacing: .03em;
  color: var(--paper); text-decoration: none;
  background: var(--steel7); border: 2px solid #000; box-shadow: inset 2px 2px 0 var(--steel5);
}
.toc-back:hover { color: var(--lamp); }

/* ---------------- windows ---------------- */
.win, .sec {
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--paper3), var(--shadow);
}
.win-bar, .sec-bar {
  display: flex; align-items: center; gap: 10px;
  color: var(--paper);
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255, 255, 255, .07) 2px 4px),
    var(--steel7);
  border-bottom: 2px solid var(--ink);
}
.win-bar { min-height: 32px; padding: 4px 8px; }
.win-t {
  flex: 1; min-width: 0;
  font: 700 13px/1.2 var(--ui); text-transform: uppercase; letter-spacing: .03em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bar-note {
  flex: none;
  font: 400 11px/1 var(--ui); text-transform: uppercase; padding: 4px 6px;
  color: var(--ink); background: var(--steel3); border: 2px solid var(--ink); white-space: nowrap;
}
.bar-lamp { background: var(--lamp); }

/* ---------------- title block ---------------- */
.title { margin-bottom: 28px; }
.cover {
  margin: 0 0 24px;
  background: #12324a;
  border: 2px solid var(--ink);
  box-shadow: inset 2px 2px 0 #2c5175, 4px 4px 0 rgba(94, 83, 57, .35);
  overflow: hidden;
}
.cover img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; image-rendering: auto; }
.title-body {
  position: relative;
  padding: 28px 36px 30px;
  background:
    repeating-linear-gradient(0deg, transparent 0 25px, rgba(85, 91, 133, .11) 25px 27px),
    var(--paper);
}
.kicker { font: 400 12px/1.3 var(--ui); text-transform: uppercase; letter-spacing: .07em; color: var(--paper4); }
.title-h {
  margin: 10px 0 12px;
  font: 700 66px/1 var(--ui); text-transform: uppercase; letter-spacing: .01em;
  color: var(--ink); text-shadow: 4px 4px 0 var(--paper3);
  overflow-wrap: anywhere;
}
.title-sub { max-width: 32ch; font: 600 25px/1.3 var(--body); color: var(--ink); }
.version { margin-top: 18px; }
.version-chip {
  display: inline-block;
  padding: 8px 10px 7px;
  font: 700 14px/1.1 var(--ui); text-transform: uppercase; letter-spacing: .02em;
  color: var(--ink); background: var(--fee);
  border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
}
.title-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
.title-meta > div {
  min-width: 0; padding: 7px 10px;
  background: var(--paper2);
  box-shadow: inset 2px 2px 0 var(--paper3), inset -2px -2px 0 var(--bevel-hi);
}
.title-meta dt { font: 400 11px/1.3 var(--ui); text-transform: uppercase; letter-spacing: .03em; color: var(--paper4); }
.title-meta dd { font: 500 16px/1.3 var(--body); color: #2f3354; }

/* ---------------- sections ---------------- */
.sec { margin: 0 0 28px; scroll-margin-top: 16px; }
.sec-bar { min-height: 44px; padding: 6px 10px 6px 7px; }
.sec-bar h2 {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 12px;
  font: 700 17px/1.25 var(--ui); text-transform: uppercase; letter-spacing: .03em;
}
.sec-n {
  flex: none; display: grid; place-items: center;
  min-width: 34px; height: 28px; padding: 0 6px;
  font: 700 14px/1 var(--ui); color: var(--ink); background: var(--lamp);
  border: 2px solid var(--ink); box-shadow: inset -2px -2px 0 var(--lamp-d);
}
.sec-body { padding: 28px 40px 32px; }
.sec-abstract .sec-bar .sec-n,
#refs .sec-n { background: var(--steel1); box-shadow: inset -2px -2px 0 var(--steel3); }
.sec-feature { box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--paper3), 0 0 0 4px var(--lamp), 8px 8px 0 rgba(28, 31, 70, .55); }
.sec-feature .sec-bar { background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255, 255, 255, .07) 2px 4px), var(--steel6); }

/* ---------------- prose ---------------- */
.prose { font-size: 19px; line-height: 1.64; color: var(--text); }
.prose > * + * { margin-top: 1.05em; }
.prose p, .prose li, .prose h3 { max-width: var(--measure); }
.prose .lead { font: 600 23px/1.38 var(--body); color: var(--ink); }
.prose > h3 {
  display: flex; align-items: center; gap: 10px;
  margin-top: 2em;
  font: 700 15px/1.35 var(--ui); text-transform: uppercase; letter-spacing: .03em; color: var(--brick);
}
.prose > h3::before {
  content: ""; width: 10px; height: 10px; flex: none;
  background: var(--brick); box-shadow: 2px 2px 0 var(--ink);
}
.prose > h3 + p { margin-top: .6em; }
.prose b { color: var(--ink); }
.prose a { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover { color: var(--ink); background: rgba(255, 211, 106, .45); }
.prose em { font-style: italic; }

.prose > ul { list-style: none; padding: 0; }
.prose > ul > li { position: relative; padding-left: 24px; }
.prose > ul > li + li { margin-top: .55em; }
.prose > ul > li::before {
  content: ""; position: absolute; left: 4px; top: .66em;
  width: 8px; height: 8px; background: var(--brick); box-shadow: 2px 2px 0 rgba(28, 31, 54, .3);
}
.prose > ol:not(.refs) { padding-left: 1.7em; list-style: decimal; }
.prose > ol:not(.refs) > li { padding-left: 4px; }
.prose > ol:not(.refs) > li + li { margin-top: .45em; }
.prose > ol:not(.refs) > li::marker { font: 700 14px var(--ui); color: var(--brick); }

.cite {
  font: 700 12px/1 var(--ui); white-space: nowrap;
  color: var(--link); text-decoration: none;
}
.prose a.cite:hover { text-decoration: underline; }

.punch {
  font: 700 22px/1.3 var(--ui); text-transform: uppercase; letter-spacing: .01em;
  color: var(--ink); text-shadow: 3px 3px 0 var(--paper3);
}

/* ---------------- formula boxes ---------------- */
.fx { margin-top: 1.4em; margin-bottom: .2em; min-width: 0; }
.prose > .fx + p { margin-top: 1.3em; }
.fx-l {
  display: inline-block; position: relative; z-index: 1;
  padding: 5px 9px 4px;
  font: 700 12px/1.2 var(--ui); text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink); background: var(--lamp);
  border: 2px solid var(--ink); border-bottom: 0;
}
.fx-b {
  display: block;
  padding: 15px 18px 16px;
  font: 400 16.5px/1.75 var(--mono); color: var(--mint);
  background: var(--term);
  border: 2px solid var(--ink);
  box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #2c315e, var(--shadow);
  white-space: pre; tab-size: 4;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-color: #343a6b var(--term);
}
.fx-b .c { color: var(--steel3); }

/* ---------------- figures ---------------- */
.fig { margin-top: 1.6em; margin-bottom: .4em; min-width: 0; }
.prose > .fig + p { margin-top: 1.4em; }
.fig-box {
  padding: 16px;
  background-color: var(--blueprint);
  background-image:
    linear-gradient(rgba(143, 176, 196, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 176, 196, .13) 1px, transparent 1px);
  background-size: 16px 16px;
  border: 2px solid var(--ink);
  box-shadow: inset 2px 2px 0 #2c5175, var(--shadow);
}
.fig-svg { display: block; width: 100%; max-width: 620px; height: auto; margin: 0 auto; }
.fig-cap {
  margin-top: 12px; max-width: var(--measure);
  font-size: 15px; line-height: 1.45; color: var(--text-soft);
}
.fig-cap b {
  display: inline-block; margin-right: 8px; padding: 2px 6px 1px;
  font: 700 12px/1.3 var(--ui); text-transform: uppercase;
  color: var(--paper); background: var(--ink);
}

/* split bars (fee and payment splits) */
.split {
  padding: 12px 14px 14px;
  background: var(--night);
  border: 2px solid var(--ink);
  box-shadow: inset 2px 2px 0 var(--steel6), var(--shadow);
}
.split-t { margin-bottom: 9px; font: 700 12px/1.3 var(--ui); text-transform: uppercase; letter-spacing: .03em; color: var(--lamp); }
.split-bar { display: flex; gap: 2px; height: 38px; padding: 0; background: var(--ink); border: 2px solid var(--ink); }
.seg {
  display: flex; align-items: center; justify-content: center;
  min-width: 0; overflow: hidden;
  font: 700 12px/1 var(--ui); color: var(--ink); white-space: nowrap;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .38), inset -2px -2px 0 rgba(0, 0, 0, .22);
}
.seg-fund, .sw-fund { background: var(--fee); }
.seg-burn, .sw-burn { background: var(--ember); }
.seg-team, .sw-team { background: var(--steel3); }
.seg-up, .sw-up { background: var(--grass3); }
.seg-creator, .sw-creator { background: var(--lamp); }
.seg-meteora, .sw-meteora { background: var(--paper3); }
.split-key { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 5px; }
.split-key li { display: flex; align-items: baseline; gap: 10px; font-size: 17px; line-height: 1.45; }
.split-key li > span { min-width: 0; }
.split-key b { min-width: 3.6em; font: 700 13px/1 var(--ui); color: var(--ink); }
.sw { flex: none; width: 14px; height: 14px; border: 2px solid var(--ink); transform: translateY(2px); }

/* who sees a prompt */
.hops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hop {
  position: relative; min-width: 0; padding: 12px 13px 15px;
  color: var(--paper); background: var(--night);
  border: 2px solid var(--ink);
  box-shadow: inset 2px 2px 0 var(--steel6), var(--shadow);
}
.hop::before {
  content: ""; display: block; width: 100%; height: 6px; margin-bottom: 10px;
  background: repeating-linear-gradient(90deg, var(--steel3) 0 6px, transparent 6px 8px);
}
.hop-warn::before { background: repeating-linear-gradient(90deg, var(--ember) 0 6px, transparent 6px 8px); }
.hop-ok::before { background: repeating-linear-gradient(90deg, var(--mint) 0 6px, transparent 6px 8px); }
.hop-name { font: 700 16px/1.2 var(--ui); text-transform: uppercase; color: var(--lamp); }
.hop-sub { margin: 4px 0 12px; font-size: 15px; line-height: 1.35; color: var(--steel1); }
.hop dl { display: grid; gap: 9px; }
.hop dt { font: 400 11px/1.3 var(--ui); text-transform: uppercase; letter-spacing: .04em; color: var(--steel3); }
.hop dd { font-size: 15px; line-height: 1.42; color: #e6ebe4; }

/* the anchoring chain */
.chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.chain li {
  position: relative;
  display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 4px 16px; align-items: center;
  padding: 10px 14px;
  background: var(--paper2);
  border: 2px solid var(--ink);
  box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--paper3);
}
.chain li:not(:last-child)::after {
  content: ""; position: absolute; left: 30px; bottom: -20px; width: 14px; height: 16px;
  background: var(--ink);
  clip-path: polygon(28% 0, 72% 0, 72% 50%, 100% 50%, 100% 63%, 86% 63%, 86% 75%, 71% 75%, 71% 88%, 57% 88%, 57% 100%, 43% 100%, 43% 88%, 29% 88%, 29% 75%, 14% 75%, 14% 63%, 0 63%, 0 50%, 28% 50%);
}
.chain-k { font: 700 13px/1.3 var(--ui); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); overflow-wrap: anywhere; }
.chain-v { font-size: 16px; line-height: 1.42; color: #2f3354; }
.chain-end { background: var(--ink) !important; box-shadow: inset 2px 2px 0 #2f3458 !important; }
.chain-end .chain-k { color: var(--lamp); }
.chain-end .chain-v { color: var(--steel1); }

/* ---------------- tables (styled like the city's panels) ---------------- */
.tbl { margin-top: 1.6em; margin-bottom: .4em; min-width: 0; }
.prose > .tbl + p, .prose > .tbl + h3 { margin-top: 1.5em; }
.tbl-cap {
  display: flex; align-items: center; gap: 8px;
  min-height: 32px; padding: 6px 10px;
  font: 700 12px/1.3 var(--ui); text-transform: uppercase; letter-spacing: .03em;
  color: var(--paper);
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255, 255, 255, .07) 2px 4px), var(--steel7);
  border: 2px solid var(--ink); border-bottom: 0;
}
.tbl:has(.is-scroll) .tbl-cap::after {
  content: "Scroll"; margin-left: auto; flex: none;
  padding: 3px 20px 2px 6px;
  font: 400 11px/1 var(--ui); color: var(--ink);
  background: var(--steel3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%2315191c' d='M0 3h5v2H0zM4 1h1v6H4zM5 2h1v4H5zM6 3h1v2H6z'/%3E%3C/svg%3E") right 5px center / 9px 9px no-repeat;
  border: 2px solid var(--ink);
}
.tbl-wrap {
  overflow-x: auto; overscroll-behavior-x: contain;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--paper3), var(--shadow);
  scrollbar-color: var(--paper3) var(--paper);
}
.tbl table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45; color: var(--text); }
.tbl th, .tbl td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 2px dotted var(--paper3); }
.tbl thead th {
  font: 400 12px/1.3 var(--ui); text-transform: uppercase; letter-spacing: .03em;
  color: var(--paper4); background: var(--paper2);
  border-bottom: 2px solid var(--ink); white-space: nowrap;
}
.tbl tbody th { min-width: 7.5em; font: 700 12px/1.6 var(--ui); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.tbl tbody tr:last-child > * { border-bottom: 0; }
.tbl tbody tr:nth-child(even) > * { background: rgba(220, 207, 174, .32); }
.tbl .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl-num td, .tbl-num thead th:not(:first-child) { text-align: right; white-space: nowrap; }
.tbl-num td { font: 700 14px/1.6 var(--ui); color: var(--ink); }
.tbl-w5 { min-width: 30em; }
.tbl-w6 { min-width: 36em; }
.tbl-w7 { min-width: 44em; }
.tbl-keys tbody th { white-space: nowrap; }
.tbl-note { margin-top: 10px; max-width: var(--measure); font-size: 15px; line-height: 1.45; color: var(--text-soft); }

/* ---------------- callouts ---------------- */
.callout { margin-top: 1.6em; padding: 16px 20px 18px; border: 2px solid var(--ink); }
.prose > .callout + p { margin-top: 1.5em; }
.callout h3 {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font: 700 13px/1.3 var(--ui); text-transform: uppercase; letter-spacing: .03em;
}
.callout ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.callout li { position: relative; padding-left: 20px; font-size: 17px; line-height: 1.52; }
.callout li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; }
.callout p { font-size: 17px; line-height: 1.55; }
.callout-dark {
  color: var(--paper); background: var(--night);
  box-shadow: inset 2px 2px 0 var(--steel6), var(--shadow);
}
.callout-dark h3 { color: var(--lamp); }
.callout-dark li, .callout-dark p { color: #e6ebe4; }
.callout-dark b { color: #fff; }
.callout-dark li::before { background: var(--fee); }
.callout-dark code { background: rgba(255, 255, 255, .1); box-shadow: none; color: var(--paper); }
.callout-lamp {
  background: #fff6d6;
  box-shadow: inset 0 0 0 2px var(--lamp), var(--shadow);
}
.callout-lamp h3 { color: var(--ink); }
.callout-lamp li::before { background: var(--ember); box-shadow: 2px 2px 0 rgba(28, 31, 54, .3); }

/* ---------------- references ---------------- */
.prose > ol.refs { list-style: none; padding: 0; display: grid; gap: 12px; counter-reset: ref; }
.refs li {
  counter-increment: ref; position: relative;
  max-width: none; padding: 2px 6px 2px 50px;
  font-size: 16px; line-height: 1.5; overflow-wrap: anywhere;
  scroll-margin-top: 24px;
}
.refs li::before {
  content: "[" counter(ref) "]"; position: absolute; left: 4px; top: 2px;
  font: 700 12px/2 var(--ui); color: var(--brick);
}
.refs li:target { background: #fff6d6; box-shadow: inset 0 0 0 2px var(--lamp); }

/* ---------------- wide screens: sticky contents ---------------- */
@media (min-width: 1100px) {
  .wp { grid-template-columns: 276px minmax(0, 880px); justify-content: center; gap: 32px; }
  .toc { position: sticky; top: calc(var(--topbar-h, 60px) + 16px); align-self: start; }
  .toc-win { max-height: calc(100vh - var(--topbar-h, 60px) - 32px); max-height: calc(100dvh - var(--topbar-h, 60px) - 32px); overflow-y: auto; }
}

/* ---------------- tablet ---------------- */
@media (max-width: 1099px) {
  .wp { max-width: 920px; }
  .toc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }
}
@media (max-width: 860px) {
  .hops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .title-meta { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------- phones: Pocket City (720 px and narrower, same as style.css) ----------------
   Full-bleed sections with sticky title strips, sentence-case headings, no drop shadows, and one
   level of framing: a section holds formula boxes, figures, tables and callouts, nothing deeper. */
@media (max-width: 720px) {
  body { font-size: 17px; }
  :root { --hair: rgba(28, 31, 54, .14); --shadow: none; }

  .wp { padding: 0 0 28px; gap: 0; }
  .toc-win { border-left: 0; border-right: 0; border-top: 0; box-shadow: none; }
  .toc-sum { min-height: 48px; padding: 0 16px; }
  .toc-list { grid-template-columns: minmax(0, 1fr); padding: 6px 8px 10px; }
  .toc-list a { align-items: center; min-height: 44px; }
  .toc-back { display: none; }   /* the tab bar goes home */

  .title { margin: 0; border-left: 0; border-right: 0; box-shadow: none; }
  .title-body { padding: 0 16px 24px; }
  .cover { margin: 0 -16px 18px; border: 0; border-bottom: 2px solid var(--ink); box-shadow: none; }
  .kicker { font-size: 11px; }
  .title-h { margin: 8px 0 10px; font-size: 30px; line-height: 1.1; text-transform: none; letter-spacing: 0; text-shadow: 2px 2px 0 var(--paper3); }
  .title-sub { font-size: 19px; line-height: 1.35; }
  .version { margin-top: 14px; }
  .version-chip { font-size: 12px; }
  .title-meta { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 18px; border-top: 1px solid var(--hair); }
  .title-meta > div { padding: 10px 0; background: none; box-shadow: none; border-bottom: 1px solid var(--hair); }

  .sec { margin: 0; border-left: 0; border-right: 0; border-top: 0; box-shadow: none; scroll-margin-top: 0; }
  .sec-feature { box-shadow: none; border-bottom-color: var(--ink); }
  .sec-feature .sec-bar { box-shadow: inset 0 -3px 0 var(--lamp); }
  .sec-bar {
    position: sticky; z-index: 5; top: calc(var(--topbar-h, 56px) + env(safe-area-inset-top, 0px));
    min-height: 44px; padding: 6px 16px;
  }
  .sec-bar h2 { gap: 10px; font-size: 15px; line-height: 1.25; text-transform: none; letter-spacing: 0; }
  .sec-n { min-width: 30px; height: 24px; font-size: 12px; }
  .sec-body { padding: 20px 16px 28px; }

  .prose { font-size: 17px; line-height: 1.62; }
  .prose .lead { font-size: 19px; }
  .prose > h3 { font-size: 16px; text-transform: none; letter-spacing: 0; }
  .prose > ul > li { padding-left: 20px; }
  .prose > ul > li::before { left: 2px; }
  .punch { font-size: 19px; text-transform: none; letter-spacing: 0; }

  .fx-b { padding: 12px 13px 13px; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #2c315e; }
  .fx-b .c { display: inline-block; }
  .fig-box { padding: 10px 8px; box-shadow: inset 2px 2px 0 #2c5175; }
  .split { padding: 10px 10px 12px; box-shadow: inset 2px 2px 0 var(--steel6); }
  .split-bar { height: 32px; }
  .seg { font-size: 10px; }
  .split-key li { font-size: 15.5px; gap: 8px; }
  .chain li { grid-template-columns: minmax(0, 1fr); padding: 9px 12px; }
  .hops { grid-template-columns: minmax(0, 1fr); }
  .hop { box-shadow: inset 2px 2px 0 var(--steel6); }
  .tbl-wrap { box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--paper3); }
  .tbl table { font-size: 15px; }
  .tbl th, .tbl td { padding: 8px 10px; }
  .callout { padding: 14px 14px 16px; }
  .callout-dark { box-shadow: inset 2px 2px 0 var(--steel6); }
  .callout-lamp { box-shadow: inset 0 0 0 2px var(--lamp); }
  .callout li, .callout p { font-size: 16px; }
  .refs li { padding-left: 44px; font-size: 15px; }
}

@media (max-width: 380px) {
  .title-h { font-size: 28px; }
}

/* ---------------- motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------------- print ---------------- */
@media print {
  body { background: #fff; }
  .top, .toc, .skip, .foot { display: none; }
  .wp { display: block; padding: 0; }
  .sec, .win { box-shadow: none; break-inside: auto; }
  .sec-bar, .win-bar, .tbl-cap { color: var(--ink); background: var(--paper2); }
  .fx-b { white-space: pre-wrap; }
  .tbl-wrap { overflow: visible; }
}