/* On the Dial — Signal Path
   Warm paper body, dark ink bars, amber signal line. */

:root {
  --paper:#EDE8DE;
  --panel:#E3DCCC;
  --ink:#1C1D21;
  --ink-2:#26272C;
  --ink-3:#3A3B41;
  --rule:#C9C0AE;
  --rule-soft:#D8D0BE;
  --amber:#E0A03C;
  --amber-hi:#F2C077;
  --burnt:#9A6516;
  --body:#55534E;
  --body-article:#2E2D2A;
  --body-deep:#45433F;
  --muted:#7C7870;
  --dim:#8A857A;
  --dim-2:#9A968C;
  --foot:#5F5B54;
  --nav-idle:#C9C3B7;

  --sans:'Archivo',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --gut:44px;
  --max:1240px;
}

*,*::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:19px;
  line-height:1.62;
  font-synthesis-weight:none;
}

img { max-width:100%; display:block; }

a { color:var(--burnt); text-decoration:none; }
a:hover { color:var(--amber-hi); }

h1,h2,h3,h4 { font-family:var(--sans); color:var(--ink); margin:0; letter-spacing:-0.02em; text-wrap:pretty; }

p { margin:0; text-wrap:pretty; }

button { font-family:inherit; }

.wrap { max-width:var(--max); margin:0 auto; padding-inline:var(--gut); }

.band { border-bottom:1px solid var(--rule); }
.band--panel { background:var(--panel); }
.band-pad { padding-block:52px; }

.kicker {
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--burnt);
  margin:0;
}
.kicker--dim { color:var(--dim); }

.skip {
  position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper);
  padding:10px 16px; z-index:99; font-family:var(--mono); font-size:13px;
}
.skip:focus { left:8px; top:8px; }

/* ── Header ─────────────────────────────────────────────── */

.site-head { background:var(--ink); position:relative; z-index:40; }
.head-in {
  max-width:var(--max); margin:0 auto; padding:18px var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:28px;
}
.wordmark { display:flex; align-items:center; gap:12px; }
.wordmark svg { flex:0 0 auto; }
.wordmark span {
  font-weight:800; font-size:17px; line-height:1; letter-spacing:.2em;
  text-transform:uppercase; color:var(--paper); white-space:nowrap;
}
.site-foot .wordmark span { color:var(--dim); font-size:14px; }

.nav-toggle, .subtog { position:absolute; opacity:0; pointer-events:none; }
.nav-burger, .subtog-lab { display:none; }

.nav > ul {
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:26px;
}
.nav a[data-nav] {
  font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.02em;
  color:var(--nav-idle); white-space:nowrap;
}
.nav a[data-nav]:hover, .nav li:focus-within > a[data-nav] { color:var(--amber); }
.nav a[data-nav][aria-current="page"] { color:var(--amber); font-weight:600; }

.nav .has-sub { position:relative; }
.nav .has-sub > a::after {
  content:""; display:inline-block; width:5px; height:5px; margin-left:7px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
/* transparent bridge so the cursor never leaves a hoverable area */
.nav .has-sub::after {
  content:""; position:absolute; left:0; right:-20px; top:100%; height:16px; display:none;
}
.nav .has-sub:hover::after, .nav .has-sub:focus-within::after { display:block; }

.nav-sub {
  position:absolute; top:100%; left:-18px; margin:14px 0 0; padding:16px 0 10px;
  min-width:308px; list-style:none;
  background:var(--ink-2); border:1px solid var(--ink-3); border-radius:3px;
  box-shadow:0 20px 44px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .14s ease, transform .14s ease;
}
.nav .has-sub:hover > .nav-sub,
.nav .has-sub:focus-within > .nav-sub { opacity:1; visibility:visible; transform:none; }

.nav-sub::before {
  content:attr(data-cat);
  display:block; padding:0 20px 10px;
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--amber);
}
.nav-sub li { padding:0; }
.nav-sub a {
  display:block; padding:9px 20px;
  font-family:var(--sans); font-size:15.5px; font-weight:500; line-height:1.35;
  color:#DCD6CA; border-left:2px solid transparent;
}
.nav-sub a:hover { background:#2E2F35; color:var(--amber-hi); border-left-color:var(--amber); }
.nav-sub .sub-all a {
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim); margin-top:6px; border-top:1px solid var(--ink-3); padding-top:12px;
}

/* ── Footer ─────────────────────────────────────────────── */

.site-foot { background:var(--ink); color:var(--foot); }
.foot-in {
  max-width:var(--max); margin:0 auto; padding:38px var(--gut) 44px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:36px; flex-wrap:wrap;
}
.foot-line { font-size:14px; color:var(--foot); margin-top:9px; max-width:52ch; }
.foot-nav { display:flex; gap:22px; flex-wrap:wrap; }
.foot-nav a { font-family:var(--mono); font-size:13px; color:var(--dim); }
.foot-nav a:hover { color:var(--amber); }

/* ── Hero ───────────────────────────────────────────────── */

.hero { position:relative; background:var(--ink); }
.hero-img { position:relative; height:clamp(460px,84vh,880px); overflow:hidden; }
.hero-img img { width:100%; height:100%; object-fit:cover; object-position:center 42%; opacity:.82; }
.hero-img::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(28,29,33,.30) 0%,rgba(28,29,33,.42) 40%,rgba(28,29,33,.80) 76%,rgba(28,29,33,.97) 100%);
}
.hero-copy {
  position:absolute; inset:auto 0 0 0; z-index:2;
  max-width:var(--max); margin:0 auto; padding:0 var(--gut) 56px;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:44px; align-items:end;
}
.hero-copy .kicker { color:var(--amber); }
.hero-copy h1 {
  color:var(--paper); font-size:clamp(38px,5.4vw,72px); line-height:1.0;
  letter-spacing:-0.035em; margin:18px 0 0; max-width:20ch;
}
.hero-dek { color:#C9C3B7; font-size:20px; line-height:1.6; max-width:44ch; }

/* ── Signal rail (signature) ────────────────────────────── */

.rail-block { padding-block:48px; }
.rail-head { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:38px; }
.rail-head h2 { font-size:clamp(28px,3vw,40px); line-height:1.05; letter-spacing:-0.025em; max-width:22ch; }
.rail-head p { max-width:44ch; font-size:17.5px; }

.rail { position:relative; --path-pct:7.14%; }
.rail-base, .rail-live { position:absolute; left:0; top:31px; height:2px; }
.rail-base { right:0; background:var(--rule); }
.rail-live { width:var(--path-pct); background:var(--amber); transition:width .28s cubic-bezier(.4,0,.2,1); }
.rail-head-dot {
  position:absolute; top:23px; left:var(--path-pct); margin-left:-9px;
  width:18px; height:18px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 0 4px rgba(224,160,60,.28);
  transition:left .28s cubic-bezier(.4,0,.2,1);
}
.rail-stops {
  position:relative; display:grid; grid-template-columns:repeat(var(--stops,7),1fr);
  list-style:none; margin:0; padding:0;
}
.rail-stops li { display:flex; }
.stop {
  appearance:none; background:transparent; border:0; cursor:pointer; padding:0 6px;
  display:flex; flex-direction:column; align-items:center; gap:12px; width:100%;
}
.stop .dot {
  width:18px; height:18px; border-radius:50%; margin-top:22px;
  background:var(--paper); border:2px solid var(--ink);
  transition:background .18s ease, border-color .18s ease;
}
.stop .lab {
  font-family:var(--mono); font-size:11.5px; line-height:1.35; font-weight:500;
  color:var(--dim); text-align:center;
}
.stop[aria-selected="true"] .dot { background:var(--amber); border-color:var(--burnt); }
.stop[aria-selected="true"] .lab { color:var(--ink); font-weight:600; }
.stop:hover .lab { color:var(--ink); }

.stage-panel {
  margin-top:34px; background:var(--panel); border:1px solid var(--rule); border-radius:3px;
  padding:32px 34px; display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:44px; align-items:start;
}
.stage-meta { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.stage-no { font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.1em; color:var(--burnt); }
.stage-sub { font-family:var(--mono); font-size:12px; color:var(--muted); }
.stage-panel h3 { font-size:34px; line-height:1.1; margin:12px 0 14px; }
.stage-body { max-width:62ch; font-size:18px; line-height:1.65; color:var(--body-deep); }
.stage-link { display:inline-block; margin-top:16px; font-weight:600; font-size:15px; color:var(--burnt); }
.stage-fig { margin:0; }
.stage-fig img { width:100%; height:230px; object-fit:cover; border-radius:2px; }
.stage-list { margin:26px 0 0; padding:0; list-style:none; display:grid; gap:6px; }
.stage-list li { font-size:16px; color:var(--muted); }
.stage-list b { color:var(--ink); font-weight:600; }
.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;
}

/* ── Clock wheel (signature) ────────────────────────────── */

.clock-grid { display:grid; grid-template-columns:440px minmax(0,1fr); gap:56px; align-items:center; }
.clock-stage { position:relative; width:100%; max-width:440px; justify-self:center; }
.clock-dial { display:block; width:100%; height:auto; touch-action:none; cursor:grab; }
.clock-dial:active { cursor:grabbing; }
.clock-readout {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; gap:7px; padding:0 26%; pointer-events:none;
}
.clock-at { font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; color:var(--burnt); }
.clock-kind { font-size:23px; font-weight:700; line-height:1.14; color:var(--ink); letter-spacing:-0.02em; }
.clock-len { font-family:var(--mono); font-size:12.5px; color:var(--muted); }
.clock-hint { margin-top:16px; text-align:center; font-family:var(--mono); font-size:12px; color:var(--muted); }

.clock-legend { list-style:none; margin:22px 0 0; padding:0; display:grid; gap:0; }
.clock-legend li { border-top:1px solid var(--rule-soft); }
.clock-legend li:last-child { border-bottom:1px solid var(--rule-soft); }
.seg-btn {
  appearance:none; background:transparent; border:0; width:100%; cursor:pointer;
  display:grid; grid-template-columns:96px 1fr auto; gap:16px; align-items:center;
  padding:13px 4px; text-align:left;
}
.seg-btn:hover { background:rgba(224,160,60,.10); }
.seg-btn .swatch { display:inline-block; width:11px; height:11px; border-radius:2px; margin-right:10px; vertical-align:-1px; }
.seg-btn .at { font-family:var(--mono); font-size:13px; color:var(--muted); }
.seg-btn .kind { font-size:17px; font-weight:600; color:var(--ink); }
.seg-btn .len { font-family:var(--mono); font-size:13px; color:var(--burnt); }
.seg-btn[aria-selected="true"] { background:rgba(224,160,60,.18); }

/* ── Format comparison ─────────────────────────────────── */

.table-scroll { overflow-x:auto; }
table.datatable, table.versus {
  width:100%; border-collapse:collapse; background:transparent; margin:0;
  font-size:16.5px;
}
table.datatable caption, table.versus caption {
  caption-side:top; text-align:left; padding-bottom:14px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--burnt);
}
.datatable th, .versus th {
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); text-align:left;
  padding:14px 18px; border-bottom:1px solid var(--rule); background:rgba(28,29,33,.04);
  white-space:nowrap;
}
.datatable td, .versus td {
  padding:16px 18px; border-bottom:1px solid var(--rule-soft); color:var(--body-deep);
  vertical-align:top;
}
.datatable tbody tr:nth-child(odd) td, .versus tbody tr:nth-child(odd) td { background:rgba(28,29,33,.025); }
.datatable td:first-child, .versus td:first-child { font-weight:600; color:var(--ink); }
.versus td + td { border-left:1px solid var(--rule-soft); }
.cell-no { color:var(--muted); }

/* ── Loudness explainer ────────────────────────────────── */

.loud-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:48px; align-items:start; }
.loud-figure { margin:0; background:var(--panel); border:1px solid var(--rule); border-radius:3px; padding:26px 28px 20px; }
.loud-figure svg { width:100%; height:auto; display:block; }
.loud-figure figcaption { margin-top:16px; font-family:var(--mono); font-size:12.5px; line-height:1.55; color:var(--muted); }
.loud-controls { display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.loud-btn {
  appearance:none; cursor:pointer; background:transparent; border:1px solid var(--rule);
  color:var(--body-deep); padding:10px 16px; border-radius:2px;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}
.loud-r { position:absolute; opacity:0; pointer-events:none; }
.loud-r:checked + .loud-btn { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.loud-r:focus-visible + .loud-btn { outline:2px solid var(--amber); outline-offset:3px; }
.loud-figure g[class^="s-"] { transition:opacity .22s ease; }
#ld-before:checked ~ .loud-figure .s-after,
.loud-switch:has(#ld-before:checked) .s-after { opacity:.12; }
#ld-after:checked ~ .loud-figure .s-before,
.loud-switch:has(#ld-after:checked) .s-before { opacity:.12; }
.loud-note { font-size:17px; color:var(--body-deep); }
.loud-legend { list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px; }
.loud-legend li { font-family:var(--mono); font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:10px; }
.loud-legend i { width:14px; height:14px; border-radius:2px; display:block; }

/* ── Cards / lists ─────────────────────────────────────── */

.lead-entry { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px; align-items:center; }
.lead-entry img { width:100%; height:340px; object-fit:cover; border-radius:2px; }
.lead-entry h2 { font-size:clamp(28px,3.2vw,40px); line-height:1.06; margin:14px 0 14px; }
.lead-entry .dek { font-size:19px; color:var(--body); max-width:52ch; }

.meta {
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; color:var(--muted);
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:16px;
}
.meta .sep { color:var(--rule); }

.card-row {
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--rule);
}
.card {
  display:flex; flex-direction:column; gap:10px; padding:22px 22px 24px;
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); height:100%;
}
.card:nth-child(3n) { border-right:0; }
.card h3 {
  font-size:22px; line-height:1.18; letter-spacing:-0.015em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card p {
  font-size:15px; line-height:1.5; color:var(--body);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card img { width:100%; height:128px; object-fit:cover; border-radius:2px; margin-top:auto; }
.card .kicker { font-size:10.5px; letter-spacing:.16em; }
.card .meta { margin-top:0; font-size:11.5px; }
a.card { color:inherit; }
a.card:hover h3 { color:var(--burnt); }

.sec-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:0; border-top:1px solid var(--rule); }
.sec-card {
  padding:28px 26px 30px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  display:flex; flex-direction:column; gap:10px; color:inherit; min-height:210px;
}
.sec-card:last-child { border-right:0; }
.sec-card .tag { font-family:var(--mono); font-size:12px; color:var(--burnt); letter-spacing:.14em; }
.sec-card h3 { font-size:21px; line-height:1.2; min-height:2.4em; }
.sec-card p { font-size:15.5px; color:var(--muted); }
.sec-card .count { margin-top:auto; font-family:var(--mono); font-size:12px; color:var(--dim); }
.sec-card:hover { background:var(--panel); }
.sec-card:hover h3 { color:var(--burnt); }

/* index / "off the path" list */
.idx-grid { display:grid; grid-template-columns:280px minmax(0,1fr); gap:48px; }
.idx-grid > div:first-child h2 {
  font-size:15px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
}
.idx-grid > div:first-child p { margin-top:10px; font-size:16px; color:var(--muted); max-width:34ch; }
.idx-list { list-style:none; margin:0; padding:0; }
.idx-list > li { border-bottom:1px solid var(--rule-soft); }
.idx-list a {
  display:grid; grid-template-columns:132px minmax(0,1fr) minmax(0,32ch); gap:22px;
  align-items:baseline; padding:17px 0; color:inherit;
}
.idx-list .cat { font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--burnt); }
.idx-list .ttl { font-size:19.5px; font-weight:600; color:var(--ink); }
.idx-list .gloss { font-size:15.5px; color:var(--muted); }
.idx-list a:hover .ttl { color:var(--burnt); }

.more-toggle { position:absolute; opacity:0; pointer-events:none; }
.more-rest { display:none; }
.more-toggle:checked ~ .more-rest { display:block; }
.more-lab {
  display:inline-flex; align-items:center; gap:10px; cursor:pointer; margin-top:22px;
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--burnt); border-bottom:1px solid var(--rule); padding-bottom:6px;
}
.more-lab:hover { color:var(--ink); }
.more-toggle:checked ~ .more-lab { display:none; }
.more-toggle:focus-visible ~ .more-lab { outline:2px solid var(--amber); outline-offset:4px; }

/* index shown as a log: five columns, one per stretch of the path */
.idx-cols {
  display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.idx-col { border-right:1px solid var(--rule); padding:20px 18px 22px; min-width:0; }
.idx-col:last-child { border-right:0; }
.idx-col.no-match { display:none; }
.col-head { display:flex; flex-direction:column; gap:7px; padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid var(--rule-soft); }
.col-head .tag { font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--burnt); }
.col-head a { font-size:17px; font-weight:600; line-height:1.2; color:var(--ink); letter-spacing:-0.01em; }
.col-head a:hover { color:var(--burnt); }
.col-meter { display:flex; gap:3px; align-items:center; margin-top:2px; }
.col-meter i { width:13px; height:5px; border-radius:1px; background:var(--rule); display:block; }
.col-meter i.on { background:var(--amber); }
.col-meter span { font-family:var(--mono); font-size:10.5px; color:var(--dim-2); margin-left:6px; }
.idx-col .idx-list li { border-bottom:1px solid var(--rule-soft); }
.idx-col .idx-list li:last-child { border-bottom:0; }
.idx-col .idx-list a {
  display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:4px 8px;
  align-items:baseline; padding:12px 0;
}
.idx-col .cat { display:none; }
.idx-col .num { font-family:var(--mono); font-size:11px; color:var(--dim-2); }
.idx-col .ttl { font-size:16px; font-weight:600; line-height:1.25; color:var(--ink); }
.idx-col .r { font-family:var(--mono); font-size:11px; color:var(--burnt); white-space:nowrap; }
.idx-col .gloss { grid-column:2 / -1; font-size:13.5px; line-height:1.45; color:var(--muted); }

/* section filter — CSS only, every item stays in the HTML */
.idx-search {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border-bottom:1px solid var(--rule); padding-bottom:12px; margin-bottom:20px;
  color:var(--burnt);
}
.idx-search svg { flex:0 0 auto; }
.idx-search input {
  flex:1; min-width:180px; appearance:none; background:transparent; border:0; outline:0;
  font-family:var(--sans); font-size:19px; color:var(--ink); padding:4px 0;
}
.idx-search input::placeholder { color:var(--dim-2); }
.idx-search input:focus-visible { outline:2px solid var(--amber); outline-offset:6px; }
.idx-clear {
  appearance:none; cursor:pointer; background:transparent; border:1px solid var(--rule);
  border-radius:2px; padding:7px 12px; color:var(--body-deep);
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
}
.idx-clear:hover { border-color:var(--amber); color:var(--burnt); }
.idx-count { font-family:var(--mono); font-size:12px; color:var(--muted); white-space:nowrap; }
.idx-empty { font-size:17px; color:var(--muted); padding:20px 0 4px; }
.idx-empty b { color:var(--ink); font-weight:600; }
.idx-list li.no-match { display:none; }
.idx-wrap.searching .idx-cols { grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.idx-wrap.searching .idx-col { border-right:0; }
.idx-wrap.searching .idx-col + .idx-col { border-left:1px solid var(--rule); }
.idx-wrap.searching .more-rest { display:block; }
.idx-wrap.searching .more-lab { display:none; }
.idx-filter { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.idxf { position:absolute; opacity:0; pointer-events:none; }
.chip {
  cursor:pointer; display:inline-flex; align-items:baseline; gap:7px;
  padding:9px 14px; border:1px solid var(--rule); border-radius:2px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--body-deep); white-space:nowrap;
}
.chip span { color:var(--burnt); }
.chip:hover { border-color:var(--amber); }
.idxf:checked + .chip { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.idxf:checked + .chip span { color:var(--amber); }
.idxf:focus-visible + .chip { outline:2px solid var(--amber); outline-offset:3px; }
.idx-wrap:has(#f-how:checked) .idx-list li:not(.f-how),
.idx-wrap:has(#f-formats:checked) .idx-list li:not(.f-formats),
.idx-wrap:has(#f-onair:checked) .idx-list li:not(.f-onair),
.idx-wrap:has(#f-music:checked) .idx-list li:not(.f-music),
.idx-wrap:has(#f-gear:checked) .idx-list li:not(.f-gear) { display:none; }
.idx-wrap:has(#f-how:checked) .idx-col:not(.c-how),
.idx-wrap:has(#f-formats:checked) .idx-col:not(.c-formats),
.idx-wrap:has(#f-onair:checked) .idx-col:not(.c-onair),
.idx-wrap:has(#f-music:checked) .idx-col:not(.c-music),
.idx-wrap:has(#f-gear:checked) .idx-col:not(.c-gear) { display:none; }
.idx-wrap:not(:has(#f-all:checked)) .idx-cols { grid-template-columns:1fr; }
.idx-wrap:not(:has(#f-all:checked)) .idx-col { border-right:0; }
.idx-wrap:not(:has(#f-all:checked)) .idx-col .idx-list a { grid-template-columns:26px minmax(0,1fr) auto; }
.idx-wrap:not(:has(#f-all:checked)) .more-rest { display:block; }
.idx-wrap:not(:has(#f-all:checked)) .more-lab { display:none; }

/* ── Sponsors (native furniture) ───────────────────────── */

.supporters { padding-block:46px; }
.sup-head { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom:26px; }
.sup-head h2 { font-size:26px; letter-spacing:-0.02em; }
.sup-head p { font-size:16px; color:var(--muted); max-width:46ch; margin-top:8px; }
.sup-featured { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:20px; }
.sup-roll { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; }
a.sponsor {
  display:flex; flex-direction:column; gap:12px; padding:16px;
  background:var(--ink); border:1px solid var(--ink-3); border-radius:3px; color:var(--nav-idle);
  min-height:104px;
}
a.sponsor:hover { border-color:var(--amber); }
a.sponsor img { width:100%; height:44px; object-fit:contain; object-position:left center; }
.sup-roll a.sponsor { min-height:82px; }
.sup-roll a.sponsor img { height:34px; }
.sponsor-blurb { font-size:14.5px; line-height:1.5; color:var(--dim); }
.sponsor-blurb:empty { display:none; }
.sup-foot-note { margin-top:18px; font-family:var(--mono); font-size:12px; color:var(--dim-2); }

/* ── Article ───────────────────────────────────────────── */

.post-head { padding-block:56px 40px; }
.post-head-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:56px; align-items:end; }
.post-head h1 { font-size:clamp(34px,5vw,60px); line-height:1.03; letter-spacing:-0.03em; margin:18px 0 18px; max-width:19ch; }
.post-dek { font-size:20px; line-height:1.55; color:var(--body); max-width:56ch; }
.onthispage { border-left:2px solid var(--amber); padding-left:22px; }
.onthispage h2 {
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-bottom:12px;
}
.onthispage ol { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.onthispage a { font-family:var(--mono); font-size:13.5px; line-height:1.4; color:var(--ink); }
.onthispage a:hover { color:var(--burnt); }

.post-hero { margin:0; }
.post-hero img { width:100%; height:clamp(260px,34vw,460px); object-fit:cover; }
.post-hero figcaption {
  max-width:var(--max); margin:0 auto; padding:14px var(--gut) 0;
  font-family:var(--mono); font-size:12.5px; color:var(--muted);
}

.article-body {
  max-width:78ch; margin-inline:auto; padding-inline:var(--gut);
  padding-block:48px 20px;
  font-size:20px; line-height:1.72; color:var(--body-article);
  display:flex; flex-direction:column; gap:26px;
}
.article-body > * { margin:0; }
.article-body h2 {
  font-size:30px; line-height:1.15; margin-top:22px;
  display:flex; align-items:baseline; gap:16px;
}
.article-body h2 .n {
  font-family:var(--mono); font-size:13px; font-weight:500; color:var(--burnt);
  letter-spacing:.1em; flex:0 0 auto; transform:translateY(-2px);
}
.article-body h3 {
  font-size:15px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--burnt); margin-top:14px;
}
.article-body a { color:var(--burnt); border-bottom:1px solid rgba(154,101,22,.34); }
.article-body a:hover { color:var(--ink); border-bottom-color:var(--amber); }
.article-body strong { font-weight:700; color:var(--ink); }

.lead { font-size:23px; line-height:1.6; color:var(--body-deep); }
.lead::first-letter {
  float:left; font-size:78px; line-height:.78; font-weight:700; color:var(--burnt);
  padding:6px 14px 0 0;
}

.pullquote { margin:10px 0; padding:26px 30px; background:var(--ink); border-radius:3px; }
.pullquote p { font-size:24px; line-height:1.4; font-weight:600; color:var(--paper); letter-spacing:-0.01em; }
.blockquote { margin:6px 0; padding:0 0 0 24px; border-left:2px solid var(--amber); }
.blockquote p { font-size:21px; line-height:1.55; color:var(--body-deep); }
.blockquote cite { display:block; margin-top:12px; font-family:var(--mono); font-size:12.5px; font-style:normal; color:var(--muted); }

.callout {
  margin:8px 0; padding:24px 26px; background:var(--panel);
  border:1px solid var(--rule); border-radius:3px;
}
.callout p { font-size:18px; line-height:1.6; color:var(--body-deep); }
.callout .kicker { margin-bottom:10px; }
.note {
  font-family:var(--mono); font-size:14.5px; line-height:1.65; color:var(--muted);
  padding-left:18px; border-left:2px solid var(--rule);
}

/* by-the-numbers rail — the article's one contextual aside */
.statrow {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  margin:14px 0;
}
.statblock {
  display:flex; flex-direction:column; gap:7px; padding:22px 22px 24px;
  border-right:1px solid var(--rule-soft);
}
.statblock:last-child { border-right:0; }
.stat-num { font-size:34px; font-weight:700; line-height:1; color:var(--ink); letter-spacing:-0.03em; }
.stat-label { font-family:var(--mono); font-size:12px; line-height:1.45; color:var(--muted); }
.statrow--wide { margin-inline:calc(-1 * clamp(0px,4vw,90px)); }

.timeline { list-style:none; margin:8px 0; padding:0; display:grid; gap:0; }
.timeline li {
  display:grid; grid-template-columns:minmax(150px,30%) minmax(0,1fr); gap:24px;
  padding:16px 0; border-top:1px solid var(--rule-soft); align-items:baseline;
}
.timeline li:last-child { border-bottom:1px solid var(--rule-soft); }
.t-when { font-family:var(--mono); font-size:13px; line-height:1.5; color:var(--burnt); text-transform:uppercase; letter-spacing:.08em; }
.t-what { font-size:17.5px; line-height:1.6; color:var(--body-deep); }

.chart { margin:10px 0; }
.chart svg { width:100%; height:auto; display:block; }
.chart figcaption { margin-top:14px; font-family:var(--mono); font-size:12.5px; line-height:1.55; color:var(--muted); }
.chart text { font-family:var(--mono); }

.article-figure { margin:10px 0; }
.article-figure img { width:100%; object-fit:cover; border-radius:2px; }
.article-figure figcaption { margin-top:12px; font-family:var(--mono); font-size:12.5px; line-height:1.55; color:var(--muted); }
.gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin:10px 0; }
.gallery figure { margin:0; }
.gallery img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:2px; }
.gallery figcaption { margin-top:10px; font-family:var(--mono); font-size:12px; color:var(--muted); }

.map-figure { margin:10px 0; }
.map-slot {
  height:300px; background:var(--panel); border:1px solid var(--rule); border-radius:2px;
}
.map-figure figcaption { margin-top:12px; font-family:var(--mono); font-size:12.5px; color:var(--muted); }

.profile-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin:10px 0; }
.profile-card {
  border:1px solid var(--rule); border-radius:3px; padding:22px; background:var(--panel);
  display:flex; flex-direction:column; gap:9px;
}
.profile-card .p-photo { width:100%; aspect-ratio:1; object-fit:cover; border-radius:2px; }
.profile-card h3 { font-size:20px; text-transform:none; letter-spacing:-0.01em; color:var(--ink); margin:0; }
.profile-card .p-role { font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--burnt); }
.profile-card p { font-size:16px; line-height:1.55; color:var(--body-deep); }
.profile-card .p-links a { font-size:15px; }
.profile-card .p-attr { font-family:var(--mono); font-size:11.5px; color:var(--dim-2); }
.profile-card.no-photo { border-left:2px solid var(--amber); }

.org-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin:10px 0; }
a.org-card {
  display:flex; flex-direction:column; gap:6px; padding:18px;
  border:1px solid var(--rule); border-radius:3px; background:var(--paper); color:inherit;
}
a.org-card:hover { border-color:var(--amber); background:var(--panel); }
.org-logo { height:30px; width:auto; object-fit:contain; }
.org-name { font-size:17px; font-weight:600; color:var(--ink); }
.org-host { font-family:var(--mono); font-size:12px; color:var(--muted); }
.org-card.no-logo { border-left:2px solid var(--amber); }
a.entity-ref { font-weight:600; }

.further-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:10px 0; }
.further-grid a {
  padding:20px; border:1px solid var(--rule); border-radius:3px; color:var(--ink);
  font-size:18px; font-weight:600; line-height:1.3; border-bottom:1px solid var(--rule);
}
.further-grid a:hover { background:var(--panel); border-color:var(--amber); color:var(--burnt); }

.related { border-top:1px solid var(--rule); }
.related-in { max-width:var(--max); margin:0 auto; padding:42px var(--gut) 48px; }
.related h2 { font-size:15px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:20px; }
ul.related-links { list-style:none; margin:0; padding:0; display:grid; gap:0; }
ul.related-links li { border-top:1px solid var(--rule-soft); }
ul.related-links li:last-child { border-bottom:1px solid var(--rule-soft); }
ul.related-links a {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,34ch); gap:24px;
  align-items:baseline; padding:16px 0; color:var(--ink); font-size:20px; font-weight:600;
}
ul.related-links span { font-family:var(--sans); font-size:15.5px; font-weight:400; color:var(--muted); }
ul.related-links a:hover { color:var(--burnt); }

/* compressed rail inside an article */
.rail--compact { --path-pct:7.14%; }
.rail--compact .rail-base, .rail--compact .rail-live { top:9px; }
.rail--compact .rail-head-dot { display:none; }
.rail--compact .stop .dot { width:14px; height:14px; margin-top:3px; }
.rail--compact .stop .lab { font-size:11px; }
.rail--compact .stop { gap:11px; }
.rail-readout { display:flex; gap:26px; align-items:flex-start; margin-top:26px; }
.rail-readout .no { flex:0 0 96px; font-family:var(--mono); font-size:12.5px; color:var(--burnt); line-height:1.5; }
.rail-readout p { max-width:76ch; font-size:17.5px; line-height:1.65; color:var(--body-deep); }

/* ── Path-position mini legend ─────────────────────────── */

.pathpos { border:1px solid var(--rule); background:var(--panel); border-radius:3px; }
.pathpos h2 {
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); padding:13px 16px; border-bottom:1px solid var(--rule); margin:0;
}
.pathpos ul { list-style:none; margin:0; padding:16px; display:grid; gap:10px; }
.pathpos li { display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:13.5px; color:var(--ink); }
.pathpos i { width:10px; height:10px; border-radius:50%; background:var(--amber); display:block; flex:0 0 auto; }
.pathpos li.off { color:var(--dim-2); }
.pathpos li.off i { background:var(--rule); }

/* ── Section / category page ───────────────────────────── */

.cat-head { padding-block:48px 38px; }
.cat-head-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:56px; align-items:end; }
.cat-head h1 { font-size:clamp(32px,4.4vw,50px); line-height:1.05; letter-spacing:-0.025em; margin:14px 0 14px; }
.cat-head .dek { font-size:19px; max-width:60ch; color:var(--body); }

.cat-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border-top:1px solid var(--rule); }
.cat-lead { padding:36px; border-right:1px solid var(--rule); display:flex; flex-direction:column; gap:16px; }
.cat-lead img { width:100%; height:230px; object-fit:cover; border-radius:2px; }
.cat-lead h2 { font-size:31px; line-height:1.12; }
.cat-lead p { font-size:17px; color:var(--body); }
.cat-rest { display:flex; flex-direction:column; }
.cat-rest a {
  padding:24px 36px; border-bottom:1px solid var(--rule); display:flex; flex-direction:column; gap:8px;
  color:inherit;
}
.cat-rest a:last-child { border-bottom:0; }
.cat-rest a:hover { background:var(--panel); }
.cat-rest h3 { font-size:22px; line-height:1.25; }
.cat-rest p { font-size:15.5px; color:var(--muted); }
.cat-rest a:hover h3 { color:var(--burnt); }

ul.cat-list { list-style:none; margin:0; padding:0; }
ul.cat-list li { border-top:1px solid var(--rule-soft); }
ul.cat-list li:last-child { border-bottom:1px solid var(--rule-soft); }
ul.cat-list a {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,36ch) auto; gap:24px;
  align-items:baseline; padding:18px 0; color:var(--ink);
}
ul.cat-list .t { font-size:21px; font-weight:600; }
ul.cat-list .g { font-size:16px; color:var(--muted); font-weight:400; }
ul.cat-list .r { font-family:var(--mono); font-size:12.5px; color:var(--burnt); white-space:nowrap; }
ul.cat-list a:hover .t { color:var(--burnt); }

/* ── Simple pages ──────────────────────────────────────── */

.page-body {
  max-width:74ch; margin-inline:auto; padding-inline:var(--gut); padding-block:52px 60px;
  display:flex; flex-direction:column; gap:24px; font-size:20px; line-height:1.72; color:var(--body-article);
}
.page-body h1 { font-size:clamp(32px,4.4vw,52px); line-height:1.04; letter-spacing:-0.03em; }
.page-body h2 { font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:var(--burnt); margin-top:16px; }
.page-body ul { margin:0; padding-left:22px; }
.page-body li { margin-bottom:10px; }
.contact-list { list-style:none; padding:0; display:grid; gap:0; }
.contact-list li {
  display:flex; align-items:center; gap:16px; padding:18px 0; border-top:1px solid var(--rule-soft);
}
.contact-list li:last-child { border-bottom:1px solid var(--rule-soft); }
.contact-list svg { flex:0 0 auto; color:var(--burnt); }
.contact-list b { display:block; font-size:16px; color:var(--ink); }
.contact-list span { font-family:var(--mono); font-size:14px; color:var(--muted); }

.err-block { padding-block:90px 100px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:20px; }
.err-block h1 { font-size:clamp(36px,6vw,68px); line-height:1; letter-spacing:-0.04em; }
.err-block p { font-size:20px; color:var(--body); max-width:46ch; }
.err-dial { color:var(--amber); }

/* ── Styleguide scaffold ───────────────────────────────── */

.sg-section { border-top:1px solid var(--rule); padding-block:40px; }
.sg-section > h2 {
  font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--burnt); margin-bottom:24px;
}
.sg-item { margin-bottom:34px; }
.sg-item > h3 {
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:none;
  color:var(--dim); margin-bottom:14px; font-weight:500;
}
.sg-note { font-size:16px; color:var(--muted); max-width:70ch; margin-bottom:18px; }
.sg-flow { max-width:78ch; display:flex; flex-direction:column; gap:24px; font-size:20px; line-height:1.72; color:var(--body-article); }

/* ── Responsive ────────────────────────────────────────── */

@media (max-width:1080px) {
  .stage-panel { grid-template-columns:1fr; }
  .stage-fig img { height:260px; }
  .clock-grid { grid-template-columns:1fr; gap:34px; }
  .loud-grid { grid-template-columns:1fr; gap:30px; }
  .post-head-grid { grid-template-columns:1fr; gap:32px; }
  .cat-head-grid { grid-template-columns:1fr; gap:30px; }
  .lead-entry { grid-template-columns:1fr; gap:26px; }
  .lead-entry img { height:280px; }
  .idx-grid { grid-template-columns:1fr; gap:26px; }
  .idx-cols { grid-template-columns:1fr 1fr 1fr; }
  .idx-col:nth-child(3n) { border-right:0; }
  .idx-col { border-bottom:1px solid var(--rule-soft); }
  .idx-list a { grid-template-columns:120px minmax(0,1fr); }
  .idx-list .gloss { grid-column:2; }
  .hero-copy { grid-template-columns:1fr; gap:18px; }
  .hero-dek { max-width:56ch; }
}

@media (max-width:1120px) {
  .nav-burger {
    display:flex; align-items:center; gap:10px; cursor:pointer;
    font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--nav-idle);
  }
  .nav-burger svg { display:block; }
  .nav {
    position:absolute; left:0; right:0; top:100%; background:var(--ink-2);
    border-top:1px solid var(--ink-3); display:none; padding:10px 0 18px; z-index:50;
    max-height:76vh; overflow-y:auto;
  }
  .nav-toggle:checked ~ .nav { display:block; }
  .nav > ul { flex-direction:column; align-items:stretch; gap:0; }
  .nav > ul > li { border-bottom:1px solid var(--ink-3); position:relative; }
  .nav a[data-nav] { display:block; padding:15px var(--gut); font-size:14px; }
  .nav .has-sub > a::after { display:none; }
  .nav .has-sub::after { display:none !important; }
  .subtog-lab {
    position:absolute; right:calc(var(--gut) - 6px); top:6px; width:38px; height:38px;
    display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--amber);
  }
  .subtog-lab svg { transition:transform .16s ease; }
  .subtog:checked ~ .subtog-lab svg { transform:rotate(180deg); }
  .nav-sub {
    position:static; opacity:1; visibility:hidden; transform:none; box-shadow:none;
    border:0; border-top:1px solid var(--ink-3); border-radius:0; margin:0;
    padding:12px 0 14px; min-width:0; background:rgba(0,0,0,.22); display:none;
  }
  .subtog:checked ~ .nav-sub { display:block; visibility:visible; }
  .nav .has-sub:hover > .nav-sub, .nav .has-sub:focus-within > .nav-sub { visibility:hidden; }
  .subtog:checked ~ .nav-sub { visibility:visible; }
  .nav-sub::before { padding:0 var(--gut) 8px; }
  .nav-sub a { padding:10px var(--gut); }
  .nav-sub .sub-all a { margin-inline:var(--gut); padding-inline:0; }
}

@media (max-width:900px) {
  :root { --gut:26px; }
  body { font-size:18px; }

  .rail-stops { grid-template-columns:1fr; }
  .rail-base, .rail-live, .rail-head-dot { display:none; }
  .rail-stops li { border-bottom:1px solid var(--rule-soft); }
  .stop { flex-direction:row; align-items:center; gap:14px; padding:13px 0; }
  .stop .dot { margin-top:0; }
  .stop .lab { text-align:left; font-size:13.5px; }
  .stage-panel { padding:24px 22px; }
  .stage-panel h3 { font-size:28px; }

  .clock-readout { padding:0 20%; }
  .clock-kind { font-size:19px; }
  .seg-btn { grid-template-columns:86px 1fr; }
  .seg-btn .len { grid-column:2; }

  .card-row, .sec-cards, .cat-split { grid-template-columns:1fr 1fr; }
  .card:nth-child(3n) { border-right:1px solid var(--rule); }
  .card:nth-child(2n) { border-right:0; }
  .sec-card, .cat-lead { border-right:0; }
  .cat-lead { border-bottom:1px solid var(--rule); }
  .card h3 { -webkit-line-clamp:3; }
  .card p { min-height:0; }
  .sec-card h3 { min-height:0; }

  .article-body { font-size:18.5px; gap:22px; }
  .article-body h2 { font-size:25px; }
  .lead { font-size:20px; }
  .lead::first-letter { font-size:62px; }
  .pullquote { padding:20px 22px; }
  .pullquote p { font-size:20px; }
  .statrow { grid-template-columns:1fr 1fr; }
  .statblock { padding:18px 16px; }
  .stat-num { font-size:28px; }
  .statrow--wide { margin-inline:0; }
  .timeline li { grid-template-columns:1fr; gap:6px; }
  ul.related-links a, ul.cat-list a { grid-template-columns:1fr; gap:8px; }
  ul.cat-list .r { grid-row:1; }
  .related-in { padding-block:32px 38px; }
  .rail-readout { flex-direction:column; gap:12px; }
  .foot-in { flex-direction:column; align-items:flex-start; gap:22px; }
  .table-scroll table { min-width:560px; }
}

@media (max-width:560px) {
  .hero-img { height:clamp(420px,68vh,560px); }
  .hero-dek { font-size:18px; }
  .card-row { grid-template-columns:1fr; }
  .card, .card:nth-child(3n), .card:nth-child(2n) { border-right:0; }
  .idx-cols { grid-template-columns:1fr; }
  .idx-col, .idx-col:nth-child(3n) { border-right:0; }
}

@media (max-width:420px) {
  :root { --gut:18px; }
  .hero-copy { padding-bottom:30px; }
  .sup-featured, .sup-roll { grid-template-columns:1fr 1fr; }
  .statrow { grid-template-columns:1fr; }
  .statblock { border-right:0; border-bottom:1px solid var(--rule-soft); }
  .statblock:last-child { border-bottom:0; }
}

@media print {
  .site-head, .site-foot, .supporters, .loud-controls { display:none; }
  body { background:#fff; }
}


/* 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-dark-plate: the supporters bands are light bone; most partner wordmarks are light-on-
   transparent and vanish. Plate them on the charcoal so they read. Selectors are tag-agnostic:
   the slots ship as <div class="sponsor">, so Design's own `a.sponsor …` rules no longer match. */
.sponsor{display:flex;flex-direction:column;gap:10px;border:1px solid var(--hair);padding:14px}
.sponsor img{background:#1C1D21;border-radius:5px;width:100%;max-width:100%;height:64px;padding:10px 14px;box-sizing:border-box;object-fit:contain;object-position:center;align-self:stretch}
.sup-roll .sponsor{min-height:82px}

/* sp-text-contrast: sponsor copy measured against its OWN ground as a WCAG contrast RATIO, not as a
   luminance subtraction. The subtraction passed capitanalatriste's blurbs at a 75-point gap
   while they sat at 2.8:1 and could not be read. Bar is 4.5:1 for body copy, 3:1 for large or
   bold; opacity is folded in, because it compounds down the tree and computed colour ignores
   it. The lift keeps Design's hue and saturation and moves lightness only, by the smallest
   step that clears the bar, so a warm blurb on near-black stays warm. Colour only — size,
   weight, family and spacing are exactly as delivered. */
.sponsor-blurb.sponsor-blurb{color:rgb(109,104,95)!important;opacity:1!important}

/* op-roll-4up: operator: the bottom two rows, four items max per row. .sup-roll auto-fit at
   minmax(170px,1fr) was fitting six across. Desktop only — Design's 1fr 1fr step below 900px
   still owns the narrow layout. */
@media (min-width:900px){
  .sup-roll{grid-template-columns:repeat(4,1fr)}
}


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

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

/* op-page-overflow: the page scrolled sideways at 320 — a.sec-card reached
   324px in a 320px screen (+4px), inside
   div.sec-cards. 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){
  a.sec-card{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
}

/* op-article-width: the article column was capped at 805px (93 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 78ch (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 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  div.article-body{max-width:min(969px, 100%)!important}
}
@media (min-width:1600px){
  div.article-body{max-width:min(clamp(969px, 67.292vw, 1163px), 100%)!important}
  div.article-body > :is(p:not([class])){font-size:clamp(20px,1.3889vw,24.0px)!important}
}
/* op-article-width:end */

/* op-hover-pad */
.seg-btn{padding-right: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(article > figure.post-hero > img,
  div.band-pad.wrap > div.lead-entry > img,
  div.card-row > a.card > img,
  div.cat-split > a.cat-lead > img,
  div.gallery > figure > img,
  div.stage-panel > figure.stage-fig > img,
  section.hero > div.hero-img > img){height:auto}
/* op-img-dims:end */
.nav > ul > li.has-sub:nth-of-type(n+5) > .nav-sub{left:auto!important;right:-18px!important}