/* O2Zone — The Diagonal. Slate ground, daylight insets, one accent. */


:root{
  --slate:#0f1316;
  --slate-2:#151b1f;
  --slate-3:#1e262c;
  --line:#262d33;
  --fg:#e9ecec;
  --fg-2:#b3bbbe;
  --muted:#8a9195;
  --paper:#eae7e0;
  --paper-2:#ded9cf;
  --paper-line:#c6c0b3;
  --paper-fg:#14171a;
  --paper-muted:#585f63;
  --accent:#6f9bff;
  --accent-deep:#12308f;
  --bg:var(--slate);
  --text:var(--fg);
  --dim:var(--fg-2);
  --rule:var(--line);
  --sans:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --gut:clamp(22px,4vw,44px);
  --measure:70ch;
}

/* solitude ramp — crowd is glare, empty is dark */
[data-s="10"]{--band:#f2f1ea;--band-fg:#14171a;--band-dim:#4b5054;--band-line:#c9c8c1;--band-accent:#12308f}
[data-s="9"]{--band:#d7d8d1;--band-fg:#14171a;--band-dim:#4e5357;--band-line:#b6b7b0;--band-accent:#12308f}
[data-s="8"]{--band:#b2b6b3;--band-fg:#14171a;--band-dim:#1e2225;--band-line:#9aa09c;--band-accent:#12308f}
[data-s="7"]{--band:#979d9b;--band-fg:#14171a;--band-dim:#1c2023;--band-line:#848b88;--band-accent:#0f2a7a}
[data-s="6"]{--band:#7d858a;--band-fg:#12171a;--band-dim:#12171a;--band-line:#6b7378;--band-accent:#061642}
[data-s="5"]{--band:#59636a;--band-fg:#f2f4f4;--band-dim:#e4e8e9;--band-line:#767f85;--band-accent:#dbe4fd}
[data-s="4"]{--band:#3a444b;--band-fg:#eef0f0;--band-dim:#b6bdc1;--band-line:#566067;--band-accent:#b3c6fb}
[data-s="3"]{--band:#2b343a;--band-fg:#e7ebec;--band-dim:#a9b1b6;--band-line:#414b52;--band-accent:#9fb8fa}
[data-s="2"]{--band:#1e262c;--band-fg:#dfe4e6;--band-dim:#9ba3a8;--band-line:#333d44;--band-accent:#8fabf7}
[data-s="1"]{--band:#151b1f;--band-fg:#d8dedf;--band-dim:#939ba0;--band-line:#2a3238;--band-accent:#7fa2f6}
[data-s="0"]{--band:#0b0e10;--band-fg:#cfd6d8;--band-dim:#7f878b;--band-line:#222a2f;--band-accent:#6f9bff}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--slate);color:var(--fg);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{color:#a8bcf5}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em;line-height:1.06;font-weight:700;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0}
hr{border:0;border-top:1px solid var(--rule);margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{width:100%;max-width:1320px;margin-inline:auto;padding-inline:var(--gut)}
.measure{max-width:var(--measure)}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0}
.mono{font-family:var(--mono)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--accent);color:#08111f;padding:8px 14px}

/* ---------- masthead ---------- */
.masthead{background:var(--slate);border-bottom:1.5px solid var(--line);position:relative;z-index:20}
.masthead-in{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-block:20px 14px}
.brand{display:flex;flex-direction:column;gap:6px;color:var(--fg)}
.brand:hover{color:var(--fg)}
.wordmark{font-weight:700;font-size:clamp(24px,3.4vw,32px);letter-spacing:.24em;line-height:1}
.standing{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.nav{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline;padding-bottom:4px}
.nav a{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-bottom:4px;border-bottom:2px solid transparent}
.nav a:hover{color:var(--fg)}
.nav a[aria-current]{color:var(--fg);border-bottom-color:var(--accent)}
.nav .nav-browse{color:var(--fg)}

/* axis strip under masthead — the signature rule */
.axis-rule{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line);padding-block:9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.axis-rule .ramp{flex:1;height:6px;min-width:80px;background:linear-gradient(90deg,#f2f1ea,#7d858a 52%,#0b0e10);border:1px solid var(--line)}
.axis-rule b{color:var(--fg);font-weight:500}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;border-bottom:1.5px solid var(--line);background:#07090a;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;z-index:-2}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,9,10,.55),rgba(7,9,10,.25) 40%,rgba(7,9,10,.9))}
.hero-body{position:relative;padding-block:clamp(110px,20vh,210px) clamp(26px,4vw,46px)}
.hero-body .wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(18px,3vw,48px);align-items:end}
.hero h1{font-size:clamp(30px,5.4vw,64px);text-shadow:0 2px 30px rgba(0,0,0,.75)}
.hero .hero-dek{font-family:var(--mono);font-size:12.5px;line-height:1.8;color:#d7dcde;text-shadow:0 1px 16px rgba(0,0,0,.9)}
.hero .kicker{margin-bottom:14px;text-shadow:0 1px 12px rgba(0,0,0,.9)}
@media(max-width:820px){
  .hero-body{padding-block:clamp(70px,14vh,120px) 26px}
  .hero-body .wrap{grid-template-columns:1fr;gap:20px}
  .hero .hero-dek{font-size:13px}
}
.hero-quote{border-left:2px solid var(--accent);padding-left:16px;margin-top:18px;font-size:clamp(15px,1.5vw,19px);font-style:italic;color:#eceeef;text-shadow:0 1px 16px rgba(0,0,0,.9)}
.hero-scale{position:absolute;top:0;right:0;bottom:0;width:56px;display:none;flex-direction:column;justify-content:space-between;padding:18px 10px;background:linear-gradient(180deg,rgba(242,241,234,.92),rgba(125,133,138,.7) 52%,rgba(8,11,12,.92));font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-align:center}
.hero-scale span:first-child{color:#14171a}
.hero-scale span:last-child{color:#cfd6d8}
@media(min-width:900px){.hero-scale{display:flex}}
.credit{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted)}

/* ---------- generic band ---------- */
.band{padding-block:clamp(38px,6vw,72px);border-bottom:1px solid var(--line)}
.band-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px;border-bottom:1.5px solid var(--fg);padding-bottom:10px;margin-bottom:clamp(20px,3vw,34px)}
.band-head h2{font-size:clamp(20px,2.4vw,28px)}
.band-head .eyebrow{color:var(--muted)}
.band-title{font-size:clamp(26px,3.6vw,42px);margin-bottom:14px}
.lede{font-size:clamp(16px,1.7vw,19px);color:var(--dim);line-height:1.6}

/* ---------- the axis instrument ---------- */
.axis-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-bottom:22px;padding:16px 18px;border:1px solid var(--line);background:var(--slate-2)}
.axis-ctrl label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.axis-ctrl input[type=range]{flex:1 1 240px;min-width:180px;accent-color:var(--accent);background:transparent}
.axis-readout{font-family:var(--mono);font-size:11.5px;color:var(--fg);letter-spacing:.06em}
.axis-readout b{font-family:var(--sans);font-size:19px;letter-spacing:-.02em}
.axis-list{list-style:none;border-top:1px solid var(--line)}
.axis-row{position:relative;display:grid;grid-template-columns:92px minmax(0,1fr) minmax(0,150px);gap:clamp(14px,2vw,28px);align-items:center;background:var(--band);color:var(--band-fg);padding:16px var(--gut);margin-inline:calc(-1 * var(--gut))}
.axis-row[hidden]{display:none}
.axis-num{display:flex;align-items:baseline;gap:9px;font-weight:700;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.03em;line-height:.9}
.axis-num i{display:block;width:18px;height:2px;background:var(--band-accent)}
.axis-row h3{font-size:clamp(17px,1.9vw,22px);margin-bottom:5px}
.axis-row h3 a{color:inherit}
.axis-row h3 a::after{content:"";position:absolute;inset:0}
.axis-row:hover{filter:brightness(1.06)}
.axis-row h3 a:hover{color:var(--band-accent)}
.axis-row p{font-size:14.5px;line-height:1.5;color:var(--band-dim)}
.axis-meta{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--band-dim);margin-top:6px}
.axis-thumb{aspect-ratio:16/10;overflow:hidden}
.axis-thumb img{width:100%;height:100%;object-fit:cover}
.axis-empty{font-family:var(--mono);font-size:12px;color:var(--muted);padding:22px 0}
@media(max-width:760px){
  .axis-row{grid-template-columns:64px minmax(0,1fr);gap:14px}
  .axis-thumb{display:none}
}

/* ---------- lead article ---------- */
.lead-feature{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start}
.lead-feature .lf-img{aspect-ratio:4/3;overflow:hidden;background:var(--slate-3)}
.lead-feature .lf-img img{width:100%;height:100%;object-fit:cover}
.lead-feature h2{font-size:clamp(26px,3.6vw,44px);margin-bottom:16px}
.lead-feature h2 a{color:var(--fg)}
.lead-feature h2 a:hover{color:var(--accent)}
.lead-feature .lf-dek{font-size:clamp(16px,1.8vw,20px);color:var(--dim);margin-bottom:16px}
.meta{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.more{display:inline-block;margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);border-bottom:1.5px solid var(--accent);padding-bottom:3px}
@media(max-width:820px){.lead-feature{grid-template-columns:1fr}}

/* ---------- supporters (directory list) ---------- */
.supporters{background:var(--slate-2)}
.sup-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(20px,3vw,38px)}
.sup-group h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500;padding-bottom:8px;border-bottom:1px solid var(--line)}
.sup-list{list-style:none}
.sponsor{display:block;border-top:1px solid var(--line);padding:16px 0 18px}
.sup-list li:first-child .sponsor{border-top:0}
.sponsor img{width:100%;max-width:340px;height:52px;max-height:52px;object-fit:contain;background:#05080a;border:1px solid var(--line);padding:10px 16px}
.sponsor.feat img{height:64px;max-height:64px;max-width:420px}
.sponsor .sponsor-blurb{display:block;min-height:2.9em;margin-top:10px;width:100%;min-width:200px;font-size:14.5px;line-height:1.45;color:var(--dim)}
.sponsor:hover img{border-color:var(--accent)}

/* ---------- section grid ---------- */
.sec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(16px,2vw,24px)}
.sec-card{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--slate-2);color:var(--fg);height:100%}
.sec-card:hover{border-color:var(--accent);color:var(--fg)}
.sec-card .sc-img{aspect-ratio:16/10;overflow:hidden}
.sec-card .sc-img img{width:100%;height:100%;object-fit:cover}
.sec-card .sc-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.sec-card h3{font-size:21px}
.sec-card p{font-size:14.5px;color:var(--dim);line-height:1.5}
.sec-card .sc-foot{margin-top:auto;padding-top:6px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:10px}
.sec-no{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--accent)}

/* ---------- carousel ---------- */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,300px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin}
.rail>*{scroll-snap-align:start}
.rail-nav{display:flex;gap:8px}
.rail-nav button{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--fg);background:transparent;border:1px solid var(--line);padding:6px 12px;cursor:pointer}
.rail-nav button:hover{border-color:var(--accent);color:var(--accent)}
.card{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);background:var(--slate-2);color:var(--fg);height:100%}
.card:hover{border-color:var(--accent);color:var(--fg)}
.card .c-img{aspect-ratio:3/2;overflow:hidden}
.card .c-img img{width:100%;height:100%;object-fit:cover}
.card .c-body{padding:0 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{font-size:18px;line-height:1.2;min-height:2.4em}
.card p{font-size:14px;color:var(--dim);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .c-foot{margin-top:auto;padding-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:8px}
.c-filed{color:var(--accent)}

/* ---------- map ---------- */
.map-figure{margin:0;border:1px solid var(--line);background:var(--slate-2)}
.map-slot{position:relative;display:block;width:100%}
.map-slot svg{width:100%;height:auto}
.map-pin{position:absolute;transform:translate(-50%,-50%);width:0;height:0}
.map-pin i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(111,155,255,.22)}
.map-pin span{position:absolute;left:14px;top:-10px;white-space:nowrap;font-family:var(--mono);font-size:12.5px;line-height:1.35;letter-spacing:.02em;color:var(--fg)}
.map-pin span b{display:block;font-weight:500}
.map-pin span em{display:block;font-style:normal;font-size:10.5px;color:var(--fg-2)}
.daylight .map-pin i{background:var(--accent-deep);box-shadow:0 0 0 4px rgba(18,48,143,.16)}
.daylight .map-pin span{color:var(--paper-fg)}
.daylight .map-pin span em{color:#4a5054}
@media(max-width:600px){
  .map-pin span{font-size:11px;left:11px}
  .map-pin span em{display:none}
}
.map-figure figcaption{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.map-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.map-legend i{display:inline-block;width:22px;height:2px;background:var(--accent);margin-right:8px;vertical-align:middle}

/* ---------- footer ---------- */
.foot{background:#0b0e10;padding-block:36px 44px}
.foot-in{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(150px,1fr));gap:28px}
.foot h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:12px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.foot ul a{font-size:14.5px;color:var(--fg-2)}
.foot ul a:hover{color:var(--accent)}
.foot .disclaimer{font-size:14px;color:var(--muted);max-width:56ch;margin-top:14px}
.foot .wordmark{font-size:20px}

/* ================= article (daylight inset) ================= */
.art-head{background:var(--band,var(--slate-2));color:var(--band-fg,var(--fg));border-bottom:1.5px solid var(--line);padding-block:clamp(28px,4vw,52px)}
.art-head-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(18px,3vw,44px);align-items:end}
.art-head h1{font-size:clamp(28px,4.6vw,54px)}
.art-head .kicker{color:var(--band-accent,var(--accent))}
.art-dek{font-size:clamp(16px,1.9vw,21px);line-height:1.5;color:var(--band-fg);margin-top:16px;max-width:56ch}
.art-filed{border-left:2px solid var(--band-accent);padding-left:16px}
.art-filed .big{font-size:clamp(46px,7vw,84px);font-weight:700;letter-spacing:-.04em;line-height:.85}
.art-filed p{font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--band-dim);margin-top:10px}
.art-meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--band-dim);margin-top:20px}
@media(max-width:820px){.art-head-in{grid-template-columns:1fr}}

.art-hero{border-bottom:1px solid var(--line);background:#07090a}
.art-hero img{width:100%;height:clamp(220px,42vh,460px);object-fit:cover}
.art-hero figcaption{padding:10px var(--gut);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

.daylight{
  --bg:var(--paper);--text:var(--paper-fg);--dim:var(--paper-muted);--rule:var(--paper-line);
  background:var(--paper);color:var(--paper-fg);
}
.daylight a{color:var(--accent-deep)}
.daylight a:hover{color:#0a1f5c}
.article{padding-block:clamp(28px,4vw,56px)}
.prose{max-width:var(--measure);margin-inline:auto}
.prose p{font-size:clamp(17px,1.35vw,19.5px);line-height:1.72;margin-bottom:20px}
.prose h2{font-size:clamp(22px,2.6vw,31px);margin:44px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:20px;margin:28px 0 10px}
.prose .lead{font-size:clamp(18.5px,1.9vw,23px);line-height:1.5;font-weight:500;margin-bottom:26px}
.prose>*+.interrupt{margin-top:8px}

/* interruptions run wider than the measure */
.interrupt{max-width:1000px;margin:34px auto 38px}
.int-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-deep);border-bottom:1px solid var(--paper-line);padding-bottom:7px;margin-bottom:16px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

.factlist{list-style:none;display:grid;gap:0}
.factlist li{display:grid;grid-template-columns:minmax(140px,240px) minmax(0,1fr);gap:8px 26px;padding:12px 0;border-bottom:1px solid var(--paper-line)}
.factlist dt,.factlist .f-key{font-weight:600;font-size:15.5px}
.factlist .f-val{font-size:16px;color:#33383b;line-height:1.5}
@media(max-width:620px){.factlist li{grid-template-columns:1fr;gap:2px}}

.timeline{list-style:none;counter-reset:tl}
.timeline li{display:grid;grid-template-columns:minmax(150px,290px) minmax(0,1fr);gap:8px 26px;padding:14px 0;border-top:1px solid var(--paper-line)}
.timeline li:last-child{border-bottom:1px solid var(--paper-line)}
.t-when{font-family:var(--mono);font-size:12.5px;line-height:1.5;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-deep)}
.t-what{font-size:16px;line-height:1.55}
@media(max-width:620px){.timeline li{grid-template-columns:1fr;gap:4px}}
/* separator-less bullet: collapse the row to one full-width cell rather than leaving a blank half */
.timeline li:has(.t-what:empty),.factlist li:has(.f-val:empty),.sequence li:has(p:empty){grid-template-columns:1fr}
.timeline li:has(.t-what:empty) .t-what,.factlist li:has(.f-val:empty) .f-val,.sequence li:has(p:empty) p{display:none}
.timeline li:has(.t-what:empty) .t-when{font-family:var(--sans);font-size:16px;letter-spacing:0;text-transform:none;color:var(--paper-fg)}

.sequence{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--paper-line);border:1px solid var(--paper-line)}
.sequence li{background:var(--paper);padding:16px;display:flex;flex-direction:column;gap:8px;counter-increment:tl}
.sequence li::before{content:counter(tl,decimal-leading-zero);font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--accent-deep)}
.sequence p{font-size:15px;line-height:1.5;margin:0}
.sequence strong{display:block;font-size:16px}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--paper-line);border:1px solid var(--paper-line)}
.statblock{background:var(--paper);padding:18px 16px;display:flex;flex-direction:column;gap:6px}
.stat-num{font-size:clamp(28px,4vw,42px);font-weight:700;letter-spacing:-.03em;line-height:1}
.stat-label{font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-muted)}

.callout{margin:0;background:#e0dcd2;border-left:3px solid var(--accent-deep);padding:20px 22px}
.callout p{font-size:17px;line-height:1.6;margin:0}
.callout p+p{margin-top:12px}
.pointlist{list-style:none;display:flex;flex-direction:column;gap:10px}
.pointlist li{position:relative;padding-left:20px;font-size:16px;line-height:1.55}
.pointlist li::before{content:"—";position:absolute;left:0;color:var(--accent-deep)}
.note{font-size:15.5px;line-height:1.6;color:var(--paper-muted);border-top:1px solid var(--paper-line);padding-top:12px}
.pullquote{margin:34px auto;max-width:900px;border-top:2px solid var(--accent-deep);border-bottom:2px solid var(--accent-deep);padding:22px 0}
.pullquote p{font-size:clamp(20px,2.6vw,29px);line-height:1.28;font-weight:600;letter-spacing:-.015em;margin:0}
.blockquote{margin:28px auto;max-width:900px;border-left:3px solid var(--paper-line);padding:4px 0 4px 20px}
.blockquote p{font-size:18.5px;line-height:1.55;font-style:italic;margin:0}
.blockquote cite{display:block;margin-top:10px;font-family:var(--mono);font-size:11.5px;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-muted)}

.article-figure{margin:0}
.article-figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
.article-figure figcaption,.gallery figcaption{margin-top:9px;font-size:14.5px;line-height:1.5;color:var(--paper-muted);display:flex;flex-wrap:wrap;gap:4px 16px;justify-content:space-between}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}

.daylight .map-figure{border-color:var(--paper-line);background:#e2ded4}
.daylight .map-figure figcaption{border-top-color:var(--paper-line);color:var(--paper-muted)}

.versus,.datatable{width:100%;border-collapse:collapse;font-size:15.5px}
.versus th,.versus td,.datatable th,.datatable td{border:1px solid var(--paper-line);padding:11px 13px;text-align:left;vertical-align:top;line-height:1.45}
.versus th,.datatable th{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-muted);font-weight:500;background:#e0dcd2}
.table-scroll{overflow-x:auto}

.chart{margin:0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{margin-top:10px;font-size:14.5px;color:var(--paper-muted)}
.chart .c-bar{fill:var(--accent-deep)}
.chart .c-bar-alt{fill:#8b8577}
.chart .c-lab{font-family:var(--mono);font-size:11px;fill:var(--paper-fg)}
.chart .c-val{font-family:var(--mono);font-size:11px;fill:var(--paper-muted)}
.chart .c-axis{stroke:var(--paper-line);stroke-width:1}
.chart .c-line{fill:none;stroke:var(--accent-deep);stroke-width:2}
.chart .c-dot{fill:var(--accent-deep)}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.profile-card{border:1px solid var(--paper-line);background:#e3dfd5;padding:18px;display:flex;flex-direction:column;gap:8px}
.profile-card .p-photo{width:72px;height:72px;border-radius:50%;object-fit:cover}
.profile-card h3{font-size:19px}
.profile-card .p-role{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-muted)}
.profile-card p{font-size:15px;line-height:1.5}
.profile-card .p-links{display:flex;flex-wrap:wrap;gap:12px;font-size:14px}
.profile-card .p-attr{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--paper-muted);margin-top:auto;padding-top:8px}
.profile-card.no-photo{border-left:3px solid var(--accent-deep)}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.org-card{display:flex;align-items:center;gap:12px;border:1px solid var(--paper-line);background:#e3dfd5;padding:12px 14px;color:var(--paper-fg)}
.org-card:hover{border-color:var(--accent-deep);color:var(--paper-fg)}
.org-logo{width:56px;height:34px;object-fit:contain;background:#0b0e10;padding:4px;flex:none}
.org-card .org-name{font-weight:600;font-size:15.5px;line-height:1.25}
.org-card .org-host{font-family:var(--mono);font-size:11px;color:var(--paper-muted);display:block}
.org-card.no-logo .org-name::before{content:"◧";color:var(--accent-deep);margin-right:8px}
.entity-ref{font-weight:600;white-space:nowrap}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.further-grid a{display:flex;flex-direction:column;gap:6px;border-top:2px solid var(--paper-fg);padding-top:11px;font-size:17px;line-height:1.3;font-weight:600;color:var(--paper-fg)}
.further-grid a:hover{border-top-color:var(--accent-deep);color:var(--accent-deep)}
.related-links{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.related-links li{border-top:1px solid var(--paper-line);padding-top:11px}
.related-links a{font-size:16.5px;font-weight:600;line-height:1.3}
.related-links .rl-meta{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-muted);margin-top:5px}

/* article foot: the axis position + related */
.art-foot{background:var(--slate);color:var(--fg);padding-block:clamp(30px,4vw,54px);border-top:1.5px solid var(--line)}
.foot-axis{display:grid;grid-template-columns:repeat(11,1fr);gap:2px;margin-top:16px}
.foot-axis i{display:block;height:34px;background:var(--band);position:relative}
.foot-axis i span{position:absolute;left:0;right:0;top:calc(100% + 6px);text-align:center;font-family:var(--mono);font-size:10px;color:var(--muted)}
.foot-axis i[data-here]{outline:2px solid var(--accent);outline-offset:1px}
.foot-axis i[data-here] span{color:var(--accent)}
.axis-caption{margin-top:34px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- category / hub ---------- */
.cat-hero{border-bottom:1.5px solid var(--line);padding-block:clamp(30px,4vw,56px)}
.cat-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center}
@media(max-width:860px){.cat-hero-in{grid-template-columns:1fr}}
.cat-hero img{width:100%;aspect-ratio:16/9;object-fit:cover}
.cat-list{list-style:none;border-top:1.5px solid var(--fg)}
.cat-list li{border-bottom:1px solid var(--line)}
.cat-list a{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,160px);gap:clamp(12px,2vw,26px);align-items:center;padding:18px 0;color:var(--fg)}
.cat-list a:hover{color:var(--fg)}
.cat-list a:hover h3{color:var(--accent)}
.cat-list .cl-filed{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--accent);text-align:center}
.cat-list .cl-filed b{display:block;font-family:var(--sans);font-size:26px;font-weight:700;letter-spacing:-.03em;color:var(--fg)}
.cat-list h3{font-size:clamp(18px,2vw,23px);margin-bottom:6px}
.cat-list p{font-size:14.5px;color:var(--dim);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cat-list .cl-meta{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:7px}
.cat-list .cl-thumb{aspect-ratio:16/10;overflow:hidden}
.cat-list .cl-thumb img{width:100%;height:100%;object-fit:cover}
@media(max-width:760px){
  .cat-list a{grid-template-columns:52px minmax(0,1fr)}
  .cat-list .cl-thumb{display:none}
}

.hub-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(22px,3vw,40px)}
.hub-groups h3{font-size:20px;padding-bottom:9px;border-bottom:1.5px solid var(--fg);margin-bottom:4px}
.hub-groups ul{list-style:none}
.hub-groups li{border-bottom:1px solid var(--line)}
.hub-groups li a{display:flex;gap:12px;align-items:baseline;padding:11px 0;font-size:16px;color:var(--fg-2)}
.hub-groups li a:hover{color:var(--accent)}
.hub-groups .hn{font-family:var(--mono);font-size:11px;color:var(--accent);flex:none;width:20px}

/* ---------- editorial pages ---------- */
.page-body{max-width:var(--measure);margin-inline:auto}
.page-body p{font-size:clamp(17px,1.35vw,19px);line-height:1.7;margin-bottom:18px}
.page-body h2{font-size:clamp(20px,2.2vw,26px);margin:34px 0 12px}
.page-body ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.page-body ul li{padding-left:20px;position:relative;font-size:17px;line-height:1.6}
.page-body ul li::before{content:"—";position:absolute;left:0;color:var(--accent)}

/* ---------- styleguide only ---------- */
.sg-section{padding-block:34px;border-bottom:1px solid var(--rule)}
.sg-section>h2{font-size:22px;margin-bottom:6px}
.sg-note{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:18px}
.sg-narrow{max-width:360px;border:1px dashed var(--rule);padding:12px;overflow:hidden;resize:horizontal}
.sg-stack{display:flex;flex-direction:column;gap:22px}

/* phones: UI links get real tap targets (inline prose links stay inline) */
@media(max-width:760px){
  .nav{gap:0 18px}
  .nav a{padding-block:11px 9px}
  .foot ul{gap:0}
  .foot ul a{display:block;padding-block:12px}
  .foot ul li+li a{border-top:1px solid var(--line)}
  .more{padding-block:11px 9px}
  .hub-groups li a{padding:14px 0}
  .related-links a,.further-grid a{display:block;padding-bottom:12px}
  .rail-nav button{padding:11px 16px}
  .map-legend{gap:10px 20px}
}

@media print{
  body{background:#fff;color:#000}
  .nav,.rail-nav,.axis-ctrl{display: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}

/* 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 .sp-logo.sp-logo{display:block!important;width:100%!important}
.sponsor.sponsor img{height:76px!important;max-height:none!important;display:block!important;width:385px!important;max-width:100%!important;flex:none!important}

/* op-article-width: the article column was capped at 750px (89 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .prose) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  div.daylight.article > div.wrap div.prose{--measure:min(80.407ch, 100%)!important}
}
@media (min-width:1600px){
  div.daylight.article > div.wrap div.prose{--measure:min(clamp(80.407ch, 59.792vw, calc(80.407ch * 1.2)), 100%)!important}
  div.daylight.article > div.wrap div.prose > :is(p:not([class])){font-size:clamp(19.44px,1.3500vw,23.33px)!important}
}
/* op-article-width:end */
/* op-heading-levels */
h2:where(.rt-h3){margin: 0px; letter-spacing: -0.02em; line-height: 1.06; font-weight: 700; text-wrap: balance;}
.hub-groups h2:where(.rt-h3){font-size: 20px; padding-bottom: 9px; border-bottom: 1.5px solid var(--fg); margin-bottom: 4px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a > span.cl-thumb > img,
  a.card > span.c-img > img,
  a.sec-card > span.sc-img > img,
  article > figure.art-hero > img,
  div.cat-hero-in.wrap > figure > img,
  div.lead-feature > figure.lf-img > img,
  div.wrap > figure.article-figure.interrupt > img,
  li.axis-row > span.axis-thumb > img,
  main > section.hero > img.hero-img){height:auto}
/* op-img-dims:end */