/* usispa.org — US Internet Service Providers
   Palette, five members with named jobs:
     --ground  paper the site is printed on
     --ink     type and rules
     --mid     mats, hairlines, quiet furniture
     --accent  the plant: orange, the colour telecom marks its own ground with
     --flag    the record: locate blue, used for the map/BEAD/federal material
   --accent-text is the same orange darkened for 15-17px type on --ground. */
:root{
  --ground:#F3F0EA;
  --ground-2:#EDE9E1;
  --ink:#16181A;
  --ink-2:#26292D;
  --ink-3:#4A4E53;
  --quiet:#75797E;
  --mid:#C9C3B7;
  --mat:#DDD8CE;
  --accent:#FF4D00;
  --accent-text:#A83200;
  --flag:#0F3FC4;
  --display:'Epilogue',system-ui,sans-serif;
  --text:'Familjen Grotesk',system-ui,sans-serif;
  --wrap:1560px;
  --gutter:40px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--text);font-size:18px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--flag);text-decoration:none}
a:hover{color:var(--accent-text)}
::selection{background:var(--accent);color:var(--ground)}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-0.032em;line-height:1.02;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.measure{max-width:68ch}
.kicker{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-text);display:flex;align-items:center;gap:9px}
.kicker--flag{color:var(--flag)}
.icon{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon--lg{width:30px;height:30px;stroke-width:1.6}
.rule-link{font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink);border-bottom:3px solid var(--accent);padding-bottom:2px;display:inline-block}
.rule-link:hover{color:var(--accent-text);border-bottom-color:var(--ink)}
.rule-link--flag{border-bottom-color:var(--flag)}

/* ---------- masthead ---------- */
.masthead{border-bottom:2px solid var(--ink)}
.masthead__top{display:flex;align-items:flex-start;gap:36px;padding-top:24px;padding-bottom:20px;flex-wrap:wrap}
.brand{display:flex;align-items:flex-start;gap:20px;color:var(--ink);flex:1 1 auto}
.brand svg{width:70px;flex:none;margin-top:2px;color:var(--accent)}
.brand__name{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.6vw,58px);line-height:0.9;letter-spacing:-0.035em;text-transform:uppercase;display:block}
.brand__line{margin-top:12px;font-size:17px;line-height:1.35;color:var(--ink-3);max-width:44ch}
.masthead__aside{flex:0 0 128px;border-left:1px solid var(--mid);padding-left:16px;font-family:var(--display);font-size:11px;line-height:1.5;letter-spacing:0.14em;text-transform:uppercase;color:var(--quiet)}
.masthead--inner .brand svg{width:44px}
.masthead--inner .brand__name{font-size:clamp(21px,2.1vw,32px)}
.masthead--inner .masthead__top{align-items:center;padding-bottom:16px}

/* section nav: unequal groups, second level always visible, no dropdown */
.sectionnav{border-top:1px solid var(--mid);background:var(--ground-2)}
.sectionnav__grid{display:grid;grid-template-columns:1.45fr 1.5fr 1.1fr 1.15fr 0.95fr;gap:32px;padding-top:20px;padding-bottom:26px}
.navgroup__head{display:flex;align-items:flex-start;gap:9px;padding-bottom:8px;border-bottom:2px solid var(--accent);font-family:var(--display);font-weight:600;font-size:14.5px;line-height:1.16;letter-spacing:-0.012em;color:var(--ink)}
.navgroup__head .icon{margin-top:1px;color:var(--accent-text)}
.navgroup--flag .navgroup__head{border-bottom-color:var(--flag)}
.navgroup--flag .navgroup__head .icon{color:var(--flag)}
.navgroup ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:15.5px;line-height:1.28}
.navgroup a{color:var(--ink-2)}
.navgroup a:hover{color:var(--accent-text)}
.navbar{display:flex;flex-wrap:wrap;gap:14px 24px;font-size:15.5px;padding-bottom:4px}
.navbar a{color:var(--ink-2)}
.navbar__here{font-family:var(--display);font-weight:600;color:var(--ink);border-bottom:3px solid var(--flag);padding-bottom:2px}

/* ---------- bands ---------- */
.band{padding-block:64px}
.band--tight{padding-block:44px}
.band--rule{border-top:2px solid var(--ink)}
.band--quiet{background:var(--ground-2);border-block:2px solid var(--ink)}
.band--ink{background:var(--ink);color:var(--ground)}
.band--ink h2,.band--ink h3{color:var(--ground)}
.band--ink p{color:#C9C3B7}
.band--ink .rule-link{color:var(--ground)}
.band--flag{background:var(--flag);color:var(--ground)}
.band--flag h2,.band--flag h3,.band--flag p{color:var(--ground)}
.band--flag .kicker{color:#BFD0FF}
.band--flag .rule-link{color:var(--ground);border-bottom-color:var(--ground)}
.band--accent{background:var(--accent);color:var(--ink)}
.band--accent .kicker{color:var(--ink)}
.band--accent .rule-link{border-bottom-color:var(--ink)}
.band__head{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;flex-wrap:wrap}

.band--flag a{color:var(--ground)}
.band--flag a:hover{color:#BFD0FF}
.band--flag .cat-list{border-top-color:rgba(255,255,255,.5)}
.band--flag .cat-list li{border-bottom-color:rgba(255,255,255,.32)}
.band--flag .cat-list a{color:var(--ground)}
.band--flag .cat-list .cl-brief{color:#C9D4FF}
.band--flag .cat-list a:hover .cl-title{color:#BFD0FF}

/* ---------- figures: three treatments ---------- */
figure{margin:0}
figcaption{font-family:var(--display);font-size:18px;font-weight:500;line-height:1.34;letter-spacing:-0.012em;color:var(--ink)}
.fig-credit{display:block;margin-top:7px;font-family:var(--text);font-weight:400;font-size:12.5px;line-height:1.4;letter-spacing:0.04em;text-transform:uppercase;color:var(--quiet)}
/* 1 · plate — full-bleed, caption strip beneath */
.fig-plate img{width:100%;aspect-ratio:16/9;object-fit:cover}
.fig-plate figcaption{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:32px;max-width:var(--wrap);margin:0 auto;padding:14px var(--gutter) 0}
.fig-plate .fig-cap-text{max-width:56ch}
.fig-plate .fig-credit{margin-top:0;border-top:1px solid var(--mid);padding-top:8px}
/* 2 · mat — photograph on a mat, hairline frame, orange brackets */
.fig-mat__mat{position:relative;background:var(--mat);border:1px solid var(--mid);padding:13px}
.fig-mat__mat img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-mat__mat::before,.fig-mat__mat::after{content:"";position:absolute;width:30px;height:30px;border:5px solid var(--accent)}
.fig-mat__mat::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.fig-mat__mat::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.fig-mat figcaption{margin-top:14px;border-top:2px solid var(--ink);padding-top:11px;max-width:62ch}
/* 3 · inset — sits in the column, prose wraps beside it */
.fig-inset{width:340px;max-width:44%;float:right;margin:6px 0 22px 34px;border-left:5px solid var(--accent);padding-left:15px}
.fig-inset img{width:100%;aspect-ratio:4/5;object-fit:cover}
.fig-inset figcaption{margin-top:10px;font-size:16px;line-height:1.36;padding-left:0;text-indent:0}
.fig-inset--left{float:left;margin:6px 34px 22px 0;border-left:0;border-right:5px solid var(--accent);padding-left:0;padding-right:15px}
.fig-tall .fig-mat__mat img{aspect-ratio:3/4}

/* ---------- article ---------- */
.article-head{padding-top:52px;max-width:1080px;margin-inline:auto}
.article-head h1{font-size:clamp(36px,4.6vw,74px);line-height:0.94;letter-spacing:-0.038em;margin-top:18px}
.standfirst{margin-top:24px;font-size:clamp(20px,2vw,25px);line-height:1.36;color:var(--ink-2);max-width:52ch;font-weight:500}
.article-meta{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-size:14px;letter-spacing:0.08em;text-transform:uppercase;color:var(--quiet);border-top:1px solid var(--mid);padding:14px 0 40px}
.article-meta strong{font-weight:600;color:var(--ink-2);letter-spacing:0.06em}
.article-body{font-size:19.5px;line-height:1.62;color:var(--ink-2);max-width:34em;margin-inline:auto}
.article-body > p{margin-top:22px}
.article-body > p:first-child{margin-top:0}
.article-body h2{font-size:clamp(25px,2.4vw,34px);line-height:1.06;margin-top:46px;max-width:28ch;color:var(--ink)}
.article-body h2 + p{margin-top:18px}
.article-body a{border-bottom:1px solid rgba(15,63,196,.35)}
.dropcap::first-letter{font-family:var(--display);font-weight:800;font-size:5.1em;line-height:0.76;float:left;margin:6px 13px 0 0;color:var(--accent-text)}
.article-body .fig-mat,.article-body .fig-plate,.article-body .chart,.article-body .timeline,.article-body .datatable-wrap,.article-body .statrow,.article-body .callout,.article-body .pullquote,.article-body .versus{margin-top:40px}
.article-body::after{content:"";display:block;clear:both}
.breakout{max-width:none}

/* ---------- text components ---------- */
.lead{font-size:clamp(20px,2vw,25px);line-height:1.36;color:var(--ink-2);font-weight:500;max-width:52ch}
.pullquote{margin:0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:24px 0}
.pullquote p{font-family:var(--display);font-weight:600;font-size:clamp(23px,2.3vw,33px);line-height:1.18;letter-spacing:-0.026em;max-width:34ch;color:var(--ink)}
.blockquote{margin:0;border-left:5px solid var(--flag);padding-left:22px}
.blockquote p{font-family:var(--display);font-size:22px;line-height:1.3;font-weight:500;color:var(--ink)}
.blockquote cite{display:block;margin-top:10px;font-family:var(--text);font-style:normal;font-size:15px;letter-spacing:0.05em;text-transform:uppercase;color:var(--quiet)}
.callout{background:var(--ground-2);border:1px solid var(--mid);border-left:6px solid var(--accent);padding:22px 24px}
.callout h3,.callout .callout__title{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-text);margin-bottom:14px}
.callout p{font-size:18px;line-height:1.5}
.callout dl{margin:0;display:flex;flex-direction:column;gap:13px}
.callout dt{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.24;color:var(--ink)}
.callout dd{margin:3px 0 0;font-size:17px;line-height:1.44;color:var(--ink-3)}
.note{font-size:16.5px;line-height:1.5;color:var(--ink-3);border-left:3px solid var(--mid);padding-left:14px}

/* data */
table.datatable,table.versus{width:100%;border-collapse:collapse;font-size:17px;font-variant-numeric:tabular-nums}
.datatable caption,.versus caption,.chart figcaption,.timeline-title{caption-side:top;text-align:left;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-text);padding-bottom:12px}
.datatable th,.versus th{text-align:left;font-family:var(--display);font-weight:600;font-size:13.5px;letter-spacing:0.07em;text-transform:uppercase;color:var(--ink-3);border-bottom:2px solid var(--ink);padding:0 14px 9px 0}
.datatable td,.versus td{padding:13px 14px 13px 0;border-bottom:1px solid var(--mid);vertical-align:top;line-height:1.4;color:var(--ink-2)}
.datatable td:first-child,.versus td:first-child{font-family:var(--display);font-weight:600;color:var(--ink);width:34%;min-width:150px}
.versus td:first-child{width:26%}
.versus tbody tr:nth-child(odd) td{background:var(--ground-2)}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2px;background:var(--mid)}
.statblock{background:var(--ground-2);padding:20px 20px 22px;display:flex;flex-direction:column;gap:8px}
.stat-num{font-family:var(--display);font-weight:800;font-size:clamp(34px,3.4vw,50px);line-height:0.92;letter-spacing:-0.035em;color:var(--accent-text)}
.stat-label{font-size:15.5px;line-height:1.36;color:var(--ink-3)}
.timeline{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.timeline li{display:grid;grid-template-columns:190px minmax(0,1fr);gap:26px;padding:14px 0;border-bottom:1px solid var(--mid);align-items:baseline}
.t-when{font-family:var(--display);font-weight:600;font-size:16px;line-height:1.24;letter-spacing:-0.01em;color:var(--accent-text)}
.t-what{font-size:17px;line-height:1.44;color:var(--ink-2)}
.chart{display:block}
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{font-family:var(--display);font-size:16px;font-weight:500;letter-spacing:-0.01em;text-transform:none;color:var(--ink-3);border-top:1px solid var(--mid);padding:11px 0 0;margin-top:12px;max-width:64ch}

/* galleries + cards */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.gallery figure img{aspect-ratio:4/3;object-fit:cover;border:1px solid var(--mid)}
.gallery figcaption{margin-top:9px;font-size:15.5px;line-height:1.34}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.profile-card{background:var(--ground-2);border:1px solid var(--mid);padding:20px;display:flex;flex-direction:column;gap:10px}
.p-photo{width:76px;height:76px;object-fit:cover;border-radius:50%}
.profile-card h3{font-size:21px;letter-spacing:-0.02em}
.p-role{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent-text)}
.profile-card p{font-size:16.5px;line-height:1.46;color:var(--ink-3)}
.p-links{margin-top:auto}
.p-attr{font-size:12.5px;letter-spacing:0.05em;text-transform:uppercase;color:var(--quiet)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.org-card{display:flex;flex-direction:column;gap:5px;border:1px solid var(--mid);background:var(--ground-2);padding:15px 16px;color:var(--ink)}
.org-card:hover{border-color:var(--ink)}
.org-logo{max-height:26px;width:auto;object-fit:contain}
.org-name{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.2}
.org-host{font-size:13.5px;letter-spacing:0.05em;color:var(--quiet)}
.entity-ref{white-space:nowrap}
.further-grid,.related-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px;background:var(--mid)}
.further-grid a,.related-links a{display:flex;flex-direction:column;gap:8px;height:100%;background:var(--ground);padding:18px 20px 20px;color:var(--ink);font-family:var(--display);font-weight:600;font-size:18.5px;line-height:1.2;letter-spacing:-0.018em}
.further-grid a:hover,.related-links a:hover{background:var(--ground-2);color:var(--accent-text)}
.related-links .rl-sec{font-family:var(--text);font-weight:400;font-size:12.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--quiet)}

/* section + archive lists */
.cat-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.cat-list li{border-bottom:1px solid var(--mid)}
.cat-list a{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.25fr);gap:32px;align-items:baseline;padding:20px 0;color:var(--ink)}
.cat-list a:hover{color:var(--accent-text)}
.cat-list .cl-title{font-family:var(--display);font-weight:600;font-size:clamp(20px,1.8vw,25px);line-height:1.14;letter-spacing:-0.024em}
.cat-list .cl-brief{font-size:16.5px;line-height:1.44;color:var(--ink-3)}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2px;background:var(--mid)}
.hub-card{background:var(--ground);padding:22px 24px 26px;display:flex;flex-direction:column;gap:12px}
.hub-card h3{font-size:23px;line-height:1.08;letter-spacing:-0.026em}
.hub-card p{font-size:16.5px;line-height:1.44;color:var(--ink-3)}
.hub-card ul{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:16px;line-height:1.28}

/* lead feature */
.lead-feature{display:grid;grid-template-columns:1fr 1.8fr;gap:52px;align-items:start}
.lead-feature h2{font-size:clamp(32px,3.5vw,55px);line-height:0.98;letter-spacing:-0.036em}
.startpanel{background:var(--accent);color:var(--ink);padding:22px 24px 24px;margin-top:26px}
.startpanel .kicker{color:var(--ink)}
.startpanel p{margin-top:10px;font-size:17.5px;line-height:1.42;max-width:38ch}
.startpanel a{color:var(--ink);border-bottom:3px solid var(--ink);font-family:var(--display);font-weight:600;display:inline-block;margin-top:14px}

/* ---------- supporters ---------- */
.supporters{background:var(--ground-2);border-block:2px solid var(--ink)}
.sponsor-grid{display:grid;grid-template-columns:repeat(auto-fit,236px);gap:14px;justify-content:start;width:100%}
.sponsor{display:flex;flex-direction:column;gap:7px;width:236px;min-height:112px;background:var(--ground);border:1px solid var(--mid);padding:15px 15px 17px;color:var(--ink)}
.sponsor:hover{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.sponsor:hover .sponsor-blurb{color:var(--mid)}
.sponsor img{max-height:44px;max-width:100%;width:auto;height:auto;object-fit:contain}
.sponsor-name{font-family:var(--display);font-weight:600;font-size:17.5px;line-height:1.18;letter-spacing:-0.018em}
.sponsor-blurb{font-size:14.5px;line-height:1.4;color:var(--ink-3)}
.sponsor.feat{border-top:4px solid var(--accent)}
.sponsors-sub{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:0.14em;text-transform:uppercase;color:var(--quiet);margin-bottom:12px}

/* ---------- footer ---------- */
.site-footer{border-top:2px solid var(--ink);background:var(--ground-2)}
.site-footer__in{display:flex;justify-content:space-between;gap:14px 40px;flex-wrap:wrap;align-items:baseline;padding-block:24px 30px}
.site-footer svg{width:44px;flex:none;color:var(--accent)}
.site-footer p{font-family:var(--display);font-weight:600;font-size:16px;line-height:1.34;margin:0}
.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:15px}
.site-footer nav a{color:var(--ink-2)}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .sectionnav__grid{grid-template-columns:1fr 1fr 1fr;gap:26px 30px}
  .lead-feature{grid-template-columns:1fr;gap:32px}
}
@media (max-width:880px){
  :root{--gutter:22px}
  body{font-size:17px}
  .sectionnav__grid{grid-template-columns:1fr 1fr}
  .masthead__aside{display:none}
  .band{padding-block:44px}
  .fig-plate figcaption{grid-template-columns:1fr;gap:12px}
  .fig-inset{float:none;width:auto;max-width:none;margin:26px 0;border-left:0;border-top:5px solid var(--accent);padding:15px 0 0}
  .fig-inset--left{float:none;margin:26px 0;border-right:0;border-top:5px solid var(--accent);padding:15px 0 0}
  .fig-inset img{aspect-ratio:16/10}
  .cat-list a{grid-template-columns:1fr;gap:9px}
  .timeline li{grid-template-columns:1fr;gap:4px}
  .article-body{font-size:18.5px}
  .article-head h1{max-width:none}
}
@media (max-width:560px){
  .sectionnav__grid{grid-template-columns:1fr}
  .sponsor-grid{grid-template-columns:1fr;justify-content:stretch;width:auto}
  .sponsor{width:auto}
  .statrow{grid-template-columns:1fr}
  .dropcap::first-letter{font-size:3.9em;margin-right:10px}
}
@media print{
  .sectionnav,.supporters{display:none}
  body{font-size:11pt}
}

/* components used on article pages and in the styleguide */
.article-figure img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--mid)}
.article-figure figcaption{margin-top:12px;border-top:2px solid var(--ink);padding-top:10px;max-width:62ch}
.map-figure .map-slot{aspect-ratio:16/9;background:var(--ground-2);border:1px solid var(--mid)}
.map-figure figcaption{margin-top:12px;border-top:2px solid var(--ink);padding-top:10px;max-width:62ch}
.chart.line svg,.chart.donut svg{background:var(--ground-2)}
.sg-section{border-top:2px solid var(--ink);padding-top:14px;margin-top:52px}
.sg-label{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:0.14em;text-transform:uppercase;color:var(--flag);margin-bottom:18px}
.sg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:32px}
.sponsor--logo{gap:10px}
.sponsor--logo .sponsor-logobox{background:var(--ink);display:flex;align-items:center;justify-content:center;padding:8px 12px;aspect-ratio:4.5/1;width:100%}
.sponsor--logo .sponsor-logobox img{max-height:44px;max-width:100%;width:auto;height:auto;object-fit:contain}
.longlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:16.5px}
.longlist a{color:var(--ink-2)}

/* homepage + section-head grids (kept in CSS so they can stack) */
.lastmile-split{margin-top:34px;display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:start}
.towns-split{display:grid;grid-template-columns:0.78fr 1.22fr;gap:52px;align-items:start}
.cat-head{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start}

@media (max-width:1180px){
  .lastmile-split,.towns-split{grid-template-columns:1fr;gap:34px}
  .cat-head{grid-template-columns:auto minmax(0,1fr);gap:26px 30px}
  .cat-head > p.lead{grid-column:2}
}
@media (max-width:640px){
  .cat-head{grid-template-columns:1fr}
  .cat-head > p.lead{grid-column:1}
}

/* breakouts: wider than the measure, still inside the wrap */
.article-body .breakout{position:relative;left:50%;transform:translateX(-50%);width:min(calc(100vw - 2 * var(--gutter)),1180px);max-width:none}
.article-body .breakout .fig-mat__mat img{aspect-ratio:2/1}
.article-body .breakout .fig-tall .fig-mat__mat img{aspect-ratio:16/10}

/* compact section bar (homepage) */
.secbar{display:flex;flex-wrap:wrap;gap:10px 30px;padding-top:13px;padding-bottom:14px;align-items:center}
.secbar__item{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;font-size:15.5px;letter-spacing:-0.012em;line-height:1.2;color:var(--ink);border-bottom:2px solid transparent;padding-bottom:3px}
.secbar__item .icon{color:var(--accent-text)}
.secbar__item:hover{color:var(--accent-text);border-bottom-color:var(--accent)}
.secbar__item--flag{margin-left:auto;color:var(--flag)}
.secbar__item--flag .icon{color:var(--flag)}
.secbar__item--flag:hover{color:var(--accent-text);border-bottom-color:var(--flag)}
@media (max-width:880px){
  .secbar{gap:9px 22px;font-size:15px}
  .secbar__item--flag{margin-left:0}
}

/* last-miles cards */
.milecards{margin-top:34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2px;background:var(--mid)}
.milecard{background:var(--ground);padding:22px 24px 26px;display:flex;flex-direction:column;gap:11px;color:var(--ink);border-top:4px solid transparent}
.milecard:hover{background:var(--ground-2);border-top-color:var(--accent);color:var(--ink)}
.milecard__no{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:0.12em;color:var(--accent-text)}
.milecard__title{font-family:var(--display);font-weight:700;font-size:clamp(21px,1.9vw,26px);line-height:1.1;letter-spacing:-0.026em}
.milecard__brief{font-size:16.5px;line-height:1.44;color:var(--ink-3);margin-top:auto}

/* statement over the photograph */
.plate-hero{background:var(--ink)}
.plate-hero__frame{position:relative}
.plate-hero__frame > img{width:100%;height:clamp(360px,58vw,660px);object-fit:cover;display:block}
.plate-hero__over{position:absolute;left:0;right:0;bottom:0;padding-bottom:clamp(26px,3.4vw,52px);padding-top:120px;background:linear-gradient(to top,rgba(18,20,22,.94),rgba(18,20,22,.72) 48%,rgba(18,20,22,0))}
.plate-hero__in{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.plate-hero__line{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.6vw,40px);line-height:1.16;letter-spacing:-0.028em;color:#F3F0EA;max-width:42ch}
.plate-hero__link{display:inline-block;margin-top:18px;font-family:var(--display);font-weight:600;font-size:17px;color:#F3F0EA;border-bottom:3px solid var(--accent);padding-bottom:2px}
.plate-hero__link:hover{color:var(--accent);border-bottom-color:#F3F0EA}
.plate-hero__foot{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:32px;padding-top:14px;padding-bottom:4px;background:var(--ground)}
.plate-hero__cap{font-family:var(--display);font-size:18px;font-weight:500;line-height:1.34;letter-spacing:-0.012em;color:var(--ink);max-width:56ch}
.plate-hero__foot .fig-credit{margin-top:0;border-top:1px solid var(--mid);padding-top:8px}

/* the interconnect band, louder */
.band--flag-loud{border-top:10px solid var(--accent);border-bottom:10px solid var(--accent);padding-block:74px}
.band--flag-loud .kicker{color:#FFD9C7;font-size:14px}
.band--flag-loud .cat-list .cl-title{font-weight:700;font-size:clamp(21px,1.9vw,27px)}
@media (max-width:880px){
  .plate-hero__foot{grid-template-columns:1fr;gap:10px}
  .band--flag-loud{padding-block:48px;border-top-width:7px;border-bottom-width:7px}
}

/* featured group: wider constant tile, so the copy fills it */
.sponsor-grid--feat{grid-template-columns:repeat(auto-fit,282px)}
.sponsor.feat{width:282px;min-height:132px;padding:17px 18px 19px}
.sponsor.feat .sponsor-name{font-size:18.5px}
.sponsor.feat .sponsor-blurb{font-size:15px}
@media (max-width:560px){
  .sponsor-grid--feat{grid-template-columns:1fr}
  .sponsor.feat{width:auto}
}

.article-body .pullquote{border-top-width:3px;border-bottom-width:3px}
.article-body .pullquote p{margin-inline:auto;max-width:36ch}
@media (max-width:880px){
  .article-head{max-width:none}
}

.article-body .breakout{margin-top:46px}
.article-body .breakout + h2{margin-top:52px}

.article-body .breakout{clear:both}
@media (max-width:640px){
  .datatable-wrap{overflow-x:auto}
}

/* a third figure width: sitting inside the reading measure */
.article-body .fig-column{margin-top:44px}
.article-body .fig-column .fig-mat__mat{padding:10px}
.article-body .fig-column .fig-mat__mat img{aspect-ratio:4/3}
.article-body .fig-column .fig-mat__mat::before,.article-body .fig-column .fig-mat__mat::after{width:22px;height:22px;border-width:4px}

/* the chronology block: a plate of its own, not a run of text */
.article-body .timeline{border-top:0;background:var(--ink);padding:6px 26px 10px;border-left:8px solid var(--accent)}
.article-body .timeline li{border-bottom:1px solid rgba(201,195,183,.28);padding:15px 0;grid-template-columns:150px minmax(0,1fr);gap:24px}
.article-body .timeline li:last-child{border-bottom:0}
.article-body .timeline .t-when{color:var(--accent);font-size:17px;letter-spacing:0.02em}
.article-body .timeline .t-what{color:#E5E1D8}
.article-body .breakout > .timeline-title{background:var(--accent);color:var(--ink);display:inline-block;padding:7px 14px 8px;margin:0;letter-spacing:0.16em;font-size:13px}
.article-body .breakout > .timeline-title + .timeline{margin-top:0}
@media (max-width:880px){
  .article-body .timeline{padding:4px 18px 8px;border-left-width:6px}
  .article-body .timeline li{grid-template-columns:1fr;gap:5px}
}

/* definition tables: a panel in their own right, keyed to the record blue */
.article-body .breakout.datatable-wrap{background:var(--ground-2);border:1px solid var(--mid);border-left:8px solid var(--flag);padding:20px 26px 22px;margin-bottom:10px}
.article-body .datatable caption{display:block;width:fit-content;text-align:left;background:var(--flag);color:#F3F0EA;padding:6px 13px 7px;margin:0 0 16px;font-size:13px;letter-spacing:0.16em}
.article-body .datatable td{border-bottom-color:rgba(22,24,26,.16);padding:14px 16px 14px 0}
.article-body .datatable td:first-child{width:32%;min-width:150px}
.article-body .datatable tr:last-child td{border-bottom:0;padding-bottom:0}
.article-body .statrow{border:1px solid var(--mid)}
@media (max-width:880px){
  .article-body .breakout.datatable-wrap{padding:16px 18px 18px;border-left-width:6px}
}

/* ---------- responsive sweep: 1280 / 1024 / 768 / 560 / 380 ---------- */
@media (max-width:1280px){
  :root{--gutter:32px}
}
@media (max-width:1024px){
  .secbar{gap:9px 20px}
  .secbar__item{font-size:14.5px}
  .milecards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .plate-hero__line{font-size:clamp(20px,3.1vw,30px)}
}
@media (max-width:768px){
  :root{--gutter:20px}
  body{font-size:16.5px}
  .brand svg{width:52px}
  .brand__line{font-size:15.5px}
  .band{padding-block:38px}
  .band--tight{padding-block:30px}
  .band__head{gap:18px}
  .lead-feature h2{font-size:clamp(27px,6.4vw,38px)}
  .startpanel{padding:18px 18px 20px}
  .fig-mat__mat{padding:9px}
  .fig-mat__mat::before,.fig-mat__mat::after{width:22px;height:22px;border-width:4px}
  .article-head h1{font-size:clamp(30px,7.4vw,46px)}
  .standfirst{font-size:19px}
  .article-body{font-size:17.5px;line-height:1.58}
  .article-meta{font-size:12.5px;gap:8px 16px;padding-bottom:28px}
  .article-body h2{font-size:clamp(22px,5.2vw,28px);margin-top:36px}
  .dropcap::first-letter{font-size:3.6em;margin:5px 10px 0 0}
  .article-body .breakout{margin-top:34px}
  .statrow{grid-template-columns:1fr 1fr}
  .stat-num{font-size:clamp(28px,7vw,38px)}
  .pullquote p{font-size:clamp(20px,5vw,26px)}
  .callout{padding:18px 18px}
  .further-grid a,.related-links a{font-size:17px;padding:15px 16px 17px}
  .hub-card{padding:18px 18px 22px}
  .plate-hero > img{height:clamp(260px,62vw,420px)}
  .plate-hero__over{padding-top:80px}
  .site-footer__in{padding-block:20px 26px}
}
@media (max-width:560px){
  .brand svg{width:44px}
  .brand__name{font-size:23px}
  .masthead--inner .brand__name{font-size:19px}
  .navbar{gap:8px 16px;font-size:14.5px}
  .secbar{gap:8px 16px}
  .secbar__item{font-size:14px;gap:7px}
  .secbar__item .icon{width:17px;height:17px}
  .milecards{grid-template-columns:1fr}
  .datatable td:first-child,.versus td:first-child{width:auto;min-width:0}
  .article-body .datatable td:first-child{width:auto;min-width:0}
  .article-body .datatable td,.datatable td{display:block;border-bottom:0;padding:0}
  .article-body .datatable tr,.datatable tr{display:block;padding:12px 0;border-bottom:1px solid rgba(22,24,26,.16)}
  .article-body .datatable td:first-child,.datatable td:first-child{margin-bottom:4px}
  .datatable th{display:none}
  .versus{display:block;overflow-x:auto;white-space:normal}
  .gallery{grid-template-columns:1fr}
  .profile-grid,.org-grid{grid-template-columns:1fr}
  .fig-plate img{aspect-ratio:4/3}
  .fig-column .fig-mat__mat img{aspect-ratio:4/3}
  .article-body .breakout .fig-mat__mat img{aspect-ratio:4/3}
  .timeline li{grid-template-columns:1fr}
  .article-body .timeline li{grid-template-columns:1fr;gap:4px}
}
@media (max-width:380px){
  :root{--gutter:16px}
  .brand__name{font-size:21px}
  .statrow{grid-template-columns:1fr}
  .article-head h1{font-size:27px}
  .article-body{font-size:17px}
}

@media (max-width:560px){
  .sg-grid{grid-template-columns:1fr}
  .sponsor{width:auto}
  .sponsor-grid,.sponsor-grid--feat{grid-template-columns:1fr;width:auto}
}

/* breakouts keep their extra width down to the point where the measure fills the screen */
@media (max-width:880px){
  .article-body .breakout{left:50%;transform:translateX(-50%);width:min(calc(100vw - 2 * var(--gutter)),100vw)}
}
@media (max-width:640px){
  .article-body .breakout{left:auto;transform:none;width:100%}
}

/* spectrum diagram: plot in SVG, scale and legend as real text */
.spectrum svg{border:0}
.spectrum__scale{position:relative;height:26px;margin-top:9px;font-family:var(--text);font-size:15px;color:var(--quiet);font-variant-numeric:tabular-nums}
.spectrum__scale span{position:absolute;top:0;white-space:nowrap}
.spectrum__legend{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px 34px}
.spectrum__legend li{display:flex;align-items:flex-start;gap:11px;font-size:16.5px;line-height:1.36;color:var(--ink-2)}
.spectrum__legend strong{font-family:var(--display);font-weight:700;color:var(--ink)}
.sw{flex:none;width:20px;height:20px;margin-top:2px}
.sw--flag{background:var(--flag)}
.sw--accent{background:var(--accent)}
.spectrum figcaption{margin-top:16px}

/* tap targets: navigation links reach 44px on touch widths */
@media (max-width:768px){
  .secbar{gap:0 18px;padding-top:4px;padding-bottom:6px}
  .secbar__item{min-height:44px;padding-bottom:0;align-items:center}
  .navbar{gap:0 18px}
  .navbar a,.navbar__here{min-height:44px;display:flex;align-items:center}
  .site-footer nav{gap:0 20px}
  .site-footer nav a{min-height:44px;display:flex;align-items:center}
  .navgroup a,.cat-list a,.milecard,.related-links a,.further-grid a{min-height:44px}
  .spectrum__legend{grid-template-columns:1fr;gap:8px}
  .spectrum__scale{font-size:14px}
}
/* the statement must not swallow its photograph on a phone */
@media (max-width:560px){
  .plate-hero > img,.plate-hero__frame > img{height:clamp(400px,108vw,520px)}
  .plate-hero__over{padding-top:44px;padding-bottom:20px;background:linear-gradient(to top,rgba(18,20,22,.95),rgba(18,20,22,.78) 62%,rgba(18,20,22,0))}
  .plate-hero__line{font-size:19px;line-height:1.22}
  .plate-hero__link{margin-top:12px;font-size:15.5px}
}

/* section headings always start below a floated figure */
.article-body h2{clear:both}

/* 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-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-grid.sponsor-grid--feat .feat.sponsor.feat.sponsor img{height:42px!important;background:#121013!important;box-sizing:border-box!important;padding:8px 12px!important}
.sponsor-grid .sponsor.sponsor img{height:38px!important;display:block!important;width:100%!important;background:#121013!important;box-sizing:border-box!important;padding:8px 12px!important}

/* op-fill-and-bigger: operator: all the insertion rows should make use of the width, and the
   bottom logos are small. The tracks were a FIXED repeat(auto-fit,236px) with
   justify-content:start, so the rows stopped short of the band. Fluid tracks of the same count
   fill it, and the roll plate grows from 42 to 58px. */
@media (min-width:900px){
  .sponsor-grid{grid-template-columns:repeat(auto-fit,minmax(236px,1fr));justify-content:stretch}
}
.sponsor-grid .sponsor:not(.feat).sponsor img{height:58px!important;max-height:none!important}

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

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

/* op-article-width: the article column was capped at 663px (81 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 34em (declared in .article-body) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. 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.article-body{max-width:min(836px, 100%)!important}
}
@media (min-width:1600px){
  div.article-body{max-width:min(clamp(836px, 58.056vw, 1003px), 100%)!important}
  div.article-body > :is(p.dropcap, p:not([class])){font-size:clamp(19.5px,1.3542vw,23.4px)!important}
}
/* op-article-width:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 800; letter-spacing: -0.032em; line-height: 1.02; margin: 0px; text-wrap: balance;}
.hub-card h2:where(.rt-h3){font-size: 23px; line-height: 1.08; letter-spacing: -0.026em;}
h1:where(.rt-h2){font-family: var(--display); font-weight: 800; letter-spacing: -0.032em; line-height: 1.02; margin: 0px; text-wrap: balance;}
.lead-feature h1:where(.rt-h2){font-size: clamp(32px, 3.5vw, 55px); line-height: 0.98; letter-spacing: -0.036em;}
@media (max-width: 768px){.lead-feature h1:where(.rt-h2){font-size: clamp(27px, 6.4vw, 38px);}}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article > figure.fig-plate > img,
  div.article-body > figure.fig-inset > img,
  figure.fig-column.fig-mat > div.fig-mat__mat > img,
  figure.fig-mat > div.fig-mat__mat > img,
  figure.fig-mat.fig-tall > div.fig-mat__mat > img,
  main > figure.fig-plate > img,
  section.plate-hero > div.plate-hero__frame > img){height:auto}
/* op-img-dims:end */
@media (min-width:660px) and (max-width:899px){.sponsor-grid.sponsor-grid:has(> [data-partner]){grid-template-columns:repeat(auto-fill,minmax(min(236px,calc(50% - 7px)),1fr))!important;justify-content:stretch!important}.sponsor-grid.sponsor-grid > [data-partner]{width:auto!important;max-width:none!important}}
@media (min-width:900px) and (max-width:1199px){.sponsor-grid--feat.sponsor-grid--feat > .sponsor.feat[data-partner]{width:auto!important;flex:1 1 0!important;min-width:0!important}}

/* 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}
@media (min-width:1200px) and (max-width:1259px){.sponsor-grid--feat.sponsor-grid--feat > .sponsor.feat[data-partner]{width:auto!important;flex:1 1 0!important;min-width:0!important}}