/* Alishan Organic Center — "The Section Drawing" */

:root{
  /* palette: ground, ink, accent, secondary, quiet */
  --paper:#F3EEE2;
  --ink:#17140F;
  --cobalt:#1B3FC4;   /* accent — saturated, hue ~230 */
  --ochre:#E3A21B;    /* secondary — saturated, hue ~40 */
  --panel:#E7E0CE;
  --rule:#C9C0AC;
  --mute:#6E6658;
  --dark:#14181F;

  --display:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  --text:"Source Serif 4",Georgia,serif;

  /* three visibly different widths */
  --measure:660px;
  --wide:1180px;
  --hang:0px;
  --gutter:20px;
  --base:18px;
}
@media (min-width:900px){ :root{ --gutter:38px; } }
@media (min-width:1500px){ :root{ --hang:4ch; } }
@media (min-width:1200px){ :root{ --base:19px; --measure:700px; --wide:1380px; } }
@media (min-width:1600px){ :root{ --base:20px; --measure:745px; --wide:1660px; --gutter:56px; } }
@media (min-width:2000px){ :root{ --base:21px; --measure:790px; --wide:1980px; --gutter:72px; } }
@media (min-width:2400px){ :root{ --base:22px; --measure:840px; --wide:2280px; --gutter:96px; } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:var(--base);line-height:1.62;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--cobalt);text-decoration:none}
a:hover{color:var(--ink)}
p{text-wrap:pretty;margin:0 0 1.1em}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-0.03em;line-height:1.02;margin:0}
h3,h4{font-weight:600;letter-spacing:-0.02em}
figure{margin:0}
table{border-collapse:collapse;width:100%}
.icon{width:1.15em;height:1.15em;flex:none;vertical-align:-0.15em}
.wrap{width:min(100% - var(--gutter)*2, var(--wide));margin-inline:auto}
.kicker{font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cobalt);display:flex;align-items:center;gap:.5em}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:99}

/* ── masthead ─────────────────────────────── */
.masthead{display:grid;grid-template-columns:1fr;border-bottom:2px solid var(--ink);background:var(--ink);color:var(--paper)}
@media (min-width:900px){.masthead{grid-template-columns:minmax(260px,24%) 1fr}}
.mast-id{padding:20px var(--gutter);border-bottom:1px solid rgba(243,238,226,.25)}
@media (min-width:900px){.mast-id{border-bottom:0;border-right:1px solid rgba(243,238,226,.25)}}
.mast-id a{color:var(--paper);display:block}
.mast-id a:hover{color:var(--ochre)}
.mast-name{font-family:var(--display);font-weight:800;font-size:clamp(28px,2.6vw,58px);line-height:.92;letter-spacing:-0.035em}
.mast-line{margin:12px 0 0;font-size:.82rem;line-height:1.4;color:rgba(243,238,226,.62);max-width:32ch}
.mast-nav{display:flex;flex-direction:column;min-width:0}
.nav-1{list-style:none;margin:0;padding:18px var(--gutter);display:flex;flex-wrap:wrap;align-items:center;gap:12px clamp(18px,2.4vw,48px);
  font-family:var(--display);font-weight:800;font-size:clamp(16px,1.15vw,25px);letter-spacing:-0.02em;border-bottom:1px solid rgba(243,238,226,.25);flex:1}
.nav-1 a{color:var(--paper);display:flex;align-items:center;gap:.45em;padding:4px 0;border-bottom:3px solid transparent}
.nav-1 a:hover{color:var(--ochre);border-bottom-color:var(--ochre)}
.nav-1 a[aria-current]{color:var(--ochre);border-bottom-color:var(--ochre)}
.nav-1 .icon{width:1.35em;height:1.35em;color:var(--ochre)}
.nav-1 .end a{font-weight:600;font-size:.8em;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,238,226,.72)}
@media (max-width:899px){
  .mast-id{padding:14px var(--gutter)}
  .mast-name{font-size:26px;line-height:1.05}
  .mast-name br{display:none}
  .mast-line{font-size:.76rem;margin-top:6px;max-width:44ch}
  .nav-1{padding:0 var(--gutter);gap:0;font-size:15px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav-1::-webkit-scrollbar{display:none}
  .nav-1 li{flex:none}
  .nav-1 a{padding:13px 14px 12px;white-space:nowrap;border-bottom-width:3px;min-height:44px;box-sizing:border-box}
  .nav-2 a{display:inline-block;padding:5px 0;min-height:24px}
  .nav-1 li:first-child a{padding-left:0}
  .nav-1 .icon{width:1.1em;height:1.1em}
  .nav-1 .end{margin-left:0}
  .nav-2{padding:9px var(--gutter);gap:6px 16px;font-size:.68rem}
}
.nav-1 .end{margin-left:auto}
.nav-2{list-style:none;margin:0;padding:11px var(--gutter);display:flex;flex-wrap:wrap;gap:8px 24px;
  font-family:var(--display);font-weight:400;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase}
.nav-2 a{color:rgba(243,238,226,.6)}
.nav-2 a:hover{color:var(--ochre)}
.nav-2 .sep{color:rgba(243,238,226,.3)}

/* ── homepage bands ───────────────────────── */
.band{border-bottom:2px solid var(--ink)}
.band-pad{padding:clamp(30px,3.4vw,80px) 0}

.opener{padding:clamp(24px,2.6vw,56px) 0 0;background:var(--panel)}
.opener .altitudes{border-top-color:var(--ink)}
.opener-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px clamp(20px,3vw,60px);margin-bottom:clamp(16px,1.8vw,34px)}
.opener-head h1{font-size:clamp(34px,4.4vw,104px);max-width:20ch;letter-spacing:-0.04em}
.opener-head p{margin:0;max-width:46ch;font-size:1.05rem;color:#3D382F}
.sd-wrap{position:relative;padding-left:46px}
.section-drawing{display:block;width:100%;height:clamp(240px,32vw,620px)}
.sd-axis{position:absolute;left:0;top:0;bottom:0;width:44px}
.sd-axis span{position:absolute;right:6px;transform:translateY(-50%);font-family:var(--display);font-weight:600;font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.sd-pts{position:absolute;left:46px;right:0;top:0;bottom:0;pointer-events:none}
.sd-p{position:absolute;transform:translate(12px,-130%);display:grid;line-height:1.15;white-space:nowrap;background:var(--panel);padding:3px 6px;box-shadow:0 0 0 1px rgba(23,20,15,.14)}
.sd-p.sd-l{transform:translate(-100%,-130%);text-align:right;margin-right:12px}
.sd-p b{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:-0.01em;color:var(--ink)}
.sd-p i{font-style:normal;font-family:var(--display);font-weight:600;font-size:12px;color:var(--cobalt)}
.sd-band{position:absolute;transform:translate(10px,8px);font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:var(--cobalt);display:grid;line-height:1.2;white-space:nowrap;background:var(--panel);padding:3px 6px;box-shadow:0 0 0 1px rgba(27,63,196,.22)}
.sd-band i{font-style:normal;font-weight:600;font-size:12px;text-transform:none;letter-spacing:0}
@media (max-width:619px){.sd-wrap{padding-left:38px}.sd-axis{width:36px}.sd-pts{left:38px}
  .sd-p b{font-size:11.5px}.sd-p i,.sd-band,.sd-band i{font-size:11px}}
.altitudes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;
  border-top:2px solid var(--ink);margin-top:16px;padding:0 0 clamp(26px,3vw,56px)}
.altitudes > div{padding:clamp(16px,1.6vw,30px) clamp(14px,1.4vw,28px) clamp(14px,1.4vw,26px) 0;position:relative}
.altitudes > div + div{border-left:1px solid #BBB094;padding-left:clamp(14px,1.4vw,28px)}
@media (max-width:619px){
  .altitudes{grid-template-columns:1fr 1fr}
  .altitudes > div{padding:14px 14px 14px 0}
  .altitudes > div + div{border-left:0}
  .altitudes > div:nth-child(2n){border-left:1px solid #BBB094;padding-left:14px}
  .altitudes > div:nth-child(n+3){border-top:1px solid #BBB094}
  .alt-num,.alt-num.on{font-size:30px}
  .altitudes p{font-size:.8rem;margin-top:8px}
}
.alt-num{font-family:var(--display);font-weight:800;font-size:clamp(34px,3.4vw,78px);line-height:.86;letter-spacing:-0.045em;font-variant-numeric:tabular-nums;white-space:nowrap}
.alt-num.on{color:var(--cobalt);font-size:clamp(22px,2.1vw,48px)}
.altitudes p{margin:12px 0 0;font-size:.84rem;line-height:1.4;color:#4A4437;max-width:26ch}

.split{display:grid;grid-template-columns:1fr}
@media (min-width:860px){.split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
@media (min-width:1600px){.split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.split > *{min-width:0}
.split > * + *{border-top:1px solid var(--rule)}
@media (min-width:860px){.split > * + *{border-top:0;border-left:1px solid var(--rule)}}
.split-text{padding:clamp(26px,3vw,72px) var(--gutter);display:flex;flex-direction:column;justify-content:center}
.split-text h2{font-size:clamp(24px,2.2vw,46px);font-weight:600;margin-bottom:14px}
.more{align-self:flex-start;margin-top:10px;font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;border-bottom:2px solid var(--cobalt);padding-bottom:3px}

.ochre{background:var(--ochre);color:var(--ink)}
.ochre a{color:var(--ink)}
.ochre .more{border-color:var(--ink)}
.bignum{display:block;font-family:var(--display);font-weight:800;font-size:clamp(100px,13vw,300px);line-height:.7;letter-spacing:-0.06em}
.bignum-l{font-family:var(--display);font-weight:600;font-size:clamp(12px,.85vw,18px);letter-spacing:.2em;text-transform:uppercase;margin-top:10px;display:block}
.split > .article-figure > figcaption{padding:8px var(--gutter) 14px;margin:0;border-top:0;gap:2px 16px;align-items:baseline;flex-wrap:wrap}
.split > .article-figure > figcaption .cap{font-size:.78rem;line-height:1.4;color:#4A4437;flex:1 1 24ch}
.split > .article-figure > figcaption .credit{font-size:.7rem;line-height:1.4;flex:1 1 100%;text-align:left}

.two-col{display:grid;grid-template-columns:1fr;gap:clamp(10px,1.4vw,28px);align-items:end;padding:clamp(26px,3.4vw,86px) var(--gutter) clamp(26px,3vw,70px)}
@media (min-width:820px){.two-col{grid-template-columns:auto minmax(0,1.05fr) minmax(0,1.25fr);gap:clamp(18px,2.4vw,64px)}}
.oc-head h2{margin-bottom:16px}
.oc-body{grid-column:1/-1}
@media (min-width:820px){.oc-body{grid-column:auto}}
.oc-body p{margin:0;max-width:70ch;font-size:1.02rem}
.two-col h2{font-size:clamp(26px,2.8vw,60px);max-width:22ch;letter-spacing:-0.035em;margin-bottom:14px}
.two-col p{max-width:56ch}

.quiet-line{padding:clamp(34px,4.6vw,116px) 0}
.quiet-line p{margin:0;max-width:24ch;font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,84px);line-height:1.02;letter-spacing:-0.035em}

/* section cards on the homepage */
.picks{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule)}
@media (min-width:640px){.picks-3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:760px){.picks-5{grid-template-columns:repeat(5,1fr)}}
@media (min-width:760px){.picks-5 .pick{padding:14px clamp(12px,1.1vw,26px) 16px}
.picks-5 h3{font-size:clamp(15px,1.05vw,25px)}
.picks-5 p{font-size:.8rem;line-height:1.4}}
.picks-3 .pick{padding:16px var(--gutter) 18px;grid-template-rows:auto auto 1fr auto}
.picks-3 h3{font-size:clamp(17px,1.05vw,23px);margin:8px 0 6px}
.picks-3 p{font-size:.84rem;line-height:1.42}
.picks-3 .pick-foot{padding-top:12px}
@media (min-width:1150px){.picks-5{grid-template-columns:repeat(5,1fr)}}
.pick{background:var(--paper);padding:clamp(20px,1.8vw,38px) var(--gutter);display:grid;grid-template-rows:auto minmax(2.6em,auto) 1fr auto;min-height:100%}
.picks{grid-auto-rows:1fr}
.pick h3{font-size:clamp(19px,1.25vw,27px);margin:12px 0 8px}
.pick h3 a{color:var(--ink)}
.pick h3 a:hover{color:var(--cobalt)}
.pick p{font-size:.9rem;color:#3D382F;margin:0}
.pick .kicker{margin-bottom:2px;align-self:start;background:var(--cobalt);color:var(--paper);padding:5px 9px 4px;font-size:.66rem;letter-spacing:.16em;justify-self:start}
.pick .kicker .icon{color:var(--paper)}
.pick .pick-foot{margin-top:auto;padding-top:16px}

/* ── figures: three treatments, one system ── */
.article-figure{margin:clamp(24px,2.6vw,52px) auto}
.article-figure img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--rule)}
.article-figure figcaption,.map-figure figcaption{
  display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px 22px;justify-content:space-between;align-items:baseline;
  padding-top:10px;margin-top:10px;border-top:1px solid var(--rule);
}
.article-figure figcaption .cap,.map-figure figcaption .cap{flex:1 1 22ch;max-width:70ch;font-size:.92rem;line-height:1.45}
.article-figure figcaption .credit,.map-figure figcaption .credit{
  flex:0 1 auto;font-family:var(--display);font-weight:400;font-size:.72rem;letter-spacing:.04em;color:var(--mute);text-align:right}

/* treatment 2 — mat */
.fig-mat{background:var(--panel);padding:clamp(14px,1.4vw,28px);border:2px solid var(--ink)}
.fig-mat img{border:0}
.fig-mat figcaption{border-top-color:var(--ink)}
/* treatment 3 — plate, portrait, centred at reading width */
.fig-inset{max-width:min(440px,100%);margin:clamp(24px,2.6vw,52px) auto;background:var(--panel);padding:clamp(12px,1.2vw,20px);border:1px solid var(--rule)}
.fig-inset img{aspect-ratio:4/5;border:0}
.fig-inset figcaption{flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;gap:6px;border-top-color:var(--ink)}
.fig-inset figcaption .cap{flex:0 0 auto}
.fig-inset figcaption .credit{text-align:left}
/* treatment 4 — full bleed band */
.fig-bleed img{aspect-ratio:24/9;border:0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.fig-bleed figcaption{width:min(100% - var(--gutter)*2,var(--wide));margin-inline:auto;border-top:0}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(12px,1.4vw,26px);margin:clamp(24px,2.6vw,52px) auto}
.gallery img{aspect-ratio:1/1;object-fit:cover;border:1px solid var(--rule)}
.gallery figcaption{padding-top:8px;font-size:.82rem;line-height:1.4;color:#3D382F}

.map-figure{margin:0}
.map-figure .map-slot{border:2px solid var(--ink);background:var(--panel)}
.map-figure svg{display:block;width:100%;height:auto}

/* ── article layout: three widths ─────────── */
.article-head{padding:clamp(28px,3.4vw,86px) 0 clamp(20px,2.2vw,44px);border-bottom:1px solid var(--rule)}
article .wrap{width:min(100% - var(--gutter)*2, 1120px)}
.article-head{padding-inline:0}
.article-head{display:grid;grid-template-columns:minmax(0,1fr) min(var(--measure),100%) minmax(0,1fr)}
.article-head > *{grid-column:2;max-width:100%;margin-inline:0}
.article-head h1{grid-column:2/4}
.article-head .article-meta{margin-left:0;margin-right:0}
@media (min-width:1600px){article .wrap{width:min(100% - var(--gutter)*2, 1240px)}}
.article-head h1{font-size:clamp(34px,4.4vw,104px);max-width:var(--measure);line-height:.94;letter-spacing:-0.04em;padding-right:0;text-wrap:balance}
.article-head .lead{margin:20px 0 0;max-width:var(--measure);padding-right:8%;font-size:1.16rem;line-height:1.45;color:#3D382F;font-family:var(--text)}
.article-meta{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;margin-top:22px;font-family:var(--display);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

.prose{padding:clamp(26px,3vw,66px) 0 clamp(30px,3.4vw,80px)}
.prose > *{max-width:var(--measure);margin-inline:auto}
.prose h2{font-size:clamp(23px,1.9vw,40px);font-weight:600;margin:clamp(30px,3vw,60px) auto 14px;max-width:var(--measure);padding-right:22%;text-wrap:balance}
.prose h3{font-size:clamp(19px,1.3vw,27px);margin:28px auto 10px;max-width:var(--measure);padding-right:12%;text-wrap:pretty}
.prose .breakout{max-width:min(100%,calc(var(--measure) + 260px))}
.prose .bleed{max-width:none;width:100vw;margin-left:50%;transform:translateX(-50vw)}
.prose .hang{max-width:min(100%,calc(var(--measure) + 100px))}
.prose ul,.prose ol{padding-left:1.3em;margin:0 auto 1.1em}
.prose li{margin:0 0 .4em}
.prose a{border-bottom:1px solid rgba(27,63,196,.35)}

/* ── components ───────────────────────────── */
.lead{font-size:1.16rem;line-height:1.45;color:#3D382F}
.pullquote{margin:clamp(26px,3vw,58px) auto;padding:0;border:0}
.pullquote p{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(22px,1.9vw,40px);line-height:1.12;letter-spacing:-0.025em;color:var(--cobalt);max-width:26ch}
.blockquote{margin:clamp(22px,2.4vw,46px) auto;padding-left:clamp(16px,1.6vw,30px);border-left:3px solid var(--ochre)}
.blockquote p{margin:0 0 .5em;font-size:1.05rem}
.blockquote cite{font-family:var(--display);font-style:normal;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.callout{background:var(--panel);border:2px solid var(--ink);padding:clamp(16px,1.6vw,30px);margin:clamp(22px,2.4vw,46px) auto}
.callout p:last-child{margin:0}
.callout .kicker{margin-bottom:10px}
.note{font-size:.9rem;color:var(--mute);border-top:1px solid var(--rule);padding-top:10px}

.prose aside.hang{background:var(--panel);padding:clamp(20px,2.2vw,40px) clamp(20px,2.2vw,40px) clamp(14px,1.6vw,28px);margin:clamp(26px,3vw,56px) auto}
.prose aside > .kicker{font-size:1.15rem;font-weight:800;letter-spacing:-0.01em;text-transform:none;line-height:1.15;color:var(--ink);gap:.4em;margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid var(--cobalt);align-items:baseline}
@media (min-width:1200px){.prose aside > .kicker{font-size:1.3rem}}
.prose .callout{padding:clamp(20px,2.2vw,40px)}
.prose .callout > .kicker{border-bottom-color:var(--ink)}

.versus,.datatable{margin:clamp(22px,2.4vw,46px) auto;font-size:.94rem}
.versus th,.datatable th{font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);text-align:left;padding:0 14px 10px 0;border-bottom:2px solid var(--ink);vertical-align:bottom}
.versus td,.datatable td{padding:11px 14px 11px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.versus tr td:first-child{font-family:var(--display);font-weight:600;letter-spacing:-0.01em}
.datatable tbody tr:nth-child(even){background:rgba(201,192,172,.22)}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin:clamp(22px,2.4vw,46px) auto}
.statblock{background:var(--paper);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--display);font-weight:800;font-size:clamp(28px,2.4vw,50px);line-height:.9;letter-spacing:-0.03em;color:var(--cobalt)}
.stat-label{font-size:.82rem;line-height:1.35;color:#3D382F}

.timeline{list-style:none;margin:clamp(22px,2.4vw,46px) auto;padding:0}
.timeline li{display:grid;grid-template-columns:1fr;gap:4px 26px;padding:16px 0;border-top:1px solid var(--rule)}
@media (min-width:700px){.timeline li{grid-template-columns:minmax(9ch,22ch) 1fr}}
.timeline li:last-child{border-bottom:1px solid var(--rule)}
.prose aside.hang .timeline{margin:0}
.prose aside.hang .timeline li:first-child{border-top:0;padding-top:4px}
.prose aside.hang .timeline li:last-child{border-bottom:0;padding-bottom:4px}
.t-when{font-family:var(--display);font-weight:600;font-size:.94rem;letter-spacing:.01em;color:var(--cobalt);text-wrap:balance}
.t-what{font-size:1rem;line-height:1.5}

.chart{margin:clamp(22px,2.4vw,46px) 0}
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{margin-top:10px;padding-top:8px;border-top:1px solid var(--rule);font-size:.86rem;color:#3D382F}
.chart .bar-label{font-family:var(--display);font-size:11px;fill:var(--ink)}
.chart .bar-value{font-family:var(--display);font-size:11px;font-weight:600;fill:var(--mute)}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(14px,1.4vw,26px);margin:clamp(22px,2.4vw,46px) 0}
.profile-card{border:1px solid var(--rule);background:var(--panel);padding:16px;display:flex;flex-direction:column;gap:8px}
.profile-card .p-photo{aspect-ratio:1/1;object-fit:cover;width:100%}
.profile-card h3{font-size:1.05rem}
.profile-card .p-role{font-family:var(--display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt);margin:0}
.profile-card p{font-size:.88rem;margin:0}
.profile-card .p-links{margin-top:auto}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:clamp(22px,2.4vw,46px) 0}
.org-card{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;gap:2px 12px;align-items:center;
  border:1px solid var(--rule);background:var(--paper);padding:12px 14px}
.org-card:hover{border-color:var(--cobalt)}
.org-logo{grid-row:1/3;width:44px;height:44px;object-fit:contain}
.org-card .org-logo-mark{grid-row:1/3;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--rule);color:var(--cobalt)}
.org-name{font-family:var(--display);font-weight:600;font-size:.94rem;color:var(--ink);align-self:end}
.org-host{font-size:.76rem;color:var(--mute);align-self:start}
.entity-ref{white-space:nowrap;border-bottom:1px solid rgba(27,63,196,.35)}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin:clamp(22px,2.4vw,46px) 0}
.further-grid a{background:var(--paper);padding:16px 18px;color:var(--ink);font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.2;letter-spacing:-0.015em;display:flex;align-items:flex-start;gap:.55em}
.further-grid a:hover{background:var(--panel);color:var(--cobalt)}

.related-links{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.related-links a{font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:-0.015em}

.cat-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.cat-list li{border-bottom:1px solid var(--rule)}
.cat-list a{display:grid;grid-template-columns:1fr;gap:4px 30px;padding:16px 0;color:var(--ink)}
@media (min-width:820px){.cat-list a{grid-template-columns:minmax(0,34ch) minmax(0,1fr);align-items:baseline}}
.cat-list a:hover .cl-title{color:var(--cobalt)}
.cl-title{font-family:var(--display);font-weight:600;font-size:clamp(18px,1.2vw,26px);letter-spacing:-0.02em}
.cl-brief{font-size:.92rem;color:#3D382F}

/* ── supporters strip ─────────────────────── */
.supporters{border-top:2px solid var(--ink);padding:clamp(24px,2.6vw,56px) 0 clamp(20px,2.2vw,40px)}
.sup-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;margin-bottom:20px}
.sup-head h2{font-size:clamp(19px,1.3vw,28px);font-weight:600}
.sup-head p{margin:0;font-size:.86rem;color:var(--mute)}
.sup-tier{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:16px}
@media (min-width:760px){.sup-tier-2{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sup-tier-2 .sponsor-name{font-size:.84rem}}
.sup-tier-label{font-family:var(--display);font-weight:600;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin:18px 0 10px}
.sponsor{min-width:0;display:block;color:var(--ink);border:1px solid var(--rule);padding:12px}
.sponsor:hover{border-color:var(--cobalt)}
.sponsor img{width:100%;height:46px;max-height:46px;object-fit:contain;background:var(--dark);padding:8px 12px}
.sponsor-name{display:block;font-family:var(--display);font-weight:600;font-size:.9rem;letter-spacing:-0.01em;margin-top:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sponsor-blurb{display:block;font-size:.82rem;line-height:1.4;color:#3D382F;margin-top:4px;min-width:200px}
@media (max-width:400px){.sup-tier{grid-template-columns:1fr}}

/* ── footer ───────────────────────────────── */
.foot{border-top:2px solid var(--ink);padding:clamp(18px,1.8vw,34px) 0 clamp(20px,2vw,40px)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px clamp(20px,2.4vw,54px);align-items:start}
.foot p{font-size:.8rem;line-height:1.45;color:#3D382F;max-width:42ch;margin:8px 0 0}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 20px;font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase}
.foot a{color:var(--ink)}
.foot a:hover{color:var(--cobalt)}
.foot-mark{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:.95rem;letter-spacing:-0.03em}

/* caption laid over a bleed image */
.fig-over{position:relative;margin:0}
.fig-over img{aspect-ratio:24/9;border:0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.fig-over figcaption{position:absolute;left:0;right:0;bottom:2px;margin:0;border-top:0;padding:clamp(12px,1.4vw,22px) var(--gutter);
  background:rgba(20,24,31,.9);color:var(--paper);
  display:flex;flex-wrap:wrap;gap:2px 24px;justify-content:space-between;align-items:baseline}
.fig-over figcaption .cap{flex:1 1 24ch;max-width:64ch;font-size:.88rem;line-height:1.4;color:var(--paper)}
.fig-over figcaption .credit{font-size:.7rem;color:var(--paper);opacity:1}
.over-line{position:absolute;left:0;right:0;top:0;padding:clamp(18px,2.4vw,54px) var(--gutter) clamp(40px,5vw,110px);color:var(--paper);
  font-family:var(--display);font-weight:800;font-size:clamp(26px,3.2vw,74px);line-height:1.0;letter-spacing:-0.035em;
  background:linear-gradient(to bottom,rgba(20,24,31,.72),rgba(20,24,31,0));margin:0}
.over-line span{display:block;max-width:22ch}

.map-legend{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.78rem;color:#3D382F}
.map-legend li{display:flex;align-items:center;gap:8px}
.map-legend .swatch{width:14px;height:14px;flex:none;border:1.5px solid var(--ink);border-radius:50%;background:var(--cobalt)}
.map-legend .swatch.box{border-radius:0;background:transparent;border-color:var(--cobalt);border-width:2px}
.map-legend .swatch.land{border-radius:0;background:var(--panel)}
.map-legend .swatch.sea{border-radius:0;background:#D6E0DE}
.map-legend .swatch.route{border-radius:0;border:0;height:0;border-top:2px dotted var(--ink);width:20px}
.map-head{display:grid;grid-template-columns:1fr;gap:10px clamp(24px,3vw,70px);align-items:end;margin-bottom:clamp(16px,1.8vw,32px)}
@media (min-width:820px){.map-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.map-head h2{font-size:clamp(24px,2.4vw,50px);letter-spacing:-0.03em;margin-top:10px}
.map-head p{margin:0;font-size:.96rem;color:#3D382F;max-width:62ch}
.map-detail{position:relative;aspect-ratio:236/66;width:100%}
.map-detail > svg{position:absolute;inset:0}
.mk{position:absolute;display:flex;align-items:center;gap:6px;transform:translate(-50%,-50%);z-index:2}
.mk-dot{width:20px;height:20px;flex:none;border-radius:50%;background:var(--cobalt);border:2px solid var(--ink);color:var(--paper);
  font-family:var(--display);font-weight:800;font-size:11px;line-height:1;display:grid;place-items:center}
.mk-lab{display:none}
.mk-name{font-weight:800;font-size:13px;letter-spacing:-0.01em;color:var(--ink)}
.mk-el{font-weight:600;font-size:11.5px;color:var(--cobalt)}
.mk-w{flex-direction:row-reverse}
.mk-w .mk-lab{text-align:right}
.mk-n{flex-direction:column-reverse;gap:3px}
.mk-s{flex-direction:column;gap:3px}
.mk-n .mk-lab,.mk-s .mk-lab{text-align:center;justify-items:center}
.map-scale{position:absolute;left:12px;bottom:12px;z-index:2;display:grid;gap:3px;justify-items:center}
.map-scale .msb{display:block;width:100%;height:8px;border:2px solid var(--ink);border-top:0}
.map-scale .msl{font-family:var(--display);font-weight:600;font-size:11px;color:var(--ink)}
.map-key{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px 24px}
.map-key li{display:flex;align-items:center;gap:9px;font-size:.86rem;font-family:var(--display);font-weight:600;letter-spacing:-0.01em;border-bottom:1px solid var(--rule);padding-bottom:7px}
.map-key b{flex:none;width:19px;height:19px;border-radius:50%;background:var(--cobalt);color:var(--paper);border:2px solid var(--ink);
  font-family:var(--display);font-size:11px;display:grid;place-items:center;align-self:center}
.map-key em{font-style:normal;font-family:var(--display);font-weight:800;font-size:.86rem;color:var(--cobalt);margin-left:auto;font-variant-numeric:tabular-nums}
@media (max-width:699px){.map-detail{aspect-ratio:236/110}.map-key{grid-template-columns:1fr}
  .mk-dot{width:15px;height:15px;font-size:9.5px;border-width:1.5px;box-shadow:0 0 0 1.5px var(--paper)}
  .mk:nth-child(3){z-index:3}.mk:nth-child(4){z-index:4}.mk:nth-child(5){z-index:5}}
.map-north{position:absolute;right:12px;top:12px;z-index:2;background:var(--paper);border:1px solid var(--ink);padding:4px 6px 2px;display:grid;place-items:center}
.map-where{position:absolute;left:12px;top:12px;z-index:2;background:var(--paper);border:1px solid var(--ink);padding:7px 10px;display:grid;gap:2px;max-width:min(46ch,58%)}
.map-where b{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:-0.01em;color:var(--ink)}
.map-where span{font-size:11.5px;line-height:1.35;color:#4A4437}
.map-loc-lab{display:block;font-family:var(--display);font-weight:800;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;text-align:center;color:var(--ink);margin-top:3px}
@media (max-width:619px){.map-where span{display:none}.map-where{max-width:64%}.map-north{padding:3px 4px 1px}}
.map-loc{position:absolute;right:10px;bottom:10px;width:11%;min-width:52px;max-width:80px;border:1.5px solid var(--ink);background:#D6E0DE;padding:4px;z-index:2}
@media (max-width:619px){
  .more{padding:12px 0;min-height:44px;display:inline-flex;align-items:center}
  .altitudes .alt-num,.altitudes .alt-num.on{font-size:30px}
  .fig-over figcaption .cap{font-size:.8rem}
  .fig-over figcaption .credit{font-size:.68rem}
  .article-figure figcaption .credit,.map-figure figcaption .credit{font-size:.7rem}
  .kicker{font-size:.68rem}
  .map-legend{font-size:.74rem}
  .over-line{padding-bottom:70px}
}

/* ── misc pages ───────────────────────────── */
.page-head{padding:clamp(28px,3.4vw,86px) 0 clamp(18px,2vw,40px);border-bottom:1px solid var(--rule)}
.page-head h1{font-size:clamp(32px,4vw,92px);max-width:18ch}
.page-head p{margin:18px 0 0;max-width:62ch;font-size:1.1rem;color:#3D382F}
.sg-block{padding:clamp(22px,2.4vw,50px) 0;border-bottom:1px solid var(--rule)}
.sg-block > h2{font-size:1.3rem;margin-bottom:6px}
.sg-note{font-size:.8rem;color:var(--mute);margin-bottom:18px;font-family:var(--display);letter-spacing:.06em}
.narrow{max-width:var(--measure)}

/* 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}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
.sup-head{flex-wrap:wrap!important}
.sup-head > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-blurb-stack: a slot holding BOTH a mark and our copy stacks them —
   a fixed-height row clips the mark once the copy is un-hidden. */
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)){flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;height:auto!important;min-height:0!important;overflow:visible!important;gap:8px}
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)) > img{align-self:flex-start}

/* 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-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
.sponsor.sponsor{justify-content:center!important}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}
/* the mobile un-clamp is retired: the operator asked for "2-3 rows max" on phones, which is
   what the desktop rule above already does — so mobile simply keeps it. */
@media (max-width:640px){.sponsor.sponsor .sponsor-blurb{-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!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-plate-pad: more padding around the mark on its dark plate (operator).
   box-sizing is border-box here, so padding eats the height: 8px->16px would have taken the
   artwork from 46px down to 30px. The plate grows by twice the added padding instead, leaving
   the mark its full 46px and simply giving it more ground around it. */
.sponsor img{padding:16px 20px!important;height:62px!important;max-height:62px!important}


/* op-nav-collapse: this nav printed 177px of stacked links at 390 before any content
   (12 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-pill", bold, 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 (20px) 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 "max-height" technique and marked with the "plus" icon — the mechanism
   is deliberately not identical across the fleet either. */
.nav-disclose{display:none}
@media (max-width:860px){
  .nav-disclose{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:700;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:1.5px solid currentColor;border-radius:999px;padding:10px 22px;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .nav-disclose-bars{width:11px;height:11px;flex:none;position:relative;border-top:1.5px solid currentColor;margin-top:-1px;box-shadow:inset 5px 0 0 -3.75px currentColor}
  .mast-nav{max-height:0;overflow:hidden;padding-block:0;border-top-width:0;border-bottom-width:0;transition:max-height .28s ease}
  .nav-disclose-c:checked ~ .mast-nav{max-height:220vh;padding-block:revert;border-top-width:revert;border-bottom-width:revert}
  .masthead:has(> .nav-disclose){display:flow-root}
  .nav-disclose:not(:has(~ .mast-nav)){display:none}
}

/* op-overflow-pushed: div overhung the viewport by 57px at 320 on
   index.html — width 135px reaching x=377, white-space:normal,
   min-width:auto, inside div.altitudes (grid/nowrap,
   tracks 222.477px 134.945px). Closed at the element that causes it, phone
   widths only. */
@media (max-width:640px){
  .altitudes{min-width:0}
  .altitudes div{min-width:0;max-width:100%}
}

/* op-money-columns: the supporters block ran one tile per row — 7 tiles,
   1205px at 390, 17% of the whole page. Two columns bring it to
   930px (23% shorter). Checked before writing: no new overflow, smallest mark still
   139px wide, longest blurb 4 lines, tile heights 161-200px.
   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 (.sup-tier, .sup-tier.sup-tier-2), 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){
  .sup-tier{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:16px!important}
    .sup-tier > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup-tier > * *{min-width:0!important;max-width:100%}
    .sup-tier img,.sup-tier svg{max-width:100%;height:auto}
  .sup-tier.sup-tier-2{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:16px!important}
    .sup-tier.sup-tier-2 > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup-tier.sup-tier-2 > * *{min-width:0!important;max-width:100%}
    .sup-tier.sup-tier-2 img,.sup-tier.sup-tier-2 svg{max-width:100%;height:auto}
  .sup-tier .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
  .sup-tier.sup-tier-2 .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-odd-tier-lead: .sup-tier (3 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){
  .sup-tier:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-name-wrap: at 320 the money tile truncated its brand name — "Work Me Harder" — losing up to 33px 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}
}

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.breakout.gallery > figure > img){height:auto}
/* op-img-dims:end */

/* op-entity-wrap: long reference links wrap like the text around them (nowrap ran them off phone screens) */
.entity-ref.entity-ref{white-space:normal!important}