/* Factory base stylesheet: structure, accessibility, controls. Identity lives in each site's css/theme.css, which
   sets the tokens below (and may add anything else). Never put a site's colours or fonts here. */
:root {
  /* Defaults follow STYLE_GUIDE.md: white page, one text face, diagrams on the page, Okabe–Ito data colours. */
  --bg: #fff; --surface: #f6f6f4; --ink: #1a1a1a; --ink-soft: #333; --muted: #6a6a6a; --rule: #dedede;
  --accent: #0072b2; --accent-ink: #fff; --link: #0063a0; --focus: #0063a0; --mark: rgba(0,114,178,.1);
  --font-display: var(--font-serif); --font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --font-sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace; --font-body: var(--font-serif); --font-ui: var(--font-sans);
  --fs-body: 1.1875rem; --lh-body: 1.58; --prose: 42rem; --wide: 64rem; --gutter: 1rem; --radius: 3px;
  --fig-bg: #fff; --fig-surface: #f3f3f1; --fig-ink: #1a1a1a; --fig-muted: #6a6a6a; --fig-grid: rgba(0,0,0,.08);
  --fig-grid-strong: rgba(0,0,0,.28); --fig-border: transparent;
  --c-primary: #0072b2; --c-ref: #e69f00; --c-second: #d55e00; --c-third: #cc79a7; --c-ok: #009e73; --c-warn: #b8860b;
  --ctl-bg: var(--fig-surface); --ctl-ink: var(--fig-ink); --ctl-accent: var(--c-primary);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 4.5rem; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--fs-body)/var(--lh-body) var(--font-body);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img, svg, canvas { max-width: 100%; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--bg); padding: .5rem 1rem; z-index: 99; }
.skip:focus { left: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: .875rem; color: var(--muted); }
.kbd { font: 500 .8em var(--font-mono); border: 1px solid var(--rule); border-radius: 4px; padding: 0 .35em; }
.nocase { text-transform: none; }

/* Header / nav */
.site-header { position: relative; z-index: 20; display: flex; align-items: center; gap: 1rem; padding: .6rem var(--gutter);
  background: var(--bg); border-bottom: 1px solid var(--rule); font-family: var(--font-ui); }
.wordmark { font: 700 1.15rem/1 var(--font-display); color: var(--ink); text-decoration: none; margin-right: auto; white-space: nowrap; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.1rem; }
.site-nav a { color: var(--ink-soft); text-decoration: none; font-size: .9rem; }
.site-nav a[aria-current="page"], .site-nav a:hover { color: var(--ink); text-decoration: underline; }
.nav-toggle, .theme-toggle { font: 500 .85rem var(--font-sans); background: none; border: 1px solid var(--rule); color: var(--ink);
  border-radius: var(--radius); min-height: 36px; min-width: 36px; padding: 0 .6rem; cursor: pointer; }
.nav-toggle { display: none; }
@media (max-width: 760px) {
  .nav-toggle { display: inline-block; }
  .site-nav ul { display: none; position: absolute; right: var(--gutter); top: 3.2rem; flex-direction: column; gap: 0;
    background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); min-width: 14rem; }
  .site-nav ul.open { display: flex; }
  .site-nav li a { display: block; padding: .7rem 1rem; }
}

/* Typography */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; color: var(--ink); }
h1 { font-size: clamp(2rem, 5vw, 2.9rem); margin: .2em 0 .3em; }
h2 { font-size: clamp(1.45rem, 3vw, 1.75rem); margin: 2.2em 0 .5em; }
h3 { font-size: 1.2rem; margin: 1.8em 0 .4em; }
.h-anchor { margin-left: .35em; font-size: .7em; color: var(--muted); text-decoration: none; opacity: 0; }
h2:hover .h-anchor, h3:hover .h-anchor { opacity: 1; }
.kicker { font: 400 1rem/1.3 var(--font-ui); color: var(--muted); margin: 0; }
.kicker span { color: var(--muted); margin-right: .6em; }
.dek { font: 400 clamp(1.15rem, 2.4vw, 1.4rem)/1.45 var(--font-body); color: var(--ink-soft); margin: 0 0 1rem; max-width: 38rem; }
.meta-line { font: 400 .9rem var(--font-ui); color: var(--muted); }
.prose { max-width: var(--prose); margin: 0 auto; padding: 0 var(--gutter); }
.prose p, .prose li { color: var(--ink); }
.prose .lede { font-size: 1.18em; line-height: 1.55; }
.prose blockquote { margin: 1.5rem 0; padding: .2rem 0 .2rem 1.2rem; border-left: 3px solid var(--rule); font-style: italic; }
.num { font-variant-numeric: tabular-nums; }
var { font-family: var(--font-serif); font-style: italic; }
.eq { margin: 1.4rem 0; padding: .5rem 0; font: 400 1.2rem/1.5 var(--font-serif);
  display: block; text-align: center; overflow-x: auto; position: relative; }
.eq-label { position: absolute; right: 0; font: 400 .9rem var(--font-ui); color: var(--muted); }
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; font-size: .9em; }
.frac > span:first-child { border-bottom: 1px solid currentColor; padding: 0 .2em; }
.table-wrap { overflow-x: auto; margin: 1.5rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font: 600 .9rem var(--font-ui); color: var(--ink); }
.cite a { text-decoration: none; font-size: .72em; padding: 0 .1em; }
.callout, .simplification { margin: 1.6rem 0; padding: .2rem 0 .2rem 1.1rem; border-left: 3px solid var(--rule); font-size: .95em; }
.callout p:first-child, .simplification p:first-child { margin-top: 0; }
.callout p:last-child, .simplification p:last-child { margin-bottom: 0; }
.simplification { border-left-color: var(--c-ref); }
.callout-research { border-left-color: var(--c-third); }
.evidence { font: italic 400 .85em var(--font-body); color: var(--muted); white-space: nowrap; }
.evidence::before { content: "("; } .evidence::after { content: ")"; }
.ev-active, .ev-contested { color: var(--c-second); }
a.term { text-decoration-style: dotted; }
#term-tip { position: fixed; z-index: 50; max-width: 20rem; background: var(--bg); color: var(--ink); border: 1px solid var(--ink); padding: .6rem .8rem; border-radius: var(--radius); font: 400 .92rem/1.45 var(--font-ui); }

/* Essay layout */
.essay-head { max-width: var(--wide); margin: 0 auto; padding: 2rem var(--gutter) 1rem; }
.essay-head-text { max-width: var(--prose); margin: 0 auto; }
.essay-head.has-hero { display: grid; gap: 1.5rem; }
.essay-hero { margin: 0; }
.essay-grid { position: relative; }
.toc { display: none; }
@media (min-width: 1320px) {
  .toc { display: block; position: absolute; left: max(1rem, calc(50% - var(--prose) / 2 - 15rem)); top: 0; height: 100%; width: 12.5rem; }
  .toc ol { position: sticky; top: 2rem; list-style: none; padding: 0; margin: 0; font-size: .82rem; line-height: 1.35; }
  .toc li { margin: .45rem 0; } .toc a { color: var(--muted); text-decoration: none; }
  .toc a.active { color: var(--ink); font-weight: 500; }
  .toc-h { font: 600 .85rem var(--font-ui); color: var(--ink); }
  .toc ol { font-family: var(--font-ui); }
}
.foot-section { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.foot-section h2 { font-size: 1.3rem; margin-top: .5rem; }
.refs { font-size: .9rem; padding-left: 1.4rem; } .refs li { margin: .5rem 0; }
.ref-type { font: italic 400 .85em var(--font-body); color: var(--muted); }
.ref-note { color: var(--muted); }
.cite-block { font-size: .9rem; }
.essay-nav { display: flex; justify-content: space-between; gap: 1rem; margin: 3rem 0; }
.essay-nav a { display: flex; flex-direction: column; color: var(--link); font: 700 1.1rem var(--font-display); max-width: 48%; }
.essay-nav a.next { text-align: right; margin-left: auto; }
.essay-nav a span { font: 400 .9rem var(--font-ui); color: var(--muted); }
.plain { padding-top: 2rem; padding-bottom: 3rem; }

/* Home */
.home-hero { max-width: var(--wide); margin: 0 auto; padding: 1.25rem var(--gutter) 1rem; display: grid; gap: 1rem; align-items: center; }
@media (min-width: 980px) { .home-hero.has-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem; padding-top: 2.5rem; } }
.home-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.home-hero-fig { margin: 0; }
.btn-start { font: 600 1.05rem var(--font-ui); color: var(--link); }
.home-body { padding-top: 1rem; }
.home-cards ol { max-width: var(--prose); margin: 2rem auto 4rem; padding: 0 var(--gutter) 0 calc(var(--gutter) + 1.6rem); }
.home-cards li { margin: 0 0 1.3rem; padding-left: .3rem; }
.home-cards li::marker { font: 700 1.2rem var(--font-display); color: var(--muted); }
.home-cards a { display: flex; flex-direction: column; gap: .15rem; text-decoration: none; color: var(--ink); }
.home-cards a:hover .card-t { text-decoration: underline; }
.card-k { display: none; }
.card-t { font: 700 1.3rem/1.25 var(--font-display); color: var(--link); }
.card-d { font-size: 1rem; color: var(--ink-soft); }
.card-q { font: italic 400 1rem var(--font-body); color: var(--muted); }

/* Figures: an instrument panel set into the page */
.figure { margin: 2rem 0; }
.prose .figure.wide { width: min(var(--wide), calc(100vw - 2 * var(--gutter))); margin-left: 50%; transform: translateX(-50%); }
.figure figcaption { font: 400 .95rem/1.5 var(--font-ui); color: var(--ink-soft); margin-top: .6rem; max-width: var(--prose); }
.prose .figure.wide figcaption { margin-left: auto; margin-right: auto; }
.fig-n { font-weight: 700; color: var(--ink); margin-right: .3em; }
.fig-n::after { content: "."; }
.fig-link { margin-left: .4em; color: var(--muted); }
.widget-mount { background: var(--fig-bg); color: var(--fig-ink); border-radius: var(--radius); border: 1px solid var(--fig-border); min-height: 60px; font-family: var(--font-ui); }
.noscript { padding: 1rem; margin: 0; color: var(--fig-muted); }
.w { padding: .5rem 0; display: flex; flex-direction: column; gap: .7rem; }
/* Share/Reset sit above the stage, not over chart titles (factory request from drift-and-selection). */
.w-stage { position: relative; width: 100%; border-radius: calc(var(--radius) - 2px); overflow: visible; touch-action: pan-y; margin-top: 2.4rem; }
.w-stage canvas { display: block; width: 100%; height: 100%; }
.w-stage.grab canvas { cursor: grab; } .w-stage:focus-visible { outline-offset: -2px; }
.w-split { display: grid; gap: .7rem; }
@media (min-width: 760px) { .w-split { grid-template-columns: 1fr 1fr; } .w-split.wide-left { grid-template-columns: 3fr 2fr; } }
.w-panel-label { font: 600 .9rem var(--font-ui); color: var(--fig-ink); }
.w-deck { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: flex-end; }
.w-ctl { flex: 1 1 13rem; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.w-ctl.narrow { flex: 0 1 auto; }
.w-ctl label, .w-lab { display: flex; justify-content: space-between; gap: .6rem; font: 400 .92rem var(--font-ui); color: var(--fig-ink); }
.w-ctl output { color: var(--fig-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
/* slider values: a box as wide as the widest value in the range (ui.js slider()), right-aligned, so the label never rewraps */
.w-out { display: inline-grid; justify-items: end; flex: none; }
.w-out > * { grid-area: 1 / 1; white-space: nowrap; }
.w-out > .w-out-ghost { visibility: hidden; pointer-events: none; }
.w-row { display: flex; gap: .5rem; align-items: center; }
input[type=range] { flex: 1; min-width: 0; height: 28px; accent-color: var(--ctl-accent); background: transparent; }
.w input[type=number] { width: 5.6rem; background: var(--ctl-bg); color: var(--ctl-ink); border: 1px solid var(--fig-grid-strong); border-radius: 4px; font: 400 .92rem var(--font-ui); font-variant-numeric: tabular-nums; padding: .25rem .35rem; min-height: 32px; }
.w select { background: var(--ctl-bg); color: var(--ctl-ink); border: 1px solid var(--fig-grid-strong); border-radius: 4px; font: 500 .85rem var(--font-sans); padding: .3rem; min-height: 36px; }
.w-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--fig-grid-strong); border-radius: var(--radius); overflow: hidden; }
.w-seg button { background: transparent; color: var(--fig-ink); border: 0; font: 400 .9rem var(--font-ui); padding: .45rem .75rem; min-height: 36px; cursor: pointer; }
.w-seg button[aria-pressed="true"] { background: var(--ctl-accent); color: #fff; }
.w-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.w-btn { background: var(--fig-bg); color: var(--fig-ink); border: 1px solid var(--fig-grid-strong); border-radius: var(--radius); font: 400 .9rem var(--font-ui); padding: .45rem .8rem; min-height: 36px; cursor: pointer; }
.w-btn.primary { background: var(--ctl-accent); color: #fff; border-color: var(--ctl-accent); }
.w-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ctl-accent); }
.w-btn:disabled, .w-btn.is-off { opacity: .5; cursor: default; }
.w-check { display: inline-flex; gap: .4rem; align-items: center; font: 400 .92rem var(--font-ui); color: var(--fig-ink); min-height: 32px; }
.w-check input { width: 18px; height: 18px; accent-color: var(--ctl-accent); }
.w-readout { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem .9rem; margin: 0; }
.w-readout dt { font: 400 .85rem var(--font-ui); color: var(--fig-muted); }
.w-readout dd { margin: .1rem 0 0; font: 600 1.05rem var(--font-ui); font-variant-numeric: tabular-nums; color: var(--fig-ink); }
.w-readout .primary, .w-readout .geom { color: var(--c-primary); } .w-readout .ref { color: var(--c-ref); }
.w-readout .second { color: var(--c-second); } .w-readout .third { color: var(--c-third); } .w-readout .ok { color: var(--c-ok); } .w-readout .warn { color: var(--c-warn); }
/* Readouts that change while dragging (ui.js steady()): the live element and invisible copies of its tallest states
   share one grid cell, so the box keeps the height of the tallest state and nothing around it moves. */
.lf-steady { display: grid; min-width: 0; }
.lf-steady > * { grid-area: 1 / 1; min-width: 0; }
.lf-steady > .lf-ghost { visibility: hidden; pointer-events: none; user-select: none; }
.lf-steady > [hidden] { display: none; }
.w-eq { font: 400 1.1rem/1.5 var(--font-serif); color: var(--fig-ink); overflow-x: auto; }
.w-eq var { color: inherit; }
.w-note { font: 400 .95rem/1.5 var(--font-ui); color: var(--ink-soft); }
.w-note strong { color: var(--fig-ink); }
.w-toolbar { position: absolute; top: -2.3rem; right: 0; display: flex; gap: .35rem; z-index: 2; }
.w-toolbar .w-btn { font-size: .8rem; padding: .2rem .5rem; min-height: 30px; background: var(--fig-bg); }
.w-toast { position: absolute; left: 50%; bottom: .6rem; transform: translateX(-50%); background: var(--fig-ink); color: var(--fig-bg); font-size: .8rem; padding: .35rem .7rem; border-radius: 4px; z-index: 3; }
.w-hint { position: absolute; left: .6rem; bottom: .6rem; background: var(--fig-bg); color: var(--fig-muted); font: italic 400 .9rem var(--font-ui); padding: .1rem .3rem; pointer-events: none; transition: opacity .6s; }
.w-hint.gone { opacity: 0; }
/* Prediction prompts */
.w-predict .predict { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.w-predict legend { font: 400 1.15rem/1.4 var(--font-body); color: var(--fig-ink); margin-bottom: .5rem; padding: 0; }
.predict-k { display: block; font: 700 .95rem var(--font-ui); color: var(--accent); margin-bottom: .2rem; }
.predict-opt { text-align: left; background: var(--fig-bg); color: var(--fig-ink); border: 1px solid var(--fig-grid-strong); border-radius: var(--radius); font: 400 1rem var(--font-ui); padding: .6rem .8rem; min-height: 44px; cursor: pointer; }
.predict-opt:hover:not(:disabled) { border-color: var(--c-primary); }
.predict-opt.is-answer { border-color: var(--c-ok); box-shadow: inset 3px 0 0 var(--c-ok); }
.predict-opt.is-wrong { border-color: var(--c-second); box-shadow: inset 3px 0 0 var(--c-second); }
.predict-opt:disabled { cursor: default; opacity: 1; }
.predict-result p { margin: .4rem 0 0; color: var(--fig-ink); font-size: .95rem; }
.predict-after { color: var(--fig-muted) !important; }

/* Footer */
.site-footer { margin-top: 4rem; border-top: 1px solid var(--rule); padding: 2rem var(--gutter) 1.5rem; font: 400 .95rem var(--font-ui); }
.footer-inner { max-width: var(--wide); margin: 0 auto; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.footer-title { font: 700 1.1rem var(--font-display); margin: 0; }
.site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer li { margin: .3rem 0; }
.site-footer a { color: var(--ink-soft); }
.footer-licence { max-width: var(--wide); margin: 1.5rem auto 0; font-size: .8rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
@media print { .site-header, .site-footer, .w-toolbar, .w-deck { display: none; } }

/* Draggable numbers in prose (Tangle-style): <span class="scrub" data-scrub="figId:key" ...> — see ui.js scrub(). */
.scrub { color: var(--link); border-bottom: 1px dashed currentColor; cursor: ew-resize; font-variant-numeric: tabular-nums; touch-action: none; white-space: nowrap; }
.scrub:focus-visible { outline: 2px solid var(--focus); }
.inline-out { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Signature: flat colour fields (STYLE_GUIDE §2a). page.yaml `band: true` puts the title area on --band-bg.
   Solid colour only. Sites set --band-bg / --band-ink / --band-muted in theme.css. */
:root { --band-bg: var(--accent); --band-ink: #fff; --band-muted: rgba(255,255,255,.82); --font-h1: var(--font-display); }
h1 { font-family: var(--font-h1); }
.band { background: var(--band-bg); color: var(--band-ink); }
.band h1, .band .dek, .band .kicker, .band .meta-line { color: var(--band-ink); }
.band .kicker, .band .meta-line { color: var(--band-muted); }
.band a { color: var(--band-ink); }
.home-hero-wrap.band, .essay-head-wrap.band { padding-bottom: 1.5rem; margin-bottom: 1.5rem; }
.band .figure figcaption { color: var(--band-muted); }
.section-band { background: var(--band-bg); color: var(--band-ink); margin: 3rem calc(50% - 50vw) 2rem; padding: 2.5rem max(var(--gutter), calc(50vw - var(--prose) / 2)); }
.section-band h2 { color: var(--band-ink); margin-top: 0; font-size: clamp(1.8rem, 5vw, 3rem); }
.section-band p { color: var(--band-ink); }

/* Touch targets: 44 px on coarse pointers (review finding, drift-and-selection). */
@media (pointer: coarse) { .w-toolbar .w-btn, .w-btn, .w-seg button { min-height: 44px; } .w-toolbar { top: -2.9rem; } .w-stage { margin-top: 3rem; } }
.toc { transition: opacity .2s; } .toc.toc-away { opacity: 0; pointer-events: none; }

/* ---- Scroll stories (SCROLL_STORYTELLING_STANDARD.md) ---- */
.story { position: relative; margin: 2.5rem 0; }
.story-figure { position: sticky; top: .5rem; z-index: 5; background: var(--bg); }
.story-steps { position: relative; z-index: 1; }
.story-step { margin: 0 0 42vh; padding: .9rem 1rem; border-left: 3px solid var(--rule); background: var(--bg); transition: border-color .25s; }
/* Active step: marked by its rule and weight, not by dimming the others (dimmed text fails contrast). */
.story-step.is-active { border-left: 5px solid var(--accent); padding-left: calc(1rem - 2px); }
.story-step:last-child { margin-bottom: 8vh; }
.story-bar { display: flex; gap: .45rem; align-items: center; justify-content: flex-end; font: 400 1rem var(--font-ui); padding: .3rem 0; }
.story-bar button { min-height: 40px; min-width: 40px; border: 1px solid var(--fig-grid-strong, var(--rule)); background: var(--bg); color: var(--ink); border-radius: var(--radius); cursor: pointer; font: inherit; font-size: 1.15rem; line-height: 1; }
.story-bar button:disabled { opacity: .35; cursor: default; }
/* The bar is sticky (on the figure, or pinned to the bottom on narrow screens), so it always sits inside the html
   scroll-padding band; without this, focusing or clicking a step button made the browser "scroll it into view" and the
   page jumped by hundreds of pixels. */
.story-bar, .story-bar * { scroll-margin-top: -6rem; }
.story-bar.is-docked, .story-bar.is-docked * { scroll-margin-top: 0; }   /* pinned to the bottom: clear of the top band */
.story-return { padding: 0 .8rem; font-size: .95rem !important; border-color: var(--accent) !important; color: var(--accent) !important; }
.story-count { min-width: 3.4rem; text-align: center; color: var(--ink); font-variant-numeric: tabular-nums; }
.story.is-exploring .story-step.is-active { border-left-color: var(--rule); }
/* Narrow screens: one compact bar (‹ n/N › and Return) pinned to the bottom of the screen while the steps are on screen. */
.story-bar.is-docked { position: sticky; bottom: 0; z-index: 7; justify-content: center; gap: .5rem; margin: 0; padding: .4rem .5rem calc(.4rem + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--rule); box-shadow: 0 -6px 12px -10px rgba(0, 0, 0, .35); }
.story-bar.is-docked .story-return { margin-left: .4rem; }
@media (min-width: 1000px) {
  .prose .story { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem; width: min(var(--wide), calc(100vw - 2 * var(--gutter))); margin-left: 50%; transform: translateX(-50%); }
  .story-figure { top: 1rem; align-self: start; }
  .story-steps { padding-top: 10vh; }
}
@media (max-width: 999px) {
  .story-figure .widget-mount { max-height: 46vh; overflow: hidden; }
  .story-figure figcaption { display: none; }
}
@media (pointer: coarse) { .story-bar button { min-height: 44px; min-width: 44px; } }


/* ---- Tool pages (UTILITY_EXPERIENCE_STANDARD.md): the tool is the first thing on the page ---- */
.tool-page { max-width: var(--wide); margin: 0 auto; padding: .75rem var(--gutter) 2rem; }
.tool-head h1 { font-size: clamp(1.5rem, 4vw, 2.2rem); margin: .2rem 0 .3rem; }
.tool-head .tool-dek { margin: 0 0 .6rem; color: var(--ink-soft); font: 400 1rem/1.4 var(--font-ui); max-width: 46rem; }
.tool-main .figure { margin-top: .3rem; }
.tool-links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 1rem 0 0; padding: .6rem 0; border-top: 1px solid var(--rule); font: 400 .95rem var(--font-ui); }
.tool-links a { text-decoration: none; } .tool-links a:hover { text-decoration: underline; }
.tool-body { max-width: var(--prose); margin: 1.5rem auto 0; }
.tool-assumptions { font-size: .95rem; }