/* ============================================================================
   The Water Century — branded article layer
   Loaded after the inline sheet; overrides the neutral draft article styles.
   The intro sequence is frozen: nothing in here may target it.
   ========================================================================== */

:root{
  --blue-600:#1769d2;
  --cream-100:#efe9df;
  --grey-600:#5d6775;
  --a-ink:#111923;
  --a-body:#2a3440;
  --wave-hair:rgba(47,128,237,.28);
  --type-article-title:clamp(1.65rem,1.35rem + 1.2vw,2.25rem);
  --type-chapter-label:clamp(.72rem,.68rem + .16vw,.8rem);
  --type-chapter-heading:clamp(2rem,1.42rem + 2.45vw,3.2rem);
  --type-support-heading:clamp(1.05rem,.98rem + .3vw,1.16rem);
  --type-body:clamp(1.0625rem,1.02rem + .2vw,1.18rem);
  --type-pull:clamp(1.35rem,1.15rem + .8vw,1.78rem);
  --type-major-stat:clamp(3rem,2rem + 4vw,5rem);
  --type-support-stat:clamp(1.8rem,1.38rem + 1.8vw,2.85rem);
  --type-caption:clamp(.82rem,.79rem + .12vw,.9rem);
  --type-graph-label:clamp(.68rem,.65rem + .12vw,.76rem);
  --type-control-label:clamp(.69rem,.66rem + .12vw,.76rem);
  --type-reference:clamp(.87rem,.84rem + .1vw,.94rem);
}

/* the box-shadow bleed below overflows to 100vmax; contain that at the
   document root, not on #article itself, so .vis breakout panels (which
   intentionally extend past #article's own 720px box, up to ~100vw) don't
   get clipped along with it */
body{overflow-x:clip}
/* ---------- ground ---------- */
#article{
  background:var(--cream-50);
  box-shadow:0 0 0 100vmax var(--cream-50);
  clip-path:inset(0 -100vmax);
  color:var(--a-body);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  width:min(720px,calc(100% - clamp(1.5rem,4vw + .5rem,2.5rem)));
  font-size:var(--type-body);
  line-height:1.68;
  padding:0;  /* teaser runs flush into the author colophon */
}
#article p{margin:0 0 1.25rem;text-wrap:pretty;orphans:3;widows:3}
#article a{color:var(--blue-600)}

/* ---------- the opening: chapter marker, statement, note ---------- */
/* white so the header reads as its own block against the cream body below;
   the top padding moved here (from #article) so the white starts flush at
   the very top of the page, with no cream sliver before it */
#article .wc-open{
  margin:0 0 1rem; position:relative;
  padding-top:clamp(3.8rem,7vw,5.5rem);
  background:#fff;
  box-shadow:0 0 0 100vmax #fff;
  clip-path:inset(0 -100vmax);
}
/* the finale's sphere glow lingers a beat into the reading page, so the cut from
   the dark opener to the article doesn't read as a hard stop */
#article .wc-open::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  top:-1px; left:50%; translate:-50% 0; width:min(920px,150%); height:16rem;
  background:radial-gradient(closest-side, rgba(47,128,237,.11), rgba(47,128,237,.03) 60%, transparent 78%);
}
@media (max-width:640px){
  #article .wc-open::before{height:11rem}
}
/* the series masthead re-stated as a chapter opener, matching the opener plate */
#article h1{margin:0 0 2.6rem}
#article .wc-mast{margin:0 0 2rem}
#article .wc-mast__series{
  display:block; font-family:'Fraunces','Iowan Old Style',Georgia,serif;
  font-weight:600; font-size:var(--type-article-title);
  letter-spacing:-.008em; line-height:1.15; color:var(--a-ink);
}
#article .wc-mast__chapter{
  display:block; margin-top:.6rem;
  font:600 var(--type-chapter-label)/1.4 'Inter',system-ui,sans-serif;
  letter-spacing:.3em; text-transform:uppercase; color:var(--blue-600);
}
#article .standfirst{
  font-family:'Fraunces','Iowan Old Style',Georgia,serif;
  font-weight:500; font-size:clamp(1.5rem, 1.02rem + 2vw, 2.15rem);
  line-height:1.3; letter-spacing:-.014em; color:var(--a-ink);
  margin:0 0 2.4rem; max-width:44rem;
}
/* the opening restatement as a bold declarative headline; keeps the .standfirst
   class (and its line-split entrance JS) but overrides the size/weight */
#article .standfirst.wc-statement{
  font-weight:700; font-size:var(--type-chapter-heading);
  line-height:1.08; letter-spacing:-.02em; max-width:none; margin-bottom:2.3rem;
}
#article .standfirst.wc-statement em{font-style:italic}
#article .wc-lede{
  font-family:'Fraunces','Iowan Old Style',Georgia,serif; font-weight:400;
  font-size:var(--type-support-heading); line-height:1.56; color:var(--a-body);
  max-width:38rem; margin:0 0 1.6rem;
}
#article .wc-lede:last-of-type{margin-bottom:3.2rem}
/* italic only: underlining is reserved for reference links */
#article .wc-open__hl{font-style:italic;text-decoration:none}
#article .note{
  border-left:2px solid rgba(47,128,237,.55);
  padding:.2rem 0 .2rem 1.3rem; margin:0 0 4.2rem;
  color:var(--blue-600); font-size:var(--type-body); line-height:1.62;
  font-style:italic; max-width:36rem;
}
#article .note p{margin:0}
#article .note strong{color:var(--a-ink)}
#article .note p::before{
  content:"\270E"; display:inline-block; margin-right:.55rem;
  font-style:normal; color:var(--blue-600);
}
#article .wc-continue{
  display:inline-flex; align-items:center; gap:.5rem;
  font:700 .72rem/1 'Inter',system-ui,sans-serif; letter-spacing:.24em;
  text-transform:uppercase; color:var(--blue-600); text-decoration:none;
}
#article .wc-continue .arr{display:inline-block; transition:translate .25s ease}
#article .wc-continue:hover .arr,
#article .wc-continue:focus-visible .arr{translate:0 3px}
@media (max-width:640px){
  #article{font-size:var(--type-body)}
  #article{padding-top:0}
  #article h1{margin-bottom:1.7rem}
  #article .standfirst{margin-bottom:1.8rem}
  #article .standfirst.wc-statement{margin-bottom:1.7rem}
  #article .wc-lede:last-of-type{margin-bottom:2.4rem}
  #article .note{font-size:.92rem; padding-left:1.05rem; margin-bottom:2.8rem}
  #article .wc-open + section.part{margin-top:3rem; padding-top:2.4rem}
}

/* entrance: armed by JS only, so the section is complete without it */
.wc-open--armed .wc-mast__series{opacity:0; transform:translateY(14px)}
.wc-open--armed .wc-mast__chapter{opacity:0; transform:translateY(10px)}
.wc-open--armed .standfirst{opacity:0}
.wc-open--armed.wc-open--split .standfirst,
.wc-open--armed.is-in .standfirst{opacity:1}
.wc-open--armed.is-in:not(.wc-open--split) .standfirst{animation:wcNoteIn .7s cubic-bezier(.22,1,.36,1) .3s both}
.wc-open--armed .note{opacity:0; transform:translateY(12px)}
.wc-open .wc-line{display:block; overflow:hidden}
.wc-open .wc-line__in{display:block; transform:translateY(112%)}
.wc-open.is-in .wc-mast__series{
  opacity:1; transform:none;
  transition:opacity .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1);
}
.wc-open.is-in .wc-mast__chapter{
  opacity:1; transform:none;
  transition:opacity .5s cubic-bezier(.22,1,.36,1) .15s, transform .5s cubic-bezier(.22,1,.36,1) .15s;
}
.wc-open.is-in .wc-line__in{
  transform:none;
  transition:transform .7s cubic-bezier(.22,1,.36,1) calc(.3s + var(--i, 0)*.13s);
}
.wc-open.is-in .note{
  opacity:1; transform:none;
  transition:opacity .6s ease 1.05s, transform .6s cubic-bezier(.22,1,.36,1) 1.05s;
}
@keyframes wcNoteIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .wc-open--armed .wc-mast__series, .wc-open--armed .wc-mast__chapter,
  .wc-open--armed .standfirst, .wc-open--armed .note, .wc-open .wc-line__in{
    opacity:1!important; transform:none!important; transition:none!important; animation:none!important;
  }
}

/* ---------- section shell ---------- */
#article section.part{
  border-top:0; margin-top:clamp(4rem,8vw,6rem); padding-top:clamp(2.8rem,5vw,4rem); position:relative;
}
/* the thin waterline between sections */
#article section.part::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--wave-hair) 18%, var(--wave-hair) 82%, transparent);
}
#article section.part > .n{
  font:600 var(--type-chapter-label)/1 'Inter',system-ui,sans-serif;
  /* #2368d4, not blue-500: the small chapter numbers need WCAG AA (4.5:1) on
     the article white — blue-500 measures 3.5:1 (Lighthouse, 2026-08-05) */
  letter-spacing:.3em; color:#2368d4; margin-bottom:1.1rem;
}
#article section.part h2{
  font-family:'Fraunces','Iowan Old Style',Georgia,serif;
  font-weight:600; font-size:var(--type-chapter-heading);
  line-height:1.08; letter-spacing:-.025em; color:var(--a-ink);text-wrap:balance;
}
#article section.part h3{
  font:500 var(--type-support-heading)/1.45 'Inter',system-ui,sans-serif;
  color:var(--grey-600); margin:.7rem 0 2rem;
}

/* ---------- text entrance: every block in the numbered chapters rises in as it's
   scrolled to, armed by JS only (see article.js), so the page is complete without it ---------- */
.wc-reveal{opacity:0; transform:translateY(16px)}
.wc-reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
h2.wc-reveal, h3.wc-reveal{transform:translateY(22px)}
h2.wc-reveal.is-in, h3.wc-reveal.is-in{
  transition:opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion:reduce){
  .wc-reveal{opacity:1!important; transform:none!important; transition:none!important}
}

/* ---------- takeaway: an editorial statement, not a boxed callout ---------- */
#article .key{
  border:0; background:none; padding:0; margin:2.8rem 0;
  font-family:'Fraunces','Iowan Old Style',Georgia,serif;
  font-weight:550; font-size:var(--type-pull);
  line-height:1.4; letter-spacing:-.008em; color:var(--a-ink);
  text-wrap:balance;
}
#article .key::before{
  content:''; display:block; width:2.6rem; height:2px;
  background:var(--blue-500); margin-bottom:1rem;
}

/* ---------- source notes ---------- */
#article details{border-top:1px solid rgba(17,25,35,.12); margin-top:2.2rem; font-size:var(--type-reference)}
#article summary{
  font:600 .72rem/1 'Inter',system-ui,sans-serif;
  letter-spacing:.2em; text-transform:uppercase; color:var(--grey-600);
  min-height:2.75rem;padding:.85rem 0; cursor:pointer; list-style-position:outside;
}
#article summary:hover{color:var(--blue-600)}
#article details ul{color:var(--grey-600)}
#article details li{margin-bottom:.45rem}
#article th{background:var(--cream-100)}
#article th,#article td{border-color:rgba(17,25,35,.14)}

/* ---------- remaining placeholder cards (quiet until replaced) ---------- */
#article .viz{border:1px dashed rgba(47,128,237,.35); background:none; border-radius:2px}
#article .viz b{font-family:'Fraunces',Georgia,serif;font-weight:600}
#article .viz .tag{background:var(--grey-600)}

/* ============================================================================
   Shared visual framework
   .vis            — breakout navy panel carrying one visual
   .vis__head      — Fraunces title + Inter description on the panel
   .vis__stage     — the diagram itself
   .vis__foot      — caption / schematic honesty note
   .vis-controls   — row of segmented buttons
   ========================================================================== */
#article .vis{
  width:100vw;
  margin:2.6rem calc(50% - 50vw);
  /* a true breakout so the panel's own gradient paints continuously to the
     viewport edge with no seam; the panel's own padding is just the small
     original inset, everything readable inside re-centres itself on the
     rule below (not every child had its own max-width/margin:auto, so
     headings and control rows were sitting flush against the true viewport
     edge until this was added) */
  padding:clamp(1.4rem, 3vw, 2.6rem);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(28,82,137,.28) 0%, rgba(8,27,50,.12) 45%, transparent 70%),
    linear-gradient(180deg, #061426 0%, #03101e 62%, #020914 100%);
  color:var(--blue-100);
  overflow:hidden; position:relative;
}
.vis > *{max-width:62rem;margin-left:auto;margin-right:auto}
#article .vis__head{max-width:46rem}
#article .vis__head b{
  display:block; font-family:'Fraunces','Iowan Old Style',Georgia,serif;
  font-weight:600; font-size:clamp(1.3rem,1.1rem + .75vw,1.7rem); letter-spacing:-.01em;
  color:var(--cream-50); margin-bottom:.45rem;
}
#article .vis__head p{color:var(--blue-100);font-size:clamp(.98rem,.94rem + .15vw,1.08rem);line-height:1.58;margin:0 0 1.6rem;opacity:.9;max-width:65ch}
/* charts that scroll sideways on small screens say so */
.vis__scroller{position:relative}
@media (max-width:640px){
  /* the hint must sit inside the scroller's padding box: overflow-x clips
     anything placed above it, which is why it never showed */
  .vis__scroller{padding-top:1.5rem}
  .vis__scroller::after{
    content:'swipe →'; position:absolute; right:.4rem; top:.1rem;
    font:600 .58rem/1 'Inter',system-ui,sans-serif; letter-spacing:.22em;
    text-transform:uppercase; color:var(--blue-300); opacity:.7;
  }
}
#article .vis__stage{position:relative}
#article .vis__stage svg{display:block;width:100%;height:auto}
#article .vis__foot{
  margin-top:1.2rem; font-size:var(--type-caption); letter-spacing:.025em; color:var(--blue-300);
  opacity:.9; line-height:1.55;max-width:78ch;text-wrap:pretty;
}
#article .vis details{border-top:1px solid rgba(199,220,245,.18); margin-top:1.4rem}
#article .vis summary{color:var(--blue-300)}
#article .vis summary:hover{color:var(--cream-50)}
#article .vis details ul,#article .vis details p{color:var(--blue-100);opacity:.85}

/* plain-language labels above every control group: the nav explains itself */
.vis__label{
  font:600 var(--type-control-label)/1.2 'Inter',system-ui,sans-serif; letter-spacing:.2em; text-transform:uppercase;
  color:var(--blue-300); opacity:.8; margin:1.6rem auto .6rem;
}
.vis__head + .vis__label,.vis__head + .v4__pick .vis__label:first-child{margin-top:.2rem}
.vis--light .vis__label{color:var(--grey-600)}
.vis--light .vis__scroller::after{color:var(--grey-600)}

/* segmented controls used by interactive visuals */
.vis-controls{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 auto 1.6rem;padding:0;list-style:none}
.vis-controls button{
  font:600 var(--type-control-label)/1.25 'Inter',system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-100); background:rgba(143,197,244,.08);
  border:1px solid rgba(143,197,244,.28); padding:.72rem .95rem; cursor:pointer;
  min-height:2.75rem;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.vis-controls button:hover{border-color:var(--blue-300);color:var(--cream-50)}
.vis-controls button[aria-pressed="true"],
.vis-controls button[aria-selected="true"]{
  background:var(--blue-500); border-color:var(--blue-500); color:#fff;
}
.vis-controls button:focus-visible{outline:2px solid var(--blue-300);outline-offset:2px}

/* labels inside diagrams */
.vis text{font-family:'Inter',system-ui,sans-serif}
.vis .t-caps{font-weight:600;letter-spacing:.2em;fill:var(--blue-100)}
.vis .t-fig{font-family:'Fraunces',Georgia,serif;font-weight:600;fill:#fff}
.vis .t-dim{fill:var(--blue-300);opacity:.75}

/* ============================================================================
   Visual 1 — The Availability Filter
   ========================================================================== */
.v1__truth{
  display:inline-flex;align-items:center;min-height:1.65rem;margin:-.8rem 0 1rem;
  border:1px solid rgba(23,105,210,.3);padding:.28rem .5rem;
  font:700 var(--type-graph-label)/1 'Inter',system-ui,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue-600)
}
.v1{display:grid;grid-template-columns:minmax(7.5rem,11rem) minmax(0,1fr);gap:clamp(1rem,3vw,2.5rem);align-items:start;max-width:31rem;margin:0 auto}
#article .vis__stage .v1__chamber{width:100%;height:min(54svh,430px)}
.v1__ghost{fill:none;stroke:rgba(143,197,244,.3);stroke-width:1;stroke-dasharray:3 4}
.v1__fill{transition:height 1.1s cubic-bezier(.3,.6,.2,1)}
.v1__flow{stroke:rgba(255,255,255,.4);stroke-width:1.5;stroke-dasharray:3 9;
  animation:v1flow 2.2s linear infinite}
@keyframes v1flow{to{stroke-dashoffset:-24}}
.v1__gate line{stroke:rgba(143,197,244,.34);stroke-width:1}
.v1__gate.is-passed line{stroke:rgba(143,197,244,.6)}
.v1__gate.is-active line{stroke:#7fd8ff;stroke-width:1.5;
  animation:v1gate 2.4s ease-in-out infinite alternate}
@keyframes v1gate{from{opacity:.55}to{opacity:1}}
.v1__side{display:grid;gap:.75rem;min-width:0}
.v1__stages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-between;align-self:stretch;height:min(54svh,430px);gap:0}
.v1__stages button{
  display:grid;place-items:center;width:min(100%,15rem);min-height:2.4rem;text-align:center;background:#1769d2;cursor:pointer;
  padding:.35rem .55rem;border:none;border-radius:2px;
  color:#fff;transition:background .3s ease,opacity .3s ease;opacity:.55;
}
.v1__stages button b{
  display:block;font:700 var(--type-control-label)/1.25 'Inter',system-ui,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;
}
.v1__stages button:hover{opacity:.85}
.v1__stages button:focus-visible{outline:2px solid var(--blue-300);outline-offset:2px}
.v1__stages li.is-passed button{opacity:.85}
.v1__stages li.is-passed button b{color:#fff}
.v1__stages li.is-active button{opacity:1;background:#2f80ed;box-shadow:0 0 0 2px rgba(127,216,255,.5)}
.v1__stages li.is-active button b{color:#fff}
.v1__summary{min-block-size:5.75rem;border-left:2px solid var(--blue-500);padding:.15rem 0 .15rem .9rem}
.v1__summary-name{font:700 var(--type-control-label)/1.2 'Inter',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-600);margin:0 0 .35rem!important}
.v1__summary-copy{font-size:clamp(.92rem,.88rem + .15vw,1rem);line-height:1.45;color:var(--a-body);margin:0!important}
.v1__playback{display:flex;align-items:center;gap:.45rem;min-height:2.75rem}
.v1__playback button{min-height:2.75rem;border:1px solid rgba(23,105,210,.35);background:transparent;color:var(--blue-600);padding:.45rem .75rem;font:700 var(--type-control-label)/1 'Inter',system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.v1__playback button:hover{border-color:var(--blue-600);background:rgba(23,105,210,.06)}
.v1__playback button:disabled{opacity:.45;cursor:default}
.v1__status{font-size:var(--type-caption);color:var(--grey-600);margin-left:.2rem}
/* without JS the whole journey is shown at its final gate and remains selectable */
@media (max-width:640px){
  #article #vis1{padding:.8rem .75rem .9rem}
  #vis1 .vis__head b{font-size:1.22rem}
  #vis1 .vis__head p{font-size:.9rem;line-height:1.4;margin-bottom:1rem}
  .v1__truth{margin:-.45rem 0 .65rem;min-height:1.45rem;font-size:.62rem}
  .v1{grid-template-columns:1fr 1fr;gap:.65rem;align-items:stretch}
  #article .vis__stage .v1__chamber{height:0;min-height:100%}
  .v1__side{gap:.45rem}
  .v1__stages{gap:.28rem}
  .v1__stages button{min-height:2.75rem;padding:.3rem .25rem}
  .v1__stages button b{font-size:.62rem;letter-spacing:.06em}
  .v1__summary{min-block-size:4.65rem;padding-left:.65rem}
  .v1__summary-name{font-size:.62rem}
  .v1__summary-copy{font-size:.78rem;line-height:1.35}
  .v1__playback{gap:.3rem}
  .v1__playback button{padding:.35rem .5rem;font-size:.62rem}
  .v1__status{font-size:.68rem;line-height:1.2}
  #vis1 .vis__foot{margin-top:.65rem;font-size:.72rem;line-height:1.35}
}

/* ============================================================================
   Visual 2 — The Freshwater Vault
   ========================================================================== */
.v2{display:grid;grid-template-columns:minmax(14rem,19rem) minmax(0,1fr);gap:clamp(1.25rem,4vw,3.4rem);align-items:center;max-width:58rem;margin:0 auto}
.v3{max-width:60rem;margin:0 auto}
.v4{max-width:60rem;margin:0 auto}
.v2__slabs{width:100%;height:auto}
.v2__slab{pointer-events:none;transition:opacity .35s ease, transform .35s ease}
.v2--picked .v2__slab{opacity:.42}
.v2--picked .v2__slab.is-on{opacity:1;transform:translateY(-4px)}
.v2__tag{font:600 9.5px 'Inter',system-ui,sans-serif;letter-spacing:.18em;fill:#0d294b}
.v2__tag--mobile{display:none}
.v2__slab[data-store="ground"] .v2__tag{fill:#8fc5f4}
.v2__tag--out{fill:#8fdfff!important;font-size:8.4px} /* long label: must fit the 330-unit viewBox */
.v2__share{font:600 20px 'Fraunces',Georgia,serif;fill:#0d294b;letter-spacing:-.01em}
.v2__share--surface{font-size:15px;fill:#0d294b}
.v2__slab[data-store="ground"] .v2__share{fill:#c7dcf5}
.v2__slab--surface .v2__glint{animation:v2glint 4.5s ease-in-out infinite alternate}
@keyframes v2glint{from{opacity:.75}to{opacity:1}}
.v2__card{min-width:0;min-block-size:16rem}
.v2__name{font:600 .74rem/1 'Inter',system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--blue-300);margin:0 0 .5rem}
.v2__fig{font:600 clamp(2.2rem,4vw,3rem)/1 'Fraunces',Georgia,serif;color:var(--cream-50);margin:0 0 1.2rem;letter-spacing:-.02em}
.v2__fig small{font:500 .9rem/1 'Inter',system-ui,sans-serif;letter-spacing:.02em;color:var(--blue-100);opacity:.8;margin-left:.5rem}
.v2__summary{min-block-size:4.5em;font-size:clamp(.92rem,.88rem + .16vw,1rem);line-height:1.48;color:var(--blue-100);margin:0 0 .65rem!important}
.v2__cite{margin:.4rem 0 .7rem!important}
.v2__method{margin-top:.55rem!important}
.v2__method summary{min-height:2.75rem;display:flex;align-items:center}
.v2__facts{margin:0}
.v2__facts div{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;padding:.6rem 0;border-top:1px solid rgba(199,220,245,.14)}
.v2__facts dt{font:600 .68rem/1.5 'Inter',system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-300)}
.v2__facts dd{margin:0;font-size:.92rem;line-height:1.5;color:var(--blue-100)}
@media (max-width:640px){
  #article #vis2{padding:.8rem .75rem .9rem}
  #vis2 .vis__head b{font-size:1.22rem}
  #vis2 .vis__head p{font-size:.9rem;line-height:1.4;margin-bottom:.7rem}
  #vis2 .vis__label{margin:.65rem 0 .4rem;font-size:.62rem}
  #vis2 > .vis-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.3rem;margin-bottom:.65rem}
  #vis2 > .vis-controls button{min-height:3rem;padding:.35rem .2rem;font-size:.6rem;letter-spacing:.04em}
  #vis2 > .vis-controls button span{display:block;margin-top:.2rem;font-family:'Fraunces',Georgia,serif;font-size:.9rem;letter-spacing:0;text-transform:none}
  .v2{grid-template-columns:minmax(6.8rem,42%) minmax(0,1fr);gap:.65rem;align-items:start}
  .v2__slabs{align-self:start}
  .v2__tag--full{display:none}
  .v2__tag--mobile{display:block;font-size:30px;letter-spacing:.04em}
  .v2__share{font-size:31px}
  .v2__share--surface{font-size:26px}
  .v2__card{block-size:17.6rem}
  .v2__name{font-size:.62rem;letter-spacing:.1em;margin-bottom:.35rem}
  .v2__fig{font-size:1.85rem!important;margin-bottom:.65rem}
  .v2__fig small{display:block;font-size:.68rem;margin:.25rem 0 0}
  .v2__summary{min-block-size:6.7em;font-size:.76rem;line-height:1.35;margin-bottom:.4rem!important}
  .v2__cite{font-size:.68rem!important;line-height:1.3;margin:.25rem 0 .4rem!important}
  .v2__method{margin-top:.2rem!important}
  .v2__method summary{min-height:2.75rem;padding:.45rem 0;font-size:.6rem;letter-spacing:.08em}
  .v2__facts div{grid-template-columns:1fr;gap:.2rem;padding:.55rem 0}
  .v2__facts dt{font-size:.62rem}
  .v2__facts dd{font-size:.78rem;line-height:1.35}
  #vis2 .vis__foot{margin-top:.65rem;font-size:.72rem;line-height:1.35}
}

/* ============================================================================
   Visual 3 — Follow One Unit of Water  +  the 250 km³ scale switcher
   ========================================================================== */
.v3__pipe{fill:none;stroke:rgba(143,197,244,.4);stroke-width:1.6}
.v3__cap{font:600 9px 'Inter',system-ui,sans-serif;letter-spacing:.2em;fill:#8fc5f4;opacity:.8}
.v3__use{font:600 13px 'Inter',system-ui,sans-serif;letter-spacing:.22em;fill:#f6f3ed}
.v3__bar{transition:height .8s cubic-bezier(.3,.6,.2,1), y .8s cubic-bezier(.3,.6,.2,1)}
.v3__drop{offset-path:path("M118,156 H340 M462,156 H700");animation:v3drop 3.2s linear infinite;opacity:.9}
@keyframes v3drop{
  0%{offset-distance:0%;opacity:0} 6%{opacity:.9}
  94%{opacity:.9} 100%{offset-distance:100%;opacity:0}
}
.v3__story{margin:.9rem auto 0;max-width:44rem;font-size:.95rem;line-height:1.55;color:var(--blue-100);opacity:.9}
.wc-stat{
  --statw:min(680px, 100%);
  width:var(--statw); margin:2.2rem 0 2.2rem calc((100% - var(--statw)) / 2);
  background:linear-gradient(180deg,#07162b,#04101f);
  padding:1.5rem 1.7rem 1.4rem; color:var(--blue-100);
}
.wc-stat__kicker{font:600 var(--type-control-label)/1.4 'Inter',system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-300);margin:0 0 .6rem}
.wc-stat__fig{font:600 var(--type-major-stat)/.98 'Fraunces',Georgia,serif;letter-spacing:-.03em;color:var(--cream-50);margin:0 0 .85rem;text-wrap:balance}
.wc-stat .vis-controls{margin:0}
/* wide chart on desktop, stacked-band portrait chart on phones */
#article .v3 .v3__m{display:none}
@media (max-width:640px){
  #article .v3 .v3__wide{display:none}
  #article .v3 .v3__m{display:block;max-width:23rem;margin:0 auto}
  .v3 .v3__m .v3__cap{font-size:10.5px;letter-spacing:.14em}
}

/* ============================================================================
   Visual 5 — Same Rainfall, Different Outcome  +  Beneath Basingstoke
   ========================================================================== */
.v5{display:flex;gap:2px;max-width:62rem;margin:0 auto}
.v5__panel{flex:1;min-width:0}
.v5__panel--a{background:rgba(2,9,20,.45)}
.v5__panel--b{background:rgba(23,105,210,.07)}
.v5__cap{font:600 11px 'Inter',system-ui,sans-serif;letter-spacing:.26em;fill:#f6f3ed}
.v5__lab{font:600 8.5px 'Inter',system-ui,sans-serif;letter-spacing:.18em;fill:#8fc5f4;opacity:.85}
.v5__rain g{animation:v5rain 1.1s linear infinite;animation-play-state:paused}
.v5.is-inview .v5__rain g{animation-play-state:running}
@keyframes v5rain{to{transform:translateY(206px)}}
.v5__flow path{stroke-dasharray:6 5;animation:v5flowdash 1.4s linear infinite}
@keyframes v5flowdash{to{stroke-dashoffset:-22}}
@media (max-width:640px){ .v5{flex-direction:column} }

.wc-break{
  --bw:min(880px, calc(100vw - 2rem));
  width:var(--bw); margin:3rem 0 3rem calc((100% - var(--bw)) / 2);
  background:rgba(23,105,210,.07); border-left:3px solid rgba(23,105,210,.55); padding:clamp(1.6rem,4vw,2.8rem);
}
.wc-break p{
  margin:0; font-family:'Fraunces','Iowan Old Style',Georgia,serif;
  font-weight:550; font-size:clamp(1.4rem, 1.1rem + 1.6vw, 2rem);
  line-height:1.35; letter-spacing:-.012em; color:var(--blue-600); text-wrap:balance;
  max-width:34ch;
}
/* the schematic shrinks hard on phones: labels get bigger in chart units */
@media (max-width:640px){
  .v5b .v5b__cap{font-size:15px;letter-spacing:.14em}
  .v5b .v5b__town{font-size:16px}
  .v5b .v5b__dim{font-size:13.5px;letter-spacing:.08em}
}
.v5b__chalk{opacity:.9}
.v5b__cap{font:600 11px 'Inter',system-ui,sans-serif;letter-spacing:.24em;fill:#c7dcf5}
.v5b__town{font:600 12px 'Inter',system-ui,sans-serif;letter-spacing:.22em;fill:#f6f3ed}
.v5b__dim{font:500 9.5px 'Inter',system-ui,sans-serif;letter-spacing:.14em;fill:#8fc5f4;opacity:.75}
.v5b__river{stroke:#7fd8ff;stroke-width:2.4;stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(127,216,255,.45))}

/* ============================================================================
   Visual 6 — Hydrological Whiplash: bars land first, the river answers late
   ========================================================================== */
.v5b svg{max-width:56rem;margin:0 auto}
.v6{max-width:58rem;margin:0 auto;display:grid;gap:.65rem}
.v6__measured{border:1px solid rgba(143,197,244,.18);padding:.7rem .85rem .55rem}
.v6__measurehead,.v6__responsehead{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.v6__measurehead b,.v6__responsehead b{font:700 .68rem/1.2 'Inter',system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-50)}
.v6__measurehead span,.v6__responsehead span{font:600 .64rem/1.2 'Inter',system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--blue-300)}
.v6__plot{height:14.5rem;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(.35rem,2vw,1.2rem);align-items:end;border-bottom:1px solid rgba(143,197,244,.35);padding:.8rem .3rem 0}
.v6__month{height:100%;display:grid;grid-template-rows:1fr 1.5rem;position:relative;align-items:end;text-align:center}
.v6__month i{display:block;grid-row:1;align-self:end;height:calc(var(--rain) * 10.5rem);margin:0 auto;width:min(4rem,72%);background:linear-gradient(#58a2ff,#1e57a8);transform:scaleY(0);transform-origin:center bottom;transition:transform .7s cubic-bezier(.25,.7,.3,1)}
.v6.is-live .v6__month i{transform:scaleY(1)}
.v6__month:nth-child(2) i{transition-delay:.12s}.v6__month:nth-child(3) i{transition-delay:.24s}.v6__month:nth-child(4) i{transition-delay:.36s}.v6__month:nth-child(5) i{transition-delay:.48s}.v6__month:nth-child(6) i{transition-delay:.6s}
#article .v6__month strong{position:absolute;left:0;right:0;bottom:calc(1.5rem + var(--rain) * 10.5rem + .25rem);font:650 clamp(.76rem,.68rem + .2vw,.88rem)/1 'Fraunces',Georgia,serif;color:#c7dcf5;opacity:0;transition:opacity .35s ease .75s}
#article .v6.is-live .v6__month strong{opacity:1}
.v6__month span{grid-row:2;align-self:center;font:700 .66rem/1 'Inter',system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-300)}
.v6__events{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.v6__events li{padding:.55rem .65rem;background:rgba(143,197,244,.07);min-width:0}
.v6__events b{display:block;font:700 .62rem/1.2 'Inter',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-300);margin-bottom:.22rem}
.v6__events span{display:block;font-size:.74rem;line-height:1.3;color:var(--blue-100)}
.v6__response{border:1px dashed rgba(143,197,244,.35);padding:.55rem .75rem .4rem;background:repeating-linear-gradient(135deg,rgba(143,197,244,.025) 0 8px,transparent 8px 16px)}
#article .v6__response svg{width:100%;height:5.2rem;margin:.1rem 0 0;overflow:visible}
.v6__response circle{fill:var(--blue-300)}
#article .v6__responsecopy{display:flex;justify-content:space-between;gap:1rem;margin:-.25rem 0 0;font:700 .65rem/1.2 'Inter',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-300)}
.v6__river{stroke:var(--blue-300);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:8 7;stroke-dashoffset:500;transition:stroke-dashoffset 1.6s ease .75s}
.v6.is-live .v6__river{stroke-dashoffset:0}
.v6__method{margin-top:.65rem}
.v6__method p{font-size:var(--type-reference);line-height:1.5;max-width:75ch}

@media (max-width:640px){
  #article #vis6{padding:.7rem .65rem .75rem}
  #article #vis6{padding-block:.4rem}
  #article #vis6 .vis__head b{font-size:1.18rem}
  #article #vis6 .vis__head p{font-size:.78rem;line-height:1.3;margin-bottom:.45rem}
  .v6{gap:.4rem}
  .v6__measured{padding:.5rem .4rem .35rem}
  .v6__measurehead,.v6__responsehead{align-items:flex-start;gap:.35rem}
  .v6__measurehead b,.v6__responsehead b{font-size:.58rem;letter-spacing:.08em}
  .v6__measurehead span,.v6__responsehead span{font-size:.55rem;letter-spacing:.025em;text-align:right}
  .v6__plot{height:10rem;gap:.18rem;padding:.45rem 0 0}
  .v6__month{grid-template-rows:1fr 1.35rem}
  .v6__month i{height:calc(var(--rain) * 6.5rem);width:70%}
  #article .v6__month strong{bottom:calc(1.35rem + var(--rain) * 6.5rem + .2rem);font-size:.78rem}
  .v6__month span{font-size:.68rem;letter-spacing:.07em}
  .v6__events{gap:1px}
  .v6__events li{padding:.35rem .3rem}
  .v6__events b{font-size:.58rem;letter-spacing:.04em}
  .v6__events span{font-size:.67rem;line-height:1.2}
  .v6__response{padding:.4rem .45rem .25rem}
  #article .v6__response svg{height:2rem}
  .v6__responsecopy{font-size:.57rem;letter-spacing:.025em;gap:.45rem}
  .v6__responsecopy span:last-child{text-align:right}
  #article #vis6 .vis__foot{font-size:.64rem;line-height:1.25;margin-top:.3rem}
}

@media (prefers-reduced-motion:reduce){
  .v6__month i{transform:scaleY(1)!important;transition:none!important}
  .v6__month strong{opacity:1!important;transition:none!important}
  .v6__river{stroke-dashoffset:0!important;transition:none!important}
}

/* ============================================================================
   Visual 7 — The Cascade
   ========================================================================== */
.v7{max-width:62rem;margin:0 auto}
.v7__pages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.v7__page{position:relative;border:1px solid rgba(23,105,210,.2);padding:.75rem .8rem .8rem;background:rgba(23,105,210,.035)}
.v7__page header{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;padding-bottom:.55rem;border-bottom:2px solid rgba(23,105,210,.35)}
.v7__page header span{font:700 .6rem/1.2 'Inter',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-600)}
.v7__page header b{font:650 1.05rem/1.1 'Fraunces',Georgia,serif;color:var(--a-ink)}
.v7__branches{list-style:none;margin:0;padding:0 0 0 1.1rem;position:relative}
.v7__branches::before{content:"";position:absolute;left:.28rem;top:0;bottom:.7rem;border-left:2px solid rgba(23,105,210,.28)}
.v7__branches li{position:relative;padding:.55rem 0 .5rem .5rem;border-bottom:1px solid rgba(23,105,210,.12)}
.v7__branches li:last-child{border-bottom:0}
.v7__branches li::before{content:"";position:absolute;left:-.97rem;top:1.02rem;width:.62rem;border-top:2px solid rgba(23,105,210,.45)}
.v7__branches li > div{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.v7__branches li b{font:700 .72rem/1.2 'Inter',system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--a-ink)}
.v7__type{flex:0 0 auto;border:1px solid rgba(23,105,210,.28);border-radius:999px;padding:.18rem .38rem;font:700 .53rem/1.1 'Inter',system-ui,sans-serif;letter-spacing:.045em;text-transform:uppercase;color:var(--blue-600)}
.v7__branches p{margin:.28rem 0 0;font-size:.73rem;line-height:1.38;color:var(--grey-600)}

@media (max-width:640px){
  #article #vis7{padding:.7rem .65rem .75rem}
  #article #vis7 .vis__head b{font-size:1.4rem}
  #article #vis7 .vis__head p{font-size:.78rem;line-height:1.3;margin-bottom:.5rem}
  .v7__pages{grid-template-columns:1fr;gap:.65rem}
  .v7__page{min-height:min(28.5rem,calc(100svh - 1rem));padding:.65rem .55rem;display:grid;grid-template-rows:auto 1fr}
  .v7__page header span{font-size:.56rem;letter-spacing:.07em}
  .v7__page header b{font-size:.96rem}
  .v7__branches{display:grid;grid-template-rows:repeat(4,1fr);padding-left:.9rem}
  .v7__branches::before{left:.22rem}
  .v7__branches li{display:grid;align-content:center;padding:.38rem 0 .35rem .4rem}
  .v7__branches li::before{left:-.78rem;top:50%;width:.5rem}
  .v7__branches li b{font-size:.72rem;letter-spacing:.05em}
  .v7__type{font-size:.62rem;letter-spacing:.005em;padding:.14rem .27rem}
  .v7__branches p{font-size:.7rem;line-height:1.28;margin-top:.2rem}
  #article #vis7 .vis__foot{font-size:.62rem;line-height:1.28;margin-top:.4rem}
}

/* ============================================================================
   Visual 8 — The Water-Security System
   ========================================================================== */
.v8{max-width:60rem;margin:0 auto}
.v8-evidence .vis__stage{max-width:60rem;margin:0 auto}
.v8__chain{list-style:none;margin:0 0 .65rem;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.3rem}
.v8__chain li{min-width:0}
.v8__chain button{
  width:100%;min-height:44px;font:650 clamp(.58rem,.5rem + .22vw,.7rem)/1.1 'Inter',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(143,197,244,.04);border:1px solid rgba(143,197,244,.22);border-radius:3px;color:var(--blue-300);
  padding:.35rem .25rem;cursor:pointer;transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.v8__chain button:hover{color:var(--cream-50)}
.v8__chain button[aria-pressed="true"]{color:var(--cream-50);border-color:#7fd8ff;background:rgba(47,128,237,.2)}
.v8__chain button:focus-visible{outline:2px solid var(--blue-300);outline-offset:2px}
.v8__opts{min-height:44px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.35rem;margin-bottom:.65rem}
.v8__opts button{min-height:44px;margin:0;padding:.4rem .45rem;font-size:clamp(.64rem,.56rem + .25vw,.75rem);line-height:1.15}
.v8__card{max-width:none;block-size:10rem;margin:0;display:grid;align-content:start;border:1px solid rgba(199,220,245,.14);background:rgba(2,9,20,.28);padding:.8rem 1rem}
.v8__name{font:600 clamp(1.05rem,.92rem + .45vw,1.28rem)/1.2 'Fraunces',Georgia,serif;color:var(--cream-50);margin:0 0 .35rem}
.v8__facts{margin:0}
.v8__facts div{display:grid;grid-template-columns:8.5rem 1fr;gap:.7rem;padding:.35rem 0;border-top:1px solid rgba(199,220,245,.14)}
.v8__facts dt{font:650 .62rem/1.35 'Inter',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-300)}
.v8__facts dd{margin:0;font-size:clamp(.78rem,.72rem + .2vw,.9rem);line-height:1.35;color:var(--blue-100);text-wrap:pretty}
.v8__source{margin:.4rem 0 0;padding-top:.4rem;border-top:1px solid rgba(199,220,245,.14);font-size:.72rem;line-height:1.3;color:var(--blue-100)}
.v8__source > span:first-child{font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-300);margin-right:.35rem}
.v8__nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;margin-top:.65rem}
.v8__nav button{min-height:44px;border:1px solid rgba(143,197,244,.3);border-radius:3px;background:transparent;color:var(--blue-100);font:650 .67rem/1 'Inter',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.v8__nav button:last-child{justify-self:stretch}
.v8__nav button:focus-visible{outline:2px solid var(--blue-300);outline-offset:2px}
.v8__position{font:650 .65rem/1 'Inter',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-300);white-space:nowrap}
.v8__stats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px;margin-top:0;border-top:1px solid rgba(199,220,245,.18);padding-top:.8rem}
.v8__stat{min-width:0;padding:.7rem 1rem}
.v8__stat--gap{background:rgba(23,105,210,.06)}
.v8__stat--leak{background:rgba(2,9,20,.5)}
.v8__stat svg{display:block;width:100%;height:auto;max-height:9rem}
.v8__axis{font:600 8.5px 'Inter',system-ui,sans-serif;letter-spacing:.18em;fill:#8fc5f4;opacity:.8}
.v8__line{font:600 9px 'Inter',system-ui,sans-serif;letter-spacing:.22em;fill:#c7dcf5}
.v8__statfig{font:600 clamp(1.45rem,1.05rem + 1.6vw,2.35rem)/1.06 'Fraunces',Georgia,serif;color:var(--cream-50);margin:.35rem 0 .5rem;letter-spacing:-.02em;text-wrap:balance}
.v8__statnote{font-size:clamp(.68rem,.62rem + .18vw,.78rem);line-height:1.4;color:var(--blue-100);opacity:.9;margin:0;text-wrap:pretty}
.v8__ban-note{margin:.65rem 0 0;padding:.55rem .75rem;border-left:2px solid var(--blue-400);background:rgba(143,197,244,.06);font-size:clamp(.68rem,.62rem + .18vw,.78rem);line-height:1.4;color:var(--blue-100)}
.v8__drips path{animation:v8drip 1.3s ease-in infinite}
.v8__drips path:nth-child(2){animation-delay:.4s}
.v8__drips path:nth-child(3){animation-delay:.8s}
.v8__drips path:nth-child(4){animation-delay:.2s}
@keyframes v8drip{0%{transform:translateY(0);opacity:0}25%{opacity:.9}100%{transform:translateY(46px);opacity:0}}
@media (max-width:640px){
  #article #vis8,#article .v8-evidence{box-sizing:border-box;padding:.65rem;margin-block:1.2rem}
  #article #vis8 .vis__head,#article .v8-evidence .vis__head{margin-bottom:.45rem}
  #article #vis8 .vis__head b,#article .v8-evidence .vis__head b{font-size:1.08rem}
  #article #vis8 .vis__head p,#article .v8-evidence .vis__head p{font-size:.72rem;line-height:1.28;margin-top:.2rem}
  #article #vis8 .vis__label{font-size:.58rem;line-height:1.1;margin:.25rem 0}
  .v8__chain{grid-template-columns:repeat(4,minmax(0,1fr));gap:.22rem;margin-bottom:.35rem}
  .v8__chain button{font-size:.57rem;letter-spacing:.025em;padding:.25rem .12rem}
  .v8__opts{grid-template-columns:repeat(2,minmax(0,1fr));gap:.22rem;margin-bottom:.4rem;block-size:92px;align-content:start}
  .v8__opts button{font-size:.62rem;padding:.25rem;letter-spacing:0}
  .v8__card{block-size:14.6rem;padding:.55rem .65rem}
  .v8__name{font-size:1rem;margin-bottom:.2rem}
  .v8__facts div{grid-template-columns:6.3rem 1fr;gap:.45rem;padding:.28rem 0}
  .v8__facts dt{font-size:.55rem;letter-spacing:.06em}
  .v8__facts dd{font-size:.7rem;line-height:1.28}
  .v8__source{font-size:.66rem;margin-top:.25rem;padding-top:.3rem}
  .v8__nav{margin-top:.4rem;gap:.3rem}
  .v8__nav button{font-size:.56rem;letter-spacing:.03em;padding:.25rem}
  .v8__position{font-size:.56rem;letter-spacing:.02em}
  #article #vis8 .vis__foot,#article .v8-evidence .vis__foot{font-size:.61rem;line-height:1.25;margin-top:.4rem}
  .v8__stats{gap:1px;padding-top:.4rem}
  .v8__stat{padding:.45rem .5rem}
  .v8__stat svg{max-height:6rem}
  .v8__statfig{font-size:clamp(1.15rem,5.5vw,1.55rem);margin:.2rem 0 .35rem}
  .v8__statnote{font-size:.65rem;line-height:1.3}
  .v8__ban-note{font-size:.65rem;line-height:1.3;margin-top:.45rem;padding:.4rem .5rem}
}

/* ============================================================================
   Visual 4 — One Planet, Unequal Water
   ========================================================================== */
.v4__mount{height:min(58vh,520px);position:relative;cursor:grab}
.v4__mount:active{cursor:grabbing}
.v4__legend{font:600 .68rem/1.6 'Inter',system-ui,sans-serif;letter-spacing:.22em;
  color:var(--blue-300);text-align:center;margin:.6rem 0 0;min-height:1.2em}
.v4__statrow{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:1.4rem;
  border-top:1px solid rgba(199,220,245,.18);padding-top:1.4rem}
.v4__stat{padding:.4rem 1.2rem .4rem 0}
.v4__statfig{font:600 var(--type-support-stat)/1.05 'Fraunces',Georgia,serif;color:var(--cream-50);margin:.3rem 0 .55rem;letter-spacing:-.025em;text-wrap:balance}
.v4__statnote{font-size:var(--type-caption);line-height:1.55;color:var(--blue-100);opacity:.9;margin:0;max-width:26rem;text-wrap:pretty}
.v4__table{font-size:.8rem}
.v4__table th{background:rgba(143,197,244,.08);color:var(--blue-100)}
.v4__table th,.v4__table td{border-color:rgba(199,220,245,.16)}
@media (max-width:640px){
  .v4__statrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px}
  .v4__stat{padding:.7rem .65rem .5rem 0}
  .v4__statfig{font-size:clamp(1.65rem,7vw,2.1rem)}
  .v4__mount{height:max(72vw,300px)}
}

/* ============================================================================
   Part Two teaser — full navy return, restrained waves, no globe
   ========================================================================== */
#article .teaser{
  --tw:100vw;
  width:var(--tw); margin:4.5rem 0 0 calc((100% - var(--tw)) / 2);
  border:0; padding:clamp(5rem,12vh,8rem) 1.5rem clamp(6rem,16vh,10rem);
  position:relative; overflow:hidden; text-align:center;
  background:linear-gradient(180deg, #061426 0%, #03101e 62%, #020914 100%);
}
.teaser__scene{position:absolute;inset:0;opacity:.5;pointer-events:none}
.teaser__scene .hero-waves{height:min(34vh,320px)}
.teaser__inner{position:relative;max-width:44rem;margin:0 auto}
.teaser__kicker{font:600 .7rem/1 'Inter',system-ui,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:var(--blue-300);margin:0 0 1.4rem}
.teaser__title{
  font-family:'Fraunces','Iowan Old Style',Georgia,serif;font-weight:600;
  font-size:clamp(1.9rem, 1.3rem + 3vw, 3.1rem);line-height:1.12;letter-spacing:-.02em;
  color:var(--cream-50);margin:0 0 1.4rem;
}
.teaser__q{color:var(--blue-100);font-size:clamp(1rem,1.1vw,1.15rem);line-height:1.6;margin:0 auto 2rem;max-width:38rem;text-align:center}
.teaser__tag{display:inline-block;font:600 .68rem/1 'Inter',system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;
  color:#fff;background:var(--blue-500);padding:.55rem .8rem;margin:0 0 1rem}

footer{border-top:0;background:var(--cream-100);color:var(--grey-600);padding:2rem 0 3.5rem;position:relative;z-index:9999}
footer div{font:400 .82rem/1.6 'Inter',system-ui,sans-serif}

/* ============================================================================
   Light visual variant — sections alternate light / navy so each one lands
   fresh: 01 L · 02 N · 03 L · 04 N (globe) · 05 L · 06 N (timeline) · 07 L ·
   08 N · teaser N. Colour is overridden from here; the SVGs stay untouched.
   ========================================================================== */
#article .vis--light{
  background:#fff;color:var(--a-body);
}
#article .vis--light .vis__head b{color:var(--a-ink)}
#article .vis--light .vis__head p{color:var(--grey-600);opacity:1}
#article .vis--light .vis__foot{color:var(--grey-600);opacity:.9}
#article .vis--light details{border-top-color:rgba(17,25,35,.12)}
#article .vis--light summary{color:var(--grey-600)}
#article .vis--light summary:hover{color:var(--blue-600)}
#article .vis--light details ul,#article .vis--light details p{color:var(--grey-600);opacity:1}
.vis--light .vis-controls button{
  color:var(--grey-600);background:rgba(23,105,210,.04);border-color:rgba(17,25,35,.22);
}
.vis--light .vis-controls button:hover{border-color:var(--blue-600);color:var(--a-ink)}
.vis--light .vis-controls button[aria-pressed="true"],
.vis--light .vis-controls button[aria-selected="true"]{background:var(--blue-500);border-color:var(--blue-500);color:#fff}
.wc-stat--light{background:#fff;border:1px solid rgba(17,25,35,.1);color:var(--a-body)}
.wc-stat--light .wc-stat__kicker{color:var(--blue-600)}
.wc-stat--light .wc-stat__fig{color:var(--a-ink)}

/* markers and hatches shared by the light sections */
.vis--light #v3arr path,#vis5 #v3arr path{fill:#1769d2}
#v3arr path{fill:#8fc5f4}
.vis--light #v3hatch line{stroke:#1769d2;opacity:.45}

/* V1 on white */
.vis--light .v1__ghost{stroke:rgba(23,105,210,.4)}
.vis--light .v1__gate line{stroke:rgba(23,105,210,.4)}
.vis--light .v1__gate.is-passed line{stroke:rgba(23,105,210,.65)}
.vis--light .v1__gate.is-active line{stroke:#1769d2}
.vis--light .v1__stages button{background:#1769d2}
.vis--light .v1__stages button b{color:#fff}
.vis--light .v1__stages li.is-passed button b{color:#fff}
.vis--light .v1__stages li.is-active button{background:#2f80ed;box-shadow:0 0 0 2px rgba(23,105,210,.35)}
.vis--light .v1__stages li.is-active button b{color:#fff}
.vis--light .v1__flow{stroke:rgba(255,255,255,.6)}

/* V3 on white */
.vis--light .v3__pipe{stroke:rgba(23,105,210,.5)}
.vis--light .v3__cap{fill:#5d6775;opacity:1}
.vis--light .v3__use{fill:#111923}
.vis--light .v3__station path{stroke:#1769d2}
.vis--light .v3__station rect{stroke:#1769d2}
.vis--light .v3__bar[data-out="down"]{fill:#c7dcf5;stroke:#46679b}
.vis--light .v3__drop{fill:#2f80ed}
.vis--light .v3__story{color:var(--a-body);opacity:1}

/* V5 split section on white: earth tones below, blue water everywhere */
.vis--light .v5__panel--a{background:rgba(17,25,35,.03)}
.vis--light .v5__panel--b{background:rgba(47,128,237,.05)}
.vis--light .v5__cap{fill:#111923}
.vis--light .v5__lab{fill:#46679b;opacity:1}
.vis--light .v5__panel .v5__rain path[stroke]{stroke:#1769d2;opacity:.5}
.vis--light .v5__panel svg path[fill="#0b2036"]{fill:#efe7d8}
.vis--light .v5__panel svg path[stroke="#3b5f8a"]{stroke:#b3a184}
.vis--light #v5compact line{stroke:#cbbb9c}
.vis--light .v5__panel svg rect[fill="url(#v5compact)"]{opacity:1}
.vis--light #v5murk line{stroke:#8a7f6a}
.vis--light .v5__panel svg path[fill="#0d2942"]{fill:#ece2cd}
.vis--light .v5__panel svg path[stroke="#4d86c2"]{stroke:#a0906f}
.vis--light #v5pores circle{fill:#b9ab92}
.vis--light .v5__panel svg g[stroke="#8fc5f4"]{stroke:#46679b}
.vis--light .v5__panel svg path[stroke="#8fc5f4"]{stroke:#46679b}
.vis--light .v5__flow path{stroke:#1769d2}
.vis--light .v5__panel svg path[fill="#2f80ed"]{fill:#2f80ed}

/* V5b Basingstoke map on white: OS-map calm */
.vis--light .v5b__cap{fill:#111923}
.vis--light .v5b__town{fill:#111923}
.vis--light .v5b__dim{fill:#46679b;opacity:.9}
.vis--light #v5chalk path{stroke:#7ba3cf;opacity:.55}
.vis--light .v5b svg > path[stroke="#c7dcf5"]{stroke:#46679b}
.vis--light .v5b__river{stroke:#1769d2;filter:drop-shadow(0 0 3px rgba(23,105,210,.3))}
.vis--light .v5b svg circle[stroke="#f6f3ed"]{stroke:#111923}
.vis--light .v5b svg circle[fill="#f6f3ed"]{fill:#111923}
.vis--light .v5b svg g[stroke="#8fc5f4"]{stroke:#1769d2}

/* V7 cascade on white */
.vis--light .v7__hub circle{stroke:#1769d2}
.vis--light .v7__hubcap{fill:#111923}
.vis--light .v7__routes path{stroke:rgba(23,105,210,.28)}
.vis--light .v7__routes path.is-on{stroke:#1769d2;filter:drop-shadow(0 0 3px rgba(23,105,210,.35))}
.vis--light .v7__nodes circle{fill:rgba(23,105,210,.4)}
.vis--light .v7__nodes text{fill:#5d6775}
.vis--light .v7__nodes g.is-on circle{fill:#1769d2}
.vis--light .v7__nodes g.is-on text{fill:#111923}
.vis--light .v7__card{border-left-color:#1769d2}
.vis--light .v7__kicker{color:var(--blue-600)}
.vis--light .v7__fact{color:var(--a-ink)}
.vis--light .v7__more{color:var(--a-body);opacity:1}

/* ---------- misc polish ---------- */


#article-title:focus-visible{outline:3px solid var(--blue-500);outline-offset:.35rem}

/* ---------- responsive ---------- */
@media (max-width:700px){
  #article{font-size:var(--type-body)}
  #article .vis{--visw:calc(100vw - 1.2rem); padding:1.1rem .9rem 1.4rem}
}

@media (prefers-reduced-motion:reduce){
  .vis *{animation:none!important;transition-duration:.01ms!important}
}

/* ---- copy-edit pass (Matt, Aug 2026): blue asides, reference notes ---- */
#article .wc-matt-aside{color:var(--blue-600);font-style:italic}
#article .wc-matt-aside--inline{font-size:1em}
#article .wc-matt-aside--note,#article .wc-matt-aside--statement{display:block}
#article .wc-matt-aside--statement{font-size:var(--type-pull)}
#article .wc-references summary{color:var(--grey-600); font-weight:600}
#article .wc-references--opening{margin:0 0 2.4rem; border-bottom:1px solid var(--rule)}

/* ---- citations (claims/sources pass, Aug 2026): one SOURCES object in
   article.js feeds inline claim links, figure captions, interactive-state
   citations and the chapter reference lists ---- */
/* citations are the evidence voice: quiet ink with a muted underline.
   Blue italic belongs to Matt's asides only. */
#article .wc-cite{
  color:var(--a-body); text-decoration-line:underline;
  text-decoration-thickness:.06em; text-underline-offset:.18em;
  text-decoration-color:rgba(93,103,117,.6);
}
#article .wc-cite:hover{text-decoration-thickness:.12em}
#article .vis .wc-cite, #article .wc-statecite .wc-cite{color:#b9c4d0; text-decoration-color:rgba(185,196,208,.6)}
#article .vis--light .wc-cite, #article .wc-stat--light .wc-cite{color:var(--a-body); text-decoration-color:rgba(93,103,117,.6)}
#article .wc-references{font-style:normal}
#article .wc-refs{
  color:var(--grey-600); font-style:normal; font-size:var(--type-reference); line-height:1.62;
  margin:.7rem 0 0; padding-left:1.2rem;
}
#article .wc-refs li{margin:0 0 .45rem}
#article .wc-refs a{color:var(--blue-600);text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.18em}
/* the ol above it has no max-width, so a 68ch cap here made the methodology
   note narrower than its own reference list */
#article .wc-method{color:var(--grey-600); font-size:var(--type-reference); line-height:1.62}
/* references now sit inside their figure panel; navy panels need light ink
   (the light-panel variant keeps the default grey/blue above) */
#article .vis:not(.vis--light) .wc-references summary{color:var(--blue-300)}
#article .vis:not(.vis--light) .wc-references summary:hover{color:var(--cream-50)}
#article .vis:not(.vis--light) .wc-refs{color:var(--blue-100)}
#article .vis:not(.vis--light) .wc-refs a{color:var(--blue-300)}
#article .vis:not(.vis--light) .wc-method{color:var(--blue-100);opacity:.85}
#article .wc-statecite{font-size:var(--type-caption); letter-spacing:.04em; text-transform:none; opacity:.9; margin:.7rem 0 0}
#article .wc-stat__note{font-size:var(--type-caption); line-height:1.55;color:var(--grey-600); margin:.4rem 0 0;max-width:58ch}
.wc-stat--light .wc-stat__note{color:var(--grey-600)}

/* ---- Block 3 presentation system: stable measures and dynamic regions ---- */
#article section.part > p:not(.key),#article section.part > h2,#article section.part > h3{max-width:68ch}
#article strong{font-weight:750;color:var(--a-ink)}
#article h1,#article h2,#article h3,#article .vis__head b,#article .wc-stat__fig,
#article .v2__fig,#article .v4__statfig,#article .v8__statfig{text-wrap:balance}
#article .v2__fig{font-size:var(--type-support-stat)}
#article .v2__card{min-block-size:16rem}
#article .v3__story{min-block-size:4.8em;font-size:clamp(.95rem,.91rem + .16vw,1.04rem);text-wrap:pretty}
#article .v4__legend{min-block-size:3.2em;font-size:var(--type-graph-label);display:grid;place-items:center}
#article .v7__card{min-block-size:14.5rem}
#article .v8__opts{block-size:44px}
#article .v8__card{block-size:10rem}
#article .v4__stat,#article .v8__stat{min-width:0;display:grid;align-content:start}
#article .v4__statrow,#article .v8__stats{align-items:stretch}
#article .v1__stages button b,#article .v2__name,#article .v2__facts dt,
#article .v3__cap,#article .v5__cap,#article .v5__lab,#article .v5b__cap,
#article .v5b__dim,#article .v6__months text,#article .v6__note,
#article .v7__kicker,#article .v7__nodes text,#article .v8__axis,#article .v8__line{
  font-size:var(--type-graph-label)
}

@media (max-width:640px){
  #article .note{font-size:var(--type-body)}
  /* mobile QA 2026-08-04: marker inside the column, one-line series trail,
     v2 store facts hidden, rainfall annotation clear of the JUN value */
  #article summary{list-style-position:inside}
  #article .wc-open .wc-series{font-size:.6rem;letter-spacing:.1em}
  #article .wc-open .wc-series li+li::before{margin:0 .4rem}
  #article .v2__method{display:none}
  #article .v6 .v6p-ann{transform:translate(-30px,-14px)}
  #article .wc-open + section.part{margin-top:3.5rem;padding-top:2.8rem}
  #article section.part{margin-top:4.4rem;padding-top:3rem}
  #article .wc-break{margin-block:2.5rem;padding:1.5rem 1.25rem}
  #article .wc-matt-aside--statement{font-size:clamp(1.3rem,6vw,1.65rem)}
  #article .v2__card{min-block-size:16.5rem}
  #article .v3__story{min-block-size:9rem}
  #article .v7__card{min-block-size:22rem}
  #article .v8__opts{block-size:92px}
  #article .v8__card{block-size:14.6rem}
  #article .v4__statnote{font-size:clamp(.82rem,3.8vw,.9rem)}
  #article #p2svg text[font-family^="ui-monospace"]{font-size:20px}
  #article .v3 .v3__m .v3__cap{font-size:13px;letter-spacing:.1em}
  #article .v5__cap{font-size:17px;letter-spacing:.16em}
  #article .v5__lab{font-size:16px;letter-spacing:.08em}
  #article .v6 .v6p-label{font-size:18px;letter-spacing:.1em}
  #article .v6 .v6p-val{font-size:22px}
  #article .v6 .v6p-ann{font-size:17px}
  #article .v8__axis,#article .v8__line{display:none}
}

/* ---- Block 4: compact selected-state modules ---- */
#stat250{
  --statw:min(880px,100%);display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto;align-items:end;gap:.45rem clamp(1.5rem,4vw,3rem);
  padding:clamp(1.25rem,3vw,2rem) clamp(1.25rem,3vw,2rem)
}
#stat250 .wc-stat__kicker{grid-column:1;grid-row:1;margin:0;align-self:end;max-width:34rem}
#stat250 .wc-stat__fig{
  grid-column:2;grid-row:1 / span 2;display:flex;align-items:center;min-block-size:1em;
  margin:0;font-size:clamp(5rem,8vw,6.4rem);line-height:.88;white-space:nowrap
}
#stat250 .wc-stat__note{grid-column:1;grid-row:2;margin:0;align-self:start}
@media (max-width:640px){
  #stat250{display:block;padding:1.15rem 1.2rem}
  #stat250 .wc-stat__kicker{margin-bottom:.7rem}
  #stat250 .wc-stat__fig{font-size:clamp(3.5rem,19vw,5.25rem);margin:0 0 .65rem}
}

/* ---- Block 5: Follow One Unit + publication-ready globe frame ---- */
#article #vis3{padding:clamp(1rem,2vw,1.5rem)}
#vis3 .vis__head p{margin-bottom:.75rem}
#vis3 .vis__label{margin:.2rem 0 .4rem}
#vis3 > .vis-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.35rem;margin-bottom:.55rem}
#vis3 > .vis-controls button{padding:.45rem .35rem;min-height:2.75rem}
#article #vis3 .v3__wide{max-height:15.5rem}
.v3__bar{transition:height .55s cubic-bezier(.3,.6,.2,1),width .55s cubic-bezier(.3,.6,.2,1),y .55s cubic-bezier(.3,.6,.2,1)}
.v3__use-m{font:700 11px/1 'Inter',system-ui,sans-serif;letter-spacing:.14em;fill:#111923}
#article #vis3 .v3__story{display:flex;align-items:center;min-block-size:0;block-size:3.8rem;margin:.45rem auto 0;font-size:.86rem;line-height:1.38}
.v3__definitions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin:.55rem 0 0}
.v3__definitions div{border-top:1px solid rgba(23,105,210,.18);padding-top:.45rem}
.v3__definitions dt{font:700 .64rem/1.2 'Inter',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-600)}
.v3__definitions dd{margin:.25rem 0 0;font-size:.72rem;line-height:1.35;color:var(--grey-600)}
#article #vis3 .v3__cite{margin:.45rem 0 0}
#article #vis3 .vis__foot{margin-top:.55rem}

#article #vis4{padding:clamp(1rem,2vw,1.5rem)}
#vis4 .vis__head p{margin-bottom:.75rem}
.v4__pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;margin:0 auto .65rem}
.v4__filter{border:0;margin:0;padding:0;min-width:0}
.v4__filter legend{font:700 .62rem/1 'Inter',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-300);margin-bottom:.35rem}
.v4__filter label{display:inline-flex;vertical-align:top;min-height:2.75rem;cursor:pointer}
.v4__filter input{position:absolute;opacity:0;pointer-events:none}
.v4__filter span{display:grid;place-items:center;min-height:2.75rem;padding:.35rem .55rem;border:1px solid rgba(143,197,244,.28);font:700 .62rem/1.15 'Inter',system-ui,sans-serif;letter-spacing:.06em;text-align:center;text-transform:uppercase;color:var(--blue-100)}
.v4__filter input:checked + span{background:var(--blue-500);border-color:var(--blue-500);color:#fff}
.v4__filter input:focus-visible + span{outline:2px solid var(--blue-300);outline-offset:2px}
.v4__main{display:grid;grid-template-columns:minmax(0,1fr) minmax(14rem,17rem);gap:.75rem;align-items:stretch}
.v4__mount{height:min(34svh,19rem);min-height:15rem;cursor:grab}
.v4__selected{border:1px solid rgba(143,197,244,.2);padding:.65rem;min-width:0}
.v4__selected > label{display:block;font:700 .6rem/1 'Inter',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-300);margin-bottom:.35rem}
.v4__selected select{width:100%;min-height:2.75rem;border:1px solid rgba(143,197,244,.3);background:#071a31;color:var(--cream-50);padding:.35rem;font:600 .78rem/1.2 'Inter',system-ui,sans-serif}
.v4__selected dl{margin:.45rem 0 0}
.v4__selected dl div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.35rem;padding:.28rem 0;border-top:1px solid rgba(143,197,244,.14)}
.v4__selected dt{font:600 .64rem/1.25 'Inter',system-ui,sans-serif;color:var(--blue-300)}
.v4__selected dd{margin:0;font:600 .7rem/1.25 'Inter',system-ui,sans-serif;text-align:right;white-space:nowrap}
.v4__selected a,.v4__anchor a,.v4__table a,.v4__fieldmeta a{color:var(--blue-100);text-decoration:underline;text-underline-offset:.16em}
.v4__anchor{font-size:.62rem;line-height:1.3;color:var(--blue-300);margin:.4rem 0 0}
.v4__scales{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.45rem}
.v4__scales > div{min-width:0}
.v4__scales b{display:block;font:700 .58rem/1 'Inter',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-300);margin-bottom:.25rem}
.v4__ramp{display:grid;grid-template-columns:repeat(5,1fr);align-items:end}
.v4__rampitem{display:grid;min-width:0}
.v4__ramp i{display:block;height:.45rem;background:var(--c)}
.v4__ramp small{font-size:.54rem;line-height:1.2;color:var(--blue-300);text-align:center}
.v4__size-scale{display:flex;align-items:end;gap:.65rem;min-height:1.55rem}
.v4__sizekey{display:flex;align-items:end;gap:.2rem}
.v4__sizekey i{display:block;width:var(--d);height:var(--d);border-radius:50%;background:var(--blue-300)}
.v4__sizekey small,.v4__same{font-size:.56rem;color:var(--blue-300)}
.v4__stress-note{font:500 .78rem/1.45 'Inter',system-ui,sans-serif;color:var(--blue-100);opacity:.9;margin:.6rem 0 0;max-width:36rem}
.v4__dataset{font:600 .58rem/1.3 'Inter',system-ui,sans-serif;letter-spacing:.04em;color:var(--blue-300);margin:.35rem 0 0;text-align:center}
#article #vis4 .v4__statrow{margin-top:.55rem;padding-top:.55rem}
#article #vis4 .v4__stat{display:block;padding:.25rem .65rem .25rem 0}
#article #vis4 .wc-stat__kicker{margin-bottom:.2rem}
#article #vis4 .v4__statfig{font-size:clamp(1.5rem,3vw,2.15rem);margin:.2rem 0 .3rem}
#article #vis4 .v4__statnote{font-size:.72rem;line-height:1.35}
#article #v4-method summary{min-height:2.75rem;display:flex;align-items:center}
.v4__fieldmeta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;padding:.75rem 0}
.v4__fieldmeta h4{margin:0 0 .4rem;color:var(--cream-50)}
.v4__fieldmeta dl{margin:0}
.v4__fieldmeta dl div{display:grid;grid-template-columns:5rem 1fr;gap:.5rem;padding:.25rem 0;border-top:1px solid rgba(143,197,244,.14)}
.v4__fieldmeta dt{font-size:.65rem;color:var(--blue-300)}
.v4__fieldmeta dd{margin:0;font-size:.72rem;line-height:1.35;color:var(--blue-100)}
#v4-method .v4__fieldmeta h4{color:var(--a-ink)}
#v4-method .v4__fieldmeta dt{color:var(--blue-600)}
#v4-method .v4__fieldmeta dd{color:var(--grey-600)}
#v4-method .v4__fieldmeta a,#v4-method .v4__table a{color:var(--blue-600);text-decoration:underline;text-underline-offset:.16em}
#article #vis4 .vis__foot{margin-top:.5rem}

@media (max-width:640px){
  #article #vis3,#article #vis4{padding:.7rem .65rem .75rem}
  #vis3 .vis__head b,#vis4 .vis__head b{font-size:1.18rem}
  #vis3 .vis__head p,#vis4 .vis__head p{font-size:.78rem;line-height:1.3;margin-bottom:.35rem}
  #vis3 .vis__label{font-size:.58rem;margin:.1rem 0 .3rem}
  #vis3 > .vis-controls{gap:.2rem;margin-bottom:.35rem}
  #vis3 > .vis-controls button{font-size:.58rem;letter-spacing:.04em;padding:.3rem .15rem}
  #article #vis3 .v3__m{height:8.25rem;width:100%;max-width:none;margin:0}
  #article #vis3 .v3__story{block-size:4.45rem;font-size:.72rem;line-height:1.3;margin-top:.25rem}
  .v3__definitions{gap:.3rem;margin-top:.3rem}
  .v3__definitions div{padding-top:.3rem}
  .v3__definitions dt{font-size:.6rem;letter-spacing:.04em}
  .v3__definitions dd{font-size:.65rem;line-height:1.24;margin-top:.15rem}
  #article #vis3 .v3__cite{font-size:.61rem;line-height:1.25;margin-top:.28rem}
  #article #vis3 .vis__foot{font-size:.62rem;line-height:1.25;margin-top:.35rem}
  #article #vis3 .v3 .v3__m .v3__cap{font-size:11px;letter-spacing:.08em}
  #article #vis3 .v3__use-m{font-size:11px}

  .v4__pick{grid-template-columns:1fr;gap:.35rem;margin-bottom:.4rem}
  .v4__filter{display:grid;grid-template-columns:4rem repeat(4,minmax(0,1fr));align-items:end;gap:2px}
  .v4__filter:first-child{grid-template-columns:4rem repeat(3,minmax(0,1fr))}
  .v4__filter legend{grid-column:1;align-self:center;margin:0;font-size:.7rem}
  .v4__filter label{min-width:0}
  .v4__filter span{width:100%;padding:.25rem .1rem;font-size:.7rem;letter-spacing:0}
  .v4__main{grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:.35rem}
  .v4__mount{height:11.5rem;min-height:0}
  .v4__selected{height:11.5rem;padding:.35rem}
  .v4__selected > label{font-size:.75rem;margin-bottom:.2rem}
  .v4__selected select{min-height:2.75rem;font-size:.85rem;padding:.2rem}
  .v4__selected dl{margin-top:.2rem}
  .v4__selected dl div{padding:.12rem 0;gap:.15rem}
  .v4__selected dt,.v4__selected dd{font-size:.7rem;line-height:1.15}
  .v4__anchor{font-size:.72rem;line-height:1.15;margin-top:.2rem}
  .v4__scales{gap:.35rem;margin-top:.3rem}
  .v4__scales b{font-size:.7rem;margin-bottom:.15rem}
  .v4__ramp small{font-size:.7rem}
  .v4__size-scale{gap:.35rem;min-height:1.2rem}
  .v4__sizekey small,.v4__same{font-size:.7rem}
  .v4__dataset{display:none}
  #article #vis4 .v4__statrow{margin-top:.35rem;padding-top:.35rem}
  #article #vis4 .v4__stat{padding:.2rem .35rem .15rem 0}
  #article #vis4 .wc-stat__kicker{font-size:.75rem;letter-spacing:.03em;line-height:1.2}
  #article #vis4 .v4__statfig{font-size:clamp(1.15rem,5.4vw,1.45rem);margin:.12rem 0 .2rem}
  #article #vis4 .v4__statnote{font-size:.78rem;line-height:1.25}
  #article #v4-method summary{min-height:2.75rem;font-size:.62rem;letter-spacing:.05em}
  #article #vis4 .vis__foot{font-size:.75rem;line-height:1.25;margin-top:.3rem}
  .v4__fieldmeta{grid-template-columns:1fr}
}

@media (min-width:641px) and (max-height:820px){
  .v4__mount{height:15rem;min-height:15rem}
  #article #vis4 .v4__statnote{font-size:.68rem}
  #article #vis4 .vis__foot{font-size:.68rem}
}

/* ---- Block 6: rainfall comparison and Basingstoke conceptual section ---- */
#article #vis5,#article #vis5b{padding:clamp(.85rem,2.4vw,1.5rem)}
#article #vis5 .vis__head p,#article #vis5b .vis__head p{margin-bottom:.7rem}
#article .v5{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;max-width:62rem}
#article .v5__panel{display:grid;grid-template-rows:auto minmax(0,1fr) auto;align-items:center;padding:.75rem;min-width:0}
#article .v5__framehead{padding:.1rem .25rem .3rem}
#article .v5__framehead h3{margin:.16rem 0 0;max-width:none;font-size:clamp(1rem,.86rem + .5vw,1.28rem);line-height:1.15}
#article .v5__side{margin:0;font:700 .62rem/1.2 'Inter',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-600)}
#article .v5__panel svg{display:block;width:100%;height:auto;max-height:19rem}
#article .v5__framecopy{margin:.3rem .25rem .1rem;font-size:clamp(.76rem,.7rem + .18vw,.88rem);line-height:1.4;color:var(--grey-600)}
#article .v5__thesis{grid-column:1 / -1;margin:0;padding:.8rem 1rem;text-align:center;font:650 clamp(1.1rem,.9rem + .8vw,1.5rem)/1.2 'Fraunces',Georgia,serif;color:var(--blue-600);background:rgba(23,105,210,.08)}

.v5b__sequence{position:relative;margin-top:1.5rem;padding-top:.1rem}
.v5b__sequence::before{content:"";position:absolute;inset:0 auto 0 calc(50% - 50vw);width:100vw;background:linear-gradient(180deg,transparent,rgba(23,105,210,.025) 12%,rgba(23,105,210,.025) 88%,transparent);pointer-events:none;z-index:-1}
.v5b__sequence > p:not(.wc-break p){max-width:68ch}
#article .v5b__badge{display:inline-flex;align-items:center;min-height:2rem;margin:.1rem 0 .65rem;padding:.25rem .65rem;border:1px solid rgba(23,105,210,.25);border-radius:999px;font:700 .62rem/1.2 'Inter',system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-600)}
#article .v5b{overflow:visible;max-width:62rem;margin:0 auto}
#article .v5b svg{display:block;width:100%;height:auto;margin:0 auto}
#article .v5b svg.v5b__mobile{display:none}
#article .v5b svg.v5b__wide{display:block;max-width:56rem}
.v5b__label{font:700 15px/1 'Inter',system-ui,sans-serif;letter-spacing:.08em;fill:#173f73}
.v5b__small{font:650 12px/1 'Inter',system-ui,sans-serif;letter-spacing:.035em;fill:#46679b}
.v5b__label--dark,.v5b__small--dark{fill:#111923}
.v5b__townmark{fill:#f6f3ed;stroke:#111923;stroke-width:2}
.v5b__rain,.v5b__infil{stroke-linecap:round}

@media (max-width:640px){
  #article #vis5,#article #vis5b{padding:.7rem .65rem .75rem}
  #article #vis5b{padding-block:.4rem}
  #article #vis5 .vis__head b,#article #vis5b .vis__head b{font-size:1.18rem}
  #article #vis5 .vis__head p,#article #vis5b .vis__head p{font-size:.78rem;line-height:1.3;margin-bottom:.4rem}
  #article .v5{display:grid;grid-template-columns:1fr;gap:.65rem}
  #article .v5__panel{min-height:0;padding:.65rem;border:1px solid rgba(23,105,210,.16)}
  #article .v5__panel svg{max-height:none}
  #article .v5__framehead{padding:0 .15rem .2rem}
  #article .v5__framehead h3{font-size:1.08rem}
  #article .v5__side{font-size:.6rem;letter-spacing:.075em}
  #article .v5__framecopy{font-size:.76rem;line-height:1.35;margin:.2rem .15rem 0}
  #article .v5__thesis{grid-row:2;margin:0;padding:.8rem .5rem;font-size:1.2rem}
  #article .v5__panel--b{grid-row:3}
  #article .v5__cap{font-size:22px;letter-spacing:.075em}
  #article .v5__lab{font-size:21px;letter-spacing:.035em}

  #article .v5b__sequence{margin-top:1rem}
  #article #vis5b .vis__head p{display:none}
  #article .v5b__badge{min-height:1.5rem;font-size:.56rem;letter-spacing:.055em;margin:.15rem 0 .3rem}
  #article .v5b{overflow:visible}
  #article .v5b svg.v5b__wide{display:none}
  #article .v5b svg.v5b__mobile{display:block;width:100%;max-width:16.5rem}
  #article .v5b__label{font-size:20px;letter-spacing:.025em}
  #article .v5b__small{font-size:18px;letter-spacing:.005em}
  #article #vis5b .vis__foot{font-size:.6rem;line-height:1.23;margin-top:.25rem}
}

@media (prefers-reduced-motion:reduce){
  #article .v5__rain g,#article .v5__flow path{animation:none}
}

/* Compact landscape composition: preserve the same states without desktop-height spacing. */
@media (orientation:landscape) and (min-width:641px) and (max-height:520px){
  #article #vis2 .v2{grid-template-columns:12rem minmax(0,1fr);gap:.7rem}
  #article #vis2 .v2__vault{max-height:14rem}
  #article #vis2 .v2__tag--full{display:none}
  #article #vis2 .v2__tag--mobile{display:block;font-size:30px}
  #article #vis2 .v2__share{font-size:31px}
  #article #vis2 .v2__share--surface{font-size:26px}
  #article #vis2 .v2__card{min-block-size:0}

  #article #vis3 .v3__wide{max-height:12rem}
  #article #vis3 .v3__story{block-size:auto;min-block-size:0;margin-top:.3rem}
  #article #vis3 .v3__definitions{margin-top:.3rem}

  #article #vis4 .v4__mount{height:11.25rem;min-height:11.25rem}
  #article #vis4 .v4__selected{height:11.25rem}

  #article #vis5 .v5__panel{padding:.45rem}
  #article #vis5 .v5__panel svg{max-height:13.5rem}
  #article #vis5 .v5__framecopy{margin-top:.15rem;line-height:1.3}
  #article #vis5 .v5__thesis{padding:.45rem .75rem}

  #article #vis6 .v6__plot{height:9rem}
  #article #vis6 .v6__month i{height:calc(var(--rain) * 6rem)}
  #article #vis6 .v6__month strong{bottom:calc(1.5rem + var(--rain) * 6rem + .2rem)}
  #article #vis6 .v6__response svg{height:3rem}

  #article #vis7 .v7__page{padding:.35rem .45rem}
  #article #vis7 .v7__page header{padding-bottom:.28rem}
  #article #vis7 .v7__branches li{padding:.22rem 0 .2rem .4rem}
  #article #vis7 .v7__branches li::before{top:.72rem}
  #article #vis7 .v7__branches p{font-size:.7rem;line-height:1.16;margin:.1rem 0 0}
  #article #vis7 .v7__branches li b{font-size:.7rem}
  #article #vis7 .v7__type{font-size:.58rem}

  #article #vis8 .v8__card{block-size:9rem}
}


/* ======================================================================
   Signed-off redesigns, 3 Aug 2026 — vis2 vault v3, vis5 terrain panels,
   vis5b playable chalk sim, vis6 overlay chart, vis7 spine, vis8 leak loop.
   ==================================================================== */

/* ---- shared controls ---- */
.pbtns{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin:0 0 1.1rem}
.pbtn{font:700 .66rem/1 'Inter',system-ui,sans-serif;letter-spacing:.12em;padding:.55rem .85rem;
  border:1.5px solid #2f6bb0;background:transparent;color:#1d3a5f;cursor:pointer;border-radius:2px;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.pbtn[aria-pressed="true"]{background:#1769d2;border-color:#1769d2;color:#fff}
.p4card{text-align:center;color:#c7dcf5;font-size:.9rem;margin:.9rem auto 0;max-width:34rem}
.p4card b{font-family:'Fraunces',Georgia,serif;font-size:1.3rem;color:#fff;display:block;margin-bottom:.15rem}
.p4card .wc-cite{color:#b9c4d0}

/* ---- vis6: overlay chart ---- */
.v6n-key{display:flex;align-items:center;justify-content:center;gap:.55rem;flex-wrap:wrap;margin:0 0 1.4rem}
.v6n-swatch{width:20px;height:13px;background:linear-gradient(#58a2ff,#1e57a8);display:inline-block}
.v6n-keylab{font:700 .64rem/1 'Inter',system-ui,sans-serif;letter-spacing:.14em;color:#c7dcf5;text-transform:uppercase;margin-right:1rem}
.v6n-sample{width:48px;height:10px}
.v6n-chart{width:100%;max-width:820px;height:auto;display:block;margin:0 auto}
.v6p-label{font:700 10px/1 'Inter',system-ui,sans-serif;letter-spacing:.14em;fill:#c7dcf5}
.v6p-val{font:650 15px/1 'Fraunces',Georgia,serif;fill:#e3edf8}
.v6p-curve{fill:none;stroke:#9cc8ff;stroke-width:2.5;stroke-dasharray:9 8;stroke-linecap:round;
  filter:drop-shadow(0 0 4px rgba(156,200,255,.45))}
.v6.is-live .v6p-curve{animation:v6drift 5s linear infinite}
@keyframes v6drift{to{stroke-dashoffset:-34px}}
.v6p-ann{font:500 12.5px/1.3 'Inter',system-ui,sans-serif;fill:#fff;opacity:0;transition:opacity .6s ease .9s}
.v6.is-live .v6p-ann{opacity:1}
.v6n-barr{transform:scaleY(0);transform-origin:bottom;transform-box:fill-box;
  transition:transform .7s cubic-bezier(.25,.7,.3,1)}
.v6.is-live .v6n-barr{transform:scaleY(1)}
.v6n-barr:nth-child(2){transition-delay:.12s}.v6n-barr:nth-child(3){transition-delay:.24s}
.v6n-barr:nth-child(4){transition-delay:.36s}.v6n-barr:nth-child(5){transition-delay:.48s}
.v6n-barr:nth-child(6){transition-delay:.6s}

/* ---- vis5: terrain rain panels ---- */
#article .v5__panel{background:#fff}
.rp{position:relative;height:210px;background:#fff;overflow:hidden}
.terrain{position:absolute;left:0;right:0;bottom:0;width:100%;height:100px;display:block;z-index:1}
.p5run{stroke:#2f80ed;stroke-width:4;stroke-dasharray:10 14;stroke-linecap:round;fill:none;
  animation:runslope .8s linear infinite;opacity:.9}
@keyframes runslope{to{stroke-dashoffset:-24px}}
.p5rain{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.p5rain line{stroke:#2f80ed;stroke-width:2;stroke-linecap:round;stroke-dasharray:7 34;animation:bfall 1.25s linear infinite}
.p5rain line:nth-child(2n){animation-delay:.45s}
.p5rain line:nth-child(3n){animation-delay:.8s}
.p5rain line:nth-child(5n){animation-delay:.2s}
.soak2{position:absolute;bottom:5%;width:3px;height:24%;z-index:2;
  background:repeating-linear-gradient(#2f80ed 0 6px,transparent 6px 12px);
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent);
  animation:soakdown 1.3s linear infinite}
@keyframes soakdown{to{background-position:0 12px}}

/* ---- vis5b: playable chalk sim ---- */
.p5bproto{width:100%;max-width:52rem;margin:0 auto}
.p5bproto svg{width:100%;height:auto;display:block}
.b-rain line{stroke:#2f80ed;stroke-width:2;stroke-linecap:round;stroke-dasharray:7 34;animation:bfall 1.25s linear infinite}
.b-rain line:nth-child(2n){animation-delay:.45s}
.b-rain line:nth-child(3n){animation-delay:.8s}
.b-rain line:nth-child(5n){animation-delay:.2s}
@keyframes bfall{to{stroke-dashoffset:-41px}}
.b-inf line{stroke:#4a86c8;stroke-width:2;stroke-dasharray:5 9;animation:binf 4s linear infinite;opacity:.85}
.b-inf line:nth-child(2){animation-delay:.9s}
.b-inf line:nth-child(3){animation-delay:1.8s}
.b-inf line:nth-child(4){animation-delay:2.7s}
@keyframes binf{to{stroke-dashoffset:-28px}}
.b-aq{animation:bbreathe 12s ease-in-out infinite}
@keyframes bbreathe{50%{transform:translateY(4px)}}
#aqwrap{transition:transform .3s linear}
.b-flow{stroke:#2f80ed;stroke-width:2.5;stroke-dasharray:12 10;animation:bdrift 6s linear infinite}
@keyframes bdrift{to{stroke-dashoffset:-44px}}
.b-baseflow{stroke:#7fa9d8;stroke-width:2;stroke-dasharray:4 8;opacity:.35;animation:binfup 3s linear infinite}
@keyframes binfup{to{stroke-dashoffset:28px}}
.b-abstract{stroke:#7fa9d8;stroke-width:3;stroke-dasharray:5 8;opacity:.3;transition:opacity .5s,stroke .5s;animation:binfup 2s linear infinite}
.pumping .b-abstract{opacity:1;stroke:#1a5fb8}
.b-label{font:700 11px/1 'Inter',system-ui,sans-serif;letter-spacing:.12em;fill:#7a6a4a}
.b-label--blue{fill:#2f6bb0}
.b-label--big{font:800 13px/1 'Inter',system-ui,sans-serif;letter-spacing:.16em}
#rainG,#infG{transition:opacity .8s}
.drought #rainG,.drought #infG{opacity:0}
#townwin{transition:stroke .4s}
.pumping #townwin{stroke:#d8961c}
.pp{fill:#2f80ed;opacity:0}
.pumping .pp{opacity:1;animation:ppup 1s linear infinite}
.pumping .pp.b{animation-delay:.33s}
.pumping .pp.c{animation-delay:.66s}
@keyframes ppup{from{transform:translateY(0)}to{transform:translateY(-162px)}}
.dry .pp{opacity:0;animation:none}
.dry #townwin{stroke:#8a744a}
.dry .b-abstract{opacity:.25;stroke:#7fa9d8}
#article .b-status{font:600 .74rem/1.5 'Inter',system-ui,sans-serif;letter-spacing:.06em;color:#2f6bb0;text-align:center;margin:1.4rem auto 0;min-height:1.3em;max-width:none}
/* mobile: square crop on the town/borehole side (full diagram on desktop);
   labels shift into the crop, the fourth infiltration dash makes room */
@media (max-width:700px){
  #article .p5bproto{overflow:hidden}
  #article .p5bproto svg{width:180%;max-width:none;margin:0 0 0 -80%}
  #article .p5bproto .lbl-chalk{transform:translateX(260px)}
  #article .p5bproto .lbl-aquifer{transform:translateX(150px);font-size:11px;letter-spacing:.1em}
  #article .p5bproto #infG line:nth-child(4){display:none}
}

/* ---- vis2: vault v3 ---- */
.p2proto{width:100%;max-width:320px;height:auto;display:block}
.p2proto .slab{cursor:pointer;transition:transform .4s cubic-bezier(.25,.7,.3,1),opacity .4s,filter .4s}
.p2proto .slab.on{transform:translateY(-8px);filter:drop-shadow(0 10px 16px rgba(0,0,0,.5)) brightness(1.06)}
.p2proto.picked .slab:not(.on){opacity:.38;filter:saturate(.7)}
.p2proto .slab:focus:not(:focus-visible){outline:none}
.p2proto .slab:focus-visible{outline:2px solid #2f80ed;outline-offset:2px}
.spark{fill:#fff;opacity:0;animation:sparkb 4s ease-in-out infinite}
.spark--b{animation-delay:1.3s;animation-duration:5s}
.spark--c{animation-delay:2.4s;animation-duration:3.4s}
@keyframes sparkb{0%,100%{opacity:0}50%{opacity:.85}}
.p2halo{animation:halop 2.4s ease-in-out infinite}
@keyframes halop{50%{opacity:.32}}
.perc{fill:#58a2ff;transform-box:fill-box;animation:percd 5.5s linear infinite}
.perc--b{animation-delay:1.8s}
.perc--c{animation-delay:3.6s}
@keyframes percd{0%{transform:translateY(0);opacity:0}12%{opacity:.85}80%{opacity:.85}100%{transform:translateY(76px);opacity:0}}
.p2glint{animation:p2sweep 4.2s cubic-bezier(.25,.7,.3,1) infinite}
@keyframes p2sweep{0%{transform:translateX(-90px)}55%,100%{transform:translateX(330px)}}
.p2ripple{stroke:#6fd6ff;stroke-width:3;stroke-dasharray:12 16;animation:p2rip 2s linear infinite;filter:drop-shadow(0 0 3px rgba(111,214,255,.8))}
@keyframes p2rip{to{stroke-dashoffset:-28px}}
.p2shimmer{animation:p2shim 7s ease-in-out infinite}
@keyframes p2shim{50%{opacity:.55}}
@keyframes cardin{from{opacity:0;transform:translateY(7px)}}
#article .v2__card.swap{animation:cardin .45s cubic-bezier(.25,.7,.3,1)}

/* ---- vis8: leak loop ---- */
#p8svg{width:100%;max-width:760px;height:auto;display:block;margin:0 auto}
.f-lost{stroke-dasharray:4 6;animation:flowdown2 1.6s linear infinite;fill:none}
@keyframes flowdown2{to{stroke-dashoffset:-28px}}
.c-node{fill:#0e2745;stroke:#3a5a82;stroke-width:1.4}
.n0{animation:nodecycle 6.3s linear infinite}
.n1{animation:nodecycle 6.3s linear infinite .9s}
.n2{animation:nodecycle 6.3s linear infinite 1.8s}
.n3{animation:nodecycle 6.3s linear infinite 2.7s}
.n4{animation:nodecycle 6.3s linear infinite 3.6s}
.n5{animation:nodecycle 6.3s linear infinite 4.5s}
.n6{animation:nodecycle 6.3s linear infinite 5.4s}
@keyframes nodecycle{0%,9%{stroke:#58a2ff}12%,100%{stroke:#3a5a82}}
.c-icon{stroke:#8fc5f4;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.c-label{font:700 10px/1 'Inter',system-ui,sans-serif;letter-spacing:.1em;fill:#c7dcf5}
.j-dot{fill:#58a2ff}
.leakline{stroke:#58a2ff;stroke-width:2;stroke-dasharray:4 7;animation:p8drip 1.4s linear infinite}
@keyframes p8drip{to{stroke-dashoffset:-22px}}

/* ---- vis7: cascade spine ---- */
.p7wrap{display:flex;gap:1.1rem;width:100%;max-width:36rem;margin:0 auto;align-items:stretch}
.p7spine{width:5px;flex:none;border-radius:3px;
  background:repeating-linear-gradient(#2f80ed 0 9px,rgba(47,128,237,.15) 9px 18px);
  animation:p7flow 1.6s linear infinite}
@keyframes p7flow{to{background-position:0 18px}}
.p7list{list-style:none;margin:0;padding:0;flex:1}
#article .p7list li{display:flex;gap:.85rem;align-items:flex-start;padding:.6rem 0;border-bottom:1px dashed #cdd8e4;margin:0}
#article .p7list li:last-child{border-bottom:none}
#article .p7list svg.p7i{width:28px;height:28px;flex:none;stroke:#1d3a5f;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-top:.1rem}
#article .p7list b{display:block;color:#122033;font-size:.95rem;font-family:'Inter',system-ui,sans-serif}
#article .p7list span{color:#40506a;font-size:.86rem;line-height:1.5}

/* ---- page-level: waves must never cause sideways scroll ---- */
html,body{overflow-x:clip}
#cover,.teaser{overflow:hidden}

@media (prefers-reduced-motion: reduce){
  .v6p-curve,.b-rain line,.b-inf line,.b-aq,.b-flow,.b-baseflow,.b-abstract,.pp,
  .p5rain line,.p5run,.soak2,.spark,.p2halo,.perc,.p2glint,.p2ripple,.p2shimmer,
  .f-lost,.c-node,.leakline,.p7spine{animation:none!important}
  .v6n-barr{transform:scaleY(1)!important;transition:none!important}
  .v6p-ann{opacity:1!important;transition:none!important}
}

#article .teaser__q{margin:0 auto 2rem;text-align:center}

#article .p4card{margin:.9rem auto 0;text-align:center}

/* ---- series system, 4 Aug 2026: progress strip + local-investigation device ---- */
#article .wc-series{
  display:flex; flex-wrap:wrap; list-style:none;
  margin:-1.1rem 0 2.4rem; padding:0;
  font:600 .68rem/1.5 'Inter',system-ui,sans-serif;
  letter-spacing:.18em; text-transform:uppercase; color:var(--grey-600);
}
#article .wc-series li{display:flex; align-items:center}
#article .wc-series li+li::before{
  content:'\2192'; margin:0 .6rem; font-weight:400; letter-spacing:0;
  color:rgba(93,103,117,.45);
}
#article .wc-series li[aria-current]{color:var(--a-ink)}
.wc-open--armed .wc-series{opacity:0; transform:translateY(10px)}
.wc-open.is-in .wc-series{
  opacity:1; transform:none;
  transition:opacity .5s cubic-bezier(.22,1,.36,1) .25s, transform .5s cubic-bezier(.22,1,.36,1) .25s;
}
@media (prefers-reduced-motion:reduce){
  .wc-open--armed .wc-series{opacity:1!important; transform:none!important; transition:none!important}
}
#article .wc-local{
  font:600 .68rem/1.5 'Inter',system-ui,sans-serif;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--grey-600); margin:0 0 .85rem;
}