/* thraexsoftware.com — Lock-In
   Palette (5, each with a job):
     --ground   #0D0C0B  page ground, the dark the whole site sits on
     --ink      #EDE6D8  body ink on the ground, and the ground of the pale bands
     --accent   #D8341F  vermilion — filled areas, plates, rules, the parmula side
     --second   #1E7F6E  verdigris — the opposing side of every pairing, filled areas
     --bronze   #A8813C  flag: quiet emphasis, numerals, the signature band
   Saturated members: vermilion (h≈9) and verdigris (h≈168) — 159 degrees apart.
   --accent-ink / --second-ink are the same hues lifted for 15-17px text on the ground. */

:root {
  --ground: #0D0C0B;
  --ground-2: #171512;
  --ground-3: #211E19;
  --ink: #EDE6D8;
  --ink-2: #BDB4A3;
  --ink-3: #8F8778;
  --accent: #D8341F;
  --accent-ink: #E4674F;
  --second: #1E7F6E;
  --second-ink: #35A891;
  --bronze: #A8813C;
  --bronze-ink: #C9A054;

  --display: "Anton", "Arial Narrow", sans-serif;
  --body: "Literata", Georgia, "Times New Roman", serif;
  --record: "Courier Prime", "Courier New", monospace;

  --measure: 66ch;
  --breakout: 1120px;
  --shell: 1240px;
  --gutter: 20px;
  --body-size: 17px;
  --rule: 2px;
}

/* --- three real breakpoints above the desktop cap --- */
@media (min-width: 1200px) {
  :root { --measure: 70ch; --breakout: 1300px; --shell: 1500px; --gutter: 34px; --body-size: 18px; }
}
@media (min-width: 1600px) {
  :root { --measure: 74ch; --breakout: 1560px; --shell: 1820px; --gutter: 44px; --body-size: 19px; --rule: 3px; }
}
@media (min-width: 1920px) {
  :root { --measure: 78ch; --breakout: 1840px; --shell: 2120px; --gutter: 56px; --body-size: 20px; }
}
@media (min-width: 2400px) {
  :root { --measure: 82ch; --breakout: 2160px; --shell: 2420px; --gutter: 72px; --body-size: 21px; }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--body-size);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid rgba(228, 103, 79, 0.4); }
a:hover { color: var(--second-ink); border-bottom-color: rgba(53, 168, 145, 0.65); }
a:focus-visible { outline: 2px solid var(--bronze-ink); outline-offset: 3px; }

p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding-inline: var(--gutter); }
.wide { width: 100%; max-width: var(--breakout); margin: 0 auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: 8px; background: var(--accent); color: var(--ink); padding: 8px 14px; z-index: 20; }

/* ─── icons ─────────────────────────────────────────────── */
.ico { width: 1.5em; height: 1.5em; flex: none; stroke: currentColor; fill: none;
  stroke-width: 6; stroke-linecap: square; stroke-linejoin: miter; vertical-align: -0.35em; }
.ico-lg { width: 2.6em; height: 2.6em; stroke-width: 5; }

/* ─── masthead ──────────────────────────────────────────── */
.masthead { border-bottom: var(--rule) solid var(--ink); background: var(--ground); }
.masthead-inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 12px 24px; padding-block: clamp(12px, 1.3vw, 30px);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 0.42em; grid-column: 2;
  font-family: var(--display); text-transform: uppercase; line-height: 0.86;
  font-size: clamp(38px, 5.6vw, 128px); letter-spacing: 0.012em;
  color: var(--ink); border: 0;
}
.wordmark:hover { color: var(--ink); }
.wordmark .mark-shield { color: var(--accent); }
.wordmark .mark-sica { color: var(--second-ink); }
.wordmark .ico { width: 0.5em; height: 0.62em; stroke-width: 7; }
.home .wordmark { font-size: clamp(46px, 8.4vw, 196px); }
.masthead-side { display: flex; flex-wrap: wrap; gap: 10px clamp(12px, 1.5vw, 34px); align-items: center; }
.masthead-side.right { justify-content: flex-end; }
.navlink {
  display: inline-flex; align-items: center; gap: 0.4em; border: 0;
  font-family: var(--record); font-size: clamp(11.5px, 0.62vw, 15px);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
}
.navlink .ico { width: 1.05em; height: 1.05em; color: var(--accent-ink); }
.navlink:hover { color: var(--second-ink); }
.navlink:hover .ico { color: var(--second-ink); }
.navlink[aria-current] { color: var(--accent-ink); border-bottom: var(--rule) solid var(--accent); }
.navlink.quiet { color: var(--ink-3); }
.tagline {
  grid-column: 1 / -1; margin: 0; padding-top: 6px; text-align: center;
  font-family: var(--record); font-size: clamp(11px, 0.58vw, 14px);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3);
}
@media (max-width: 860px) {
  .masthead-inner { grid-template-columns: 1fr; }
  .wordmark { grid-column: 1; justify-content: center; }
  .masthead-side, .masthead-side.right { justify-content: center; }
}

/* ─── homepage: lead ────────────────────────────────────── */
.lead-band { border-bottom: var(--rule) solid var(--ink); }
.lead-figure { position: relative; }
.lead-figure img { width: 100%; height: clamp(300px, 46vw, 900px); object-fit: cover; }
.lead-figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13, 12, 11, 0.95) 0%, rgba(13, 12, 11, 0.5) 38%, rgba(13, 12, 11, 0.1) 70%);
}
.lead-copy { position: relative; z-index: 2; margin-top: clamp(-260px, -18vw, -90px); }
.lead-copy .kicker { color: var(--accent-ink); }
.lead-title {
  font-family: var(--display); text-transform: uppercase; margin: 0.1em 0 0.3em;
  font-size: clamp(34px, 5.4vw, 132px); line-height: 0.92; letter-spacing: 0.005em;
}
.lead-title a { color: var(--ink); border: 0; }
.lead-title a:hover { color: var(--accent-ink); }
.lead-dek { margin: 0; max-width: 58ch; font-size: clamp(18px, 1.05vw, 30px); line-height: 1.42; color: var(--ink); }
.lead-foot {
  display: flex; flex-wrap: wrap; gap: 10px clamp(16px, 2vw, 48px); align-items: baseline;
  padding-block: clamp(16px, 1.6vw, 40px);
}

.kicker {
  margin: 0; display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--record); font-size: clamp(12px, 0.62vw, 16px);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2);
}
.kicker a { border: 0; color: inherit; }
.kicker a:hover { color: var(--second-ink); }
.kicker .ico { color: var(--accent-ink); }

/* ─── homepage: signature plate ─────────────────────────── */
.signature { background: var(--ink); color: var(--ground); border-bottom: var(--rule) solid var(--ink); }
.signature-inner { display: grid; gap: clamp(18px, 2.2vw, 60px); padding-block: clamp(30px, 3.4vw, 96px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.sig-item { border-top: 3px solid var(--ground); padding-top: 0.5em; }
.sig-year {
  display: block; font-family: var(--display); line-height: 0.84;
  font-size: clamp(52px, 6.4vw, 168px); letter-spacing: -0.005em;
}
.sig-item:nth-child(1) .sig-year { color: var(--accent); }
.sig-item:nth-child(2) .sig-year { color: var(--bronze); }
.sig-item:nth-child(3) .sig-year { color: var(--second); }
.sig-what { margin: 0.4em 0 0; font-size: clamp(15px, 0.8vw, 22px); line-height: 1.4; max-width: 34ch; color: #26221C; }
.sig-what a { color: #7A2411; border-bottom-color: rgba(122, 36, 17, 0.4); }
.sig-what a:hover { color: #10574A; border-bottom-color: rgba(16, 87, 74, 0.5); }

/* ─── homepage: the pairing band ────────────────────────── */
.pair-band { border-bottom: var(--rule) solid var(--ink); }
.pair-inner { display: grid; gap: clamp(24px, 2.6vw, 72px); padding-block: clamp(30px, 3.4vw, 90px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); align-items: start; }
.pair-major { grid-column: span 1; }
.pair-major .piece-title { font-size: clamp(26px, 2.7vw, 66px); }
.pair-major img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.pair-minor { display: flex; flex-direction: column; gap: clamp(20px, 2vw, 52px); }
.piece-title {
  font-family: var(--display); text-transform: uppercase; line-height: 1.02;
  margin: 0.35em 0 0.35em; font-size: clamp(20px, 1.5vw, 38px);
}
.piece-title a { color: var(--ink); border: 0; }
.piece-title a:hover { color: var(--accent-ink); }
.piece-brief { margin: 0; color: var(--ink-2); max-width: 62ch; font-size: clamp(15px, 0.78vw, 21px); line-height: 1.5; }
.piece { border-top: 1px solid rgba(237, 230, 216, 0.32); padding-top: 0.7em; }
.piece.strong { border-top: var(--rule) solid var(--ink); }
.piece-sub { display: grid; grid-template-columns: clamp(96px, 9vw, 210px) minmax(0, 1fr); gap: clamp(14px, 1.4vw, 34px); }
.piece-sub img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ─── homepage: short group ─────────────────────────────── */
.group-band { border-bottom: var(--rule) solid var(--ink); background: var(--ground-2); }
.group-inner { padding-block: clamp(28px, 3vw, 84px); }
.group-head { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: baseline; justify-content: space-between; }
.group-list { list-style: none; margin: clamp(18px, 1.8vw, 44px) 0 0; padding: 0;
  display: grid; gap: 1px; background: rgba(237, 230, 216, 0.24); }
.group-list li { background: var(--ground-2); }
.group-row {
  display: grid; grid-template-columns: 2.4em minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(12px, 1.4vw, 36px); align-items: baseline; padding: clamp(12px, 1.1vw, 26px) 0;
  border: 0; color: var(--ink);
}
.group-row:hover { background: var(--ground-3); color: var(--ink); }
.group-row .ico { color: var(--accent-ink); width: 1.6em; height: 1.6em; }
.group-row:hover .ico { color: var(--second-ink); }
.group-row .g-title { font-family: var(--display); text-transform: uppercase; font-size: clamp(17px, 1.15vw, 30px); line-height: 1.06; }
.group-row .g-brief { color: var(--ink-2); font-size: clamp(14px, 0.72vw, 19px); line-height: 1.45; }
@media (max-width: 720px) {
  .group-row { grid-template-columns: 2.2em minmax(0, 1fr); }
  .group-row .g-brief { grid-column: 2; }
}

/* ─── section hub / archive ─────────────────────────────── */
.hub-grid { display: grid; gap: clamp(20px, 2vw, 54px); padding-block: clamp(28px, 3vw, 80px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.hub-card { border-top: var(--rule) solid var(--ink); padding-top: 0.7em; }
.hub-card h3 { font-family: var(--display); text-transform: uppercase; font-size: clamp(19px, 1.3vw, 34px);
  line-height: 1.05; margin: 0.3em 0 0.3em; }
.hub-card h3 a { color: var(--ink); border: 0; }
.hub-card h3 a:hover { color: var(--accent-ink); }
.cat-list { list-style: none; margin: 0.8em 0 0; padding: 0; display: grid; gap: 0.55em; }
.cat-list a { color: var(--ink); border-bottom: 1px solid rgba(237, 230, 216, 0.25); }
.cat-list a:hover { color: var(--second-ink); border-bottom-color: var(--second-ink); }
.cat-list .cl-brief { display: block; color: var(--ink-3); font-size: 0.86em; line-height: 1.4; }

/* ─── colophon / supporters ─────────────────────────────── */
.colophon { border-bottom: var(--rule) solid var(--ink); background: var(--ground); }
.colophon-inner { padding-block: clamp(26px, 2.8vw, 76px); }
.colophon-head { display: flex; flex-wrap: wrap; gap: 8px 30px; align-items: baseline;
  border-bottom: 1px solid rgba(237, 230, 216, 0.3); padding-bottom: 0.7em; }
.colophon-head h2 { margin: 0; font-family: var(--display); text-transform: uppercase;
  font-size: clamp(18px, 1.2vw, 32px); line-height: 1; }
.colophon-note { margin: 0; font-family: var(--record); font-size: clamp(11px, 0.58vw, 14px);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.colophon-grid {
  margin-top: clamp(16px, 1.6vw, 40px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 420px));
  justify-content: space-between; gap: clamp(10px, 1vw, 24px);
}
.sponsor {
  display: grid; grid-template-columns: 230px minmax(160px, 1fr); align-items: center;
  gap: 18px; border: 1px solid rgba(237, 230, 216, 0.22); border-radius: 0;
  background: var(--ground-2); padding: 14px 18px; min-height: 84px;
}
.sponsor:hover { border-color: var(--accent); background: var(--ground-3); }
.sponsor img {
  max-height: 46px; max-width: 100%; width: auto; height: auto;
  object-fit: contain; object-position: left center; margin: 0 auto 0 0;
}
.sponsor-name { font-family: var(--record); font-size: 14px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink); line-height: 1.25; }
.sponsor.feat { border-color: rgba(216, 52, 31, 0.55); }
.sponsor.feat .sponsor-name { color: var(--accent-ink); }
.sponsor-blurb { display: block; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
@media (max-width: 560px) {
  .colophon-grid { grid-template-columns: repeat(auto-fit, minmax(0, 100%)); }
  .sponsor { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sponsor img { max-height: 40px; }
}

/* ─── footer ────────────────────────────────────────────── */
.site-foot { background: var(--ground); }
.foot-inner { display: grid; gap: clamp(18px, 2vw, 52px); padding-block: clamp(26px, 2.8vw, 76px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: end; }
.foot-mark { font-family: var(--display); text-transform: uppercase; font-size: clamp(26px, 2.2vw, 58px); line-height: 0.9; margin: 0; }
.foot-line { margin: 0; color: var(--ink-2); max-width: 46ch; font-size: clamp(15px, 0.76vw, 21px); line-height: 1.45; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 10px clamp(12px, 1.3vw, 30px); }

/* ─── article ───────────────────────────────────────────── */
.article-head { padding-block: clamp(26px, 3vw, 86px) clamp(16px, 1.6vw, 40px); }
.article-title {
  font-family: var(--display); text-transform: uppercase; margin: 0.25em 0 0.4em;
  font-size: clamp(32px, 4.6vw, 118px); line-height: 0.93; max-width: 26ch;
}
.lead {
  margin: 0; font-size: clamp(19px, 1.08vw, 31px); line-height: 1.42;
  max-width: 54ch; color: var(--ink); font-style: italic;
}
.article-meta {
  margin: clamp(14px, 1.4vw, 34px) 0 0; padding-top: 0.8em;
  border-top: 1px solid rgba(237, 230, 216, 0.3);
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  font-family: var(--record); font-size: clamp(12px, 0.6vw, 15px);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}

.article-body {
  display: grid; grid-template-columns: minmax(var(--gutter), 1fr) min(var(--measure), calc(100% - var(--gutter) * 2)) minmax(var(--gutter), 1fr);
  padding-bottom: clamp(30px, 3.4vw, 96px);
}
.article-body > * { grid-column: 2; }
.article-body > p { margin: 0 0 1.05em; }
.article-body > h2 {
  grid-column: 2; font-family: var(--display); text-transform: uppercase;
  font-size: clamp(24px, 2vw, 52px); line-height: 1.04; margin: 1.7em 0 0.7em;
}
.article-body > .breakout { grid-column: 1 / -1; width: min(var(--breakout), 100%); margin-inline: auto; padding-inline: var(--gutter); }
.article-body > .bleed { grid-column: 1 / -1; width: 100%; }
.article-body > .offset {
  grid-column: 2 / -1; width: min(calc(var(--breakout) * 0.62), 100%);
  margin: clamp(20px, 2vw, 52px) 0 clamp(22px, 2.2vw, 56px);
}
@media (max-width: 900px) { .article-body > .offset { grid-column: 2; width: 100%; } }

/* figure system — three treatments, one drawing system */
.article-figure { margin: clamp(22px, 2.2vw, 60px) 0; }
.article-figure img { width: 100%; }
.article-figure figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5em clamp(16px, 1.6vw, 40px);
  padding-top: 0.7em; margin-top: 0.55em; border-top: 1px solid rgba(237, 230, 216, 0.35);
}
.article-figure .cap {
  flex: 1 1 30ch; max-width: 82ch; margin: 0;
  font-size: clamp(14.5px, 0.74vw, 19px); line-height: 1.4; color: var(--ink);
}
.article-figure .credit {
  flex: 0 1 auto; margin: 0; font-family: var(--record);
  font-size: clamp(11px, 0.56vw, 13.5px); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
}
/* 1 — the mat: photograph sits on a bone plate, caption inside the mat */
.fig-plate { background: var(--ink); color: var(--ground); padding: clamp(12px, 1.1vw, 28px); }
.fig-plate img { border: 1px solid rgba(13, 12, 11, 0.35); aspect-ratio: 16 / 10; object-fit: cover; }
.fig-plate figcaption { border-top-color: rgba(13, 12, 11, 0.4); }
.fig-plate .cap { color: #1A1712; }
.fig-plate .credit { color: #6B6152; }
/* 2 — the bleed: full width, caption on one row beneath at breakout width */
.fig-bleed { margin: 0; }
.fig-bleed img { height: clamp(240px, 38vw, 760px); object-fit: cover; }
.fig-bleed figcaption { max-width: var(--breakout); margin: 0.55em auto 0; padding-inline: var(--gutter); }
/* 3 — the bar: heavy vermilion edge, image narrower than the measure, caption hanging */
.fig-inset { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: clamp(12px, 1.2vw, 26px); }
.fig-inset::before { content: ""; background: var(--accent); grid-row: 1 / span 2; }
.fig-inset img { aspect-ratio: 3 / 2; object-fit: cover; }
.fig-inset figcaption { grid-column: 2; border-top-color: rgba(216, 52, 31, 0.5); }

/* notes-for-design material — the interruptions */
.notes-band { margin: clamp(26px, 2.8vw, 76px) 0; }
.notes-band .n-head {
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline;
  border-bottom: var(--rule) solid currentColor; padding-bottom: 0.6em;
}
.notes-band h2, .notes-band h3 {
  margin: 0; font-family: var(--display); text-transform: uppercase;
  font-size: clamp(20px, 1.5vw, 40px); line-height: 1;
}
.notes-band .n-kind { font-family: var(--record); font-size: clamp(11px, 0.56vw, 14px);
  letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.62; }
.band-plate { background: var(--ink); color: var(--ground); padding: clamp(18px, 1.8vw, 48px); }
.band-plate a { color: #7A2411; border-bottom-color: rgba(122, 36, 17, 0.4); }
.band-plate a:hover { color: #10574A; }
.band-dark { background: var(--ground-2); border: 1px solid rgba(237, 230, 216, 0.3); padding: clamp(18px, 1.8vw, 48px); }

.timeline { list-style: none; margin: clamp(14px, 1.4vw, 34px) 0 0; padding: 0;
  display: grid; gap: 1px; background: currentColor; }
.timeline li { display: grid; grid-template-columns: minmax(0, 15ch) minmax(0, 1fr);
  gap: clamp(12px, 1.3vw, 34px); padding: clamp(9px, 0.85vw, 20px) 0; }
.band-plate .timeline li { background: var(--ink); }
.band-dark .timeline li { background: var(--ground-2); }
.t-when { font-family: var(--record); font-size: clamp(12.5px, 0.66vw, 17px); letter-spacing: 0.06em;
  text-transform: uppercase; line-height: 1.3; }
.band-plate .t-when { color: #7A2411; }
.band-dark .t-when { color: var(--accent-ink); }
.t-what { font-size: clamp(15px, 0.78vw, 21px); line-height: 1.45; }
@media (max-width: 620px) {
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

.notes-cols { margin-top: clamp(14px, 1.4vw, 34px); display: grid; gap: clamp(14px, 1.5vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.notes-cols .callout { margin: 0; }

/* ─── the component set (PALETTE_SPEC classes) ──────────── */
.pullquote { margin: clamp(24px, 2.4vw, 64px) 0; padding: 0 0 0 clamp(16px, 1.6vw, 40px);
  border-left: 6px solid var(--second); }
.pullquote p { margin: 0; font-family: var(--display); text-transform: uppercase;
  font-size: clamp(22px, 1.9vw, 50px); line-height: 1.04; }
.blockquote { margin: clamp(20px, 2vw, 52px) 0; padding: 0 0 0 clamp(14px, 1.4vw, 34px);
  border-left: 2px solid var(--bronze); }
.blockquote p { margin: 0; font-size: clamp(17px, 0.9vw, 24px); line-height: 1.5; font-style: italic; }
.blockquote cite { display: block; margin-top: 0.6em; font-family: var(--record); font-style: normal;
  font-size: clamp(12px, 0.6vw, 15px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.callout { margin: clamp(20px, 2vw, 52px) 0; padding: clamp(14px, 1.3vw, 32px);
  background: var(--ground-2); border-top: 4px solid var(--second); }
.callout p { margin: 0; font-size: clamp(15.5px, 0.8vw, 21px); line-height: 1.5; }
.callout strong { color: var(--second-ink); }
.band-plate .callout { background: rgba(13, 12, 11, 0.06); border-top-color: var(--accent); }
.band-plate .callout strong { color: #7A2411; }
.note { margin: clamp(16px, 1.6vw, 40px) 0; padding-left: clamp(12px, 1.1vw, 26px);
  border-left: 2px solid var(--ink-3); color: var(--ink-2);
  font-size: clamp(14.5px, 0.74vw, 19px); line-height: 1.5; }

.versus, .datatable { width: 100%; border-collapse: collapse; margin: clamp(20px, 2vw, 52px) 0;
  font-size: clamp(14.5px, 0.76vw, 20px); }
.versus caption, .datatable caption { text-align: left; padding-bottom: 0.7em;
  font-family: var(--record); font-size: clamp(11.5px, 0.58vw, 14px);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.versus th, .versus td, .datatable th, .datatable td {
  text-align: left; padding: 0.62em 0.9em; border-bottom: 1px solid rgba(237, 230, 216, 0.28);
  vertical-align: top; }
.versus thead th, .datatable thead th { font-family: var(--record); font-size: 0.78em;
  letter-spacing: 0.14em; text-transform: uppercase; border-bottom: var(--rule) solid var(--ink); }
.versus tbody th { font-family: var(--record); font-size: 0.82em; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-2); width: 26%; }
.versus td:nth-of-type(1) { color: var(--accent-ink); }
.versus td:nth-of-type(2) { color: var(--second-ink); }
.datatable tbody tr:hover { background: var(--ground-2); }
.table-scroll { overflow-x: auto; }

.statrow { display: grid; gap: 1px; background: rgba(237, 230, 216, 0.3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  margin: clamp(20px, 2vw, 52px) 0; }
.statblock { background: var(--ground); padding: clamp(12px, 1.2vw, 28px); }
.stat-num { display: block; font-family: var(--display); line-height: 0.86;
  font-size: clamp(34px, 3vw, 78px); color: var(--bronze-ink); }
.stat-label { display: block; margin-top: 0.5em; font-size: clamp(13.5px, 0.7vw, 18px);
  line-height: 1.35; color: var(--ink-2); }

.chart { margin: clamp(20px, 2vw, 52px) 0; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart figcaption { padding-top: 0.8em; margin-top: 0.6em; border-top: 1px solid rgba(237, 230, 216, 0.35);
  font-size: clamp(14px, 0.72vw, 18px); line-height: 1.42; color: var(--ink-2); }
.chart .c-bar { fill: var(--accent); }
.chart .c-bar-alt { fill: var(--second); }
.chart .c-axis { stroke: rgba(237, 230, 216, 0.45); stroke-width: 1; }
.chart .c-label { fill: var(--ink-2); font-family: "Courier Prime", monospace; font-size: 11px; }
.chart .c-value { fill: var(--ink); font-family: "Courier Prime", monospace; font-size: 11px; }
.chart .c-line { fill: none; stroke: var(--second-ink); stroke-width: 2.5; }
.chart .c-dot { fill: var(--bronze-ink); }
.chart .c-ring { fill: none; stroke-width: 26; }

.gallery { display: grid; gap: clamp(10px, 1vw, 24px); margin: clamp(20px, 2vw, 52px) 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.gallery figure { margin: 0; }
.gallery img { aspect-ratio: 3 / 2; object-fit: cover; }
.gallery figcaption { padding-top: 0.5em; font-size: clamp(13px, 0.68vw, 17px); line-height: 1.35; color: var(--ink-2); }

.profile-grid { display: grid; gap: clamp(14px, 1.4vw, 36px); margin: clamp(20px, 2vw, 52px) 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.profile-card { display: flex; flex-direction: column; background: var(--ground-2);
  border-top: 4px solid var(--bronze); padding: clamp(14px, 1.3vw, 30px); }
.profile-card .p-photo { width: 96px; height: 96px; object-fit: cover; margin-bottom: 0.8em; }
.profile-card h3 { margin: 0 0 0.2em; font-family: var(--display); text-transform: uppercase;
  font-size: clamp(18px, 1.15vw, 30px); line-height: 1.05; }
.profile-card .p-role { margin: 0 0 0.7em; font-family: var(--record);
  font-size: clamp(11.5px, 0.58vw, 14px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); }
.profile-card p { margin: 0 0 0.7em; font-size: clamp(14.5px, 0.74vw, 19px); line-height: 1.5; color: var(--ink-2); }
.profile-card .p-links { margin-top: auto; margin-bottom: 0; }
.profile-card .p-attr { font-family: var(--record); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); }
.profile-card.no-photo .p-photo { display: none; }

.org-grid { display: grid; gap: 1px; background: rgba(237, 230, 216, 0.28);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  margin: clamp(18px, 1.8vw, 46px) 0; }
.org-card { display: flex; flex-direction: column; gap: 0.3em; background: var(--ground);
  padding: clamp(12px, 1.1vw, 26px); border: 0; }
.org-card:hover { background: var(--ground-3); }
.org-logo { max-height: 34px; width: auto; margin-bottom: 0.5em; }
.org-name { font-family: var(--display); text-transform: uppercase; font-size: clamp(16px, 1vw, 26px); line-height: 1.05; color: var(--ink); }
.org-card:hover .org-name { color: var(--accent-ink); }
.org-host { font-family: var(--record); font-size: clamp(11.5px, 0.58vw, 14px);
  letter-spacing: 0.12em; color: var(--ink-3); }
.org-card.no-logo .org-logo { display: none; }

.entity-ref { white-space: nowrap; }

.further-grid { display: grid; gap: 1px; background: rgba(237, 230, 216, 0.28);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.further-grid a { display: flex; background: var(--ground); border: 0; padding: clamp(12px, 1.2vw, 28px);
  font-family: var(--display); text-transform: uppercase; line-height: 1.06;
  font-size: clamp(16px, 1.05vw, 27px); color: var(--ink); }
.further-grid a:hover { background: var(--ground-3); color: var(--accent-ink); }

.related-links { list-style: none; margin: clamp(14px, 1.4vw, 34px) 0 0; padding: 0; display: grid; gap: 0.6em; }
.related-links a { color: var(--ink); }
.related-links a:hover { color: var(--second-ink); }

.section-block { padding-block: clamp(26px, 2.8vw, 76px); border-bottom: var(--rule) solid var(--ink); }
.section-block > .n-head { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; }
.block-title { margin: 0; font-family: var(--display); text-transform: uppercase;
  font-size: clamp(22px, 1.7vw, 44px); line-height: 1; }

/* ─── category page ─────────────────────────────────────── */
.cat-head { border-bottom: var(--rule) solid var(--ink); }
.cat-head-inner { padding-block: clamp(26px, 3vw, 84px); display: grid; gap: clamp(18px, 2vw, 54px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: end; }
.cat-title { margin: 0; font-family: var(--display); text-transform: uppercase;
  font-size: clamp(30px, 3.8vw, 96px); line-height: 0.95; }
.cat-intro { margin: 0; font-size: clamp(17px, 0.94vw, 27px); line-height: 1.48; max-width: 62ch; color: var(--ink); }
.cat-lead { border-bottom: var(--rule) solid var(--ink); }
.cat-lead-inner { display: grid; gap: clamp(20px, 2.2vw, 60px); padding-block: clamp(24px, 2.6vw, 68px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); align-items: center; }
.cat-lead img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.cat-rest { padding-block: clamp(24px, 2.6vw, 70px); }
.cat-rest .cat-list { gap: 0; }
.cat-rest .cat-list li { border-top: 1px solid rgba(237, 230, 216, 0.3); }
.cat-rest .cat-list a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(12px, 1.4vw, 36px); align-items: baseline; padding: clamp(12px, 1.1vw, 26px) 0; border: 0; }
.cat-rest .cat-list a:hover { background: var(--ground-2); }
.cat-rest .cl-title { font-family: var(--display); text-transform: uppercase;
  font-size: clamp(17px, 1.15vw, 30px); line-height: 1.06; color: var(--ink); }
.cat-rest .cat-list a:hover .cl-title { color: var(--accent-ink); }
@media (max-width: 720px) { .cat-rest .cat-list a { grid-template-columns: minmax(0, 1fr); } }

/* ─── standing pages ───────────────────────────────────── */
.page-body { padding-block: clamp(26px, 3vw, 86px); }
.page-body h1 { font-family: var(--display); text-transform: uppercase; margin: 0 0 0.4em;
  font-size: clamp(30px, 3.6vw, 92px); line-height: 0.95; }
.page-body h2 { font-family: var(--display); text-transform: uppercase;
  font-size: clamp(20px, 1.5vw, 40px); line-height: 1.04; margin: 1.6em 0 0.6em; }
.page-body p { max-width: var(--measure); }
.page-404 { min-height: 52vh; display: flex; align-items: center; }

/* ─── styleguide chrome (internal, unlinked) ───────────── */
.sg-section { border-top: var(--rule) solid var(--ink); padding-block: clamp(22px, 2.4vw, 64px); }
.sg-label { font-family: var(--record); font-size: 13px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent-ink); margin: 0 0 1em; }

/* wordmark parts */
.wordmark { flex-wrap: nowrap; }
.wordmark .wm-name { display: inline-block; }
.wordmark .wm-tld { font-family: var(--record); text-transform: lowercase; letter-spacing: 0.01em;
  font-size: 0.19em; color: var(--ink-3); align-self: flex-end; padding-bottom: 0.42em; margin-left: -0.12em; }
.lead-figure { margin: 0; }
@media (max-width: 560px) { .wordmark .wm-tld { font-size: 0.24em; } }

/* the lead band’s screenshot plate — a real interface at its real resolution */
.lead-foot { align-items: start; }
.lead-shot { margin: 0; flex: 0 1 640px; background: var(--ink); padding: clamp(10px, 0.9vw, 22px); }
.lead-shot img { width: 100%; max-width: 640px; image-rendering: pixelated; border: 1px solid rgba(13,12,11,0.4); }
.lead-shot figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4em clamp(14px,1.4vw,32px);
  margin-top: 0.55em; padding-top: 0.6em; border-top: 1px solid rgba(13,12,11,0.4); }
.lead-shot .cap { flex: 1 1 24ch; margin: 0; color: #1A1712; font-size: clamp(14px,0.7vw,18px); line-height: 1.38; }
.lead-shot .credit { flex: 0 1 auto; margin: 0; font-family: var(--record); font-size: clamp(11px,0.54vw,13px);
  letter-spacing: 0.14em; text-transform: uppercase; color: #6B6152; }
.lead-foot-copy { flex: 1 1 34ch; display: grid; gap: 0.7em; align-content: start; }
.lead-foot-copy .piece-brief { max-width: 52ch; }

/* the screen plate — a fourth figure treatment for the two real screenshots,
   which arrive at 640px and must never be upscaled or cropped */
.fig-shot { background: var(--ink); padding: clamp(12px, 1.1vw, 30px); }
.fig-shot img { max-width: min(100%, 960px); margin-inline: auto; border: 1px solid rgba(13,12,11,0.45);
  image-rendering: pixelated; background: #05070A; }
.fig-shot figcaption { max-width: 100%; border-top-color: rgba(13,12,11,0.4); }
.fig-shot .cap { color: #1A1712; }
.fig-shot .credit { color: #6B6152; }
.bleed-pad { grid-column: 1 / -1 !important; width: min(var(--breakout), 100%); margin-inline: auto; }
.article-figure img[src$=".png"], .cat-lead img[src$=".png"], .pair-major img[src$=".png"],
.piece-sub img[src$=".png"], .gallery img[src$=".png"] {
  image-rendering: pixelated; object-fit: contain; background: #05070A; }

/* partial rows must not paint the container hairline as a slab */
.org-grid, .statrow, .further-grid, .group-list { background: transparent; gap: 0; }
.org-grid > .org-card, .statrow > .statblock, .further-grid > a, .group-list > li {
  box-shadow: inset 0 0 0 1px rgba(237, 230, 216, 0.28); }
.group-list > li { box-shadow: inset 0 1px 0 0 rgba(237, 230, 216, 0.28); }
.group-list > li:last-child { box-shadow: inset 0 1px 0 0 rgba(237, 230, 216, 0.28), inset 0 -1px 0 0 rgba(237, 230, 216, 0.28); }

/* figure scale — a photograph is a figure inside a reading page, not a band.
   Each treatment gets its own width so no two read as the same instrument. */
.article-figure { margin: clamp(34px, 3.4vw, 92px) 0; }
.notes-band { margin: clamp(34px, 3.4vw, 92px) 0; }
.article-body > .article-figure.breakout { width: min(calc(var(--breakout) * 0.68), 100%); }
.fig-plate img { aspect-ratio: 3 / 2; }
.fig-bleed img { height: clamp(220px, 30vw, 580px); }
.article-body > .fig-inset.offset { width: min(calc(var(--breakout) * 0.42), 100%); }
.fig-inset img { aspect-ratio: 4 / 3; }
.article-figure.bleed-pad { width: min(760px, 100%); padding-inline: 0; }
.fig-shot img { max-width: min(100%, 640px); }
@media (max-width: 900px) {
  .article-body > .article-figure.breakout, .article-body > .fig-inset.offset { width: 100%; }
}

/* the shorthand margin above reset the auto centring on the two centred treatments */
.article-figure.bleed-pad, .article-body > .article-figure.breakout { margin-inline: auto; }

/* ─── desktop caps ────────────────────────────────────────
   Revised for 2560px working displays: the shell now tops out at a
   normal desktop measure and keeps growing only modestly above it.
   Full-bleed photographs still use the whole viewport; text never does. */
@media (min-width: 1200px) { :root { --shell: 1360px; --breakout: 1100px; --measure: 70ch; --body-size: 18px; --gutter: 34px; } }
@media (min-width: 1600px) { :root { --shell: 1460px; --breakout: 1180px; --measure: 72ch; --body-size: 18px; --gutter: 40px; --rule: 3px; } }
@media (min-width: 1920px) { :root { --shell: 1560px; --breakout: 1260px; --measure: 74ch; --body-size: 19px; --gutter: 44px; } }
@media (min-width: 2400px) { :root { --shell: 1640px; --breakout: 1320px; --measure: 76ch; --body-size: 19px; --gutter: 48px; } }
/* full-bleed art: keep the band, lose the wall of height on a big screen */
.lead-figure img { height: clamp(300px, 38vw, 660px); }
.fig-bleed img { height: clamp(220px, 26vw, 520px); }
/* display type stops scaling with the viewport once the shell has stopped */
@media (min-width: 1700px) {
  .home .wordmark { font-size: 148px; }
  .wordmark { font-size: 104px; }
  .lead-title { font-size: 96px; }
  .article-title { font-size: 88px; }
  .cat-title { font-size: 76px; }
  .sig-year { font-size: 128px; }
}

/* ─── hard page cap ──────────────────────────────────────
   Nothing on the site spans the viewport above 1600px — not the masthead
   rule, not the bone plate, not a full-bleed photograph. The page becomes
   a centred 1600px column on a darker surround, which is what a 2560px
   desktop expects. --page is the single number to change. */
:root { --page: 1600px; }
html { background: #060605; }
body { max-width: var(--page); margin-inline: auto; border-inline: 1px solid rgba(237,230,216,0.14); }
/* the shell tracks the cap rather than exceeding it */
@media (min-width: 1200px) { :root { --shell: 100%; --breakout: 1100px; } }
@media (min-width: 1600px) { :root { --shell: 100%; --breakout: 1180px; } }
@media (min-width: 1920px) { :root { --shell: 100%; --breakout: 1240px; } }
@media (min-width: 2400px) { :root { --shell: 100%; --breakout: 1240px; } }
/* art heights key off the cap, not the viewport, so they stop growing too */
@media (min-width: 1600px) {
  .lead-figure img { height: 600px; }
  .fig-bleed img { height: 460px; }
}

/* ─── masthead ───────────────────────────────────────────
   Two rows at every width: the wordmark on its own line, both navs joined
   as one centred line beneath it. The three-track version (nav | wordmark |
   nav) could always collide, because the wordmark size and the two nav
   widths are set independently. */
.masthead-inner { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 0.9vw, 20px); }
.wordmark { order: 1; font-size: clamp(48px, 6.4vw, 104px); }
.home .wordmark { font-size: clamp(58px, 9vw, 152px); }
.masthead-side { order: 2; flex-wrap: wrap; justify-content: center; gap: 8px clamp(16px, 1.5vw, 30px); }
.masthead-side.right { order: 3; }
.tagline { order: 4; padding-top: 0; }
/* above 1000px the eight links hold one line: the two navs sit on one row */
@media (min-width: 1000px) {
  .masthead-inner { flex-flow: row wrap; justify-content: center; }
  .wordmark { flex: 1 0 100%; justify-content: center; }
  .masthead-side { flex-wrap: nowrap; }
  .navlink { white-space: nowrap; }
  .masthead-side.right { margin-left: clamp(16px, 1.5vw, 30px); }
  .tagline { flex: 1 0 100%; }
}

/* hardcoded width/height attributes must never set the rendered aspect */
.lead-shot img, .fig-shot img { height: auto; }

/* ─── display type ───────────────────────────────────────
   Anton was too black at title sizes. Titles now run Oswald 500 (condensed,
   normal weight); Anton is kept for the wordmark and the signature numerals,
   where the mass is the point. */
:root { --display: "Oswald", "Arial Narrow", sans-serif; --mark: "Anton", "Arial Narrow", sans-serif; }
.piece-title, .lead-title, .article-title, .cat-title, .block-title, .hub-card h3,
.cat-rest .cl-title, .group-row .g-title, .pullquote p, .notes-band h2, .notes-band h3,
.page-body h1, .page-body h2, .article-body > h2, .colophon-head h2, .profile-card h3,
.org-name, .further-grid a, .foot-mark {
  font-family: var(--display); font-weight: 500; letter-spacing: 0.005em; }
.wordmark, .sig-year, .stat-num { font-family: var(--mark); font-weight: 400; }

/* ─── homepage image treatment ───────────────────────────
   Homepage photographs were sitting raw on the ground with no frame, while
   every figure inside an article has a mat. They now use the same mat at a
   quieter weight: a dark plate, a hairline, and a vermilion rule on top. */
.pair-major img, .piece-sub img, .cat-lead img {
  background: var(--ground-2); padding: clamp(8px, 0.6vw, 14px);
  border: 1px solid rgba(237, 230, 216, 0.2); border-top: 3px solid var(--accent); }
.pair-major img { aspect-ratio: 16 / 10; object-fit: cover; }

/* ─── colophon grid ──────────────────────────────────────
   space-between across 420px tracks opened two dead gutters between the
   columns. An auto-fit grid distributes the eleven slots evenly instead. */
.colophon-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  justify-content: stretch; gap: clamp(12px, 1vw, 20px); }
/* and the cards get room: the fixed 230px logo column left a hole before the name */
.sponsor { grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: clamp(16px, 1.4vw, 28px);
  padding: clamp(18px, 1.5vw, 30px) clamp(20px, 1.7vw, 34px); min-height: 104px; align-items: center; }
.sponsor img { max-height: 34px; max-width: 190px; }

/* ─── wordmark scale ─────────────────────────────────────
   Smaller overall, and the shield now matches the cap height of THRAEX
   (Anton caps sit at ~0.73em) rather than overshooting it. */
.wordmark { font-size: clamp(34px, 4.2vw, 68px); align-items: center; gap: 0.3em; }
.home .wordmark { font-size: clamp(40px, 5.4vw, 92px); }
.wordmark .ico { height: 0.73em; width: 0.62em; stroke-width: 6; }
@media (min-width: 1000px) { .wordmark { font-size: 68px; } .home .wordmark { font-size: 92px; } }

/* nav at reading size — the row has slack at the 1600px cap (measured ~854px
   of 1520px), so the links can carry real weight */
@media (min-width: 1000px) {
  .navlink { font-size: 17px; letter-spacing: 0.1em; gap: 0.5em; }
  .navlink .ico { width: 1.35em; height: 1.35em; stroke-width: 5.5; }
  .masthead-side { gap: 0 clamp(20px, 1.6vw, 32px); }
  .masthead-side.right { margin-left: clamp(20px, 1.6vw, 32px); }
}

/* ─── article head ───────────────────────────────────────
   The title was held at 26ch and the lead at 54ch inside a breakout-width
   column, so both sat squeezed into the left third. They now use the column. */
.article-title { max-width: none; }
.lead { max-width: 70ch; }

/* ─── display ladder ─────────────────────────────────────
   vw sizing is meaningless past the --page cap: the type kept growing while
   its container stopped. Titles now step on fixed sizes, and the article head
   is a single column so the title has the whole breakout row. */
@media (min-width: 1000px) {
  .article-head { display: block; }
  .article-title { font-size: 76px; max-width: 34ch; }
  .article-head .lead { max-width: 62ch; }
  .lead-title { font-size: 84px; max-width: 30ch; }
  .cat-title { font-size: 68px; }
  .article-body > h2 { font-size: 40px; }
  .block-title, .notes-band h2 { font-size: 32px; }
  .pullquote p { font-size: 38px; }
  .piece-title { font-size: 30px; }
  .pair-major .piece-title { font-size: 46px; }
  .sig-year { font-size: 116px; }
}

/* ─── reading comfort ────────────────────────────────────
   Full-strength bone on near-black at 1.62 was hard work over long prose.
   Body text now runs a touch dimmer, looser, and with more room between
   paragraphs; headings and captions keep full strength. */
.article-body > p { color: #D9D1C2; line-height: 1.82; margin-bottom: 1.35em; }
.article-body { letter-spacing: 0.004em; }
.lead { line-height: 1.5; }
.page-body p { color: #D9D1C2; line-height: 1.82; }
.t-what, .callout p, .piece-brief { line-height: 1.6; }

/* ─── glossary ───────────────────────────────────────────
   Term-and-definition material was being drawn either as callout cards or
   as a chronology with an empty date column. It now has its own treatment:
   a ruled two-column list, term in condensed caps, definition beneath. */
.glossary { margin: clamp(16px, 1.6vw, 36px) 0 0; display: grid; gap: clamp(16px, 1.5vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.gl-item { border-top: 2px solid currentColor; padding-top: 0.65em; }
.glossary dt { font-family: var(--display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(15px, 0.86vw, 22px); line-height: 1.15; letter-spacing: 0.02em; margin-bottom: 0.3em; }
.glossary dd { margin: 0; font-size: clamp(14.5px, 0.76vw, 19px); line-height: 1.6; }
.band-plate .glossary dt { color: #7A2411; }
.band-plate .glossary dd { color: #26221C; }
.band-dark .glossary dt { color: var(--second-ink); }
.band-dark .glossary dd { color: var(--ink-2); }
.band-dark .gl-item, .band-plate .gl-item { border-top-color: currentColor; }
@media (min-width: 1000px) { .glossary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* a glossary entry with no term keeps the rule but not an empty term line */
.gl-item.plain dd { padding-top: 0; }
/* a timeline label that is a period rather than a date still reads as a label */
.t-when { font-weight: 700; }

/* ─── timeline scale ─────────────────────────────────────
   The date was set at caption size in a 15ch track, leaving a dead gutter
   and a label smaller than the text it governs. Dates now carry display
   weight in a track sized to them. */
.timeline li { grid-template-columns: minmax(0, 9ch) minmax(0, 1fr); gap: clamp(14px, 1.2vw, 28px);
  padding: clamp(11px, 1vw, 22px) 0; align-items: baseline; }
.t-when { font-family: var(--display); font-weight: 600; letter-spacing: 0.01em;
  font-size: clamp(20px, 1.25vw, 30px); line-height: 1.1; text-transform: none; }
.t-what { font-size: clamp(15px, 0.8vw, 20px); }
/* a period label ("Late Republic") needs a wider track than a year */
.timeline.periods li { grid-template-columns: minmax(0, 16ch) minmax(0, 1fr); }
.timeline.periods .t-when { font-size: clamp(16px, 0.95vw, 23px); }
@media (min-width: 1000px) { .t-when { font-size: 30px; } .timeline.periods .t-when { font-size: 23px; } }

/* ═══ mobile ═════════════════════════════════════════════
   Everything below 700px: the nav becomes a two-column tap grid with 44px
   targets, the lead copy stops overlapping its photograph, every fixed or
   two-track grid collapses, and no breakout element exceeds the viewport. */
@media (max-width: 700px) {
  :root { --gutter: 16px; --body-size: 17px; --measure: 100%; --rule: 2px; }
  body { border-inline: 0; }
  .masthead-inner { gap: 14px; padding-block: 14px; }
  .wordmark { font-size: 44px; }
  .home .wordmark { font-size: 52px; }
  .masthead-side, .masthead-side.right { display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px; width: 100%; margin: 0; }
  .navlink { min-height: 44px; padding: 10px 8px; font-size: 13px; letter-spacing: 0.1em;
    box-shadow: inset 0 0 0 1px rgba(237,230,216,0.2); justify-content: flex-start; }
  .navlink .ico { width: 1.2em; height: 1.2em; }
  .navlink[aria-current] { border-bottom: 0; box-shadow: inset 0 0 0 1px var(--accent); }
  .tagline { font-size: 11px; letter-spacing: 0.14em; }
  /* lead: copy sits under the photograph, not over it */
  .lead-copy { margin-top: 18px; }
  .lead-figure img { height: 240px; }
  .lead-figure::after { display: none; }
  .lead-title { font-size: 34px; }
  .lead-dek { font-size: 17px; }
  .lead-foot { padding-block: 18px; }
  /* article */
  .article-title { font-size: 34px; max-width: none; }
  .lead { font-size: 19px; }
  .article-meta { gap: 6px 16px; font-size: 11.5px; }
  .article-body > h2 { font-size: 26px; margin: 1.3em 0 0.5em; }
  .article-figure { margin: 26px 0; }
  .article-body > .article-figure.breakout, .article-body > .fig-inset.offset,
  .article-figure.bleed-pad { width: 100%; padding-inline: 0; }
  .fig-bleed img { height: 220px; }
  .fig-plate img, .fig-inset img { aspect-ratio: 3 / 2; }
  .fig-inset { grid-template-columns: 4px minmax(0, 1fr); gap: 12px; }
  .article-figure .cap { font-size: 14.5px; }
  .notes-band { margin: 26px 0; }
  .band-plate, .band-dark { padding: 16px; }
  .notes-band h2, .notes-band h3, .block-title { font-size: 22px; }
  /* lists: label above text, one column */
  .timeline li, .timeline.periods li { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 0; }
  .t-when { font-size: 22px; }
  .glossary { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pullquote p { font-size: 24px; }
  .pullquote { padding-left: 14px; border-left-width: 4px; }
  /* homepage bands */
  .sig-year { font-size: 68px; }
  .pair-inner, .group-inner, .colophon-inner, .foot-inner, .hub-grid { padding-block: 24px; }
  .piece-sub { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .piece-sub img { aspect-ratio: 3 / 2; }
  .piece-title { font-size: 22px; }
  .pair-major .piece-title { font-size: 26px; }
  .group-row { grid-template-columns: 1.8em minmax(0, 1fr); padding: 14px 0; }
  .group-row .g-title { font-size: 19px; }
  .group-row .g-brief { grid-column: 2; }
  .cat-title { font-size: 34px; }
  .cat-rest .cat-list a { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .colophon-grid { grid-template-columns: minmax(0, 1fr); }
  .sponsor { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px; min-height: 0; }
  .statrow, .org-grid, .further-grid, .profile-grid, .gallery { grid-template-columns: minmax(0, 1fr); }
  .stat-num { font-size: 44px; }
  .foot-mark { font-size: 34px; }
  .foot-nav { gap: 8px 16px; }
  .versus tbody th { width: auto; }
  .page-body h1 { font-size: 34px; }
}
/* no element may exceed the viewport on a phone */
@media (max-width: 700px) { .wide, .shell, .breakout, .bleed { max-width: 100%; } }

/* ─── touch nav to the desktop threshold ─────────────────
   The tap treatment stopped at 700px while the single-line desktop nav only
   starts at 1520px, leaving tablets with 19px-high links. It now covers the
   whole gap. */
@media (min-width: 701px) and (max-width: 1519px) {
  .masthead-side, .masthead-side.right { display: grid; width: 100%; margin: 0; gap: 2px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .navlink { min-height: 44px; padding: 10px 12px; font-size: 14px; letter-spacing: 0.1em;
    justify-content: flex-start; box-shadow: inset 0 0 0 1px rgba(237,230,216,0.2); }
  .navlink .ico { width: 1.25em; height: 1.25em; }
  .navlink[aria-current] { border-bottom: 0; box-shadow: inset 0 0 0 1px var(--accent); }
}
/* footer nav is a link list, not a toolbar, but still wants a finger target */
@media (max-width: 1519px) { .foot-nav .navlink { min-height: 40px; align-items: center; box-shadow: none; } }

/* the 640x480 capture must reserve its box before it loads */
.fig-shot img, .lead-shot img { aspect-ratio: 4 / 3; object-fit: contain; }

/* 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}
.colophon-head{flex-wrap:wrap!important}
.colophon-head > .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-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:62px!important;max-height:62px!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-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}

/* 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. */
.colophon-grid .sponsor.sponsor img{height:62px!important;display:block!important;width:190px!important;max-width:100%!important;flex:none!important}

/* op-no-mark-ground: operator: remove the extra background. The mark carried a #121013 plate on a
   #171512 tile. Fill only. */
.sponsor img,.sponsor-box img,.sp-logo img{background:transparent!important}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   1479px at 390, 27% of the whole page. Two columns bring it to
   836px (43% shorter). Checked before writing: no new overflow, smallest mark still
   138px wide, longest blurb 2 lines, tile heights 124-141px.
   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 (.colophon-grid), 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){
  .colophon-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .colophon-grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .colophon-grid > * *{min-width:0!important;max-width:100%}
    .colophon-grid img,.colophon-grid svg{max-width:100%;height:auto}

}

/* op-odd-tier-lead: .colophon-grid (11 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .colophon-grid:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}
/* op-heading-levels */
h2:where(.rt-h3){text-wrap: balance;}
.hub-card h2:where(.rt-h3){font-family: var(--display); text-transform: uppercase; font-size: clamp(19px, 1.3vw, 34px); line-height: 1.05; margin: 0.3em 0px;}
.hub-card h2:where(.rt-h3) a{color: var(--ink); border: 0px;}
.hub-card h2:where(.rt-h3) a:hover{color: var(--accent-ink);}
.hub-card h2:where(.rt-h3){font-family: var(--display); font-weight: 500; letter-spacing: 0.005em;}
h1:where(.rt-h2){text-wrap: balance;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.piece.strong > div.piece-sub > img,
  div.article-body > figure.article-figure.bleed-pad.fig-shot > img,
  div.article-body > figure.article-figure.breakout.fig-plate > img,
  div.article-body > figure.article-figure.fig-inset.offset > img,
  div.pair-inner.shell > article.pair-major > img,
  main > figure.article-figure.bleed.fig-bleed > img,
  section.cat-lead > div.cat-lead-inner.shell > img){height:auto}
/* op-img-dims:end */
@media (min-width:640px) and (max-width:659px){.colophon-grid:has(> [data-partner]) > [data-partner]:nth-child(odd of [data-partner]):nth-last-child(1 of [data-partner]){grid-column:1/-1!important;flex-basis:100%!important;max-width:none!important}}@media (min-width:720px) and (max-width:979px){.colophon-grid:has(> [data-partner]) > [data-partner]:nth-child(odd of [data-partner]):nth-last-child(1 of [data-partner]){grid-column:1/-1!important;flex-basis:100%!important;max-width:none!important}}