/* Virtual Bass Player — "The Correction" */

:root{
  /* palette: ground, ink, accent (fiesta red), secondary (petrol), quiet */
  --ground:#EFEAE1;
  --ink:#14110F;
  --accent:#D63A2F;
  --accent-deep:#B32C22;
  --accent-pale:#FFE6DC;
  --secondary:#0E6B72;
  --secondary-deep:#0A5157;
  --secondary-pale:#BEE0DE;
  --mat:#FFF4EC;
  --shade:#DED6C9;
  --line:#D8D0C4;
  --quiet:#6F6759;
  --quiet-dark:#A79E92;
  --ink-soft:#3D372F;
  --paper-dim:#E5DED3;

  --prose:68ch;
  --breakout:1120px;
  --shell:1560px;
  --gutter:20px;

  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:Spectral,Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --p-gap:1.15em;
  --unit-gap:48px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--accent-deep);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{color:var(--secondary);}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-0.028em;line-height:1.02;margin:0;text-wrap:balance;}
p{margin:0 0 var(--p-gap);text-wrap:pretty;}
figure{margin:0;}
table{border-collapse:collapse;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.icon{width:1.15em;height:1.15em;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter;vertical-align:-0.16em;}
.icon-lg{width:34px;height:34px;stroke-width:1.4;}

/* ---------- shell + flow grid ---------- */
.shell{width:min(var(--shell),100% - var(--gutter)*2);margin-inline:auto;}
.flow{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter),1fr)
    [break-start] minmax(0,calc((var(--breakout) - var(--prose))/2))
    [prose-start] min(var(--prose),100% - var(--gutter)*2) [prose-end]
    minmax(0,calc((var(--breakout) - var(--prose))/2)) [break-end]
    minmax(var(--gutter),1fr) [full-end];
}
.flow > *{grid-column:prose;}
.flow > .breakout{grid-column:break;}
.flow > .bleed{grid-column:full;}

/* ---------- masthead ---------- */
.masthead{background:var(--ink);color:var(--ground);}
.masthead-in{display:flex;align-items:center;gap:22px;padding:14px 0;flex-wrap:wrap;}
.wordmark{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ground);}
.wordmark:hover{color:var(--accent);}
.wordmark-type{font-family:var(--display);font-weight:800;font-size:clamp(18px,1.5vw,30px);line-height:0.88;letter-spacing:-0.035em;text-transform:uppercase;}
.split-mark{width:34px;height:34px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;color:var(--accent);}
.nav{margin-left:auto;}
.nav ul{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;list-style:none;margin:0;padding:0;}
.nav a{
  display:flex;align-items:center;gap:7px;text-decoration:none;color:var(--ground);
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:0.045em;text-transform:uppercase;
  padding:6px 0;
}
.nav a .icon{stroke:var(--accent);}
.nav a:hover .icon{stroke:var(--mat);}
.nav a[aria-current] .icon{stroke:var(--accent);}
.nav .quiet-link a .icon{stroke:var(--secondary-pale);}
.foot-nav a .icon{stroke:var(--ink);}
.card-meta .icon{stroke:var(--accent);}
.band-red .card-meta .icon,.band-teal .card-meta .icon{stroke:currentColor;}
.section-switch a .icon{stroke:var(--accent);}
.kicker .icon{stroke:var(--accent);}
.band-red .kicker .icon,.band-teal .kicker .icon,.page-head .kicker .icon{stroke:currentColor;}
.nav a:hover{color:var(--accent);}
.nav a[aria-current]{color:var(--mat);border-bottom:3px solid var(--accent);padding-bottom:3px;}
.nav .quiet-link a{color:var(--quiet-dark);}
.nav-toggle{display:none;}
.standing-line{font-size:14px;color:var(--quiet-dark);max-width:38ch;margin:0;}
@media (max-width:1250px){.standing-line{display:none;}}

/* ---------- homepage bands ---------- */
.band{padding:clamp(40px,4vw,96px) 0;}
.band-red{background:var(--accent);color:var(--mat);}
.band-red h2,.band-red h3{color:#FFF;}
.band-teal{background:var(--secondary);color:#EAF6F5;}
.band-teal h2,.band-teal h3{color:#FFF;}
.band-dark{background:var(--ink);color:var(--ground);}
.band-dim{background:var(--paper-dim);}
.band-head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(14px,1.8vw,44px);margin-bottom:clamp(20px,2.2vw,48px);}
.band-no{
  font-family:var(--display);font-weight:800;line-height:0.74;letter-spacing:-0.06em;
  font-size:clamp(56px,9vw,190px);color:transparent;-webkit-text-stroke:2px var(--ink);flex:none;
}
.band-red .band-no{-webkit-text-stroke-color:var(--mat);}
.band-teal .band-no{-webkit-text-stroke-color:#EAF6F5;}
.band-dark .band-no{-webkit-text-stroke-color:var(--accent);}
.band-head h2{font-size:clamp(26px,3vw,62px);line-height:0.98;max-width:26ch;flex:1 1 min(100%,18ch);}
.band-more{
  margin-left:auto;white-space:nowrap;align-self:flex-end;text-decoration:none;color:inherit;
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:0.09em;text-transform:uppercase;
  border-bottom:2px solid currentColor;padding-bottom:3px;
}
.band-more:hover{color:var(--ink);}
.band-red .band-more,.band-teal .band-more{color:#FFFFFF;}
.kicker{
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:0.17em;text-transform:uppercase;
  color:var(--quiet);margin:0 0 12px;display:flex;align-items:center;gap:9px;
}
.band-red .kicker{color:#FFFFFF;}
.band-teal .kicker{color:#FFFFFF;}
.band-dark .kicker{color:#F1685C;}

.hero-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));background:var(--ink);}
.hero-text{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(24px,3vw,76px);color:var(--ground);min-height:clamp(360px,42vw,780px);}
.hero-text h2{font-size:clamp(28px,4.1vw,88px);line-height:0.94;color:#FFF;max-width:19ch;margin:clamp(16px,2vw,40px) 0;}
.hero-deck{font-size:clamp(16px,1.1vw,22px);color:#C6BDB1;max-width:50ch;}
.hero-img{position:relative;min-height:clamp(300px,42vw,780px);background:#241E1A;}
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.btn{
  display:inline-block;text-decoration:none;background:var(--accent);color:var(--mat);
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:0.09em;text-transform:uppercase;padding:12px 20px;
}
.btn:hover{background:var(--ground);color:var(--ink);}
.statement{
  font-family:var(--display);font-weight:200;font-size:clamp(24px,3.2vw,68px);line-height:1.03;letter-spacing:-0.03em;
  max-width:32ch;margin:0;
}

/* ---------- figures: three treatments ---------- */
.figcap{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 28px;padding-top:12px;}
.figcap .cap{flex:1 1 26ch;max-width:78ch;margin:0;font-size:15px;line-height:1.5;color:var(--ink-soft);}
.figcap .credit{flex:0 1 22ch;margin:0;margin-left:auto;text-align:right;font-family:var(--mono);font-size:11.5px;line-height:1.4;color:var(--quiet);}
.band-red .figcap .cap{color:#FFF4EC;} .band-red .figcap .credit{color:#FFFFFF;}
.band-teal .figcap .cap{color:#EAF6F5;} .band-teal .figcap .credit{color:#FFFFFF;}
.band-dark .figcap .cap{color:#C6BDB1;} .band-dark .figcap .credit{color:var(--quiet-dark);}
@media (max-width:700px){.figcap .credit{text-align:left;margin-left:0;flex-basis:100%;}}

/* flattened caption row: one line, ruled, caption and credit on the same baseline */
.figcap--flat{align-items:baseline;gap:8px 24px;padding:10px 0 0;border-top:1px solid var(--line);flex-wrap:nowrap;}
.figcap--flat .cap{flex:1 1 auto;font-size:14.5px;line-height:1.35;max-width:none;color:var(--ink-soft);}
.figcap--flat .credit{flex:0 0 auto;white-space:nowrap;}
@media (max-width:700px){.figcap--flat{flex-wrap:wrap;}.figcap--flat .credit{white-space:normal;}}

/* 1 — mat-mounted */
.fig-mat{margin:var(--unit-gap) 0;}
.fig-mat .mat{background:var(--mat);padding:12px;border:1px solid var(--line);}
.band-dark .fig-mat .mat,.band-red .fig-mat .mat,.band-teal .fig-mat .mat{background:rgba(255,244,236,.12);border-color:rgba(255,244,236,.28);}
.fig-mat img{width:100%;aspect-ratio:16/10;object-fit:cover;}
.fig-mat .figcap{border-top:1px solid var(--line);margin-top:10px;}

/* 2 — full-bleed plate */
.fig-bleed{margin:calc(var(--unit-gap) + 16px) 0;}
.fig-bleed img{width:100%;height:clamp(260px,42vw,760px);object-fit:cover;}
.fig-bleed .figcap{width:min(var(--shell),100% - var(--gutter)*2);margin-inline:auto;}

/* 3 — offset unit: image and caption side by side, wider than the prose */
.flow > .fig-inset{grid-column:break;}
.fig-inset{margin:var(--unit-gap) 0;border-left:6px solid var(--accent);padding-left:16px;display:grid;gap:16px 26px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));align-items:center;}
.fig-inset img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.fig-inset .figcap{padding-top:0;flex-direction:column;align-items:flex-start;gap:8px;}
.fig-inset .figcap .cap{font-size:16px;flex:0 1 auto;}
.fig-inset .figcap .credit{text-align:left;margin-left:0;flex-basis:auto;}
.fig-inset.right{border-left:0;border-right:6px solid var(--secondary);padding-left:0;padding-right:16px;}
.fig-inset.right > img{order:2;}
.fig-inset.right > .figcap{order:1;}
@media (max-width:620px){.fig-inset.right > img{order:0;}.fig-inset.right > .figcap{order:1;}}
.flow > h2,.flow > .breakout,.flow > .bleed{clear:both;}

.article-figure img{width:100%;}
.article-figure figcaption{padding-top:10px;font-size:15px;color:var(--ink-soft);}
.gallery{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));margin:var(--unit-gap) 0;}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;}
.gallery figcaption{padding-top:9px;font-size:14px;color:var(--ink-soft);}

/* ---------- signature divider ---------- */
.splitrule{display:flex;align-items:center;gap:14px;color:var(--accent);margin:10px 0 0;}
.splitrule::before,.splitrule::after{content:"";flex:1;border-top:1px solid currentColor;}
.splitrule svg{flex:none;stroke:currentColor;fill:none;}
.splitrule--quiet{color:var(--line);}

/* ---------- cards / listings ---------- */
.card-grid{display:grid;gap:clamp(18px,2vw,44px);grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));}
.card{display:flex;flex-direction:column;text-decoration:none;color:inherit;height:100%;}
.card-mat{display:block;background:var(--mat);padding:8px;border:1px solid var(--line);transition:border-color .15s,background-color .15s;}
.band-red .card-mat,.band-teal .card-mat,.band-dark .card-mat{background:rgba(255,244,236,.12);border-color:rgba(255,244,236,.3);}
.card:hover .card-mat{border-color:var(--accent);}
.band-red .card:hover .card-mat,.band-teal .card:hover .card-mat{border-color:var(--mat);background:rgba(255,244,236,.22);}
.card .card-img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--shade);display:block;}
.card .year{margin-top:18px;}
.card h3{font-size:clamp(18px,1.3vw,27px);line-height:1.06;margin:13px 0 0;min-height:2.2em;}
.card p{font-size:15px;line-height:1.5;color:var(--ink-soft);margin:9px 0 0;}
.card .card-meta{margin-top:auto;padding-top:12px;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--quiet);display:flex;align-items:center;gap:7px;}
.card:hover h3{color:var(--accent);}
.band-teal .card,.band-red .card,.band-dark .card{color:inherit;}
.band-teal .card:hover h3,.band-red .card:hover h3{color:var(--ink);}
.band-teal .card p{color:#FFFFFF;}
.band-red .card p{color:#FFFFFF;}
.band-dark .card p{color:#C6BDB1;}
.band-red .card-meta{color:#FFFFFF;}
.band-teal .card-meta{color:#FFFFFF;}
.band-dark .card-meta{color:var(--quiet-dark);}

.lead-entry{display:grid;gap:clamp(18px,2.4vw,56px);grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));align-items:center;}
.lead-entry h3{font-size:clamp(23px,2.4vw,50px);line-height:0.98;max-width:20ch;}
.lead-entry img{width:100%;aspect-ratio:5/4;object-fit:cover;background:var(--shade);}
.lead-entry .lead-body{font-size:clamp(16px,1.05vw,21px);color:var(--ink-soft);max-width:54ch;margin-top:14px;}
.band-teal .lead-entry .lead-body,.band-red .lead-entry .lead-body{color:#FFFFFF;}

.year{font-family:var(--display);font-weight:800;font-size:clamp(26px,2.2vw,52px);line-height:0.82;letter-spacing:-0.045em;color:var(--accent);display:block;}

/* ---------- article ---------- */
.article-head{padding:clamp(26px,3vw,74px) 0 clamp(18px,2vw,40px);background:var(--accent);color:var(--mat);}
.article-head h1{font-size:clamp(30px,5.2vw,116px);line-height:0.88;letter-spacing:-0.042em;max-width:19ch;}
.article-head .kicker{color:#FFFFFF;}
.article-head .kicker a{color:inherit;}
.lead{font-size:clamp(18px,1.35vw,28px);line-height:1.42;max-width:54ch;margin:clamp(16px,1.7vw,36px) 0 0;color:#FFFFFF;}
.article-body{padding:clamp(28px,3.2vw,76px) 0 clamp(40px,4vw,104px);}
.article-body > p{font-size:1.06em;}
.article-body h2{font-size:clamp(23px,2.1vw,44px);line-height:1;margin:clamp(30px,3vw,64px) 0 16px;}
.article-body h2 .icon{color:var(--accent);}

.pullquote{margin:var(--unit-gap) 0;padding:0;border:0;display:flex;gap:18px;align-items:flex-start;}
.pullquote svg{flex:none;color:var(--accent);}
.pullquote p{font-family:var(--display);font-weight:200;font-size:clamp(21px,1.9vw,40px);line-height:1.06;letter-spacing:-0.025em;margin:0;max-width:22ch;}
.blockquote{margin:var(--unit-gap) 0;padding:0 0 0 20px;border-left:5px solid var(--secondary);}
.blockquote p{font-size:1.05em;font-style:italic;margin:0 0 8px;}
.blockquote cite{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:0.09em;text-transform:uppercase;font-style:normal;color:var(--quiet);}
.callout{margin:var(--unit-gap) 0;background:var(--ink);color:var(--ground);padding:clamp(18px,1.6vw,32px);}
.callout .kicker{color:var(--accent);}
.callout p{margin:0;font-size:1.02em;}
.note{font-size:15px;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:10px;}

.notes-panel{margin:var(--unit-gap) 0;background:var(--mat);border-top:4px solid var(--ink);padding:clamp(16px,1.6vw,30px);}
.notes-panel h2,.notes-panel h3{font-size:clamp(19px,1.4vw,30px);margin:0 0 14px;line-height:1.04;}
.notes-panel h2 + ol,.notes-panel h2 + ul{margin-bottom:26px;}
.notes-panel--img{display:grid;gap:clamp(16px,1.8vw,40px);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));align-items:start;}
.notes-panel--img .panel-fig .mat{background:var(--ground);padding:10px;}
.notes-panel--img .panel-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.notes-panel--img .panel-fig .figcap{flex-direction:column;align-items:flex-start;gap:6px;}
.notes-panel--img .panel-fig .figcap .cap{flex:0 1 auto;font-size:15px;}
.notes-panel--img .panel-fig .figcap .credit{text-align:left;margin-left:0;flex-basis:auto;}
@media (min-width:1000px){.notes-panel--img{grid-template-columns:minmax(240px,0.8fr) minmax(0,1.4fr);}}
.notes-cols{columns:2 20rem;column-gap:clamp(24px,2.4vw,56px);}
.notes-cols li{break-inside:avoid;}
.keylist{list-style:none;margin:0;padding:0;}
.keylist li{padding:10px 0;border-top:1px solid var(--line);font-size:15.5px;line-height:1.5;}
.keylist li:first-child{border-top:0;}
.keylist b{font-family:var(--display);font-weight:700;letter-spacing:-0.01em;}

.timeline{list-style:none;margin:0;padding:0;}
.timeline li{display:flex;flex-wrap:wrap;gap:6px 22px;padding:12px 0;border-top:1px solid var(--line);}
.timeline li:first-child{border-top:0;}
.t-when{flex:0 0 min(100%,15ch);font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:-0.01em;color:var(--accent);}
.t-what{flex:1 1 22ch;font-size:15.5px;line-height:1.5;}

.statrow{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));margin:var(--unit-gap) 0;}
.statblock{background:var(--secondary);color:#EAF6F5;padding:16px;}
.stat-num{display:block;font-family:var(--display);font-weight:800;font-size:clamp(26px,2.4vw,48px);line-height:0.9;letter-spacing:-0.04em;}
.stat-label{display:block;margin-top:8px;font-size:14px;line-height:1.4;color:var(--secondary-pale);}

.tablewrap{overflow-x:auto;margin:var(--unit-gap) 0;}
.versus,.datatable{width:100%;min-width:520px;font-size:15.5px;}
.versus th,.datatable th{text-align:left;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:0.05em;padding:10px 16px 10px 0;border-bottom:1px solid var(--ink);}
.versus td,.datatable td{padding:12px 16px 12px 0;border-bottom:1px solid var(--line);vertical-align:top;}
.versus th:last-child,.versus td:last-child,.datatable th:last-child,.datatable td:last-child{padding-right:0;}
.versus .col-key{color:var(--quiet);}
.versus .col-mark{color:var(--accent-deep);}

.chart figcaption{padding-top:10px;font-size:14px;color:var(--ink-soft);}
.chart svg{width:100%;height:auto;}

.profile-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin:var(--unit-gap) 0;}
.profile-card{background:var(--mat);border:1px solid var(--line);padding:16px;}
.profile-card .p-photo{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:12px;}
.profile-card h3{font-size:21px;}
.profile-card .p-role{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:0.11em;text-transform:uppercase;color:var(--quiet);margin:6px 0 10px;}
.profile-card p{font-size:15px;}
.p-links a{margin-right:14px;}
.org-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));margin:var(--unit-gap) 0;}
.org-card{display:flex;flex-direction:column;gap:6px;padding:14px;background:var(--mat);border:1px solid var(--line);text-decoration:none;color:inherit;}
.org-logo{max-height:34px;width:auto;object-fit:contain;}
.org-name{font-family:var(--display);font-weight:700;}
.org-host{font-family:var(--mono);font-size:12px;color:var(--quiet);}
.entity-ref{white-space:nowrap;}

.further-grid,.related-links{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));list-style:none;margin:0;padding:0;}
.related-links a,.further-grid a{
  display:block;text-decoration:none;color:inherit;border-top:3px solid var(--ink);padding-top:12px;
  font-family:var(--display);font-weight:700;font-size:19px;line-height:1.08;
}
.related-links a:hover,.further-grid a:hover{color:var(--accent);}
.related-links img{width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:10px;background:var(--shade);}
.end-unit{margin:calc(var(--unit-gap) + 8px) 0 0;padding-top:28px;border-top:1px solid var(--line);}

/* ---------- category / section pages ---------- */
.page-head{background:var(--accent);color:var(--mat);padding:clamp(26px,3.2vw,82px) 0;}
.page-head.teal{background:var(--secondary);color:#EAF6F5;}
.page-head h1{font-size:clamp(30px,4.6vw,104px);line-height:0.9;max-width:20ch;}
.page-head .kicker{color:#FFFFFF;}
.page-head.teal .kicker{color:#FFFFFF;}
.page-head .kicker a{color:inherit;}
.page-head .blurb{font-size:clamp(16px,1.15vw,23px);max-width:56ch;margin:18px 0 0;color:#FFFFFF;}
.page-head .count{font-family:var(--mono);font-size:13px;letter-spacing:0.06em;margin:14px 0 0;color:#FFFFFF;}
.section-switch{display:flex;flex-wrap:wrap;gap:10px 18px;padding:16px 0;border-bottom:1px solid var(--line);}
.section-switch a{
  display:flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:0.09em;text-transform:uppercase;
}
.section-switch a:hover{color:var(--accent);}
.cat-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(26px,2.6vw,52px);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));}
.cat-list li{display:flex;}
.cat-row{display:grid;gap:clamp(18px,2vw,44px);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:center;padding:clamp(16px,1.6vw,30px);background:var(--mat);border-top:3px solid var(--ink);margin-bottom:clamp(26px,2.6vw,52px);}
.cat-row img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--shade);}
.cat-row h2{font-size:clamp(22px,2.1vw,44px);line-height:1;}
.cat-row p{font-size:clamp(15.5px,1.02vw,20px);color:var(--ink-soft);margin:12px 0 0;max-width:54ch;}
.archive-table{width:100%;font-size:16px;}
.archive-table th{text-align:left;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;color:var(--quiet);padding:10px 20px 10px 0;border-bottom:1px solid var(--ink);}
.archive-table td{padding:14px 20px 14px 0;border-bottom:1px solid var(--line);vertical-align:top;}
.archive-table td:last-child,.archive-table th:last-child{padding-right:0;}
.archive-table .t-title{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.1;}
.archive-table a{text-decoration:none;color:inherit;}
.archive-table a:hover{color:var(--accent);}

/* ---------- supporters ---------- */
.supporters{background:var(--ink);color:var(--ground);}
.sponsor-grid{display:grid;grid-template-columns:repeat(auto-fit,272px);justify-content:center;gap:18px;padding:0;margin:0;}
.sponsor{
  display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ground);
  background:#221D19;padding:14px;border:1px solid #322A24;
}
.sponsor:hover{border-color:var(--accent);color:var(--ground);}
.sponsor-logo{
  width:100%;height:56px;background:#0D0B09;display:flex;align-items:center;justify-content:center;padding:8px 12px;
}
.sponsor-logo img{max-height:40px;max-width:100%;width:auto;height:auto;object-fit:contain;}
.sponsor-name{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sponsor-blurb{font-size:13.5px;line-height:1.45;color:#A79E92;min-height:2.9em;}
.sponsor.feat{border-color:#4A3F36;}

/* ---------- footer ---------- */
.site-foot{background:var(--accent);color:var(--mat);padding:clamp(26px,2.6vw,60px) 0;}
.site-foot a{color:var(--mat);text-decoration:none;}
.site-foot a:hover{color:var(--ink);}
.foot-in{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,70px);align-items:flex-start;}
.foot-mark{font-family:var(--display);font-weight:800;font-size:clamp(22px,2vw,42px);line-height:0.9;letter-spacing:-0.035em;text-transform:uppercase;flex:1 1 min(100%,14ch);}
.foot-line{flex:1 1 min(100%,30ch);font-size:15px;color:#FFFFFF;max-width:46ch;}
.foot-nav{display:grid;gap:8px 26px;grid-template-columns:repeat(auto-fit,minmax(150px,auto));flex:1 1 min(100%,20ch);}
.foot-nav a{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:0.09em;text-transform:uppercase;display:flex;align-items:center;gap:7px;color:#FFFFFF;}

/* ---------- narrow ---------- */
@media (max-width:900px){
  .nav{margin-left:0;flex-basis:100%;}
  .nav-toggle{display:block;margin-left:auto;background:none;border:1px solid #3B332C;color:var(--ground);
    font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;padding:8px 12px;cursor:pointer;}
  .nav ul{display:none;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 0 4px;}
  .nav.open ul{display:flex;}
  .nav a{font-size:15px;padding:9px 0;}
}
@media (max-width:560px){
  body{font-size:16.5px;}
  :root{--unit-gap:44px;--gutter:16px;}
  .notes-cols{columns:1;}
}

/* ---------- above the desktop cap ---------- */
@media (min-width:1280px){
  :root{--prose:70ch;--breakout:1180px;--shell:1480px;--gutter:32px;}
}
@media (min-width:1600px){
  body{font-size:18.5px;}
  :root{--prose:74ch;--breakout:1360px;--shell:1680px;--gutter:44px;--unit-gap:52px;}
  .card-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));}
  .cat-list{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));}
}
@media (min-width:2000px){
  body{font-size:20px;}
  :root{--prose:80ch;--breakout:1620px;--shell:2000px;--gutter:60px;--unit-gap:64px;}
}
@media (min-width:2400px){
  body{font-size:21px;}
  :root{--prose:84ch;--breakout:1840px;--shell:2280px;}
}

@media print{
  .masthead,.site-foot,.supporters{background:#fff;color:#000;}
}

/* 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-feat-level: the partner pool is unranked, so a two-tile accent border marks
   nothing. Match the rest of the row. */
.sponsor.feat .sponsor-logo,.sponsor.feat .logo-box,.sponsor.feat .sp-logo{border-color:var(--line)!important}

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

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

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

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
.sponsor.sponsor{justify-content:center!important}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name):not(.sponsor-box):not(.sp-logo):not(.sponsor__logo){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;}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.sponsor-grid .sponsor .sponsor-logo.sponsor-logo{display:block!important;width:100%!important}
.sponsor-grid .sponsor.sponsor img{height:38px!important;display:block!important;width:100%!important}

/* op-no-tile-ground: operator: extra background. Here it is the TILE, not the mark — .sponsor
   carries rgb(34,29,25) against a darker page, so each one reads as a box. Fill only. */
.sponsor-grid .sponsor{background:transparent}

/* op-figcap-credit-fit: p.credit measured 436px inside a 358px .figcap — it is a flex item with
   `flex:0 0 auto` and the default `min-width:auto`, so it took its max-content width and could
   not shrink, putting the page 295px over at 390. The text itself wraps fine; it was never
   given the chance. Now it shares the wrapping row like .cap beside it. */
@media (max-width:640px){
  .figcap .credit{flex:1 1 100%;min-width:0}
}

/* op-band-more-fit: on archive.html the "more" link ran 533px wide inside a 360px page —
   measured right=549, the page 295px over. `.band-more` is a flex item in `.band-head` whose
   label is a full sentence ("The people you have already heard, whether you were listening or
   not"), and with the default `min-width:auto` a flex item cannot shrink below its content, so
   it took its max-content width instead of wrapping. `.band-head` already wraps; the link just
   needed permission to be narrower than its own sentence. Desktop is unaffected — there the
   link is far narrower than the row. */
@media (max-width:900px){
  /* min-width:0 alone was not enough: `.band-more` also carries `white-space:nowrap`, so the
     box shrank and the sentence simply spilled out of it. The label wraps at phone width and
     stops being right-aligned by margin-left:auto, which would otherwise hold it off-screen. */
  .band-head .band-more{min-width:0;flex:1 1 100%;white-space:normal;margin-left:0;align-self:flex-start}
}

/* op-money-columns: the supporters block ran one tile per row — 8 tiles,
   1299px at 390, 11% of the whole page. Two columns bring it to
   843px (35% shorter). Checked before writing: no new overflow, smallest mark still
   116px wide, longest blurb 2 lines, tile heights 177-218px.
   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.
   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-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.card > span.card-mat > img.card-img,
  article > figure.bleed.fig-bleed > img,
  div.article-body.flow > figure.fig-inset > img,
  div.shell > article.cat-row > img,
  div.shell > article.lead-entry > img,
  figure > div > img,
  figure.breakout.fig-mat > div.mat > img,
  figure.panel-fig > div.mat > img,
  li > a > img,
  section.band.band-dim > div.shell > img,
  section.hero-split > div.hero-img > img){height:auto}
/* op-img-dims:end */

/* op-odd-tier-lead: money_slots changed a tier's size — .sponsor-grid (9 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-grid:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}
@media (min-width:780px) and (max-width:899px){.sponsor-grid.sponsor-grid:has(> [data-partner]){grid-template-columns:repeat(auto-fill,minmax(min(272px,calc(50% - 9px)),1fr))!important;justify-content:stretch!important}.sponsor-grid.sponsor-grid > [data-partner]{width:auto!important;max-width:none!important}}
[data-partner] .sponsor-logo{background:transparent!important}