/* DMA 15 — "The Ledger"
   Palette (each member has one job):
     --ground   #12151A  page ground (ink-dark)
     --ink      #E8E3D7  body ink on ground
     --accent   #C99A2E  amber — the ledger rule, kickers, numerals (saturated, hue ~44)
     --secondary#1B3A6B  postal blue — whole panels and section grounds (saturated, hue ~220)
     --flag     #C96442  rust — alternate section keying, statutory flags (saturated, hue ~15)
   The two/three saturated members sit ~180° and ~30° apart and each carries real area. */

:root{
  --ground:#12151A;
  --ink:#E8E3D7;
  --accent:#C99A2E;
  --secondary:#1B3A6B;
  --flag:#C96442;
  --panel:#191D25;
  --panel-2:#1F242D;
  --quiet:#9AA2AD;
  --quieter:#7D848F;
  /* section keys — amber, rust and postal blue spun into eight legible steps */
  --k-catalogues:#C99A2E;
  --k-rural-routes:#C96442;
  --k-the-coupon:#E0B65A;
  --k-lists-segments:#8FA6C4;
  --k-broadcast:#D98A6A;
  --k-the-telephone:#6E8FC7;
  --k-the-wire:#B8A77E;
  --k-archive:#E8E3D7;
  --line:rgba(232,227,215,.22);
  --line-soft:rgba(232,227,215,.12);

  --display:"Bricolage Grotesque","Public Sans",system-ui,sans-serif;
  --text:"Public Sans",system-ui,-apple-system,sans-serif;

  --prose:62ch;          /* width 1 — prose measure, in ch so it tracks the type */
  --breakout:1000px;     /* width 2 — figures, panels, pulled material */
  --shell:1180px;        /* page shell */
  --body:17px;
  --rail:0px;
  --gut:clamp(18px,4vw,44px);
}

*{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.65;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);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:650;letter-spacing:-.02em;line-height:1.06;margin:0}
p{text-wrap:pretty}
.icon{width:22px;height:22px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter}
.icon-lg{width:30px;height:30px}
.rule-v{width:10px;height:34px;flex:0 0 auto;stroke:currentColor;stroke-width:2;fill:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- shell / widths ---------- */
.shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--gut)}
.reading{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,var(--prose)) minmax(0,1fr);
  column-gap:clamp(16px,2.6vw,44px);
  max-width:var(--shell);margin:0 auto;padding-inline:var(--gut);
}
.reading > *{grid-column:2}
.reading > .breakout{grid-column:2 / 4}          /* width 2 — steps into the right margin */
.reading > .bleed{grid-column:1 / -1}            /* width 3 — full shell */
.reading > .pull-left{grid-column:1 / 3}
/* left ledger margin — carries the section marker, the era and two sibling links */
.era{display:none}
@media (min-width:1180px){
  .era{display:grid;gap:12px;grid-area:1 / 1;justify-self:end;align-self:start;max-width:300px;text-align:right;
    padding-right:clamp(18px,2vw,38px);border-right:2px solid var(--accent)}
  .era .era-no{font-family:var(--display);font-weight:700;font-size:clamp(38px,3.4vw,62px);line-height:.85;color:var(--accent);letter-spacing:-.04em}
  .era .era-sec{display:flex;gap:8px;justify-content:flex-end;align-items:center;font-size:12px;font-weight:700;
    letter-spacing:.18em;text-transform:uppercase;color:var(--quiet)}
  .era ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
  .era ul a{font-family:var(--display);font-weight:600;font-size:16px;line-height:1.2;color:var(--ink)}
  .era ul li{list-style:none}
  .era ul a:hover{color:var(--accent);text-decoration:none}
}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--line);background:var(--ground)}
.masthead-in{display:flex;align-items:center;gap:clamp(14px,2vw,26px);flex-wrap:wrap;
  max-width:var(--shell);margin:0 auto;padding:16px var(--gut) 14px}
.wordmark{font-family:var(--display);font-weight:800;letter-spacing:-.045em;
  font-size:clamp(34px,4.4vw,58px);line-height:.9;color:var(--ink);text-decoration:none}
.wordmark:hover{text-decoration:none;color:var(--ink)}
.wordmark b{color:var(--accent);font-weight:800}
.mast-rule{color:var(--accent);display:block}
.mast-strap{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--quiet);max-width:15em}
.nav{flex:1 0 100%;margin-left:0;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px clamp(14px,2.2vw,40px);align-items:center;text-align:center}
@media (min-width:1180px){.nav{justify-content:space-between;gap:6px 12px}}
.nav a.k-catalogues{color:var(--k-catalogues)}
.nav a.k-rural-routes{color:var(--k-rural-routes)}
.nav a.k-the-coupon{color:var(--k-the-coupon)}
.nav a.k-lists-segments{color:var(--k-lists-segments)}
.nav a.k-broadcast{color:var(--k-broadcast)}
.nav a.k-the-telephone{color:var(--k-the-telephone)}
.nav a.k-the-wire{color:var(--k-the-wire)}
.nav a.k-archive{color:var(--k-archive)}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.nav a{display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;color:var(--ink);
  font-size:12.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;padding:8px 2px}
.nav a:hover{color:var(--accent);text-decoration:none}
.nav a[aria-current="page"]{color:var(--accent)}
.nav .icon{width:17px;height:17px}
.nav-toggle,.nav-label{display:none}

/* ---------- kickers, section keys ---------- */
.kicker{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.kicker.is-flag{color:var(--flag)}
.ledger-head{display:flex;align-items:baseline;gap:clamp(14px,2vw,28px);border-top:1px solid var(--line);padding-top:16px}
.ledger-no{font-family:var(--display);font-weight:700;font-size:clamp(46px,5vw,74px);
  line-height:.82;color:var(--accent);letter-spacing:-.04em}
.ledger-no.is-flag{color:var(--flag)}

/* ---------- figure system: three treatments, one drawing system ---------- */
figure{margin:0}
.figcap{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;padding-top:11px}
.figcap .cap{flex:1 1 300px;min-width:0;font-size:15.5px;line-height:1.5;color:var(--ink);margin:0}
.figcap .credit{flex:0 1 auto;margin-left:auto;font-size:12.5px;line-height:1.5;color:var(--quieter);margin-block:0}
.figcap .rule-v{align-self:center;color:var(--accent);height:22px;width:8px}

/* 1 · full-bleed band with a bone caption plate laid over the bottom rule */
.fig-bleed{position:relative;margin:0}
.fig-bleed img{width:100%;height:clamp(280px,42vw,700px);object-fit:cover}
.fig-bleed .plate{position:absolute;left:0;bottom:0;max-width:min(560px,86%);
  background:var(--ink);color:var(--ground);padding:14px 20px 13px}
.fig-bleed .plate .cap{color:var(--ground);font-size:15.5px;line-height:1.45;margin:0}
.fig-bleed .plate .credit{color:#5D6470;font-size:12px;display:block;margin-top:5px}

/* 2 · breakout on a mat, hairline inset, amber rule between caption and credit */
.fig-break{background:var(--panel);border:1px solid var(--line-soft);padding:clamp(12px,1.4vw,20px)}
.fig-break img{border:1px solid rgba(0,0,0,.35);width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-break .figcap{border-top:1px solid var(--line-soft);margin-top:12px}

/* 3 · inset plate sitting in the column with prose beside it */
.fig-inset{float:right;width:min(46%,340px);margin:6px 0 22px 26px;
  border-left:2px solid var(--accent);padding-left:14px}
.fig-inset img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-inset .cap{font-size:14.5px}
.fig-inset .credit{margin-left:0}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.gallery figure{display:flex;flex-direction:column}
.gallery img{aspect-ratio:16/10;object-fit:cover;width:100%}
.article-figure img{width:100%;aspect-ratio:16/10;object-fit:cover}

/* ---------- prose components ---------- */
.prose{font-size:1em;overflow-wrap:break-word}
.t-what,.notes-panel li,.cat-list .c-title,.cat-list .c-dek{overflow-wrap:break-word}
.prose p{margin:0 0 1.15em}
.prose h2{clear:both;font-size:clamp(26px,2.5vw,34px);margin:2em 0 .55em;padding-top:.5em;border-top:1px solid var(--line-soft)}
.prose h3{clear:both;font-size:clamp(20px,1.7vw,24px);margin:1.6em 0 .4em}
.prose > :first-child{margin-top:0}
.lead{font-family:var(--text);font-size:clamp(19px,1.55vw,23px);line-height:1.5;color:#C3C8D0;margin:0 0 1.3em}
.pullquote{margin:0;border-left:2px solid var(--accent);padding:2px 0 2px 22px}
.pullquote p{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.1vw,30px);line-height:1.16;margin:0;color:var(--ink)}
.blockquote{margin:0;background:var(--panel);border-left:2px solid var(--flag);padding:18px 22px}
.blockquote p{margin:0 0 .5em;font-size:1.02em}
.blockquote cite{font-style:normal;font-size:13.5px;color:var(--quiet)}
.callout{margin:0;background:var(--secondary);color:#EDE9E0;padding:20px 24px;border:0}
.callout p{margin:0}
.callout p + p{margin-top:.7em}
.note{background:var(--panel);border-left:2px solid var(--quiet);padding:12px 16px;font-size:15.5px;color:#C3C8D0;margin:0}

/* notes-for-design units */
.notes-panel{background:var(--panel);border:1px solid var(--line-soft);
  padding:clamp(20px,2vw,30px) clamp(20px,2.2vw,34px)}
/* a left-breaking panel is a ledger sheet: years in the margin, entries on the prose measure */
@media (min-width:900px){
  .pull-left > .notes-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--prose));
    column-gap:clamp(16px,2vw,34px);padding-right:0}
  .pull-left > .notes-panel > h2{grid-column:2}
  .pull-left > .notes-panel > .timeline,.pull-left > .notes-panel > ul{grid-column:1 / -1}
  .pull-left > .notes-panel .timeline li{grid-template-columns:minmax(0,1fr) minmax(0,var(--prose));
    column-gap:clamp(16px,2vw,34px)}
  .pull-left > .notes-panel .t-when{text-align:right}
  .pull-left > .notes-panel > ul:not(.keyset) > li{grid-template-columns:minmax(0,1fr) minmax(0,var(--prose));
    column-gap:clamp(16px,2vw,34px);padding-left:0}
  .pull-left > .notes-panel > ul.keyset{margin-right:clamp(20px,2.2vw,34px)}
}
.notes-panel > h2,.notes-panel > h3{font-size:clamp(19px,1.6vw,23px);margin:0 0 14px;border:0;padding:0}
.notes-panel > ul{margin:0;padding:0;list-style:none;display:grid;gap:0;counter-reset:nrow}
/* key-set panels are a card set, not a table: label in amber, note beneath */
.notes-panel > ul.keyset{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
  background:var(--line-soft);counter-reset:none}
.notes-panel > ul.keyset > li{display:grid;gap:7px;align-content:start;background:var(--panel-2);
  padding:16px 18px 18px;border:0;grid-template-columns:minmax(0,1fr)}
.notes-panel > ul.keyset > li::before{content:none}
.notes-panel > ul.keyset .k{font-family:var(--display);font-weight:700;font-size:16.5px;line-height:1.16;
  color:var(--accent);letter-spacing:-.01em}
.notes-panel > ul.keyset .v{font-size:15.5px;line-height:1.5;color:#C3C8D0}
.notes-panel > ul > li{display:grid;grid-template-columns:minmax(30px,44px) minmax(0,1fr);column-gap:20px;
  align-items:baseline;padding:11px 0;border-bottom:1px dashed rgba(232,227,215,.2)}
.notes-panel > ul > li > span{font-size:15.5px;line-height:1.5;color:#C3C8D0}
.notes-panel > ul > li:last-child{border-bottom:0;padding-bottom:2px}
.notes-panel > ul > li::before{counter-increment:nrow;content:counter(nrow,decimal-leading-zero);
  font-family:var(--display);font-weight:700;font-size:15px;color:var(--accent);text-align:right;background:none}
.timeline{margin:0;padding:0;list-style:none;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:minmax(84px,150px) minmax(0,1fr);gap:6px 22px;
  padding:11px 0;border-bottom:1px dashed rgba(232,227,215,.2);align-items:baseline}
.timeline li::before{content:none!important}
.timeline li:last-child{border-bottom:0;padding-bottom:2px}
.t-when{font-family:var(--display);font-weight:700;font-size:16px;color:var(--accent);letter-spacing:0}
.t-what{font-size:15.5px;line-height:1.5;color:#C3C8D0}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line-soft)}
.statblock{background:var(--panel);padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--display);font-weight:700;font-size:clamp(30px,3vw,44px);line-height:.9;color:var(--accent)}
.stat-label{font-size:13.5px;line-height:1.4;color:var(--quiet)}

/* tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.versus,table.datatable{width:100%;border-collapse:collapse;font-size:15.5px;min-width:min(100%,520px)}
.versus th,.versus td,.datatable th,.datatable td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.versus thead th,.datatable thead th{font-family:var(--text);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--line)}
.datatable tbody tr:hover,.versus tbody tr:hover{background:var(--panel)}

/* charts */
.chart{background:var(--panel);border:1px solid var(--line-soft);padding:18px}
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{font-size:14.5px;color:var(--quiet);padding-top:10px}

/* cards / references */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.profile-card{background:var(--panel);border:1px solid var(--line-soft);padding:18px;display:flex;flex-direction:column;gap:8px}
.profile-card .p-photo{width:100%;aspect-ratio:4/3;object-fit:cover}
.profile-card h3{font-size:20px}
.profile-card .p-role{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0}
.profile-card p{margin:0;font-size:15px;color:#C3C8D0}
.profile-card .p-links{margin-top:auto}
.profile-card.no-photo{border-left:2px solid var(--accent)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.org-card{display:flex;flex-direction:column;gap:6px;background:var(--panel);border:1px solid var(--line-soft);padding:14px 16px}
.org-card:hover{text-decoration:none;border-color:var(--accent)}
.org-logo{max-height:34px;width:auto;object-fit:contain}
.org-name{font-family:var(--display);font-weight:650;font-size:17px;color:var(--ink)}
.org-host{font-size:12.5px;color:var(--quieter)}
.entity-ref{overflow-wrap:anywhere;border-bottom:1px solid rgba(201,154,42,.5)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line-soft)}
.further-grid a{display:flex;flex-direction:column;gap:6px;background:var(--ground);padding:18px 20px;
  font-family:var(--display);font-weight:600;font-size:19px;line-height:1.14;color:var(--ink)}
.further-grid a:hover{background:var(--panel);color:var(--accent);text-decoration:none}
.further-grid .f-sec{font-family:var(--text);font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.related-links{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line-soft)}
.related-links li{background:var(--ground);display:grid;gap:5px;padding:14px 4px}
.related-links a{display:block;padding:0;font-family:var(--display);font-weight:600;font-size:18px;color:var(--ink)}
.related-links a:hover{color:var(--accent);text-decoration:none}
.related-links .r-sec{font-family:var(--text);font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--quiet);flex:0 0 auto}

/* teasers / cards on hub pages — even height */
.teaser-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line-soft)}
.teaser{display:flex;flex-direction:column;background:var(--ground);padding:0 0 20px}
.teaser img{width:100%;aspect-ratio:16/10;object-fit:cover}
.teaser .t-body{padding:16px 20px 0;display:flex;flex-direction:column;gap:9px;flex:1}
.teaser h3{font-size:clamp(20px,1.7vw,25px);min-height:2.1em}
.teaser p{margin:0;font-size:15.5px;color:#C3C8D0}
.teaser .t-more{margin-top:auto;padding-top:12px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.cat-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.cat-list li{border-bottom:1px solid var(--line-soft)}
.cat-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 20px;align-items:baseline;
  padding:18px;margin-inline:-18px;border-left:2px solid transparent}
.cat-list a:hover{text-decoration:none;background:var(--panel);border-left-color:var(--accent)}
.cat-list a:hover .c-title{color:var(--accent)}
.cat-list .c-title{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.6vw,23px);color:var(--ink)}
.cat-list .c-dek{grid-column:1;font-size:15px;color:#C3C8D0;max-width:80ch}
.cat-list .c-sec{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.expander{margin-top:6px}
.expander summary{cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);padding:12px 0}
.expander summary::-webkit-details-marker{display:none}

/* ---------- supporters (homepage only) ---------- */
.supporters{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(26px,3vw,44px) 0}
.sponsor-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,52px)}
.sponsor-cols.is-full{width:100%}
@media (min-width:900px){.sponsor-cols.is-full{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.teaser-grid.is-open .teaser h3{min-height:0;font-size:clamp(22px,2.1vw,30px)}
.teaser-grid.is-open .teaser img{aspect-ratio:4/3;border:1px solid rgba(0,0,0,.4)}
.teaser-grid.is-open .teaser{background:var(--panel);padding:14px 14px 20px;border-top:2px solid var(--accent)}
.teaser-grid.is-open .teaser .t-body{padding:14px 4px 0}
.teaser-grid.is-open .teaser:hover{background:var(--panel-2)}
.teasers-two .teaser{background:var(--panel);padding:14px 14px 22px;border-top:2px solid var(--accent)}
.teasers-two .teaser img{border:1px solid rgba(0,0,0,.4)}
.teasers-two .teaser .t-body{padding:16px 6px 0}
.teaser-grid.is-open .teaser .t-body{gap:12px}
.teaser-grid.is-open .teaser .kicker .icon{width:26px;height:26px}
.teaser-grid.is-open .teaser .kicker{font-size:13px}
.sponsor-list{display:flex;flex-direction:column}
.sponsor{display:flex;flex-direction:column;gap:10px;flex:0 0 auto;width:100%;
  padding:18px 0;border-bottom:1px solid var(--line-soft);color:var(--ink)}
.sponsor:hover{text-decoration:none}
.sponsor .sponsor-mark{background:#0C0E12;border:1px solid var(--line-soft);
  height:56px;width:100%;min-width:240px;display:flex;align-items:center;padding:8px 14px}
.sponsor img{max-height:40px;max-width:100%;width:auto;height:auto;object-fit:contain}
.sponsor-name{font-family:var(--display);font-weight:650;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sponsor-blurb{font-size:14.5px;line-height:1.45;color:#C3C8D0;min-width:200px}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);padding:clamp(28px,3vw,44px) 0 40px;margin-top:clamp(40px,5vw,80px)}
.foot-in{display:flex;flex-wrap:wrap;gap:26px 44px;align-items:flex-start}
.foot-sub{font-size:15px;color:var(--quiet);max-width:52ch;margin:8px 0 0}
.foot-nav{margin-left:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 28px;min-width:min(100%,420px)}
.foot-nav a{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink)}
.foot-nav a:hover{color:var(--accent);text-decoration:none}
.foot-nav a:not(:has(svg))::before{content:"";flex:0 0 2px;height:14px;background:var(--accent);margin-right:6px}

/* ---------- homepage bands ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr);border-bottom:1px solid var(--line)}
.hero-fig{position:relative;grid-column:1}
.hero-fig img{width:100%;height:clamp(320px,52vw,760px);object-fit:cover}
.hero-line{max-width:var(--shell);margin:0 auto;padding:clamp(26px,3.4vw,54px) var(--gut) clamp(24px,3vw,44px)}
.hero-line h1{font-size:clamp(38px,6.2vw,104px);line-height:.95;letter-spacing:-.04em;max-width:22ch}
.hero-line h1 b{color:var(--accent);font-weight:700}
.hero-line p{font-size:clamp(18px,1.5vw,22px);line-height:1.55;color:#C3C8D0;max-width:70ch;margin:22px 0 0}
.band{border-bottom:1px solid var(--line);padding:clamp(30px,3.6vw,64px) 0}
.band.is-panel{background:var(--secondary)}
.band.is-quiet{padding:clamp(18px,2vw,30px) 0}
.feature{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.4vw,38px)}
.feature h2{font-size:clamp(30px,4.4vw,62px);line-height:.98}
.wordmark-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line-soft)}
.wordmark-row div{background:var(--ground);display:flex;align-items:center;justify-content:center;padding:20px 14px}
.wordmark-row img{max-height:56px;width:auto;object-fit:contain;opacity:.95}
.teasers-two{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.6vw,40px)}
.quiet-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 26px;font-family:var(--display);
  font-weight:600;font-size:clamp(19px,1.9vw,27px);line-height:1.2}
.quiet-line span{font-family:var(--text);font-size:14px;font-weight:500;letter-spacing:.02em;color:var(--quiet)}

/* ---------- article furniture ---------- */
.art-head{border-bottom:1px solid var(--line);padding-block:clamp(26px,3.2vw,54px) clamp(22px,2.6vw,40px)}
.art-head h1{font-size:clamp(34px,4.6vw,74px);line-height:.98;margin:16px 0 20px;max-width:26ch}
.art-meta{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-size:13px;color:var(--quiet)}
.art-body{padding-block:clamp(26px,3vw,52px) 0}
.art-body > .breakout,.art-body > .bleed,.art-body > .pull-left{margin-block:clamp(34px,3.6vw,56px)}
.art-end{margin-top:clamp(34px,3.8vw,56px);padding-top:22px;border-top:1px solid var(--line)}
.art-end h2{font-size:clamp(20px,1.7vw,25px);margin-bottom:16px}
.sec-strip{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;padding:16px 0 0;border-top:1px solid var(--line-soft)}
.sec-strip a{display:flex;align-items:center;gap:11px;min-height:46px;padding:10px 16px 10px 13px;
  border:1px solid var(--line-soft);background:var(--panel);
  font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.sec-strip a .icon{width:20px;height:20px;color:var(--accent);flex:0 0 20px}
.sec-strip a:hover{color:var(--ink);text-decoration:none;border-color:var(--accent);background:var(--panel-2)}

/* ---------- responsive: mobile-up, and it keeps going above the desktop cap ---------- */
@media (max-width:800px){
  .nav-label{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:12.5px;font-weight:700;
    letter-spacing:.16em;text-transform:uppercase;color:var(--accent);cursor:pointer;padding:12px 0;min-height:46px}
  .nav{display:none;width:100%;flex-direction:column;gap:2px;margin-left:0;border-top:1px solid var(--line-soft);padding-top:10px}
  .nav a{justify-content:flex-start}
  .nav a{padding:13px 0;font-size:13.5px;min-height:46px}
  .nav-toggle:checked ~ .nav{display:flex}
  .mast-rule,.mast-strap{display:none}
  .fig-inset{float:none;width:auto;margin:20px 0}
  .fig-bleed .plate{position:static;max-width:none}
  .figcap .credit{margin-left:0}
  .timeline li{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:768px){
  :root{--body:17px;--prose:60ch;--shell:1080px;--breakout:900px}
  .teasers-two{grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);align-items:start}
  .feature{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}
}
@media (min-width:1024px){
  :root{--body:17.5px;--prose:64ch;--shell:1260px;--breakout:1000px}
  .sponsor{flex-direction:column}
}
@media (min-width:1280px){
  .band.is-panel .shell{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)!important;align-items:center}
  :root{--body:18px;--prose:66ch;--shell:1400px;--breakout:1120px}
  .hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .hero-fig{grid-column:2;grid-row:1}
  .hero-line{grid-column:1;grid-row:1;margin:0;max-width:none;align-self:center;
    padding-inline:max(var(--gut),calc((100vw - var(--shell))/2 + var(--gut)))}
  .hero-fig img{height:100%;min-height:620px}
}
@media (min-width:1440px){
  :root{--body:18.5px;--prose:68ch;--shell:1560px;--breakout:1240px;--gut:56px}
  .reading{column-gap:64px}
}
@media (min-width:1920px){
  /* large display: the page gains measure, type and figure width — not margin */
  :root{--body:19.5px;--prose:72ch;--shell:1840px;--breakout:1440px;--gut:72px}
  .art-head h1{font-size:82px}
  .figcap .cap{font-size:17px}
  .timeline li{grid-template-columns:minmax(140px,200px) minmax(0,1fr)}
}
@media (min-width:2400px){
  :root{--body:21px;--prose:76ch;--shell:2200px;--breakout:1700px;--gut:96px}
  .hero-fig img{min-height:820px}
  .figcap .cap{font-size:18px}
}
@media print{
  body{background:#fff;color:#111}
  .masthead,.nav,.supporters{display:none}
}

/* 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 > .sponsor{flex:0 0 auto!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:18px 18px!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;}

/* 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-list .sponsor .sponsor-mark.sponsor-mark{display:block!important;width:100%!important}
.sponsor-list .sponsor.sponsor img{height:40px!important;display:block!important;width:100%!important}


/* sp-plate-pad + three across.
   The mark sat flush against its own plate — .sponsor-mark had a ground and a border but no
   padding, so the artwork touched the edges. Padding added and the plate's height raised by twice
   it (border-box), so the mark keeps its 40px rather than paying for the breathing room. And the
   list was a single column, one brand per row; three across above 900px, two to 900, one on a
   phone. */
.sponsor .sponsor-mark{padding:10px 18px!important;height:72px!important;box-sizing:border-box!important}
@media (min-width:601px){ .sponsor-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important} }
@media (min-width:901px){ .sponsor-list{grid-template-columns:repeat(3,minmax(0,1fr))!important} }

/* op-money-columns: the supporters block ran one tile per row — 10 tiles,
   1647px at 390, 20% of the whole page. Two columns bring it to
   1323px (20% shorter). Checked before writing: no new overflow, smallest mark still
   95px wide, longest blurb 1 lines, tile heights 163-250px.
   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.
   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-list), 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-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!important}
    .sponsor-list > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-list > * *{min-width:0!important;max-width:100%}
    .sponsor-list img,.sponsor-list svg{max-width:100%;height:auto}

}

/* op-odd-tier-lead: .sponsor-list (5 tiles), .sponsor-list (5 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-list:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
  .sponsor-list:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 650; letter-spacing: -0.02em; line-height: 1.06; margin: 0px;}
.prose h2:where(.rt-h3){clear: both; font-size: clamp(20px, 1.7vw, 24px); margin: 1.6em 0px 0.4em;}
.teaser h2:where(.rt-h3){font-size: clamp(20px, 1.7vw, 25px); min-height: 2.1em;}
h2.rt-h3.rt-h3{padding-top:0px;border-top-width:0px;border-top-style:none;border-top-color:rgb(232, 227, 215)}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.bleed > figure.fig-bleed > img,
  div.breakout > figure.fig-break > img,
  div.is-open.teaser-grid > article.teaser > img,
  div.prose > figure.fig-inset > img,
  div.shell > figure > img,
  div.teaser-grid > article.teaser > img,
  div.teasers-two > article.teaser > img,
  main > figure.fig-bleed > img,
  section.hero > figure.hero-fig > img){height:auto}
/* op-img-dims:end */

.sponsor.sponsor[data-partner] .sponsor-blurb.sponsor-blurb{flex:0 0 auto!important;max-height:3lh!important;overflow:hidden!important}
.sponsor.sponsor[data-partner] > .sponsor-mark.sponsor-mark{flex:0 0 auto!important}
.sponsor-list.sponsor-list:has(> [data-partner]){align-content:start!important}
[data-partner] .sponsor-mark{background:transparent!important}