/* Sons and Daughters — Unofficial Fan Archive
   "The Run" — ink + alarm red, Anton slabs, IBM Plex furniture. */

:root{
  --paper:#E8E6E1;
  --ink:#14161A;
  --ink-2:#1E2126;
  --red:#D42A2A;
  --body:#2E3138;
  --muted:#4A4D54;
  --grey:#6E7178;
  --dim:#8A8884;
  --nav-idle:#8E8C88;
  --foot:#5A5D64;
  --dash:#B4B2AD;
  --hair:#C2C0BB;
  --on-ink:#C8C6C1;
  --on-ink-head:#F2F0EC;
  --on-ink-body:#9C9A96;
  --display:'Anton', 'Arial Narrow', sans-serif;
  --sans:'IBM Plex Sans', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --gut:clamp(20px, 5vw, 64px);
  --maxw:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--sans);font-size:18px;line-height:1.6;
  font-variation-settings:"wdth" 100;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--ink)}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.display{font-family:var(--display);text-transform:uppercase;letter-spacing:.008em;line-height:.92}
.mono{font-family:var(--mono)}
.kicker{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--red)}
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.meta{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:99;background:var(--red);color:var(--ink);padding:10px 16px;font-family:var(--mono)}

/* ───────── header ───────── */
.site-head{background:var(--ink);color:var(--on-ink)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:40px;
  max-width:var(--maxw);margin-inline:auto;padding:22px var(--gut)}
.home .head-in{padding-block:26px}
.lockup{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.lockup .word{font-family:var(--display);font-size:clamp(26px,3.2vw,34px);text-transform:uppercase;
  letter-spacing:.01em;color:#E8E6E1;white-space:nowrap;line-height:1}
.lockup .sub{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--red);white-space:nowrap}
a.lockup:hover .word{color:#fff}

.nav-toggle,.nav-toggle-label{display:none}
.nav{display:flex;align-items:center;gap:26px;font-family:var(--mono);font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.nav > li{position:relative}
.nav a{color:var(--nav-idle)}
.nav a:hover,.nav a:focus{color:#E8E6E1}
.nav .is-current > a{color:var(--red)}
.home .nav .is-current > a{color:#E8E6E1}
.nav .has-sub > a::after{content:"";display:inline-block;width:5px;height:5px;margin-left:8px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.nav .has-sub::after{content:"";position:absolute;left:0;right:-12px;top:100%;height:18px} /* hover bridge */
.nav-sub{position:absolute;top:calc(100% + 18px);left:-20px;min-width:290px;z-index:40;
  background:var(--ink);border:1px solid #2C2F35;border-top:3px solid var(--red);
  padding:14px 0;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .12s linear, transform .12s linear}
.nav .has-sub:hover .nav-sub,.nav .has-sub:focus-within .nav-sub{opacity:1;visibility:visible;transform:none}
.nav-sub li a{display:block;padding:9px 20px;font-family:var(--sans);font-size:15px;
  letter-spacing:0;text-transform:none;color:var(--on-ink);white-space:normal;line-height:1.35}
.nav-sub li a:hover{background:#22262C;color:#fff}
.nav > li:nth-last-child(-n+3) .nav-sub{left:auto;right:-20px}
.nav-sub .sub-head{display:block;padding:0 20px 10px;margin-bottom:8px;border-bottom:1px solid #2C2F35;
  font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--red)}
.nav .browse a{color:#E8E6E1;border:1px solid #3A3D44;padding:8px 13px}
@media (max-width:1120px){.nav .browse a{padding:12px 16px}}
.nav .browse a:hover{border-color:var(--red);color:var(--red)}

/* ───────── homepage ───────── */
.hero{padding-block:clamp(40px,6vw,64px) 40px;display:grid;grid-template-columns:1fr 380px;gap:clamp(28px,5vw,64px);align-items:end}
.hero h1{font-family:var(--display);text-transform:uppercase;font-size:clamp(52px,8.4vw,104px);
  line-height:.88;letter-spacing:.005em;color:var(--ink);margin-top:20px;text-wrap:balance}
.hero .dek{font-size:clamp(19px,2vw,22px);line-height:1.55;max-width:660px;margin-top:26px;color:var(--body)}
.statrail{border-left:3px solid var(--red);padding-left:22px;font-family:var(--mono);
  font-size:15px;line-height:1.85;color:var(--muted)}
.statrail .hot{color:var(--red)}

.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-bottom:2px solid var(--ink);padding-bottom:14px}
.sec-head h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(26px,3.4vw,34px);letter-spacing:.01em}
.band{padding-block:clamp(36px,5vw,56px)}

/* the run */
.run{position:relative;margin-top:56px}
.run-rail,.run-prog{position:absolute;top:150px;height:4px}
.run-rail{left:0;right:0;background:var(--ink)}
.run-prog{left:0;width:64%;background:var(--red);transition:width .35s ease}
.stations{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.6vw,32px);position:relative;margin:0}
.station{display:flex;flex-direction:column;align-items:flex-start;background:none;border:0;padding:0;
  text-align:left;font:inherit;color:inherit;cursor:pointer;width:100%}
.plate{width:130px;height:130px;display:flex;flex-direction:column;justify-content:space-between;
  padding:12px;border:0;flex:0 0 auto}
.plate .p-num{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.18em}
.plate .p-title{font-family:var(--display);text-transform:uppercase;font-size:20px;line-height:.95;letter-spacing:.01em}
.stem{width:4px;height:20px;margin-left:14px;background:var(--ink)}
.dot{width:22px;height:22px;border-radius:50%;margin-left:5px;margin-top:-1px;background:var(--ink)}
.station.lit .stem,.station.lit .dot{background:var(--red)}
.station .yr{font-family:var(--mono);font-size:26px;font-weight:600;margin-top:22px;color:var(--ink)}
.station .st-title{font-family:var(--display);text-transform:uppercase;font-size:clamp(20px,2.3vw,28px);
  line-height:1.05;margin-top:6px;color:var(--ink)}
.station .st-note{font-size:16px;line-height:1.55;color:var(--muted);margin-top:10px}
.station[aria-selected="true"] .st-title{color:var(--red)}
.station:focus-visible{outline:2px solid var(--red);outline-offset:6px}

.run-detail{margin-top:44px;border-top:2px solid var(--ink);padding-top:26px;
  display:grid;grid-template-columns:200px 1fr auto;gap:clamp(20px,3vw,44px);align-items:start}
.run-detail .rd-num{font-family:var(--display);font-size:64px;line-height:.8;color:#C6C4BF}
.run-detail h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(28px,3.6vw,40px);line-height:1}
.run-detail .rd-rel{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--red);margin-top:10px}
.run-detail p{font-size:18px;line-height:1.65;max-width:720px;margin-top:14px}
.run-detail .rd-link{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:13px;
  letter-spacing:.14em;text-transform:uppercase}

/* songs that land */
.songlist{border-top:2px solid var(--ink);margin-top:26px}
.songlist li{border-bottom:1px solid var(--hair)}
.songlist a{display:grid;grid-template-columns:78px 1.15fr .8fr 1.7fr;gap:clamp(16px,2.4vw,28px);
  align-items:baseline;padding:24px 0;color:var(--body)}
.songlist a:hover{background:#DFDDD7;color:var(--body)}
.songlist .rank{font-family:var(--display);font-size:30px;color:#B4B2AD}
.songlist a:hover .rank{color:var(--red)}
.songlist .name{font-family:var(--display);text-transform:uppercase;font-size:clamp(22px,2.4vw,28px);
  line-height:1.02;color:var(--ink)}
.songlist .from{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.songlist .why{font-size:17px;line-height:1.6}

/* two voices explainer */
.voices{background:var(--ink);color:var(--on-ink);padding-block:clamp(32px,5vw,56px);margin-top:8px}
.voices h2{color:var(--on-ink-head)}
.voices .sec-head{border-bottom-color:#3A3D44}
.voices .meta{color:var(--on-ink-body)}
.vx{margin-top:40px;display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:center}
.vx-label{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-body)}
.vx-lane{position:relative;height:22px;display:flex;align-items:center}
.vx-lane::before{content:"";position:absolute;left:0;right:0;height:4px;background:#3A3D44}
.vx-seg{position:relative;height:22px;border-radius:0}
.vx-dot{position:relative;width:22px;height:22px;border-radius:50%}
.vx-axis{grid-column:2;display:grid;grid-template-columns:repeat(8,1fr);font-family:var(--mono);
  font-size:12px;letter-spacing:.1em;color:#6E7178;padding-top:6px}
.vx-legend{margin-top:28px;display:flex;flex-wrap:wrap;gap:26px;font-family:var(--mono);font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--on-ink-body)}
.vx-legend span{display:inline-flex;align-items:center;gap:10px}
.vx-legend i{width:14px;height:14px;display:inline-block}
.vx-note{margin-top:26px;max-width:760px;font-size:18px;line-height:1.7;color:var(--on-ink)}

/* ink tri-cards */
.inkband{background:var(--ink);color:var(--on-ink);padding-block:clamp(40px,5vw,64px)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;align-items:stretch}
.card{display:flex;flex-direction:column;gap:16px;color:var(--on-ink)}
.card:hover{color:var(--on-ink)}
.card .shot{aspect-ratio:3/2;overflow:hidden;background:rgba(127,127,127,.08)}
.card .shot img{width:100%;height:100%;object-fit:cover}
.card:hover .shot img{opacity:.85}
.card h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(22px,2.5vw,30px);
  line-height:1.05;color:var(--on-ink-head);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.1em}
.card p{font-size:16px;line-height:1.55;color:var(--on-ink-body);margin-top:auto}

/* archive list on home */
.feed{border-top:2px solid var(--ink);margin-top:26px}
.feed li{border-bottom:1px solid var(--hair)}
.feed a{display:grid;grid-template-columns:120px 1.1fr 1.4fr;gap:clamp(16px,2.4vw,32px);
  align-items:baseline;padding:22px 0;color:var(--body)}
.feed a:hover{background:#DFDDD7}
.feed .cat{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.feed .t{font-family:var(--display);text-transform:uppercase;font-size:clamp(20px,2.1vw,26px);line-height:1.05;color:var(--ink)}
.feed .d{font-size:16px;line-height:1.55;color:var(--muted)}
.more-toggle{position:absolute;opacity:0;pointer-events:none}
.more-items{display:none}
.more-toggle:checked ~ .more-items{display:block}
.more-label{display:inline-block;margin-top:22px;font-family:var(--mono);font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--red);cursor:pointer;border-bottom:2px solid var(--red);padding-bottom:4px}
.more-toggle:checked ~ .more-label .lbl-more{display:none}
.more-label .lbl-less{display:none}
.more-toggle:checked ~ .more-label .lbl-less{display:inline}
.more-toggle:focus-visible ~ .more-label{outline:2px solid var(--red);outline-offset:4px}

/* ───────── supporters (sponsors) ───────── */
.support{padding-block:clamp(30px,4vw,44px)}
.support-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:2px solid var(--ink);padding-top:18px}
.support-head h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(22px,2.6vw,28px)}
.support-head .meta{color:var(--grey)}
.sponsor-row{display:grid;gap:20px;margin-top:24px}
.sponsor-row.featured{grid-template-columns:repeat(3,1fr)}
.sponsor-row.roll{grid-template-columns:repeat(4,1fr)}
.sponsor{display:flex;flex-direction:column;gap:12px;background:var(--ink);padding:22px;
  border:1px solid var(--ink);color:var(--on-ink-body)}
.sponsor:hover{border-color:var(--red);color:var(--on-ink)}
.sponsor img{width:100%;height:52px;object-fit:contain;object-position:left center;background:transparent}
.sponsor-blurb{font-size:15px;line-height:1.5;min-height:1.5em}
.sponsor-row.roll .sponsor{padding:16px}
.sponsor-row.roll .sponsor img{height:40px}

/* ───────── section / category pages ───────── */
.page-head{padding-block:clamp(40px,5vw,56px) 34px;display:grid;grid-template-columns:1fr 420px;
  gap:clamp(24px,5vw,56px);align-items:end;border-bottom:2px solid var(--ink)}
.page-head h1{font-family:var(--display);text-transform:uppercase;font-size:clamp(44px,7vw,84px);
  line-height:.9;margin-top:16px;text-wrap:balance}
.page-head .dek{font-size:19px;line-height:1.6}

.cat-list{margin-top:8px}
.cat-list > li{border-bottom:1px solid var(--hair)}
.cat-list a{display:grid;grid-template-columns:220px 1fr 150px;gap:clamp(20px,3vw,44px);
  padding:32px 0;align-items:start;color:var(--body)}
.cat-list a:hover{background:#DFDDD7}
.cat-list .thumb{aspect-ratio:3/2;overflow:hidden;background:rgba(127,127,127,.08)}
.cat-list .thumb img{width:100%;height:100%;object-fit:cover}
.cat-list h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(26px,3.2vw,40px);
  line-height:1;color:var(--ink)}
.cat-list p{font-size:18px;line-height:1.65;max-width:720px;margin-top:14px}
.cat-list .go{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);text-align:right}

/* archive "run" vertical (the archive category page) */
.vrun{padding-left:190px;position:relative;margin-top:48px}
.vrun::before{content:"";position:absolute;left:154px;top:8px;bottom:8px;width:4px;background:var(--ink)}
.vrun li{position:relative;padding-bottom:44px}
.vrun .yr{position:absolute;left:-190px;width:120px;text-align:right;font-family:var(--mono);
  font-size:28px;font-weight:600;color:var(--ink)}
.vrun .vdot{position:absolute;left:-46px;top:8px;width:22px;height:22px;border-radius:50%;background:var(--ink)}
.vrun li.lit .vdot{background:var(--red)}
.vrun h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(28px,3.4vw,40px);line-height:1}
.vrun .rel{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-top:10px;color:var(--muted)}
.vrun li.lit .rel{color:var(--red)}
.vrun p{font-size:18px;line-height:1.65;max-width:720px;margin-top:14px}

/* ───────── article ───────── */
.art-head{background:var(--ink);color:var(--on-ink);padding-block:clamp(40px,6vw,64px) clamp(32px,4vw,48px)}
.art-head .kicker{color:var(--red)}
.art-head h1{font-family:var(--display);text-transform:uppercase;font-size:clamp(42px,7.4vw,96px);
  line-height:.88;letter-spacing:.005em;color:var(--on-ink-head);margin-top:20px;max-width:15ch;text-wrap:balance}
.art-head .dek{font-size:clamp(19px,2.2vw,25px);line-height:1.5;max-width:820px;margin-top:26px;color:var(--on-ink)}
.art-head .in-sec{margin-top:28px;font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.art-head .in-sec a{color:var(--red)}

.art-hero{margin:0;background:var(--ink)}
.art-hero img{width:100%;height:clamp(220px,38vw,480px);object-fit:cover}
.art-hero figcaption{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--on-ink-body);
  padding:14px var(--gut);max-width:var(--maxw);margin-inline:auto}

.art-body-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(28px,4.5vw,56px);
  padding-block:clamp(36px,5vw,56px);align-items:start}
.toc{position:sticky;top:24px;border-top:2px solid var(--ink);padding-top:16px;
  font-family:var(--mono);font-size:14px;line-height:1.75;color:var(--grey)}
.toc h2,.toc .toc-h{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.toc ol li{margin-bottom:2px}
.toc a{color:var(--grey)}
.toc a:hover{color:var(--red)}
.toc .toc-rel{margin-top:26px}
.toc .toc-rel a{color:var(--red);display:block;margin-bottom:6px;line-height:1.4}

.article{max-width:none;min-width:0;padding-inline:0}
.article > *{max-width:760px}
.article p{font-size:21px;line-height:1.75;margin-top:26px;color:var(--ink)}
.article p.lead{font-size:24px;line-height:1.6;color:var(--body);margin-top:0}
.article .sec-no{display:block;font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.2em;
  color:var(--red);margin-bottom:10px}
.article h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(30px,4vw,44px);
  line-height:1;margin-top:52px;color:var(--ink)}
.article h3{font-family:var(--sans);font-weight:700;font-size:22px;margin-top:34px;color:var(--ink)}
.article > h2:first-child{margin-top:0}
.article strong{font-weight:700;color:var(--ink)}
.article em{font-style:italic}
.article .dropcap::first-letter{float:left;font-family:var(--display);font-size:96px;line-height:.72;
  padding:6px 14px 0 0;color:var(--red);text-transform:uppercase}
.article ul.plain{margin-top:22px}
.article ul.plain li{font-size:20px;line-height:1.7;padding-left:26px;position:relative;margin-bottom:10px}
.article ul.plain li::before{content:"";position:absolute;left:0;top:.65em;width:12px;height:2px;background:var(--red)}

/* components */
.pullquote{margin:44px 0;padding:6px 0 6px 24px;border-left:4px solid var(--red);max-width:900px}
.pullquote p{font-family:var(--display);text-transform:uppercase;font-size:clamp(24px,3vw,30px);
  line-height:1.15;margin:0;color:var(--ink)}
.blockquote{margin:40px 0;padding:24px 28px;background:#DFDDD7;border-left:4px solid var(--ink);max-width:820px}
.blockquote p{margin:0;font-size:20px;line-height:1.65}
.blockquote cite{display:block;margin-top:14px;font-family:var(--mono);font-size:13px;
  letter-spacing:.1em;font-style:normal;color:var(--grey)}
.callout{margin:40px 0;background:var(--ink);color:var(--on-ink);padding:28px 30px;max-width:820px}
.callout p{margin:0;color:var(--on-ink);font-size:19px;line-height:1.65}
.callout::before{content:"Key takeaway";display:block;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
p.note{margin:32px 0;padding:16px 0 16px 20px;border-left:2px solid var(--dash);font-size:17px;
  line-height:1.6;color:var(--muted);max-width:760px}

.versus,.datatable{width:100%;border-collapse:collapse;margin:40px 0;max-width:900px;font-size:17px}
.versus caption,.datatable caption{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red);text-align:left;padding-bottom:12px}
.versus th,.datatable th{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;text-align:left;padding:12px 14px;border-bottom:2px solid var(--ink);color:var(--ink)}
.versus td,.datatable td{padding:14px;border-bottom:1px solid var(--hair);vertical-align:top;line-height:1.55}
.datatable tbody th{width:23%}
.versus tbody th{border-bottom:1px solid var(--hair);width:26%}
.datatable tbody tr:hover,.versus tbody tr:hover{background:#DFDDD7}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:2px;margin:40px 0;max-width:900px}
.statblock{background:var(--ink);padding:22px;display:flex;flex-direction:column;gap:8px}
.stat-num{font-family:var(--display);font-size:44px;line-height:.9;color:var(--red)}
.stat-label{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-ink-body);line-height:1.5}

.timeline{margin:40px 0;max-width:860px;border-top:2px solid var(--ink)}
.timeline li{display:grid;grid-template-columns:170px 1fr;gap:24px;padding:16px 0;
  border-bottom:1px solid var(--hair);align-items:baseline}
.t-when{font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:.06em;color:var(--red);line-height:1.45}
.t-what{font-size:18px;line-height:1.55}

.chart{margin:44px 0;max-width:900px}
.chart svg{width:100%;max-width:100%;height:auto;display:block;overflow:visible}
.chart figcaption{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--grey);
  margin-top:16px;line-height:1.6}
.chart .c-label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;fill:var(--muted);text-transform:uppercase}
.chart .c-val{font-family:var(--mono);font-size:11px;font-weight:600;fill:var(--ink)}

.article-figure{margin:48px 0;max-width:none}
.article-figure img{width:100%;height:clamp(220px,34vw,420px);object-fit:cover}
.article-figure figcaption{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--grey);margin-top:14px;line-height:1.6}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:16px;margin:44px 0;max-width:none}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:3/2;object-fit:cover}
.gallery figcaption{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--grey);margin-top:10px}
.map-figure{margin:44px 0;max-width:900px}
.map-figure .map-slot{aspect-ratio:16/9;background:rgba(127,127,127,.08);border:1px dashed var(--dash)}
.map-figure figcaption{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--grey);margin-top:14px}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:20px;margin:44px 0;max-width:900px}
.profile-card{border:1px solid var(--hair);padding:24px;background:#DFDDD7;display:flex;flex-direction:column;gap:10px}
.profile-card h3{font-family:var(--display);text-transform:uppercase;font-size:26px;line-height:1;margin:0}
.profile-card .p-photo{width:72px;height:72px;object-fit:cover}
.profile-card.no-photo::before{content:"";display:block;width:44px;height:4px;background:var(--red)}
.profile-card .p-role{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.profile-card p{font-size:16px;line-height:1.6;margin:0}
.profile-card .p-links a{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.profile-card .p-attr{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--dim)}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:14px;margin:40px 0;max-width:900px}
.org-card{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid var(--hair);background:#DFDDD7;color:var(--ink)}
.org-card:hover{border-color:var(--red)}
.org-card .org-logo{width:38px;height:38px;object-fit:contain}
.org-card.no-logo::before{content:"";display:block;width:26px;height:26px;border:3px solid var(--red)}
.org-name{font-family:var(--sans);font-weight:600;font-size:17px;line-height:1.3}
.org-host{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--grey)}
a.entity-ref{font-family:var(--mono);font-size:.92em;letter-spacing:.04em;border-bottom:1px solid var(--red)}

.further{margin-top:56px;border-top:2px solid var(--ink);padding-top:26px;max-width:none}
.further h2{font-family:var(--display);text-transform:uppercase;font-size:28px;margin:0 0 20px}
.further-grid,.related-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px}
.further-grid a,.related-links a{display:block;height:100%;border:1px solid var(--hair);padding:20px;background:#DFDDD7;
  font-family:var(--display);text-transform:uppercase;font-size:21px;line-height:1.08;color:var(--ink)}
.further-grid a:hover,.related-links a:hover{border-color:var(--red);color:var(--red)}
.related-links li{display:flex}
.related-links li a{flex:1}

/* ───────── prose pages (about/contact/404) ───────── */
.prose{max-width:760px;padding-block:clamp(36px,5vw,56px)}
.prose p{font-size:21px;line-height:1.75;margin-top:26px;color:var(--ink)}
.prose h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(28px,3.6vw,40px);margin-top:48px}
.prose ul.plain li{font-size:20px;line-height:1.7;padding-left:26px;position:relative;margin-bottom:10px}
.prose ul.plain li::before{content:"";position:absolute;left:0;top:.65em;width:12px;height:2px;background:var(--red)}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:2px;margin-top:40px}
.hub-card{background:var(--ink);color:var(--on-ink);padding:28px;display:flex;flex-direction:column;gap:12px}
.hub-card:hover{color:var(--on-ink)}
.hub-card h2{font-family:var(--display);text-transform:uppercase;font-size:28px;color:var(--on-ink-head);line-height:1}
.hub-card p{font-size:16px;line-height:1.55;color:var(--on-ink-body);margin:0}
.hub-card .n{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-top:auto}

/* ───────── footer ───────── */
.site-foot{margin-top:24px}
.foot-in{border-top:2px solid var(--ink);padding-block:32px 48px;
  display:flex;justify-content:space-between;gap:clamp(20px,4vw,48px);align-items:flex-start;flex-wrap:wrap}
.site-foot .disclaimer{max-width:680px;font-size:15px;line-height:1.6;color:var(--foot)}
.site-foot .foot-nav{display:flex;flex-wrap:wrap;gap:18px 20px;font-family:var(--mono);font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;margin-top:16px}
.site-foot .foot-nav a{color:var(--grey)}
.site-foot .foot-nav a:hover{color:var(--red)}
.site-foot .lock{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);text-align:right;line-height:1.7}

/* ───────── styleguide ───────── */
.sg-sec{padding-block:44px;border-bottom:1px solid var(--hair)}
.sg-sec > h2{font-family:var(--display);text-transform:uppercase;font-size:32px;margin-bottom:6px}
.sg-sec > .meta{display:block;margin-bottom:26px}
.sg-narrow{max-width:360px;border:1px dashed var(--dash);padding:14px;margin-top:28px;overflow:hidden}
.sg-narrow .meta{display:block;margin-bottom:14px}
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:2px}
.swatch{padding:18px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;min-height:96px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:4px}

/* ───────── responsive ───────── */
@media (max-width:1080px){
  .hero{grid-template-columns:1fr;align-items:start}
  .page-head{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .art-body-grid{grid-template-columns:180px minmax(0,1fr)}
  .run-detail{grid-template-columns:1fr}
  .run-detail .rd-num{font-size:44px}
}
@media (max-width:1120px){
  .nav-toggle-label{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;
    letter-spacing:.18em;text-transform:uppercase;color:#E8E6E1;border:1px solid #3A3D44;padding:13px 18px;cursor:pointer}
  .head-in{flex-wrap:wrap;gap:14px;align-items:center}
  .lockup{flex-direction:column;align-items:flex-start;gap:7px}
  .nav-toggle-label{margin-left:auto}
  .nav{order:3}
  .nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;white-space:normal;
    border-top:1px solid #2C2F35;margin-top:8px}
  .nav-toggle:checked ~ .nav{display:flex}
  .nav{max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain}
  .nav > li{border-bottom:1px solid #2C2F35;padding:8px 0}
  .nav > li > a{display:block;padding:12px 0}
  .nav > li.has-sub > a{font-family:var(--display);font-size:22px;letter-spacing:.01em;color:#E8E6E1;line-height:1}
  .nav .is-current > a,.home .nav .is-current > a{color:var(--red)}
  .nav .has-sub::after{display:none}
  .nav .has-sub > a::after{display:none}
  .nav-sub{position:static;opacity:1;visibility:visible;transform:none;border:0;padding:6px 0 4px;
    min-width:0;background:none;border-top:0;border-left:2px solid var(--red);margin-left:2px}
  .nav-sub .sub-head{display:none}
  .nav-sub li a{padding:12px 0 12px 16px;border-left:0;font-size:16px}
  .nav .browse a{display:inline-block}
  .stations{grid-template-columns:1fr 1fr;gap:28px}
  .run-rail,.run-prog{display:none}
  .stem,.dot{display:none}
  .run{margin-top:26px}
  .station{border-top:3px solid var(--ink);padding-top:16px}
  .station.lit{border-top-color:var(--red)}
  .station .yr{margin-top:14px}
  .songlist a{grid-template-columns:52px 1fr;row-gap:6px}
  .songlist .from,.songlist .why{grid-column:2}
  .feed a{grid-template-columns:1fr;row-gap:8px}
  .cat-list a{grid-template-columns:1fr;row-gap:16px}
  .cat-list .go{text-align:left}
  .art-body-grid{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;margin-bottom:8px}
  .vx{grid-template-columns:1fr;gap:8px}
  .vx-axis{grid-column:1}
}
@media (max-width:720px){
  body{font-size:17px}
  .cards{grid-template-columns:1fr}
  .sponsor-row.featured{grid-template-columns:1fr 1fr}
  .sponsor-row.roll{grid-template-columns:repeat(4,1fr);gap:12px}
  .sponsor-row.roll .sponsor{padding:12px}
  .vrun{padding-left:0}
  .vrun::before{left:6px}
  .vrun li{padding-left:34px}
  .vrun .yr{position:static;width:auto;text-align:left;display:block;margin-bottom:6px}
  .vrun .vdot{left:0;top:6px;width:14px;height:14px}
  .sponsor{padding:16px;gap:10px}
  .sponsor img{height:40px}
  .sponsor-blurb{font-size:14px}
  .lockup .word{font-size:23px}
  .lockup .sub{font-size:10px}
  .versus,.datatable{font-size:15px}
  .versus th,.datatable th,.versus td,.datatable td{padding:10px}
  .versus th,.versus td,.datatable th,.datatable td{overflow-wrap:anywhere;hyphens:auto}
  .versus,.datatable{display:block}
  .versus caption,.datatable caption{display:block}
  .versus thead,.datatable thead{position:absolute;left:-9999px}
  .versus tbody,.datatable tbody,.versus tr,.datatable tr,.versus th,.datatable th,.versus td,.datatable td{display:block;width:auto}
  .versus tr,.datatable tr{border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:14px}
  .versus tbody th,.datatable tbody th{border-bottom:0;padding:12px 0 4px;font-family:var(--display);
    text-transform:uppercase;font-size:22px;line-height:1.05;letter-spacing:.01em}
  .versus td,.datatable td{border-bottom:0;padding:4px 0 8px}
  .versus td::before,.datatable td::before{content:attr(data-th);display:block;font-family:var(--mono);
    font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:4px}
  .timeline li{grid-template-columns:1fr;gap:4px}
  .article .dropcap::first-letter{font-size:68px}
  .site-foot .lock{text-align:left}
  .stations{grid-template-columns:1fr}
  .plate{width:100%;height:auto;aspect-ratio:1/1;max-width:200px}
}
@media (max-width:420px){
  .sponsor-row.featured,.sponsor-row.roll{grid-template-columns:1fr 1fr;gap:12px}
  .statrow{grid-template-columns:1fr}
}


/* 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}

/* sp-logo-floor: raise undersized sponsor logos without shrinking any Design set larger */
.sponsor img{min-height:56px;object-position:center}


/* sp-meta: name each supporter under its logo — the roll tiles were mostly empty space */
.sp-meta{display:block;margin-top:12px;text-align:center;width:100%}
.sp-meta b{display:block;font-family:var(--mono,ui-monospace,monospace);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#E8E6E1;opacity:.92;margin-bottom:3px}
.sp-meta i{display:block;font-family:var(--mono,ui-monospace,monospace);font-size:11px;font-style:normal;letter-spacing:.05em;color:#C8C6C1;opacity:.55}

/* op-blurb-rows: money blurbs ran to 6 rows at 390, 1533px 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-row.featured .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:63px!important;min-height:0!important;overflow:hidden!important}
  .sponsor-row.roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:63px!important;min-height:0!important;overflow:hidden!important}
}

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

/* op-page-overflow: the page scrolled sideways at 320 — div.sponsor reached
   334px in a 320px screen (+14px), inside
   div.sponsor-row.roll. Remedy: let the box shrink. Structural only, no spacing value of mine;
   tried in order and this is the first that held, with the page's visible copy unchanged.
   Phone widths only — desktop is re-measured after writing and must not move. */
@media (max-width:360px){
  div.sponsor{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
}

/* op-article-width: the article column was capped at 760px (83 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 760px (declared in .article > *) to ~95 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. The layout has no room to grow above 1600, so this width holds there. Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  article.article > :is(h2:not([class]), p.lead.dropcap, p:not([class]), p.note){max-width:min(939px, 100%)!important}
}
/* op-article-width:end */

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .sponsor-row.featured 5 rows at 768, .sponsor-row.roll 7 rows at 768). Operator: "we should probably limit that to display only 2" — held to two rows in that width band only; the copy stays in the markup. */
@media (min-width:641px){
  .sponsor-row.featured .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
  .sponsor-row.roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */

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

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

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a > span.thumb > img,
  a.card > span.shot > img,
  article.article > figure.article-figure > img,
  main > figure.art-hero > img){height:auto}
/* op-img-dims:end */
@media (min-width:430px) and (max-width:700px){.sponsor-row.roll.roll{grid-template-columns:repeat(2,minmax(0,1fr))!important}.sponsor-row.roll > .sponsor{min-width:0!important}}
@media (min-width:1121px) and (max-width:1219px){.nav .browse a { padding: 12px 16px; }.nav-toggle-label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(232, 230, 225); border: 1px solid rgb(58, 61, 68); padding: 13px 18px; cursor: pointer; }.head-in { flex-wrap: wrap; gap: 14px; align-items: center; }.lockup { flex-direction: column; align-items: flex-start; gap: 7px; }.nav-toggle-label { margin-left: auto; }.nav { order: 3; }.nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0px; white-space: normal; border-top: 1px solid rgb(44, 47, 53); margin-top: 8px; }.nav-toggle:checked ~ .nav { display: flex; }.nav { max-height: calc(-150px + 100vh); overflow-y: auto; overscroll-behavior: contain; }.nav > li { border-bottom: 1px solid rgb(44, 47, 53); padding: 8px 0px; }.nav > li > a { display: block; padding: 12px 0px; }.nav > li.has-sub > a { font-family: var(--display); font-size: 22px; letter-spacing: 0.01em; color: rgb(232, 230, 225); line-height: 1; }.nav .is-current > a, .home .nav .is-current > a { color: var(--red); }.nav .has-sub::after { display: none; }.nav .has-sub > a::after { display: none; }.nav-sub { position: static; opacity: 1; visibility: visible; transform: none; border-right: 0px; border-bottom: 0px; border-image: none; padding: 6px 0px 4px; min-width: 0px; background: none; border-top: 0px; border-left: 2px solid var(--red); margin-left: 2px; }.nav-sub .sub-head { display: none; }.nav-sub li a { padding: 12px 0px 12px 16px; border-left: 0px; font-size: 16px; }.nav .browse a { display: inline-block; }}