/* Prairie & Pine — The Ground Beneath
   Basalt & rust field-guide system. Tokens drive every component. */

:root{
  --basalt:#24252A; --canvas:#1D1E22; --deep:#15161A;
  --band:#DDE0D2; --sage:#DDE0D2; --bright:#F2F3EC;
  --body:#B7BCAC; --dek:#A9AE9E; --soft:#C6CBB8; --muted:#8A8F82; --dim:#6E7368;
  --rust:#A84B2A; --ochre:#D08A63; --river:#3E6B7A; --grass:#8A9179;
  --ink:#24252A; --ink-body:#3A3E37; --ink-muted:#6E7368;
  --hair:rgba(221,224,210,.18); --hair-2:rgba(221,224,210,.28); --hair-3:rgba(221,224,210,.35);
  --tint:rgba(221,224,210,.05);
  --f-display:'Zilla Slab',Georgia,serif;
  --f-body:'Source Serif 4',Georgia,serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --f-ui:'IBM Plex Sans Condensed',system-ui,sans-serif;
  --gut:clamp(20px,4.2vw,48px);
  --measure:68ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--basalt);color:var(--sage);font-family:var(--f-body);font-size:19px;line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--ochre);text-decoration:none}
a:hover{color:var(--rust);text-decoration:underline}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;margin:0;letter-spacing:-.015em;text-wrap:balance}
p{text-wrap:pretty}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}

.wrap{max-width:1360px;margin:0 auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:1040px;margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--band);color:var(--ink);padding:10px 14px}

/* ---------- shared label furniture ---------- */
.kicker{font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--ochre);margin:0}
.eyebrow{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  font-family:var(--f-mono);font-weight:600;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--hair-2);padding-bottom:11px;margin-bottom:26px}
.eyebrow em{font-style:normal;font-weight:400;letter-spacing:.08em;color:var(--dim);text-transform:none;font-size:12.5px}
.meta{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dek{font-size:22px;line-height:1.5;color:var(--dek);max-width:56ch}

/* ---------- header + dropdown nav ---------- */
.site-head{position:relative;z-index:60;background:var(--basalt);border-bottom:1px solid var(--hair-2)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:18px}
.head-home .head-in{flex-direction:column;gap:16px}
.wordmark{font-family:var(--f-display);font-weight:600;font-size:21px;letter-spacing:.26em;color:var(--bright);text-decoration:none;white-space:nowrap}
.head-home .wordmark{font-size:25px;letter-spacing:.32em}
.wordmark:hover{color:var(--bright);text-decoration:none}
.nav-toggle,.nav-toggle-label{display:none}
.nav{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0;margin:0;padding:0}
.nav>li{position:relative}
.nav>li>a{display:block;white-space:nowrap;padding:10px 15px;font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.head-home .nav>li{border-right:1px solid var(--hair)}
.head-home .nav>li:first-child{border-left:1px solid var(--hair)}
.nav>li>a:hover,.nav>li>a:focus{color:var(--ochre);text-decoration:none}
.nav>li[aria-current="true"]>a,.nav>li.current>a{color:var(--bright)}
.has-sub>a::after{content:"";display:inline-block;width:5px;height:5px;margin-left:8px;vertical-align:2px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.nav-sub{position:absolute;top:100%;left:0;margin-top:12px;min-width:290px;list-style:none;padding:8px 0;
  background:#2B2C33;border:1px solid var(--hair-3);box-shadow:0 18px 40px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .14s ease,transform .14s ease;z-index:70}
.nav-sub::before{content:attr(data-cat);display:block;padding:6px 18px 9px;margin-bottom:6px;border-bottom:1px solid var(--hair);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.nav-sub a{display:block;padding:9px 18px;font-family:var(--f-body);font-size:17px;line-height:1.3;color:var(--soft)}
.nav-sub a:hover{background:var(--tint);color:var(--ochre);text-decoration:none}
.has-sub:hover>.nav-sub,.has-sub:focus-within>.nav-sub{opacity:1;visibility:visible;transform:none}

/* ---------- hero ---------- */
.hero{position:relative;border-bottom:1px solid var(--hair-2)}
.hero-img{position:relative;height:clamp(320px,52vw,620px);overflow:hidden;background:#1B1C20}
.hero-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.03)}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,37,42,.5) 0%,rgba(36,37,42,.08) 38%,rgba(36,37,42,.62) 82%,#24252A 100%)}
.hero-copy{position:relative;margin-top:0;padding-block:clamp(30px,4vw,54px) 44px}
.hero-copy h1{font-size:clamp(40px,6.4vw,82px);line-height:.95;letter-spacing:-.025em;color:var(--bright);max-width:20ch;margin:18px 0 0}
.hero-copy .dek{margin:20px 0 0;font-size:clamp(19px,1.7vw,23px);max-width:62ch;color:var(--soft)}
.hero-center{text-align:center}
.hero-center h1,.hero-center .dek{margin-inline:auto}

/* ---------- bands ---------- */
.band{padding-block:clamp(44px,5.5vw,72px);border-bottom:1px solid var(--hair)}
.band-light{background:var(--band);color:var(--ink);border-bottom:none}
.band-light .eyebrow{color:var(--ink-muted);border-bottom-color:rgba(36,37,42,.5)}
.band-light .eyebrow em{color:var(--ink-muted)}
.band-light a{color:var(--rust)}

/* ---------- transect ---------- */
.transect{border:1px solid var(--hair-2);background:var(--tint)}
.transect-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;
  padding:14px 20px;border-bottom:1px solid var(--hair);font-family:var(--f-mono);font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--sage)}
.transect-head em{font-style:normal;font-weight:400;letter-spacing:.07em;color:var(--muted);text-transform:none}
.transect-plot{position:relative;padding:22px 20px 6px;cursor:crosshair;touch-action:pan-y}
.transect-plot svg{width:100%;height:clamp(200px,26vw,300px);display:block}
.scrub-line{position:absolute;top:22px;bottom:6px;width:1px;background:var(--ochre);pointer-events:none;opacity:.85}
.transect-labels{position:relative;height:170px;margin-top:6px}
.tl{position:absolute;white-space:nowrap;transform:translateX(-50%)}
.tl.edge-l{transform:translateX(0)}
.tl.edge-r{transform:translateX(-100%)}
.tl b{display:block;font-family:var(--f-mono);font-weight:500;font-size:11.5px;color:var(--ochre)}
.tl span{display:block;font-family:var(--f-ui);font-size:12.5px;letter-spacing:.05em;color:var(--muted);margin-top:4px}
.tl.on b{color:var(--bright)}
.tl.on span{color:var(--sage)}
.tick{position:absolute;top:0;width:1px;background:var(--hair-2)}
.transect-read{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:28px;align-items:start;
  padding:20px;border-top:1px solid var(--hair)}
.transect-read h3{font-size:30px;line-height:1.1;color:var(--bright)}
.transect-read .figs{display:flex;gap:28px;margin-top:10px}
.transect-read .figs div span{display:block;font-family:var(--f-mono);font-size:22px;color:var(--ochre)}
.transect-read .figs div em{display:block;font-style:normal;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.transect-read p{margin:0;font-size:18px;color:var(--soft);max-width:62ch}

.transect-list{display:none;list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--hair)}
.transect-list li{display:flex;justify-content:space-between;gap:16px;padding:9px 2px;border-bottom:1px solid var(--hair)}
.transect-list b{font-family:var(--f-mono);font-weight:500;font-size:13px;color:var(--ochre)}
.transect-list span{font-family:var(--f-ui);font-size:15px;color:var(--muted)}

/* ---------- state map ---------- */
.mapwrap{border:1px solid var(--hair-2)}
.map-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--hair)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{background:none;border:1px solid var(--hair-3);color:var(--sage);padding:6px 11px;cursor:pointer;
  font-family:var(--f-ui);font-weight:600;font-size:12px;letter-spacing:.11em;text-transform:uppercase}
.chip:hover{border-color:var(--ochre);color:var(--ochre)}
.chip[aria-pressed="true"]{background:var(--sage);color:var(--ink);border-color:var(--sage)}
.zoomers{display:flex;gap:6px}
.zoomers button{width:34px;height:34px;background:none;border:1px solid var(--hair-3);color:var(--sage);cursor:pointer;font-family:var(--f-mono);font-size:16px;line-height:1}
.zoomers button.wide{width:auto;padding:0 11px;font-size:11px;letter-spacing:.12em}
.zoomers button:hover{background:var(--sage);color:var(--ink)}
.map-view{position:relative;overflow:hidden;background:#202126;cursor:grab;touch-action:none;
  height:clamp(460px,58vw,820px)}
.map-view.dragging{cursor:grabbing}
.map-stage{position:relative;transform-origin:0 0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--z,1))}
.map-stage svg{width:100%;height:auto;display:block}
.map-stage .counties path{fill:#2E2F35;stroke:rgba(221,224,210,.16);stroke-width:.6;vector-effect:non-scaling-stroke}
.pin{position:absolute;transform:translate(-50%,calc(-50% + var(--dy,0px))) scale(calc(1 / var(--z,1)));transform-origin:center;
  display:flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none}
.pin i{width:9px;height:9px;border-radius:50%;background:var(--c,#A84B2A);box-shadow:0 0 0 2px rgba(32,33,38,.9);flex:none}
.pin b{font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.04em;color:var(--soft)}
.pin:hover{text-decoration:none}
.pin:hover b{color:var(--bright)}
.pin.dim{opacity:.16}
.map-legend{display:flex;flex-wrap:wrap;gap:18px;padding:13px 20px;border-top:1px solid var(--hair);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.map-legend span{display:flex;align-items:center;gap:7px}
.map-legend i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.pin-index{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
.pin-index li{background:var(--basalt)}
.pin-index a{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;font-size:16.5px;color:var(--soft)}
.pin-index a:hover{background:var(--tint);text-decoration:none;color:var(--ochre)}
.pin-index em{font-style:normal;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--dim);align-self:center}

/* ---------- strata column ---------- */
.strata{display:grid;grid-template-columns:118px 1fr;column-gap:26px;align-items:stretch}
.strata-band{border:1px solid rgba(36,37,42,.55);border-bottom:none}
.strata-band.last{border-bottom:1px solid rgba(36,37,42,.55)}
.strata-row{display:flex;flex-direction:column;justify-content:center;
  border-bottom:1px dotted rgba(36,37,42,.35);padding:12px 0}
.strata-row.last{border-bottom:none}
.strata-row h3{font-size:23px;line-height:1.15;color:var(--ink)}
.strata-row p{margin:4px 0 0;font-size:17px;color:var(--ink-body);max-width:70ch}
.strata-scale{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:10px}

/* ---------- season band ---------- */
.year-rail{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin:0 0 30px}
.ym{background:none;border:none;padding:0 0 4px;cursor:pointer;display:flex;flex-direction:column;gap:8px;text-align:left}
.ym-bar{display:block;height:10px;background:var(--c);opacity:.42;transition:opacity .12s,height .12s}
.ym-l{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.ym:hover .ym-bar,.ym.on .ym-bar{opacity:1;height:16px}
.ym.on .ym-l,.ym:hover .ym-l{color:var(--sage)}
.seasonband li.on .sb-no{color:var(--bright)}
.seasonband li.on .sb-rule{background:linear-gradient(90deg,var(--c),rgba(221,224,210,.18))}
.seasonband li.on h3{color:var(--bright)}
.seasonband li.on p{color:var(--soft)}
.seasonband li.on .sb-read{color:var(--ochre)}
.seasonband li{transition:color .12s}
.seasonband li .sb-rule{background:linear-gradient(90deg,var(--c,#A84B2A),rgba(168,75,42,.12))}
.seasonband{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.seasonband li{padding:0 26px 4px 0;position:relative;display:flex;flex-direction:column}
.seasonband li+li{padding-left:26px;border-left:1px solid var(--hair)}
.sb-no{font-family:var(--f-mono);font-weight:500;font-size:13px;letter-spacing:.14em;color:var(--ochre)}
.sb-rule{display:block;height:3px;margin:12px 0 16px;background:linear-gradient(90deg,var(--rust),rgba(168,75,42,.15))}
.seasonband h3{font-size:clamp(23px,2.2vw,29px);line-height:1.06;color:var(--bright)}
.sb-when{margin:8px 0 0;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.seasonband p{margin:12px 0 0;font-size:17.5px;line-height:1.5;color:var(--dek)}
.sb-read{margin-top:auto;padding-top:16px;font-family:var(--f-ui);font-size:14px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--soft)}
@media (max-width:1080px){
  .seasonband{grid-template-columns:repeat(2,1fr);row-gap:32px}
  .seasonband li:nth-child(odd){padding-left:0;border-left:none}
}
@media (max-width:600px){
  .year-rail{grid-template-columns:repeat(6,1fr);row-gap:12px}
  .seasonband{grid-template-columns:1fr;row-gap:26px}
  .seasonband li,.seasonband li+li{padding-left:0;padding-right:0;border-left:none}
}

/* ---------- index rows (six grounds) ---------- */
.index-row{display:grid;grid-template-columns:80px 1fr 250px;gap:30px;align-items:baseline;
  padding:26px 0;border-bottom:1px solid var(--hair)}
.index-row .num{font-family:var(--f-mono);font-weight:500;font-size:13px;letter-spacing:.14em;color:var(--ochre)}
.index-row h3{font-size:clamp(28px,3vw,38px);line-height:1.02}
.index-row h3 a{color:var(--bright)}
.index-row h3 a:hover{color:var(--ochre);text-decoration:none}
.index-row p{margin:10px 0 0;font-size:19px;color:var(--dek);max-width:66ch}
.index-row .rmeta{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- cards ---------- */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
.card{background:var(--basalt);display:flex;flex-direction:column;min-height:100%}
.card-fig{aspect-ratio:3/2;overflow:hidden;background:#202126}
.card-fig img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.03)}
.card-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.card .kicker{font-size:11px;letter-spacing:.2em}
.card h3{font-size:25px;line-height:1.12;margin:10px 0 0;min-height:2.24em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card h3 a{color:var(--bright)}
.card h3 a:hover{color:var(--ochre);text-decoration:none}
.card p{margin:10px 0 0;font-size:17px;color:var(--dek);flex:none;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .cmeta{margin-top:auto;padding-top:16px;padding-top:11px;border-top:1px solid var(--hair);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* CSS-only expander */
.more-toggle{position:absolute;opacity:0;pointer-events:none}
.more-rest{display:none}
.more-toggle:checked ~ .more-rest{display:grid}
.more-label{display:inline-block;margin-top:22px;cursor:pointer;font-family:var(--f-mono);font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ochre);border-bottom:1px solid var(--rust);padding-bottom:4px}
.more-label:hover{color:var(--bright);border-color:var(--bright)}
.more-toggle:checked ~ .more-label .more-open{display:none}
.more-open-none{display:none}
.more-toggle:checked ~ .more-label .more-open-none{display:inline}

/* ---------- sponsors ---------- */
.supporters{border:1px solid var(--hair-2);background:var(--tint)}
.supporters-head{padding:18px 22px 16px;border-bottom:1px solid var(--hair)}
.supporters-head h2{font-size:30px;color:var(--bright);margin-top:8px}
.supporters-head p{margin:8px 0 0;font-size:17px;color:var(--dek);max-width:70ch}
.sponsor-grid{display:grid;gap:1px;background:var(--hair);padding:1px}
.sponsor-grid.featured{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.sponsor-grid.roll{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.sponsor{display:flex;flex-direction:column;gap:10px;padding:20px;background:#1A1B1F;min-height:132px}
.sponsor:hover{background:#15161A;text-decoration:none}
.sponsor img{width:100%;max-width:190px;height:42px;object-fit:contain;object-position:left center;background:#111214}
.sponsor-blurb{font-family:var(--f-ui);font-size:14.5px;line-height:1.45;color:var(--muted)}
.sponsor-grid.roll .sponsor{min-height:96px}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--hair-2);padding-block:32px;background:var(--basalt)}
.foot-in{display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between;align-items:baseline}
.foot-nav{list-style:none;display:flex;flex-wrap:wrap;gap:16px;margin:0;padding:0;
  font-family:var(--f-ui);font-size:14.5px}
.foot-nav a{color:var(--muted)}
.foot-line{font-family:var(--f-ui);font-size:14.5px;color:var(--muted)}
.foot-mark{font-family:var(--f-display);font-size:17px;letter-spacing:.2em;color:var(--sage)}

/* ---------- article ---------- */
.art-head{padding-block:clamp(34px,4vw,58px) 26px}
.art-head h1{font-size:clamp(38px,5.6vw,74px);line-height:.98;letter-spacing:-.025em;color:var(--bright);max-width:22ch;margin:16px 0 0}
.art-head .dek{margin:20px 0 0;font-size:clamp(19px,1.7vw,24px);line-height:1.45;max-width:52ch;color:var(--dek)}
.art-meta{margin-top:22px;padding-top:14px;border-top:1px solid var(--hair);
  font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.art-hero{position:relative;height:clamp(240px,40vw,520px);overflow:hidden;background:#202126}
.art-hero img{width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.03)}
.art-hero figcaption{padding:12px 0 0;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--dim)}

.art-grid{display:grid;grid-template-columns:210px minmax(0,1fr);gap:clamp(24px,4vw,56px);padding-block:clamp(30px,4vw,52px)}
.art-rail{position:sticky;top:24px;align-self:start}
.rail-title{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.rail-chips{list-style:none;margin:0 0 22px;padding:0}
.rail-chips li{border-left:3px solid var(--c,#8A8F82);padding:0 0 0 12px;min-height:28px;display:flex;align-items:center}
.rail-chips a{font-family:var(--f-ui);font-size:14px;letter-spacing:.03em;color:var(--muted)}
.rail-chips a:hover{color:var(--ochre);text-decoration:none}
.rail-chips li.on a{color:var(--bright)}
.rail-note{border-top:1px solid var(--hair-2);padding-top:14px;font-size:15.5px;line-height:1.55;color:var(--dek)}

.article-body{max-width:var(--measure);padding-inline:0;font-size:21px;line-height:1.62;color:var(--body)}
.article-body>p{margin:0 0 22px}
.article-body h2{font-size:clamp(27px,3vw,36px);line-height:1.1;color:var(--bright);margin:44px 0 16px;position:relative}
.article-body h2 .h2num{display:block;font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.2em;color:var(--ochre);margin-bottom:10px}
.article-body a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.lead{font-size:24px;line-height:1.5;color:var(--sage);margin:0 0 26px}
.lead::first-letter{float:left;font-family:var(--f-display);font-weight:700;font-size:86px;line-height:.78;
  padding:6px 14px 0 0;color:var(--rust)}

.pullquote{margin:34px 0;padding:2px 0 2px 22px;border-left:3px solid var(--rust)}
.pullquote p{margin:0;font-family:var(--f-display);font-size:clamp(22px,2.4vw,28px);line-height:1.3;color:var(--bright)}
.blockquote{margin:30px 0;padding:18px 22px;background:var(--tint);border-left:1px solid var(--hair-3)}
.blockquote p{margin:0;font-size:19px;color:var(--soft)}
.blockquote cite{display:block;margin-top:10px;font-style:normal;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--muted)}
.callout{margin:30px 0;padding:20px 22px;border:1px solid var(--hair-3);background:var(--tint)}
.callout::before{content:"In practice";display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ochre);margin-bottom:9px}
.callout p{margin:0;font-size:18.5px;line-height:1.55;color:var(--soft);max-width:64ch}
.note{margin:26px 0;padding-left:16px;border-left:1px solid var(--hair-3);font-size:17px;line-height:1.55;color:var(--muted)}

/* by-the-numbers band */
.numbers-band{margin:40px 0;border-block:1px solid var(--hair-2);padding:24px 0}
.numbers-band>.rail-title{margin-bottom:16px}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.statblock{background:var(--basalt);padding:15px 17px;display:flex;flex-direction:column;gap:8px;min-height:112px;
  border:1px solid var(--hair);margin:0 -1px -1px 0}
.stat-num{font-family:var(--f-mono);font-size:17px;line-height:1.3;color:var(--ochre)}
.stat-label{font-family:var(--f-ui);font-size:14.5px;line-height:1.35;letter-spacing:.04em;color:var(--muted)}

.datatable,.versus{width:100%;border-collapse:collapse;margin:30px 0;font-size:17px}
.datatable caption,.versus caption{text-align:left;font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);padding-bottom:10px}
.datatable th,.versus th{text-align:left;font-family:var(--f-mono);font-weight:600;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--hair-2);padding:9px 12px 9px 0}
.datatable td,.versus td{padding:11px 12px 11px 0;border-bottom:1px solid var(--hair);color:var(--soft);vertical-align:top}
.versus tbody th{color:var(--sage);text-transform:none;font-family:var(--f-body);font-size:17px;letter-spacing:0;font-weight:600;border-bottom:1px solid var(--hair)}
.versus td+td{border-left:1px solid var(--hair);padding-left:14px}
.versus th+th{border-left:1px solid var(--hair-2);padding-left:14px}
.versus thead th:nth-child(2){color:var(--ochre)}
.versus thead th:nth-child(3){color:var(--grass)}

.timeline{list-style:none;margin:30px 0;padding:0;border-top:1px solid var(--hair-2)}
.timeline li{display:grid;grid-template-columns:minmax(120px,210px) 1fr;gap:22px;padding:14px 0;border-bottom:1px solid var(--hair)}
.t-when{font-family:var(--f-mono);font-size:13px;line-height:1.4;letter-spacing:.06em;color:var(--ochre)}
.t-what{font-size:17.5px;line-height:1.5;color:var(--soft)}

.chart{margin:32px 0}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart figcaption{margin-top:12px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--dim)}
.chart .c-bar{fill:var(--rust)}
.chart .c-lab{font-family:'IBM Plex Sans Condensed',sans-serif;font-size:11px;fill:#B7BCAC}
.chart .c-val{font-family:'IBM Plex Mono',monospace;font-size:10.5px;fill:#D08A63}
.chart .c-axis{stroke:rgba(221,224,210,.22);stroke-width:1}

.article-figure{margin:36px 0}
.article-figure img{width:100%;filter:saturate(.86) contrast(1.03)}
.article-figure figcaption,.gallery figcaption{margin-top:11px;font-family:var(--f-mono);font-size:12.5px;line-height:1.5;letter-spacing:.04em;color:var(--dim)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:34px 0}
.gallery figure{margin:0}
.breakout{margin-inline:calc(-1 * clamp(10px,4vw,120px));max-width:none}

.map-figure{margin:36px 0;border:1px solid var(--hair-2)}
.map-figure .map-slot{aspect-ratio:16/9;background:
  repeating-linear-gradient(45deg,rgba(221,224,210,.03) 0 12px,transparent 12px 24px),#202126;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:20px}
.map-figure .map-slot::after{content:none;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.map-figure figcaption{padding:12px 16px;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.04em;color:var(--dim);border-top:1px solid var(--hair)}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair);margin:32px 0}
.profile-card{background:var(--basalt);padding:18px 20px}
.profile-card h3{font-size:22px;line-height:1.15;color:var(--bright)}
.profile-card .p-role{margin:6px 0 0;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ochre)}
.profile-card p{margin:10px 0 0;font-size:16.5px;line-height:1.5;color:var(--dek)}
.profile-card .p-photo{width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:12px}
.profile-card .p-links{font-size:15.5px}
.profile-card .p-attr{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--dim)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair);margin:30px 0}
.org-card{background:var(--basalt);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.org-card:hover{background:var(--tint);text-decoration:none}
.org-logo{height:30px;width:auto;object-fit:contain;object-position:left}
.org-name{font-family:var(--f-display);font-size:19px;color:var(--bright)}
.org-host{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;color:var(--dim)}
.entity-ref{white-space:nowrap}

.related{margin-top:14px;padding-top:26px;border-top:1px solid var(--hair-2)}
.related h2{font-size:26px;color:var(--bright)}
.related-links{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair)}
.related-links li{background:var(--basalt)}
.related-links a{display:flex;justify-content:space-between;gap:16px;padding:15px 18px;font-family:var(--f-display);font-size:21px;color:var(--sage)}
.related-links a:hover{background:var(--tint);color:var(--ochre);text-decoration:none}
.related-links em{font-style:normal;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);align-self:center;white-space:nowrap}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair);margin:30px 0}
.further-grid a{background:var(--basalt);padding:16px 18px;font-family:var(--f-display);font-size:19px;line-height:1.2;color:var(--sage)}
.further-grid a:hover{background:var(--tint);text-decoration:none;color:var(--ochre)}

/* ---------- category / list pages ---------- */
.cat-head{padding-block:clamp(34px,4.4vw,60px) 0}
.cat-head h1{font-size:clamp(40px,6vw,76px);line-height:.96;color:var(--bright);max-width:16ch}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-bottom:1px solid var(--hair)}
.cat-list>li>a{display:grid;grid-template-columns:64px 1fr;gap:22px;padding:24px 0;align-items:start}
.cat-list a:hover{text-decoration:none}
.cat-list .c-no{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--ochre);padding-top:8px}
.cat-list h2{font-size:clamp(24px,2.6vw,32px);line-height:1.06;color:var(--bright)}
.cat-list a:hover h2{color:var(--ochre)}
.cat-list p{margin:8px 0 0;font-size:18px;color:var(--dek);max-width:64ch}
.cat-list .c-meta{margin-top:9px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.prose{max-width:var(--measure);font-size:20px;line-height:1.62;color:var(--body)}
.prose h2{font-size:28px;color:var(--bright);margin:36px 0 12px}
.prose p{margin:0 0 20px}
.prose ul{padding-left:20px}
.prose li{margin-bottom:10px}

/* ---------- styleguide ---------- */
.sg-item{padding-block:34px;border-bottom:1px solid var(--hair)}
.sg-item>h2{font-size:24px;color:var(--bright);margin-bottom:6px}
.sg-item>.meta{margin-bottom:18px}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.swatch{border:1px solid var(--hair)}
.swatch i{display:block;height:60px}
.swatch span{display:block;padding:8px 10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--muted)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .art-grid{grid-template-columns:1fr}
  .art-rail{position:static;display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
  .rail-chips{margin-bottom:0}
  .index-row{grid-template-columns:56px 1fr;gap:20px}
  .index-row .rmeta{grid-column:2}
  .transect-read{grid-template-columns:1fr}
}
@media (max-width:1140px){
  body{font-size:18px}
  .head-in,.head-home .head-in{flex-direction:row;align-items:center;flex-wrap:wrap}
  .nav-toggle-label{display:block;cursor:pointer;border:1px solid var(--hair-3);padding:8px 12px;
    font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage)}
  .nav{display:none;flex-direction:column;align-items:stretch;width:100%;gap:0;padding-bottom:12px}
  .nav-toggle:checked ~ .nav{display:flex}
  .head-home .nav>li,.head-home .nav>li:first-child{border:none}
  .nav>li{border-top:1px solid var(--hair)}
  .nav>li>a{padding:12px 0}
  .has-sub::after{display:none}
  .has-sub>a::after{display:none}
  .nav-sub{position:static;opacity:1;visibility:visible;transform:none;margin:0 0 10px;padding:0 0 0 14px;
    background:none;border:none;border-left:1px solid var(--hair-2);box-shadow:none;min-width:0}
  .nav-sub::before{padding-left:0}
  .nav-sub a{padding:7px 0;font-size:16px}
  .hero-copy{padding-top:26px}
  .hero-center{text-align:left}
  .hero-center h1,.hero-center .dek{margin-inline:0}
  .hero-img{height:clamp(210px,44vw,320px)}
  .strata{grid-template-columns:76px 1fr;column-gap:16px}
  .breakout{margin-inline:0}
  .transect-labels{height:150px}
  .tl b{font-size:10.5px}
  .tl span{font-size:11px}
}
@media (max-width:900px){
  .chip{min-height:42px;padding:9px 13px}
  .zoomers button{width:42px;height:42px}
  .zoomers button.wide{height:42px;width:auto}
  .ym{min-height:46px;justify-content:flex-end}
  .more-label{padding:12px 0 10px}
  .pin-index a{padding:14px}
  .related-links a,.further-grid a,.cat-list>li>a{padding-block:16px}
  .nav>li>a{padding:14px 0}
  .nav-sub a{padding:11px 0}
}
@media (max-width:760px){
  .transect-labels{display:none}
  .transect-list{display:block}
  .transect-plot{cursor:default}
  /* phone: show the whole state, not a zoomed crop of it */
  .map-view{height:auto;aspect-ratio:1000/560}
  .map-toolbar{gap:12px}
  .pin b{font-size:10px}
}
@media (max-width:640px){
  .eyebrow{flex-direction:column;align-items:flex-start;gap:7px}
  .eyebrow em{font-size:12px}
  .transect-head{flex-direction:column;gap:7px}
  .transect-read .figs{gap:22px}
  .transect-read .figs div span{white-space:nowrap}
  .pin-index a{flex-direction:column;gap:5px}
  .pin-index em{align-self:flex-start}
  .article-body{font-size:19px}
  .lead{font-size:21px}
  .lead::first-letter{font-size:66px}
  .art-rail{grid-template-columns:1fr}
  .timeline li{grid-template-columns:1fr;gap:4px}
  .versus{font-size:15.5px}
  .cat-list>li>a{grid-template-columns:1fr;gap:8px}
  .cat-list .c-no{padding-top:0}
  .index-row{grid-template-columns:1fr;gap:8px}
  .index-row .rmeta{grid-column:1}
  .foot-in{flex-direction:column}
  .strata{grid-template-columns:54px 1fr;column-gap:14px}
  .strata-row h3{font-size:20px}
  .strata-row p{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* sp-roll-size: logos were 42px and left-aligned — enlarge and centre them */
.sponsor img{height:58px!important;object-position:center!important;max-width:230px}
.sponsor-grid.roll .sponsor{align-items:center}

/* sp-logo-floor: raise undersized sponsor logos without shrinking any Design set larger */
.sponsor img{min-height:56px;object-position:center}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.sponsor-grid.featured .sponsor.sponsor img{box-sizing:border-box!important;padding:9px 15px!important}
.sponsor-grid.roll .sponsor.sponsor img{box-sizing:border-box!important;padding:9px 15px!important}

/* op-no-mark-ground: operator: remove the extra background colour (same as scania). The mark
   carried a #111214 plate against the tile's own ground. Fill only. */
.sponsor img,.sponsor-box img,.sp-logo img{background:transparent!important}
/* op-centre-feat-copy: operator: the top row's blurb should be centred. The mark is already
   centred (full-width plate, object-fit), but the sentence under it was flush left. Centring the
   tile's text is enough — the roll tier below keeps Design's left-aligned copy. */
.sponsor-grid.featured .sponsor{text-align:center}

/* op-recentre-plate: the money mark sat off-centre in its own plate (measured 76px of skew:
   0px on one side, 76px on the other, with a 230px mark in a 306px plate).
   ⚠️ THE CAUSE IS OURS, NOT DESIGN'S: sp-mark-frame forces display:block on the plate, which
   replaces the flex centring Design put there — and with the mark capped by a max-width and no
   auto margins it drifts to one side. Rather than fight the block display, the mark itself is
   centred with auto inline margins, which works whatever the plate's display ends up being. */
a.sp-logo{text-align:center}
a.sp-logo > img{display:block!important;margin-inline:auto!important}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   2195px at 390, 16% of the whole page. Two columns bring it to
   1267px (42% shorter). Checked before writing: no new overflow, smallest mark still
   123px wide, longest blurb 3 lines, tile heights 210-210px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.sponsor-grid.featured, .sponsor-grid.roll), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .sponsor-grid.featured{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:1px!important}
    .sponsor-grid.featured > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-grid.featured > * *{min-width:0!important;max-width:100%}
    .sponsor-grid.featured img,.sponsor-grid.featured svg{max-width:100%;height:auto}
  .sponsor-grid.roll{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:1px!important}
    .sponsor-grid.roll > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-grid.roll > * *{min-width:0!important;max-width:100%}
    .sponsor-grid.roll img,.sponsor-grid.roll svg{max-width:100%;height:auto}
  .sponsor-grid.featured .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
  .sponsor-grid.roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-odd-tier-lead: .sponsor-grid.featured (5 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .sponsor-grid.featured:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-article-width: the article column was capped at 713px (78 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .article-body) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. The layout has no room to grow above 1600, so this width holds there. Nothing below 1440 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1440px){
  div.article-body{--measure:min(88.895ch, 100%)!important}
}
/* op-article-width:end */

/* op-name-wrap: on the live page a brand name or domain label ran out of its money tile (one unbreakable word in a narrow tile, measured 2026-09-23). The name wraps instead (a brand on two lines is better than half a word). Money tiles only. */
[data-partner] .sp-domain{white-space:normal!important;overflow-wrap:anywhere;text-overflow:clip!important}
/* op-name-wrap:end */

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .sponsor-grid.roll 6 rows at 1280). Operator: "we should probably limit that to display only 2" — held to two rows in that width band only; the copy stays in the markup. */
@media (min-width:641px){
  .sponsor-grid.roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--f-display); font-weight: 600; margin: 0px; letter-spacing: -0.015em; text-wrap: balance;}
.profile-card h2:where(.rt-h3){font-size: 22px; line-height: 1.15; color: var(--bright);}
/* op-heading-levels:end */

/* op-locator-map — real-geodata locators (Natural Earth 10m · US Census 500k · OSM); the svg is meet-scaled into Design's own box,
   pins and labels are HTML at a fixed px size placed with container-query units, so they stay legible on phones */
.map-slot.is-mapped{position:relative;container-type:size;overflow:hidden;padding:0!important;background:#24252a!important;background-image:none!important;border:0!important;color:#f2f3ec}
.map-slot.is-mapped::before,.map-slot.is-mapped::after{content:none!important;display:none!important}
.map-slot.is-mapped>svg.mk{position:absolute;inset:0;width:100%;height:100%;display:block}
.map-slot.is-mapped>span{--s:min(100cqw / var(--vw), 100cqh / var(--vh));position:absolute;left:calc(50% + (var(--x) - var(--vw) / 2) * var(--s));top:calc(50% + (var(--y) - var(--vh) / 2) * var(--s));width:0;height:0;pointer-events:none;white-space:nowrap;font-family:var(--f-ui);line-height:1;letter-spacing:0;text-transform:none;font-style:normal}
.map-slot.is-mapped>.mk-p i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:#d08a63;box-shadow:0 0 0 2px #24252a}
.map-slot.is-mapped>.mk-p b{position:absolute;font-size:12px;font-weight:700;line-height:15px;color:#f2f3ec;text-shadow:0 0 2px #24252a,0 0 2px #24252a,0 0 3px #24252a,0 0 4px #24252a}
.map-slot.is-mapped>.mk-p.r b{left:10px;top:-7.5px}.map-slot.is-mapped>.mk-p.l b{right:10px;top:-7.5px}.map-slot.is-mapped>.mk-p.t b{left:0;transform:translateX(-50%);bottom:8px}.map-slot.is-mapped>.mk-p.b b{left:0;transform:translateX(-50%);top:8px}.map-slot.is-mapped>.mk-p.tr b{left:5px;bottom:4px}.map-slot.is-mapped>.mk-p.br b{left:5px;top:4px}.map-slot.is-mapped>.mk-p.tl b{right:5px;bottom:4px}.map-slot.is-mapped>.mk-p.bl b{right:5px;top:4px}.map-slot.is-mapped>.mk-p.ru b{left:10px;top:-15.5px}.map-slot.is-mapped>.mk-p.rd b{left:10px;top:.5px}.map-slot.is-mapped>.mk-p.lu b{right:10px;top:-15.5px}.map-slot.is-mapped>.mk-p.ld b{right:10px;top:.5px}.map-slot.is-mapped>.mk-p.tt b{left:0;transform:translateX(-50%);bottom:13px}.map-slot.is-mapped>.mk-p.bb b{left:0;transform:translateX(-50%);top:13px}
.map-slot.is-mapped>.mk-a{font-size:11px;font-style:italic;letter-spacing:.04em;color:#f2f3ec;opacity:.62;display:flex;justify-content:center;align-items:center}
.map-slot.is-mapped>.mk-a.mk-ref{font-style:normal;opacity:.7;justify-content:flex-start;padding-left:6px;align-items:center}
.map-slot.is-mapped>.mk-a.mk-sea{color:#f2f3ec;opacity:.85}
.map-slot.is-mapped>.mk-a.mk-line{font-style:normal;font-weight:700;opacity:.9;color:#d08a63;text-shadow:0 0 2px #24252a,0 0 3px #24252a}
.map-slot.is-mapped>.mk-r::before{content:'';position:absolute;left:-2.5px;top:-2.5px;width:5px;height:5px;border-radius:50%;background:#f2f3ec;opacity:.55}
/* op-locator-map:end */

/* op-domain-line-fit — the partner's domain line broke mid-word wherever its column was narrower than the domain.
   The tile that carries one is the size container; the domain scales down only as far as the column needs
   (12px floor), and a break that is still needed falls at the dot (<wbr>), never inside the name */
.sponsor:has(> .sp-domain){container-type:inline-size}
.sponsor .sp-domain .sp-dn{font-size:max(12px,min(1em,100cqi / var(--n)))}
/* op-domain-line-fit:end */
.head-in > ul.nav > li.has-sub:nth-of-type(n+6) > .nav-sub{left:auto!important;right:0!important}
.head-in > ul.nav > li.has-sub:nth-of-type(n+5) > .nav-sub{left:auto!important;right:0!important}
.head-in > ul.nav > li.has-sub:nth-of-type(n+4) > .nav-sub{left:auto!important;right:0!important}