@charset "utf-8";

/* ==========================================================================
   meritweb.com — Specimen
   Palette: 5 named roles. Two saturated members, ~205 degrees apart in hue.
     --paper  ground   #F4F2ED
     --ink    ink      #23211D
     --rust   accent   #B0532C   saturated, hue ~19
     --blue   second   #2E4A8F   saturated, hue ~224
     --ochre  flag     #E4B87A   for use on the two dark grounds
   ========================================================================== */

:root {
  --paper:  #F4F2ED;
  --ink:    #23211D;
  --rust:   #9A4522;
  --blue:   #2E4A8F;
  --ochre:  #E4B87A;

  --panel:  #E8E3D8;
  --mat:    #DFDACE;
  --rule:   #CFC9BC;
  --muted:  #8A8377;
  --meta:   #5E584D;
  --body:   #4A453D;
  --quiet:  #6E6759;

  --font: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;

  --gut: clamp(20px, 4vw, 52px);
  /* Root-relative, not ch: a ch-based measure resolves against each element's
     own font size, so headings at 44px would never be constrained. */
  --measure: 46rem;
  /* Three widths, and only three: the reading column, a wide breakout for
     the interruptions, and full bleed for the coloured grounds. */
  --col: calc(var(--measure) + 2 * var(--gut));
  --wide: min(1180px, calc(100vw - 2 * var(--gut)));
  --maxw: 1560px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.55;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--rust); }

h1, h2, h3, h4 {
  margin: 0;
  letter-spacing: -0.035em;
  line-height: 0.94;
  font-weight: 800;
  text-wrap: balance;
}

::selection { background: var(--ochre); color: var(--ink); }

:focus-visible { outline: 3px solid var(--rust); outline-offset: 2px; }

/* --- layout scaffolding -------------------------------------------------- */

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

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

.bleed { width: 100%; }

.kicker {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rust);
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
}
.kicker a { color: inherit; }
.kicker .ico { color: var(--rust); }

.rule-hard { height: 2px; background: var(--ink); border: 0; margin: 0; }
.rule-thin { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* --- drawn icon system: 24 grid, 1.6 stroke, currentColor ---------------- */

.ico {
  width: 22px;
  height: 22px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.ico--lg { width: 34px; height: 34px; stroke-width: 1.3; }

/* --- the mark: a letterpress sort, face on ------------------------------- */

.sort { display: block; flex: none; }

/* --- masthead ----------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--ink);
  padding-block: 26px 16px;
}
.masthead__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
}
.masthead__meta {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--meta);
  text-align: right;
  line-height: 1.7;
  margin: 0;
}
.wordmark {
  display: block;
  font-size: clamp(46px, 12.4vw, 210px);
  line-height: 0.8;
  letter-spacing: -0.05em;
  font-weight: 800;
  color: var(--ink);
  margin: 6px 0 0;
}
.wordmark:hover { color: var(--ink); }
.wordmark--sm { font-size: clamp(32px, 5.6vw, 58px); margin: 0; }

.standing {
  font-size: 16px;
  line-height: 1.4;
  color: var(--body);
  margin: 0;
  max-width: 42ch;
}

.masthead__lower {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

/* compact masthead used on inner pages */
.masthead--inner { padding-block: 18px 12px; }
.masthead--inner .masthead__top { align-items: flex-end; }

/* --- menu: six places, one to three words each -------------------------- */

.menu { display: flex; gap: clamp(16px, 2.1vw, 32px); flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.menu a {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--rust); }
.menu .ico { width: 21px; height: 21px; }

.menu-toggle, .menu-toggle-label { display: none; }

/* --- footer ------------------------------------------------------------- */

.foot {
  background: var(--blue);
  color: var(--paper);
  padding-block: clamp(30px, 3.4vw, 52px);
  margin-top: clamp(40px, 5vw, 88px);
}
/* an article already ends on the panel band, so it needs no gap before the
   footer \u2014 using the selector this site has a piece about */
main:has(.post-foot) + .foot { margin-top: 0; }
.foot a { color: var(--paper); }
.foot a:hover { color: var(--ochre); }
.foot__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  flex-wrap: wrap;
}
.foot .wordmark { color: var(--paper); font-size: clamp(34px, 7vw, 104px); }
.foot__nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 20px; max-width: 460px; }
.foot__nav a { font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700; }
.foot__line { font-size: 14.5px; margin: 22px 0 0; max-width: 44ch; color: rgba(244,242,237,0.78); }

/* ==========================================================================
   HOMEPAGE — the waterfall
   ========================================================================== */

.fall {
  position: relative;
  padding-block: clamp(36px, 4.6vw, 72px) clamp(46px, 5.6vw, 86px);
}
.fall__inner { position: relative; }

.fall__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: clamp(22px, 3.2vw, 42px);
  transition: color 300ms;
}
.fall__sig {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rust);
  margin: 0;
}
.fall__hint {
  margin-left: auto;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--meta);
}

.fall__line {
  display: block;
  position: relative;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 18px;
  margin-bottom: 20px;
  color: var(--ink);
  transition: color 180ms ease;
}
.fall__line:last-of-type { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.fall__line:hover { color: var(--rust); }
.fall__line::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 0; height: 2px;
  background: var(--rust);
  transition: width 260ms ease;
}
.fall__line:hover::after { width: 100%; }
.fall__line:last-of-type::after { display: none; }
.fall__row { display: flex; align-items: baseline; gap: clamp(10px, 1.4vw, 20px); }
.fall__pt {
  flex: none;
  width: clamp(38px, 4.6vw, 64px);
  font-size: clamp(10.5px, 1vw, 13px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--rust);
  transition: color 300ms;
}
.fall__title { display: block; font-weight: 700; letter-spacing: -0.04em; }
.fall__dek {
  margin: 16px 0 0 clamp(48px, 6vw, 84px);
  max-width: 62ch;
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.5;
  color: var(--body);
  transition: color 300ms;
}
.fall__dek b { color: var(--rust); font-weight: 700; }

.fall__line--1 .fall__title { font-size: clamp(32px, 8.4vw, 150px); line-height: 0.85; }
.fall__line--2 .fall__title { font-size: clamp(25px, 5.2vw, 92px); line-height: 0.9; }
.fall__line--3 .fall__title { font-size: clamp(21px, 3.5vw, 60px); line-height: 0.96; letter-spacing: -0.03em; }
.fall__line--4 .fall__title { font-size: clamp(18px, 2.3vw, 40px); line-height: 1.02; letter-spacing: -0.025em; }
.fall__line--5 .fall__title { font-size: clamp(16px, 1.5vw, 26px); line-height: 1.15; letter-spacing: -0.015em; font-weight: 700; max-width: 46ch; }
.fall__line--6 .fall__title { font-size: 17px; line-height: 1.4; letter-spacing: 0; font-weight: 500; max-width: 68ch; }

/* lit state removed — the waterfall answers hover in type, not in ground */

/* the sections, in pictures — static, always visible, no hover reveal */
.plates { padding-block: 0 clamp(30px, 3.6vw, 58px); }
.plates__row {
  display: grid;
  /* 6 plates: 3 across fills exactly in two rows, 2 across in three.
     Fixed tracks, so no tile stretches and no cell is left painting the mat. */
  grid-template-columns: repeat(3, calc((100% - 4px) / 3));
  gap: 2px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (max-width: 700px) {
  .plates__row { grid-template-columns: repeat(2, calc((100% - 2px) / 2)); }
}
.plate { display: block; position: relative; background: var(--mat); }
.plate img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.plate__label {
  display: block;
  background: var(--ink);
  color: var(--paper);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 10px 12px;
}
.plate:hover .plate__label { background: var(--rust); }

/* --- band: the lead read ------------------------------------------------ */

.lead-read { position: relative; margin-top: 0; }
.lead-read__img { position: relative; width: 100%; height: clamp(320px, 72vh, 720px); background: var(--mat); }
.lead-read__img img { width: 100%; height: 100%; object-fit: cover; }

/* Four kit images are drawn artefacts — a specimen sheet, two wordmarks, a
   variable-font poster. They are shown whole on an ink ground, never cropped. */
.lead-read__img img[data-photo-slot="guide-a-lowercase-g"],
.article-figure img[data-photo-slot="guide-a-lowercase-g"],
.article-figure img[data-photo-slot="guide-figma-and-the-argument"],
.article-figure img[data-photo-slot="guide-where-styles-belong"],
.sec-lead__img img[data-photo-slot="guide-a-lowercase-g"],
.sec-lead__img img[data-photo-slot="guide-figma-and-the-argument"] {
  object-fit: contain;
  background: #17161A;
}
.fig-bleed img[data-photo-slot="guide-a-lowercase-g"],
.fig-bleed img[data-photo-slot="guide-figma-and-the-argument"],
.fig-bleed img[data-photo-slot="guide-where-styles-belong"] {
  height: clamp(220px, 44vh, 440px);
}
.fig-mat img[data-photo-slot="guide-a-lowercase-g"],
.fig-mat img[data-photo-slot="guide-figma-and-the-argument"],
.fig-inset img[data-photo-slot="guide-a-lowercase-g"],
.fig-inset img[data-photo-slot="guide-figma-and-the-argument"],
.fig-plate img[data-photo-slot="guide-a-lowercase-g"] {
  aspect-ratio: 16 / 10;
}
.lead-read__plate {
  position: absolute;
  left: 0; bottom: 0;
  width: min(760px, 68%);
  background: var(--paper);
  padding: clamp(20px, 2.4vw, 36px) clamp(22px, 2.6vw, 40px);
}
.lead-read__plate h2 {
  font-size: clamp(24px, 3.4vw, 58px);
  line-height: 0.96;
  margin: 0 0 14px;
}
.lead-read__plate h2 a { color: var(--ink); }
.lead-read__plate h2 a:hover { color: var(--rust); }
.lead-read__plate p:not(.kicker) { margin: 0; font-size: clamp(15px, 1.2vw, 17.5px); line-height: 1.5; color: var(--body); max-width: 52ch; }

/* --- band: live specimen ------------------------------------------------ */

.specimen { background: var(--panel); padding-block: clamp(30px, 4.2vw, 62px); }
.specimen__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.specimen__axis { font-size: 12px; letter-spacing: 0.08em; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--body); }
.specimen__word {
  font-size: clamp(42px, 12.6vw, 190px);
  line-height: 0.82;
  letter-spacing: -0.05em;
  font-variation-settings: "wght" 400, "opsz" 48;
  margin: 0;
}
.specimen__ctl { display: flex; align-items: center; gap: 20px 40px; margin-top: 26px; flex-wrap: wrap; }
.specimen__ctl p:not(.kicker) { margin: 0; padding: 6px 0 6px clamp(0px, 2vw, 30px); font-size: 14px; line-height: 1.45; color: var(--meta); max-width: 46ch; }
.specimen__ctl label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--rust); }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  background: transparent;
  width: min(340px, 100%);
  height: 18px;
  cursor: ew-resize;
}
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--rust); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -7px; background: var(--rust); border: 0; }
input[type="range"]::-moz-range-track { height: 2px; background: var(--rust); }
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; background: var(--rust); border: 0; border-radius: 0; }

/* --- band: seconds (a short, unequal selection) ------------------------- */

.seconds { padding-block: clamp(34px, 4.4vw, 74px) clamp(20px, 2.4vw, 36px); }
.seconds__band {
  font-size: clamp(17px, 1.7vw, 24px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: clamp(24px, 2.6vw, 40px);
}
.seconds__grid { display: flex; gap: clamp(24px, 3.4vw, 56px); flex-wrap: wrap; align-items: flex-start; }
.seconds__major { flex: 1.7 1 min(100%, 460px); }
.seconds__major .kicker { margin-bottom: 12px; }
.seconds__major h3 { margin: 0 0 22px; }
.seconds__major .fig-mat { max-width: none; padding-inline: 0; margin-bottom: 0; }
.seconds__major .fig-mat img { aspect-ratio: 16 / 10; object-fit: cover; }
.seconds__minor { flex: 1 1 min(100%, 280px); display: flex; flex-direction: column; justify-content: space-between; gap: 36px; }
.seconds h3 { font-size: clamp(22px, 2.8vw, 44px); line-height: 0.98; margin: 0 0 12px; }
.seconds h4 { font-size: clamp(17px, 1.5vw, 25px); line-height: 1.08; margin: 0 0 8px; letter-spacing: -0.025em; }
.seconds h3 a, .seconds h4 a { color: var(--ink); }
.seconds h3 a:hover, .seconds h4 a:hover { color: var(--rust); }
.seconds p:not(.kicker) { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--body); max-width: 58ch; }
.seconds__minor > div { border-top: 1px solid var(--rule); padding: 22px 0 4px; }
.seconds__minor > div:first-child { border-top: 2px solid var(--ink); }
.seconds__minor .kicker { margin: 0 0 10px; }
.seconds__minor h4 { margin: 0 0 11px; }
.seconds__minor p:not(.kicker) { font-size: 15.5px; line-height: 1.5; }

/* --- band: the chronology strip ----------------------------------------- */

.chrono { padding-block: clamp(30px, 4vw, 66px) clamp(24px, 3vw, 44px); }
.chrono__strip { display: flex; flex-wrap: wrap; border-top: 2px solid var(--ink); margin-left: -15px; }
.chrono__cell { flex: 1 1 132px; padding: 0 14px; border-left: 1px solid var(--rule); }
.chrono__tick { display: block; width: 12px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; color: var(--ink); }
.chrono__yr { font-size: clamp(19px, 2.4vw, 36px); line-height: 0.92; letter-spacing: -0.035em; font-weight: 800; margin: 2px 0 6px; }
.chrono__what { font-size: 14px; line-height: 1.35; font-weight: 700; display: block; }
.chrono__note { font-size: 12.5px; line-height: 1.4; color: var(--meta); display: block; }
.chrono__cell--live .chrono__tick, .chrono__cell--live .chrono__yr { color: var(--blue); }
.chrono__cell--open .chrono__tick, .chrono__cell--open .chrono__yr { color: var(--muted); }
.chrono__foot { font-size: 14px; color: var(--meta); margin: 20px 0 0; max-width: 58ch; }

/* --- band: a quiet line ------------------------------------------------- */

.quiet-line { padding-block: clamp(36px, 5vw, 84px) clamp(24px, 3vw, 46px); }
.quiet-line p {
  font-size: clamp(21px, 2.6vw, 42px);
  line-height: 1.16;
  letter-spacing: -0.025em;
  font-weight: 500;
  margin: 0;
  max-width: 34ch;
}

/* ==========================================================================
   SUPPORTERS — 12 slots, names as type, uneven mosaic.
   Count-agnostic: auto-fit + a movable .sponsor--wide class. No positional CSS.
   ========================================================================== */

.supporters { padding-block: clamp(28px, 3.4vw, 56px) clamp(28px, 3.4vw, 52px); }
.supporters__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.supporters__head h2 { font-size: clamp(18px, 1.8vw, 27px); line-height: 1.1; letter-spacing: -0.02em; }
.supporters__mosaic {
  display: grid;
  /* Constant tile width, computed to fill the row exactly. Not a fractional
     track: a row holding one slot keeps the same tile width as any other. */
  grid-template-columns: repeat(6, calc((100% - 10px) / 6));
  grid-auto-rows: 86px;
  grid-auto-flow: row dense;
  gap: 2px;
  background: var(--rule);
  border: 1px solid var(--rule);
  justify-content: start;
  align-content: start;
}
.sponsor {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  background: var(--ink);
  color: var(--paper);
  padding: 14px 16px;
  grid-column: span 1;
  grid-row: span 1;
  overflow: hidden;
}
.sponsor:hover { background: var(--blue); color: var(--paper); }
.sponsor .sponsor-name {
  font-size: 19px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: block;
}
.sponsor .sponsor-blurb {
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(244,242,237,0.72);
  display: block;
}
.sponsor:hover .sponsor-blurb { color: rgba(244,242,237,0.85); }
.sponsor--wide { grid-column: span 2; }
.sponsor--wide .sponsor-name { font-size: 23px; }
.sponsor--tall { grid-row: span 2; justify-content: flex-start; gap: 12px; }
.sponsor--tall .sponsor-name { font-size: 21px; }

@media (max-width: 1100px) {
  .supporters__mosaic { grid-template-columns: repeat(3, calc((100% - 4px) / 3)); }
}
@media (max-width: 640px) {
  .supporters__mosaic { grid-template-columns: repeat(2, calc((100% - 2px) / 2)); grid-auto-rows: 96px; }
  .sponsor .sponsor-name { font-size: 16px; }
  .sponsor--wide .sponsor-name, .sponsor--tall .sponsor-name { font-size: 18px; }
}

/* ==========================================================================
   SECTION (category) PAGES
   ========================================================================== */

.sec-open { padding-block: clamp(30px, 4vw, 60px) clamp(20px, 2.6vw, 38px); }
.sec-open h1 { font-size: clamp(32px, 7.4vw, 132px); line-height: 0.86; max-width: 23ch; margin: 12px 0 0; }
.sec-open__foot {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 30px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 14px; border-top: 2px solid var(--ink);
}
.sec-open__foot p:not(.kicker) { margin: 0; max-width: 48ch; font-size: 16px; line-height: 1.5; color: var(--body); }

.sec-lead { background: var(--blue); color: var(--paper); display: flex; flex-wrap: wrap; align-items: stretch; }
.sec-lead__text { flex: 1 1 min(100%, 440px); padding: clamp(28px, 4.2vw, 68px) clamp(22px, 2.8vw, 48px); }
.sec-lead__text .kicker { color: var(--ochre); }
.sec-lead__text .kicker .ico { color: var(--ochre); }
.sec-lead__text h2 { font-size: clamp(26px, 4.2vw, 66px); line-height: 0.94; margin: 0 0 18px; }
.sec-lead__text h2 a { color: var(--paper); }
.sec-lead__text h2 a:hover { color: var(--ochre); }
.sec-lead__text p:not(.kicker) { font-size: clamp(15.5px, 1.2vw, 18px); line-height: 1.55; margin: 0 0 22px; max-width: 52ch; color: rgba(244,242,237,0.9); }
.sec-lead__img { flex: 1 1 min(100%, 360px); position: relative; min-height: clamp(240px, 42vh, 480px); }
.sec-lead__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.more {
  display: inline-block;
  font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
  border-bottom: 2px solid currentColor; padding-bottom: 2px;
}
.sec-lead__text .more { color: var(--ochre); }

/* the section's own roster — dense on purpose, this is where it belongs */
.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list li { border-top: 1px solid var(--rule); }
.cat-list li:first-child { border-top: 2px solid var(--ink); }
.cat-list a { display: block; padding: 18px 0; color: var(--ink); }
.cat-list a:hover { color: var(--rust); }
.cat-list .ct { display: block; font-size: clamp(19px, 2.1vw, 30px); line-height: 1.04; font-weight: 700; letter-spacing: -0.025em; }
.cat-list .cd { display: block; margin-top: 7px; font-size: 15px; line-height: 1.45; color: var(--body); max-width: 70ch; }

.sec-body { padding-block: clamp(30px, 4vw, 62px) 0; }
.sec-body h2 { font-size: clamp(20px, 2.2vw, 32px); margin-bottom: 18px; }

/* ==========================================================================
   ARTICLE PAGES
   ========================================================================== */

.post-open { padding-block: clamp(28px, 3.8vw, 58px) clamp(18px, 2.2vw, 32px); }
.post-open .wrap--tight, .post-foot .wrap--tight { max-width: var(--col); }
.post-open h1 { font-size: clamp(30px, 5.4vw, 72px); line-height: 0.9; max-width: 22ch; margin: 0 0 20px; }
.lead {
  font-size: clamp(17.5px, 1.6vw, 22px);
  line-height: 1.42;
  font-weight: 500;
  color: var(--body);
  max-width: 56ch;
  margin: 0;
}
.byline {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--rule);
  font-size: 13.5px; letter-spacing: 0.05em; color: var(--meta);
}
.byline strong { color: var(--ink); font-weight: 700; letter-spacing: 0; }

.post-body { padding-block: clamp(28px, 3.4vw, 52px) 0; max-width: var(--col); margin-inline: auto; }

/* wide breakout — the interruptions step outside the reading column */
.post-body > .callout,
.post-body > .timeline,
.post-body > .statrow,
.post-body > .tablewrap,
.post-body > .chart,
.post-body > .gallery,
.post-body > .map-figure,
.post-body > .profile-grid,
.post-body > .org-grid,
.post-body > .fig-mat {
  width: var(--wide);
  max-width: none;
  margin-inline: calc((100% - var(--wide)) / 2);
}

/* full bleed — the coloured grounds and the lead photograph */
.post-body > .pullquote,
.post-body > .fig-plate,
.fig-bleed {
  width: 100vw;
  max-width: none;
  margin-inline: calc((100% - 100vw) / 2);
}
.post-body > p,
.post-body > h2,
.post-body > h3,
.post-body > ul:not(.timeline),
.post-body > ol:not(.timeline) {
  max-width: var(--measure);
  margin-inline: 0;
  padding-inline: var(--gut);
}
.post-body > p { font-size: 19px; line-height: 1.62; color: #2A2721; margin: 0 0 24px; }
.post-body > h2 {
  font-size: clamp(23px, 3vw, 44px);
  line-height: 1.0;
  margin: 46px 0 16px;
  letter-spacing: -0.03em;
}
.post-body > h2::before {
  content: "";
  display: block;
  width: 46px; height: 3px;
  background: var(--rust);
  margin-bottom: 16px;
}
.post-body > ul:not(.timeline), .post-body > ol:not(.timeline) { margin: 0 0 24px; padding-left: calc(var(--gut) + 20px); }
.post-body > ul li, .post-body > ol li { margin-bottom: 8px; line-height: 1.55; }
.post-body a { border-bottom: 1px solid rgba(46,74,143,0.35); }.post-body a:hover { border-bottom-color: var(--rust); }

.dropcap::first-letter {
  float: left;
  font-size: 5.4em;
  line-height: 0.72;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--rust);
  margin: 0.06em 0.08em 0 0;
}

.entity-ref { font-weight: 700; white-space: nowrap; }

/* ==========================================================================
   THE FIGURE SYSTEM — four treatments, one drawing system.
   Shared: rust hairline over the caption, kicker-cased caption, quiet credit.
   ========================================================================== */

.article-figure { margin: 0 0 34px; }
.article-figure img { width: 100%; }
.article-figure figcaption {
  font-size: 15.5px;
  line-height: 1.42;
  color: var(--ink);
  padding-top: 10px;
  margin-top: 12px;
  border-top: 2px solid var(--rust);
  max-width: 54ch;
}
.article-figure .credit {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--meta);
  font-weight: 400;
}

/* 1 — full bleed, caption as a full-row band under the image */
.fig-bleed { margin: 0 0 40px; }
.fig-bleed img { height: clamp(260px, 58vh, 620px); object-fit: cover; }
.fig-bleed figcaption {
  max-width: none;
  margin: 12px 0 0;
  padding: 12px var(--gut) 0;
  border-top: 0;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 40px;
  flex-wrap: nowrap;
}
.fig-bleed figcaption::before {
  content: "";
  position: absolute; top: 0;
  left: var(--gut); right: var(--gut);
  height: 3px; background: var(--rust);
}
.fig-bleed .credit { margin-top: 0; flex: none; text-align: right; }

/* 2 — matted, drawn corner brackets, breaks the measure */
.fig-mat { margin: 0 0 40px; }
.fig-mat__frame { position: relative; background: var(--mat); padding: clamp(12px, 1.6vw, 26px); }
.fig-mat__frame svg {
  position: absolute; width: 20px; height: 20px;
  stroke: var(--rust); fill: none; stroke-width: 1.6;
}
.fig-mat__frame svg:first-of-type { top: 7px; left: 7px; }
.fig-mat__frame svg:last-of-type { bottom: 7px; right: 7px; }
.fig-mat figcaption {
  max-width: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 40px;
  flex-wrap: nowrap;
}
.fig-mat .credit { margin-top: 0; flex: none; text-align: right; }

/* 3 — inset in the column, narrower than the measure */
.fig-inset {
  max-width: 560px;
  margin: 0 0 36px;
  padding-inline: var(--gut);
}
.fig-inset img { border: 1px solid var(--rule); }
.fig-inset figcaption { font-size: 14.5px; max-width: none; }

/* 4 — a tinted plate in a palette colour, caption reversed out */
.fig-plate {
  background: var(--blue);
  color: var(--paper);
  padding: clamp(20px, 2.6vw, 40px) 0;
  margin: 0 0 40px;
}
.fig-plate__inner {
  max-width: 1180px; margin: 0 auto;
  padding-inline: var(--gut);
  display: flex; gap: clamp(18px, 2.4vw, 36px); flex-wrap: wrap; align-items: flex-end;
}
.fig-plate__inner > div:first-child { flex: 1.7 1 min(100%, 380px); }
.fig-plate figcaption {
  flex: 1 1 min(100%, 240px);
  color: var(--paper);
  border-top-color: var(--ochre);
  max-width: 40ch;
}
.fig-plate .credit { color: rgba(244,242,237,0.6); }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  max-width: 1180px;
  margin: 0 auto 36px;
  padding-inline: var(--gut);
}
.gallery figure { margin: 0; display: flex; flex-direction: column; }
.gallery img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.gallery figcaption {
  font-size: 13.5px; line-height: 1.4; padding-top: 8px; margin-top: 8px;
  border-top: 2px solid var(--rust); color: var(--ink);
}

.map-figure { max-width: 1180px; margin: 0 auto 36px; padding-inline: var(--gut); }
.map-figure .map-slot { width: 100%; aspect-ratio: 16 / 9; background: var(--mat); border: 1px solid var(--rule); }
.map-figure figcaption {
  font-size: 15px; padding-top: 10px; margin-top: 10px;
  border-top: 2px solid var(--rust); max-width: 54ch;
}

/* ==========================================================================
   COMPONENTS — the interruptions. No side rail anywhere.
   ========================================================================== */

/* .pullquote — full width, breaks the measure entirely */
.pullquote {
  margin: 0 0 40px;
  padding: clamp(28px, 3.6vw, 60px) 0;
  background: var(--ochre);
  color: var(--ink);
}
.pullquote p {
  max-width: 1180px; margin: 0 auto;
  padding-inline: var(--gut);
  font-size: clamp(21px, 3.4vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 700;
}

.blockquote {
  max-width: 900px;
  margin: 0 0 36px;
  padding: 0 var(--gut);
  border-left: 0;
}
.blockquote p {
  font-size: clamp(18px, 1.9vw, 26px);
  line-height: 1.3;
  font-weight: 500;
  margin: 0 0 12px;
  padding-left: 22px;
  border-left: 3px solid var(--blue);
  letter-spacing: -0.015em;
}
.blockquote cite {
  display: block;
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rust);
  padding-left: 25px;
}

/* .callout — a plate that breaks the measure, ink on panel */
.callout {
  max-width: 1180px;
  margin: 0 auto 38px;
  padding-inline: var(--gut);
}
.callout > div, .callout > p, .callout > ul {
  background: var(--panel);
  border-top: 3px solid var(--ink);
  padding: clamp(18px, 2vw, 30px);
  margin: 0;
}
.callout h3 {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700; color: var(--rust); margin: 0 0 14px;
  display: flex; align-items: center; gap: 8px;
}
.callout ul { list-style: none; }
.callout li {
  font-size: 16.5px; line-height: 1.45;
  padding: 11px 0 11px 22px;
  border-top: 1px solid var(--rule);
  position: relative;
}
.callout li:first-child { border-top: 0; padding-top: 0; }
.callout li::before {
  content: "";
  position: absolute; left: 0; top: 18px;
  width: 10px; height: 2px; background: var(--rust);
}
.callout li:first-child::before { top: 7px; }
.callout li b, .callout li strong { font-weight: 700; }
.callout code { font-size: 0.92em; background: var(--mat); padding: 1px 5px; }

.note {
  max-width: var(--measure) !important;
  margin: 0 var(--gut) 28px !important;
  padding: 14px 0 14px 20px;
  border-left: 3px solid var(--ochre);
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--quiet);
}

/* .statrow / .statblock — standout numbers, full width */
.statrow {
  max-width: 1180px;
  margin: 0 auto 38px;
  padding-inline: var(--gut);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
}
.statblock {
  padding: 18px 18px 18px 16px;
  border-left: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.statrow .statblock:first-child { border-left: 0; padding-left: 0; }
.stat-num {
  font-size: clamp(28px, 3.4vw, 50px);
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--blue);
}
.stat-label { font-size: 13.5px; line-height: 1.35; color: var(--body); }

/* .timeline — a drawn chronology: years hanging in the left margin, a
   continuous ink spine, a rust tick reaching from the spine to each entry.
   One column of rows, so long multi-word labels wrap without breaking the
   spine and there is no wrapped-row alignment to keep in sync. */
.timeline {
  position: relative;
  list-style: none;
  max-width: 1180px;
  margin: 0 auto 40px;
  padding: 4px var(--gut) 6px;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 16px;
  left: calc(var(--gut) + 8.5rem + 13px);
  width: 2px;
  background: var(--ink);
}
.timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  column-gap: 58px;
  padding: 12px 0 16px;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: calc(8.5rem + 15px);
  top: 21px;
  width: 24px;
  height: 2px;
  background: var(--rust);
}
.t-when {
  display: block;
  text-align: right;
  font-size: clamp(16px, 1.7vw, 21px);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--rust);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.t-what {
  display: block;
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--ink);
  padding-top: 1px;
}

/* tables */
.versus, .datatable {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.tablewrap {
  max-width: 1180px;
  margin: 0 auto 38px;
  padding-inline: var(--gut);
  overflow-x: auto;
}
.versus th, .datatable th {
  text-align: left;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 10px 14px 10px 0;
  border-bottom: 2px solid var(--ink);
  vertical-align: bottom;
}
.versus td, .datatable td {
  padding: 13px 14px 13px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  line-height: 1.4;
}
.versus tbody th, .datatable tbody th {
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
  color: var(--ink);
  padding: 13px 20px 13px 0;
  white-space: normal;
  vertical-align: top;
}
.datatable caption, .versus caption {
  caption-side: top;
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rust);
  padding-bottom: 12px;
}

/* charts */
.chart { max-width: 1180px; margin: 0 auto 38px; padding-inline: var(--gut); }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart figcaption {
  font-size: 14px; line-height: 1.4; color: var(--body);
  padding-top: 10px; margin-top: 10px; border-top: 2px solid var(--rust);
  max-width: 56ch;
}
.chart .bar-r { fill: var(--blue); }
.chart .bar-alt { fill: var(--rust); }
.chart .axis { stroke: var(--rule); stroke-width: 1; }
.chart .lbl { font-size: 12px; fill: var(--body); font-weight: 600; }
.chart .val { font-size: 12px; fill: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.chart .ln { fill: none; stroke: var(--blue); stroke-width: 2.5; }
.chart .dot { fill: var(--rust); }
.chart.donut svg { width: 220px; flex: none; }
.chart.donut .legend { display: flex; flex-direction: column; gap: 10px; }
.chart.donut .legend > div { display: flex; gap: 10px; align-items: flex-start; }
.chart.donut .legend span:first-child { margin-top: 4px; }

/* cards */
.profile-grid, .org-grid, .further-grid {
  max-width: 1180px;
  margin: 0 auto 38px;
  padding-inline: var(--gut);
  display: grid;
  gap: 16px;
}
.profile-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.org-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.further-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.profile-card {
  background: var(--panel);
  border-top: 3px solid var(--blue);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}
.profile-card .p-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 4px; }
.profile-card h3 { font-size: 21px; line-height: 1.05; letter-spacing: -0.02em; }
.profile-card .p-role { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--rust); margin: 0; }
.profile-card p:not(.p-role):not(.p-attr):not(.p-links) { margin: 0; font-size: 15px; line-height: 1.45; color: var(--body); }
.profile-card .p-links { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 700; }
.profile-card .p-attr { font-size: 12.5px; color: var(--meta); margin: 0; }
.profile-card.no-photo { border-top-color: var(--rust); }

.org-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 14px;
  color: var(--ink);
  height: 100%;
}
.org-card:hover { border-color: var(--rust); color: var(--ink); }
.org-card .org-logo { max-height: 34px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 6px; }
.org-card .org-name { font-size: 17px; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; }
.org-card .org-host { font-size: 13px; color: var(--meta); margin-top: auto; }
.org-card.no-logo { border-left: 3px solid var(--blue); }

.further-grid a {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  padding: 16px;
  color: var(--ink);
  border-top: 3px solid var(--rust);
  font-size: 17.5px;
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -0.02em;
  min-height: 96px;
}
.further-grid a:hover { background: var(--mat); color: var(--ink); }

/* end of the piece: a panel band, the next pieces set at reading scale */
.related-links { list-style: none; margin: 0; padding: 0; }
.related-links li { border-top: 1px solid var(--rule); }
.related-links li:first-child { border-top: 2px solid var(--ink); }
.related-links a {
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: 16px;
  align-items: start;
  padding: 17px 0;
  font-size: clamp(19px, 2vw, 27px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--ink);
}
.related-links a::before {
  content: "";
  width: 24px; height: 2px;
  background: var(--rust);
  margin-top: 0.52em;
}
.related-links a:hover { color: var(--rust); }
.related-links a:hover::before { background: var(--ink); }

.post-foot {
  margin-top: clamp(34px, 4vw, 64px);
  padding-block: clamp(26px, 3.2vw, 50px) clamp(28px, 3.4vw, 54px);
  background: var(--panel);
  border-top: 2px solid var(--ink);
}
.post-foot .wrap--tight { max-width: var(--col); }
.post-foot h2 {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rust);
  margin-bottom: 18px;
}
.post-foot .more { margin-top: 4px; }

/* archive */
.arch-open { padding-block: clamp(28px, 3.6vw, 56px) clamp(16px, 2vw, 28px); }
.arch-open h1 { font-size: clamp(30px, 6.6vw, 116px); line-height: 0.86; max-width: 22ch; }
.arch-group { padding-block: clamp(22px, 2.6vw, 40px) 0; }
.arch-group > h2 {
  font-size: clamp(18px, 1.9vw, 28px);
  line-height: 1.08;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.arch-group > h2 .ico { color: var(--rust); }

/* simple pages */
.page-open { padding-block: clamp(28px, 3.6vw, 56px) clamp(16px, 2vw, 26px); }
.page-open h1 { font-size: clamp(30px, 6.2vw, 96px); line-height: 0.88; max-width: 22ch; }
.page-body { padding-block: clamp(20px, 2.6vw, 36px) 0; }
.page-body p:not(.lead) { max-width: var(--measure); margin: 0 auto 22px; padding-inline: var(--gut); font-size: 18.5px; line-height: 1.6; }
.page-body h2 { max-width: var(--measure); margin: 34px auto 14px; padding-inline: var(--gut); font-size: clamp(21px, 2.4vw, 32px); }

/* styleguide only */
.sg-band { padding-block: 30px; border-top: 1px solid var(--rule); }
.sg-band > h2 {
  font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--rust); margin-bottom: 18px;
}
.sg-narrow {
  width: 360px; max-width: 100%;
  border: 1px dashed var(--muted);
  padding-block: 12px;
  overflow: hidden;
  resize: horizontal;
  container-type: inline-size;
}

/* The site writes about container queries, so it uses one: any narrow
   container — not just a narrow window — gets the stacked treatment. */
@container (max-width: 520px) {
  .timeline::before, .timeline li::before { display: none; }
  .timeline li { grid-template-columns: 1fr; column-gap: 0; padding: 12px 0 14px; border-top: 1px solid var(--rule); }
  .t-when { text-align: left; margin-bottom: 5px; }
  .chrono__cell { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); }
  .chrono__strip { margin-left: 0; }
  .statrow { grid-template-columns: 1fr 1fr; }
  .supporters__mosaic { grid-template-columns: repeat(2, calc((100% - 2px) / 2)); }
}

/* ==========================================================================
   NARROW SCREENS
   ========================================================================== */

@media (max-width: 860px) {
  body { font-size: 17px; }

  .masthead { padding-block: 14px 12px; }
  .masthead__top { align-items: center; }
  .masthead .wordmark { font-size: 34px; margin: 0; }
  .masthead__meta { display: none; }
  .masthead__lower { margin-top: 12px; padding-top: 0; border-top: 0; }
  .standing { font-size: 14px; max-width: none; }

  .menu-toggle-label {
    display: flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 6px 0;
    cursor: pointer;
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    font-weight: 700; color: var(--rust);
  }
  .menu-toggle-label .ico { width: 26px; height: 20px; stroke-width: 2; }
  .menu {
    display: none;
    flex-direction: column;
    gap: 0;
    width: 100%;
    order: 3;
    margin-top: 12px;
  }
  .menu-toggle:checked ~ nav .menu { display: flex; }
  .menu li { border-top: 1px solid var(--rule); }
  .menu li:first-child { border-top: 2px solid var(--ink); }
  .menu a {
    padding: 13px 0;
    font-size: 16px;
    letter-spacing: 0.1em;
    min-height: 48px;
  }
  .menu .ico { width: 22px; height: 22px; }

  /* fine print, bumped a notch on a phone */
  .masthead__meta, .menu-toggle-label { font-size: 12.5px; }
  .fall__pt { font-size: 12px; }
  .plate__label { font-size: 12.5px; }
  .kicker { font-size: 12.5px; }

  /* inner masthead is a row \u2014 give the open menu its own full-width line
     so the column cannot size itself to max-content and overflow */
  .masthead--inner .masthead__top { flex-wrap: wrap; row-gap: 10px; }
  .masthead--inner .masthead__top nav { flex: 1 0 100%; min-width: 0; }
  .masthead--inner .menu { max-width: 100%; }
  .masthead__lower { flex-wrap: wrap; row-gap: 10px; }
  .masthead__lower nav { flex: 1 0 100%; min-width: 0; }

  .fall__dek { margin-left: 0; }
  .lead-read__plate { position: static; width: 100%; padding-inline: var(--gut); }
  .foot__nav { text-align: left; }
  .foot__row { align-items: flex-start; }
  .dropcap::first-letter { font-size: 3.8em; }
  .post-body > p { font-size: 17.5px; line-height: 1.6; margin-bottom: 22px; }
  .post-body > h2 { margin-top: 40px; }
  .post-body > h2::before { width: 38px; margin-bottom: 13px; }
  .post-open h1 { margin-bottom: 16px; }
  .article-figure { margin-bottom: 30px; }
  .fig-bleed { margin-bottom: 32px; }
  .fig-bleed figcaption, .fig-mat figcaption { flex-direction: column; flex-wrap: wrap; align-items: flex-start; gap: 6px; }
  .fig-bleed .credit, .fig-mat .credit { text-align: left; }
  .pullquote { margin-bottom: 32px; }
  .callout, .statrow, .timeline, .tablewrap, .chart { margin-bottom: 32px; }
  .fig-plate__inner > div:first-child { margin-bottom: 14px; }
  .fig-plate figcaption { padding-inline: 0; }
  .pullquote p { line-height: 1.1; }
  .timeline::before, .timeline li::before { display: none; }
  .timeline li { grid-template-columns: 1fr; column-gap: 0; padding: 12px 0 14px; border-top: 1px solid var(--rule); }
  .timeline li:first-child { border-top: 2px solid var(--ink); }
  .t-when { text-align: left; margin-bottom: 5px; }
  .chrono__cell { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); }
  .chrono__strip { margin-left: 0; }
  .fig-plate__inner { align-items: flex-start; }
  .sg-narrow { width: 100%; }
}

/* Label styles are navigation, not prose. Locked late in the sheet so a
   container's descendant-<p> rule can never win against them: the same
   icon + label must read identically everywhere a section is named. */
p.kicker, span.kicker {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.3;
  color: var(--rust);
}
.sec-lead__text p.kicker, .fig-plate p.kicker { color: var(--ochre); }
p.p-role {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rust);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
  .masthead__lower, .foot__nav, .supporters, .fall__plates { display: none; }
  body { font-size: 11pt; }
}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain}

/* sp-contain-guard: sponsor logos are wordmarks — never object-fit:cover (crops).
   object-fit ONLY. This block used to also set width:auto, padding:4px 10px,
   max-width:calc(100% - 20px) and min/max-height, which overrode Design's own frame and
   let every plate shrink-wrap its logo — the recurring "inconsistent sizing" and
   "lacks padding". Geometry belongs to Design. */
.sponsor img,.sponsor-box img,.sp-logo img{object-fit:contain!important;display:block;margin-left:auto;margin-right:auto;align-self:center}

/* 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}
.supporters__head{flex-wrap:wrap!important}
.supporters__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-row-grow: a fixed grid-auto-rows height is a FLOOR, not a ceiling — copy that
   needed more than it was being cut off mid-sentence. */
.supporters__mosaic{grid-auto-rows:minmax(86px,auto)!important;align-items:stretch!important}
.supporters__mosaic > .sponsor.sponsor{align-self:stretch!important;height:auto!important}

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

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

/* sp-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:start!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
.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-logo-only: the block carries marks and names, nothing that varies in length, so
   every tile is the same height by construction rather than by patching. */
.sponsor.sponsor{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:10px!important;align-self:stretch!important;height:100%!important;min-height:96px!important;padding:16px 14px!important;box-sizing:border-box!important;text-align:center!important}
.sponsor .sp-mark{width:100%!important;height:44px!important;max-height:44px!important;object-fit:contain!important;object-position:center!important;display:block!important;background:#121013!important;padding:8px 10px!important;box-sizing:content-box!important;border-radius:2px;flex:0 0 auto!important}
.sponsor .sponsor-name{font-size:.82em!important;line-height:1.25!important;opacity:.85;overflow-wrap:anywhere}
.sponsor .sponsor-blurb{display:none!important}

/* sp-tier-layout: faults that live on the TIER CONTAINER, which no plate rule can reach —
   tiles in a row finding their own cross-axis position (nalejandria hung one tile 28px
   below its neighbours), a dark plate nested inside a differently-dark tile so every tile
   shows a rectangle inside a rectangle (meritweb), and a grid packed too tight to read a
   wordmark in (cylibris). Container properties only; the marks are untouched. */
.supporters__mosaic.supporters__mosaic img{background:transparent!important}

/* sp-direct-fix: img.sp-mark is box-sizing:content-box with padding:8px 10px, so a computed
   width of 212.66px (exactly its column) rendered a 233px box and overflowed the tile by
   20px. In a centred column flex the overflow goes to one side, putting every mark 10px
   right of centre. One declaration: put the padding inside the width. */
[data-partner] img.sp-mark{box-sizing:border-box!important}

/* op-article-width: the article column was capped at 736px (84 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .post-body > p, .post-body > h2, .post-body > h3, .post-body > ul:not(.timeline), .post-body > ol:not(.timeline)) to ~96 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. The layout has no room to grow above 1600, so this width holds there. Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  div.post-body{--measure:min(890px, 100%)!important}
}
/* op-article-width:end */
/* op-heading-levels */
h1:where(.rt-h2){margin: 0px; letter-spacing: -0.035em; line-height: 0.94; font-weight: 800; text-wrap: balance;}
.lead-read__plate h1:where(.rt-h2){font-size: clamp(24px, 3.4vw, 58px); line-height: 0.96; margin: 0px 0px 14px;}
.lead-read__plate h1:where(.rt-h2) a{color: var(--ink);}
.lead-read__plate h1:where(.rt-h2) a:hover{color: var(--rust);}
/* op-heading-levels:end */