/* ECS preservation — one design system.
   Rules: five type sizes, one spacing scale, one accent. Hairlines and
   whitespace carry hierarchy; boxes are used only where a thing is genuinely
   separable from what surrounds it. */

:root{
  color-scheme: light dark;

  /* surfaces — warm paper, not office white */
  --bg:#faf8f3;
  --raise:#fffefb;
  --sunk:#f1eee6;
  --rule:#e3ded1;
  --rule-strong:#cec8b8;

  /* ink — three */
  --ink:#191712;
  --ink-2:#57534a;
  --ink-3:#878275;

  /* the hero band is dark in both themes: the renders are lit objects and
     they want a dark ground to sit on */
  --night:#12110f;
  --night-2:#1c1a16;
  --night-ink:#f7f4ec;
  --night-ink-2:#a8a294;
  --night-rule:#2b2822;

  /* one accent, plus the two data colours */
  --accent:#1f6feb;
  --chem:#eb6834;
  --hpf:#2a78d6;
  --flag:#b4470f;

  /* type: five sizes, nothing else */
  --t1:26px; --t2:17px; --t3:15px; --t4:13px; --t5:11.5px;

  /* space: one scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:18px; --s5:28px; --s6:44px; --s7:72px;

  --maxw:1120px;
  --radius:8px;
}
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    --bg:#12110f; --raise:#1a1815; --sunk:#221f1a;
    --rule:#2e2b25; --rule-strong:#433f36;
    --ink:#f5f2ea; --ink-2:#b5afa1; --ink-3:#8a8478;
    --accent:#6fa8ff; --chem:#d95926; --hpf:#3987e5; --flag:#e08a52;
  }
}
:root[data-theme="dark"]{
  --bg:#12110f; --raise:#1a1815; --sunk:#221f1a;
  --rule:#2e2b25; --rule-strong:#433f36;
  --ink:#f5f2ea; --ink-2:#b5afa1; --ink-3:#8a8478;
  --accent:#6fa8ff; --chem:#d95926; --hpf:#3987e5; --flag:#e08a52;
}


/* ── compatibility aliases ──────────────────────────────────
   Older generated pages (the inspector, methods, patch index and some
   inline blocks) were written against the previous variable names. Rather
   than leave them silently resolving to nothing — which is how the legend's
   median swatch went invisible — they map onto the current tokens here. */
:root{
  --surface-0:var(--bg); --surface-1:var(--raise); --surface-2:var(--sunk);
  --surface-3:var(--sunk);
  --line:var(--rule); --line-soft:var(--rule);
  --text-primary:var(--ink); --text-secondary:var(--ink-2); --text-muted:var(--ink-3);
  --card:var(--raise); --card2:var(--sunk); --head:var(--ink);
  --shadow:0 8px 26px rgba(0,0,0,.15);
}

*{box-sizing:border-box}
/* the hidden attribute is display:none in the UA sheet, which any author
   display rule silently beats — .ranges{display:grid} was overriding it */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font:var(--t3)/1.62 "Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"cv05" 1,"ss01" 1}
.serif{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-weight:400}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
td a{color:var(--ink)}
td a:hover{color:var(--accent)}

/* ── header ─────────────────────────────────────────────── */
header.top{border-bottom:1px solid var(--rule);background:var(--bg);
  position:sticky;top:0;z-index:30}
header.top .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s4);
  display:flex;align-items:center;gap:var(--s5);min-height:56px}
header.top .brand{font-size:var(--t4);font-weight:600;letter-spacing:.01em;
  color:var(--ink);white-space:nowrap;text-transform:uppercase}
header.top .brand:hover{text-decoration:none;color:var(--accent)}
header.top nav{display:flex;gap:var(--s4);flex:1;flex-wrap:wrap}
header.top nav a{color:var(--ink-2);font-size:var(--t4);padding:4px 0;
  border-bottom:2px solid transparent;white-space:nowrap}
header.top nav a:hover{color:var(--ink);text-decoration:none}
header.top nav a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
#themetog{background:none;border:0;color:var(--ink-3);font:inherit;font-size:var(--t5);
  cursor:pointer;padding:4px 6px;letter-spacing:.05em;text-transform:uppercase}
#themetog:hover{color:var(--ink)}


/* ── hero ───────────────────────────────────────────────────
   Always dark, in both themes: the membrane renders are lit objects and a
   dark ground is what makes them read. Full-bleed, so it frames the page
   rather than sitting in it. */
.hero{background:linear-gradient(180deg,var(--night-2),var(--night) 62%);
  color:var(--night-ink);position:relative;overflow:hidden;
  border-bottom:1px solid var(--night-rule)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1100px 460px at 76% 38%,rgba(120,190,140,.13),transparent 62%),
             radial-gradient(760px 380px at 10% 0%,rgba(90,140,220,.10),transparent 65%)}
.hero .inner{max-width:var(--maxw);margin:0 auto;padding:var(--s7) var(--s4) var(--s6);
  display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s6);align-items:center;
  position:relative;z-index:1}
.hero .eyebrow{font-size:var(--t5);text-transform:uppercase;letter-spacing:.16em;
  color:var(--night-ink-2);margin:0 0 var(--s3);white-space:nowrap}
.hero h1{font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(38px,5.2vw,64px);line-height:1.02;letter-spacing:-.015em;
  color:var(--night-ink);margin:0 0 var(--s4);max-width:15ch}
.hero h1 em{font-style:italic;color:#cfe6d2}
.hero p{color:var(--night-ink-2);max-width:52ch;font-size:16px;margin:0}
/* justify-self:center shrinks this to its content, and <model-viewer> has no
   intrinsic size the way an <img> does -- the box collapsed to 0 wide and the
   hero rendered as a stack of caption text with nothing above it */
.hero .art{position:relative;justify-self:center;width:100%;max-width:460px}
.hero .art img,.hero .art model-viewer{display:block;width:100%;max-width:460px;height:auto;
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.55)) saturate(1.06)}
.hero .art model-viewer{height:400px;background:transparent;cursor:grab;
  --poster-color:transparent}
.hero .art model-viewer:active{cursor:grabbing}
/* model-viewer keeps its loading bar in the shadow root; on a dark hero it
   reads as a stray rule across the top of the render */
.hero .art model-viewer::part(default-progress-bar){display:none}
.hero .cap::before{content:"drag to rotate · ";opacity:.75}
.hero .cap{position:absolute;bottom:-26px;right:0;font-size:var(--t5);
  color:var(--night-ink-2);letter-spacing:.03em}
@media(max-width:860px){
  .hero .inner{grid-template-columns:1fr;padding:var(--s6) var(--s4)}
  .hero .art{display:none}
}

/* stat row, sitting inside the hero */
.hero .stats{border:0;margin:var(--s5) 0 0;padding:var(--s4) 0 0;
  border-top:1px solid var(--night-rule);gap:var(--s5)}
.hero .stat .n{color:var(--night-ink);font-size:22px}
.hero .stat .k{color:var(--night-ink-2)}

/* slim band for the interior pages */
/* a shallow gradient so the band still reads as a header in dark mode, where
   it would otherwise be the same black as the page */
.pagehead{background:linear-gradient(180deg,var(--night-2),var(--night));
  color:var(--night-ink);border-bottom:1px solid var(--night-rule)}
.pagehead .inner{max-width:var(--maxw);margin:0 auto;padding:var(--s6) var(--s4) var(--s5)}
.pagehead.has-art .inner{display:grid;grid-template-columns:1fr 210px;gap:var(--s5);
  align-items:center}
.ph-model{position:relative}
.ph-model model-viewer{display:block;width:100%;max-width:210px;height:190px;
  background:transparent;cursor:grab;--poster-color:transparent}
.ph-model model-viewer:active{cursor:grabbing}
.ph-model model-viewer::part(default-progress-bar){display:none}
.ph-model .cap{position:absolute;bottom:-20px;right:0;font-size:10.5px;
  color:var(--night-ink-2);letter-spacing:.03em;white-space:nowrap}
.ph-art img{display:block;width:100%;max-width:210px;height:auto;
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.5)) saturate(1.05)}
@media(max-width:820px){.pagehead.has-art .inner{grid-template-columns:1fr}.ph-art{display:none}}
.pagehead.wide .inner{max-width:1420px}
.pagehead h1{color:var(--night-ink);font-size:clamp(30px,3.6vw,40px);margin:0 0 var(--s2)}
.pagehead p{color:var(--night-ink-2);max-width:68ch;margin:0;font-size:15px}
.pagehead a{color:#9dc4ff}
main.after-head{padding-top:var(--s5)}

/* ── comparison readout ─────────────────────────────────────
   The explorer needed a focal point: the two medians, side by side, at a size
   you can read from across the room. */
.readout{display:flex;align-items:flex-end;gap:var(--s6);flex-wrap:wrap;
  padding:var(--s4) 0 var(--s5)}
.readout .side{display:flex;flex-direction:column;gap:2px}
.readout .lbl{font-size:var(--t5);text-transform:uppercase;letter-spacing:.09em;
  display:flex;align-items:center;gap:7px;color:var(--ink-3)}
.readout .big{font-family:"Instrument Serif",Georgia,serif;font-size:40px;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.readout .big.chem{color:var(--chem)} .readout .big.hpf{color:var(--hpf)}
.readout .delta{padding-left:var(--s5);border-left:1px solid var(--rule)}
.readout .delta .big{color:var(--ink)}
.readout .sub{font-size:var(--t5);color:var(--ink-3);margin-top:3px}
@media(max-width:700px){.readout{gap:var(--s4)}.readout .delta{border-left:0;padding-left:0}}

/* ── page ───────────────────────────────────────────────── */
main{max-width:var(--maxw);margin:0 auto;padding:var(--s6) var(--s4) var(--s7)}
main.wide{max-width:1420px}
h1{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:42px;
  line-height:1.06;letter-spacing:-.012em;margin:0 0 var(--s3)}
h2{font-size:var(--t2);letter-spacing:-.01em;margin:var(--s6) 0 var(--s3);font-weight:600}
h3{font-size:var(--t3);margin:var(--s4) 0 var(--s2);font-weight:600}
p{margin:0 0 var(--s3)}
.lede{color:var(--ink-2);max-width:68ch;margin:0 0 var(--s5)}
.muted{color:var(--ink-3)}
.small{font-size:var(--t4)}

/* section rule instead of a box */
.sec{border-top:1px solid var(--rule);padding-top:var(--s5);margin-top:var(--s5)}

/* ── the few real boxes ─────────────────────────────────── */
.card{background:var(--raise);border:1px solid var(--rule);border-radius:var(--radius);
  padding:var(--s4)}
.grid{display:grid;gap:var(--s4)}
.cols-2{grid-template-columns:1fr 1fr}
.cols-3{grid-template-columns:repeat(3,1fr)}
/* cards of unequal length should each be their own height, not one tall box
   beside a mostly empty one */
.grid.tops{align-items:start}
@media(max-width:820px){.cols-2,.cols-3{grid-template-columns:1fr}}

/* stat row — no boxes, just numbers on a rule */
/* one rule above the numbers, one below; the list that follows butts straight
   onto the lower rule rather than adding a second one 28px later */
.stats{display:flex;gap:var(--s6);flex-wrap:wrap;padding:var(--s4) 0;
  border-top:1px solid var(--rule);margin:0}
.stat .n{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.1;
  font-variant-numeric:tabular-nums}
.stat .k{font-size:var(--t5);color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.07em;margin-top:2px}

/* navigation list — replaces the grid of link-cards */
.jump{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.jump li{border-bottom:1px solid var(--rule)}
.jump li:last-child{border-bottom:0}
.jump a{display:flex;gap:var(--s4);align-items:center;padding:var(--s3) 0;color:var(--ink)}
.jump img{width:46px;height:46px;object-fit:contain;flex:none;
  filter:saturate(1.05) drop-shadow(0 2px 6px rgba(0,0,0,.18));
  transition:transform .18s ease}
.jump a:hover img{transform:scale(1.12) rotate(-2deg)}
.jump a:hover{text-decoration:none;color:var(--accent)}
.jump .t{font-weight:600;font-size:var(--t3);min-width:140px}
.jump .d{color:var(--ink-3);font-size:var(--t4)}
@media(max-width:640px){.jump a{flex-wrap:wrap;gap:var(--s3)}.jump .d{flex-basis:100%}}

/* ── at a glance ─────────────────────────────────────────
   Eleven small multiples, one per headline metric, all answering to the same
   filter. The point is that a whole slice of the study fits on one screen:
   where the two preparations separate, and by how much. */
.glance{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  gap:var(--s3);margin:var(--s4) 0 var(--s5)}
.gcard{display:flex;flex-direction:column;gap:2px;text-align:left;cursor:pointer;
  background:var(--raise);border:1px solid var(--rule);border-radius:var(--radius);
  padding:var(--s3);font:inherit;color:var(--ink);transition:border-color .15s}
.gcard:hover{border-color:var(--accent)}
.gcard .gtop{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2)}
.gcard .glab{font-size:var(--t4);font-weight:600}
.gcard .gd{font-size:var(--t5);color:var(--ink-3);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.gcard .gd.on{color:var(--ink);font-weight:600}
.gcard .gfoot{font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.gcard svg{display:block;overflow:visible}
.gaxis{stroke:var(--rule);stroke-width:1}
.gdot.is-chem{fill:var(--chem);fill-opacity:.8}
.gdot.is-hpf{fill:var(--hpf);fill-opacity:.8}
.gmed{stroke-width:2;stroke-linecap:round}
.gmed.is-chem{stroke:var(--chem)}
.gmed.is-hpf{stroke:var(--hpf)}
.btnlink{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer;
  text-decoration:underline}
.fig[hidden]{display:none!important}

/* ── sortable, filterable tables ─────────────────────────
   The crop table and the explorer's table share this: a sort arrow on the
   active column, a filter button on every categorical one, and one popover
   (ECS.filterMenu in site.js) serving both. */
 /* sort arrow and the per-column filter button */
.srt{font-style:normal;font-size:9px;margin-left:4px;color:var(--accent)}
.fbtn{border:0;background:none;color:var(--ink-3);cursor:pointer;font-size:10px;
   padding:0 3px;margin-left:2px;border-radius:3px;line-height:1}
.fbtn:hover{color:var(--ink);background:var(--sunk)}
.fbtn.on{color:#fff;background:var(--accent)}
.fmenu{position:fixed;z-index:60;min-width:230px;max-width:280px;max-height:340px;
   overflow:auto;background:var(--raise);border:1px solid var(--rule-strong);
   border-radius:8px;box-shadow:0 14px 40px rgba(0,0,0,.28);padding:6px}
.fmenu .fhead{display:flex;align-items:center;gap:6px;padding:4px 6px 7px;
   border-bottom:1px solid var(--rule);margin-bottom:5px;font-size:var(--t5);
   text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3)}
.fmenu .fhead b{flex:1;font-weight:600;color:var(--ink)}
.fmenu .fhead button{border:1px solid var(--rule-strong);background:var(--bg);
   color:var(--ink-2);border-radius:5px;font:inherit;font-size:10px;padding:2px 7px;
   cursor:pointer;text-transform:none;letter-spacing:0}
.fmenu .fhead button:hover{border-color:var(--accent);color:var(--accent)}
.fmenu label{display:flex;align-items:center;gap:7px;padding:4px 6px;border-radius:5px;
   font-size:var(--t4);cursor:pointer;white-space:normal}
.fmenu label:hover{background:var(--sunk)}
.fmenu label span:first-of-type{flex:1;color:var(--ink)}
.fmenu label .c{color:var(--ink-3);font-size:10.5px;font-variant-numeric:tabular-nums}
 /* a shallower title band: this page is a tool, not a piece of writing */
.pagehead .inner{padding-top:var(--s4);padding-bottom:var(--s4)}
.pagehead h1{font-size:26px;margin-bottom:4px}
.pagehead p{font-size:var(--t4);max-width:80ch}
 main.after-head{padding-top:var(--s4)}
 #ngnote{margin:0 0 var(--s3)}

/* ── callout ────────────────────────────────────────────── */
.callout{border-left:2px solid var(--rule-strong);padding:0 0 0 var(--s4);
  margin:var(--s4) 0;color:var(--ink-2);font-size:var(--t4);max-width:76ch}
.callout b{color:var(--ink);font-weight:600}
.callout.warn{border-left-color:var(--flag)}

/* ── controls ───────────────────────────────────────────── */
/* a grid, not a flex wrap: six controls of different label lengths were
   breaking into a tidy row of five and one orphan on a line of its own */
.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:var(--s3) var(--s4);align-items:end;
  padding:0 0 var(--s4);border-bottom:1px solid var(--rule);margin-bottom:var(--s4)}
.ctl{display:flex;flex-direction:column;gap:3px;min-width:0}
.ctl select,.ctl input{width:100%;min-width:0}
.ctl label{font-size:var(--t5);color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em}
select,input[type=search]{background:var(--raise);color:var(--ink);
  border:1px solid var(--rule-strong);border-radius:6px;padding:6px 9px;
  font:inherit;font-size:var(--t4);min-width:150px}
select:hover,input:hover{border-color:var(--ink-3)}
select:focus,input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}

/* ── legend ─────────────────────────────────────────────── */
.legend{display:flex;gap:var(--s5);align-items:center;flex-wrap:wrap;
  font-size:var(--t4);color:var(--ink-2);margin:0 0 var(--s3)}
.legend .item{display:flex;gap:7px;align-items:center}
.sw{width:10px;height:10px;border-radius:2px;display:inline-block;flex:none}
.sw.line{width:3px;height:13px;border-radius:1px}

/* ── tables ─────────────────────────────────────────────── */
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:var(--t4)}
caption{text-align:left;color:var(--ink-3);font-size:var(--t4);padding-bottom:var(--s2)}
th,td{text-align:left;padding:8px 14px 8px 0;border-bottom:1px solid var(--rule)}
th{color:var(--ink-3);font-weight:500;font-size:var(--t5);text-transform:uppercase;
  letter-spacing:.07em;vertical-align:bottom;border-bottom-color:var(--rule-strong)}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--ink)}
th .u{display:block;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-3)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;padding-right:var(--s4)}
tbody tr:hover{background:var(--sunk)}
.scroll table th,.scroll table td{white-space:nowrap}
td.wrap,th.wrap{white-space:normal}

/* crop-table renders */
.thumbcell a{display:flex;align-items:center;gap:10px;color:var(--ink)}
.thumbcell a:hover{color:var(--accent);text-decoration:none}
img.thumb{width:34px;height:34px;object-fit:contain;flex:none;border-radius:5px;
  background:var(--sunk);transition:transform .16s ease}
.thumbcell a:hover img.thumb{transform:scale(1.9);position:relative;z-index:5;
  box-shadow:0 8px 24px rgba(0,0,0,.3)}

.tag{display:inline-block;padding:1px 7px;border-radius:99px;font-size:var(--t5);font-weight:600}
.tag.chem{background:color-mix(in srgb,var(--chem) 15%,transparent);color:var(--chem)}
.tag.hpf{background:color-mix(in srgb,var(--hpf) 15%,transparent);color:var(--hpf)}
.flag{color:var(--flag);font-weight:700}

/* ── tooltip ────────────────────────────────────────────── */
#tip{position:fixed;pointer-events:none;opacity:0;transition:opacity .08s;z-index:60;
  background:var(--raise);border:1px solid var(--rule-strong);border-radius:6px;
  padding:8px 11px;font-size:var(--t4);box-shadow:0 8px 26px rgba(0,0,0,.15);max-width:280px}
#tip b{color:var(--ink)} #tip div{color:var(--ink-2)}

.note{font-size:var(--t4);color:var(--ink-3);margin-top:var(--s3);max-width:76ch}

footer.site{border-top:1px solid var(--rule);margin-top:var(--s7);padding-top:var(--s4);
  font-size:var(--t4);color:var(--ink-3);display:flex;gap:var(--s5);flex-wrap:wrap}
footer.site a{color:var(--ink-3)}
footer.site a:hover{color:var(--ink)}


/* ── buttons ─────────────────────────────────────────────
   One button. Native controls were leaking through wherever .btn was used
   (the axis Auto, the segmented controls), which read as unfinished. */
.btn{background:var(--raise);color:var(--ink-2);border:1px solid var(--rule-strong);
  border-radius:6px;font:inherit;font-size:var(--t4);padding:6px 11px;cursor:pointer;
  line-height:1.2;transition:border-color .14s,color .14s,background .14s;white-space:nowrap}
.btn:hover{border-color:var(--ink-3);color:var(--ink)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.seggroup{display:inline-flex;border:1px solid var(--rule-strong);border-radius:7px;
  overflow:hidden;background:var(--raise)}
.seggroup .btn{border:0;border-radius:0;font-size:var(--t5);padding:5px 11px;
  color:var(--ink-3)}
.seggroup .btn + .btn{border-left:1px solid var(--rule)}
.seggroup .btn.on{background:var(--ink);color:var(--bg);font-weight:600}
.seglabel{font-size:var(--t5);text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3)}

/* ── the filter bar ──────────────────────────────────────
   The page is long. The controls used to sit at the top and scroll away, so
   by the time you reached a panel you could no longer see, or change, which
   slice it was drawn from. The bar follows you down as one line naming the
   slice; clicking that line opens the full set of controls again. */
.filterbar{position:sticky;top:56px;z-index:25;background:var(--bg);
  margin:0 0 var(--s5);padding-top:var(--s3);
  border-bottom:1px solid var(--rule)}
.filterbar::before{content:"";position:absolute;left:50%;top:0;width:100vw;height:100%;
  transform:translateX(-50%);background:var(--bg);z-index:-1;
  border-bottom:1px solid var(--rule)}
.fbline{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  padding-bottom:var(--s3)}
.slicebtn{display:inline-flex;align-items:center;gap:var(--s3);max-width:100%;
  background:var(--sunk);border-color:transparent;color:var(--ink-2);
  font-size:var(--t4);padding:6px 12px;overflow:hidden}
.slicebtn:hover{border-color:var(--rule-strong);color:var(--ink)}
.slicebtn b{color:var(--ink);font-weight:600}
.slicebtn .sep{color:var(--ink-3);opacity:.6}
.slicebtn .set{color:var(--accent);font-weight:600}
.slicebtn i{font-style:normal;font-size:9px;color:var(--ink-3);
  transition:transform .16s ease;flex:none}
.slicebtn[aria-expanded="true"] i{transform:rotate(180deg)}
.filterbar .onpage{margin:0;padding:0;border:0;flex:1;justify-content:flex-end;
  gap:var(--s3)}
.filterbar .onpage a{color:var(--ink-3);font-size:var(--t5);text-transform:uppercase;
  letter-spacing:.06em}
.filterbar .onpage a:hover{color:var(--ink);text-decoration:none}
.filterbar .controls{margin-bottom:0;border-bottom:0;padding-bottom:var(--s4);
  max-height:62vh;overflow:auto}
.filterbar.shut .controls{display:none}
/* once it is floating over the page rather than sitting in it, it needs an
   edge -- otherwise the panels scroll under it and nothing says where the
   page stops and the bar begins */
.filterbar.stuck{box-shadow:0 8px 18px -14px rgba(0,0,0,.55)}
.filterbar.stuck::before{box-shadow:0 8px 18px -14px rgba(0,0,0,.55)}
#fbtop{height:0}
@media(max-width:820px){.filterbar .onpage{display:none}}

/* ── the lead: what this slice says ──────────────────────
   Eleven small multiples in source order made you read all eleven to find the
   one that separates. Sorted by effect, with the answer written above them,
   the same grid says something on sight. */
.lead{margin:0 0 var(--s6)}
.leadtop{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s3)}
.leadtop h2{margin:0;font-size:var(--t1);font-family:"Instrument Serif",Georgia,serif;
  font-weight:400}
.leadctl{display:flex;align-items:center;gap:var(--s3)}
.headline{font-family:"Instrument Serif",Georgia,serif;font-size:30px;line-height:1.22;
  color:var(--ink);margin:var(--s2) 0 var(--s2);max-width:46ch}
.headline b{font-weight:400;color:var(--accent);font-style:italic}
.lead > .note:first-of-type{margin-top:0}

/* the delta bar: a diverging rule from the centre, so size and direction are
   readable before the number is */
.dbar{position:relative;display:block;height:4px;margin:5px 0 3px;
  background:var(--sunk);border-radius:2px;overflow:hidden}
.dbar::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:var(--rule-strong)}
.dbar i{position:absolute;top:0;bottom:0;display:block;border-radius:2px}
.dbar i.pos{left:50%;background:var(--chem)}
.dbar i.neg{right:50%;background:var(--hpf)}
.gcard .gn{float:right;text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums;
  opacity:.75}
.gcard.strong .glab{font-weight:600}
.gcard.strong .gfoot{color:var(--ink-2)}

/* ── section rhythm ──────────────────────────────────────
   Each h2 gets a hairline and a line of orientation, so the page reads as
   five answers rather than one continuous scroll of material. */
main.after-head > h2,
main.after-head > section > h2{margin-top:var(--s7);padding-top:var(--s4);
  border-top:1px solid var(--rule);font-size:var(--t1);
  font-family:"Instrument Serif",Georgia,serif;font-weight:400}
main.after-head > h2.sec-first{border-top:0;margin-top:0;padding-top:0}
/* nothing above it to be separated from */
main.after-head > h2:first-child{border-top:0;margin-top:0;padding-top:0}
main.after-head > section:first-child{margin-top:0}
main.after-head > section > h2{margin-top:0}
main.after-head > section{margin-top:var(--s7)}
.whereto h2{margin-top:0!important;padding-top:0!important;border-top:0!important;font-family:inherit!important;font-size:var(--t5)!important}
.secintro{color:var(--ink-2);font-size:var(--t3);max-width:70ch;
  margin:calc(var(--s3) * -1) 0 var(--s4)}

/* ── the long table ──────────────────────────────────────
   Fifty-five rows was a 2,200px wall in the middle of the page. Fourteen and
   a count is the same information, offered rather than imposed. */
.tblbox{position:relative}
.tblbox.clip .scroll{max-height:430px;overflow-y:hidden}
.tblbox.clip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;
  pointer-events:none;background:linear-gradient(to bottom,transparent,var(--bg))}
.tblmore{margin-top:var(--s3)}

/* ── where next ──────────────────────────────────────────  */
.whereto{border-top:1px solid var(--rule);margin-top:var(--s7);padding-top:var(--s5)}
.whereto h2{margin:0 0 var(--s4);font-size:var(--t2);text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-3);font-weight:500}
.whereto .jump{margin:0}

/* the standing panels are matplotlib on white. Capping their height keeps a
   page of twenty-two of them readable; the full-resolution file is one click
   away on every one. */
/* ── plot options ────────────────────────────────────────
   Scale and range redraw one plot, so they sit on it rather than in the slice
   bar, where they read as another filter on the data. */
.plotbar{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;
  padding:var(--s2) 0 var(--s3);margin-bottom:var(--s2)}
.ctl.inline{flex-direction:row;align-items:center;gap:var(--s2)}
.ctl.inline label{white-space:nowrap}
.ctl.inline select{min-width:0;width:auto}
.rng{display:inline-flex;align-items:center;gap:6px}
.rng input{width:88px;min-width:0}
.rng .to{font-size:var(--t5);color:var(--ink-3)}
select.muted{opacity:.55}

/* a card that clears the medium threshold is the reason to look at the grid,
   so it is marked and not merely present */
.gcard.strong{border-color:var(--rule-strong);background:var(--raise);
  box-shadow:inset 3px 0 0 var(--accent)}