/* ==========================================================================
   humancentricsg.com — shared design system
   ========================================================================== */

:root{
  color-scheme: light;

  /* surfaces */
  --paper:      #fdfbee;
  --surface:    #fffefa;
  --sunk:       #f4f1df;

  /* ink */
  --ink:        #110000;
  --ink-2:      #4a3f3a;
  --muted:      #6e655a;   /* 5.1:1 on paper */

  /* lines */
  --rule:       #e6e1cd;
  --line:       #d2ccb4;

  /* accents */
  --accent:     #b34419;   /* singapore / problem */
  --accent-2:   #2a78d6;   /* reference / standard */
  --good:       #0f6f4a;   /* works / recovered */
  --grass:      #7aa845;
  --road:       #d8d3c1;
  --band:       #1a0f0a;

  /* type */
  --serif: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:  "Geist",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --maxw: 720px;
  --wide: 1060px;
  --nav-h: 58px;   /* legacy, kept for the skip-link offset */
}

@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    color-scheme: dark;
    --paper:   #14100c;
    --surface: #1d1813;
    --sunk:    #221c16;
    --ink:     #fdfbee;
    --ink-2:   #bab6aa;
    --muted:   #85817a;
    --rule:    #2b2a26;
    --line:    #3a3833;
    --accent:  #e5734a;
    --accent-2:#4e97ea;
    --good:    #34b57f;
    --grass:   #94bd5c;
    --road:    #2e2820;
    --band:    #0d0805;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + 16px)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:450;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wide{max-width:var(--wide);margin:0 auto;padding:0 24px}

/* ==========================================================================
   HEADER — the pill nav's capsule, widened
   Same glass, same hairline, same label type. It reads light over light
   bands and dark over dark ones, exactly as the pill does.
   ========================================================================== */
:root{ --hdr-h: 88px; }
.hdr{
  position:sticky;top:0;z-index:60;
  padding:14px 16px;background:none;border:0;
  pointer-events:none;                 /* only the capsule takes clicks */
}
.hdr-in{
  pointer-events:auto;position:relative;
  max-width:min(1180px, calc(100vw - 32px));margin:0 auto;
  height:60px;display:flex;align-items:center;gap:12px;
  padding:0 10px 0 22px;border-radius:var(--r-pill);
  background:rgba(253,251,238,.72);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border:1px solid rgba(17,0,0,.09);
  box-shadow:0 2px 20px rgba(0,0,0,.10);
  color:var(--ink);
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease;
}
.hdr.on-dark .hdr-in{
  background:rgba(20,12,8,.62);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 2px 20px rgba(0,0,0,.18);
  color:#fdfbee;
}

.brand{
  font-size:16px;font-weight:700;letter-spacing:-.03em;
  text-decoration:none;color:inherit;margin-right:auto;white-space:nowrap;
}
.hdr-nav{display:flex;align-items:center;gap:2px}
/* label type lifted straight from .pn .lb */
.hdr-nav .n{
  font-size:13.5px;font-weight:600;letter-spacing:-.01em;
  color:inherit;opacity:.5;text-decoration:none;white-space:nowrap;
  padding:4px 11px;border:1px solid transparent;border-radius:6px;
  transition:opacity .2s ease, border-color .2s ease;
}
.hdr-nav .n:hover{opacity:.85}
.hdr-nav .n[aria-current="page"]{opacity:1;border-color:currentColor}
.hdr-cta{
  margin-left:8px;font-size:13.5px;font-weight:650;letter-spacing:-.01em;
  text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--ink);
  transition:background .18s ease;
}
.hdr-cta::after{content:"→";font-weight:500}
.hdr-cta:hover{background:var(--btn-bg-hov)}
.hdr.on-dark .hdr-cta{background:rgba(253,251,238,.94);color:#190a07}
.hdr.on-dark .hdr-cta:hover{background:#fdfbee}

.hdr-toggle{
  display:none;background:none;border:0;cursor:pointer;padding:10px 8px;
  flex-direction:column;gap:5px;width:38px;color:inherit;
}
.hdr-toggle span{display:block;height:2px;background:currentColor;border-radius:2px;transition:transform .2s ease}
.hdr-toggle span:first-child{width:20px}
.hdr-toggle span:last-child{width:13px;margin-left:auto}
.hdr-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.hdr-toggle[aria-expanded="true"] span:last-child{width:20px;transform:translateY(-3.5px) rotate(-45deg)}

@media(max-width:900px){
  .hdr-in{height:54px;padding:0 8px 0 18px}
  .hdr-toggle{display:flex}
  .hdr-nav{
    position:absolute;top:calc(100% + 10px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;display:none;
    padding:10px;border-radius:22px;
    /* nested inside the capsule's backdrop-filter, so a glass sheet here
       samples an empty backdrop and the page bleeds through — opaque it is */
    background:#fdfbee;
    border:1px solid rgba(17,0,0,.10);
    box-shadow:0 12px 38px rgba(25,10,7,.20);
  }
  .hdr.on-dark .hdr-nav{
    background:#190a07;border-color:rgba(255,255,255,.16);
    box-shadow:0 12px 38px rgba(0,0,0,.45);
  }
  .hdr-nav.open{display:flex}
  .hdr-nav .n{padding:12px 14px;font-size:16px;opacity:.72;border-radius:12px}
  .hdr-nav .n[aria-current="page"]{opacity:1}
  .hdr-cta{margin:8px 0 0;justify-content:center;padding:14px 18px;font-size:15px}
}
@media (prefers-reduced-motion: reduce){ .hdr-in,.hdr-nav .n,.hdr-toggle span{transition:none} }

/* Two jobs, two components: the capsule navigates between pages and is
   always there; the pill reports which section you are in and arrives once
   there are sections to be in. They stack, they do not replace each other. */
body.homechrome .hdr{
  position:fixed;top:0;left:0;right:0;   /* out of flow, so the hero is a true 100svh */
  transition:transform .38s cubic-bezier(.22,.61,.36,1), opacity .24s ease;
}
/* scrolling down gets out of the way; scrolling up brings it straight back */
body.homechrome.hdr-away .hdr{transform:translateY(-130%);opacity:0;pointer-events:none}
/* and the pill takes the top spot while the capsule is away */
body.homechrome.past-hero.hdr-away .pillnav{transform:translateY(-66px)}
body.pillonly .pillnav{
  opacity:0;transform:translateY(-10px);
  transition:opacity .34s ease, transform .34s cubic-bezier(.22,.61,.36,1);
}
body.pillonly .pillnav .pn{pointer-events:none}
body.pillonly.past-hero .pillnav{opacity:1;transform:translateY(0)}
body.pillonly.past-hero .pillnav .pn{pointer-events:auto}
@media (prefers-reduced-motion: reduce){
  body.homechrome .hdr,body.pillonly .pillnav{transition:none}
}

/* ---------- type ---------- */
h1,h2,h3{letter-spacing:-0.03em;line-height:1.1;margin:0 0 14px;font-weight:700}
h1{font-size:clamp(36px,6.4vw,58px);line-height:1.03}
h2{font-size:clamp(25px,3.4vw,34px)}
h3{font-size:19px;line-height:1.28;margin:34px 0 10px}
p{margin:0 0 18px}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px}
a:hover{text-decoration-color:var(--accent)}
strong{font-weight:640}
.lede{font-size:clamp(18px,2.3vw,21px);line-height:1.5;color:var(--ink-2)}
.prose{font-size:17.5px}
.prose p{margin:0 0 20px}

/* ---------- sections ---------- */
section{padding:60px 0;border-bottom:1px solid var(--rule)}
section.tight{padding:40px 0}
section.alt{background:var(--sunk)}
section.hero{padding:72px 0 56px}

/* ---------- components ---------- */
.panel{
  background:var(--surface);border:1px solid var(--rule);
  border-radius:12px;padding:22px;
}
section.alt .panel{background:var(--paper)}

.note{
  border:1px solid var(--rule);border-left:3px solid var(--line);
  border-radius:0 9px 9px 0;padding:16px 18px;margin:24px 0;
  font-size:15px;line-height:1.55;color:var(--ink-2);background:var(--surface);
}
.note strong{color:var(--ink)}
.note.warn{border-left-color:var(--accent)}
.note.ok{border-left-color:var(--good)}
section.alt .note{background:var(--paper)}

blockquote{
  margin:24px 0;padding:18px 22px;border-left:3px solid var(--accent);
  background:var(--surface);border-radius:0 9px 9px 0;font-size:16.5px;line-height:1.55;
}
section.alt blockquote{background:var(--paper)}
blockquote p:last-child{margin:0}
blockquote cite{display:block;margin-top:9px;font-style:normal;font-size:12.5px;color:var(--muted)}

.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:12px;overflow:hidden;margin:26px 0;
}
.stat{background:var(--surface);padding:18px 16px}
section.alt .stat{background:var(--paper)}
.stat .v{font-size:30px;font-weight:680;letter-spacing:-0.02em;line-height:1.05;display:block}
.stat .l{font-size:12.5px;color:var(--ink-2);line-height:1.4;margin-top:6px;display:block}
.stat .s{font-family:var(--sans);font-size:10.5px;color:var(--muted);margin-top:5px;display:block;letter-spacing:.04em}
.stat.hl .v{color:var(--accent)}

.tw{overflow-x:auto;margin:24px 0}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:520px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-family:var(--sans);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line)}
td.n{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:640}
tr.me td{background:color-mix(in srgb,var(--accent) 9%, transparent)}
tr.me td.n{color:var(--accent)}

details{border:1px solid var(--rule);border-radius:9px;margin-bottom:10px;background:var(--surface)}
section.alt details{background:var(--paper)}
summary{padding:14px 17px;cursor:pointer;font-weight:600;font-size:15.5px;list-style:none;display:flex;gap:11px;align-items:flex-start}
summary::-webkit-details-marker{display:none}
summary::before{content:"›";color:var(--accent);font-weight:700;font-size:18px;line-height:1.2;transition:transform .15s}
details[open] summary::before{transform:rotate(90deg)}
details .body{padding:0 17px 16px 40px;font-size:15px;color:var(--ink-2)}
details .body p:last-child{margin:0}

/* ---------- card grid ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:32px 0}
.card{
  display:block;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  padding:22px;transition:transform .16s, border-color .16s;
}
.card:hover{transform:translateY(-2px);border-color:var(--accent)}
.card h3{margin:0 0 8px;font-size:19px}
.card p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.card .more{margin-top:14px;font-size:13px;font-weight:640;color:var(--accent);display:block}
.card.soon{opacity:.62}
.card.soon:hover{transform:none;border-color:var(--rule)}
.card .tag{
  display:inline-block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--sunk);color:var(--muted);padding:3px 7px;border-radius:4px;
  font-weight:700;margin-left:8px;vertical-align:middle;
}

/* ---------- interactive shell ---------- */
.viz{
  background:var(--surface);border:1px solid var(--rule);
  border-radius:14px;padding:20px;margin:30px 0;
}
section.alt .viz{background:var(--paper)}
.viz-head{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;margin-bottom:4px}
.viz-title{font-size:13px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.viz-hint{font-size:12.5px;color:var(--muted);margin-left:auto}
.viz figcaption{font-size:13px;color:var(--muted);line-height:1.5;margin-top:14px}

.controls{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:16px 0 4px}
.ctl{display:flex;flex-direction:column;gap:5px;flex:1 1 220px}
.ctl label{font-size:12px;font-weight:650;color:var(--ink-2);letter-spacing:.02em}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:5px;background:var(--line);border-radius:3px}
input[type=range]::-moz-range-track{height:5px;background:var(--line);border-radius:3px}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--accent);border:3px solid var(--surface);margin-top:-7.5px;
  box-shadow:0 1px 4px rgba(0,0,0,.28);
}
input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:var(--accent);
  border:3px solid var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.28);
}

.seg{display:inline-flex;background:var(--sunk);border-radius:8px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{
  font-family:inherit;font-size:13px;font-weight:600;
  border:0;background:transparent;color:var(--ink-2);
  padding:7px 12px;border-radius:6px;cursor:pointer;white-space:nowrap;
}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.seg button:hover{color:var(--ink)}

.chips{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
.chip{
  font-family:inherit;font-size:12.5px;font-weight:600;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  padding:6px 11px;border-radius:20px;cursor:pointer;
}
.chip:hover{border-color:var(--accent);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}

.readout{
  display:flex;flex-wrap:wrap;gap:0;margin-top:16px;
  border:1px solid var(--rule);border-radius:10px;overflow:hidden;
}
.readout .r{
  flex:1 1 130px;padding:12px 14px;background:var(--surface);
  border-right:1px solid var(--rule);
}
.readout .r:last-child{border-right:0}
section.alt .readout .r{background:var(--paper)}
.readout .rv{font-size:20px;font-weight:680;line-height:1.15;display:block;font-variant-numeric:tabular-nums}
.readout .rl{font-size:11.5px;color:var(--muted);margin-top:4px;display:block;line-height:1.35}
.verdict-bad .rv{color:var(--accent)}
.verdict-ok .rv{color:var(--good)}

.legend{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 14px;font-size:12.5px;color:var(--ink-2)}
.legend span{display:flex;align-items:center;gap:7px}
.legend i{width:12px;height:12px;border-radius:3px;flex:none;display:block}

.srcs{font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.srcs ul{padding-left:18px;margin:10px 0 22px}
.srcs li{margin-bottom:8px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:10px;z-index:100;background:var(--accent);color:#fff;padding:9px 14px;border-radius:7px}

@media(max-width:600px){
  body{font-size:16px}
  section{padding:44px 0}
  .stat .v{font-size:26px}
  .viz{padding:16px 14px}
}

/* ==========================================================================
   EDITORIAL — big-type narrative sections
   ========================================================================== */
.ed{padding:clamp(64px,9vw,128px) 0;border-bottom:0}
.ed.band{background:var(--band);color:var(--paper)}
.ed.band .ed.band a{color:var(--paper)}
.ed.cream{background:#f3efd5;color:#110000}
:root:where(:not([data-theme="light"])) .ed.cream{background:#26251c;color:#f2efe4}
.ed.warm{background:var(--accent);color:#fff}
.ed.warm .ed.warm a{color:#fff}

.mega{
  font-size:clamp(40px,8.2vw,104px);line-height:.94;letter-spacing:-0.042em;
  font-weight:700;margin:0 0 28px;text-wrap:balance;max-width:15ch;
}
.mega em{font-style:normal;color:var(--accent)}
.ed.warm .mega em,.ed.band .mega em{color:#fff;text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.12em}
.sub-lg{font-size:clamp(19px,2.5vw,27px);line-height:1.38;max-width:26ch;font-weight:440;opacity:.88}
.body-lg{font-size:clamp(18px,1.9vw,21px);line-height:1.6;max-width:34em}
.body-lg p{margin:0 0 22px}

/* enormous single figure */
.figure-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(24px,4vw,56px);margin:clamp(36px,5vw,64px) 0 0;
}
.fig .n{
  font-size:clamp(56px,8vw,104px);line-height:.88;letter-spacing:-0.05em;
  font-weight:800;display:block;
}
.fig .t{
  display:block;margin-top:16px;font-size:15.5px;line-height:1.45;
  max-width:22ch;opacity:.82;
}
.fig .src{display:block;margin-top:10px;font-family:var(--sans);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.55}
.fig.hot .n{color:var(--accent)}
.ed.warm .fig.hot .n,.ed.band .fig.hot .n{color:#fff}

/* the two-column claim/counterclaim */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:currentColor;margin:44px 0;border-radius:14px;overflow:hidden}
.versus > div{background:var(--paper);padding:clamp(22px,3vw,34px)}
.ed.band .versus > div{background:var(--band)}
.ed.cream .versus > div{background:#f3f0d6}
:root:where(:not([data-theme="light"])) .ed.cream .versus > div{background:#26251c}
.versus h4{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;margin:0 0 14px;opacity:.55;font-weight:700}
.versus p{margin:0;font-size:clamp(17px,2vw,21px);line-height:1.4;font-weight:520}
@media(max-width:640px){.versus{grid-template-columns:1fr}}

/* step list for the narrative */
.steps{counter-reset:s;list-style:none;padding:0;margin:44px 0 0}
.steps li{counter-increment:s;padding:26px 0;border-top:1px solid currentColor;display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,40px);align-items:start}
.steps li::before{content:"0" counter(s);font-size:13px;font-weight:700;letter-spacing:.1em;opacity:.45;padding-top:6px}
.steps h3{margin:0 0 8px;font-size:clamp(20px,2.6vw,28px);line-height:1.2}
.steps p{margin:0;font-size:16.5px;line-height:1.55;opacity:.82;max-width:44em}

/* rule */
.hairline{border:0;border-top:1px solid currentColor;opacity:.18;margin:clamp(40px,6vw,72px) 0}

/* ==========================================================================
   MOTION — scroll reveal, counters, progress
   All of it opt-out under prefers-reduced-motion.
   ========================================================================== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}

/* counters must not reflow while ticking */
.fig .n{font-variant-numeric:tabular-nums}


/* the big figures get a hairline that draws in */
.fig{position:relative;padding-top:20px}
.fig::before{
  content:"";position:absolute;top:0;left:0;height:2px;width:0;
  background:currentColor;opacity:.28;transition:width .8s cubic-bezier(.22,.61,.36,1) .1s;
}
.fig.in::before{width:100%}

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.in{opacity:1;transform:none;transition:none}
  .fig::before{width:100%;transition:none}
    html{scroll-behavior:auto}
}

/* ==========================================================================
   RF-STYLE EDITORIAL — centred sections, label pills, height-scaled data blocks
   ========================================================================== */
:root{ --deep:#190a07; --brick:#c0392b; --brick-dim:#8f2d22; }
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){ --deep:#120705; }
}

.ed.deep{background:var(--deep);color:#fdfbee}
/* centred variant */
.ed.mid{text-align:center}
.ed.mid .mega{max-width:19ch;margin-left:auto;margin-right:auto}
.ed.mid .sub-lg{margin-left:auto;margin-right:auto;max-width:44ch;font-weight:600}
.ed.mid .body-lg{margin-left:auto;margin-right:auto;text-align:center}
.ed.mid .btnrow{justify-content:center}

/* the label pill */
.pill{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.09);border-radius:999px;
  padding:9px 18px;margin:0 auto 20px;
}
.ed.cream .pill,.ed:not(.deep):not(.band):not(.warm) .pill{background:rgba(17,0,0,.06)}
.pill span{
  font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:-0.01em;
  padding:2px 9px;border:1px solid currentColor;border-radius:5px;opacity:.95;
}
.pill i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5;display:block}
.pill-sub{font-size:13.5px;opacity:.6;margin:0 0 34px}

/* height-scaled data blocks */
.blocks{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(20px,3vw,38px);align-items:stretch;margin:clamp(36px,5vw,60px) 0 0;text-align:left;
}
/* a shared plot area so every block sits on one baseline and every
   caption starts at the same height, as the reference does */
.blk{display:flex;flex-direction:column}
.plot{height:var(--plot,340px);display:flex;align-items:flex-end}
.plot .box{width:100%}
.blk .box{
  background:var(--brick);border-radius:3px;
  padding:22px 22px 0;display:block;position:relative;
  transform-origin:bottom;
}
.blk .box .v{
  font-size:clamp(34px,4.2vw,54px);font-weight:800;letter-spacing:-0.04em;
  line-height:.95;color:var(--deep);display:block;
}
.blk .cap{
  display:block;margin-top:16px;font-size:16px;line-height:1.4;font-weight:600;
}
.blk .cap em{font-style:normal;color:var(--brick)}
.ed.deep .blk .cap em,.ed.cream .blk .cap em{color:#e8644f}
.blk .src{display:block;margin-top:9px;font-family:var(--sans);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.5}

/* the grow-in, reusing the reveal observer */
.blk .box{height:var(--h);transition:height .9s cubic-bezier(.22,.61,.36,1)}
.blk:not(.in) .box{height:0;overflow:hidden}
@media (prefers-reduced-motion: reduce){ .blk .box{transition:none} .blk:not(.in) .box{height:var(--h)} }
/* number sits inset from the block's top-left */
.blk .box .v{padding-top:2px}

@media(max-width:640px){
  .blocks{grid-template-columns:1fr}
  .plot{height:auto}
  .blk .box{height:auto !important;min-height:104px}
}

/* ==========================================================================
   PILL NAV — one dot per section, active dot expands into its label
   ========================================================================== */
.pillnav{
  position:fixed;top:86px;left:0;right:0;z-index:70;
  display:flex;justify-content:center;pointer-events:none;
}
.pillnav .pn{
  pointer-events:auto;display:flex;align-items:center;gap:2px;
  background:rgba(20,12,8,.62);backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-radius:999px;padding:8px 12px;max-width:calc(100vw - 32px);
  box-shadow:0 2px 20px rgba(0,0,0,.18);
}
.pillnav.on-light .pn{background:rgba(253,251,238,.72);box-shadow:0 2px 20px rgba(0,0,0,.10)}
.pn button{
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;padding:6px 5px;
  font-family:inherit;color:#fdfbee;min-width:18px;
}
.pillnav.on-light .pn button{color:#110000}
.pn .lc{
  display:inline-flex;overflow:hidden;width:0;
  transition:width .38s cubic-bezier(.22,.61,.36,1);
}
.pn .lb{
  white-space:nowrap;font-size:13.5px;font-weight:600;letter-spacing:-0.01em;
  opacity:.5;padding:3px 10px;border:1px solid transparent;border-radius:6px;
  transition:opacity .3s;
}
.pn .dt{
  width:8px;height:8px;border-radius:50%;background:currentColor;opacity:1;
  transition:width .38s cubic-bezier(.22,.61,.36,1), height .38s cubic-bezier(.22,.61,.36,1), opacity .25s;
  flex:none;
}
.pn button[aria-current="true"] .lc{width:auto}
.pn button[aria-current="true"] .lb{opacity:1;border-color:currentColor}
.pn button[aria-current="true"] .dt{width:0;height:0;opacity:0}
.pn button:hover .lb{opacity:.85}
.pn button:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:8px}

/* the homepage drops the conventional bar in favour of the pill */

@media (prefers-reduced-motion: reduce){
  .pn .lc,.pn .dt,.pillnav{transition:none}
}
@media(max-width:560px){
  .pn{gap:0;padding:7px 9px}
  .pn .lb{font-size:12.5px;padding:2px 8px}
}
/* the pill must never run off a small screen */
@media(max-width:600px){
  .pillnav .pn{max-width:calc(100vw - 20px);overflow:hidden}
  .pn button{padding:6px 2px;min-width:12px}
  .pn .dt{width:6px;height:6px}
  .pn .lb{
    font-size:12px;padding:2px 7px;max-width:40vw;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
}

/* ==========================================================================
   LINE-DRAWING SCENE — full-bleed, no frame
   The drawing is the section. The readout sits bottom-left, the presets
   bottom-right, both over the canvas.
   ========================================================================== */
.ed.scene-sec,.scene-sec{
  position:relative;padding:0;overflow:visible;background:var(--scene-bg);
  /* the drawing gets its own tokens: the band tokens make --paper transparent */
  --scene-bg:#fdfbee; --scene-ink:#110000; --scene-hot:#c0392b; --scene-cool:#2a78d6;
}
.ed.deep.scene-sec{--scene-bg:#190a07; --scene-ink:#fdfbee; --scene-hot:#e8644f; --scene-cool:#6aa8f0}
.scene-sec .viz{
  background:none;border:0;border-radius:0;padding:0;margin:0;
  position:relative;min-height:min(88svh, 720px);display:block;
}
@supports not (min-height:100svh){ .scene-sec .viz{min-height:min(88vh, 720px)} }
.s3-stage{position:absolute;inset:0;border:0;border-radius:0;background:var(--scene-bg)}
.s3-stage canvas{width:100%;height:100%;display:block}

.s3-ui{
  position:relative;z-index:2;min-height:min(88svh, 720px);pointer-events:none;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(24px,4vw,56px);flex-wrap:wrap;
  max-width:var(--wide);margin:0 auto;
  padding:clamp(70px,9vh,110px) 24px clamp(30px,4vh,52px);
}
@supports not (min-height:100svh){ .s3-ui{min-height:min(88vh, 720px)} }
.s3-read{max-width:34ch}
.s3-head{
  margin-top:0;font-size:clamp(34px,5.4vw,72px);font-weight:730;letter-spacing:-.04em;
  line-height:.98;margin:0 0 18px;
}
.s3-head .s3-w{font-variant-numeric:tabular-nums}
.s3-verdict{
  font-size:clamp(18px,1.9vw,24px);line-height:1.4;margin:0 0 16px;
  color:var(--ink-2);max-width:30ch;
}
.s3-verdict b{color:var(--ink);font-weight:680}
.s3-verdict.bad b{color:var(--accent)}
.s3-verdict.ok  b{color:var(--good)}
.s3-note{font-size:var(--t-2);line-height:1.5;color:var(--muted);margin:0;max-width:44ch}

.s3-presets{
  pointer-events:auto;display:flex;flex-direction:column;align-items:stretch;
  gap:8px;min-width:min(280px,100%);
}
.s3-preset{
  font-family:inherit;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;gap:2px;
  background:color-mix(in srgb, var(--scene-bg) 76%, transparent);
  backdrop-filter:saturate(150%) blur(8px);
  -webkit-backdrop-filter:saturate(150%) blur(8px);
  border:1px solid var(--rule);border-radius:var(--r-pill);
  padding:12px 22px;color:var(--ink-2);
  transition:border-color .16s ease, background .16s ease, color .16s ease;
}
.s3-preset b{font-size:var(--t-3);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.s3-preset span{font-size:var(--t-2);opacity:.75}
.s3-preset:hover{border-color:var(--line);background:color-mix(in srgb, var(--scene-bg) 92%, transparent)}
/* the pressed state inverts against the drawing, not against the band */
.s3-preset[aria-pressed="true"]{
  background:var(--scene-ink);border-color:var(--scene-ink);
  color:color-mix(in srgb, var(--scene-bg) 78%, transparent);
}
.s3-preset[aria-pressed="true"] b{color:var(--scene-bg)}

@media(max-width:820px){
  /* stacked, not overlaid: the drawing was hidden behind its own readout */
  .scene-sec .viz{min-height:0}
  .s3-stage{
    position:relative;inset:auto;height:56svh;min-height:300px;
    border:1px solid rgba(255,255,255,.14);border-radius:var(--r-2);
    margin:0 16px;
  }
  .ed.scene-sec{padding:clamp(84px,12vh,120px) 0 clamp(40px,6vh,64px)}
  .s3-ui{
    position:static;min-height:0;padding:22px 24px 0;
    flex-direction:column;flex-wrap:nowrap;   /* wrap + column made extra columns */
    align-items:stretch;justify-content:flex-start;gap:20px;
  }
  .s3-read{
    max-width:none;background:none;border:0;padding:0;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .s3-head{font-size:clamp(30px,8vw,44px)}
  .s3-verdict{font-size:var(--t-3);max-width:none}
  /* presets scroll sideways rather than wrapping into a block that overflows */
  .s3-presets{
    flex-direction:row;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    gap:8px;min-width:0;padding-bottom:4px;scrollbar-width:none;
  }
  .s3-presets::-webkit-scrollbar{display:none}
  .s3-preset{flex:0 0 auto;padding:11px 18px;border-radius:var(--r-pill)}
}

/* ==========================================================================
   ON DARK — components sitting inside the dark bands
   One :is() list, so a band can be added or removed in exactly one place.
   .ed.cream is a LIGHT band and must never appear here.
   ========================================================================== */
:is(.ed.deep,.ed.band,.ed.warm) details{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.16);
  color:#fdfbee;
}
:is(.ed.deep,.ed.band,.ed.warm) details summary{color:#fdfbee}
:is(.ed.deep,.ed.band,.ed.warm) details .body{color:rgba(253,251,238,.82)}
:is(.ed.deep,.ed.band,.ed.warm) details[open]{background:rgba(255,255,255,.10)}
:is(.ed.deep,.ed.band,.ed.warm) details:hover{border-color:rgba(255,255,255,.30)}

:is(.ed.deep,.ed.band,.ed.warm) .note{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);
  color:rgba(253,251,238,.86);
}
:is(.ed.deep,.ed.band,.ed.warm) .note strong{color:#fdfbee}

:is(.ed.deep,.ed.band,.ed.warm) th{color:rgba(253,251,238,.6);border-bottom-color:rgba(255,255,255,.28)}
:is(.ed.deep,.ed.band,.ed.warm) td{border-bottom-color:rgba(255,255,255,.14)}
:is(.ed.deep,.ed.band,.ed.warm) tr.me td{background:rgba(255,255,255,.07)}
:is(.ed.deep,.ed.band,.ed.warm) tr.me td.n{color:#e8896b}

:is(.ed.deep,.ed.band,.ed.warm) .card{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fdfbee;
}
:is(.ed.deep,.ed.band,.ed.warm) .card p{color:rgba(253,251,238,.8)}
:is(.ed.deep,.ed.band,.ed.warm) .card .num,
:is(.ed.deep,.ed.band,.ed.warm) .card .more{color:#e8896b}

:is(.ed.deep,.ed.band,.ed.warm) blockquote{
  background:rgba(255,255,255,.06);color:rgba(253,251,238,.9);
}
:is(.ed.deep,.ed.band,.ed.warm) blockquote cite{color:rgba(253,251,238,.55)}

:is(.ed.deep,.ed.band,.ed.warm) .btn.ghost{
  background:transparent;color:#fdfbee;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
}
:is(.ed.deep,.ed.band,.ed.warm) .btn.ghost:hover{background:rgba(255,255,255,.10)}

/* details read better left-aligned even in a centred section */
.ed.mid details{text-align:left}
.ed.mid details summary{justify-content:flex-start}

/* ---------- ON LIGHT — the cream band is a light band ---------- */
.ed.cream details{background:var(--paper);border-color:var(--rule);color:var(--ink)}
.ed.cream details summary{color:var(--ink)}
.ed.cream details .body{color:var(--ink-2)}
.ed.cream details[open]{background:var(--surface)}
.ed.cream details:hover{border-color:var(--line)}
.ed.cream .note{background:var(--paper);border-color:var(--rule);color:var(--ink-2)}
.ed.cream .note strong{color:var(--ink)}
.ed.cream .card{background:var(--paper);border-color:var(--rule);color:var(--ink)}
.ed.cream .card p{color:var(--ink-2)}
.ed.cream blockquote{background:var(--paper);color:var(--ink)}
.ed.cream th{color:var(--muted);border-bottom-color:var(--line)}
.ed.cream td{border-bottom-color:var(--rule)}

/* the pill should read as floating, not embedded */
.pillnav .pn{border:1px solid rgba(255,255,255,.14)}
.pillnav.on-light .pn{border-color:rgba(17,0,0,.09)}

/* trim the dead air at the foot of a centred section */
.ed.mid .cards{margin-bottom:0}
.ed:last-of-type{padding-bottom:clamp(48px,6vw,84px)}

.ed.deep blockquote,.ed.band blockquote,.ed.warm blockquote blockquote{
  background:rgba(255,255,255,.06);color:rgba(253,251,238,.9);
}
.ed.deep blockquote cite blockquote cite{color:rgba(253,251,238,.55)}

/* ==========================================================================
   THE SYSTEM
   One type scale, one radius scale, one section rhythm, one button.
   Everything above this line is component detail; everything here is the
   contract those components answer to. Later in the cascade on purpose.
   ========================================================================== */
:root{
  /* type — eight steps, no near-duplicates */
  --t-1: 12px;                        /* mono labels, sources          */
  --t-2: 14px;                        /* fine print, captions, nav     */
  --t-3: 17px;                        /* body                          */
  --t-4: 19px;                        /* prose, card body              */
  --t-5: clamp(21px, 2.4vw, 26px);    /* lede, sub-heading             */
  --t-6: clamp(28px, 3.6vw, 40px);    /* h2, section head              */
  --t-7: clamp(36px, 5.4vw, 60px);    /* h1                            */
  --t-8: clamp(42px, 8vw, 100px);     /* mega                          */
  --t-num: clamp(46px, 7vw, 88px);    /* the big figures               */

  /* radius — four steps */
  --r-1: 8px;  --r-2: 14px;  --r-3: 22px;  --r-pill: 999px;

  /* rhythm */
  --sec-y: clamp(72px, 10vw, 148px);
  --gap:   clamp(20px, 3vw, 38px);

  /* the pale pill button, taken from realfood.gov */
  --btn-bg:      #eceedb;
  --btn-bg-hov:  #e3e6cd;
}
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){ --btn-bg:#2b2c22; --btn-bg-hov:#34362a; }
}

/* ---------- type, applied ---------- */
h1{font-size:var(--t-7)}
h2{font-size:var(--t-6)}
h3{font-size:var(--t-4);line-height:1.25}
body{font-size:var(--t-3)}
.lede,.sub-lg{font-size:var(--t-5);line-height:1.4}
.prose,.body-lg{font-size:var(--t-4);line-height:1.6}
.mega{font-size:var(--t-8)}
.viz-title,.versus h4,.foot h4{
  font-family:var(--sans);font-size:var(--t-1);letter-spacing:.15em;
  text-transform:uppercase;font-weight:680;
}
.fig .n{font-size:var(--t-num)}
.blk .box .v{font-size:clamp(32px,4vw,52px)}
.stat .v,.readout .rv{font-size:clamp(26px,3vw,34px)}
.note,.card p,.fig .t,.blk .cap,.steps p,.s3-verdict,blockquote,
details .body,summary,table,.srcs,.legend,.chip,.seg button,.viz figcaption{
  font-size:var(--t-2);
}
.note,.blk .cap,.s3-verdict,blockquote,summary,.steps p{font-size:var(--t-3)}
.stat .l,.card p,.srcs,details .body{font-size:var(--t-2)}
.stat .s,.fig .src,.blk .src,th{
  font-family:var(--sans);font-size:var(--t-1);letter-spacing:.11em;
  text-transform:uppercase;font-weight:620;
}

/* ---------- radius, applied ---------- */
.note,.chip,.seg,.seg button,.skip{border-radius:var(--r-1)}
.panel,.card,.stats,.readout,.viz,details,.s3-stage,.versus,.blk .box{border-radius:var(--r-2)}
.note,blockquote{border-radius:0 var(--r-2) var(--r-2) 0}
.pill,.pillnav .pn,.btn{border-radius:var(--r-pill)}

/* ---------- one section rhythm, legacy markup included ---------- */
section,.ed{padding:var(--sec-y) 0;border-bottom:0}
section.hero,.ed:first-of-type{padding-top:clamp(56px,7vw,104px)}
section.tight{padding:calc(var(--sec-y) * .55) 0}
section.alt{background:var(--sunk)}
.ed.cream{background:var(--sunk);color:var(--ink)}
:root:where(:not([data-theme="light"])) .ed.cream{background:var(--sunk);color:var(--ink)}
.ed.cream .versus > div{background:var(--paper)}
:root:where(:not([data-theme="light"])) .ed.cream .versus > div{background:var(--paper)}

/* ---------- the button ---------- */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--btn-bg);color:var(--ink);text-decoration:none;
  padding:clamp(18px,2.2vw,24px) clamp(26px,3vw,34px);
  font-family:inherit;font-size:var(--t-3);font-weight:650;letter-spacing:-.01em;
  line-height:1;border:0;cursor:pointer;
  transition:background .18s ease, transform .18s ease;
}
.btn::after{content:"→";font-weight:500;transition:transform .22s ease}
.btn:hover{background:var(--btn-bg-hov)}
.btn:hover::after{transform:translateX(4px)}
.btn.down::after{content:"↓"}
.btn.down:hover::after{transform:translateY(3px)}
.btn.bare::after{content:none}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{background:var(--sunk)}
.btnrow{display:flex;gap:14px;flex-wrap:wrap}
/* on the dark bands the pale pill would shout, so it inverts */
.ed.deep .btn,.ed.band .btn,.ed.warm .btn{background:rgba(253,251,238,.94);color:#190a07}
.ed.deep .btn:hover,.ed.band .btn:hover,.ed.warm .btn:hover{background:#fdfbee}
.ed.deep .btn.ghost,.ed.band .btn.ghost,.ed.warm .btn.ghost{
  background:transparent;color:#fdfbee;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
}
.ed.deep .btn.ghost:hover{background:rgba(255,255,255,.1)}
@media(max-width:600px){ .btn{width:100%;justify-content:center} .btnrow{flex-direction:column} }

/* ==========================================================================
   THE DECK — cards that assemble themselves as you arrive, then respond
   Absolute fan on desktop, honest grid on small screens.
   ========================================================================== */
.deck{
  position:relative;max-width:1010px;margin:clamp(48px,6vw,80px) auto 0;
  height:clamp(420px,45vw,570px);
}
.dcard{
  --x:0px; --y:0px; --r:0deg; --i:0; --vis:110px;
  position:absolute;top:50%;left:50%;
  width:clamp(168px,18.4vw,262px);aspect-ratio:3/4;
  border-radius:var(--r-3);padding:clamp(18px,2vw,26px);
  display:flex;flex-direction:column;text-align:left;text-decoration:none;
  background:var(--dbg);color:var(--dfg);
  transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--r));
  transition:transform .75s cubic-bezier(.22,.61,.36,1),
             opacity .55s ease, box-shadow .3s ease;
  transition-delay:calc(var(--i) * 85ms);
  box-shadow:0 16px 38px rgba(25,10,7,.17);
  will-change:transform;
}
.deck:not(.in) .dcard{
  opacity:0;
  transform:translate(-50%,-50%) translate(calc(var(--x) * .35), 90px) rotate(0deg) scale(.94);
}
.dcard:last-child{--vis:100%}
.dcard:hover,.dcard:focus-visible{--vis:100%}
.dcard:hover,.dcard:focus-visible{
  transform:translate(-50%,-50%) translate(var(--x), calc(var(--y) - 22px)) rotate(0deg) scale(1.035);
  box-shadow:0 34px 70px rgba(25,10,7,.30);
  z-index:20;transition-delay:0s;outline:none;
}
.dcard h3,.dcard .dc-f{max-width:var(--vis,100%)}
.dcard h3{
  font-size:clamp(15px,1.46vw,19px);font-weight:720;letter-spacing:-.028em;
  line-height:1.12;margin:0;
}
.dcard .dc-f{
  margin-top:auto;display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  font-family:var(--sans);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.5;
}
.dcard .dc-f b{font-weight:600;opacity:.9}
@media (prefers-reduced-motion: reduce){
  .dcard,.deck:not(.in) .dcard{transition:none;opacity:1}
  .deck:not(.in) .dcard{transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--r))}
}
/* below the fan's comfortable width, become a plain grid */
@media(max-width:820px){
  .deck{height:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
  .dcard{position:static;transform:none;width:auto;aspect-ratio:4/5}
  .deck:not(.in) .dcard{opacity:0;transform:translateY(26px)}
  .deck.in .dcard{opacity:1;transform:none}
  .dcard:last-child{--vis:100%}
.dcard:hover,.dcard:focus-visible{--vis:100%}
.dcard:hover,.dcard:focus-visible{transform:translateY(-6px) scale(1.01)}
  .dcard{--vis:100%}
  .dcard .dc-f span{display:none}
  .dcard .dc-f{justify-content:flex-start}
}

/* ==========================================================================
   THE FOOTER — oversized, not a sitemap
   ========================================================================== */
.foot{
  background:var(--deep);color:#fdfbee;border-top:0;
  padding:clamp(64px,8vw,116px) 0 clamp(30px,3.5vw,46px);
  overflow:hidden;
}
.foot-lead{
  font-size:clamp(30px,5.4vw,66px);font-weight:730;letter-spacing:-.038em;
  line-height:1.02;max-width:15ch;margin:0 0 clamp(30px,4vw,52px);text-wrap:balance;
}
.foot-lead em{font-style:normal;color:#e0764a}
.foot-links{
  display:flex;flex-wrap:wrap;gap:clamp(10px,1.4vw,16px) clamp(22px,3.4vw,48px);
  margin:0 0 clamp(44px,6vw,76px);
}
.foot-links a{
  font-size:clamp(17px,1.95vw,23px);font-weight:560;letter-spacing:-.02em;
  color:rgba(253,251,238,.66);text-decoration:none;
  transition:color .16s ease;
}
.foot-links a:hover{color:#fdfbee;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.foot-mark{display:block;margin:0 0 clamp(24px,3vw,40px);text-decoration:none;line-height:0}
.foot-mark svg{display:block;width:100%;height:auto;fill:#fdfbee}
.foot-mark .dim{fill:rgba(253,251,238,.40)}
.foot-end{
  display:flex;flex-wrap:wrap;gap:18px 32px;align-items:baseline;
  border-top:1px solid rgba(253,251,238,.16);padding-top:clamp(20px,2.4vw,30px);
}
.foot-by{
  font-size:clamp(16px,1.7vw,20px);font-weight:500;margin:0;
  color:rgba(253,251,238,.62);letter-spacing:-.01em;
}
.foot-by b{font-weight:680;color:#fdfbee}
.foot-fine{
  margin:0 0 0 auto;max-width:46ch;font-size:var(--t-2);line-height:1.55;
  color:rgba(253,251,238,.55);
}
.foot-fine a{color:rgba(253,251,238,.7)}
@media(max-width:700px){ .foot-fine{margin-left:0} }

/* ---------- full-viewport hero ---------- */
.ed.full{
  min-height:100svh;display:grid;align-items:center;
  padding-top:clamp(80px,10vh,120px);padding-bottom:clamp(56px,8vh,96px);
}
.ed.full > .wide{width:100%;max-width:1180px}
.ed.full .mega{max-width:17ch;font-size:clamp(46px,9.2vw,124px)}
.ed.full .sub-lg{max-width:42ch;font-size:clamp(20px,2.3vw,28px)}
@supports not (min-height:100svh){ .ed.full{min-height:100vh} }

/* ==========================================================================
   SUBPAGES adopt the homepage's editorial language
   Centred openers, prose left-aligned inside a centred measure. Scoped by
   the absence of [data-pillnav], which only the homepage carries.
   ========================================================================== */
main:not([data-pillnav]) section.hero{text-align:center}
main:not([data-pillnav]) section.hero h1{
  font-size:clamp(38px,6.6vw,84px);letter-spacing:-.042em;line-height:.98;
  max-width:17ch;margin:0 auto 22px;text-wrap:balance;
}
main:not([data-pillnav]) section.hero .lede{
  max-width:52ch;margin:0 auto;font-weight:500;
}
main:not([data-pillnav]) section.hero 
main:not([data-pillnav]) section > :is(.wrap,.wide) > h2{
  text-align:center;margin-left:auto;margin-right:auto;
}
main:not([data-pillnav]) section > :is(.wrap,.wide) > h2{
  max-width:21ch;text-wrap:balance;margin-bottom:clamp(24px,3vw,38px);
}
/* body copy stays left-aligned, but the column is centred on the page */
main:not([data-pillnav]) .prose,
main:not([data-pillnav]) .srcs{max-width:62ch;margin-left:auto;margin-right:auto}
main:not([data-pillnav]) .note,
main:not([data-pillnav]) blockquote{max-width:66ch;margin-left:auto;margin-right:auto}
main:not([data-pillnav]) section > :is(.wrap,.wide) > .btnrow{justify-content:center}

/* the closing CTA sections were already centred; keep them from double-capping */
main:not([data-pillnav]) section .wrap[style*="center"] h2{max-width:18ch}

/* ==========================================================================
   BANDS, PROPERLY
   A dark band re-points the tokens rather than overriding each component.
   Anything built from --ink / --rule / --surface adapts on its own.
   ========================================================================== */
:is(.ed.deep,.ed.band,.ed.warm){
  --ink:      #fdfbee;
  --ink-2:    rgba(253,251,238,.82);
  --muted:    rgba(253,251,238,.55);
  --rule:     rgba(255,255,255,.16);
  --line:     rgba(255,255,255,.30);
  --surface:  rgba(255,255,255,.06);
  --sunk:     rgba(255,255,255,.09);
  --paper:    transparent;
  --accent:   #e0764a;
  --good:     #4fc48d;
}

/* ---------- the callout, redrawn as a panel ---------- */
.note{
  border:1px solid var(--rule);border-left:1px solid var(--rule);
  border-radius:var(--r-2);background:var(--surface);
  padding:clamp(20px,2.4vw,30px);margin:clamp(28px,3.4vw,44px) auto;
  font-size:var(--t-3);line-height:1.6;color:var(--ink-2);
}
.note > strong:first-child{
  display:block;font-size:var(--t-1);letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--muted);margin-bottom:12px;
}
.note.warn > strong:first-child{color:var(--accent)}
.note.ok   > strong:first-child{color:var(--good)}
.note strong{color:var(--ink)}

/* ---------- figures, on the homepage's terms ---------- */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:clamp(22px,3vw,44px);background:none;border:0;border-radius:0;overflow:visible;
  margin:clamp(38px,5vw,64px) 0;text-align:left;
}
.stat{background:none;padding:26px 0 0;border-top:2px solid currentColor}
.stat .v{
  font-size:clamp(36px,4.6vw,64px);font-weight:800;letter-spacing:-.045em;
  line-height:.92;display:block;font-variant-numeric:tabular-nums;
}
.stat .l{font-size:var(--t-3);line-height:1.4;margin-top:14px;display:block;font-weight:560}
.stat .s{display:block;margin-top:10px;opacity:.62}
.stat.hl .v{color:var(--accent)}

/* ---------- prose reads at the editorial scale ---------- */
.prose{font-size:var(--t-4);line-height:1.62}
.prose p{margin:0 0 22px}
.srcs{font-size:var(--t-3)}

/* ---------- the subpage hero, on the homepage's terms ---------- */
.hero-ed{padding-top:clamp(64px,8vw,120px)}
main:not([data-pillnav]) .hero-ed{text-align:center}
main:not([data-pillnav]) .hero-ed h1{
  font-size:clamp(40px,7.2vw,92px);letter-spacing:-.044em;line-height:.96;
  max-width:16ch;margin:0 auto 24px;text-wrap:balance;
}
main:not([data-pillnav]) .hero-ed .lede{
  max-width:50ch;margin:0 auto;font-size:clamp(20px,2.3vw,27px);
  line-height:1.38;font-weight:500;color:var(--ink-2);
}
/* the old .hero rules no longer apply to anything, but keep the class harmless */
main:not([data-pillnav]) section.hero{text-align:center}

/* section openers carry the same weight they do on the homepage */
main:not([data-pillnav]) section > :is(.wrap,.wide) > h2{
  font-size:clamp(30px,4.6vw,56px);letter-spacing:-.04em;line-height:1.02;
  font-weight:730;max-width:19ch;
}

/* the figure inside a data block reads against the bar, whatever its saturation */
.blk .box .v{color:#fdfbee}
/* the scene's fine print is instruction, not decoration */
.s3-note{color:var(--ink-2)}

/* figures break out of the prose column onto the wide measure, as on the homepage */
.wrap > .stats{
  width:min(1012px, calc(100vw - 48px));
  position:relative;left:50%;transform:translateX(-50%);
}

/* ==========================================================================
   THE PROPOSAL — the densest thing on the site, so it gets the most air
   Number as a figure, three columns divided by rule and space rather than
   boxes, commitments as a labelled row. Built from tokens, so it inverts
   on the dark bands without a single override.
   ========================================================================== */
.prop{
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r-3);padding:clamp(26px,3.2vw,44px);
  margin:0 0 clamp(16px,2vw,24px);text-align:left;
}
.prop-h{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(16px,2.4vw,34px);align-items:start;
  margin:0 0 clamp(26px,3.2vw,40px);
}
.prop-n{
  font-size:clamp(38px,4.4vw,62px);font-weight:800;letter-spacing:-.05em;
  line-height:.8;color:var(--accent);font-variant-numeric:tabular-nums;
}
.prop-h h3{
  margin:0;font-size:clamp(20px,2.3vw,30px);line-height:1.14;
  letter-spacing:-.032em;font-weight:730;max-width:28ch;
}
.prop-b{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(20px,2.6vw,38px);background:none;
}
.prop .cell{background:none;padding:15px 0 0;border-top:2px solid var(--line)}
.prop .cell.now{border-top-color:var(--accent)}
.prop .cell.ev {border-top-color:var(--accent-2)}
.prop .cell.ask{border-top-color:var(--good)}
/* field labels, deliberately not the eyebrow device: sentence case, no tracking */
.prop .cell h4{
  font-size:var(--t-2);font-weight:720;letter-spacing:-.012em;text-transform:none;
  color:var(--ink);margin:0 0 9px;
}
.prop .cell p{margin:0;font-size:var(--t-3);line-height:1.55;color:var(--ink-2)}
.prop .cell strong{color:var(--ink);font-weight:670}
.prop-f{
  margin-top:clamp(24px,3vw,38px);padding-top:clamp(18px,2.2vw,26px);
  border-top:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px clamp(24px,3vw,40px);
  font-size:var(--t-2);line-height:1.5;color:var(--ink-2);
}
.prop-f b{
  display:block;font-size:var(--t-2);font-weight:720;letter-spacing:-.012em;
  color:var(--ink);margin-bottom:4px;
}
@media(max-width:560px){
  .prop-h{grid-template-columns:1fr;gap:10px}
  .prop-n{font-size:40px}
}

/* ==========================================================================
   CHART LABELS — centred under the mark they describe
   A left-aligned caption under a centred bar reads as a mistake, and these
   sit inside centred sections.
   ========================================================================== */
.blocks{text-align:center}
.blk .cap,.blk .src{text-align:center}
.blk .box{padding-left:0;padding-right:0}
.blk .box .v{text-align:center}
main:not([data-pillnav]) .stats{text-align:center}
main:not([data-pillnav]) .stat .l,
main:not([data-pillnav]) .stat .s,
main:not([data-pillnav]) .stat .v{text-align:center}

/* anchor jumps must clear both the capsule and the pill beneath it */
html:has(body.pillonly){scroll-padding-top:154px}
@media(max-width:900px){ .pillnav{top:78px} }

/* ==========================================================================
   TABLES ON SMALL SCREENS
   A 520px table in a 342px window hid 178px behind an invisible scroll.
   Below 620px each row becomes a labelled block, the pattern the proposal
   cards already use.
   ========================================================================== */
@media(max-width:620px){
  .tw{overflow:visible;margin:clamp(24px,4vw,32px) 0}
  .tw table{min-width:0;display:block;width:100%}
  .tw thead{display:none}
  .tw tbody,.tw tr,.tw td{display:block;width:auto}
  .tw tr{
    background:var(--surface);border:1px solid var(--rule);
    border-radius:var(--r-2);padding:16px 18px;margin:0 0 10px;
  }
  .tw tr.me{background:color-mix(in srgb, var(--accent) 7%, var(--surface))}
  .tw tr.me td.n{color:color-mix(in srgb, var(--accent) 88%, var(--ink))}
  .tw td{
    border:0;padding:7px 0;white-space:normal;
    display:grid;grid-template-columns:1fr;gap:3px;
  }
  .tw td::before{
    content:attr(data-l);
    font-size:var(--t-2);font-weight:720;letter-spacing:-.012em;color:var(--ink);
  }
  .tw td[data-l=""]::before{display:none}
  /* the first cell is the row's subject, so it becomes the card's title */
  .tw td:first-child{
    padding:0 0 12px;margin-bottom:8px;border-bottom:1px solid var(--rule);
    font-size:var(--t-3);font-weight:720;letter-spacing:-.02em;color:var(--ink);
  }
  .tw td:first-child::before{display:none}
  .tw td:last-child{padding-bottom:0}
}

/* the pill recedes while the page is moving, so it stops striking through
   the headings it passes over, and returns the moment scrolling stops */
body.pillonly.past-hero.scrolling .pillnav{opacity:.34}
@media (prefers-reduced-motion: reduce){ body.pillonly.scrolling .pillnav{opacity:1} }

/* ---------- line length ---------- */
.steps p,.body-lg{max-width:65ch}
.ed.mid .body-lg{margin-left:auto;margin-right:auto}

/* ---------- the last hardcoded sizes, on the scale ---------- */
.viz-title,.viz-hint{font-size:var(--t-2);text-transform:none;letter-spacing:-.012em;font-weight:720;color:var(--ink)}
.viz-hint{font-weight:500;color:var(--muted)}
.viz figcaption,.readout .rl,.legend,.chip,.seg button,.ctl label{font-size:var(--t-2)}
.readout .rv{font-size:clamp(22px,2.4vw,28px)}
.blk .src,.fig .src,.stat .s{font-size:var(--t-1)}
.steps li::before{font-size:var(--t-3);opacity:1;font-weight:720;color:var(--accent)}
.pn .lb,.hdr-nav .n,.hdr-cta{font-size:var(--t-2)}
.dcard .dc-f{font-size:var(--t-1)}
.brand{font-size:var(--t-4)}

/* ---------- tap targets ---------- */
@media(max-width:900px){
  .foot-links a{display:inline-flex;align-items:center;min-height:44px}
  .srcs a,.srcs li{line-height:1.75}
  .srcs li{padding:5px 0}
  .hdr-toggle{width:44px;height:44px;justify-content:center;padding:0}
  .foot-mark{padding:6px 0}
}

/* ==========================================================================
   PHOTOGRAPH — the evidence component
   Full-bleed inside a band. Art-directed: a wide crop on desktop, a 4:5
   crop on phones, so the subject survives both. Dimensions are declared on
   the <img> so nothing shifts while it loads.
   ========================================================================== */
.shot{margin:clamp(40px,6vw,72px) 0 0;position:relative}
.shot.bleed{
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
}
.shot img{
  display:block;width:100%;height:auto;
  aspect-ratio:16/9;object-fit:cover;background:var(--sunk);
}
.shot.bleed img{aspect-ratio:21/9}
.shot figcaption{
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;
  max-width:var(--wide);margin:14px auto 0;padding:0 24px;
  font-size:var(--t-2);line-height:1.5;color:var(--ink-2);text-align:left;
}
.shot figcaption b{font-weight:720;color:var(--ink)}
.shot figcaption .where{margin-left:auto;color:var(--muted)}
@media(max-width:820px){
  .shot img,.shot.bleed img{aspect-ratio:4/5}
  .shot figcaption{flex-direction:column;gap:4px;padding:0 24px}
  .shot figcaption .where{margin-left:0}
}
/* the empty state, so a missing shot is obvious rather than invisible */
.shot.todo img{display:none}
.shot.todo .slot{
  display:grid;place-items:center;aspect-ratio:16/9;
  border:1px dashed var(--line);border-radius:var(--r-2);
  background:var(--sunk);color:var(--muted);
  font-size:var(--t-3);text-align:center;padding:24px;
}
@media(max-width:820px){ .shot.todo .slot{aspect-ratio:4/5} }

/* ---------- credit line, required on any image not shot by us ---------- */
.shot .credit{
  display:block;width:100%;margin-top:2px;
  font-size:var(--t-1);line-height:1.5;color:var(--muted);
}
.shot .credit a{color:inherit;text-decoration-color:var(--line)}
.shot .credit a:hover{color:var(--ink)}
.shot.sourced figcaption{gap:4px 18px}