/* ============================================================
   Data System Papers — Distilled
   Neo-Brutalist Blueprint, low-contrast variant.

   Same vocabulary as the Data System School landing page and the
   Data System Timeline — cream paper, hard 2px borders, offset
   shadows, Space Grotesk + JetBrains Mono — but deliberately
   softened for long-form reading:

     • ink is warm charcoal (#3a362e), never pure black
     • borders are muted stone (#8e887a), never ink-coloured
     • shadows are 14% warm charcoal, so they read as depth not glare
     • the accent blue/red are desaturated so they don't vibrate
       against the cream, and tints stay in a narrow luminance band

   Everything here still clears WCAG AA on --bg; the contrast is
   lowered inside that budget, not below it.
   ============================================================ */
:root {
    --bg: #fdfcf8;
    --bg-warm: #f6f3ea;
    --paper: #ffffff;
    /* Warm charcoal, one step lighter than the timeline's --ink. */
    --ink: #3a362e;
    --blue: #4f79c8;
    --blue-deep: #3f66b0;
    --yellow: #f6e6ae;
    --red: #b46256;
    --green: #5f8468;
    --tint-blue: #eef3fa;
    --tint-red: #faf0ed;
    --tint-yellow: #fbf5e2;
    --tint-green: #eef4ef;
    --tint-neutral: #f7f5ee;
    --muted: #625d53;
    /* Carries the 11px mono micro-labels (kickers, venues, TOC eyebrows). Those
       are small and not bold-large, so they need the full 4.5:1 — one notch
       darker than the timeline's #8a8578, which only reaches 3.4:1. */
    --muted2: #726d5f;
    --grid-line: #f2f0e8;
    --shadow: rgba(58, 54, 46, 0.14);
    --line: #8e887a;
    /* Hairline rules inside cards — lighter than --line so nested boxes
       don't stack into a heavy grid. */
    --line-soft: #ded8c9;
    --band: #55503f;
    --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
    --sans: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --measure: 74ch;
}

* { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
    margin: 0;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--bg);
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 34px 34px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Traditional Chinese: hand the CJK glyphs to a proper serif-free system
   stack and open the leading up a touch — Space Grotesk has no CJK
   coverage, so without this the browser picks whatever it likes. */
html[lang^="zh"] body {
    font-family: 'Space Grotesk', 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei',
                 'Hiragino Sans TC', system-ui, sans-serif;
    line-height: 1.78;
    letter-spacing: .012em;
}

a { color: var(--blue-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
p { text-wrap: pretty; }

.wrapper { width: min(1220px, calc(100vw - 32px)); margin: 0 auto; }
.wrapper-narrow { width: min(980px, calc(100vw - 32px)); margin: 0 auto; }

.skip-nav {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--band); color: #f6f4ed; padding: 12px 16px;
    border: 2px solid var(--line); font-weight: 700; text-decoration: none;
}
.skip-nav:focus { left: 0; }

/* ============ Shared atoms ============ */
.kicker {
    display: inline-flex; align-items: center;
    font-family: var(--mono);
    font-size: 11px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted2);
}
.kicker::before { content: "// "; color: var(--blue); white-space: pre; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 2px solid var(--line); background: var(--paper); color: var(--ink);
    padding: 10px 15px; cursor: pointer; white-space: nowrap; text-decoration: none;
    font-family: var(--sans);
    font-size: 12.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
    box-shadow: 3px 3px 0 var(--shadow);
    transition: transform .08s ease, box-shadow .08s ease;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow); text-decoration: none; }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--shadow); }
.btn-primary { background: var(--tint-blue); }
html[lang^="zh"] .btn { text-transform: none; letter-spacing: .04em; }

.badge {
    flex: 0 0 auto; padding: 3px 9px;
    font-family: var(--mono); font-size: 10.5px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--ink); border: 2px solid var(--line); background: var(--yellow);
}
.badge-quiet { background: var(--tint-neutral); color: var(--muted); }

/* ============ Hero ============ */
.hero { padding: 46px 0 30px; }
.hero h1 {
    font-size: clamp(2rem, 5.2vw, 4.1rem);
    line-height: .99;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    font-weight: 700;
    margin: 18px 0 16px;
    max-width: 1050px;
    text-wrap: balance;
}
html[lang^="zh"] .hero h1 { line-height: 1.14; letter-spacing: -0.005em; }
.subtitle { max-width: 74ch; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.07rem); font-weight: 500; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin: 30px 0 6px; }
.stat { background: var(--paper); border: 2px solid var(--line); box-shadow: 3px 3px 0 var(--shadow); padding: 15px 17px; }
.stat strong { display: block; font-size: 1.85rem; line-height: 1.1; letter-spacing: -0.02em; }
.stat span {
    font-family: var(--mono); font-size: 10.5px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--muted2);
}

/* ============ Collapsibles (compact widths) ============
   Two things fold away on narrow screens, both on the same mechanism as the
   timeline site: the index's filter bar (which is sticky, so a stacked search +
   two selects + reset would eat most of a phone screen) and each paper's
   sidebar (which carries the TOC). A grid whose single row animates between
   0fr and 1fr gives a height transition without hard-coding a max-height. */
.nav-bar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 10px 0; }
.filter-toggle, .toc-toggle {
    display: none; width: 100%;
    border: 2px solid var(--line); background: var(--paper); color: var(--ink);
    padding: 11px 14px; cursor: pointer;
    font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
    align-items: center; justify-content: space-between;
    box-shadow: 3px 3px 0 var(--shadow);
}
html[lang^="zh"] .filter-toggle, html[lang^="zh"] .toc-toggle { text-transform: none; letter-spacing: .04em; }
.filter-toggle:hover, .toc-toggle:hover { background: var(--tint-blue); }
.filter-toggle:focus-visible, .toc-toggle:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.filter-toggle .toggle-icon, .toc-toggle .toggle-icon {
    display: inline-block; font-size: .8rem; transition: transform .25s ease;
}
.filter-toggle.open .toggle-icon, .toc-toggle.open .toggle-icon { transform: rotate(180deg); }
.filter-body, .toc-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s ease; }
.toc-body > div { display: grid; gap: 14px; }
@media (prefers-reduced-motion: reduce) {
    .filter-body, .toc-body { transition: none; }
    .filter-toggle .toggle-icon, .toc-toggle .toggle-icon { transition: none; }
}

/* ============ Controls (index) ============ */
.controls-wrap {
    position: sticky; top: 0; z-index: 20;
    background: var(--bg);
    border-top: 2px solid var(--line); border-bottom: 2px solid var(--line);
}
.controls { display: grid; grid-template-columns: 1.6fr .9fr .9fr auto; gap: 12px; align-items: center; padding: 13px 0; }
input, select, button { font: inherit; }
.search, .select {
    width: 100%; border: 2px solid var(--line); border-radius: 0;
    background: var(--paper); color: var(--ink); padding: 10px 13px;
    font-family: var(--sans); font-weight: 500; outline: none;
}
.search::placeholder { color: var(--muted2); }
.search:focus, .select:focus { outline: 3px solid var(--blue); outline-offset: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 14px; }
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    border: 2px solid var(--line); background: var(--paper); color: var(--ink);
    padding: 6px 11px; cursor: pointer;
    font-family: var(--mono); font-size: 11px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
}
.chip:hover { background: var(--tint-blue); }
.chip.active { background: var(--yellow); }

.lang-switch { display: inline-flex; align-items: center; gap: 8px; }
.lang-select {
    width: auto; padding: 10px 32px;
    text-align: center; text-align-last: center;
    font-size: .9rem; font-weight: 700; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    background: var(--paper) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233a362e'><polygon points='5 9 19 9 12 16'/></svg>") no-repeat right 11px center / 10px;
}

/* ============ Index: era sections + paper grid ============ */
/* The controls bar is sticky and edged with a 2px rule, and the era bands are
   edged the same way — with nothing between them the first band fuses onto the
   underside of the bar the moment it pins. Hold the list off it. */
.index-main { padding-top: 26px; }
.era-section { margin: 0 0 44px; }
.era-heading {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px;
    padding: 11px 17px;
    background: var(--band); color: #f4f1e7;
    border: 2px solid var(--line);
    box-shadow: 3px 3px 0 var(--shadow);
}
.era-heading span { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; }
html[lang^="zh"] .era-heading span { text-transform: none; }
.era-heading strong { font-family: var(--mono); color: var(--yellow); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.paper-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.paper-card {
    display: flex; flex-direction: column;
    background: var(--paper); border: 2px solid var(--line);
    box-shadow: 3px 3px 0 var(--shadow);
    padding: 18px; color: inherit; text-decoration: none;
    transition: transform .08s ease, box-shadow .08s ease, background .12s ease;
}
.paper-card:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow); background: #fffefa; text-decoration: none; }
.paper-card:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.pc-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.pc-year { font-family: var(--mono); color: var(--blue-deep); font-weight: 700; font-size: .82rem; letter-spacing: .04em; }
.paper-card h3 { margin: 5px 0 0; font-size: 1.14rem; line-height: 1.22; letter-spacing: -.01em; }
.pc-authors { color: var(--muted2); font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-top: 10px; }
.pc-line { color: var(--muted); font-size: .93rem; margin: 9px 0 0; flex: 1 1 auto; }
.pc-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 11px; border-top: 2px solid var(--grid-line); }
/* Venues run long (the B-tree one is a full technical-report citation), so clamp
   to two lines rather than let one card grow taller than the rest of its row. */
.pc-venue {
    font-family: var(--mono); font-size: 10.5px; color: var(--muted2); font-weight: 700; letter-spacing: .04em;
    min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-go { flex: 0 0 auto; white-space: nowrap; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-deep); }

.no-results { display: none; padding: 30px; text-align: center; color: var(--muted); border: 2px dashed var(--line); background: var(--paper); }

/* ============ Paper page ============ */
.paper-layout { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 34px; padding: 28px 0 64px; align-items: start; }
.paper-body { min-width: 0; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 0 0; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted2); }
.crumbs a { color: var(--muted); }
.crumbs .sep { color: var(--line); }

.paper-hero { padding: 20px 0 24px; }
.paper-hero h1 {
    font-size: clamp(1.65rem, 3.6vw, 2.85rem);
    line-height: 1.06; letter-spacing: -0.02em; font-weight: 700;
    margin: 12px 0 12px; max-width: 22ch; text-wrap: balance;
}
/* CJK glyphs are square and already tightly set — the negative tracking that
   flatters the Latin display type just crowds them, so reset it. */
html[lang^="zh"] .paper-hero h1 { line-height: 1.24; max-width: 30ch; letter-spacing: 0; }
html[lang^="zh"] .paper-card h3,
html[lang^="zh"] .block h3 { letter-spacing: 0; line-height: 1.38; }
.paper-hero .one-liner { max-width: 68ch; color: var(--muted); font-size: 1.05rem; font-weight: 500; }
.paper-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.fact {
    display: inline-flex; align-items: center; gap: 7px;
    border: 2px solid var(--line); background: var(--paper);
    padding: 5px 10px;
    font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
}
.fact b { color: var(--muted2); text-transform: uppercase; font-weight: 700; }
.fact span { color: var(--ink); font-family: var(--sans); font-size: 12.5px; letter-spacing: 0; }

/* Section blocks */
.sec { margin: 0 0 30px; }
.sec > h2 {
    display: flex; align-items: baseline; gap: 10px;
    font-size: 12px; font-weight: 700; margin: 0 0 13px;
    font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.sec > h2::before { content: "// "; color: var(--blue); }
.sec > h2 em { font-style: normal; color: var(--muted2); letter-spacing: .04em; font-size: 10.5px; }

.panel {
    background: var(--paper); border: 2px solid var(--line);
    box-shadow: 3px 3px 0 var(--shadow);
    padding: 20px 22px;
}
.panel p { margin: 0 0 12px; max-width: var(--measure); }
.panel p:last-child { margin-bottom: 0; }
.panel-tint-blue { background: var(--tint-blue); }
.panel-tint-yellow { background: var(--tint-yellow); }
.panel-tint-red { background: var(--tint-red); }
.panel-tint-green { background: var(--tint-green); }
.panel-tint-neutral { background: var(--tint-neutral); }
.lead { font-size: 1.06rem; line-height: 1.66; }

/* Numbered idea / mechanic blocks */
.blocks { display: grid; gap: 14px; }
.block {
    background: var(--paper); border: 2px solid var(--line);
    box-shadow: 3px 3px 0 var(--shadow);
    padding: 17px 19px;
    display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 14px; align-items: start;
}
.block .n {
    font-family: var(--mono); font-size: 12px; font-weight: 700;
    color: var(--blue-deep); background: var(--tint-blue);
    border: 2px solid var(--line);
    width: 34px; height: 34px; display: grid; place-items: center;
}
.block h3 { margin: 4px 0 7px; font-size: 1.05rem; line-height: 1.25; letter-spacing: -.005em; }
.block p { margin: 0; color: #46423a; max-width: var(--measure); font-size: .96rem; }
.blocks-mech .block .n { color: var(--red); background: var(--tint-red); }

/* Bullet lists in tinted panels */
ul.tick { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
ul.tick li { display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 11px; align-items: start; font-size: .96rem; max-width: var(--measure); }
ul.tick li::before {
    content: ""; margin-top: .42em; width: 9px; height: 9px;
    border: 2px solid var(--line); background: var(--paper);
}
ul.tick.t-red li::before { background: var(--red); border-color: var(--red); }
ul.tick.t-blue li::before { background: var(--blue); border-color: var(--blue); }
ul.tick.t-green li::before { background: var(--green); border-color: var(--green); }
ul.tick.t-yellow li::before { background: #d9bf63; border-color: #c9ae53; }

/* Glossary */
.terms { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.term { background: var(--paper); border: 2px solid var(--line); padding: 13px 15px; }
.term dt { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; color: var(--blue-deep); margin: 0 0 5px; }
.term dd { margin: 0; font-size: .92rem; color: var(--muted); }

/* Pull quotes */
.quote {
    border: 2px solid var(--line); border-left: 6px solid var(--blue);
    background: var(--bg-warm);
    padding: 16px 19px; margin: 0 0 12px;
}
.quote p { margin: 0 0 8px; font-size: 1rem; line-height: 1.62; max-width: var(--measure); }
.quote footer { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted2); }

/* Timeline linkage strip */
.tl-link { display: grid; gap: 10px; }
.tl-row { display: grid; grid-template-columns: 128px minmax(0,1fr); gap: 14px; align-items: start; font-size: .95rem; }
.tl-row b { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted2); padding-top: .28em; }

/* Sidebar / TOC */
.paper-aside { position: sticky; top: 16px; align-self: start; display: grid; gap: 14px; }
.side-panel { background: var(--paper); border: 2px solid var(--line); box-shadow: 3px 3px 0 var(--shadow); padding: 16px 17px; }
.side-panel h2 { font-size: 11px; font-weight: 700; margin: 0 0 10px; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.side-panel h2::before { content: "// "; color: var(--blue); }
.toc { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; }
.toc a { display: block; padding: 6px 8px; font-size: .88rem; color: var(--muted); border-left: 3px solid var(--grid-line); }
.toc a:hover { background: var(--tint-blue); color: var(--ink); text-decoration: none; }
.toc a.active { border-left-color: var(--blue); color: var(--ink); background: var(--tint-blue); font-weight: 700; }
.side-links { display: grid; gap: 8px; }
.side-links a { font-size: .89rem; color: var(--muted); display: flex; gap: 7px; align-items: baseline; }
.side-links a:hover { color: var(--ink); }

/* Prev / next */
.pager { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin: 6px 0 0; }
.pager a {
    background: var(--paper); border: 2px solid var(--line); box-shadow: 3px 3px 0 var(--shadow);
    padding: 14px 16px; color: inherit; text-decoration: none;
    transition: transform .08s ease, box-shadow .08s ease;
}
.pager a:hover { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--shadow); text-decoration: none; }
.pager b { display: block; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted2); margin-bottom: 5px; }
.pager span { font-size: .98rem; font-weight: 700; line-height: 1.25; }
.pager .next { text-align: right; }
.pager .spacer { visibility: hidden; }

/* Footer */
.footer { padding: 30px 0 56px; color: var(--muted); border-top: 2px solid var(--line); background: var(--bg-warm); font-size: .92rem; }
.footer strong { color: var(--ink); }
.footer p { margin: 0 0 8px; }

mark { background: var(--yellow); color: var(--ink); padding: 0 .12em; }

.btn:focus-visible, .chip:focus-visible, .lang-select:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* External-link arrow, matching the timeline's ref chips. */
.ext::after {
    content: ''; display: inline-block; width: 11px; height: 11px; margin-left: 5px; vertical-align: -1px;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f79c8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>") no-repeat center / contain;
}

@media (max-width: 1080px) {
    /* Flex, not a one-column grid: the sidebar below pins itself with sticky,
       and a grid item's sticky travel is capped at its own grid area — here a
       row exactly as tall as the item, so it would never move. A flex item
       sticks against the flex container instead, which spans the whole paper. */
    .paper-layout { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
    /* order:-1 lifts the sidebar above the prose — the TOC is what you want at
       the top of a long paper, and in source order it trails the body so the
       desktop grid can put it in the right-hand column. Pinning it keeps the
       toggle in reach at every scroll depth instead of only at the very top,
       and align-self goes back to stretch: the desktop rule pins it to start so
       the sticky column can hug its content, but on a single column that same
       rule shrink-wraps the bar to the width of its longest link. */
    .paper-aside {
        position: sticky; top: 0; z-index: 30; order: -1;
        align-self: stretch; margin-bottom: 24px;
    }
    .toc { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); display: grid; }
    .toc-toggle { display: flex; }
    /* The panel hangs off the pinned toggle rather than sitting in flow, so
       opening it floats the links over the prose instead of pushing 480px of
       article down the page. That shove was what broke the links: the browser
       aimed its smooth scroll at a section the collapse then slid out from
       under it, landing a screen and a half past the heading you tapped. */
    .toc-body {
        position: absolute; top: 100%; left: 0; right: 0;
        grid-template-rows: 0fr;
    }
    .toc-body.open { grid-template-rows: 1fr; }
    /* Clipping the collapsed rows would cut the panels' offset shadows too, so
       the wrapper keeps a few pixels of room for them, and carries the page
       colour: floating over the prose, the seam between the two panels would
       otherwise be a slot with someone's sentence running through it. Eleven
       sections plus Elsewhere can outgrow a short viewport, hence the cap. */
    .toc-body > div {
        min-height: 0; overflow: hidden; padding: 0; background: var(--bg);
        max-height: calc(100vh - 72px);
        max-height: calc(100dvh - 72px);
    }
    .toc-body.open > div {
        overflow-y: auto;
        /* Keep the dropdown cards flush with the toggle. A conventional
           scrollbar reserves a strip inside this box, which pulled the right
           borders of both panels inward and made the lower card look
           misaligned. Touch/wheel scrolling still works with the chrome
           hidden, and the mobile panels do not need an extra shadow gutter. */
        padding: 0;
        scrollbar-width: none;
    }
    .toc-body.open > div::-webkit-scrollbar { display: none; }
    .toc-body.open .side-panel { box-shadow: none; }
    /* The toggle already says "On this page"; the panel repeating it directly
       underneath reads as a stutter. "Elsewhere" keeps its heading. */
    .toc-body .side-panel:first-child > h2 { display: none; }
    /* Headings have to clear the pinned toggle when a link jumps to them. */
    .sec { scroll-margin-top: 66px; }
}
@media (max-width: 980px) {
    .stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .controls { grid-template-columns: 1fr; }
    .nav-bar { justify-content: space-between; }
    .nav-bar .filter-toggle { flex: 1; width: auto; }
    .filter-toggle { display: flex; }
    .filter-body { grid-template-rows: 0fr; }
    .filter-body.open { grid-template-rows: 1fr; }
    /* Keep the shadow allowance inside the open state. Padding on a 0fr grid
       row still occupies space, which otherwise leaves a stray rule below the
       closed controls on phones. */
    .filter-body > div { min-height: 0; overflow: hidden; padding: 0; }
    .filter-body.open > div { padding: 0 4px 4px 0; }
}
@media (min-width: 981px) {
    /* The language switch is moved into .chips (next to the Timeline link) by
       JS at this width, so the nav bar has nothing left to show. */
    .nav-bar { padding: 0; }
}
@media (max-width: 640px) {
    .stats { grid-template-columns: 1fr; }
    .hero { padding-top: 30px; }
    .paper-grid { grid-template-columns: 1fr; }
    .block { grid-template-columns: 1fr; gap: 10px; }
    .tl-row { grid-template-columns: 1fr; gap: 3px; }
    .pager { grid-template-columns: 1fr; }
    .pager .next { text-align: left; }
    .pager .spacer { display: none; }
    .panel { padding: 16px 17px; }
}
@media print {
    body { background: #fff; }
    .controls-wrap, .paper-aside, .pager, .crumbs { display: none; }
    .paper-layout { display: block; }
    .panel, .block, .stat, .era-heading, .paper-card { box-shadow: none; }
}