/* ============================================================
   swelia.com — Light Water
   Palette roles (3 saturated members, separated in hue):
     --ground  #EDF1F6  ice          page ground
     --ink     #0E1A2B  navy         type
     --accent  #1B45D8  ultramarine  h≈262  primary, used as a whole band
     --second  #00A98F  aqua-green   h≈170  measurement, secondary bands
     --flag    #C96442  oxide        h≈25   shortfall, alerts, over-allocation
   ============================================================ */

:root{
  --ground:#EDF1F6;
  --paper:#FFFFFF;
  --ink:#0E1A2B;
  --accent:#1B45D8;
  --accent-lo:#8FA8FF;
  --second:#00A98F;
  --second-dk:#00776A;
  --flag:#C96442;
  --flag-dk:#A44A2B;
  --mid:#33455C;
  --muted:#6B7C93;
  --faint:#93A2B5;
  --rule:rgba(14,26,43,.16);
  --rule-hi:rgba(14,26,43,.34);
  --tint:#E3E9F1;
  --sans:"Chivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:"Chivo Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --t-mast:clamp(56px,13vw,220px);
  --t-h1:clamp(34px,4.9vw,78px);
  --t-h2:clamp(28px,3.5vw,54px);
  --t-h3:clamp(22px,2.3vw,32px);
  --t-lead:clamp(21px,1.5vw,26px);
  --t-body:clamp(18px,1.12vw,20px);
  --t-cap:16px;
  --t-mono:14px;
  --t-kick:12px;

  --gut:clamp(20px,4vw,40px);
  --band:clamp(56px,7vw,104px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-body);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover,a:focus-visible{color:var(--second-dk);text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--second);outline-offset:2px}
::selection{background:var(--accent);color:#fff}
h1,h2,h3,h4{margin:0;font-weight:900;letter-spacing:-.03em;line-height:1.02;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0}
figure{margin:0}
table{border-collapse:collapse;width:100%}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- structure ---------- */
.wrap{max-width:1560px;margin:0 auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:1100px}
.measure{max-width:72ch}
.band{padding-block:var(--band)}
.band--tint{background:var(--tint)}
.band--paper{background:var(--paper)}
.band--accent{background:var(--accent);color:#fff}
.band--second{background:var(--second);color:#04211C}
.band--ink{background:var(--ink);color:var(--ground)}
.band--accent a,.band--second a,.band--ink a{color:inherit}
.rule-top{border-top:2px solid var(--ink)}

/* ---------- icons: one system, 24-grid, 1.7 stroke, square caps ---------- */
.ico{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.15em;overflow:visible}
.ico *{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter;vector-effect:non-scaling-stroke}
.ico--fill *{fill:currentColor;stroke:none}

/* ---------- kickers / meta ---------- */
.kick{font-family:var(--mono);font-size:var(--t-kick);letter-spacing:.2em;text-transform:uppercase;color:var(--mid);display:flex;align-items:center;gap:9px}
.kick a{display:inline-flex;align-items:center;gap:9px}
.kick--accent{color:var(--accent)}
.kick--flag{color:var(--flag-dk)}
.kick .ico{font-size:16px}
.num{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.05em;line-height:.82}

/* ---------- masthead ---------- */
.mast{padding-top:clamp(28px,4vw,56px)}
.mast__row{display:flex;align-items:flex-end;gap:clamp(12px,2vw,22px)}
.mast__gauge{color:var(--accent);width:clamp(16px,2vw,30px);height:auto;flex:none;margin-bottom:.6em}
.mast__name{font-size:var(--t-mast);line-height:.76;letter-spacing:-.055em;margin:0;flex:1;min-width:0}
.mast__name a{color:var(--ink)}
.mast__name a:hover{color:var(--accent);text-decoration:none}
.mast__strap{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:baseline;padding-top:22px}
.mast__strap p{font-family:var(--mono);font-size:15px;color:var(--mid);max-width:52ch;line-height:1.5;margin:0}

/* ---------- homepage nav: four unequal numbered rows, second level visible ---------- */
.snav{margin-top:clamp(22px,3vw,36px);border-top:1px solid var(--rule-hi)}
.snav__row{display:grid;grid-template-columns:clamp(58px,6vw,96px) minmax(0,29ch) minmax(0,1fr);gap:clamp(16px,2.2vw,28px);align-items:baseline;padding:22px 0;border-bottom:1px solid var(--rule)}
.snav__row:last-child{border-bottom:1px solid var(--rule-hi)}
.snav__row--on{background:linear-gradient(90deg,rgba(27,69,216,.07),rgba(27,69,216,0) 78%)}
.snav__no{font-family:var(--mono);font-weight:700;font-size:clamp(30px,4vw,52px);line-height:.86;color:var(--accent);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:.3em}
.snav__no .ico{font-size:.5em;color:var(--ink)}
.snav__title{font-size:clamp(20px,1.7vw,26px);line-height:1.08;letter-spacing:-.02em;color:var(--ink);display:block}
.snav__title:hover{color:var(--accent);text-decoration:none}
.snav__kids{display:flex;flex-wrap:wrap;gap:6px 24px;font-family:var(--mono);font-size:var(--t-mono);list-style:none}
.snav__kids a{color:var(--mid)}
.snav__kids a:hover{color:var(--accent)}

/* ---------- inner-page header ---------- */
.top{border-bottom:1px solid var(--rule-hi)}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-block:18px}
.top__brand{display:flex;align-items:center;gap:12px;font-weight:900;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.05em;color:var(--ink)}
.top__brand:hover{text-decoration:none;color:var(--accent)}
.top__brand .ico{font-size:clamp(30px,3vw,44px);color:var(--accent)}
.top nav{display:flex;gap:clamp(12px,1.6vw,22px);flex-wrap:wrap;font-family:var(--mono);font-size:13px;letter-spacing:.04em}
.top nav a{color:var(--mid);display:inline-flex;align-items:center;gap:6px}
.top nav a .ico{font-size:15px}
.top nav a:hover{color:var(--accent)}
.top nav a[aria-current]{color:var(--accent);font-weight:500}

/* ---------- lead plate ---------- */
.plate{position:relative;isolation:isolate}
.plate__img{position:relative;height:min(86vh,780px);min-height:420px}
.plate__img img{width:100%;height:100%;object-fit:cover}
.plate__wash{position:absolute;inset:0;background:linear-gradient(100deg,rgba(237,241,246,.97) 0%,rgba(237,241,246,.88) 30%,rgba(237,241,246,.24) 58%,rgba(237,241,246,0) 76%)}
.plate__body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.plate__body .wrap{width:100%;pointer-events:auto}
.plate__no{font-family:var(--mono);font-weight:700;font-size:clamp(64px,11vw,180px);line-height:.8;letter-spacing:-.06em;color:var(--accent);font-variant-numeric:tabular-nums;padding-top:clamp(18px,3vw,44px)}
.plate__txt{padding-bottom:clamp(22px,4vw,52px);max-width:min(760px,60vw)}
.plate__txt h2,.plate__txt h1{font-size:clamp(30px,4.6vw,80px);line-height:.95;letter-spacing:-.042em;margin:14px 0 0}
.plate__txt h1 a,.plate__txt h2 a{color:var(--ink)}
.plate__txt p{margin:20px 0 0;font-size:var(--t-lead);line-height:1.42;color:var(--mid)}
.plate__foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:baseline;padding-top:12px;border-bottom:1px solid var(--rule)}
.plate__foot p{font-size:var(--t-cap);color:var(--mid);max-width:70ch;padding-bottom:14px}

/* ---------- section blocks (homepage band 2) ---------- */
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(20px,2.4vw,34px);margin-top:34px}
.scard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--rule);min-width:0}
.scard__fig{aspect-ratio:16/10;overflow:hidden;background:var(--tint)}
.scard__fig img{width:100%;height:100%;object-fit:cover}
.scard__in{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.scard__no{font-family:var(--mono);font-weight:700;font-size:15px;color:var(--accent);letter-spacing:.1em;display:flex;align-items:center;gap:8px}
.scard__no .ico{font-size:19px;color:var(--ink)}
.scard h3{font-size:20px;line-height:1.1;margin:12px 0 0;min-height:2.2em}
.scard h3 a{color:var(--ink)}
.scard__blurb{margin:10px 0 0;font-size:var(--t-cap);color:var(--mid);line-height:1.45}
.scard__list{list-style:none;margin:16px 0 0;padding-top:4px;border-top:1px solid var(--rule);display:grid;font-family:var(--mono);font-size:13.5px}
.scard__list li{border-bottom:1px solid var(--rule)}
.scard__list li:last-child{border-bottom:none}
.scard__list a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;padding:9px 0;line-height:1.4;text-wrap:pretty}
.scard__list a::before{content:"";width:9px;height:1px;background:var(--second);margin-top:.62em}
.scard__list a:hover{text-decoration:none;color:var(--ink)}
.scard__list a:hover::before{background:var(--accent)}
.scard__more{margin-top:auto;padding-top:18px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.scard__more a{display:inline-flex;align-items:center;gap:8px}

/* ---------- the read (homepage band 3) ---------- */
.read{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.read h2{font-size:var(--t-h2);margin:16px 0 0}
.read h2 a{color:var(--ink)}
.read__intro p{margin:20px 0 0;font-size:var(--t-lead);line-height:1.45;color:var(--mid);max-width:52ch}
.btn{display:inline-flex;align-items:center;gap:10px;margin-top:28px;background:var(--accent);color:#fff;font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:14px 20px}
.btn:hover{background:var(--ink);color:#fff;text-decoration:none}
.btn .ico{font-size:16px}
.snav__blurb{display:block;margin-top:8px;font-family:var(--mono);font-size:13.5px;line-height:1.4;color:var(--mid)}
.ledger{border-top:2px solid var(--ink);margin-top:0}
.ledger__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;align-items:baseline;padding:15px 0 13px;border-bottom:1px solid var(--rule)}
.ledger__row:last-child{border-bottom:none}
.ledger__lab{font-family:var(--mono);font-size:13px;line-height:1.4;color:var(--mid)}
.ledger__lab b{display:block;font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin-bottom:2px}
.ledger__val{font-family:var(--mono);font-weight:700;font-size:clamp(26px,2.6vw,36px);line-height:.9;font-variant-numeric:tabular-nums;letter-spacing:-.045em;color:var(--accent)}
.ledger__bar{grid-column:1/-1;height:5px;background:rgba(14,26,43,.1);margin-top:4px}
.ledger__bar span{display:block;height:100%;background:var(--accent)}
.ledger__row--gap .ledger__val{color:var(--flag-dk)}
.ledger__row--gap .ledger__bar span{background:var(--flag)}
.ledger__row--sum{border-bottom:2px solid var(--ink)}
.ledger__row--sum .ledger__val{color:var(--ink)}
.ledger__row--sum .ledger__bar span{background:var(--ink)}
.ledger__unit{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mid);padding-top:14px;line-height:1.6}

/* ---------- map plate ---------- */
.mapfig{margin-top:28px;background:var(--paper);border:1px solid var(--rule);padding:clamp(12px,2vw,26px)}
.mapfig svg{width:100%;height:auto;display:block}
.map-sea{fill:var(--paper)}
.map-land{fill:#DCE4EE;stroke:rgba(14,26,43,.28);stroke-width:1.1}
.map-pin circle{fill:var(--accent);stroke:var(--paper);stroke-width:3}
.map-pin text{fill:var(--ink);font-family:var(--mono);font-size:22px;font-weight:500;paint-order:stroke;stroke:var(--paper);stroke-width:7px;stroke-linejoin:round}
.map-pin:hover circle{fill:var(--flag)}
.maplist{list-style:none;display:flex;flex-wrap:wrap;gap:6px clamp(16px,1.6vw,26px);font-family:var(--mono);font-size:13px;padding-bottom:2px}
.maplist li{white-space:nowrap}
.maplist a{display:inline-flex;align-items:baseline;gap:7px}
.maplist a::before{content:"";width:6px;height:6px;border:1px solid var(--second);flex:none;transform:translateY(-1px)}
.maplist a:hover::before{background:var(--accent);border-color:var(--accent)}
.map-cap{display:flex;justify-content:space-between;align-items:baseline;gap:clamp(18px,3vw,44px);padding-top:14px;flex-wrap:wrap}
.map-cap .cap{max-width:44ch;flex:1 1 260px}
.map-cap .maplist{flex:1 1 420px;min-width:0;justify-content:flex-end}
@media (max-width:1000px){.map-cap .maplist{justify-content:flex-start}}

/* ---------- figure system: three treatments ---------- */
.fig{margin-block:clamp(30px,3.4vw,52px)}
.fig img{width:100%}
.fig figcaption{margin-top:12px}
.cap{font-size:var(--t-cap);line-height:1.45;color:var(--mid);max-width:56ch}
.cap b{color:var(--ink);font-weight:700}
.credit{display:block;margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* 1 · plate — full-bleed, breaks the measure */
.fig--plate{margin-inline:calc(50% - 50vw);width:100vw;max-width:100vw}
.fig--plate img{height:min(64vh,620px);object-fit:cover}
.fig--plate figcaption{max-width:1560px;margin-inline:auto;padding-inline:var(--gut);padding-top:12px}
.fig--plate .cap{max-width:64ch}
.art__body>.fig--plate{margin-block:clamp(34px,4vw,56px)}
.art__head+.fig--plate{margin-top:clamp(26px,3vw,40px);margin-bottom:0}

/* 2 · mat — image sits on a paper mat with an inset hairline */
.fig--mat{background:var(--paper);border:1px solid var(--rule);padding:clamp(12px,1.4vw,18px)}
.fig--mat img{outline:1px solid var(--rule);outline-offset:-1px}
.fig--mat figcaption{padding-top:12px}

/* 3 · rule — flush image, keyed colour bar, hanging caption */
.fig--rule img{display:block}
.fig--rule figcaption{border-top:3px solid var(--second);padding-top:10px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px}
.fig--rule .cap-no{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--second-dk);padding-top:3px}

/* inline / offset variant used inside prose */
.fig--inset{float:right;width:min(42%,380px);margin:6px 0 26px 32px}
@media (max-width:760px){.fig--inset{float:none;width:auto;margin:26px 0}}

/* ---------- article ---------- */
.art__head{padding-top:clamp(30px,4vw,56px)}
.art__head h1{font-size:var(--t-h1);margin:16px 0 0;letter-spacing:-.04em}
.lead{margin:24px 0 0;font-size:var(--t-lead);line-height:1.42;color:var(--mid);max-width:60ch}
.lead em,.lead i{font-style:normal}
.prose{max-width:72ch}
.prose p{margin:0 0 1.15em}
.prose p:last-child{margin-bottom:0}
.prose h2{font-size:var(--t-h3);margin:0 0 .55em;letter-spacing:-.025em;line-height:1.1;padding-top:.2em;border-top:2px solid var(--ink);padding-top:16px}
.prose h2:not(:first-child){margin-top:1.7em}
.prose a{border-bottom:1px solid rgba(27,69,216,.35)}
.prose a:hover{border-bottom-color:currentColor}
.art__body{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.art__body>*{max-width:100%;width:100%}
.art__body>.prose{width:100%}
.art__body>.prose+.prose{margin-top:1.15em}
.art__body>.fig+.prose,.art__body>.callout+.prose,.art__body>.timeband+.prose,.art__body>.datawrap+.prose,.art__body>.statrow+.prose,.art__body>.pullquote+.prose{margin-top:clamp(26px,3vw,40px)}

/* ---------- notes-for-design components ---------- */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--rule);border-block:1px solid var(--rule);margin-block:clamp(26px,3vw,40px)}
.statblock{background:var(--ground);padding:20px 20px 22px;display:flex;flex-direction:column;gap:9px}
.statblock .stat-num{font-family:var(--mono);font-weight:700;font-size:clamp(26px,2.6vw,38px);line-height:.9;letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--accent)}
.statblock .stat-unit{display:block;margin-top:7px;font-size:12.5px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;color:var(--mid)}
.statblock .stat-label{font-size:14.5px;line-height:1.4;color:var(--mid)}
.statrow--flag .statblock .stat-num{color:var(--flag-dk)}

.callout{background:var(--ink);color:var(--ground);padding:clamp(22px,2.4vw,32px);margin-block:clamp(26px,3vw,40px);width:100%}
.callout .kick{color:var(--accent-lo);margin-bottom:16px}
.callout ul{list-style:none;display:grid;gap:12px}
.callout li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;font-size:17px;line-height:1.45}
.callout li::before{content:"";width:22px;height:1px;background:var(--second);margin-top:.72em}
.callout p{font-size:19px;line-height:1.5}
.callout strong{color:#fff}

.timeband{width:100%;margin-block:clamp(28px,3.4vw,44px);background:var(--second);color:#04211C;padding:clamp(24px,2.6vw,36px)}
.timeband .kick{color:#04211C}
.timeline{list-style:none;display:grid;gap:0;margin-top:18px;counter-reset:t}
.timeline li{display:grid;grid-template-columns:minmax(120px,22%) minmax(0,1fr);gap:clamp(14px,2vw,28px);padding:14px 0;border-top:1px solid rgba(4,33,28,.28)}
.timeline li:last-child{border-bottom:1px solid rgba(4,33,28,.28)}
.t-when{font-family:var(--mono);font-weight:700;font-size:15px;line-height:1.3;font-variant-numeric:tabular-nums}
.t-what{font-size:17px;line-height:1.45}

.pullquote{margin:clamp(28px,3vw,44px) 0;padding-left:clamp(16px,2vw,26px);border-left:5px solid var(--flag);width:100%}
.pullquote p{font-size:clamp(23px,2.3vw,34px);line-height:1.14;font-weight:900;letter-spacing:-.03em;color:var(--ink);max-width:34ch}
.blockquote{margin:32px 0;padding-left:22px;border-left:2px solid var(--accent)}
.blockquote p{font-size:21px;line-height:1.45}
.blockquote cite{display:block;margin-top:10px;font-family:var(--mono);font-size:13px;font-style:normal;color:var(--muted)}
.note{font-family:var(--mono);font-size:14.5px;line-height:1.5;color:var(--mid);border-left:3px solid var(--flag);padding-left:16px;margin-block:26px;max-width:64ch}

.datawrap{width:100%;margin-block:clamp(28px,3vw,44px);overflow-x:auto}
.datatable,.versus{font-family:var(--mono);font-size:15px;min-width:min(560px,100%)}
.datatable caption,.versus caption{text-align:left;font-family:var(--mono);font-size:var(--t-kick);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding-bottom:14px}
.datatable th,.versus th{text-align:left;font-weight:500;font-size:var(--t-kick);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:10px 14px 10px 0;border-bottom:1px solid var(--rule-hi)}
.datatable td,.versus td{padding:13px 14px 13px 0;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.4}
.datatable td:last-child,.datatable th:last-child{padding-right:0;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.datatable tr:last-child td{border-bottom:2px solid var(--ink)}
.datatable .row-flag td{color:var(--flag-dk)}
.versus td:last-child,.versus th:last-child{text-align:left}

.chart figcaption{margin-top:12px;font-size:var(--t-cap);color:var(--mid)}
.chart svg{width:100%;height:auto}
.bar-fill{fill:var(--accent)}
.bar-fill--flag{fill:var(--flag)}
.bar-lab{font-family:var(--mono);font-size:13px;fill:var(--ink)}
.bar-val{font-family:var(--mono);font-size:13px;font-weight:700;fill:var(--mid)}
.bar-axis{stroke:var(--rule-hi);stroke-width:1}

/* ---------- related / further ---------- */
.related{margin-top:clamp(44px,5vw,72px);border-top:2px solid var(--ink);padding-top:20px}
.related-links,.further-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(18px,2vw,32px);margin-top:18px}
.related-links a,.further-grid a{display:block;font-weight:900;font-size:20px;line-height:1.12;letter-spacing:-.02em;color:var(--ink)}
.related-links .kick,.further-grid .kick{margin-bottom:8px}

/* ---------- category / archive ---------- */
.cat-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,3.4vw,56px);align-items:center}
.cat-list{list-style:none;display:grid;gap:0;border-top:2px solid var(--ink);margin-top:34px}
.cat-list li{border-bottom:1px solid var(--rule)}
.cat-list a{display:grid;grid-template-columns:auto minmax(0,1.1fr) minmax(0,1.4fr);gap:clamp(14px,2.4vw,34px);align-items:start;padding:22px 0;color:var(--ink)}
.cat-list a:hover{text-decoration:none;background:rgba(27,69,216,.05)}
.cat-list a:hover .cat-list__t{color:var(--accent)}
.cat-list__n{font-family:var(--mono);font-size:14px;color:var(--mid);font-variant-numeric:tabular-nums;padding-top:.35em}
.cat-list__t{font-weight:900;font-size:clamp(20px,1.9vw,27px);line-height:1.1;letter-spacing:-.025em}
.cat-list__d{font-size:var(--t-cap);line-height:1.45;color:var(--mid)}
.reg{width:100%}
.reg h2{font-size:var(--t-h3);margin-bottom:0}
.reg-sec{margin-top:clamp(38px,4vw,60px)}

/* ---------- supporters strip (footer furniture) ---------- */
.support{background:var(--ink);color:var(--ground);padding-top:clamp(34px,4vw,52px);padding-bottom:clamp(38px,4.4vw,60px)}
.support .kick{color:var(--faint)}
.support__head{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:baseline;border-bottom:1px solid rgba(236,240,246,.22);padding-bottom:14px}
.support__head p{font-family:var(--mono);font-size:13.5px;color:#B9C4D2;max-width:46ch}
.support__group{padding-top:26px}
.support__glab{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.support__row{display:flex;flex-wrap:wrap;gap:12px}
.sponsor{flex:0 0 236px;width:236px;background:rgba(255,255,255,.05);border:1px solid rgba(236,240,246,.18);padding:12px;display:flex;flex-direction:column;gap:10px;color:var(--ground)}
.sponsor:hover{text-decoration:none;border-color:var(--accent-lo);background:rgba(143,168,255,.1)}
.sponsor img{width:100%;height:44px;max-height:44px;object-fit:contain;object-position:left center;background:#0A121F;padding:6px 10px;border:1px solid rgba(236,240,246,.12)}
.sponsor-name{font-family:var(--mono);font-size:13px;line-height:1.25;color:var(--ground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sponsor-blurb{font-size:13.5px;line-height:1.4;color:var(--faint);min-width:200px}
@media (max-width:560px){
  .sponsor{flex:0 0 100%;width:100%}
}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--ground);padding-top:clamp(26px,3vw,38px);padding-bottom:clamp(22px,2.4vw,32px);border-top:3px solid var(--accent);margin-top:clamp(40px,5vw,72px)}
.support+.foot{margin-top:0;border-top:1px solid rgba(236,240,246,.22)}
.foot__top{display:flex;align-items:baseline;justify-content:space-between;gap:clamp(16px,2.4vw,32px);flex-wrap:wrap}
.foot__name{font-weight:900;font-size:clamp(26px,3.4vw,44px);line-height:.86;letter-spacing:-.05em}
.foot__top p{font-family:var(--mono);font-size:12.5px;color:#B9C4D2;max-width:44ch;line-height:1.45}
.foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(14px,1.6vw,24px);margin-top:clamp(20px,2.2vw,30px)}
.foot__col h3{font-size:13.5px;font-weight:600;line-height:1.25;letter-spacing:-.005em;margin-bottom:9px;display:flex;gap:8px;align-items:flex-start}
.foot__col h3 .ico{font-size:16px;color:var(--accent-lo);margin-top:1px}
.foot__col h3 a{color:var(--ground)}
.foot__col ul{list-style:none;display:grid;gap:5px;font-family:var(--mono);font-size:12.5px;line-height:1.3}
.foot__col a{color:var(--accent-lo)}
.foot__col a:hover{color:#fff}
.foot__end{margin-top:clamp(18px,2vw,26px);padding-top:13px;border-top:1px solid rgba(236,240,246,.22);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;color:#B9C4D2}
.foot__end a{color:#B9C4D2}

/* ---------- utility pages ---------- */
.pagehead{padding-top:clamp(40px,5vw,80px)}
.pagehead h1{font-size:var(--t-h1);margin-top:16px}
.mini{font-family:var(--mono);font-size:13.5px;color:var(--muted)}
.expand{margin-top:16px}
.expand>summary{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);cursor:pointer;list-style:none}
.expand>summary::-webkit-details-marker{display:none}
.expand>summary::after{content:" +"}
.expand[open]>summary::after{content:" −"}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .read,.cat-hero{grid-template-columns:minmax(0,1fr)}
  .plate__txt{max-width:none}
  .plate__wash{background:linear-gradient(to top,rgba(237,241,246,.98) 0%,rgba(237,241,246,.9) 34%,rgba(237,241,246,.4) 66%,rgba(237,241,246,.12) 100%)}
  .cat-list a{grid-template-columns:auto minmax(0,1fr)}
  .cat-list__d{grid-column:2}
}
@media (max-width:720px){
  .snav__row{grid-template-columns:auto minmax(0,1fr);row-gap:10px}
  .snav__no{grid-row:1}
  .snav__kids{grid-column:1/-1}
  .fig--rule figcaption{grid-template-columns:minmax(0,1fr)}
  .timeline li{grid-template-columns:minmax(0,1fr);gap:4px}
}
@media print{
  .top,.snav,.support,.btn{display:none}
  body{background:#fff}
}

/* ---------- map slot: real geometry injected downstream ---------- */
.map-figure{margin-top:28px}
.map-slot{width:100%;aspect-ratio:1200/860;background:var(--paper);border:1px solid var(--rule);display:grid;place-items:center;padding:24px}
.map-slot::after{content:attr(data-spec);font-family:var(--mono);font-size:13.5px;line-height:1.5;color:var(--mid);max-width:52ch;text-align:center}

/* ============================================================
   narrow-screen pass (tested at 360px)
   ============================================================ */
@media (max-width:620px){
  :root{--gut:18px;--band:clamp(40px,9vw,64px)}

  /* lead plate stops being an overlay: image, then text on the ground */
  .plate{display:grid}
  .plate__img{height:auto;min-height:0;aspect-ratio:4/3}
  .plate__wash{display:none}
  .plate__body{position:static;display:grid}
  .plate__no{padding-top:0;margin-top:-.34em;font-size:clamp(52px,17vw,88px)}
  .plate__txt{padding-top:16px;padding-bottom:8px}
  .plate__txt h1,.plate__txt h2{font-size:clamp(28px,8.6vw,40px)}
  .plate__foot{padding-top:14px}

  /* masthead + nav */
  .mast__row{gap:10px}
  .mast__gauge{width:14px;margin-bottom:.5em}
  .snav__row{padding:18px 0}
  .snav__no{font-size:28px}
  .snav__title{font-size:19px}
  .snav__kids{gap:5px 18px;font-size:13px}

  /* inner header: brand on its own line, sections wrap under it */
  .top__in{gap:12px}
  .top nav{gap:10px 16px;font-size:12.5px}

  /* cards and lists */
  .sgrid{gap:16px}
  .scard h3{min-height:0;font-size:19px}
  .cat-list a{padding:18px 0;gap:12px}
  .cat-list__t{font-size:19px}

  /* components */
  .statrow{grid-template-columns:minmax(0,1fr)}
  .statblock{padding:16px 16px 18px}
  .callout li{grid-template-columns:minmax(0,1fr)}
  .callout li::before{display:none}
  .callout li{border-left:2px solid var(--second);padding-left:14px}
  .pullquote p{font-size:clamp(21px,6.4vw,27px)}
  .ledger__row{grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:baseline}
  .datatable,.versus{min-width:0;font-size:14px}
  .datatable td,.datatable th{padding-right:10px}

  /* map slot: let the spec text set the height on narrow screens */
  .map-slot{aspect-ratio:auto;min-height:260px;padding:20px}

  /* figures */
  .fig--plate img{height:44vh}
  .fig{margin-block:26px}

  /* footer */
  .foot__name{font-size:clamp(24px,8vw,34px)}
  .foot__cols{grid-template-columns:minmax(0,1fr);gap:18px}
  .foot__end{font-size:11.5px}
  .map-cap{gap:14px;flex-wrap:wrap}
  .ledger__val{font-size:28px}
}
@media (max-width:380px){
  .top__brand{font-size:22px}
  .snav__kids{font-size:12.5px}
  .prose{font-size:17.5px}
}

/* touch targets: text links in dense lists get real vertical hit area on small screens */
@media (max-width:620px){
  .top nav{gap:0 14px}
  .top nav a{padding-block:11px}
  .snav__kids{gap:0 16px}
  .snav__kids a{padding-block:10px}
  .maplist{gap:0 16px}
  .maplist a{padding-block:10px}
  .scard__list a{padding-block:12px}
  .foot__col ul{gap:0}
  .foot__col a{display:block;padding-block:10px}
  .foot__end{gap:10px}
  .foot__end span{padding-block:4px}
  .related-links a,.further-grid a{padding-block:9px}
  .cat-list a{padding-block:20px}
}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}

/* sp-mark-pad: the mark keeps the height Design declared AND the inset Design drew.
   border-box stops width:100%+padding overflowing the tile; the box grows by the
   vertical padding and border so the artwork is not shrunk to pay for the inset. */
.sponsor img,.sponsor-box img,.sp-logo img{box-sizing:border-box!important;height:58px!important;max-height:58px!important}

/* sp-name-link: the partner's name rendered as an <a> with no rule of its own falls
   through to the global link accent and reads as an unstyled browser link. Match it to
   the .sponsor-name span Design DID style, so both tiers read the same. */
.sponsor a.sp-domain,.sponsor .sp-domain{font-family:var(--mono);font-size:13px;line-height:1.25;color:var(--ground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* 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}

/* MAPKIT_BEGIN — injected real geodata; pins are links */
.map-slot{padding:0;background:none!important;border:0!important;display:flex;align-items:center;justify-content:center;min-height:0!important}
.map-slot>svg.mapkit{width:100%!important;max-width:100%;height:auto;max-height:none;margin:0 auto}
.map-slot{width:100%}
.map-slot{aspect-ratio:auto!important;height:auto!important}
.map-slot::after,.map-slot::before{content:none!important;display:none!important}
.map-figure figcaption{}
.mapkit__pin{cursor:pointer}
.mapkit__pin text{paint-order:stroke;stroke:#EFE7D6;stroke-width:3px;stroke-linejoin:round}
.mapkit__pin:hover circle{r:9.1}
.mapkit__pin:hover text{font-weight:700}
/* MAPKIT_END */

/* op-nav-collapse: this nav printed 874px of stacked links at 390 before any content
   (20 links), and the build shipped no control to close it. A disclosure cannot be
   built from CSS alone — :hover and :focus-within are unreachable on touch until a link has
   already been tapped — so a hidden checkbox and its label were injected immediately before
   the nav, and the nav collapses against the checked state. Exactly the mechanism the builds
   that DO have a burger already use.
   Treatment "centre-rule", seeded from the domain so 175 builds do not all ship the
   same hairline box in the same place; it inherits this build's font and colour, and where the
   nav's own parent has no inline padding (0px measured) the button carries the build's
   gutter (clamp(20px,4vw,40px)) so it cannot sit against the glass. The links are hidden,
   not removed: they stay in the markup. Desktop is untouched — every rule below is inside the
   phone breakpoint (860px here), where the button appears and the nav starts closed.
   Folded with the "height-clip" technique and marked with the "chevron" icon — the mechanism
   is deliberately not identical across the fleet either. */
.menu-open{display:none}
@media (max-width:860px){
  .menu-open{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:fit-content;margin-inline:auto;justify-self:center;border:0;border-bottom:2px solid currentColor;border-radius:0;padding:8px 6px;letter-spacing:.16em;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .menu-open-bars{width:8px;height:8px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
  .snav.wrap{height:0;overflow:hidden;visibility:hidden;padding-block:0;margin-block:0;border-top-width:0;border-bottom-width:0}
  .menu-open-c:checked ~ .snav.wrap{height:auto;overflow:visible;visibility:visible;padding-block:revert;margin-block:revert;border-top-width:revert;border-bottom-width:revert}
  .mast:has(> .menu-open){display:flow-root}
  .menu-open:not(:has(~ .snav.wrap)){display:none}
}

/* op-footer-compact: the footer printed 20 rows for 20 link(s) in
   5 list(s) — 1096px at 390, 12% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too, and the group holder takes two columns,
   measured 1096 -> 925px (16% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:clamp(16px,1.6vw,23px)!important;row-gap:6px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
  footer [class*=grid],footer [class*=index],footer [class*=cols]{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:26px}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1968px at 390, 22% of the whole page. Two columns bring it to
   1134px (42% shorter). Checked before writing: no new overflow, smallest mark still
   141px wide, longest blurb 3 lines, tile heights 181-181px.
   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. Only the tier(s) that were one-per-row are touched (.support__row), 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){
  .support__row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:12px!important}
    .support__row > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .support__row > * *{min-width:0!important;max-width:100%}
    .support__row img,.support__row svg{max-width:100%;height:auto}
  .support__row .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-name-wrap: at 320 the money tile truncated its brand name — "Disruptive Films", "Im Not Your Mommy" — losing up to 23px to an
   ellipsis. The name is allowed to wrap instead of being cut: a brand that reads as half a word
   is worse than a brand on two lines. Structural only, phone widths only, desktop untouched. */
@media (max-width:360px){
  .sponsor-name{white-space:normal!important;overflow-wrap:anywhere;text-overflow:clip}
  .sp-domain{white-space:normal!important;overflow-wrap:anywhere;text-overflow:clip}
}

/* op-hover-pad */
.cat-list a{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
@media (min-width:660px) and (max-width:1439px){.support__row.support__row:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(236px,calc(50% - 6px)),1fr))!important;column-gap:12px!important;row-gap:12px!important;justify-content:stretch!important;align-items:stretch!important}.support__row.support__row > [data-partner]{flex:none!important;width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important}}
.support__row > [data-partner] img{background:transparent!important}
.support__row > .sponsor[data-partner]:has(> .sp-domain) > .sponsor-name{display:none!important}@media (min-width:860px) and (max-width:1439px){.support__row.support__row:has(> [data-partner]){grid-template-columns:repeat(3,minmax(0,1fr))!important}}@media (min-width:1440px){.support__row.support__row:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:12px!important}.support__row.support__row > [data-partner]{flex:none!important;width:auto!important;max-width:none!important}}
.support__row.support__row > [data-partner][data-partner] img{border:0!important}