/* thetruthisntpretty.com — The Ugly Truth
   PALETTE (5 members, each with a job)
   --ground  #16110F  warm black ......... page ground
   --panel   #1E1816  raised ground ...... mats, cards, logo boxes
   --ink     #EDE6DC  bone ............... body text, headlines
   --accent  #D9291C  cinema red ........ SATURATED · kickers, rules, numerals
   --second  #14756B  broadcast teal .... SATURATED · full bands, panels, data
   --quiet   #8C8377  warm grey ......... credits, meta, secondary text
   accent and second are 168 degrees apart in hue and both carry real AREA. */

:root {
  --ground: #16110F;
  --panel: #1E1816;
  --panel-2: #241D1A;
  --ink: #EDE6DC;
  --accent: #D9291C;
  --second: #14756B;
  --second-ink: #F2EFE6;
  --quiet: #8C8377;
  --line: #2E2724;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text: "Petrona", Georgia, serif;

  --fs-body: 18px;
  --fs-lead: clamp(19px, 4.6vw, 23px);
  --fs-h1: clamp(31px, 8.4vw, 46px);
  --fs-h2: clamp(23px, 5.4vw, 27px);
  --fs-cap: 15px;
  --fs-meta: 12px;

  --prose-w: 70ch;
  --wide-w: 1120px;
  --max: 1180px;
  --shell: 1800px;
  --gutter: 20px;
  --band: 56px;
}

/* --- large displays get their own rules: three steps ABOVE the desktop cap --- */
@media (min-width: 1200px) {
  :root { --fs-body: 19px; --fs-lead: 26px; --fs-h1: 62px; --fs-h2: 31px; --fs-cap: 16px; --fs-meta: 13px;
          --prose-w: 72ch; --wide-w: 1280px; --max: 1360px; --gutter: 40px; --band: 76px; }
}
@media (min-width: 1600px) {
  :root { --fs-body: 20px; --fs-lead: 29px; --fs-h1: 78px; --fs-h2: 35px; --fs-cap: 17px; --fs-meta: 13px;
          --prose-w: 76ch; --wide-w: 1400px; --max: 1520px; --gutter: 56px; --band: 96px; }
}
@media (min-width: 2100px) {
  :root { --fs-body: 22px; --fs-lead: 33px; --fs-h1: 96px; --fs-h2: 40px; --fs-cap: 18px; --fs-meta: 14px;
          --prose-w: 78ch; --wide-w: 1520px; --max: 1660px; --gutter: 72px; --band: 120px; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #16110F; }
body {
  margin: 0 auto; max-width: var(--shell); background: var(--ground); color: var(--ink);
  font-family: var(--text); font-size: var(--fs-body); line-height: 1.62;
  text-wrap: pretty; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
body, .article, .plate, .callout { overflow-wrap: break-word; }
table { max-width: 100%; }
.entity-ref { overflow-wrap: anywhere; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
::selection { background: var(--accent); color: var(--ink); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -0.028em; line-height: 1.02; margin: 0; }
p { margin: 0 0 1.05em; }
em, i { font-style: italic; }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--band) 0; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.kicker {
  font-family: var(--display); font-weight: 700; font-size: var(--fs-meta);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
  display: flex; align-items: center; gap: 10px;
}
.kicker .sec-ico { flex: none; }
.meta { font-family: var(--display); font-size: var(--fs-meta); letter-spacing: 0.16em; text-transform: uppercase; color: var(--quiet); }
.sec-ico { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sec-ico-lg { width: 40px; height: 40px; stroke-width: 1.2; }

/* ---------- masthead ---------- */
.masthead { border-bottom: 1px solid var(--line); padding: 18px 0 0; }
.mast-row { display: flex; align-items: center; justify-content: space-between; gap: var(--gutter); flex-wrap: wrap; }
.mast-id { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.mast-mark { width: 40px; height: auto; flex: none; stroke: var(--accent); fill: none; stroke-width: 2.4; stroke-linejoin: round; }
.mast-name { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.035em; line-height: 0.86; font-size: 30px; color: var(--ink); }
.mast-name span { display: inline; }
.mast-name span + span::before { content: " "; }
.mast-sig { font-family: var(--display); font-weight: 700; font-size: var(--fs-meta); letter-spacing: 0.22em; text-transform: uppercase; color: var(--quiet); }
.mast-sig b { color: var(--accent); font-weight: 700; }
.nav { display: flex; gap: 4px 26px; flex-wrap: wrap; padding: 14px 0; margin-top: 14px; border-top: 1px solid var(--line); }

.nav a { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); padding: 4px 0; }
.nav a:hover { color: var(--accent); }
.nav .sec-ico { stroke-width: 2.1; width: 20px; height: 20px; }
/* one hue per section, warm through to cool, matched in chroma */
.nav a:nth-child(1) { --sec: #D9291C; }
.nav a:nth-child(2) { --sec: #E0782B; }
.nav a:nth-child(3) { --sec: #C9A227; }
.nav a:nth-child(4) { --sec: #6E9E3C; }
.nav a:nth-child(5) { --sec: #14756B; }
.nav a:nth-child(6) { --sec: #8071C8; }
.nav a .sec-ico { color: var(--sec, var(--accent)); }
.nav a:hover, .nav a[aria-current] { color: var(--sec, var(--accent)); }
.nav a[aria-current] { color: var(--accent); }
.nav .nav-end { margin-left: auto; color: var(--quiet); }
@media (min-width: 1200px) {
  .mast-name { font-size: 46px; }
  .mast-mark { width: 48px; }
  .nav a { font-size: 15px; }
}
@media (min-width: 1600px) { .mast-name { font-size: 58px; } .nav a { font-size: 16px; } }

/* ---------- homepage hero ---------- */
.hero { position: relative; }
.hero-img { position: relative; height: clamp(300px, 52vw, 860px); overflow: hidden; }

.hero-img img { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(22,17,15,.95) 4%, rgba(22,17,15,.35) 42%, rgba(22,17,15,.1) 78%); }
.hero-plate { position: static; padding: 22px 0 0; }
@media (min-width: 760px) {
  .hero-plate { position: absolute; left: 0; right: 0; bottom: clamp(22px, 2.4vw, 60px); padding: 0; }
}
.hero-title { font-family: var(--display); font-weight: 800; font-stretch: 100%; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.86; font-size: clamp(46px, 7.4vw, 150px); }
.hero-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gutter); flex-wrap: wrap; margin-top: 18px; }
.hero-logline { max-width: 44ch; font-size: calc(var(--fs-body) * 1.06); margin: 0; }
.hero-facts { display: flex; gap: 10px 28px; flex-wrap: wrap; }
.hero-facts div { font-family: var(--display); font-size: var(--fs-meta); letter-spacing: 0.16em; text-transform: uppercase; color: var(--quiet); }
.hero-facts b { display: block; font-size: calc(var(--fs-body) * .95); letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 600; margin-top: 6px; }

.credits { border-bottom: 1px solid var(--line); background: var(--panel); }
.credits-row { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.credits-row > div { padding: 20px 22px; border-left: 1px solid var(--line); }
.credits-row > div:first-child { border-left: 0; padding-left: 0; }
.credits-row dt { font-family: var(--display); font-weight: 700; font-size: var(--fs-meta); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 0; }
.credits-row dd { margin: 8px 0 0; font-family: var(--display); font-weight: 600; font-size: calc(var(--fs-body) * 1.02); line-height: 1.22; letter-spacing: -.01em; }

/* ---------- bands ---------- */
.band { padding: var(--band) 0; }
.band-teal { background: var(--second); color: var(--second-ink); }
.band-teal a { color: var(--second-ink); }
.band-teal .meta, .band-teal .cap-credit { color: rgba(242,239,230,.78); }
.band-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 28px; }
.band-teal .band-head { border-color: rgba(242,239,230,.3); }
.band-head h2 { font-size: var(--fs-h2); flex: 1 1 auto; }
.band-no { font-family: var(--display); font-weight: 800; font-size: var(--fs-meta); letter-spacing: .08em; color: var(--accent); }
.band-teal .band-no { color: var(--second-ink); }
.band-head .more { font-family: var(--display); font-weight: 700; font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; }

/* lead feature */
.lead-feature { display: grid; gap: 26px; align-items: start; }
@media (min-width: 900px) { .lead-feature { grid-template-columns: 1.35fr 1fr; gap: 40px; } }
@media (min-width: 1600px) { .lead-feature { grid-template-columns: 1.5fr 1fr; gap: 60px; } }
.lead-feature .lf-img { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.lead-feature .lf-img img { width: 100%; height: 100%; object-fit: cover; }
.lf-title { font-size: clamp(30px, 3.4vw, 74px); line-height: .96; margin: 14px 0 0; }
.lf-dek { font-size: var(--fs-lead); line-height: 1.34; color: var(--ink); margin: 18px 0 0; max-width: 40ch; }
.lf-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font-family: var(--display); font-weight: 700; font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; border-bottom: 1px solid var(--accent); padding-bottom: 6px; }

/* selection band: pieces at different weights */
.selection { display: grid; gap: 30px; }
@media (min-width: 800px) { .selection { grid-template-columns: repeat(2, 1fr); gap: 34px 40px; } }
@media (min-width: 1200px) { .selection { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1600px) { .selection { grid-template-columns: repeat(4, 1fr); gap: 44px 56px; } }
.sel { display: flex; flex-direction: column; height: 100%; position: relative; padding-top: 18px; border-top: 1px solid var(--line); transition: border-color .18s; }
.sel:hover { border-top-color: var(--accent); }
.sel-img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 16px; }
.sel-img img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.sel:hover .sel-img img { transform: scale(1.035); }
.sel-img img { width: 100%; height: 100%; object-fit: cover; }
.sel h3 { font-size: calc(var(--fs-body) * 1.24); line-height: 1.1; letter-spacing: -.025em; }
.sel:hover h3 { color: var(--accent); }
.sel-no { font-family: var(--display); font-weight: 700; font-size: var(--fs-meta); letter-spacing: .14em; color: var(--accent); display: block; margin-bottom: 10px; }
.sel p { color: var(--quiet); font-size: calc(var(--fs-body) * .94); margin: 10px 0 0; }
.sel .meta { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 9px; }
.sel .meta .sec-ico { width: 17px; height: 17px; stroke-width: 2; color: var(--accent); }
.sel--big { grid-column: span 1; }
@media (min-width: 800px) { .sel--big { grid-column: span 2; } .sel--big .sel-img { aspect-ratio: 2 / 1; } .sel--big h3 { font-size: calc(var(--fs-body) * 1.7); min-height: 0; } }
@media (min-width: 1600px) { .sel--big .sel-img { aspect-ratio: 21 / 9; } }

/* four-rooms picture run */
.run { display: grid; gap: 8px; grid-template-columns: 1.6fr 1fr 1.2fr; }
.run-2 { display: grid; gap: 8px; grid-template-columns: 1fr 1.8fr; margin-top: 8px; }
.run-cap { margin-top: 18px; padding-bottom: var(--band); }
.run > div, .run-2 > div { position: relative; height: clamp(150px, 17vw, 330px); overflow: hidden; }
.run img, .run-2 img { width: 100%; height: 100%; object-fit: cover; }

/* sections hub strip */
.hub { display: grid; gap: 0; }
.hub a { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 20px 0; border-top: 1px solid var(--line); }
.hub a:last-child { border-bottom: 1px solid var(--line); }
.hub .h-t { font-family: var(--display); font-weight: 700; font-size: calc(var(--fs-body) * 1.08); letter-spacing: -.015em; }
.hub .h-b { color: var(--quiet); font-size: calc(var(--fs-body) * .92); display: block; margin-top: 4px; }
.hub .h-n { font-family: var(--display); font-weight: 800; color: var(--accent); font-size: var(--fs-meta); }
@media (min-width: 1200px) { .hub { grid-template-columns: 1fr 1fr; column-gap: 60px; } }

/* ---------- supporters ---------- */
.supporters { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sup-groups { display: grid; gap: 34px 48px; grid-template-columns: 1fr; }
@media (min-width: 1100px) { .sup-groups { grid-template-columns: repeat(2, 1fr); } }
.sup-group h3 { font-family: var(--display); font-weight: 700; font-size: var(--fs-meta); letter-spacing: .18em; text-transform: uppercase; color: var(--quiet); margin-bottom: 14px; }
.sup-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.sponsor { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; height: clamp(84px, 7vw, 116px); background: var(--panel); border: 1px solid var(--line); padding: 10px 16px; }
.sponsor:hover { border-color: var(--accent); }
.sponsor img { max-height: 62%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.sponsor-blurb { display: none; }
.sponsor.feat { border-color: var(--quiet); }

/* ---------- article layout: three real widths ---------- */
.article {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, calc((var(--wide-w) - var(--prose-w)) / 2))
    [prose-start] minmax(0, var(--prose-w))
    [prose-end] minmax(0, calc((var(--wide-w) - var(--prose-w)) / 2))
    [wide-end] minmax(var(--gutter), 1fr) [full-end];
}
.article > * { grid-column: prose; }
.article > .breakout { grid-column: wide; }
.article > .bleed { grid-column: full; }
.article > .offset-right { grid-column: prose-start / wide-end; }

h1, h2, h3, .lf-title, .hero-title, .mast-name { overflow-wrap: break-word; }
.art-head { padding-top: calc(var(--band) * .7); grid-column: wide; }
.art-head .lead { max-width: 46ch; }
@media (min-width: 1100px) {
  .art-head { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px 56px; align-items: end; }
  .art-head .kicker { grid-column: 1 / -1; }
  .art-head h1 { max-width: 17ch; }
  .art-head .lead { margin-top: 0; padding-bottom: 6px; max-width: 42ch; }
}
.art-head h1 { font-size: var(--fs-h1); margin: 16px 0 0; }
.art-head .kicker a { color: var(--accent); }
.lead { font-size: var(--fs-lead); line-height: 1.34; color: var(--ink); margin: 22px 0 0; font-weight: 400; }
.article h2 { font-size: var(--fs-h2); margin: calc(var(--band) * .75) 0 18px; }
.article h2::before { content: ""; display: block; width: 46px; height: 2px; background: var(--accent); margin-bottom: 16px; }
.article p a, .cat-intro a { color: var(--ink); border-bottom: 1px solid var(--accent); }
.article p a:hover { color: var(--accent); }
.art-foot { padding-bottom: var(--band); }

/* ---------- figure system: three treatments, one drawing system ---------- */
figure { margin: 0; }
.article-figure img { width: 100%; height: auto; }
.cap { display: flex; gap: 14px 30px; flex-wrap: wrap; align-items: flex-start; margin-top: 13px; }
.cap-text { flex: 1 1 min(58ch, 100%); font-family: var(--display); font-weight: 500; font-size: var(--fs-cap); line-height: 1.42; color: var(--ink); }
.cap-credit { flex: 0 1 auto; font-family: var(--display); font-size: var(--fs-meta); letter-spacing: .12em; text-transform: uppercase; color: var(--quiet); padding-top: 3px; }

/* 1 · bleed: full width, caption in a two-column row under it */
.fig-bleed { margin: 30px 0 0; }
.fig-bleed .f-img { position: relative; height: clamp(260px, 40vw, 700px); overflow: hidden; }
.fig-bleed .f-img img { width: 100%; height: 100%; object-fit: cover; }
.fig-bleed .cap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; padding-top: 13px; border-top: 1px solid var(--line); }

/* 2 · plate: photograph sitting on a mat, caption inside it under a red rule */
.fig-plate { background: var(--panel); padding: 14px; margin: 34px 0; }
.fig-plate .f-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.fig-plate .f-img img { width: 100%; height: 100%; object-fit: cover; }
.fig-plate .cap { border-top: 2px solid var(--accent); padding-top: 12px; margin-top: 14px; }

/* 3 · offset: image breaks right, caption hangs in the margin beside its foot */
.fig-offset { margin: 34px 0; display: grid; gap: 14px 26px; }
.fig-offset .f-img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; outline: 1px solid var(--line); outline-offset: 7px; }
.fig-offset .f-img img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1000px) {
  .fig-offset { grid-template-columns: 1fr minmax(180px, 0.42fr); align-items: end; }
  .fig-offset .cap { margin-top: 0; flex-direction: column; gap: 8px; }
  .fig-offset .cap-text { flex: 1 1 auto; }
}
.f-link:hover .f-img { outline-color: var(--accent); }

/* gallery */
.gallery { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.gallery figure { margin: 0; }
.gallery .f-img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery figcaption { font-family: var(--display); font-size: var(--fs-cap); line-height: 1.4; margin-top: 10px; }

/* ---------- text components ---------- */
.pullquote { margin: 38px 0; padding: 0; border-top: 2px solid var(--accent); border-bottom: 1px solid var(--line); }
.pullquote p { font-family: var(--display); font-weight: 700; font-size: clamp(21px, 1.7vw, 40px); line-height: 1.16; letter-spacing: -.02em; margin: 20px 0 22px; }
.blockquote { margin: 34px 0; padding: 22px 26px; background: var(--panel); border-left: 5px solid var(--second); }
.blockquote p { font-size: calc(var(--fs-body) * 1.08); font-style: italic; margin-bottom: .5em; }
.blockquote cite { font-family: var(--display); font-style: normal; font-size: var(--fs-meta); letter-spacing: .12em; text-transform: uppercase; color: var(--quiet); }
.callout { margin: 34px 0; background: var(--second); color: var(--second-ink); padding: 26px 28px; }
.callout h3 { font-size: calc(var(--fs-body) * 1.16); margin-bottom: 14px; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout ul { margin: 0; padding-left: 1.1em; }
.callout li { margin-bottom: .5em; }
.note { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; color: var(--quiet); font-size: calc(var(--fs-body) * .94); }

/* notes-for-design plates: full-width interruptions, not a side rail */
.plate { margin: 40px 0; background: var(--panel); border-top: 3px solid var(--accent); padding: 26px 24px 28px; }
.plate.plate-teal { background: var(--second); color: var(--second-ink); border-top-color: var(--second-ink); }
.plate > h3 { font-size: calc(var(--fs-body) * 1.24); margin-bottom: 6px; }
.plate > .meta { margin-bottom: 20px; display: block; }
.plate.plate-teal > .meta { color: rgba(242,239,230,.8); }
@media (min-width: 1000px) { .plate { padding: 34px 34px 36px; } }

/* figures band */
.figures { background: #100C0B; border-top: 3px solid var(--second); border-bottom: 1px solid var(--line); }
.figrow { display: grid; gap: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); }

.figrow > div { padding: 26px 20px 24px; border-left: 1px solid var(--line); min-width: 0; }
.figrow > div:first-child { border-left: 0; padding-left: 0; }
.fig-num { display: block; white-space: nowrap; font-family: var(--display); font-weight: 800; font-size: clamp(34px, 3.4vw, 64px); line-height: .84; letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fig-num .u { color: var(--accent); }
.fig-what { display: block; margin-top: 16px; font-family: var(--display); font-weight: 700; font-size: var(--fs-cap); letter-spacing: .02em; color: var(--ink); line-height: 1.25; }
.fig-src { display: block; margin-top: 6px; font-family: var(--display); font-size: var(--fs-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--quiet); }

/* data */
.statrow { display: grid; gap: 20px 34px; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.statblock { border-top: 1px solid var(--line); padding-top: 12px; }
.plate-teal .statblock { border-color: rgba(242,239,230,.35); }
.stat-num { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(30px, 2.6vw, 62px); line-height: .9; letter-spacing: -.04em; }
.stat-label { display: block; margin-top: 10px; font-size: var(--fs-cap); line-height: 1.4; color: var(--quiet); }
.plate-teal .stat-label { color: rgba(242,239,230,.85); }

.datatable, .versus { width: 100%; border-collapse: collapse; font-size: calc(var(--fs-body) * .96); }
.datatable th, .datatable td, .versus th, .versus td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.plate-teal .datatable td, .plate-teal .datatable th { border-color: rgba(242,239,230,.28); }
.datatable th, .versus th { font-family: var(--display); font-weight: 700; font-size: var(--fs-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--quiet); }
.datatable td:first-child { font-family: var(--display); font-weight: 600; width: 38%; }
.versus td { width: 50%; }
.versus tbody tr td:first-child { border-right: 1px solid var(--line); padding-right: 20px; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.plate-teal .timeline li { border-color: rgba(242,239,230,.28); }
.timeline .t-when { font-family: var(--display); font-weight: 700; font-size: var(--fs-cap); letter-spacing: .04em; color: var(--accent); }
.plate-teal .timeline .t-when { color: var(--second-ink); }
@media (min-width: 760px) { .timeline li { grid-template-columns: minmax(150px, 26%) 1fr; } }

/* figure-led list: the number is the thing, so set it like one */
.ledger li { align-items: baseline; padding: 16px 0; }
.ledger .t-when { font-weight: 800; font-size: clamp(24px, 2.2vw, 38px); line-height: 1; letter-spacing: -.04em; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }
.ledger .t-when .u { color: var(--accent); }
.ledger .t-what { font-family: var(--display); font-weight: 600; font-size: calc(var(--fs-body) * .98); line-height: 1.3; color: var(--ink); }
.plate-teal .ledger .t-when .u { color: var(--second-ink); }
@media (min-width: 760px) { .ledger li { grid-template-columns: minmax(190px, 30%) 1fr; column-gap: 34px; } }

.chart { margin: 30px 0; }
.chart svg { width: 100%; height: auto; display: block; }
.chart figcaption { font-family: var(--display); font-size: var(--fs-cap); color: var(--quiet); margin-top: 12px; }
.barchart { display: grid; gap: 14px; margin: 4px 0 0; }
.barchart .b { display: grid; grid-template-columns: minmax(0, 20ch) minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; }
.barchart .b-lab { font-family: var(--display); font-weight: 600; font-size: var(--fs-cap); line-height: 1.2; color: var(--ink); }
.barchart .b-track { height: 22px; background: #241D1A; min-width: 0; }
.barchart .b-fill { height: 100%; background: var(--accent); }
.barchart .b.alt .b-fill { background: var(--second); }
.barchart .b-val { font-family: var(--display); font-weight: 700; font-size: var(--fs-cap); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }

.c-bar { fill: var(--accent); }
.c-bar.alt { fill: var(--second); }
.c-lab { font-family: var(--display); font-size: 13px; fill: var(--ink); }
.c-val { font-family: var(--display); font-weight: 700; font-size: 13px; fill: var(--quiet); }

/* cards */
.profile-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.profile-card { background: var(--panel); padding: 20px; display: flex; flex-direction: column; }
.profile-card .p-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 16px; }
.profile-card.no-photo { border-top: 2px solid var(--second); }
.profile-card h3 { font-size: calc(var(--fs-body) * 1.1); }
.profile-card .p-role { font-family: var(--display); font-size: var(--fs-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 8px 0 12px; }
.profile-card p { font-size: calc(var(--fs-body) * .94); }
.profile-card .p-links { margin-top: auto; padding-top: 10px; }
.profile-card .p-links a, .p-attr { font-family: var(--display); font-size: var(--fs-meta); letter-spacing: .1em; text-transform: uppercase; }
.p-attr { color: var(--quiet); }
.org-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.org-card { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; background: var(--panel); padding: 14px 16px; border: 1px solid var(--line); }
.org-card:hover { border-color: var(--accent); }
.org-logo { grid-row: span 2; width: 46px; height: 46px; object-fit: contain; }
.org-card.no-logo .org-name { grid-column: 1 / -1; }
.org-name { font-family: var(--display); font-weight: 700; font-size: calc(var(--fs-body) * .98); }
.org-host { font-family: var(--display); font-size: var(--fs-meta); letter-spacing: .1em; text-transform: uppercase; color: var(--quiet); }
.entity-ref { border-bottom: 1px solid var(--second); }
.further-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.further-grid a { display: block; background: var(--panel); padding: 18px 20px; border-left: 3px solid var(--accent); font-family: var(--display); font-weight: 600; font-size: calc(var(--fs-body) * 1.02); line-height: 1.22; }
.further-grid a:hover { background: var(--panel-2); }
.related-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.related-links li { border-top: 1px solid var(--line); }
.related-links li:last-child { border-bottom: 1px solid var(--line); }
.related-links a { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: baseline; padding: 16px 0; font-family: var(--display); font-weight: 600; font-size: calc(var(--fs-body) * 1.04); }
.related-links .r-sec { font-size: var(--fs-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

/* category + archive lists */
.cat-hero { position: relative; height: clamp(240px, 30vw, 520px); overflow: hidden; }
.cat-hero img { width: 100%; height: 100%; object-fit: cover; }
.cat-hero .hero-scrim { background: linear-gradient(0deg, rgba(22,17,15,.92) 6%, rgba(22,17,15,.2) 70%); }
.cat-head { position: relative; }
.cat-head h1 { font-size: var(--fs-h1); margin: 16px 0 0; max-width: 26ch; }
.cat-intro { font-size: var(--fs-lead); line-height: 1.34; max-width: 46ch; margin: 22px 0 0; color: var(--ink); }
.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list > li { border-top: 1px solid var(--line); padding: 26px 0; }
.cat-list > li:last-child { border-bottom: 1px solid var(--line); }
.cat-item { display: grid; gap: 18px; align-items: start; }
@media (min-width: 760px) { .cat-item { grid-template-columns: minmax(200px, 26%) 1fr; gap: 30px; } }
@media (min-width: 1600px) { .cat-item { grid-template-columns: minmax(260px, 22%) 1fr 26ch; gap: 46px; } }
.cat-item .ci-img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.cat-item .ci-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-item h3 { font-size: calc(var(--fs-body) * 1.35); line-height: 1.06; }
.cat-item p { margin: 12px 0 0; color: var(--quiet); }
.arch-group { margin-bottom: var(--band); }
.arch-group h2 { font-size: var(--fs-h2); border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 8px; }
.arch-list { list-style: none; margin: 0; padding: 0; }
.arch-list li { border-bottom: 1px solid var(--line); }
.arch-list a { display: grid; gap: 4px 24px; padding: 14px 0; }
@media (min-width: 900px) { .arch-list a { grid-template-columns: minmax(0, 44%) 1fr; align-items: baseline; } }
.arch-list .a-t { font-family: var(--display); font-weight: 600; font-size: calc(var(--fs-body) * 1.02); }
.arch-list .a-b { color: var(--quiet); font-size: calc(var(--fs-body) * .92); }

/* collapsible long list, CSS only */
.expander { margin-top: 14px; }
.expander summary { cursor: pointer; font-family: var(--display); font-weight: 700; font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); list-style: none; }
.expander summary::-webkit-details-marker { display: none; }
.expander summary::after { content: " +"; }
.expander[open] summary::after { content: " –"; }

/* ---------- footer ---------- */
.foot { background: #0E0B0A; margin-top: var(--band); padding: 26px 0; border-top: 1px solid var(--line); }
.foot-row { display: flex; gap: 14px 40px; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.foot-id { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.foot-line { color: var(--quiet); max-width: 46ch; margin: 4px 0 0; font-size: calc(var(--fs-body) * .86); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-nav a { font-family: var(--display); font-size: var(--fs-meta); letter-spacing: .14em; text-transform: uppercase; }

/* utility */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: var(--accent); padding: 10px 14px; z-index: 9; }
.stack-sm > * + * { margin-top: 14px; }


/* ---------- narrow viewports — kept last so nothing later can undo them ---------- */
@media (max-width: 700px) {
  .hero-title { line-height: .92; }
  .hero-plate .kicker { font-size: 11px; letter-spacing: .16em; }
  .lf-title { font-size: 30px; }
  .lf-dek { font-size: 19px; }
  .lf-cta { min-height: 44px; align-items: center; }
  .band-head { gap: 8px 14px; padding-bottom: 12px; margin-bottom: 22px; }
  .band-head h2 { flex-basis: 100%; }
  .band-head .more { min-height: 44px; display: inline-flex; align-items: center; }
  .sel { padding-top: 14px; }
  .sel--big .sel-img { aspect-ratio: 3 / 2; }
  .credits-row > div { padding: 14px 0; }
  .run > div, .run-2 > div { height: 34vw; min-height: 120px; }
  .sponsor { height: 78px; }
  .fig-num { font-size: 34px; }
  .figrow > div { padding: 20px 0; }
  .foot-nav a { min-height: 40px; display: inline-flex; align-items: center; }
}
@media (max-width: 560px) {
  .datatable td:first-child, .versus td:first-child { width: auto; }
  .datatable th, .datatable td, .versus th, .versus td { padding-right: 10px; }
  .plate { padding: 20px 16px 22px; margin-left: 0; margin-right: 0; }
  .callout, .blockquote { padding: 18px 16px; }
  .fig-plate { padding: 10px; }
  .fig-offset .f-img { outline-offset: 4px; }
  .stat-num { font-size: 30px; }
  .art-head h1 { letter-spacing: -0.02em; }
  .hub a { grid-template-columns: auto 1fr; }
  .hub a .sec-ico-lg { display: none; }
  .foot-row { gap: 24px; }
}
@media (max-width: 860px) {
  .masthead .nav {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    gap: 0; padding: 0; margin-top: 12px;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .masthead .nav::-webkit-scrollbar { display: none; }
  .masthead .nav a {
    flex: none; scroll-snap-align: start;
    min-height: 48px; padding: 12px 16px 12px 0; margin-right: 16px;
    border-bottom: 2px solid transparent; font-size: 13px; letter-spacing: .1em;
  }
  .masthead .nav a[aria-current] { border-bottom-color: var(--sec, var(--accent)); }
  .masthead .nav .nav-end { margin-left: 0; }
  .mast-row { align-items: flex-start; }
  .mast-sig { flex-basis: 100%; font-size: 11px; letter-spacing: .16em; }
  .mast-name { font-size: 26px; }
  .mast-mark { width: 34px; }
}
@media (max-width: 759px) { .hero-facts { display: none; } .hero-img { height: 62vw; min-height: 260px; } }
@media (max-width: 700px) { .credits-row > div { border-left: 0; border-top: 1px solid var(--line); padding: 16px 0; } .credits-row > div:first-child { border-top: 0; } }
@media (max-width: 600px) { .run, .run-2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 780px) { .sup-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sup-row { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .article { display: block; padding-inline: var(--gutter); }
  .art-head { display: block; }
  .article > .bleed { margin-inline: calc(-1 * var(--gutter)); }
  .fig-bleed .cap { width: auto; }
}
@media (max-width: 700px) {
  .fig-offset { margin: 26px 0; }
  .fig-offset .f-img { outline-offset: 3px; }
  .fig-bleed { margin-top: 22px; }
  .fig-bleed .f-img { height: 58vw; min-height: 190px; }
  .pullquote { margin: 28px 0; }
  .plate { margin: 30px 0; }
  .cap { display: block; }
  .cap-text, .cap-credit { display: block; }
  .cap-credit { margin-top: 8px; }
  .cap-credit { padding-top: 0; }
  .related-links a { grid-template-columns: 1fr; gap: 5px; padding: 15px 0; min-height: 48px; }
  .further-grid a { min-height: 48px; display: flex; align-items: center; }
  .hub a { min-height: 56px; }
  .arch-list a, .cat-list a { min-height: 44px; }
}
@media (max-width: 560px) {
  .art-head h1 { font-size: 34px; }
  .article h2 { font-size: 24px; }
  .lead { font-size: 20px; }
  .pullquote p { font-size: 21px; }
  .cat-head h1 { font-size: 34px; }
  .cat-intro { font-size: 20px; }
}
@media (max-width: 1000px) { .figrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .figrow { grid-template-columns: 1fr; } .figrow > div { border-left: 0; border-top: 1px solid var(--line); padding: 22px 0; } .figrow > div:first-child { border-top: 0; padding-top: 0; } }
@media (max-width: 620px) {
  .versus, .versus thead, .versus tbody, .versus tr, .versus th, .versus td { display: block; width: 100%; }
  .versus tbody tr td:first-child { border-right: 0; padding-right: 0; }
  .versus thead { display: none; }
  .versus tbody td { position: relative; padding: 14px 0; }
  .versus tbody td:first-child::before { content: "The critics"; }
  .versus tbody td:last-child::before { content: "The opening-night audience"; }
  .versus tbody td::before { display: block; margin-bottom: 8px; font-family: var(--display); font-weight: 700; font-size: var(--fs-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
}
@media (max-width: 759px) {
  .ledger li { gap: 6px; }
  .timeline li { padding: 13px 0; }
  .timeline .t-when { font-size: 13px; }
  .timeline.ledger .t-when { font-size: 30px; }
}
@media (max-width: 700px) {
  .barchart { gap: 16px; }
  .barchart .b { grid-template-columns: 1fr auto; }
  .barchart .b-lab { grid-column: 1; }
  .barchart .b-val { grid-column: 2; }
  .barchart .b-track { grid-column: 1 / -1; height: 18px; }
}

/* 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:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-mark-panel: Design set no ground on the mark, so light and dark logos cannot
   both read against the page. Give every mark the same dark plate and an inset — and
   GROW the box by that inset so the artwork keeps the size Design chose. */
.sponsor img,.sponsor-box img,.sp-logo img{background:#121013!important;padding:8px 12px!important;box-sizing:border-box!important;height:60px!important;max-height:60px!important;width:100%!important;object-fit:contain!important;border-radius:2px}

/* 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}
: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:3;-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}

/* op-no-mark-ground: operator: remove the extra background. The mark carried a #121013 plate on a
   #1E1816 tile. Fill only — geometry, inset and centring unchanged. */
.sponsor img,.sponsor-box img,.sp-logo img{background:transparent!important}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1677px at 390, 18% of the whole page. Two columns bring it to
   1415px (16% shorter). Checked before writing: no new overflow, smallest mark still
   131px wide, longest blurb 1 lines, tile heights 132-215px.
   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.
   An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.sup-row), 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){
  .sup-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:12px!important}
    .sup-row > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup-row > * *{min-width:0!important;max-width:100%}
    .sup-row img,.sup-row svg{max-width:100%;height:auto}

}

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

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:681px) and (max-width:999px){
  figure.article-figure.fig-bleed.bleed > figcaption, figure.article-figure.fig-bleed.bleed > :is(p,h2,h3,h4,ul,ol,[class*=cap],.credit,.chart-title,.chart-note){padding-left:max(var(--gutter), 18px);padding-right:max(var(--gutter), 18px)}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.f-link > div.f-img > img,
  a.sel > span.sel-img > img,
  a.sel.sel--big > span.sel-img > img,
  article.cat-item > a.ci-img > img,
  div.lead-feature > a.lf-img > img,
  div.profile-grid > div.profile-card > img.p-photo,
  div.run > div > img,
  div.run-2 > div > img,
  figure.article-figure.bleed.fig-bleed > div.f-img > img,
  main > div.cat-hero > img,
  section.hero > div.hero-img > img){height:auto}
/* op-img-dims:end */