/* LMHI 2015 — "The Scale". Palette: 4 named members.
   --ground pale lilac  --ink violet-black  --accent aniline violet (saturated, hue ~278)
   --secondary vermilion (saturated, hue ~15)  — 263 degrees of hue separation. */
:root{
  --ground:#E7E4EB;
  --ground-2:#F1EFF4;
  --ink:#191725;
  --ink-2:#3B3849;
  --accent:#4A2C6B;
  --accent-lift:#C9B8E0;
  --secondary:#B33A1A;
  --dark:#241C33;
  --rule:rgba(25,23,37,.22);
  --hair:rgba(25,23,37,.14);
  --measure:68ch;
  --breakout:1100px;
  --wrap:1440px;
  --body:19px;
  --gap:28px;
  --band:clamp(56px,6vw,104px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font:400 var(--body)/1.62 "Public Sans",system-ui,-apple-system,sans-serif;
  overflow-x:hidden;text-wrap:pretty;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--accent)}
a:hover{color:var(--secondary)}
h1,h2,h3,h4{font-family:"Bricolage Grotesque","Public Sans",sans-serif;font-weight:600;letter-spacing:-.02em;line-height:1.06;margin:0}
p{margin:0 0 1.05em}
sup{font-size:.62em;line-height:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,4vw,60px)}
.narrow{max-width:var(--measure);margin-inline:auto}
.breakout{max-width:var(--breakout);margin-inline:auto}
.num{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-stretch:75%;letter-spacing:-.05em;line-height:.8}
.kicker{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--accent);display:flex;align-items:center;gap:9px;margin:0 0 14px}
.kicker svg{width:20px;height:20px;flex:none}
.eyebrow{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-2)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:#fff;padding:10px 14px;z-index:50}

/* ---------- masthead ---------- */
.masthead{padding:26px 0 0;background:var(--ground)}
.masthead-in{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;flex-wrap:wrap}
.wordmark{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:44px;line-height:.86;letter-spacing:-.035em;font-stretch:82%;color:var(--ink);text-decoration:none}
.wordmark span{color:var(--accent)}
.wordmark:hover{color:var(--ink)}
.nav{display:flex;flex-wrap:wrap;gap:10px 30px;padding-bottom:4px;align-items:baseline}
.nav a{display:flex;align-items:center;gap:9px;font-family:"Bricolage Grotesque",sans-serif;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--accent);text-decoration:none;padding:7px 0;border-bottom:2px solid transparent}
.nav a svg{width:22px;height:22px;flex:none;color:var(--accent);opacity:.75}
.nav a:hover{color:var(--secondary);border-bottom-color:var(--secondary)}
.nav a:hover svg{opacity:1;color:var(--secondary)}
.nav a[aria-current]{color:var(--accent);border-bottom-color:var(--accent)}
.ruler{display:block;width:100%;height:26px;color:var(--accent);margin-top:18px}
.ruler.small{height:18px}

/* ---------- footer ---------- */
.foot{background:var(--dark);color:var(--ground);margin-top:var(--band);padding:52px 0 58px}
.foot a{color:var(--accent-lift)}
.foot a:hover{color:#fff}
.foot-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:44px;align-items:start}
.foot .wordmark{color:var(--ground);font-size:40px}
.foot .wordmark span{color:var(--accent-lift)}
.foot-sub{margin:16px 0 0;max-width:48ch;color:rgba(231,228,235,.8);font-size:16.5px}
.foot-nav{display:flex;flex-wrap:wrap;gap:12px 30px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.foot-nav a{text-decoration:none}

/* ---------- homepage: opener ---------- */
.opener{position:relative;min-height:min(78vh,780px);display:flex;align-items:flex-end;overflow:hidden;background:var(--dark)}
.opener>img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover}
.opener::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,28,51,.9) 0%,rgba(36,28,51,.55) 42%,rgba(36,28,51,.86) 100%)}
.opener-in{position:relative;z-index:2;width:100%;padding-block:44px 48px;color:var(--ground)}
.opener-top{display:flex;align-items:baseline;justify-content:space-between;gap:clamp(24px,4vw,60px);flex-wrap:nowrap}
.opener .wordmark{white-space:nowrap}
.opener .wordmark{color:var(--ground);font-size:clamp(56px,7vw,96px)}
.opener .wordmark span{color:var(--accent-lift)}
.exponent{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-stretch:75%;letter-spacing:-.05em;font-size:clamp(72px,11vw,168px);line-height:.78;color:var(--accent-lift);white-space:nowrap}
.exponent sup{font-size:.5em}
.opener h1{font-size:clamp(34px,4.2vw,64px);max-width:34ch;margin:40px 0 0;color:#fff;text-shadow:0 3px 24px rgba(18,12,30,.62),0 1px 2px rgba(18,12,30,.5)}
.opener .standfirst{font-size:clamp(17px,1.4vw,21px);max-width:62ch;margin:20px 0 0;color:#fff}
.opener .credit{margin-top:26px}

/* ---------- bands ---------- */
.band{padding-block:var(--band)}
.band-head{display:flex;align-items:flex-end;justify-content:space-between;gap:44px;flex-wrap:wrap;margin-bottom:40px}
.band-head h2{font-size:clamp(28px,3vw,44px);max-width:26ch}
.band-head p{margin:0;max-width:52ch;color:var(--ink-2)}
.band.dark{background:var(--dark);color:var(--ground)}
.band.dark h2,.band.dark h3{color:#fff}
.band.dark p{color:rgba(231,228,235,.82)}
.band.dark .eyebrow{color:var(--accent-lift)}
.band.dark a{color:var(--accent-lift)}
.rulebar{height:2px;background:var(--ink);margin:0}

/* arithmetic piece */
.p2-head{display:flex;align-items:flex-end;gap:clamp(24px,3vw,52px);flex-wrap:wrap}
.p2-head .num{font-size:clamp(96px,11vw,196px);color:var(--accent)}
.p2-head h2{font-size:clamp(28px,3.2vw,48px);max-width:24ch;margin:10px 0 0}
.p2{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.78fr);gap:clamp(28px,4vw,64px);align-items:start}
.p2-left>p{font-size:calc(var(--body) + 1px);max-width:56ch;margin:clamp(20px,2vw,30px) 0 0}
.p2-ladder{grid-column:1 / -1;margin-top:clamp(28px,3vw,44px);border-top:2px solid var(--ink);padding-top:18px}
.p2-ladder table.datatable{min-width:0}
.p2-ladder .datatable td:nth-child(2){width:22%}
.p2-ladder .datatable td{padding:11px 14px 11px 0}
.p2-ladder .datatable td.step{font-size:21px}
@media (max-width:900px){.p2{grid-template-columns:minmax(0,1fr)}}
.piece{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.85fr);gap:clamp(32px,4vw,72px);align-items:start}
.piece .num{font-size:clamp(120px,17vw,300px);color:var(--accent)}
.piece h2{font-size:clamp(30px,3.4vw,52px);max-width:24ch;margin:26px 0 0}
.piece .body{max-width:60ch;margin-top:20px;font-size:calc(var(--body) + .5px)}
.morelink{display:inline-flex;align-items:center;gap:11px;font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;text-decoration:none;color:var(--ink);border-bottom:2px solid var(--secondary);padding-bottom:5px}
.morelink:hover{color:var(--secondary)}
.morelink svg{width:26px;height:10px}

/* stepped run */
.steps-band{margin-top:clamp(40px,4vw,72px);background:var(--ground-2);border-top:4px solid var(--secondary);padding:clamp(24px,2.6vw,36px);display:flex;flex-wrap:wrap;gap:30px 52px;align-items:flex-end;justify-content:space-between}
.steps-band h3{font-size:clamp(22px,2.2vw,30px);margin:0 0 10px;max-width:22ch}
.steps-band>.sb-text{flex:1 1 360px;min-width:min(100%,300px)}
.steps{flex:0 1 auto}
.steps{flex:0 1 auto;display:grid;grid-template-columns:2fr 1.76fr 1.52fr 1.32fr 1.14fr;gap:clamp(6px,1vw,12px);align-items:end;width:822px;max-width:100%;margin-top:14px}
.steps figure{width:auto!important}
.steps figure:nth-child(1) img{height:clamp(74px,10vw,132px)!important}
.steps figure:nth-child(2) img{height:clamp(67px,9vw,120px)!important}
.steps figure:nth-child(3) img{height:clamp(60px,8vw,108px)!important}
.steps figure:nth-child(4) img{height:clamp(53px,7vw,96px)!important}
.steps figure:nth-child(5) img{height:clamp(47px,6vw,86px)!important}
@media (max-width:1010px){.steps{flex:1 1 100%;width:100%}}
@media (max-width:620px){
  .steps{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:10px;width:100%;padding-bottom:8px;-webkit-overflow-scrolling:touch}
  .steps figure{flex:0 0 auto}
  .steps figure:nth-child(1) img{width:140px!important;height:92px!important}
  .steps figure:nth-child(2) img{width:124px!important;height:82px!important}
  .steps figure:nth-child(3) img{width:108px!important;height:72px!important}
  .steps figure:nth-child(4) img{width:92px!important;height:62px!important}
  .steps figure:nth-child(5) img{width:78px!important;height:54px!important}
}
.steps figure{margin:0;flex:none}
.steps figcaption{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:7px}
.steps img{width:100%;object-fit:cover}

/* spine */
.spine{border-top:2px solid var(--ink);display:grid;grid-template-columns:minmax(140px,220px) minmax(0,1fr)}
.spine-label{padding:38px 0 0;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-2)}
.spine-list{border-left:2px solid var(--ink)}
.station{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,var(--fw,420px));gap:clamp(28px,4vw,56px);align-items:end;padding:38px 0 54px clamp(20px,3vw,46px);position:relative;border-top:1px solid var(--rule)}
.station:first-child{border-top:0}
.station::before{content:"";position:absolute;left:0;top:52px;width:24px;height:2px;background:var(--secondary)}
.station .num{color:var(--ink)}
.station h3{margin:16px 0 0;font-size:clamp(24px,2.4vw,38px);max-width:26ch}
.station p{margin:12px 0 0;max-width:52ch;color:var(--ink-2)}
.station .plate{margin:0}
.station a.morelink{margin-top:18px}
.station-single{display:block;padding-bottom:44px}
.station-single .row{display:flex;align-items:baseline;gap:clamp(20px,3vw,44px);flex-wrap:wrap}
.station-single p{max-width:64ch}

/* register (reviews with years) */
.register{display:grid;gap:0}
.entry{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr) minmax(220px,420px);gap:clamp(24px,3vw,44px);align-items:start;padding:32px clamp(16px,1.6vw,24px);margin-inline:calc(-1 * clamp(16px,1.6vw,24px));border-top:1px solid var(--rule)}
.entry:first-child{border-top:2px solid var(--ink)}
.entry{transition:background .18s ease}
.entry:hover{background:var(--ground-2)}
.entry .num{font-size:clamp(40px,4vw,64px);color:var(--secondary);transition:color .18s ease}
.entry:hover .num{color:var(--accent)}
.entry .num a{display:inline-block;text-decoration:none;color:inherit}
.entry .num a::after{content:"";display:block;height:4px;width:30px;background:var(--secondary);margin-top:10px;transition:width .24s ease,background .18s ease}
.entry:hover .num a::after,.entry .num a:focus-visible::after{width:100%;background:var(--accent)}
.entry .num.q{color:var(--ink)}
.entry h3{font-size:clamp(22px,2.1vw,32px);max-width:30ch}
.entry p{margin:12px 0 0;color:var(--ink-2)}
.entry .plate{margin:0}
.entry-flip{grid-template-columns:minmax(120px,180px) minmax(220px,420px) minmax(0,1fr)}

/* places strip */
.places{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(18px,2vw,30px)}
.places figure{margin:0}
.places img{width:100%;aspect-ratio:16/11;object-fit:cover}
.places figcaption{margin-top:12px}
.places .pl-name{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:19px;display:block}
.places .pl-line{display:block;color:rgba(231,228,235,.78);font-size:15.5px;margin-top:4px}
.places .credit{display:block;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:rgba(231,228,235,.72);margin-top:7px}

/* ---------- figure system: three treatments ---------- */
/* 1 · plate — image inset in a hairline frame */
.plate{border:1px solid var(--rule);padding:13px;background:transparent}
.plate img{width:100%;height:auto}
.band.dark .plate{border-color:rgba(231,228,235,.34)}
/* 2 · bleed — full-width band breaking the measure, caption indented on an accent rule */
figure.bleed{margin:0;width:100%}
figure.bleed img{width:100%;aspect-ratio:16/9;object-fit:cover}
/* 3 · inset — small figure sitting in the column, prose beside it */
figure.inset{margin:0;max-width:340px}
figure.inset img{width:100%}
.figcap{margin-top:14px;display:flex;gap:20px;align-items:flex-start;max-width:74ch}
.figcap .bar{flex:none;width:40px;height:3px;background:var(--secondary);margin-top:11px}
.figcap .cap{font-size:16.5px;line-height:1.45;color:var(--ink-2);margin:0}
.figcap .credit{display:block;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(25,23,37,.72);margin-top:6px}
.band.dark .figcap .cap{color:rgba(231,228,235,.82)}
.band.dark .figcap .credit{color:rgba(231,228,235,.7)}
.opener .figcap .cap{color:rgba(255,255,255,.9)}
.opener .figcap .credit{color:rgba(255,255,255,.8)}

/* ---------- sponsors ---------- */
.supporters{padding-block:calc(var(--band) * .72)}
.supporters .eyebrow{display:block;margin-bottom:8px}
.supporters h2{font-size:clamp(22px,2.2vw,30px);margin-bottom:6px}
.supporters .sub{color:var(--ink-2);max-width:56ch;margin:0 0 28px}
.sponsor-grid{display:grid;grid-template-columns:repeat(auto-fit,276px);gap:18px}
.sponsor{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start;padding:18px;background:var(--ground-2);border:1px solid var(--hair);text-decoration:none;color:var(--ink)}
.sponsor:hover{border-color:var(--accent);color:var(--ink)}
.sponsor img{background:var(--dark);width:100%;height:60px!important;padding:9px 14px;object-fit:contain}
.sponsor-name{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:16.5px;display:block;letter-spacing:-.01em}
.sponsor-blurb{display:block;font-size:15px;line-height:1.45;color:var(--ink-2);margin-top:5px}
.sponsor.feat{background:#fff}

/* ---------- article ---------- */
.article-head{padding-block:clamp(34px,4vw,60px) 0}
.article-head h1{font-size:clamp(34px,4.4vw,68px);max-width:30ch}
.article-head .lead{margin:24px 0 0}
.head-split{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;margin-top:24px}
.head-split .lead{margin:0}
.head-split figure.inset{max-width:360px}
@media (min-width:1100px){.head-split.aside{grid-template-columns:minmax(0,1fr) 360px;gap:52px;align-items:end}}
.lead{font-family:"Bricolage Grotesque",sans-serif;font-weight:500;font-size:clamp(21px,1.9vw,28px);line-height:1.34;max-width:56ch;color:var(--ink)}
.meta{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-2)}
.meta .dot{color:var(--rule)}
.prose{margin-top:clamp(30px,3vw,52px)}
.prose>*{max-width:var(--measure);margin-inline:auto}
.prose h2{font-size:clamp(25px,2.5vw,36px);margin:calc(var(--gap) * 1.6) auto 18px;max-width:var(--measure)}
.prose p{font-size:var(--body)}
.prose ul,.prose ol{padding-left:1.2em;margin:0 0 1.05em}
.prose li{margin-bottom:.4em}
.prose>figure,.prose>.callout,.prose>.statrow,.prose>.timeline-wrap,.prose>.table-wrap,.prose>.pullquote,.prose>.blockquote,.prose>.chart{margin-block:clamp(34px,3.4vw,56px)}
.prose>figure.bleed,.prose>.table-wrap,.prose>.statrow,.prose>.chart{max-width:var(--breakout)}
.prose>figure.plate-wide{max-width:var(--breakout);display:grid;grid-template-columns:minmax(0,1.55fr) minmax(210px,1fr);gap:clamp(20px,2.4vw,34px);align-items:end}
.prose>figure.plate-wide .figcap{margin-top:0;max-width:38ch}
@media (max-width:900px){.prose>figure.plate-wide{grid-template-columns:minmax(0,1fr)}}
.prose>.timeline-wrap{max-width:var(--breakout)}
.prose>.pullquote{max-width:calc(var(--measure) + 12ch)}
.prose>figure.inset{max-width:var(--measure)}
.prose figure.inset{display:grid;grid-template-columns:300px minmax(0,1fr);gap:26px;align-items:start}
.prose figure.inset .figcap{margin-top:0}

.pullquote{margin:0;border-top:2px solid var(--secondary);border-bottom:1px solid var(--rule);padding:22px 0}
.pullquote p{font-family:"Bricolage Grotesque",sans-serif;font-weight:500;font-size:clamp(22px,2.1vw,30px);line-height:1.28;margin:0}
.blockquote{margin:0;padding:22px 26px;background:var(--ground-2);border-left:4px solid var(--accent)}
.blockquote p{font-size:calc(var(--body) + 1px);margin:0}
.blockquote cite{display:block;margin-top:12px;font-style:normal;font-size:14.5px;letter-spacing:.06em;color:var(--ink-2)}
.callout{margin:0;background:var(--secondary);color:#E7E4EB;padding:26px 30px}
.callout .eyebrow{color:#E7E4EB;letter-spacing:.2em;display:block;margin-bottom:10px}
.callout p{margin:0;font-size:calc(var(--body) + 1px);color:#E7E4EB}
.callout a{color:#fff}
.note{background:var(--ground-2);border:1px solid var(--hair);padding:16px 20px;font-size:16.5px;color:var(--ink-2)}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.datatable,table.versus{width:100%;border-collapse:collapse;font-size:17.5px;min-width:520px}
.datatable caption,.versus caption{text-align:left;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--accent);padding-bottom:12px}
.datatable th,.versus th{text-align:left;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent);padding:0 14px 11px 0;border-bottom:2px solid var(--ink)}
.datatable td,.versus td{padding:13px 14px 13px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.datatable tr.flag td{background:var(--secondary);color:#E7E4EB;padding-inline:10px;font-weight:600}
.datatable td.step{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-stretch:78%;font-size:24px}
.versus td:first-child{font-weight:600}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2px;background:var(--rule)}
.statblock{background:var(--ground);padding:22px 22px 24px}
.stat-num{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-stretch:78%;letter-spacing:-.03em;font-size:clamp(30px,3vw,44px);line-height:1;color:var(--accent)}
.stat-label{display:block;margin-top:10px;font-size:15.5px;line-height:1.4;color:var(--ink-2)}

.timeline-wrap{border-top:2px solid var(--ink);padding-top:20px}
.timeline-wrap>.eyebrow{display:block;margin-bottom:16px;color:var(--accent)}
ol.timeline{list-style:none;margin:0;padding:0}
ol.timeline li{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr);gap:24px;padding:14px 0;border-bottom:1px solid var(--rule)}
.t-when{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:17px;color:var(--secondary)}
.t-what{font-size:17px;line-height:1.5}

.chart{margin:0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{margin-top:14px;font-size:16px;color:var(--ink-2);max-width:66ch}
.chart .c-bar{fill:var(--accent)}
.chart .c-bar.hi{fill:var(--secondary)}
.chart .c-lab,.chart .c-val{font:600 13px/1 "Public Sans",sans-serif;fill:var(--ink)}
.chart .c-val{fill:var(--ink-2)}
.chart .c-axis{stroke:var(--rule);stroke-width:1}
.chart .c-line{fill:none;stroke:var(--accent);stroke-width:2.5}
.chart .c-dot{fill:var(--secondary)}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{margin-top:9px;font-size:15px;color:var(--ink-2)}
.map-figure .map-slot{background:repeating-linear-gradient(135deg,rgba(74,44,107,.14) 0 12px,rgba(74,44,107,.05) 12px 24px);aspect-ratio:16/9;border:1px solid var(--rule)}

.entity-ref{overflow-wrap:anywhere}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.profile-card{background:var(--ground-2);border:1px solid var(--hair);padding:22px;display:flex;flex-direction:column;gap:10px}
.profile-card .p-photo{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:6px}
.profile-card h3{font-size:22px}
.profile-card .p-role{margin:0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--secondary)}
.profile-card p{margin:0;font-size:16.5px;color:var(--ink-2)}
.profile-card .p-links{margin-top:auto;font-size:15.5px}
.profile-card .p-attr{font-size:13px;color:rgba(25,23,37,.72)}
.profile-card.no-photo{border-left:4px solid var(--accent)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.org-card{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center;padding:14px 16px;background:var(--ground-2);border:1px solid var(--hair);text-decoration:none;color:var(--ink)}
.org-card:hover{border-color:var(--accent)}
.org-logo{width:52px;height:52px;object-fit:contain;background:var(--dark)}
.org-name{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:17px;display:block}
.org-host{display:block;font-size:14px;color:var(--ink-2)}
.org-card.no-logo{grid-template-columns:minmax(0,1fr);border-left:4px solid var(--secondary)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.further-grid a{display:block;padding:20px 22px;background:var(--ground-2);border:1px solid var(--hair);text-decoration:none;color:var(--ink);font-family:"Bricolage Grotesque",sans-serif;font-weight:500;font-size:19px;line-height:1.24}
.further-grid a:hover{border-color:var(--accent);color:var(--accent)}
.further-grid a .rl-sec{display:block;font-family:"Public Sans",sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--secondary);margin-bottom:9px}
.endmatter{margin-top:clamp(48px,5vw,80px)}
.endmatter h2{font-size:clamp(20px,1.9vw,26px);margin-bottom:20px}
.related-links{list-style:none;margin:0;padding:0}

/* ---------- category / hub ---------- */
.cat-head{padding-block:clamp(34px,4vw,58px) 0}
.cat-head h1{font-size:clamp(32px,4vw,60px);max-width:30ch}
.cat-head .blurb{max-width:60ch;margin:22px 0 0;font-size:calc(var(--body) + 1px)}
.cat-lead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,3.4vw,56px);align-items:center;padding-block:clamp(30px,3vw,48px)}
.cat-lead h2{font-size:clamp(26px,2.8vw,42px);max-width:26ch}
.cat-lead p{margin:16px 0 0;color:var(--ink-2);max-width:54ch}
.subhead{border-top:2px solid var(--ink);padding-top:18px;margin-top:clamp(30px,3vw,52px);display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.subhead h2{font-size:clamp(20px,2vw,27px)}
.subhead .count{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-2)}
.cat-list{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:40px}
.cat-list>li{display:flex;flex-direction:column;background:var(--ground-2);border:1px solid var(--hair)}
.cat-list img{width:100%;aspect-ratio:16/10;object-fit:cover}
.cat-card-in{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.cat-card-in h3{font-size:22px;min-height:2.4em}
.cat-card-in h3 a{text-decoration:none;color:var(--ink)}
.cat-card-in h3 a:hover{color:var(--accent)}
.cat-card-in p{margin:0;font-size:16.5px;color:var(--ink-2)}
.cat-card-in .eyebrow{margin-top:auto;color:var(--secondary)}
.othersections{margin-top:var(--band);border-top:1px solid var(--rule);padding-top:24px;display:flex;flex-wrap:wrap;gap:14px 28px;font-size:15.5px}
.othersections a{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.othersections svg{width:18px;height:18px}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-top:36px}
.hub-card{background:var(--ground-2);border:1px solid var(--hair);padding:26px;display:flex;flex-direction:column;gap:12px}
.hub-card h2{font-size:24px}
.hub-card h2 a{text-decoration:none}
.hub-card ul{margin:6px 0 0;padding-left:1.1em;font-size:16.5px}
.hub-card li{margin-bottom:6px}
.archive-table{width:100%;border-collapse:collapse;font-size:17.5px;margin-top:30px}
.archive-table th{text-align:left;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border-bottom:2px solid var(--ink);padding:0 16px 11px 0}
.archive-table td{padding:14px 16px 14px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.archive-table td a{text-decoration:none;font-family:"Bricolage Grotesque",sans-serif;font-weight:500;font-size:19px}

.sg-block{border-top:2px solid var(--ink);margin-top:56px;padding-top:22px}
.sg-block>h2{font-size:26px;margin-bottom:6px}
.sg-block>.eyebrow{display:block;margin-bottom:24px}
.sg-demo{margin-bottom:34px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .piece{grid-template-columns:minmax(0,1fr)}
  .station{grid-template-columns:minmax(0,1fr)}
  .station .plate{max-width:520px}
  .entry,.entry-flip{grid-template-columns:minmax(90px,140px) minmax(0,1fr)}
  .entry .plate{grid-column:1 / -1;max-width:520px}
  .prose figure.inset{grid-template-columns:minmax(0,1fr)}
  .cat-lead{grid-template-columns:minmax(0,1fr)}
  .foot-in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  :root{--body:17.5px;--gap:22px;--measure:100%;--breakout:100%}
  .prose>*{max-width:100%}
  .prose h2{max-width:100%}
  .nav{gap:2px 20px}
  .nav a{font-size:16px;padding:11px 0;min-height:44px}
  .foot-nav{gap:0 26px}
  .foot-nav a{display:inline-flex;align-items:center;min-height:44px;padding:6px 0}
  .morelink{min-height:44px;align-items:center}
  .othersections a{min-height:44px;padding:4px 0}
  .sponsor-grid{grid-template-columns:minmax(0,1fr)}
  .sponsor img{width:100%}
  .spine{grid-template-columns:minmax(0,1fr)}
  .spine-list{border-left:0}
  .station{padding-left:0}
  .station::before{display:none}
  .entry,.entry-flip{grid-template-columns:minmax(0,1fr)}
  ol.timeline li{grid-template-columns:minmax(0,1fr);gap:6px}
  .figcap{flex-direction:column;gap:8px}
  .figcap .bar{margin-top:0}
  .cat-list{grid-template-columns:minmax(0,1fr);gap:24px}
  .cat-card-in h3{min-height:0}
  table.datatable,table.versus{min-width:440px}
}
@media (min-width:1600px){
  :root{--body:20px;--measure:72ch;--breakout:1320px;--wrap:1680px;--gap:32px}
  .cat-list{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}
  .prose figure.inset{grid-template-columns:380px minmax(0,1fr)}
  .station{--fw:520px}
}
@media (min-width:2200px){
  :root{--body:21px;--measure:76ch;--breakout:1560px;--wrap:1960px}
  .places{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
  .hub-grid{grid-template-columns:repeat(auto-fit,minmax(420px,1fr))}
  .station{--fw:640px}
}
@media print{.masthead,.foot,.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:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-grid-fill: fixed px columns leave a dead strip at wide widths — the tiles
   must stretch, and a tile with its own fixed width has to give that up too */
.sponsor-grid{grid-template-columns:repeat(auto-fit,minmax(276px,1fr))!important;justify-content:stretch!important}
.sponsor-grid>[data-partner],.sponsor-grid>*>[data-partner]{width:auto!important}

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

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
.sponsor.sponsor{justify-content:center!important}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:5;-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-nav-collapse: this nav printed 158px of stacked links at 390 before any content
   (6 links), and the build shipped no control to close it. A disclosure cannot be
   built from CSS alone — :hover and :focus-within are unreachable on touch until a link has
   already been tapped — so a hidden checkbox and its label were injected immediately before
   the nav, and the nav collapses against the checked state. Exactly the mechanism the builds
   that DO have a burger already use.
   Treatment "rule-flank", bold, seeded from the domain so 175 builds do not all ship the
   same hairline box in the same place; it inherits this build's font and colour, and where the
   nav's own parent has no inline padding (20px measured) the button carries the build's
   gutter (clamp(20px,4vw,60px)) so it cannot sit against the glass. The links are hidden,
   not removed: they stay in the markup. Desktop is untouched — every rule below is inside the
   phone breakpoint (900px here), where the button appears and the nav starts closed.
   Folded with the "display" technique and marked with the "dots" icon — the mechanism
   is deliberately not identical across the fleet either. */
.nav-gate{display:none}
@media (max-width:900px){
  .nav-gate{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:auto;border:0;padding:10px 0;letter-spacing:.18em;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}
  .nav-gate::before,.nav-gate::after{content:"";flex:1 1 auto;height:1px;background:currentColor;opacity:.4}
  .nav-gate-bars{width:13px;height:3px;flex:none;border-radius:99px;background:currentColor;box-shadow:5px 0 0 -0.5px currentColor,-5px 0 0 -0.5px currentColor}
  .nav{display:none}
  .nav-gate-c:checked ~ .nav{display:flex}
  .wrap.masthead-in:has(> .nav-gate){display:flow-root}
  .nav-gate:not(:has(~ .nav)){display:none}
}

/* op-money-columns: the supporters block ran one tile per row — 9 tiles,
   1584px at 390, 12% of the whole page. Two columns bring it to
   1329px (16% shorter). Checked before writing: no new overflow, smallest mark still
   129px wide, longest blurb 1 lines, tile heights 157-270px.
   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-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{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!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}

}

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