/* DialaRing — Gran Vals direction
   Palette: ground (bone) · ink · accent (mustard) · secondary (navy) · quiet (warm grey) */
:root{
  --ground:#F4F0E8;
  --ground-2:#E2DACB;
  --ink:#16140F;
  --accent:#F2C200;
  --secondary:#1B3E96;
  --secondary-ink:#A8BCEC;
  --quiet:#6E6656;
  --rule:#C9C1B0;

  --prose:68ch;
  --breakout:1080px;
  --page:1240px;
  --body:17px;
  --gap:clamp(18px,2vw,34px);
  --pad:clamp(18px,4vw,56px);

  --display:"Big Shoulders Display",system-ui,sans-serif;
  --text:"Public Sans",system-ui,sans-serif;
}
*{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:var(--body);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
p{text-wrap:pretty}
a{color:var(--secondary);text-decoration:none}
a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:900;line-height:0.92;letter-spacing:-0.01em;margin:0}
.u-mono-num{font-variant-numeric:tabular-nums}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--page);margin-inline:auto;padding-inline:var(--pad)}
.wrap-wide{width:100%;max-width:1600px;margin-inline:auto;padding-inline:var(--pad)}
.prose{max-width:var(--prose)}
.breakout{max-width:var(--breakout)}
.band{padding-block:clamp(38px,4vw,96px)}
.band-tight{padding-block:clamp(24px,2.4vw,52px)}
.band-navy{background:var(--secondary);color:var(--ground)}
.band-navy a{color:var(--accent)}
.band-ink{background:var(--ink);color:var(--ground)}
.band-ink a{color:var(--accent)}
.band-mat{background:var(--ground-2)}

/* ---------- signature rule ---------- */
.sig-rule{display:block;width:100%;height:14px;color:var(--accent);overflow:visible}
.sig-rule line{stroke:currentColor;stroke-width:3}
.divider{margin-block:clamp(26px,2.6vw,58px)}

/* ---------- masthead ---------- */
.masthead{background:var(--ink);color:var(--ground);border-bottom:3px solid var(--accent)}
.masthead-inner{display:grid;grid-template-columns:1fr;gap:12px;align-items:end;padding-block:clamp(14px,1.6vw,28px)}
@media (min-width:900px){.masthead-inner{grid-template-columns:auto 1fr;gap:clamp(24px,4vw,90px)}
  .masthead-inner .tagline{justify-self:end;text-align:right;max-width:34ch}}
.wm-mark{width:clamp(52px,4.6vw,104px);height:auto;color:var(--accent);flex:none;stroke:currentColor;fill:none;stroke-width:2}
.wordmark{display:flex;align-items:center;gap:clamp(10px,1.4vw,26px);text-decoration:none;color:inherit}
.wordmark:hover{text-decoration:none;color:inherit}
.wordmark span{font-family:var(--display);font-weight:900;font-size:clamp(46px,7vw,132px);line-height:0.78;letter-spacing:0.01em;color:var(--ground)}
.wordmark .wm-2{color:var(--accent)}
.wordmark .wm-rule{flex:1 1 40px;min-width:34px}
.tagline{margin:0;color:#B9B2A2;font-size:clamp(13px,1vw,16px);max-width:62ch}

/* ---------- nav ---------- */
.nav{border-top:1px solid #2E2A22}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:clamp(12px,1.8vw,40px)}
.nav a{display:flex;align-items:center;gap:9px;color:var(--ground);font-family:var(--display);
  font-weight:700;font-size:clamp(16px,1.15vw,23px);letter-spacing:0.12em;text-transform:uppercase;
  padding-block:14px;text-decoration:none}
.nav a:hover{color:var(--accent);text-decoration:none}
.nav a[aria-current="page"]{color:var(--accent)}
.ico{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter}
.ico-lg{width:38px;height:38px}
.nav-toggle{position:absolute;width:1px;height:1px;margin:0;opacity:0;clip-path:inset(50%);pointer-events:none}
.nav-toggle-label{display:none}

@media (max-width:760px){
  .nav-toggle-label{display:flex;align-items:center;gap:10px;color:var(--ground);font-family:var(--display);
    font-weight:700;letter-spacing:0.14em;text-transform:uppercase;font-size:16px;padding-block:12px;cursor:pointer}
  .nav-toggle-label .bars{display:block;width:26px;height:2px;background:var(--accent);box-shadow:0 7px 0 var(--accent),0 -7px 0 var(--accent)}
  .nav ul{display:none;flex-direction:column;gap:0}
  .nav ul li{border-top:1px solid #2E2A22}
  .nav-toggle:checked ~ ul{display:flex}
  .wordmark .wm-rule{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:var(--ground)}
.hero img{width:100%;height:clamp(340px,58vh,780px);object-fit:cover;opacity:0.72}
.hero-body{position:absolute;inset:auto 0 0 0;padding:var(--pad);
  background:linear-gradient(to top,rgba(22,20,15,0.92),rgba(22,20,15,0.55) 55%,rgba(22,20,15,0))}
.hero-inner{max-width:1600px;margin-inline:auto}
.kicker{font-family:var(--display);font-weight:700;font-size:clamp(14px,1vw,20px);
  letter-spacing:0.2em;text-transform:uppercase;color:var(--accent);margin:0 0 10px;
  display:flex;align-items:center;gap:10px}
.hero h1{font-size:clamp(38px,5.6vw,124px);max-width:20ch;color:var(--ground)}
.hero p{margin:14px 0 0;max-width:60ch;font-size:clamp(16px,1.15vw,24px);color:#E4DED2}
.hero p.hero-credit{margin-top:12px;font-size:13px;color:#9A9282}

/* ---------- section openers ---------- */
.opener{display:grid;gap:var(--gap);grid-template-columns:1fr}
.opener h2{font-size:clamp(32px,3.6vw,80px);max-width:18ch}
.opener p{margin:14px 0 0;font-size:clamp(16px,1.1vw,22px);max-width:56ch}
.opener .more{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-family:var(--display);
  font-weight:700;letter-spacing:0.14em;text-transform:uppercase;font-size:clamp(14px,0.95vw,19px)}
.opener-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:2px}
.opener-list a{display:block;padding:11px 0;border-top:1px solid var(--rule);font-size:clamp(15px,1vw,20px);color:inherit}
.band-navy .opener-list a{border-top-color:#3A5CB0;color:var(--ground)}
.band-navy .opener-list a:hover{color:var(--accent)}

@media (min-width:900px){
  .opener{grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);align-items:start}
  .opener.rev > *:first-child{order:2}
}

/* ---------- photo runs ---------- */
.run{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1vw,22px)}
.run figure{margin:0;grid-column:span 6}
.run .c2{grid-column:span 2}
.run .c3{grid-column:span 3}
.run .c4{grid-column:span 4}
.run .c6{grid-column:span 6}
.run .c5{grid-column:span 5}
.run .c7{grid-column:span 7}
.run .c8{grid-column:span 8}
.run .c12{grid-column:span 12}
.run img{width:100%;aspect-ratio:16/10;object-fit:cover}
.run .tall img{aspect-ratio:3/4}
.run .wide img{aspect-ratio:21/9}
@media (max-width:760px){
  .run figure,.run .c2,.run .c3,.run .c4,.run .c5,.run .c6,.run .c7,.run .c8{grid-column:span 12}
}

/* ---------- figures: three treatments ---------- */
figure{margin:0}
figcaption{font-size:clamp(14px,0.95vw,17px);line-height:1.45}
.cap-credit{color:var(--quiet);font-size:0.84em}
.band-navy .cap-credit,.fig-bleed .cap-credit{color:var(--secondary-ink)}

/* 1 · full-bleed, matted on navy */
.fig-bleed{background:var(--secondary);color:var(--ground);padding:clamp(14px,1.4vw,30px)}
.fig-bleed img{width:100%;aspect-ratio:2.4/1;object-fit:cover}
.fig-bleed figcaption{margin-top:12px;color:var(--secondary-ink);display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline}
.fig-bleed figcaption .cap-text{flex:1 1 30ch;min-width:0;color:var(--ground)}

/* 2 · offset — image left, caption in a mat box right */
.fig-offset{display:grid;gap:0;grid-template-columns:1fr}
.fig-offset img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-offset figcaption{background:var(--ground-2);padding:clamp(14px,1.2vw,26px);align-self:start}
@media (min-width:900px){
  .fig-offset{grid-template-columns:minmax(0,1.9fr) minmax(220px,0.9fr);align-items:start}
  .fig-offset figcaption{margin-top:clamp(20px,3vw,54px);margin-left:-1px}
}

/* 3 · inline — flush image under a mustard rule */
.fig-inline{border-top:6px solid var(--accent);padding-top:14px}
.fig-inline img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-inline figcaption{margin-top:12px;display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline}
.fig-inline figcaption .cap-text{flex:1 1 28ch;min-width:0}

/* article-figure (styleguide alias) */
.article-figure{border-top:6px solid var(--accent);padding-top:14px}
.article-figure img{width:100%;aspect-ratio:16/10;object-fit:cover}
.article-figure figcaption{margin-top:12px}

/* ---------- article ---------- */
.article-head{padding-block:clamp(26px,3vw,64px)}
.article-head h1{font-size:clamp(36px,4.6vw,104px);max-width:20ch}
.standfirst{font-size:clamp(19px,1.35vw,28px);line-height:1.42;max-width:52ch;margin:18px 0 0;font-weight:400}
.article-meta{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;margin-top:20px;
  font-family:var(--display);font-weight:700;letter-spacing:0.14em;text-transform:uppercase;font-size:14px;color:var(--quiet)}
.article-body{padding-bottom:clamp(40px,4vw,110px)}
.article-body h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,2.2vw,50px);
  margin:clamp(30px,2.6vw,60px) 0 14px;max-width:24ch}
.article-body p{font-size:max(var(--body),clamp(17px,1.18vw,22px));line-height:1.65;margin:0 0 20px;max-width:var(--prose)}
.article-body > figure{margin-block:clamp(28px,2.6vw,60px)}
.pull{border-top:6px solid var(--accent);border-bottom:1px solid var(--rule);
  margin:clamp(28px,2.6vw,58px) 0;padding:22px 0;max-width:var(--breakout)}
.pull p{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.2vw,48px);line-height:1.08;margin:0;max-width:26ch}

/* notes-for-design bands (full-bleed interruptions) */
.notes-band{background:var(--secondary);color:var(--ground);padding-block:clamp(26px,2.6vw,58px);margin-block:clamp(30px,3vw,70px)}
.notes-band h3{font-family:var(--display);font-weight:700;font-size:clamp(17px,1.1vw,24px);
  letter-spacing:0.18em;text-transform:uppercase;color:var(--accent);margin:0 0 18px;display:flex;gap:10px;align-items:center}
.notes-band.alt{background:var(--ink)}

.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:1fr;gap:2px;padding:12px 0;border-top:1px solid rgba(244,240,232,0.25)}
.timeline .t-when{font-family:var(--display);font-weight:700;font-size:clamp(17px,1.2vw,26px);color:var(--accent);letter-spacing:0.02em}
.timeline .t-what{font-size:clamp(15px,1vw,19px);line-height:1.5}
@media (min-width:900px){
  .timeline li{grid-template-columns:minmax(150px,0.22fr) minmax(0,1fr);gap:clamp(16px,2vw,44px);align-items:baseline}
}
.notes-list{list-style:none;margin:0;padding:0;columns:1;gap:clamp(20px,3vw,60px)}
.notes-list li{break-inside:avoid;padding:10px 0;border-top:1px solid rgba(244,240,232,0.25);font-size:clamp(15px,1vw,19px)}
@media (min-width:900px){.notes-list{columns:2}}
@media (min-width:1400px){.notes-list{columns:3}}
.band-mat .timeline li,.band-mat .notes-list li{border-top-color:var(--rule)}

/* ---------- cards / lists ---------- */
.cat-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.cat-list li{border-top:1px solid var(--rule)}
.cat-list a{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 0;color:inherit}
.cat-list a:hover{text-decoration:none;background:rgba(242,194,0,0.14)}
.cat-list .ci-title{font-family:var(--display);font-weight:700;font-size:clamp(20px,1.5vw,31px);line-height:1.04}
.cat-list .ci-dek{font-size:clamp(14px,0.95vw,18px);color:var(--quiet);max-width:80ch}
@media (min-width:1100px){
  .cat-list a{grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);gap:clamp(20px,2.4vw,54px);align-items:baseline}
}
.card-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{display:flex;flex-direction:column;height:100%;color:inherit;border-top:2px solid var(--ink);padding-top:14px}
.card:hover{text-decoration:none}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover;margin-bottom:12px}
.card h3{font-family:var(--display);font-weight:700;font-size:clamp(19px,1.35vw,28px);line-height:1.05;min-height:2.1em}
.card p{font-size:15px;color:var(--quiet);margin:8px 0 0}
.card .card-sec{margin-top:auto;padding-top:12px;font-family:var(--display);font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;font-size:13px;color:var(--secondary);display:flex;gap:8px;align-items:center}
.further-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:20px}
.further-grid a{display:block;border-top:2px solid var(--ink);padding-top:12px;font-family:var(--display);
  font-weight:700;font-size:clamp(18px,1.2vw,26px);line-height:1.06;color:inherit}
.related-links{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:0}
.related-links li{border-top:1px solid var(--rule)}
.related-links a{display:block;padding:12px 0;font-size:clamp(16px,1vw,20px)}

/* ---------- components (styleguide set) ---------- */
.lead{font-size:clamp(19px,1.3vw,26px);line-height:1.45;max-width:52ch}
.pullquote{margin:26px 0;border-top:6px solid var(--accent);padding-top:16px;max-width:var(--breakout)}
.pullquote p{font-family:var(--display);font-weight:700;font-size:clamp(23px,2vw,44px);line-height:1.1;margin:0}
.blockquote{margin:26px 0;padding:18px 22px;background:var(--ground-2);border-left:6px solid var(--secondary);max-width:var(--breakout)}
.blockquote p{margin:0;font-size:clamp(17px,1.1vw,22px)}
.blockquote cite{display:block;margin-top:10px;font-style:normal;font-size:14px;color:var(--quiet)}
.callout{margin:26px 0;padding:20px 22px;background:var(--secondary);color:var(--ground);max-width:var(--breakout)}
.callout p{margin:0;font-size:clamp(16px,1.05vw,21px)}
.note{font-size:15px;color:var(--quiet);border-top:1px solid var(--rule);padding-top:10px;max-width:var(--prose)}
.versus,.datatable{width:100%;border-collapse:collapse;margin:24px 0;max-width:var(--breakout);font-size:clamp(15px,1vw,18px)}
.versus th,.versus td,.datatable th,.datatable td{border-top:1px solid var(--rule);padding:11px 12px 11px 0;text-align:left;vertical-align:top}
.versus th,.datatable th{font-family:var(--display);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;font-size:14px}
.datatable tbody tr:nth-child(even){background:rgba(226,218,203,0.5)}
.table-scroll{overflow-x:auto}
.statrow{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin:26px 0;max-width:var(--breakout)}
.statblock{border-top:2px solid var(--ink);padding-top:12px}
.band-navy .statblock,.band-ink .statblock,.notes-band .statblock{border-top-color:var(--accent)}
.stat-num{display:block;font-family:var(--display);font-weight:900;font-size:clamp(40px,3.4vw,86px);line-height:0.85}
.stat-label{display:block;margin-top:8px;font-size:15px;line-height:1.4}
.chart{margin:26px 0;max-width:var(--breakout)}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{margin-top:10px}
.gallery{display:grid;gap:clamp(10px,1vw,20px);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:26px 0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.profile-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:26px 0}
.profile-card{background:var(--ground-2);padding:18px}
.profile-card .p-photo{width:100%;aspect-ratio:1/1;object-fit:cover;margin-bottom:12px}
.profile-card.no-photo{border-top:6px solid var(--accent);background:transparent;padding:14px 0 0}
.profile-card h3{font-family:var(--display);font-weight:700;font-size:24px}
.profile-card .p-role{font-size:14px;letter-spacing:0.1em;text-transform:uppercase;color:var(--quiet);margin:4px 0 10px}
.profile-card p{font-size:15px;margin:0 0 8px}
.org-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:20px 0}
.org-card{display:flex;align-items:center;gap:12px;border:1px solid var(--rule);padding:12px;color:inherit;background:#fff}
.org-card:hover{text-decoration:none;border-color:var(--ink)}
.org-logo{width:56px;height:32px;object-fit:contain;background:var(--ink)}
.org-name{font-family:var(--display);font-weight:700;font-size:19px;line-height:1}
.org-host{font-size:13px;color:var(--quiet);display:block}
.entity-ref{white-space:nowrap}
details.expander{margin-top:12px}
details.expander summary{cursor:pointer;font-family:var(--display);font-weight:700;letter-spacing:0.14em;
  text-transform:uppercase;font-size:14px;color:var(--secondary)}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#B9B2A2;padding-block:clamp(30px,3vw,70px);margin-top:clamp(30px,3vw,70px)}
.site-footer .foot{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:baseline;justify-content:space-between}
.site-footer .foot-name{font-family:var(--display);font-weight:900;font-size:clamp(26px,2vw,48px);color:var(--ground)}
.site-footer .foot-name em{font-style:normal;color:var(--accent)}
.site-footer p{margin:0;max-width:56ch;font-size:15px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px}
.site-footer a{color:var(--ground);font-size:15px}

/* ---------- large displays: keep responding upward ---------- */
@media (min-width:1400px){
  :root{--page:1400px;--breakout:1260px;--body:18px;--prose:70ch}
  .run{gap:22px}
  .hero img{height:min(72vh,860px)}
  .article-grid{display:grid;grid-template-columns:minmax(0,var(--prose)) minmax(240px,1fr);
    gap:clamp(30px,3.4vw,90px);align-items:start}
  .article-grid .art-aside{position:sticky;top:26px}
}
@media (min-width:2000px){
  :root{--page:1760px;--breakout:1500px;--body:20px;--prose:74ch;--pad:72px}
  .wrap-wide{max-width:2000px}
  .card-grid{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
  .gallery{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
  .sponsor img{width:240px;max-width:240px}
}

/* ---------- article grid: prose left, figures and pulls into the right field ---------- */
.article-grid{display:grid;grid-template-columns:1fr;gap:0}
.article-grid > *{grid-column:1;min-width:0}
.article-grid .col-side{margin-block:clamp(44px,3vw,64px)}
@media (min-width:1100px){
  .article-grid{grid-template-columns:minmax(0,var(--prose)) minmax(260px,0.68fr);
    column-gap:clamp(30px,3.4vw,86px);align-items:start}
  .article-grid > .col-side{grid-column:2;grid-row:1 / span 60;align-self:start;margin-top:6px}
  .article-grid > .pull.col-side{border-bottom:none}
  .article-grid .pull p{font-size:clamp(22px,1.7vw,36px)}
}

/* ---------- picked homepage: lead band ---------- */
.lead-band{position:relative;background:#2A251C;color:var(--ground)}
.lead-band img{width:100%;height:clamp(360px,62vh,880px);object-fit:cover;opacity:0.62}
.lead-band .lead-copy{position:absolute;left:0;right:0;top:clamp(24px,3vw,72px);padding-inline:var(--pad);
  text-shadow:0 2px 18px rgba(22,20,15,0.65), 0 1px 3px rgba(22,20,15,0.5)}
.lead-band .lead-inner{max-width:1600px;margin-inline:auto}
.lead-band h1,.lead-band h2{font-size:clamp(38px,6vw,140px);line-height:0.86;max-width:17ch;color:var(--ground)}
.lead-band h1 a,.lead-band h2 a{color:inherit}
.lead-band h1 a:hover,.lead-band h2 a:hover{color:var(--accent);text-decoration:none}
.lead-band .lead-foot{position:absolute;left:0;right:0;bottom:0;padding:var(--pad);
  background:linear-gradient(to top,rgba(22,20,15,0.94),rgba(22,20,15,0.72) 55%,rgba(22,20,15,0))}
.lead-band .lead-foot p{max-width:1600px;margin:0 auto;font-size:clamp(13px,0.85vw,17px);letter-spacing:0.14em;
  text-transform:uppercase;color:#E4DED2}
/* intro two-column */
.intro{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,90px);align-items:start}
.intro > p{margin:0;font-size:clamp(20px,1.35vw,34px);line-height:1.42;max-width:46ch}
.intro aside{border-top:2px solid var(--ink);padding-top:16px}
.intro aside h2,.intro aside .aside-label{font-family:var(--display);font-weight:700;font-size:clamp(14px,0.95vw,20px);
  letter-spacing:0.18em;text-transform:uppercase;margin:0 0 10px}
.intro aside p{margin:0;font-size:clamp(15px,1vw,20px);line-height:1.6;color:var(--quiet)}
@media (min-width:900px){.intro{grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr)}}
/* band head rule (navy band) */
.band-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-bottom:2px solid var(--accent);padding-bottom:14px;margin-bottom:clamp(22px,2.4vw,50px)}
.band-head h2{font-size:clamp(30px,3.6vw,84px);line-height:0.92}
.band-head a{font-family:var(--display);font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  font-size:clamp(14px,0.95vw,20px)}
.run figcaption{margin-top:10px;font-size:clamp(13px,0.88vw,18px);line-height:1.45}
.band-navy .run figcaption{color:#CBD6F0}
.run .tile{display:block;color:inherit}
.run .tile:hover{text-decoration:none}
.run .tile span{display:block;margin-top:8px;font-family:var(--display);font-weight:700;
  font-size:clamp(13px,0.85vw,17px);line-height:1.1;letter-spacing:0.04em}
.band-navy .run .tile span{color:var(--ground)}
.band-navy .run .tile:hover span{color:var(--accent)}
/* quiet line band */
.quiet-line{border-bottom:2px solid var(--ink);padding-block:clamp(44px,5vw,140px)}
.quiet-line p{margin:0 auto;max-width:min(1500px,58vw);text-align:center;font-family:var(--display);
  font-weight:500;font-size:clamp(26px,3vw,74px);line-height:1.06}
@media (max-width:760px){.quiet-line p{max-width:none;text-align:left}}
/* matted figure (fourth treatment, from the pick) */
.fig-mat{border:2px solid var(--ink);padding:clamp(12px,1vw,26px);background:var(--ground)}
.fig-mat img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-mat figcaption{margin-top:14px;font-size:clamp(14px,0.9vw,19px);line-height:1.45}
/* woven supporter slots */
.support-woven{border-top:2px solid var(--ink);padding-block:clamp(18px,1.6vw,34px)}
.support-woven h2{font-family:var(--display);font-weight:700;font-size:clamp(13px,0.85vw,17px);
  letter-spacing:0.2em;text-transform:uppercase;color:var(--quiet);margin:0 0 10px}
.band-ink .support-woven,.band-navy .support-woven{border-top-color:var(--accent)}
.band-ink .support-woven h2,.band-navy .support-woven h2{color:var(--accent)}
.sponsor-list{display:flex;flex-wrap:wrap;gap:0 clamp(20px,2.4vw,56px)}
.sponsor{display:flex;flex:0 0 220px;flex-direction:column;align-items:flex-start;gap:8px;
  padding:14px 0;border-top:1px solid var(--rule);color:inherit}
.sponsor:hover{text-decoration:none;background:none}
.sponsor img{width:200px;height:44px;max-width:200px;max-height:44px;object-fit:contain;
  background:var(--ink);padding:6px 10px}
.sponsor-body{flex:0 0 auto;width:100%;max-width:220px}
.sponsor-name{display:block;font-family:var(--display);font-weight:700;font-size:18px;line-height:1.1}
.sponsor-blurb{display:block;font-size:13.5px;line-height:1.45;color:var(--quiet);margin-top:4px}
.band-ink .sponsor,.band-navy .sponsor{border-top-color:rgba(244,240,232,0.3)}
.band-ink .sponsor-blurb,.band-navy .sponsor-blurb{color:#C2CFEE}
@media (max-width:520px){.sponsor{flex:0 0 100%}.sponsor img{width:100%;max-width:none}}

@media (min-width:900px){.two-col{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important}}
.band-head h2 .ico{width:0.8em;height:0.8em;vertical-align:baseline;margin-right:0.3em}
h3 .ico{width:0.62em;height:0.62em;margin-right:0.34em;color:var(--secondary)}

/* ---------- run: deliberate three-beat composition ---------- */
.run .half img{aspect-ratio:3/2}
.run .sq img{aspect-ratio:1/1}
.run .pano img{aspect-ratio:24/7}
.run .half{display:grid;grid-template-rows:auto 1fr;align-content:start}
.run .half figcaption{max-width:52ch}
.run .pano figcaption{max-width:64ch}
.run-rule{grid-column:span 12;display:flex;align-items:center;gap:clamp(12px,1.4vw,26px);
  margin-top:clamp(10px,1.2vw,24px);padding-top:clamp(12px,1.2vw,24px);border-top:1px solid currentColor}
.run-rule span{font-family:var(--display);font-weight:700;font-size:clamp(13px,0.88vw,18px);
  letter-spacing:0.2em;text-transform:uppercase;opacity:0.72}
.band-navy .run-rule{border-top-color:var(--accent)}
.band-navy .run-rule span{color:var(--accent);opacity:1}
.run .tile{display:block;color:inherit;background:rgba(0,0,0,0.04)}
.run .tile span{padding:9px 10px 11px;margin-top:0;display:flex;flex-direction:column;gap:3px}
.run .tile span em{font-style:normal;font-weight:400;font-family:var(--text);
  font-size:0.78em;letter-spacing:0.1em;opacity:0.68}
.band-navy .run .tile{background:rgba(255,255,255,0.07)}
.band-navy .run .tile:hover{background:rgba(242,194,0,0.16)}
.run .tile:hover{background:rgba(242,194,0,0.18)}
@media (max-width:760px){
  .run .sq{grid-column:span 6 !important}
  .run .pano img{aspect-ratio:16/9}
}
/* one supporters block, laid out as a single row of six */
.support-solo{border-top:2px solid var(--ink);padding-top:clamp(18px,1.6vw,34px)}
.support-solo h2,.support-solo .rail-label{font-family:var(--display);font-weight:700;font-size:clamp(15px,1vw,21px);
  letter-spacing:0.2em;text-transform:uppercase;margin:0 0 4px}
.support-solo .rail-note{margin:0 0 clamp(16px,1.6vw,30px);font-size:15px;color:var(--quiet)}
.support-solo .sponsor-list{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.6vw,36px)}
@media (max-width:1100px){.support-solo .sponsor-list{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.support-solo .sponsor-list{grid-template-columns:repeat(2,1fr)}}
.support-solo .sponsor{flex:1 1 auto;border-top:1px solid var(--rule);padding-top:12px}

.support-solo .sponsor img{width:100%;max-width:none;height:44px;object-fit:contain;object-position:left center}
.support-solo .sponsor-name{white-space:normal;font-size:17px}
.support-solo .sponsor-blurb{font-size:13px}

/* ---------- A2 · guaranteed separation around every inserted unit ---------- */
.article-body > .notes-band{margin-block:clamp(44px,3.4vw,78px)}
.article-body > .wrap-wide,
.article-body > .wrap:not(.article-grid){margin-block:clamp(44px,3.4vw,78px)}
.article-body > .wrap.band-tight{margin-top:clamp(48px,3.6vw,88px);
  padding-top:clamp(24px,2.4vw,52px);border-top:2px solid var(--ink)}
.article-body > *:last-child{margin-bottom:clamp(44px,3.4vw,78px)}
/* B4 · wide things scroll inside themselves, never the page */
.article-body table{display:block;overflow-x:auto;max-width:100%}

@media (max-width:520px){
  .notes-band{padding-inline:0}
  .notes-band h3{font-size:15px}
  .support-solo .sponsor img{height:40px}
  .fig-bleed{padding:14px}
}

/* notes-band headings use the icon system at full size, in the band's own accent */
.notes-band h3 .ico{width:22px;height:22px;color:var(--accent)}
@media (max-width:520px){.notes-band h3 .ico{width:18px;height:18px}}

/* the end-of-article label is a label, not prose — it takes no prose measure */
.article-body .kicker{max-width:none;line-height:1.15}

/* ---------- end-of-article unit: label rail + three link columns ---------- */
.article-body > .wrap.band-tight{display:grid;grid-template-columns:1fr;gap:clamp(18px,1.8vw,36px)}
.article-body > .wrap.band-tight .kicker{margin:0;font-size:clamp(15px,1vw,20px);letter-spacing:0.2em;
  text-transform:uppercase;color:var(--quiet);align-self:start}
.article-body > .wrap.band-tight .kicker .ico{color:var(--secondary)}
.article-body > .wrap.band-tight .related-links{display:grid;gap:0 clamp(20px,2.4vw,54px);
  grid-template-columns:1fr;align-content:start}
.article-body > .wrap.band-tight .related-links li{border-top:2px solid var(--ink)}
.article-body > .wrap.band-tight .related-links a{display:block;padding:14px 0 18px;color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:clamp(20px,1.5vw,30px);line-height:1.04;text-wrap:pretty}
.article-body > .wrap.band-tight .related-links a:hover{color:var(--secondary);text-decoration:none}
.article-body > .wrap.band-tight .note{grid-column:1/-1;margin:0;border-top:1px solid var(--rule);
  padding-top:12px;max-width:none;font-family:var(--display);font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;font-size:clamp(13px,0.9vw,17px)}
@media (min-width:900px){
  .article-body > .wrap.band-tight{grid-template-columns:minmax(150px,0.22fr) minmax(0,1fr);
    column-gap:clamp(24px,2.6vw,64px)}
  .article-body > .wrap.band-tight .related-links{grid-template-columns:repeat(3,1fr)}
  .article-body > .wrap.band-tight .note{grid-column:2}
}

/* grid children never widen their track past the viewport */
.two-col,.two-col > article,.wrap-wide > *,.run > figure,.article-grid > *{min-width:0}
.two-col > article > *{max-width:100%}

/* wordmark must fit the narrowest phone */
@media (max-width:420px){
  .wordmark{flex-wrap:wrap;gap:0}
  .wordmark span{font-size:clamp(30px,10.5vw,46px)}
}

/* keyboard access to the mobile menu */
.nav-toggle:focus-visible + .nav-toggle-label{outline:2px solid var(--accent);outline-offset:3px}

/* the two band-level headings keep the h3 icon treatment they were styled with */
h2.band-sub .ico{width:0.62em;height:0.62em;margin-right:0.34em;color:var(--secondary)}

.run .c3.sq{grid-column:span 3}
@media (max-width:760px){.run .c3.sq{grid-column:span 6 !important}}

/* 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}
.sponsor-list{flex-wrap:wrap!important}
.sponsor-list > .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{padding:14px 14px!important}
.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}

/* pipeline: one brand treatment per tile — the name reads at the blurb's own size */
.sponsor .sp-brand{font:inherit!important;font-weight:700!important;letter-spacing:inherit!important;text-transform:none!important;color:inherit!important;display:inline!important;}

/* op-hover-pad */
.cat-list a{padding-left:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article > figure.fig-mat > img,
  div > figure.fig-inline > img,
  div.col-side > figure.fig-inline > img,
  div.run > figure.c12.pano > img,
  div.run > figure.c6.half > img,
  div.wrap > figure.fig-inline > img,
  div.wrap-wide > figure.fig-bleed > img,
  div.wrap-wide > figure.fig-offset > img,
  figure.c2.sq > a.tile > img,
  figure.c3.sq > a.tile > img,
  main > section.lead-band > img){height:auto}
/* op-img-dims:end */

/* op-odd-tier-lead: money_slots changed a tier's size — .sponsor-list (7 tiles) now show an ODD count on phones, so the lead tile takes the whole row (operator: "the 1st item in such rows to be 100% width, then split"). Parity-guarded: it steps aside again when the count is even. */
@media (max-width:640px){
  .sponsor-list:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!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}