/* home-v24 PAPER preview: colours mapped by ../../build_paper.py (paper_rgb) from /home-assets-2026-10-10/v21.css */
/* home-v21 (2026-10-10): final sophistication pass. Design only; no copy changes. Loaded after every earlier sheet.
   Numbers (A1..) match REVIEW.md. */

/* A1. Headings wrap on purpose: balanced lines, the gold phrase kept whole, no one-word last lines (both reviewers) */
html[data-v21] h1, html[data-v21] h2, html[data-v21] h3 { text-wrap: balance; }
html[data-v21] .ht-results h2 { max-width: 32ch; }
html[data-v21] .a4-lab h2 { max-width: 1000px; }
html[data-v21] .a4-lab h2 a { text-decoration-thickness: 1px; text-underline-offset: .14em; text-decoration-color: rgba(107,74,43,.5); }

/* A2. Running text: no orphans; a book measure (~70 characters) for long paragraphs (both reviewers) */
html[data-v21] p, html[data-v21] li, html[data-v21] dd, html[data-v21] figcaption { text-wrap: pretty; }
@media (min-width: 1000px) {
  html[data-v21] .m-sec .m-wrap > .m-body, html[data-v21] .m-sec .m-wrap > p.ht-lead { max-width: 68ch; }
}

/* A3. Top bar: the nav is wayfinding, quieter than the wordmark; phone Menu a hairline, not a frame (both) */
html[data-v21] .topbar .nav a:not(.m-btn) { font-size: 1.1875rem !important; font-weight: 400 !important; letter-spacing: .005em; }
html[data-v21][data-v18="night"] .topbar .nav a:not(.m-btn) { color: var(--v18-muted) !important; }
html[data-v21][data-v18="night"] .topbar .nav a:not(.m-btn):hover,
html[data-v21][data-v18="night"] .topbar .nav a:not(.m-btn):focus-visible { color: var(--v18-paper) !important; }
html[data-v21] .menubtn { border-color: rgba(31,27,22,.30) !important; font-weight: 400 !important; font-size: 1rem !important; padding: 0 12px !important; }

/* A4. Section rhythm: a longer interval between chapters, where the field shows (both) */
@media (min-width: 1000px) {
  html[data-v21] .m-sec { padding-top: clamp(72px, 7vw, 120px) !important; padding-bottom: 24px !important; }
}
html[data-v21] .v11-results { gap: 44px; }
html[data-v21][data-v19c] .v11-card { border-top-color: rgba(31,27,22,.22) !important; }

/* A5. Links and hairlines finished in Garamond's weight, not the browser default (both) */
html[data-v21] a.m-link, html[data-v21] .m3-hosted a, html[data-v21] .m-foot a {
  text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-skip-ink: auto; }
html[data-v21] .m-foot a { text-decoration-color: rgba(107,74,43,.42); }
html[data-v21] .m-foot a:hover { text-decoration-color: var(--v18-gold); }
html[data-v21] .m3-fcol li { border-bottom-color: var(--c-hair) !important; }
html[data-v21] .m3-fcol { border-top-color: var(--c-hair-2) !important; }

/* A6. Why it works: the three plate captions on one baseline, in the page's small caps (both) */
html[data-v21] .m3j-brains { align-items: end; }
html[data-v21] .m3j-brains figcaption { font-size: 1rem !important; font-weight: 500 !important; text-transform: lowercase !important;
  font-variant-caps: small-caps; letter-spacing: .06em; }
/* plate I drew over ~5.5 s after it entered view, so a reader scrolling past saw an empty frame (both): same drawing, ~2 s */
html[data-v21] .p1g.p1go .p1d, html[data-v21] .p1g.p1go .p1i { animation-delay: calc(var(--d) * .35) !important; animation-duration: calc(var(--u) * .6) !important; }

/* A7. Charts: the three bar charts pulled toward the line chart's finish (both; CSS only, PNGs untouched).
   The BABILong chart's method notes were regenerated at 15 pt (was 11): see figs-src-night/make_babilong_v21.py */
html[data-v21][data-v19c] #r-current .v11-fig img,
html[data-v21][data-v19c] #r-models .v11-fig img,
html[data-v21][data-v19c] .m3j-chart img { filter: saturate(.82) brightness(.96) !important; }

/* A8. Hero: the example is the next reading step, not part of the headline block (both) */
@media (min-width: 1000px) {
  html[data-v21] .m-hero-actions { margin-top: 32px; }
  html[data-v21] .a6-ask { margin-top: 56px !important; }
}
/* the Ask card's reserved question line is empty until a question is asked: no 50 px hole (Fable: broken) */
html[data-v21] .a6-ask .v4q:has(#askTxt:empty) { min-height: 0; }
/* the "live map" line is a caption, not a heading (Fable; Astra: small type by role) */
html[data-v21] .a6-live { font-weight: 400 !important; font-style: italic; color: var(--v18-muted) !important; }

/* A9. Phone: a scroll cue on panned charts, so a cut label reads as "continues" (Fable: broken). Phone type was measured
   at 17 px body / 42 px H1 already, so the reviewers' "large type on phone" items were not applied (see REVIEW.md) */
@media (max-width: 699px) {
  html[data-v21] .v11-pan { -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); }
}

/* A10. Code in the page's one face (Astra: monospace breaks the Garamond-only ruling; the two code blocks also used two different monos) */
html[data-v21] .m3j-cmd, html[data-v21] .m3j-cmd code, html[data-v21] .m3j-tools code {
  font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-variant-numeric: lining-nums; letter-spacing: .01em; }
html[data-v21] .m3j-cmd code { font-size: 1.0625rem; }

/* A11. Footer mark balanced to the wordmark's cap height (Fable) */
html[data-v21] .m-foot-id .v14-mark { width: 38px !important; flex-basis: 38px !important; height: auto; }
html[data-v21] .m3j-tools code { font-weight: 500; color: var(--v18-paper); }