/* Liner Notes — After Hours · site-wide stylesheet
   Palette: midnight #0B0C13 · panel #11131D · brass #D4A94F · smoky red #C14A32 · cream #E8E3D8 */
:root{
  --paper:#0B0C13;
  --panel:#11131D;
  --panel-2:#161927;
  --ink:#E8E3D8;
  --ink-soft:#CFC9BC;
  --muted:#A9A395;
  --faint:#7C7787;
  --brass:#D4A94F;
  --red:#C14A32;
  --line:rgba(212,169,79,.22);
  --line-soft:rgba(212,169,79,.14);
  --acc:var(--brass);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Work Sans",system-ui,sans-serif;
  --gutter:clamp(20px,4.5vw,56px);
  --measure:66ch;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--brass);text-decoration:none}
a:hover{color:var(--ink)}
::selection{background:rgba(212,169,79,.35)}

/* ---------- header ---------- */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px var(--gutter);border-bottom:1px solid var(--line);position:relative}
.wordmark{font:italic 500 30px/1 var(--serif);color:var(--ink);letter-spacing:.01em;white-space:nowrap}
.wordmark:hover{color:var(--brass)}
.wordmark small{display:block;font:500 10px/1.5 var(--sans);letter-spacing:.34em;color:var(--faint);margin-top:6px;font-style:normal;white-space:normal}
.site-nav{display:flex;gap:clamp(16px,2.4vw,34px);align-items:center;font:500 12.5px/1 var(--sans);letter-spacing:.15em;flex-wrap:wrap}
.site-nav a{color:#9A94A6;padding:6px 0}
.site-nav a:hover{color:var(--ink)}
.site-nav a.on{color:var(--brass);border-bottom:1px solid var(--brass);padding-bottom:5px}
.nav-toggle{display:none}
.nav-btn{display:none}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);padding:34px var(--gutter) 40px;display:flex;align-items:baseline;justify-content:space-between;gap:18px 40px;flex-wrap:wrap}
.site-foot .footmark{font:italic 500 20px/1.3 var(--serif);color:var(--muted)}
.site-foot .disclaimer{font:400 13.5px/1.7 var(--sans);color:var(--faint);max-width:56ch}
.foot-nav{display:flex;gap:18px 26px;flex-wrap:wrap;font:500 11.5px/1 var(--sans);letter-spacing:.14em;width:100%;padding-top:20px;margin-top:22px;border-top:1px solid var(--line-soft)}
.foot-nav a{color:#8A8496}
.foot-nav a:hover{color:var(--brass)}

/* ---------- buttons / kickers ---------- */
.kicker{font:500 12px/1.5 var(--sans);letter-spacing:.28em;color:var(--red)}
.kicker.gold{color:var(--brass)}
.btn{display:inline-block;font:500 13px/1 var(--sans);letter-spacing:.12em;color:var(--brass);border:1px solid rgba(212,169,79,.45);padding:15px 24px;transition:background .2s,color .2s}
.btn:hover{background:var(--brass);color:#0B0C13}
.btn.quiet{border-color:transparent;padding:15px 0}
.btn.quiet:hover{background:none;color:var(--ink)}

/* ---------- homepage hero ---------- */
.hero{position:relative;margin:0 clamp(0px,2vw,24px);overflow:hidden}
.hero img{width:100%;height:min(72vh,640px);object-fit:cover}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,12,19,.96) 0%,rgba(11,12,19,.55) 44%,rgba(11,12,19,.08) 78%)}
.hero .hero-copy{position:absolute;left:0;right:0;bottom:0;padding:0 clamp(24px,5vw,72px) clamp(36px,6vh,84px);display:flex;flex-direction:column;gap:16px;max-width:900px}
.hero h1{margin:0;font:italic 500 clamp(40px,6.2vw,76px)/1.02 var(--serif);text-wrap:pretty}
.hero .dek{margin:0;font:400 clamp(16px,1.6vw,19.5px)/1.6 var(--sans);color:#C4BEB0;max-width:36em;text-wrap:pretty}
.hero .hero-meta{font:500 12px/1 var(--sans);letter-spacing:.16em;color:var(--muted)}

/* ---------- section bands ---------- */
.band{padding:clamp(44px,7vh,72px) var(--gutter)}
.band-head{display:flex;align-items:baseline;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.band-head h2{margin:0;font:italic 500 clamp(26px,3vw,34px)/1.1 var(--serif)}
.band-head .rule{flex:1;height:1px;background:var(--line);min-width:60px}
.band-head .band-note{font:400 14px/1.5 var(--sans);color:var(--faint)}

/* ---------- cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.card{background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.card:hover{border-color:rgba(212,169,79,.5);transform:translateY(-3px)}
.card .card-img{aspect-ratio:16/9.5;overflow:hidden}
.card .card-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
.card .card-body{padding:24px 26px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.card .tag{font:500 11px/1.5 var(--sans);letter-spacing:.22em;color:var(--acc)}
.card h3{margin:0;font:italic 500 27px/1.14 var(--serif);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.28em;text-wrap:pretty}
.card p{margin:0;font:400 15px/1.6 var(--sans);color:var(--muted);flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .card-meta{font:500 11.5px/1 var(--sans);letter-spacing:.14em;color:var(--faint);display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.card .card-meta .go{color:var(--brass)}
a.card{color:inherit}

/* CSS-only "more" expander */
.more-toggle{position:absolute;left:-9999px}
.more-cards{display:none}
.more-toggle:checked ~ .card-grid .more-cards{display:flex}
.more-label{display:inline-block;margin-top:26px;font:500 12.5px/1 var(--sans);letter-spacing:.14em;color:var(--brass);border-bottom:1px solid rgba(212,169,79,.45);padding-bottom:6px;cursor:pointer}
.more-label:hover{color:var(--ink)}
.more-toggle:checked ~ .more-label .show-more,.more-label .show-less{display:none}
.more-toggle:checked ~ .more-label .show-less{display:inline}

/* ---------- eras timeline (signature) ---------- */
.eras{background:var(--panel);border-block:1px solid var(--line)}
.era-strip{display:grid;grid-template-columns:repeat(7,minmax(190px,1fr));gap:0;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px}
.era{scroll-snap-align:start;padding:26px 22px 8px;border-left:1px solid var(--line-soft);position:relative}
.era:first-child{border-left:none;padding-left:2px}
.era .dot{width:10px;height:10px;border-radius:50%;background:var(--brass);margin-bottom:16px;box-shadow:0 0 0 4px rgba(212,169,79,.12)}
.era:last-child .dot{background:var(--red);box-shadow:0 0 0 4px rgba(193,74,50,.15)}
.era h3{margin:0 0 2px;font:italic 500 25px/1.1 var(--serif)}
.era .when{font:500 11px/1.5 var(--sans);letter-spacing:.2em;color:var(--brass)}
.era p{margin:10px 0 0;font:400 14px/1.6 var(--sans);color:var(--muted)}
.era-line{height:1px;background:linear-gradient(to right,var(--brass),rgba(212,169,79,.15));margin:0 0 6px}

/* how-to-listen steps */
.listen-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:44px;padding-top:38px;border-top:1px solid var(--line-soft)}
.step{display:flex;flex-direction:column;gap:10px}
.step .n{font:italic 500 44px/1 var(--serif);color:var(--red)}
.step h4{margin:0;font:600 16px/1.35 var(--sans);letter-spacing:.02em;color:var(--ink)}
.step p{margin:0;font:400 14.5px/1.6 var(--sans);color:var(--muted)}

/* ---------- supporters: The Table by the Door ---------- */
.supporters{border-top:1px solid var(--line);padding:clamp(40px,6vh,60px) var(--gutter) clamp(44px,7vh,64px)}
.supporters .sup-head{display:flex;flex-direction:column;gap:8px;margin-bottom:28px;max-width:70ch}
.supporters h2{margin:0;font:italic 500 28px/1.15 var(--serif)}
.supporters .sup-note{font:400 15px/1.6 var(--sans);color:var(--muted)}
.sponsor-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sponsor{display:flex;flex-direction:column;gap:11px;background:#080910;border:1px solid var(--line-soft);padding:16px 17px;align-items:flex-start;justify-content:flex-start;transition:border-color .2s}
.sponsor:hover{border-color:rgba(212,169,79,.45)}
.sponsor img{width:auto;max-width:100%;max-height:34px;object-fit:contain;opacity:.92;align-self:flex-start}
.sponsor-blurb{font:400 12.5px/1.5 var(--sans);color:var(--faint);text-align:left}
.sponsor-blurb:empty{display:none}

/* ---------- article ---------- */
.progress{position:fixed;top:0;left:0;height:2px;background:var(--brass);width:0;z-index:50}
.article-hero{position:relative;overflow:hidden}
.article-hero img{width:100%;height:min(58vh,520px);object-fit:cover}
.article-hero .scrim{position:absolute;inset:0;background:linear-gradient(to top,#0B0C13 2%,rgba(11,12,19,.42) 50%,rgba(11,12,19,.12) 85%)}
.article-head{padding:clamp(30px,5vh,52px) var(--gutter) 0;display:grid;grid-template-columns:[full-start] minmax(0,1fr) [content-start] min(78ch,100%) [content-end] minmax(0,2fr) [full-end]}
.article-head>*{grid-column:content}
.article-head .kicker a{color:inherit}
.article-head h1{margin:14px 0 18px;font:italic 500 clamp(38px,5.4vw,68px)/1.05 var(--serif);text-wrap:pretty}
.article-head .dek{margin:0 0 18px;font:400 clamp(17px,1.5vw,20px)/1.65 var(--sans);color:var(--muted);max-width:44em;text-wrap:pretty}
.article-head .art-meta{font:500 12px/1.8 var(--sans);letter-spacing:.16em;color:var(--faint);padding-bottom:8px}
.article-head .art-meta b{color:var(--brass);font-weight:500}
figure.article-figure{margin:34px 0}
figure.article-figure img{width:100%;object-fit:cover}
figure.article-figure figcaption,.chart figcaption,.map-figure figcaption{font:italic 400 15px/1.6 var(--serif);color:var(--faint);padding-top:10px;border-bottom:1px solid var(--line-soft);padding-bottom:12px}
.article-body{padding:clamp(8px,2vh,20px) var(--gutter) 56px;display:grid;grid-template-columns:[full-start] minmax(0,1fr) [content-start] min(var(--measure),100%) [content-end] minmax(0,2fr) [full-end];row-gap:4px}
.article-body>*{grid-column:content;min-width:0}
.article-body p{margin:0 0 26px;font-size:19.5px;line-height:1.78;color:var(--ink-soft);text-wrap:pretty}
.article-body>p:first-of-type{font-size:21px}
.article-body>p:first-of-type::first-letter{font:italic 500 4.05em/0.78 var(--serif);color:var(--brass);float:left;padding:8px 14px 0 0}
.article-body h2{margin:34px 0 20px;font:italic 500 clamp(27px,2.6vw,33px)/1.2 var(--serif);display:flex;align-items:baseline;gap:16px;text-wrap:pretty}
.article-body h2 .secno{font:500 12px/1 var(--sans);letter-spacing:.2em;color:var(--red);white-space:nowrap;transform:translateY(-4px)}
.article-body em{color:var(--ink)}
.article-body a{border-bottom:1px solid rgba(212,169,79,.4)}
.article-body a:hover{border-color:var(--ink)}
.endmark{color:var(--brass);font-size:20px;padding:6px 0 0;grid-column:content;text-align:left}

/* breakout components (span into right margin) */
.pullquote{grid-column:content-start / full-end;margin:26px 0 40px;padding:34px 0 30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:26em}
.pullquote p{margin:0;font:italic 500 clamp(28px,3.2vw,40px)/1.3 var(--serif);color:var(--brass);text-wrap:pretty}
.blockquote{margin:26px 0 34px;padding-left:24px;border-left:2px solid var(--brass)}
.blockquote p{margin:0 0 10px;font:italic 500 23px/1.5 var(--serif);color:var(--ink)}
.blockquote cite{font:400 13.5px/1.5 var(--sans);color:var(--faint);font-style:normal;letter-spacing:.06em}
.lead{font-size:22px !important;line-height:1.7 !important;color:var(--ink) !important}
.callout{grid-column:content;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--red);padding:22px 26px;margin:6px 0 34px}
.callout p{margin:0 !important;font:500 17.5px/1.6 var(--sans);color:var(--ink)}
.callout .co-label{display:block;font:500 10.5px/1 var(--sans);letter-spacing:.26em;color:var(--red);margin-bottom:10px}
.note{font:italic 400 17px/1.65 var(--serif) !important;color:var(--muted) !important;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:14px 0;margin:4px 0 32px !important}

/* data components */
table.versus,table.datatable{width:100%;border-collapse:collapse;margin:8px 0 36px;font:400 15.5px/1.55 var(--sans);grid-column:content-start / full-end;max-width:52em}
.versus caption,.datatable caption{caption-side:top;text-align:left;font:500 11px/1 var(--sans);letter-spacing:.24em;color:var(--brass);padding-bottom:14px}
.versus th,.datatable th{font:500 11.5px/1.4 var(--sans);letter-spacing:.14em;color:var(--faint);text-align:left;padding:10px 16px 10px 0;border-bottom:1px solid var(--line)}
.versus td,.datatable td{padding:13px 16px 13px 0;border-bottom:1px solid var(--line-soft);color:var(--ink-soft);vertical-align:top}
.versus td:first-child{color:var(--ink);font-weight:500}
.versus thead th:not(:first-child){color:var(--brass)}
.datatable td:first-child{color:var(--ink);font-style:italic;font-family:var(--serif);font-size:18px}
.statrow{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 36px;grid-column:content-start / full-end;max-width:52em}
.statblock{flex:1;min-width:150px;background:var(--panel);border:1px solid var(--line);padding:22px 22px 18px;display:flex;flex-direction:column;gap:6px}
.stat-num{font:italic 500 44px/1 var(--serif);color:var(--brass)}
.stat-label{font:400 13.5px/1.5 var(--sans);color:var(--muted)}
ol.timeline{list-style:none;margin:6px 0 38px;padding:0;border-left:1px solid var(--line);grid-column:content}
ol.timeline li{position:relative;padding:0 0 22px 28px}
ol.timeline li::before{content:"";position:absolute;left:-5px;top:9px;width:9px;height:9px;border-radius:50%;background:var(--brass)}
ol.timeline li:last-child{padding-bottom:4px}
.t-when{display:block;font:500 11.5px/1.6 var(--sans);letter-spacing:.18em;color:var(--brass)}
.t-what{font:400 16.5px/1.6 var(--sans);color:var(--ink-soft)}
.chart{margin:8px 0 38px;grid-column:content-start / full-end;max-width:52em}
.chart svg{width:100%;height:auto;display:block}
.chart .bar-rect{fill:rgba(212,169,79,.72)}
.chart .bar-rect.hot{fill:rgba(193,74,50,.8)}
.chart text{font:500 11px var(--sans);fill:#A9A395}
.chart .val{fill:#E8E3D8}
.chart .axis{stroke:rgba(212,169,79,.25);stroke-width:1}
.chart .line-path{fill:none;stroke:var(--brass);stroke-width:2}
.chart .line-dot{fill:var(--red)}
.map-figure{margin:8px 0 38px;grid-column:content-start / full-end;max-width:52em}
.map-slot{background:var(--panel);border:1px dashed rgba(212,169,79,.4);min-height:280px;display:flex;align-items:center;justify-content:center;font:500 11px/1.8 var(--sans);letter-spacing:.2em;color:var(--faint);text-align:center;padding:20px}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:8px 0 38px;grid-column:content-start/full-end;max-width:56em}
.gallery figure{margin:0}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%}
.gallery figcaption{font:italic 400 13.5px/1.5 var(--serif);color:var(--faint);padding-top:8px}

/* cards / references */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:8px 0 38px;grid-column:content-start/full-end;max-width:56em}
.profile-card{background:var(--panel);border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:10px}
.profile-card img.p-photo{width:72px;height:72px;object-fit:cover;border-radius:50%;border:1px solid var(--line)}
.profile-card h3{margin:0;font:italic 500 24px/1.15 var(--serif)}
.profile-card .p-role{margin:0;font:500 11px/1.5 var(--sans);letter-spacing:.2em;color:var(--brass)}
.profile-card p{margin:0;font:400 14.5px/1.65 var(--sans);color:var(--muted)}
.profile-card .p-links{display:flex;gap:14px;font-size:13px}
.profile-card .p-attr{font-size:12px;color:var(--faint)}
.profile-card.no-photo .p-role::before{content:"— ";color:var(--faint)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:8px 0 38px;grid-column:content-start/full-end;max-width:56em}
.org-card{display:flex;align-items:center;gap:14px;background:#080910;border:1px solid var(--line-soft);padding:14px 16px;color:var(--ink)}
.org-card:hover{border-color:rgba(212,169,79,.5)}
.org-card img.org-logo{width:38px;height:38px;object-fit:contain}
.org-card.no-logo .org-name::before{content:"◆ ";color:var(--brass)}
.org-name{font:500 15px/1.3 var(--sans)}
.org-host{font:400 12px/1.3 var(--sans);color:var(--faint);margin-left:auto}
.entity-ref{border-bottom:1px dotted rgba(212,169,79,.6);font-weight:500}

/* related */
.related{border-top:1px solid var(--line);padding:40px var(--gutter) 60px}
.related h2{margin:0 0 24px;font:italic 500 26px/1.2 var(--serif)}
ul.related-links,.further-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;list-style:none;margin:0;padding:0}
ul.related-links li{display:flex}
ul.related-links a,.further-grid a{flex:1;display:flex;flex-direction:column;gap:8px;background:var(--panel);border:1px solid var(--line);padding:22px 24px;color:var(--ink)}
ul.related-links a:hover,.further-grid a:hover{border-color:rgba(212,169,79,.5)}
ul.related-links .rel-tag,.further-grid .rel-tag{font:500 10.5px/1.5 var(--sans);letter-spacing:.22em;color:var(--acc)}
ul.related-links .rel-title,.further-grid .rel-title{font:italic 500 22px/1.2 var(--serif)}
ul.related-links .rel-meta{font:500 11px/1 var(--sans);letter-spacing:.14em;color:var(--faint);margin-top:auto;padding-top:10px}

/* ---------- category pages ---------- */
.cat-hero{padding:clamp(48px,9vh,88px) var(--gutter) clamp(36px,6vh,56px);border-bottom:1px solid var(--line);background:radial-gradient(ellipse 55% 90% at 30% 0%,rgba(212,169,79,.07),transparent)}
.cat-hero .kicker{color:var(--acc)}
.cat-hero h1{margin:14px 0 16px;font:italic 500 clamp(44px,6.5vw,80px)/1 var(--serif)}
.cat-hero p{margin:0;font:400 clamp(16.5px,1.5vw,19.5px)/1.65 var(--sans);color:var(--muted);max-width:42em;text-wrap:pretty}
ul.cat-list{list-style:none;margin:0;padding:16px var(--gutter) 56px}
ul.cat-list li{border-bottom:1px solid var(--line-soft)}
ul.cat-list a{display:grid;grid-template-columns:280px 1fr auto;gap:34px;align-items:center;padding:30px 0;color:var(--ink)}
ul.cat-list .cl-img{aspect-ratio:16/9;overflow:hidden}
ul.cat-list .cl-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.92);transition:transform .3s}
ul.cat-list a:hover .cl-img img{transform:scale(1.04)}
ul.cat-list h3{margin:0 0 8px;font:italic 500 30px/1.15 var(--serif);text-wrap:pretty}
ul.cat-list a:hover h3{color:var(--brass)}
ul.cat-list p{margin:0;font:400 15.5px/1.6 var(--sans);color:var(--muted);max-width:52em}
ul.cat-list .cl-meta{font:500 11.5px/1.9 var(--sans);letter-spacing:.16em;color:var(--faint);text-align:right;white-space:nowrap}
.other-sections{padding:34px var(--gutter) 62px;border-top:1px solid var(--line)}
.other-sections .os-label{font:500 11px/1;letter-spacing:.26em;color:var(--faint);margin-bottom:18px}
.other-sections nav{display:flex;gap:14px 34px;flex-wrap:wrap;font:italic 500 24px/1.3 var(--serif)}
.other-sections nav a{color:var(--muted)}
.other-sections nav a:hover{color:var(--brass)}

/* ---------- static pages ---------- */
.page-wrap{padding:clamp(44px,8vh,80px) var(--gutter) 70px;display:grid;grid-template-columns:[full-start] minmax(0,1fr) [content-start] min(72ch,100%) [content-end] minmax(0,2fr) [full-end]}
.page-wrap>*{grid-column:content}
.page-wrap h1{margin:10px 0 22px;font:italic 500 clamp(40px,5.5vw,64px)/1.05 var(--serif)}
.page-wrap p{margin:0 0 24px;font-size:19px;line-height:1.75;color:var(--ink-soft);text-wrap:pretty}
.contact-list{list-style:none;margin:10px 0 30px;padding:0;display:flex;flex-direction:column;gap:14px;grid-column:content}
.contact-list li{display:flex;align-items:center;gap:16px;background:var(--panel);border:1px solid var(--line);padding:20px 24px}
.contact-list svg{flex:none;color:var(--brass)}
.contact-list b{font:500 15px/1.4 var(--sans);color:var(--ink);display:block}
.contact-list span{font:400 14px/1.5 var(--sans);color:var(--muted)}
.big-404{font:italic 500 clamp(90px,18vw,190px)/1 var(--serif);color:var(--brass);opacity:.9}

/* ---------- styleguide ---------- */
.sg-section{border-top:1px solid var(--line);padding:44px var(--gutter) 30px}
.sg-section>h2{font:500 12px/1 var(--sans);letter-spacing:.3em;color:var(--red);margin:0 0 30px}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .listen-steps{grid-template-columns:repeat(2,1fr)}
  .sponsor-strip{grid-template-columns:repeat(2,1fr)}
  ul.related-links,.further-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:17px}
  .site-head{flex-direction:column;align-items:flex-start;gap:16px;padding-block:20px}
  .site-nav{gap:14px 20px}
  .card-grid{grid-template-columns:1fr}
  .card h3{min-height:0}
  .hero img{height:56vh}
  .hero .hero-copy{padding-bottom:36px}
  .listen-steps{grid-template-columns:1fr}
  .era-strip{grid-template-columns:repeat(7,74vw)}
  .sponsor-strip{grid-template-columns:repeat(3,1fr)}
  table.datatable,table.versus{display:block;overflow-x:auto;max-width:100%;font-size:14.5px}
  table.datatable td,table.versus td{min-width:110px}
  .article-body p{font-size:18px}
  .article-body>p:first-of-type{font-size:19px}
  .pullquote p{font-size:27px}
  ul.cat-list a{grid-template-columns:1fr;gap:16px}
  ul.cat-list .cl-meta{text-align:left}
  ul.related-links,.further-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .statrow{flex-direction:column}
  .site-foot{flex-direction:column}
}
@media (max-width:420px){
  .wordmark small{letter-spacing:.2em}
  .sponsor-strip{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:1fr}
}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain;background:transparent}

/* 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-strip .sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}
.sponsor-strip .sponsor.sponsor img{height:38px!important;display:block!important;width:100%!important}

/* op-blurb-rows: money blurbs ran to 6 rows at 390, 1125px of tier across
   11 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .sponsor-strip .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:57px!important;min-height:0!important;overflow:hidden!important}
}

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

/* op-article-width: the article column was capped at 739px (76 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through grid track 2 of "[full-start] minmax(0,1fr) [content-start] min(var(--measure),100%) [content-end] minmax(0,2fr) [full-end]" (declared in .article-body) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1280 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1280px){
  article.article-body{grid-template-columns:[full-start] minmax(0,1fr) [content-start] min(996px, 100%) [content-end] minmax(0,2fr) [full-end]!important}
}
@media (min-width:1600px){
  article.article-body{grid-template-columns:[full-start] minmax(0,1fr) [content-start] min(clamp(996px, 69.167vw, 1195px), 100%) [content-end] minmax(0,2fr) [full-end]!important}
  article.article-body > :is(p:not([class])){font-size:clamp(19.5px,1.3542vw,23.4px)!important}
}
/* op-article-width:end */
/* op-heading-levels */
ul.cat-list h2:where(.rt-h3){margin: 0px 0px 8px; font: italic 500 30px/1.15 var(--serif); text-wrap: pretty;}
ul.cat-list a:hover h2:where(.rt-h3){color: var(--brass);}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a > span.cl-img > img,
  a.card > div.card-img > img,
  a.card.more-cards > div.card-img > img,
  body > div.article-hero > img,
  body > section.hero > img){height:auto}
/* op-img-dims:end */