/* ============================================================================
   W1 — RESEARCH PUBLICATION DESIGN SYSTEM
   Shared presentation layer for the 12 editorial data-viz studies.
   Canonical source: .design-system/w1/pub.css  —  inlined into each site.
   Presentation only. No finding, number, chart datum or conclusion is encoded
   here; this file styles text, figures, tables and rhythm.
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  color-scheme: light;

  /* Type families. Native-first with a webfont upgrade layer. */
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* Type scale — 1.22 modular, anchored at 17px body */
  --fs-micro:.6875rem;   /* 11    eyebrows, table heads, fig labels */
  --fs-xs:.78125rem;     /* 12.5  captions, footnotes */
  --fs-sm:.875rem;       /* 14    notes, table body, UI */
  --fs-base:1.0625rem;   /* 17    body */
  --fs-md:1.1875rem;     /* 19    lede */
  --fs-lg:1.4rem;        /* 22.4  standfirst, stat numerals */
  --fs-xl:1.75rem;       /* 28    answer / h3 display */
  --fs-h2:clamp(1.65rem,1.15rem + 1.7vw,2.3rem);
  --fs-h1:clamp(2.35rem,1.5rem + 3.6vw,4.15rem);

  --lh-tight:1.08;
  --lh-snug:1.22;
  --lh-body:1.66;
  --lh-caption:1.55;

  --tr-tight:-.022em;    /* display tracking */
  --tr-wide:.14em;       /* eyebrow tracking */

  /* Ink — one warm-neutral ramp, never pure black */
  --ink:#1b1917;
  --body:#3e4146;
  --muted:#6d7076;
  --faint:#9a9da3;
  --rule:#e5e4e0;
  --rule-strong:#cbc9c4;

  /* Ground — warm paper. Figures are white-background plates that sit ON the
     paper inside a hairline border, so the page reads as printed stock rather
     than as a browser window. --plate stays pure white for exactly that. */
  --bg:#fcfcfa;
  --plate:#ffffff;
  --panel:#f5f4f1;
  --panel-2:#edebe6;

  /* Accent + semantics */
  --accent:#1e4d8c;
  --accent-ink:#163c6f;
  --accent-soft:#e9eff7;
  --warn:#9b2226;
  --warn-soft:#fbf1ef;
  --pos:#1f6f56;
  --neg:#9b2226;
  --null:#7a828c;        /* null / baseline result — deliberately unemphatic */

  /* Chart palette — categorical, colour-blind-safe ordering, print-legible.
     Series 1 is always the subject; --c-null is always the null/baseline. */
  --c1:#1e4d8c;  --c2:#b8562f;  --c3:#1f6f56;
  --c4:#6b4c9a;  --c5:#8a7314;  --c6:#4f5a66;
  --c-null:#9aa2ab;
  /* Axis + gridline conventions: horizontal rules only, hairline, never over
     the mark; axis line one step darker; reference/zero line dashed. */
  --grid:#ebeae6;
  --axis:#c9c7c1;
  --zero:#8b929b;

  /* Measure */
  --measure:40rem;        /* body copy — ~68ch */
  --measure-wide:52rem;   /* captions, tables, panels */
  --page:min(74rem,100% - 2.75rem);

  /* Space — 8px rhythm */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem;   --s7:3rem;   --s8:4rem;  --s9:6rem;
  --section-y:clamp(3.25rem,2rem + 4.5vw,5.5rem);

  /* Radius — editorial: small, near-square */
  --r-sm:3px; --r-md:6px; --r-lg:10px; --r-full:999px;

  /* Elevation — restrained; paper does not float */
  --sh-1:0 1px 2px rgba(27,25,23,.05);
  --sh-2:0 2px 8px -2px rgba(27,25,23,.09),0 1px 2px rgba(27,25,23,.05);
  --sh-3:0 14px 34px -10px rgba(27,25,23,.17),0 2px 6px rgba(27,25,23,.06);
  --ring:0 0 0 3px rgba(30,77,140,.28);

  /* Motion */
  --dur-1:120ms;  /* press / hover */
  --dur-2:220ms;  /* state change */
  --dur-3:440ms;  /* entrance / reveal */
  --ease:cubic-bezier(.22,.61,.36,1);
  /* Lucide triangle-alert, used as a CSS mask so it takes a semantic colour */
  --i-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --ease-spring:cubic-bezier(.34,1.2,.5,1);
}

/* ---------- 2. RESET + BASE --------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* No global scroll-behavior: it hijacks every programmatic scroll (a test
   harness, a browser's restore-position, an in-page script) and cannot be
   opted out of per call. Section jumps smooth-scroll from the click handler
   in pub.js instead, which honours reduced motion. */
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--sans);font-size:var(--fs-base);line-height:var(--lh-body);
  font-feature-settings:"kern" 1,"liga" 1,"cv05" 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
::selection{background:var(--accent-soft);color:var(--accent-ink)}
img,svg,video{max-width:100%;height:auto}

.wrap{max-width:var(--page);margin-inline:auto}
.col,.measure{max-width:var(--measure)}

a{color:var(--accent);text-decoration-thickness:.055em;text-underline-offset:.19em;
  transition:color var(--dur-1) var(--ease),text-decoration-color var(--dur-1) var(--ease)}
a:hover{color:var(--ink)}
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)
}
strong,b{color:var(--ink);font-weight:600}
em{font-style:italic}
code{font-family:var(--mono);font-size:.88em;color:var(--ink);
  background:var(--panel);padding:.1em .34em;border-radius:var(--r-sm);
  font-variant-ligatures:none}
pre{font-family:var(--mono);font-size:var(--fs-sm);background:var(--panel);
  border:1px solid var(--rule);border-left:2px solid var(--rule-strong);
  padding:var(--s4) var(--s5);overflow-x:auto;margin:var(--s5) 0;
  max-width:var(--measure-wide);line-height:1.62;color:var(--ink);border-radius:var(--r-sm)}
pre code{background:none;padding:0;font-size:1em}
hr{border:0;border-top:1px solid var(--rule);margin:var(--s7) 0}

/* ---------- 3. DISPLAY TYPE --------------------------------------------- */
h1,h2,.h2,.answer b,.finding{font-family:var(--serif);color:var(--ink);font-weight:600}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--tr-tight);
   margin:0 0 var(--s3);text-wrap:balance}
h2{font-size:var(--fs-h2);line-height:var(--lh-snug);letter-spacing:-.016em;
   margin:0 0 var(--s4);max-width:38rem;text-wrap:balance}
h3{font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--ink);
   letter-spacing:-.005em;margin:var(--s6) 0 var(--s3)}
h4{font-family:var(--sans);font-size:var(--fs-sm);font-weight:600;color:var(--ink);
   margin:var(--s5) 0 var(--s2)}
p{margin:0 0 var(--s4);max-width:var(--measure)}
p:last-child{margin-bottom:0}
ul,ol{max-width:var(--measure);padding-left:1.2rem;margin:0 0 var(--s4)}
li{margin-bottom:var(--s2)}
li::marker{color:var(--faint)}

/* Eyebrow / kicker — the publication's smallest voice.
   `.num` is deliberately NOT in this list: several studies use it for numeric
   table cells. Section numbers are styled by their own rule below. */
.kicker,.eyebrow,.lab,.fig-label{
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:var(--tr-wide);
  text-transform:uppercase;color:var(--muted);font-weight:500;margin:0
}
.sub,.standfirst,.sub-title,.byline{
  font-family:var(--serif);font-style:italic;color:var(--muted);
  font-size:clamp(1.05rem,.95rem + .5vw,1.32rem);line-height:1.42;
  margin:0 0 var(--s6);max-width:38rem;font-weight:400
}
.lede{font-size:var(--fs-md);line-height:1.6;color:var(--body);margin:0 0 var(--s6);
  max-width:var(--measure)}
.lede strong{color:var(--ink)}
.note,.tnote,.caveat{font-size:var(--fs-sm);color:var(--muted);max-width:var(--measure-wide);
  line-height:1.6}

/* ---------- 4. MASTHEAD -------------------------------------------------- */
header.mast,header.masthead,.hero{
  border-bottom:1px solid var(--rule);
  padding:clamp(3rem,2rem + 5vw,6rem) 0 var(--s7);
  position:relative
}
header.mast::after,header.masthead::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,var(--accent) 0,var(--accent) 6rem,transparent 6rem);
  opacity:.9
}
.kicker{margin-bottom:var(--s5)}

/* The verdict block — every study answers its question above the fold. */
.answer,.finding-block{
  border-left:2px solid var(--ink);padding:.1rem 0 .1rem var(--s5);
  margin:0 0 var(--s6);max-width:var(--measure)
}
.answer b{display:block;font-size:var(--fs-xl);line-height:1.18;margin-bottom:var(--s2)}
.answer p{margin:0;font-size:1.03rem;color:var(--body)}
.answer.null,.answer[data-result="null"]{border-left-color:var(--null)}
.answer.null b{color:var(--ink)}

/* Masthead specimen band — the study's dimensions, set as one measured strip
   with hairline dividers rather than a loose row of numbers. */
.meta,.keys,.colophon__grid{
  display:flex;flex-wrap:wrap;gap:0;padding-top:var(--s5);
  border-top:1px solid var(--rule);font-size:var(--fs-xs);color:var(--muted);
  max-width:var(--measure-wide)
}
/* Direct children only: a study's band cells often contain divs of their
   own, which must not pick up the band's dividers. */
.meta > div,.keys > div{padding:.1rem var(--s5) .1rem 0;margin-bottom:var(--s2)}
.meta > div + div,.keys > div + div{padding-left:var(--s5);border-left:1px solid var(--rule)}
.meta b,.keys b{display:block;font-family:var(--mono);font-size:1.05rem;color:var(--ink);
  font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  margin-bottom:.15rem}

/* ---------- 5. SECTION RHYTHM ------------------------------------------- */
main section{padding:var(--section-y) 0;border-bottom:1px solid var(--rule);
  scroll-margin-top:5rem}
main section:last-child{border-bottom:0}
section > .wrap > .num,.pub-secnum{
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:var(--tr-wide);
  text-transform:uppercase;color:var(--faint);font-weight:500;
  margin:0 0 var(--s3);display:flex;align-items:center;gap:var(--s3);max-width:none
}
section > .wrap > .num::after,.pub-secnum::after{
  content:"";flex:0 0 2.25rem;height:1px;background:var(--rule-strong)
}

/* Studies whose body is a flat run of h2 headings rather than <section>
   elements take the same rhythm from the heading itself. */
main.flat > h2,main.flat > .wrap > h2{scroll-margin-top:5rem}
main.flat .pub-secnum{
  border-top:1px solid var(--rule);
  padding-top:var(--section-y);margin-top:var(--section-y)
}
main.flat > *:first-child.pub-secnum,
main.flat > .wrap > *:first-child.pub-secnum{border-top:0;padding-top:0;margin-top:var(--s6)}

/* Section number folded into an existing worded eyebrow. */
.pub-n{color:var(--faint)}
.pub-n::after{
  content:"";display:inline-block;width:1.5rem;height:1px;
  background:var(--rule-strong);vertical-align:.24em;margin:0 .65rem
}

/* Anchored headings */
.h-anchor{opacity:0;margin-left:.45em;color:var(--faint);text-decoration:none;
  font-family:var(--mono);font-size:.7em;font-weight:400;
  transition:opacity var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
h2:hover .h-anchor,h2 .h-anchor:focus-visible{opacity:1}
.h-anchor:hover{color:var(--accent)}

/* ---------- 6. FIGURES --------------------------------------------------- */
main{counter-reset:fig}
figure{margin:var(--s6) 0;max-width:var(--measure-wide)}
figure.wide,figure.full{max-width:none}
figure img{
  display:block;width:100%;border:1px solid var(--rule);border-radius:var(--r-md);
  background:var(--plate);box-shadow:var(--sh-1);
  transition:box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)
}
figure:hover img{box-shadow:var(--sh-2);border-color:var(--rule-strong)}
figcaption{
  font-size:var(--fs-xs);color:var(--muted);margin-top:var(--s3);
  padding-left:var(--s3);border-left:1px solid var(--rule);
  max-width:var(--measure-wide);line-height:var(--lh-caption)
}
/* Figure number: automatic, uniform across all twelve studies. */
figure:not(.nofig) figcaption::before{
  counter-increment:fig;content:"Fig. " counter(fig);
  display:block;font-family:var(--mono);font-size:var(--fs-micro);
  letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--accent);
  font-weight:500;margin-bottom:var(--s2)
}
figcaption b,figcaption strong{color:var(--ink);font-weight:600}
figcaption em{color:var(--muted)}

/* ---------- 7. TABLES ---------------------------------------------------- */
.scroll,.tablewrap{
  overflow-x:auto;margin:var(--s5) 0;-webkit-overflow-scrolling:touch;
  max-width:var(--measure-wide);
  border-radius:var(--r-md);
  background:
    linear-gradient(90deg,var(--bg) 30%,rgba(252,252,250,0)) left/2.5rem 100% no-repeat,
    linear-gradient(90deg,rgba(252,252,250,0),var(--bg) 70%) right/2.5rem 100% no-repeat,
    radial-gradient(farthest-side at 0 50%,rgba(27,25,23,.10),transparent) left/.6rem 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%,rgba(27,25,23,.10),transparent) right/.6rem 100% no-repeat;
  background-attachment:local,local,scroll,scroll
}
table{border-collapse:collapse;width:100%;font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums}
/* A minimum width only inside a scroll container. A bare table must stay free
   to shrink, or it pushes the whole page sideways on a phone. */
.scroll table,.tablewrap table,.tw table{min-width:32rem}
caption{caption-side:top;text-align:left;font-size:var(--fs-xs);color:var(--muted);
  padding-bottom:var(--s3);line-height:var(--lh-caption)}
th,td{padding:.58rem .85rem;text-align:right;border-bottom:1px solid var(--rule);
  vertical-align:baseline}
th:first-child,td:first-child{text-align:left}
thead th{
  font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);font-weight:600;
  border-bottom:1px solid var(--rule-strong);white-space:nowrap
}
/* Studies mark measured columns with .num / .n / .num-cell. On a body cell that
   means the mono numeral voice; on a header it must mean alignment ONLY — the
   header keeps the publication's label voice. Specificity here deliberately
   outranks a study-local `th.num` rule. */
thead th.num,thead th.n,thead th.num-cell{
  text-align:right;font-family:var(--sans);font-size:var(--fs-micro);
  font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);font-variant-numeric:normal
}

tbody tr{transition:background var(--dur-1) var(--ease)}
tbody tr:hover td{background:var(--panel)}
tbody tr.hl td{background:var(--accent-soft);color:var(--ink)}
tbody tr.hl:hover td{background:#dfe8f4}
tbody tr.base td,tbody tr.null td{color:var(--muted);font-style:italic}
td.num-cell,th.num-cell,.v,.k,.val,td.n,.mono{font-family:var(--mono);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
tfoot td{border:0;padding-top:var(--s3);font-size:var(--fs-xs);color:var(--muted);
  text-align:left;font-style:normal}
.pos{color:var(--pos)} .neg{color:var(--neg)} .dim,.muted,.faint{color:var(--muted)}
.sig{color:var(--ink);font-weight:600}

/* ---------- 8. STAT ROW -------------------------------------------------- */
/* A grid item's default min-width is auto, so one wide descendant — a table, a
   code block — can push its whole track past the viewport. */
.stat-row > *,.stats > *,.grid > *,.cols > *,.cmp > *,.pair > *{min-width:0}

.stat-row,.stats{
  display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r-md);overflow:hidden;margin:var(--s6) 0;
  max-width:var(--measure-wide);
  grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr))
}
.stat{background:var(--bg);padding:var(--s4) var(--s4) 1.05rem;
  transition:background var(--dur-2) var(--ease)}
.stat:hover{background:var(--panel)}
.stat b,.stat .big,.stat strong{display:block;font-family:var(--mono);font-size:var(--fs-lg);
  color:var(--ink);font-weight:500;line-height:1.1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.stat span,.stat .lab{display:block;font-size:var(--fs-xs);color:var(--muted);
  margin-top:var(--s2);line-height:1.42;text-transform:none;letter-spacing:0;
  font-family:var(--sans)}

/* ---------- 9. PANELS / CALLOUTS ---------------------------------------- */
.box,.callout,.card{
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-md);
  padding:var(--s5);margin:var(--s6) 0;max-width:var(--measure-wide)
}
.box p:last-child,.callout p:last-child,.card p:last-child{margin-bottom:0}
.box.warn,.callout.warn,.box.caveat{
  background:var(--warn-soft);border-color:#eedcd8;border-left:2px solid var(--warn)
}
.box.accent,.callout.accent{background:var(--accent-soft);border-color:#dae5f2;
  border-left:2px solid var(--accent)}
.defect{border-top:1px solid var(--rule);padding-top:var(--s5);margin-top:var(--s6);
  max-width:var(--measure-wide)}
.defect h3{margin-top:0}

/* ---------- 10. BUTTONS -------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--sans);font-size:var(--fs-sm);font-weight:500;line-height:1;
  color:var(--bg);background:var(--ink);padding:.72rem 1.15rem;
  border:1px solid var(--ink);border-radius:var(--r-md);text-decoration:none;
  margin:var(--s1) var(--s2) var(--s1) 0;
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),
             transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)
}
.btn:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--bg);
  box-shadow:var(--sh-2);transform:translateY(-1px)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.btn.ghost:hover{background:var(--panel);color:var(--ink);border-color:var(--muted)}
/* ---------- 10b. ICONS (Lucide, via the sprite pub.js injects) ---------- */
svg.i{width:1.05em;height:1.05em;flex:none;display:inline-block;
  vertical-align:-.14em;stroke-width:2;color:currentColor;
  transition:transform var(--dur-2) var(--ease-spring)}
.btn svg.i{margin-left:.1rem}
.btn:hover svg.i.arrow{transform:translate(1.5px,-1.5px)}
.h-anchor svg.i{width:.85em;height:.85em;vertical-align:-.08em}

/* Warning panels carry a Lucide triangle-alert set in the accent colour,
   drawn as a mask so it inherits the semantic token rather than a fill. */
.box.warn,.callout.warn,.box.caveat{position:relative;padding-left:3.15rem}
.box.warn::before,.callout.warn::before,.box.caveat::before{
  content:"";position:absolute;left:1.2rem;top:1.5rem;width:1.05rem;height:1.05rem;
  background:var(--warn);
  -webkit-mask:var(--i-warn) center/contain no-repeat;
  mask:var(--i-warn) center/contain no-repeat
}

/* ---------- 11. CHROME: progress + sticky bar --------------------------- */
.pub-progress{
  position:fixed;inset:0 0 auto;height:2px;z-index:60;pointer-events:none;background:transparent
}
.pub-progress i{
  display:block;height:100%;width:0;background:var(--accent);
  transform-origin:0 50%;transition:width 90ms linear
}
.pub-bar{
  position:fixed;inset:0 0 auto;z-index:50;
  background:rgba(252,252,250,.88);-webkit-backdrop-filter:saturate(1.6) blur(10px);
  backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--rule);
  transform:translateY(-100%);opacity:0;
  transition:transform var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease);
  will-change:transform
}
.pub-bar.show{transform:none;opacity:1}
.pub-bar .wrap{display:flex;align-items:center;gap:var(--s5);height:3rem}
.pub-bar .t{font-family:var(--serif);font-weight:600;color:var(--ink);font-size:.95rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.pub-bar nav{display:flex;gap:var(--s4);margin-left:auto;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.pub-bar nav::-webkit-scrollbar{display:none}
.pub-bar nav a{
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;white-space:nowrap;
  padding:.15rem 0;border-bottom:1px solid transparent;
  transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)
}
.pub-bar nav a:hover{color:var(--ink)}
.pub-bar nav a[aria-current="true"]{color:var(--accent);border-bottom-color:var(--accent)}
@media (max-width:820px){.pub-bar nav{display:none}}

/* ---------- 12. MOTION: reveal ------------------------------------------ */
[data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="1"]{transition-delay:60ms}
[data-reveal="2"]{transition-delay:120ms}
[data-reveal="3"]{transition-delay:180ms}
.stat-row.in .stat,.stats.in .stat{animation:pub-rise var(--dur-3) var(--ease) backwards}
.stat-row.in .stat:nth-child(2),.stats.in .stat:nth-child(2){animation-delay:70ms}
.stat-row.in .stat:nth-child(3),.stats.in .stat:nth-child(3){animation-delay:140ms}
.stat-row.in .stat:nth-child(4),.stats.in .stat:nth-child(4){animation-delay:210ms}
.stat-row.in .stat:nth-child(5),.stats.in .stat:nth-child(5){animation-delay:280ms}
@keyframes pub-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- 13. FOOTER --------------------------------------------------- */
footer{padding:var(--s8) 0 var(--s9);font-size:var(--fs-sm);color:var(--muted);
  border-top:1px solid var(--rule)}
footer h2{font-size:1.6rem;margin-bottom:var(--s4)}
footer p{max-width:var(--measure-wide)}
.colophon{font-size:var(--fs-xs);color:var(--faint);margin-top:var(--s6);
  padding-top:var(--s5);border-top:1px solid var(--rule);max-width:var(--measure-wide)}

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

/* ---------- 14. RESPONSIVE ----------------------------------------------- */
@media (max-width:640px){
  :root{--fs-base:1rem;--page:min(74rem,100% - 2rem)}
  /* The specimen band's hairline dividers only read correctly on one line;
     narrow viewports get a clean two-up grid instead of ragged wrapping. */
  .meta,.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));
    gap:var(--s4) var(--s5)}
  .meta > div,.keys > div,.meta > div + div,.keys > div + div{
    padding:0;margin:0;border-left:0}
  .answer b{font-size:1.4rem}
  th,td{padding:.5rem .65rem}
  .stat{padding:var(--s3) var(--s4) .85rem}
  .box,.callout,.card{padding:var(--s4)}
  pre{padding:var(--s3) var(--s4);font-size:.8rem}
}
@media (max-width:420px){
  .btn{width:100%;justify-content:center;margin-right:0}
}

/* ---------- 15. REDUCED MOTION + PRINT ---------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important
  }
  [data-reveal]{opacity:1!important;transform:none!important}
  .pub-bar{transition:none}
  .stat-row.in .stat,.stats.in .stat{animation:none}
}
@media print{
  .pub-bar,.pub-progress{display:none}
  body{font-size:10.5pt;color:#000}
  section{break-inside:avoid;border-bottom:1px solid #ccc}
  figure{break-inside:avoid}
  a{color:#000;text-decoration:underline}
}