/* The Sampling Lab: identity.
   Signature (spec/experience.md): a vivid cobalt colour field carrying a heavy grotesque title and the live hero, and
   a strict figure grammar borrowed from the classic statistics textbook: a dot is one measurement, a short tick is a
   statistic computed from a sample, a dashed black line is the truth you never get to see. */
/* Fonts (inlined rather than @imported: OFL, vendored with `lf fonts`; Greek subset for σ, μ, λ) */
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/libre-franklin-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/libre-franklin-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/libre-franklin-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/libre-franklin-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/source-serif-4-greek-400-normal.woff2") format("woff2"); unicode-range: U+0370-03FF; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/source-serif-4-greek-400-italic.woff2") format("woff2"); unicode-range: U+0370-03FF; }
/* Superscripts and subscripts (U+2070–209F: ⁰ ⁴–⁹ ⁺ ⁻ ⁿ, ₀–₉ ₋ ₓ ₖ …): no @fontsource subset has them, so a fallback face drew them beside the faces' own
   ¹ ² ³ (10⁻²⁹ looked like "10⁻²" + a foreign 9). These companions are the faces' own digits, signs and letters scaled and
   placed on the geometry of their ²; renamed "SL Superiors" inside the files as the OFL asks of modified fonts. */
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/libre-franklin-sups-400-normal.woff2") format("woff2"); unicode-range: U+2070-209F; }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/libre-franklin-sups-600-normal.woff2") format("woff2"); unicode-range: U+2070-209F; }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/libre-franklin-sups-800-normal.woff2") format("woff2"); unicode-range: U+2070-209F; }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/libre-franklin-sups-900-normal.woff2") format("woff2"); unicode-range: U+2070-209F; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/source-serif-4-sups-400-normal.woff2") format("woff2"); unicode-range: U+2070-209F; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/source-serif-4-sups-400-italic.woff2") format("woff2"); unicode-range: U+2070-209F; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/source-serif-4-sups-600-normal.woff2") format("woff2"); unicode-range: U+2070-209F; }

:root {
  --bg: #fff; --surface: #f5f5f2; --ink: #141414; --ink-soft: #2e2e2e; --muted: #626262; --rule: #dcdcd6;
  --accent: #2047d8; --accent-ink: #fff; --link: #1d3fc4; --focus: #1d3fc4; --mark: rgba(32,71,216,.09);
  --font-serif: "Source Serif 4", Charter, "Bitstream Charter", Georgia, serif;
  --font-sans: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans); --font-body: var(--font-serif); --font-ui: var(--font-sans);
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fs-body: 1.1875rem; --lh-body: 1.6; --prose: 41rem; --wide: 66rem; --radius: 2px;
  --fig-bg: #fff; --fig-surface: #f3f3ef; --fig-ink: #141414; --fig-muted: #5e5e5e; --fig-grid: rgba(0,0,0,.07);
  --fig-grid-strong: rgba(0,0,0,.42); --fig-border: transparent;
  /* Okabe–Ito roles, darkened where a thin stroke needs 3:1 on white. Fixed meanings across the site:
     primary = samples and the statistics computed from them; ref = the population and its true values;
     second = misses, false positives, rejections; third = the comparison estimator; ok = hits, coverage. */
  --c-primary: #2047d8; --c-ref: #c47f00; --c-second: #d55e00; --c-third: #a8508a; --c-ok: #007a5a; --c-warn: #c2410c;
  --ctl-accent: #2047d8; --ctl-bg: #fff;
  --band-bg: #2047d8; --band-ink: #fff; --band-muted: rgba(255,255,255,.86);
  --hero-curve: #ffd23f;
  --font-h1: var(--font-sans);
}
:root[data-theme="dark"] {
  --bg: #121316; --surface: #1b1d22; --ink: #ecebe6; --ink-soft: #cfcdc6; --muted: #a3a19a; --rule: #34363c;
  --accent: #7f9cff; --link: #9db3ff; --focus: #9db3ff; --mark: rgba(127,156,255,.14);
  --fig-bg: #121316; --fig-surface: #1d1f24; --fig-ink: #ecebe6; --fig-muted: #a8a69f; --fig-grid: rgba(255,255,255,.08);
  --fig-grid-strong: rgba(255,255,255,.45);
  --c-primary: #8aa6ff; --c-ref: #e6a532; --c-second: #ff8a4c; --c-third: #e08cc4; --c-ok: #3cc59b; --c-warn: #ff8a4c;
  --ctl-accent: #7f9cff; --ctl-bg: #1b1d22;
  /* The field stays a saturated cobalt in dark mode (a darkened field reads as navy, and navy under yellow is one
     step from the banned navy + gold). The page around it goes dark; the band does not. */
  --band-bg: #2047d8; --band-ink: #fff; --band-muted: rgba(255,255,255,.88);
}

/* ---------------------------------------------------------------- type */
body { font-feature-settings: "kern", "liga"; }
h1, h2, h3 { font-family: var(--font-sans); letter-spacing: -0.012em; }
h1 { font-weight: 900; line-height: 1.02; letter-spacing: -0.025em; }
h2 { font-weight: 800; font-size: clamp(1.5rem, 3.4vw, 1.95rem); line-height: 1.15; }
h3 { font-weight: 700; font-size: 1.2rem; }
.prose { font-size: var(--fs-body); }
.prose p { hyphens: auto; -webkit-hyphens: auto; }
.prose strong { font-weight: 600; }
.prose .lede { font-size: 1.2em; line-height: 1.5; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin: .35rem 0; }
var { font-family: var(--font-serif); font-style: italic; }
.eq { font-family: var(--font-serif); font-size: 1.25rem; }
.eq .op { padding: 0 .15em; }
.eq .note { font: 400 .95rem var(--font-ui); color: var(--muted); }
sub, sup { line-height: 0; }
/* x̄ and X̄: a drawn bar over the letter only. text-decoration: overline sits at the line box's top and a combining
   macron falls back to another font, so neither lands on the glyph. The bar is offset right for the italic slant. */
.ov { position: relative; display: inline-block; line-height: 1; text-decoration: none; }
.ov::before { content: ""; position: absolute; left: .2em; right: -.02em; top: .08em; border-top: .068em solid currentColor; }
.ov.cap::before { top: -.12em; left: .14em; right: .02em; }
.dek { font-family: var(--font-serif); }
.meta-line, .kicker { font-family: var(--font-ui); }
.num, .w, .w-readout dd, .inline-out { font-variant-numeric: tabular-nums; }
.small-caps { font-variant-caps: all-small-caps; letter-spacing: .04em; }

/* ---------------------------------------------------------------- header */
.site-header { border-bottom: 1px solid var(--rule); padding: .55rem var(--gutter); }
.wordmark { font: 900 1.12rem/1 var(--font-sans); letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: .45rem; }
.wordmark .wm-dots { display: inline-block; width: 22px; height: 16px; }
.site-nav ul { gap: .95rem; }
.site-nav a { font-size: .86rem; }
@media (min-width: 761px) and (max-width: 1120px) { .site-nav li:nth-child(n+7) { display: none; } .site-nav a { font-size: .8rem; } .site-nav ul { gap: .7rem; } }

/* ---------------------------------------------------------------- colour field (title areas) */
.band { background: var(--band-bg); }
.essay-head-wrap.band { margin-bottom: 2.2rem; padding-bottom: .4rem; }
.essay-head { padding-top: 2.4rem; padding-bottom: 1.6rem; }
.essay-head h1 { font-size: clamp(2.5rem, 7.2vw, 4.6rem); margin: .25em 0 .3em; max-width: 15ch; }
.essay-head .dek { font-size: clamp(1.15rem, 2.3vw, 1.38rem); max-width: 36rem; color: var(--band-ink); }
.band .kicker { font-weight: 600; font-size: .95rem; }
.band .kicker span { color: var(--band-ink); }
.band .meta-line { font-size: .88rem; }
.band :focus-visible { outline-color: #fff; }

/* Home: full-width hero on the colour field */
.home-band { background: var(--band-bg); color: var(--band-ink); }
.home-band .hb-text { max-width: var(--wide); margin: 0 auto; padding: 1.1rem var(--gutter) .2rem; }
.home-band h1 { color: #fff; font-size: clamp(2.7rem, 10.5vw, 7.2rem); margin: 0 0 .12em; max-width: 12ch; }
.home-band .dek { color: #fff; font-size: clamp(1.08rem, 2.4vw, 1.45rem); line-height: 1.38; max-width: 35rem; margin: 0 0 .5rem; }
.home-band .start a { color: #fff; font: 700 1rem var(--font-sans); }
.home-band .hero-fig { margin: 0; padding: 0 0 1.1rem; }
.home-band .hero-fig .widget-mount { background: transparent; border: 0; }
.home-band .hero-fig figcaption { max-width: var(--wide); margin: .2rem auto 0; padding: 0 var(--gutter); color: var(--band-muted); font-size: .9rem; }
.home-band .hero-fig .fig-link { color: var(--band-muted); }
.home-band .w-ctl label, .home-band .w-lab, .home-band .w-check, .home-band .w-note, .home-band .w-ctl output { color: #fff; }
.home-band input[type=range] { accent-color: #fff; }
.home-band .w input[type=number], .home-band .w select { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.6); }
.home-band .w-btn { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.home-band .w-btn.primary { background: #fff; color: var(--band-bg); border-color: #fff; }
.home-band .w-seg { border-color: rgba(255,255,255,.7); }
.home-band .w-seg button { color: #fff; }
.home-band .w-seg button[aria-pressed="true"] { background: #fff; color: var(--band-bg); }
.home-band .w-toolbar .w-btn { background: var(--band-bg); }
.home-band .w-hint { background: transparent; color: rgba(255,255,255,.9); }
@media (min-width: 900px) { .home-band .hb-text { padding-top: 2.4rem; } }

.home-intro { max-width: var(--prose); margin: 2.4rem auto 0; padding: 0 var(--gutter); }
.home-toc { max-width: var(--prose); margin: 1rem auto 3rem; padding: 0 var(--gutter); }
.home-toc h2 { margin-top: 1.6rem; }
.home-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: ch; }
.home-toc li { counter-increment: ch; display: grid; grid-template-columns: 2.6rem 1fr; gap: 0 .6rem; padding: 1rem 0; border-top: 1px solid var(--rule); }
.home-toc li::before { content: counter(ch); font: 900 2rem/1 var(--font-sans); color: var(--accent); }
.home-toc a { font: 800 1.28rem/1.2 var(--font-sans); color: var(--ink); text-decoration: none; }
.home-toc a:hover { color: var(--link); text-decoration: underline; }
.home-toc .q { display: block; font: italic 400 1.02rem/1.45 var(--font-serif); color: var(--ink-soft); margin-top: .25rem; }
.home-toc .d { display: block; font: 400 .92rem/1.45 var(--font-sans); color: var(--muted); margin-top: .2rem; }
.legend-grammar { display: grid; grid-template-columns: auto 1fr; gap: .45rem .9rem; align-items: center; font-size: 1rem; margin: 1.2rem 0; }
.legend-grammar svg { display: block; }

/* ---------------------------------------------------------------- figures */
.figure { margin: 2.4rem 0; }
.figure figcaption { font: 400 .93rem/1.5 var(--font-sans); color: var(--ink-soft); }
.fig-n { font-weight: 800; }
.widget-mount { background: var(--fig-bg); }
.w { gap: .75rem; }
.w-stage { background: var(--fig-bg); }
.w-stage:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.w-ctl label, .w-lab { font-size: .9rem; }
.w-note { font-family: var(--font-serif); font-size: 1.02rem; line-height: 1.5; color: var(--ink); }
.w-note .k { font-family: var(--font-sans); font-weight: 700; }
.w-note b, .w-note strong { font-weight: 600; }
.w-note .c-primary { color: var(--c-primary); font-weight: 600; }
.w-note .c-ref { color: var(--c-ref); font-weight: 600; }
.w-note .c-second { color: var(--c-second); font-weight: 600; }
.w-note .c-third { color: var(--c-third); font-weight: 600; }
.w-note .c-ok { color: var(--c-ok); font-weight: 600; }
.w-eq { font-size: 1.08rem; }
.w-btn, .w-seg button { font-family: var(--font-sans); }
.w-seg button[aria-pressed="true"] { color: #fff; }
:root[data-theme="dark"] .w-seg button[aria-pressed="true"], :root[data-theme="dark"] .w-btn.primary { color: #0d0e10; }
.w-deck { gap: .55rem 1.2rem; }
.w-predict { padding: 1.1rem 1.2rem 1.2rem; background: var(--surface); }
.w-predict legend { font-family: var(--font-serif); font-size: 1.18rem; }
.predict-k { font-family: var(--font-sans); font-weight: 800; color: var(--accent); }
.predict-opt { font-family: var(--font-sans); background: var(--bg); }

/* calculator widgets */
.calc textarea { width: 100%; min-height: 5.2rem; font: 400 1rem/1.45 var(--font-sans); font-variant-numeric: tabular-nums;
  padding: .55rem .65rem; border: 1px solid var(--fig-grid-strong); border-radius: var(--radius); background: var(--ctl-bg); color: var(--fig-ink); resize: vertical; }
.calc label.calc-l { font: 600 .92rem var(--font-sans); display: block; margin-bottom: .3rem; }
.calc .calc-warn { color: var(--c-second); font: 400 .9rem var(--font-sans); min-height: 1.2em; margin: .2rem 0 0; }
.calc table { font: 400 .92rem var(--font-sans); font-variant-numeric: tabular-nums; }
.calc th, .calc td { text-align: right; padding: .3rem .55rem; white-space: nowrap; }
.calc th:first-child, .calc td:first-child { text-align: left; color: var(--muted); }
.calc tfoot td { border-top: 2px solid var(--ink); font-weight: 600; border-bottom: 0; }
.calc .tbl-scroll { max-height: 20rem; overflow: auto; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.calc .tbl-scroll table { margin: 0; }
.calc thead th { position: sticky; top: 0; background: var(--fig-bg); }
.calc .steps { font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.75; margin: .8rem 0 0; padding-left: 1.4rem; }
.calc .steps li { margin: .2rem 0; padding-left: .2rem; }
.calc .steps .res { font-weight: 600; color: var(--c-primary); }
.calc .big { font: 800 1.6rem/1.2 var(--font-sans); color: var(--c-primary); }
.calc .calc-row { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; }
.calc .calc-row .w-ctl { flex: 0 1 9rem; }
.calc input.calc-num { width: 100%; min-height: 36px; font: 400 1rem var(--font-sans); padding: .25rem .45rem; border: 1px solid var(--fig-grid-strong); border-radius: var(--radius); background: var(--ctl-bg); color: var(--fig-ink); font-variant-numeric: tabular-nums; }

/* z table. Rows and columns are a fixed 2rem / 3.4rem grid and the scroller snaps to it, so the sticky header and the
   sticky z column always sit over whole cells: no half row sliced under the header, no stray digits beside a row label.
   Sticky cells are opaque and stacked corner > header > row labels. */
.ztab-wrap { --zt-row: 2rem; --zt-head: 3.4rem; overflow: auto; max-height: calc(var(--zt-row) * 13); overscroll-behavior-x: contain;
  scroll-snap-type: both mandatory; scroll-padding: var(--zt-row) 0 0 var(--zt-head);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.ztab { font: 400 .82rem/1 var(--font-sans); font-variant-numeric: tabular-nums; border-collapse: separate; border-spacing: 0; width: 100%; }
.ztab th, .ztab td { height: var(--zt-row); box-sizing: border-box; padding: 0 .45rem; text-align: right; vertical-align: middle; white-space: nowrap;
  border-bottom: 1px solid var(--fig-grid); scroll-snap-align: start; }
.ztab thead th { position: sticky; top: 0; z-index: 2; background: var(--fig-bg); border-bottom: 1px solid var(--ink); font-weight: 700; }
.ztab tbody th { position: sticky; left: 0; z-index: 1; background: var(--fig-bg); font-weight: 700; }
.ztab thead th:first-child { left: 0; z-index: 3; }
.ztab thead th:first-child, .ztab tbody th { width: var(--zt-head); min-width: var(--zt-head); border-right: 1px solid var(--fig-grid-strong); padding-right: .6rem; }
.ztab td { cursor: pointer; min-width: 3.6rem; }
.ztab td:hover, .ztab td:focus { background: var(--mark); outline: none; }
.ztab td.sel { background: var(--c-primary); color: #fff; font-weight: 600; }
.ztab tr.row-hl th, .ztab th.col-hl { color: var(--c-primary); }

/* asides */
.simplification { border-left-color: var(--c-ref); }
.callout-history { border-left-color: var(--ink); }
.callout-note { border-left-color: var(--accent); }
aside.callout, aside.simplification { font-size: 1rem; }
.howknow { border-top: 2px solid var(--ink); margin-top: 3rem; }

/* inline scrub numbers */
.scrub { color: var(--c-primary); border-bottom: 1px dashed currentColor; font-family: var(--font-sans); font-weight: 600; font-size: .95em; padding: 0 .1em; }

/* small swatches in prose for figure colours */
.sw { display: inline-block; width: .7em; height: .7em; vertical-align: baseline; margin: 0 .15em 0 .05em; border-radius: 50%; }
.sw-primary { background: var(--c-primary); } .sw-ref { background: var(--c-ref); } .sw-second { background: var(--c-second); }
.sw-third { background: var(--c-third); } .sw-ok { background: var(--c-ok); }
.sw-truth { width: 1.2em; height: 0; border-top: 2px dashed var(--ink); border-radius: 0; vertical-align: middle; }

.essay-nav a { font-family: var(--font-sans); font-weight: 800; }
.toc-h { font-weight: 800; }
.site-footer .footer-title { font-weight: 900; }

@media (max-width: 600px) {
  :root { --fs-body: 1.125rem; --gutter: 1rem; }
  .figure { margin: 1.8rem 0; }
  .prose .figure.wide { width: calc(100vw - 2 * var(--gutter)); }
  .essay-head { padding-top: 1.4rem; }
}
.home-band .w-stage, .home-band .widget-mount { background: transparent; }
.home-band .hero-note { color: #fff; font-size: 1rem; }
.home-band .hero-note b { color: #fff; }
.home-band .w { max-width: 74rem; margin: 0 auto; padding: 0; }
.home-band .w-deck, .home-band .hero-note { padding: 0 var(--gutter); }
/* display equations: one flowing line, label at the right */
.eq { display: block; text-align: center; padding: .6rem 2.8rem .6rem 0; line-height: 1.9; overflow-x: auto; }
.eq-label { top: 50%; transform: translateY(-50%); }
.eq .rad { border-top: 1px solid currentColor; padding: 0 .15em; }
.eq .eq-sep { font: 400 .85rem var(--font-sans); color: var(--muted); margin-left: .8em; }
@media (max-width: 600px) { .eq { font-size: 1.08rem; padding-right: 2.2rem; } .eq .eq-sep { display: none; } }
.prose .lede { font-size: 1.14em; }
/* Share/Reset: the runtime now puts them in a strip above the stage (44 px on touch). The hint chip shares the strip. */
.w-stage { overflow: visible; }
/* text-strength variants of the data colours (AA on the page) */
:root { --t-ref: #8a5a00; --t-second: #b04a00; }
:root[data-theme="dark"] { --t-ref: #e6a532; --t-second: #ff8a4c; }
.w-note .c-ref { color: var(--t-ref); } .w-note .c-second { color: var(--t-second); }
.figure figcaption .fig-link { text-decoration: underline; text-decoration-style: dotted; }
.w-eq { overflow-x: visible; white-space: normal; overflow-wrap: anywhere; }
.calc svg.ci-line { display: block; width: 100%; height: 64px; margin: .4rem 0 .2rem; }
.w-hint { bottom: auto; top: -1.9rem; left: 0; padding: 0; background: transparent; font-size: .88rem; max-width: calc(100% - 9.5rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-stage:not(:has(> .w-toolbar)) > .w-hint { top: .3rem; }
@media (pointer: coarse) { .w-hint { top: -2.45rem; } }
/* A slider with an exact number box shows its value once, in the box. */
.w-ctl:has(input[type=number]) > label > output, .w-ctl:has(input[type=number]) > label > .w-out { display: none; }
.w-ctl:has(input[type=range]) { max-width: 24rem; }

/* Chapter hero: directly under the band, on the white page (templates/essay.html). */
.essay-head-wrap.band.has-hero-below { margin-bottom: 0; padding-bottom: 0; }
.essay-head-wrap.has-hero-below .essay-head { padding-bottom: 1.1rem; }
.essay-hero-wrap { max-width: var(--wide); margin: 0 auto 1.6rem; padding: 0 var(--gutter); }
.essay-hero { margin: .2rem 0 0; }
.essay-hero figcaption { max-width: var(--prose); }
@media (max-width: 600px) {
  .essay-head { padding-top: 1rem; }
  .essay-head h1 { font-size: clamp(2.1rem, 9.6vw, 2.6rem); margin: .15em 0 .25em; }
  .essay-head .dek { font-size: 1.06rem; line-height: 1.42; margin-bottom: .5rem; }
  .band .kicker { margin: 0; font-size: .88rem; }
  .band .meta-line { margin: 0; }
  .essay-head-wrap.has-hero-below .essay-head { padding-bottom: .8rem; }
}

/* Tool pages (z table, calculators): a calm head on the white page, the instrument straight after. */
.tool-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .1rem; }
.tool-list li { padding: .7rem 0; border-top: 1px solid var(--rule); }
.tool-list a { font: 800 1.12rem/1.25 var(--font-sans); }
.tool-list span { display: block; font: 400 .95rem/1.45 var(--font-sans); color: var(--muted); margin-top: .15rem; }
.going-further { border-left: 3px solid var(--rule); padding: .1rem 0 .1rem 1rem; margin: 1.6rem 0; }
.going-further > p:first-child::before { content: "Going further. "; font: 700 .95em var(--font-sans); color: var(--muted); }
.going-further p { font-size: .97em; }
.hat { position: relative; display: inline-block; line-height: 1; }
.hat::before { content: "\02C6"; position: absolute; left: .12em; right: 0; top: -.28em; text-align: center; font-style: normal; }
.w [hidden], .w-ctl[hidden] { display: none !important; }
.ztab-static td { cursor: auto; }
.ztab-static td:hover { background: transparent; }
.ztab-print { margin: 1.2rem 0 2rem; }
.ztab-print caption { caption-side: top; text-align: left; font: 600 .95rem var(--font-sans); padding: 0 0 .4rem; }
@media print { .ztab-print { break-inside: avoid; } }
.ev-active, .ev-contested { color: var(--t-second); }

/* ---------------------------------------------------------------- refinement pass (2026-11-08) */
/* Home: the tools, one compact row directly under the hero (it must not push the hero below the fold). */
.tools-row { max-width: var(--wide); margin: 0 auto; padding: .7rem var(--gutter) .6rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .9rem; border-bottom: 1px solid var(--rule); font: 400 .95rem/1.5 var(--font-sans); }
.tools-row-h { font-weight: 800; color: var(--ink); }
.tools-row ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1rem 1rem; }
.tools-row a { display: inline-block; padding: .35rem 0; text-decoration-thickness: 1px; text-underline-offset: 2px; }
@media (pointer: coarse) { .tools-row a { padding: .62rem 0; } }

/* Chapter pages below 1320 px: a collapsible "On this page" menu (the factory TOC only exists on wide screens). */
.toc-mobile { max-width: var(--prose); margin: 0 auto 1.2rem; padding: 0 var(--gutter); font: 400 1rem/1.4 var(--font-sans); }
.toc-mobile summary { cursor: pointer; font-weight: 700; padding: .65rem 0; min-height: 44px; box-sizing: border-box; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); list-style-position: inside; }
.toc-mobile ol { margin: .4rem 0 .2rem; padding-left: 1.4rem; }
.toc-mobile li { margin: 0; }
.toc-mobile a { display: inline-block; padding: .45rem 0; text-decoration: none; }
.toc-mobile a:hover { text-decoration: underline; }
@media (min-width: 1320px) { .toc-mobile { display: none; } }

/* Chapter 4: optional predictions before the lab, two side by side where there is room. */
.hero-predict { display: grid; gap: 1rem 2rem; margin: .4rem 0 1.4rem; }
.hero-predict .figure { margin: 0; }
.hero-predict .w-predict legend { font-size: 1.05rem; }
@media (min-width: 900px) { .hero-predict { grid-template-columns: 1fr 1fr; } }

/* The sampling-distribution simulator as a tool: controls beside the three panels on desktop. */
.lab-side { display: grid; gap: .75rem; }
@media (min-width: 1000px) {
  .w.lab-tool { display: grid; grid-template-columns: minmax(0, 1fr) 18.5rem; gap: 0 1.6rem; align-items: start; }
  .w.lab-tool > .w-stage { grid-column: 1; grid-row: 1; }
  .w.lab-tool > .lab-side { grid-column: 2; grid-row: 1; margin-top: .2rem; }
  .w.lab-tool .lab-side .w-deck { flex-direction: column; align-items: stretch; }
  .w.lab-tool .lab-side .w-note { font-size: .9rem; order: 2; }
  .w.lab-tool .lab-side .w-deck { order: 1; }
  .w.lab-tool .lab-side > .lf-steady { order: 2; }   /* the readout's steady() box (clt-lab.js) */
}

/* Calculators: the standard deviation pair, the standard error line, the interval drawn over the data. */
.sd-both { display: flex; flex-wrap: wrap; gap: .4rem 2.4rem; }
.sd-both .sd-res { margin: 0; display: flex; flex-direction: column; }
.sd-both .sd-k { font: 400 .92rem/1.35 var(--font-sans); color: var(--muted); }
.calc .ci-se { font-size: .98rem; margin-top: .1rem; }
.calc .ci-line { display: block; width: 100%; max-width: 45rem; height: auto; margin: .4rem 0 .2rem; overflow: visible; }
.calc .ci-data-note { font-size: .92rem; color: var(--ink-soft); }
.w-check input[type=checkbox] { width: 22px; height: 22px; }
@media (pointer: coarse) { .w-check { min-height: 44px; display: inline-flex; align-items: center; } }
.w.lab-tool .lab-side .w-deck > * { flex: none; }
.hero-predict-skip { margin: .2rem 0 .6rem; font: 400 .95rem var(--font-sans); }
.hero-predict-skip a { display: inline-block; padding: .4rem 0; }