/* Mass Music — Bench Light
   Palette, 5 members, each with a job:
   --paper   ground
   --ink     ink
   --accent  accent, saturated (butterscotch, hue ~38)
   --second  secondary, saturated (oxblood, hue ~6)
   --muted   quiet ink for credits and small furniture
   Widths: prose measure / breakout / full bleed. */

:root {
  --paper: #F1E9D8;
  --ink: #231C16;
  --accent: #D19A3C;
  --second: #7A2A22;
  --muted: #6A5B4A;

  --paper-deep: #E6DCC6;
  --amber-ink: #221809;
  --parchment: #FBEDE6;
  --mat: #55463A;
  --deep: #2E251D;
  --rule: #D8CBB4;
  --accent-ink: #8A4A1E;   /* accent, dark enough for small type on paper */
  --accent-lift: #E7B36B;  /* accent, light enough for small type on ink */

  --prose: 68ch;
  --breakout: 1120px;
  --gutter: 24px;
  --body: 19px;
  --pgap: 1.15em;

  --grille:
    repeating-linear-gradient(45deg, rgba(0,0,0,.16) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.16) 0 1px, transparent 1px 6px);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Spline Sans", system-ui, sans-serif;
  font-size: var(--body);
  line-height: 1.6;
  text-wrap: pretty;
}

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

a { color: var(--accent-ink); text-decoration: none; }
a:hover { color: var(--second); text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1;
  margin: 0;
}

::selection { background: var(--second); color: var(--parchment); }

.mono, .kicker, .credit, .t-when, .stat-label, .sect-count {
  font-family: "Spline Sans Mono", ui-monospace, monospace;
}

.icon { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { width: auto; height: auto; clip-path: none; left: 12px; top: 12px; background: var(--ink); color: var(--paper); padding: 10px 14px; z-index: 20; }

/* ---------- widths ---------- */
.wrap { width: 100%; max-width: var(--breakout); margin-inline: auto; padding-inline: var(--gutter); }
.bleed { width: 100%; }

/* ---------- masthead ---------- */
.masthead { background: var(--accent); color: var(--amber-ink); }
.masthead-in {
  max-width: 1600px; margin-inline: auto; padding: 16px var(--gutter) 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px 32px; flex-wrap: wrap;
}
.wordmark { display: block; font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800; font-size: clamp(38px, 5.4vw, 68px); line-height: .9; letter-spacing: -.045em;
  color: var(--amber-ink); }
.wordmark:hover { text-decoration: none; color: var(--amber-ink); }
.strapline { margin: 6px 0 0; max-width: 62ch; font-size: 15.5px; line-height: 1.4; color: #3A2A11; }
.fork { flex: none; width: clamp(40px, 3.6vw, 50px); height: auto; color: var(--amber-ink);
  stroke: currentColor; fill: none; stroke-width: 5; stroke-linecap: round; }

.nav { background: var(--ink); color: var(--paper); }
.nav-in {
  max-width: 1600px; margin-inline: auto; padding: 0 var(--gutter);
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 0 28px;
}
.nav a {
  display: flex; align-items: center; gap: 9px; padding: 14px 0; color: var(--paper);
  font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 600; font-size: 16px;
  letter-spacing: .06em; text-transform: uppercase;
}
.nav a:hover { color: var(--accent); text-decoration: none; }
.nav a .icon { width: 19px; height: 19px; color: var(--accent); }
.nav a[aria-current="page"] { color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }

/* ---------- bands ---------- */
.band { padding: 72px 0; }
.band-tight { padding: 44px 0; }
.band-ink { background: var(--ink); color: var(--paper); }
.band-grille { background-color: var(--ink); background-image: var(--grille); color: var(--paper); }
.band-second { background: var(--second); color: var(--parchment); }

.kicker { font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-ink);
  display: inline-flex; align-items: center; gap: 8px; }
.kicker .icon { width: 15px; height: 15px; }
.band-ink .kicker, .band-grille .kicker, .band-second .kicker { color: var(--accent-lift); }

.section-rule { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; }
.section-rule .line { height: 1px; flex: 1; background: var(--rule); }
.band-ink .section-rule .line, .band-grille .section-rule .line { background: #3E332A; }

/* ---------- homepage lead ---------- */
.lead-band { background: var(--second); color: var(--parchment); }
.lead-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.lead-copy { padding: 56px var(--gutter); max-width: 1000px; margin-inline: auto; width: 100%; }
.lead-copy h1 { font-size: clamp(40px, 6.4vw, 104px); line-height: .92; }
.lead-deck { font-size: 21px; line-height: 1.5; margin: 22px 0 0; max-width: 54ch; }
.lead-figure { position: relative; min-height: 340px; background: #63211B; }
.lead-figure img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.lead-year { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800;
  font-size: clamp(56px, 7vw, 104px); line-height: .8; letter-spacing: -.04em; }

/* ---------- cards ---------- */
.card-grid { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); }
.card { display: flex; flex-direction: column; height: 100%; }
.card .card-fig { margin: 0 0 16px; }
.card .card-fig img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card h3 { font-size: 27px; line-height: 1.02; margin: 8px 0 0; }
.card p { margin: 10px 0 0; font-size: 17px; color: var(--muted); }
.card .card-foot { margin-top: auto; padding-top: 14px; }
.band-ink .card p, .band-grille .card p { color: #C9BEAE; }

.piece-big h3 { font-size: clamp(30px, 3.6vw, 52px); }
.piece-big p { font-size: 19px; color: #4A3D30; }

/* ---------- supporters strip (homepage only, above footer) ---------- */
.supporters { background: var(--deep); color: var(--paper); padding: 40px 0 44px; }
.supporters h2 { font-size: 22px; letter-spacing: -.01em; }
.sponsor-mosaic { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.sponsor {
  flex: 0 0 auto; width: min(268px, 100%); height: 92px; background: #191410; border: 1px solid #3E332A;
  display: flex; align-items: center; justify-content: center; padding: 18px 22px;
}
.sponsor:hover { border-color: var(--accent); text-decoration: none; }
.sponsor--wide { flex: 0 0 auto; width: min(372px, 100%); height: 92px; }
.sponsor img { width: auto; max-width: 224px; max-height: 48px; height: auto; object-fit: contain; }

/* ---------- footer: its own furniture, not a second masthead ---------- */
.foot { background: var(--ink); color: var(--paper); border-top: 6px solid var(--accent); padding: 44px 0 34px; }
.foot a { color: var(--paper); }
.foot a:hover { color: var(--accent); text-decoration: none; }
.foot-top { display: grid; gap: 36px; }
.foot-mark { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-items: center; }
.foot .foot-fork { grid-row: 1; grid-column: 1; width: clamp(18px, 1.6vw, 24px); color: var(--accent); stroke-width: 6; }
.foot-mark > p, .foot-mark > .foot-sub { grid-column: 1 / -1; }
.foot .wordmark { grid-row: 1; grid-column: 2; font-size: clamp(32px, 3.4vw, 46px); line-height: .9; color: var(--accent); }
.foot .wordmark:hover { color: var(--paper); }
.foot-line { margin: 0; grid-column: 2; font-size: 15.5px; line-height: 1.45; color: #C9BEAE; max-width: 46ch; }
.foot-sections { display: grid; gap: 2px 32px; }
.foot-sections a { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px;
  align-items: baseline; padding: 9px 0; border-top: 1px solid #3E332A; }
.foot-sections a .icon { width: 18px; height: 18px; color: var(--accent); transform: translateY(3px); }
.foot-sections strong { display: block; font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 600; font-size: 16.5px; letter-spacing: -.01em; }
.foot-sections em { display: block; font-style: normal; font-size: 13.5px; color: #A2937F; margin-top: 2px; }
.foot-base { display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: baseline;
  justify-content: space-between; margin-top: 34px; padding-top: 18px; border-top: 1px solid #3E332A; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 28px; font-family: "Spline Sans Mono", monospace;
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; }
.foot-credit { margin: 0; font-size: 13.5px; color: #A2937F; }
@media (min-width: 700px) { .foot-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .foot { padding: 56px 0 40px; }
  .foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; }
}

/* ---------- cards: one treatment — numeral, accent-ruled crop ---------- */
.card-no { display: block; font-family: "Spline Sans Mono", monospace; font-size: 12.5px;
  letter-spacing: .18em; color: var(--accent-ink); }
.band-ink .card-no, .band-grille .card-no { color: var(--accent-lift); }
.card .card-fig img { border-top: 3px solid var(--accent); }
.card-grid.three .card-fig img { aspect-ratio: 4 / 5; }
.card-grid.two .card-fig img { aspect-ratio: 16 / 11; }
.card h3 { font-size: clamp(24px, 2.3vw, 32px); line-height: 1.03; margin: 6px 0 0; }
.card-grid.two .card h3 { font-size: clamp(26px, 2.6vw, 38px); }

/* ---------- article ---------- */
.article-head { background: var(--second); color: var(--parchment); }
.article-head-in { max-width: var(--breakout); margin-inline: auto; padding: 52px var(--gutter) 56px; }
.article-head .standfirst, .article-head h1, .article-head .kicker { margin-inline: 0; }
.article-head h1 { font-size: clamp(38px, 5.6vw, 92px); line-height: .9; margin: 16px 0 0; max-width: 26ch; }
.article-head .kicker { color: var(--accent-lift); }
.standfirst { font-size: clamp(19px, 1.5vw, 25px); line-height: 1.42; margin: 20px 0 0; max-width: 46ch; }

.article-body { max-width: var(--breakout); margin-inline: auto; padding: 0 var(--gutter); }
.prose > p { font-size: 20px; line-height: 1.66; margin: 0 auto var(--pgap); max-width: var(--prose); }
.prose > h2 { font-size: clamp(26px, 2.4vw, 38px); line-height: 1.05; margin: 2em auto .7em;
  max-width: var(--prose); clear: both; }
.prose > .measure { max-width: var(--prose); margin-inline: auto; }
.prose > .unit { clear: both; }
.prose::after { content: ""; display: block; clear: both; }

/* offset figure / margin note: cargo for the outer column, prose wraps beside it */
.offset { float: right; width: min(40%, 420px); margin: 6px 0 36px 44px; clear: right; }
.offset-left { float: left; margin: 6px 44px 36px 0; clear: left; }

.breakout { width: 100%; max-width: var(--breakout); margin-inline: auto; }
.fig-break { width: 100%; margin: 40px 0; clear: both; }

/* figure treatments — one drawing system, three moments */
figure { margin: 0; }
figcaption { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; }
figcaption .cap { font-size: 17px; line-height: 1.45; max-width: 62ch; flex: 1 1 340px; }
figcaption .credit { font-size: 13px; line-height: 1.5; color: var(--muted); flex: 0 1 auto; }
.band-ink figcaption .credit, .band-grille figcaption .credit, .fig-bleed figcaption .credit { color: #A2937F; }

/* (a) full-bleed lead: caption on a walnut plate under the image */
.fig-bleed { width: 100%; }
.fig-bleed img { width: 100%; max-height: 78vh; object-fit: cover; }
.fig-bleed figcaption { background: var(--deep); color: var(--paper); margin: 0;
  padding: 18px var(--gutter); }
.fig-bleed figcaption .cap { color: var(--paper); }
.fig-bleed .capwrap { max-width: var(--breakout); margin-inline: auto; width: 100%;
  display: flex; flex-wrap: wrap; gap: 6px 26px; align-items: baseline; }

/* (b) matted plate, breakout width, caption offset right */
.fig-mat { background: var(--paper-deep); padding: 18px; }
.fig-mat img { border: 1px solid var(--mat); }
.fig-mat figcaption { margin-top: 16px; }

/* (c) margin inset: small figure in the outer column, rule above the caption */
.fig-inset img { border-top: 3px solid var(--accent); }
.fig-inset figcaption { display: block; }
.fig-inset figcaption .cap { font-size: 15.5px; max-width: none; }
.fig-inset figcaption .credit { display: block; margin-top: 6px; font-size: 12.5px; }

/* ---------- inserted units ---------- */
.unit { margin: 44px 0; max-width: var(--prose); margin-inline: auto; }
.unit-wide { max-width: 100%; }
.unit-end { margin: 52px auto 0; clear: both; }

.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.timeline li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px;
  padding: 14px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 620px) { .timeline li { grid-template-columns: minmax(120px, 220px) minmax(0, 1fr); gap: 8px 28px; } }
.t-when { font-size: 14px; letter-spacing: .04em; color: var(--accent-ink); }
.t-what { font-size: 17.5px; line-height: 1.5; }

.statrow { display: flex; flex-wrap: wrap; gap: 14px; }
.statblock { flex: 1 1 220px; background: var(--ink); color: var(--paper); padding: 20px 22px; }
.stat-num { display: block; font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800;
  font-size: 40px; line-height: .9; letter-spacing: -.03em; color: var(--accent-lift); }
.stat-label { display: block; margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: #C9BEAE; }

.callout { background: var(--paper-deep); border-left: 4px solid var(--second); padding: 24px 26px; }
.callout h3 { font-size: 21px; margin-bottom: 10px; }
.callout ul { margin: 0; padding-left: 1.15em; }
.callout li { margin: 6px 0; font-size: 17.5px; line-height: 1.5; }
.callout p { margin: 0; font-size: 17.5px; }

.pullquote { margin: 0; }
.pullquote p { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 600;
  font-size: 27px; line-height: 1.14; letter-spacing: -.02em; margin: 0; }
.pullquote::before { content: ""; display: block; width: 56px; height: 3px; background: var(--accent); margin-bottom: 16px; }

.blockquote { margin: 0; padding-left: 22px; border-left: 3px solid var(--accent); }
.blockquote p { font-size: 21px; line-height: 1.45; margin: 0; }
.blockquote cite { display: block; margin-top: 10px; font-size: 14px; font-style: normal; color: var(--muted); }

.note { font-size: 16.5px; line-height: 1.55; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 12px; }

.margin-note { border-top: 3px solid var(--accent); padding-top: 14px; }
.margin-note h3 { font-family: "Spline Sans Mono", monospace; font-weight: 500; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent-ink); }
.margin-note p, .margin-note li { font-size: 16px; line-height: 1.5; }
.margin-note ul { margin: 10px 0 0; padding-left: 1.1em; }

.tablewrap { overflow-x: auto; }
.versus, .datatable { border-collapse: collapse; width: 100%; font-size: 17px; }
.versus th, .versus td, .datatable th, .datatable td { text-align: left; padding: 12px 16px;
  border-bottom: 1px solid var(--rule); vertical-align: top; }
.versus thead th, .datatable thead th { font-family: "Spline Sans Mono", monospace; font-size: 12.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.gallery { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.related { border-top: 1px solid var(--rule); padding-top: 22px; }
.related-links { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.related-links a { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 600;
  font-size: 21px; line-height: 1.1; letter-spacing: -.02em; }
.further-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.further-grid a { border: 1px solid var(--rule); padding: 18px; font-size: 17px; }

.org-grid, .profile-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.org-card { display: flex; align-items: center; gap: 14px; border: 1px solid var(--rule); padding: 14px 16px; }
.org-logo { width: 46px; height: 46px; object-fit: contain; }
.org-name { font-weight: 600; }
.org-host { font-family: "Spline Sans Mono", monospace; font-size: 12.5px; color: var(--muted); }
.profile-card { border: 1px solid var(--rule); padding: 18px; }
.profile-card .p-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; margin-bottom: 14px; }
.profile-card h3 { font-size: 22px; }
.p-role { font-family: "Spline Sans Mono", monospace; font-size: 12.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-ink); margin: 8px 0 10px; }
.entity-ref { border-bottom: 1px solid var(--accent); }

/* ---------- category / archive ---------- */
.sect-head { background: var(--paper-deep); }
.sect-head-in { max-width: var(--breakout); margin-inline: auto; padding: 48px var(--gutter) 52px; }
.sect-head h1 { font-size: clamp(38px, 5.2vw, 78px); line-height: .94; margin: 14px 0 0; }
.sect-head p { font-size: 20px; line-height: 1.5; max-width: 56ch; margin: 18px 0 0; }
.sect-count { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 20px; display: block; }

.cat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 44px;
  grid-template-columns: minmax(0, 1fr); }
.cat-list > li { display: flex; }
.entry { display: grid; gap: 0 32px; grid-template-columns: minmax(0, 1fr); width: 100%; }
.entry img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.entry-body { padding-top: 16px; }
.entry h2 { font-size: 30px; line-height: 1.04; }
.entry p { font-size: 17.5px; line-height: 1.5; color: #4A3D30; margin: 10px 0 0; }
.entry-lead .entry { grid-template-columns: minmax(0, 1fr); }
.entry-lead h2 { font-size: clamp(32px, 4.2vw, 58px); }
.entry-lead p { font-size: 19.5px; }

.hub-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
.hub-card { border: 1px solid var(--ink); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.hub-card h2 { font-size: 30px; }
.hub-card .icon { width: 26px; height: 26px; color: var(--accent-ink); }
.hub-card ul { margin: 6px 0 0; padding-left: 1.1em; }
.hub-card li { font-size: 16.5px; line-height: 1.45; margin: 5px 0; }

.expander { border-top: 1px solid var(--rule); margin-top: 14px; }
.expander summary { cursor: pointer; font-family: "Spline Sans Mono", monospace; font-size: 12.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); padding: 12px 0; }

/* ---------- responsive ---------- */
@media (min-width: 700px) {
  .card-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entry { grid-template-columns: 300px minmax(0, 1fr); }
  .entry-body { padding-top: 0; }
  .entry-lead .entry { grid-template-columns: minmax(0, 1fr); }
  .cat-list { gap: 40px; }
}

@media (min-width: 1024px) {
  :root { --gutter: 40px; }
  .lead-grid { grid-template-columns: minmax(0, 1fr) 44%; }
  .lead-copy { padding: 64px 48px 64px var(--gutter); max-width: none; margin: 0; }
  .lead-figure { min-height: 560px; }
  .card-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid.uneven { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); align-items: start; }
  .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-list.split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-list.split .entry-lead { grid-column: 1 / -1; }
  .cat-list.split .entry { grid-template-columns: minmax(0, 1fr); }
  .cat-list.split .entry-body { padding-top: 16px; }
  .cat-list.split .entry-lead .entry { grid-template-columns: 52% minmax(0, 1fr); }
  .cat-list.split .entry-lead .entry-body { padding-top: 0; }
  .related-links { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

@media (max-width: 1023px) {
  .offset, .offset-left { float: none; width: 100%; margin: 32px 0; }
}

@media (min-width: 1600px) {
  :root { --prose: 74ch; --breakout: 1240px; --body: 20px; --gutter: 56px; }
  .prose > p { font-size: 21px; line-height: 1.64; }
  .card-grid.three { gap: 44px; }
}

@media (min-width: 2100px) {
  :root { --prose: 78ch; --breakout: 1440px; --body: 21px; }
  .prose > p { font-size: 22px; }
  .article-body { max-width: 1560px; }
  .offset { width: min(34%, 480px); }
  .fig-inset figcaption .cap { font-size: 17px; }
  .card-grid.three { gap: 52px; }
}

@media print {
  .nav, .supporters { display: none; }
  body { background: #fff; }
}

/* ---------- components used by the styleguide and inline in articles ---------- */
.measure { max-width: var(--prose); margin-inline: auto; }
.lead { font-size: clamp(19px, 1.5vw, 24px); line-height: 1.45; }
.article-figure img { border-top: 3px solid var(--accent); }
.chart { background: var(--paper-deep); padding: 22px; }
.chart svg { display: block; max-width: 100%; }
.chart.donut svg { margin-inline: auto; }
.org-card.no-logo { padding-block: 18px; }
.sponsor span, .sponsor-mosaic .sponsor { text-decoration: none; }
code { font-family: "Spline Sans Mono", monospace; font-size: .92em; background: var(--paper-deep); padding: 1px 5px; }
.related { margin-top: 52px; }

/* section headers inside bands read as headers, not labels (cc-9) */
.band .wrap > .section-rule { align-items: center; gap: 20px; margin-bottom: 30px; }
.band .wrap > .section-rule .kicker {
  font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800;
  font-size: clamp(26px, 2.8vw, 36px); line-height: 1; letter-spacing: -.025em;
  text-transform: none; color: var(--ink); gap: 13px;
}
.band .wrap > .section-rule .kicker .icon { width: 1.05em; height: 1.05em; color: var(--accent-ink); }
.band .wrap > .section-rule .line { height: 2px; background: var(--ink); opacity: .2; }
.band .wrap > .section-rule > a { flex: none; }
.band-ink .wrap > .section-rule .kicker,
.band-grille .wrap > .section-rule .kicker { color: var(--paper); }
.band-ink .wrap > .section-rule .kicker .icon,
.band-grille .wrap > .section-rule .kicker .icon { color: var(--accent-lift); }
.band-ink .wrap > .section-rule .line,
.band-grille .wrap > .section-rule .line { background: var(--accent); opacity: .35; }

/* lead-band kicker was unreadable on the oxblood field (cc-4) */
.lead-band .kicker { color: var(--accent-lift); }

/* coloured nav (cc-3) */
.nav a { color: var(--accent); }
.nav a .icon { color: var(--accent-lift); }
.nav a:hover { color: var(--parchment); }
.nav a:hover .icon { color: var(--parchment); }
.nav a[aria-current="page"] { color: var(--parchment); box-shadow: inset 0 -3px 0 var(--accent); }
.nav a[aria-current="page"] .icon { color: var(--parchment); }

/* lead spec row (cc-5) */
.spec-row { display: flex; flex-wrap: wrap; gap: 0; margin: 40px 0 0;
  border-top: 1px solid rgba(251,237,230,.35); }
.spec-row > div { flex: 1 1 150px; padding: 16px 20px 0 0; }
.spec-row dt { font-family: "Spline Sans Mono", monospace; font-size: 12.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-lift); }
.spec-row dd { margin: 8px 0 0; font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800; font-size: 34px; line-height: .9; letter-spacing: -.03em; }

/* The Trade band — a full-bleed spread: overlay lead, then two small units */
.trade-spread { padding-bottom: 0; }
.spread-lead { position: relative; display: block; margin-top: 6px; }
.spread-lead:hover { text-decoration: none; }
.spread-lead img { width: 100%; aspect-ratio: 16 / 10; min-height: 240px; max-height: 620px; object-fit: cover; }
/* narrow: the copy sits under the photograph, in flow, on its own ground */
.spread-copy { position: static; background: var(--ink); padding: 26px 0 4px; }
.spread-copy-in { max-width: var(--breakout); margin-inline: auto; padding-inline: var(--gutter); }
.spread-copy h3 { font-size: clamp(27px, 4.2vw, 58px); line-height: 1; color: var(--paper); max-width: 30ch; }
.spread-copy p { font-size: 17.5px; line-height: 1.5; color: #D6CBBA; margin: 14px 0 0; max-width: 52ch; }
.spread-copy .cue { color: var(--accent-lift); }
.spread-row { display: grid; gap: 34px; padding-top: 38px; padding-bottom: 68px; }
.mini { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 22px; align-items: center; }
.mini:hover { text-decoration: none; }
.mini:hover h4 { color: var(--accent); }
.mini img { width: 104px; height: 104px; object-fit: cover; }
.mini h4 { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800;
  font-size: clamp(21px, 2.1vw, 30px); line-height: 1.04; letter-spacing: -.02em; color: var(--paper); margin: 0; }
.mini-stat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 24px;
  border-left: 3px solid var(--accent); padding-left: 24px; }
.mini-stat .n { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800;
  font-size: clamp(44px, 4.6vw, 64px); line-height: .84; letter-spacing: -.04em; color: var(--accent); }
.mini-stat p { font-size: 16.5px; line-height: 1.5; color: #C9BEAE; margin: 0; }
.mini-stat > a { grid-column: 2; margin-top: 12px; color: var(--accent-lift);
  font-family: "Spline Sans Mono", monospace; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; }
@media (min-width: 700px) {
  /* wide enough for the overlay to sit inside the crop */
  .spread-copy { position: absolute; inset: auto 0 0 0; padding: 32px 0 30px; background:
    linear-gradient(to top, rgba(35,28,22,.96) 12%, rgba(35,28,22,.72) 58%, rgba(35,28,22,0)); }
  .spread-lead img { min-height: 420px; }
}
@media (min-width: 1024px) {
  .spread-lead img { aspect-ratio: 21 / 9; min-height: 460px; }
  .spread-copy { padding: 44px 0 40px; }
  .spread-row { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 48px; }
}

/* ---------- article insertions, strict A2 spacing (2x the paragraph gap) ---------- */
.fig-break { margin: 56px 0; }
.unit { margin: 56px auto; }
.unit-end { margin: 64px auto 0; }
.related { margin-top: 64px; }
@media (max-width: 1023px) {
  .fig-break { margin: 48px 0; }
  .unit { margin: 48px auto; }
  .unit-end { margin: 56px auto 0; }
  .related { margin-top: 56px; }
}
.unit-list { margin: 0; padding-left: 1.15em; }
.unit-list li { font-size: 18px; line-height: 1.5; margin: 8px 0; }

/* end-of-article unit: one block, all remaining record material inside it */
.unit-end { background: var(--paper-deep); border-top: 3px solid var(--second); padding: 30px 28px; }
.unit-end .end-kicker { display: block; margin-bottom: 20px; }
.unit-end .end-part + .end-part { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rule); }
.unit-end h3 { font-size: 22px; margin-bottom: 12px; }
.unit-end .timeline { border-top-color: #CFC4B2; }
.unit-end .timeline li { border-bottom-color: #CFC4B2; }

/* title plate carries the piece's third figure */
.article-head-in { display: grid; gap: 30px; }
.head-fig img { border-top: 3px solid var(--accent); }
.head-fig .cap { color: var(--parchment); font-size: 16px; }
.head-fig .credit { color: #E0C9BF; }
@media (min-width: 1024px) {
  .article-head-in { grid-template-columns: minmax(0, 1fr) minmax(0, 34%); align-items: end; gap: 44px; }
}
@media (min-width: 1600px) {
  .article-head-in { grid-template-columns: minmax(0, 1fr) minmax(0, 30%); }
}

/* end-unit statblocks: stop long values breaking to three lines at the prose measure */
.unit-end .statblock { flex: 1 1 260px; }
.unit-end .stat-num { font-size: 30px; line-height: 1.02; }

/* card crops must not tower when the grid is one or two columns */
.card-grid.three .card-fig img, .card-grid.two .card-fig img { max-height: 430px; }
@media (min-width: 700px) {
  .card-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid.three .card-fig img, .card-grid.two .card-fig img { max-height: 480px; }
}
@media (min-width: 1024px) {
  .card-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid.three .card-fig img { max-height: none; }
  .card-grid.two .card-fig img { max-height: 520px; }
}

/* links on the dark grounds — the base accent is a paper-ground value (2.46:1 on ink) */
.band-ink a, .band-grille a, .trade-spread a, .supporters a, .fig-bleed a { color: var(--accent-lift); }
.band-ink .card h3 a, .band-grille .card h3 a { color: var(--paper); }
.band-ink .card h3 a:hover, .band-grille .card h3 a:hover { color: var(--accent); text-decoration: none; }
.trade-spread .spread-lead, .trade-spread .mini { color: var(--paper); }
.fork { width: clamp(34px, 3vw, 42px); }

/* flagship plate — photograph and copy share the band, facts set as display type */
.flagship { padding: 52px 0 56px; }
.flagship-in { display: grid; gap: 28px; align-items: center; }
.flagship-fig { margin: 0; }
.flagship-fig img { width: 100%; aspect-ratio: 4 / 3; max-height: 460px; object-fit: cover; border-top: 3px solid var(--accent); }
.flagship-fig figcaption { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; padding-top: 10px; }
.flagship-fig .cap { font-size: 15.5px; line-height: 1.45; color: #D6CBBA; max-width: 46ch; }
.flagship-fig .credit { font-family: "Spline Sans Mono", monospace; font-size: 12px; color: #A2937F; }
.flagship-copy h2 { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.02; margin: 12px 0 0; max-width: 26ch; }
.flagship-copy h2 a { color: var(--paper); }
.flagship-copy h2 a:hover { color: var(--accent); text-decoration: none; }
.flagship-copy p { font-size: 18px; line-height: 1.5; color: #D6CBBA; margin: 14px 0 0; max-width: 52ch; }
.fact-row { display: flex; flex-wrap: wrap; gap: 0; margin: 26px 0 0; border-top: 1px solid #4A3D30; }
.fact-row > div { flex: 1 1 130px; padding: 14px 18px 0 0; }
.fact-row dt { font-family: "Spline Sans Mono", monospace; font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-lift); }
.fact-row dd { margin: 6px 0 0; font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800;
  font-size: clamp(28px, 2.8vw, 38px); line-height: .92; letter-spacing: -.03em; color: var(--paper); }
.flagship .cue { display: inline-block; margin-top: 20px; }
@media (min-width: 1024px) {
  .flagship { padding: 68px 0 72px; }
  .flagship-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 52px; }
  .flagship-fig img { aspect-ratio: 5 / 4; max-height: none; }
}

/* mobile: full-bleed captions keep the page gutter, insertions keep A2 room */
@media (max-width: 900px) {
  .fig-bleed figcaption { padding-inline: 24px; }
  .prose > .unit, .prose > .article-figure, .prose > .pullquote, .prose > .callout,
  .prose > .statrow, .fig-bleed, .fig-breakout { margin-top: 32px; margin-bottom: 32px; }
}
.unit-end { margin-bottom: 44px; }
@media (max-width: 900px) { .unit-end { margin-bottom: 32px; } }

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
.sponsor-mosaic{flex-wrap:wrap!important}
.sponsor-mosaic > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

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

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

/* sp-blurb-size: the design never sized .sponsor-blurb, so it inherited body copy.
   Relative, so it still follows the design's scale. */
.sponsor .sponsor-blurb{font-size:.8em;line-height:1.45}
.sponsor .sp-brand{font-weight:700}

/* sp-blurb-contrast: the design never coloured .sponsor-blurb because its bar was
   marks-only; our copy would inherit the page's dark ink onto a dark tile. */
.sponsor .sponsor-blurb{color:rgba(255,255,255,.82)}
.sponsor .sponsor-name{color:rgba(255,255,255,.95)}

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
.sponsor.sponsor{justify-content:center!important}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}
/* the mobile un-clamp is retired: the operator asked for "2-3 rows max" on phones, which is
   what the desktop rule above already does — so mobile simply keeps it. */
@media (max-width:640px){.sponsor.sponsor .sponsor-blurb{-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}}

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

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


/* op-money-columns: the supporters block ran one tile per row — 8 tiles,
   706px at 390, 8% of the whole page. Two columns bring it to
   346px (51% shorter). Checked before writing: no new overflow, smallest mark still
   117px wide, longest blurb 0 lines, tile heights 76-76px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   Only the tier(s) that were one-per-row are touched (.sponsor-mosaic), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .sponsor-mosaic{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .sponsor-mosaic > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-mosaic > * *{min-width:0!important;max-width:100%}
    .sponsor-mosaic img,.sponsor-mosaic svg{max-width:100%;height:auto}
}

/* op-page-overflow: the page scrolled sideways at 320 — a.mono reached
   322px in a 320px screen (+28px), inside
   div.section-rule. Remedy: let the row wrap. 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.section-rule{flex-wrap:wrap!important}
  a.mono{min-width:0!important;max-width:100%!important}
}

/* op-edge-gutter: copy sat against the screen edge at phone width — a.skip — with no gutter at all
   (9 runs of text measured within 2px of the glass; 9 remain, in full-bleed
   elements that are set to the edge deliberately).
   ⚠️ THE 24px IS NOT MINE: it is the gutter this build already uses on its own full-width
   containers at the same width, taken as the median of them. Only the columns that TOUCH are
   padded — operator, on kaanet: "Only items needed padding are the ones touching edges of
   browsers ... Not globally." Phone widths only. */
@media (max-width:390px){
  a.skip{padding-left:24px!important;padding-right:24px!important;box-sizing:border-box!important}
}

/* op-grow-same-size: this tier grows by STRETCHING (flex rows, flex-grow) — one added tile would wrap onto a new row alone and stretch across the grid. Same minimum (220px), same columns at every width, but a short row keeps its siblings' size. Today's look unchanged (measured 1440/1024/390). Phones keep their own rules. */
@media (min-width:641px){
  div.sponsor-mosaic{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important}
}
/* op-grow-same-size:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.card > figure.card-fig > img,
  div.article-head-in > figure.fig-inset.head-fig > img,
  div.entry > a > img,
  div.flagship-in.wrap > figure.flagship-fig > img,
  div.lead-grid > figure.lead-figure > img,
  div.prose > figure.fig-break.fig-mat > img,
  div.spread-row.wrap > a.mini > img,
  main > figure.fig-bleed > img,
  section.band.band-ink.trade-spread > a.spread-lead > img){height:auto}
/* op-img-dims:end */

/* op-odd-tier-lead: money_slots changed a tier's size — .sponsor-mosaic (9 tiles) now show an ODD count on phones, so the lead tile takes the whole row (operator: "the 1st item in such rows to be 100% width, then split"). Parity-guarded: it steps aside again when the count is even. */
@media (max-width:640px){
  .sponsor-mosaic:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}