/* ============================================================
   meredithcc.org — "The Fall"
   PALETTE — 5 members, each with a job:
     --ground    #0E1A24  deep lake ink .... primary ground
     --paper     #F2EDE3  warm paper ...... reading ground / ink on dark
     --ink       #0E1A24  ................. type on paper
     --accent    #E0A526  ochre (saturated, h≈42°)  .. signature areas, marks
     --secondary #0D6B5D  pine-teal (saturated, h≈170°) .. section grounds
   The two saturated members sit ~128° apart in hue.
   Ground/ink measure 15.9:1. Accent on ground 8.9:1. Both saturated
   members carry real AREA (the signature band, the islands band).
   ============================================================ */

:root {
  --ground: #0E1A24;
  --ground-2: #17262F;
  --ground-3: #3A4A52;
  --paper: #F2EDE3;
  --paper-2: #E4DCC9;
  --ink: #0E1A24;
  --ink-2: #3E4E56;
  --ink-3: #5C6A72;
  --accent: #E0A526;
  --accent-lt: #F0C468;
  --accent-ink: #7A5205;
  --secondary: #0D6B5D;
  --secondary-dk: #0A5044;
  --secondary-lt: #D6E9E5;
  --on-dark: #F2EDE3;
  --on-dark-2: #B9C6CC;
  --on-dark-3: #8FA0A8;

  --display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --body: 'Spectral', Georgia, serif;
  --label: 'Familjen Grotesk', system-ui, sans-serif;

  --gut: clamp(20px, 4vw, 56px);
  /* the page has a measure of its own: beyond this the ground simply continues */
  --page: 1600px;
  /* supporter tile geometry lives here so .sponsor works outside .supporters too */
  --sup-tile: 316px;
  --sup-gap: 16px;
  --sup-name-fs: 22px;
  --sup-cols: 4;
  --measure: 68ch;
  --rule: 1px solid var(--ground-3);
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--on-dark);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.65;
  overflow-x: hidden;
  text-wrap: pretty;
}

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

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-lt); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.02;
  margin: 0;
  letter-spacing: 0;
}

body > header,
body > main,
body > footer,
body > .sg-head,
body > .sg-sec { max-width: var(--page); margin-inline: auto; }

.wrap { padding-inline: var(--gut); }
.paper { background: var(--paper); color: var(--ink); }
.paper a { color: var(--secondary); }
.paper a:hover { color: var(--accent-ink); }

.kicker {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------- icon system: 24-grid, 1.6 stroke, round caps ---------- */
.ico { width: 1.35em; height: 1.35em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico-lg { width: 46px; height: 46px; stroke-width: 1.4; }

/* ---------- masthead ---------- */
.masthead { padding: 26px var(--gut) 0; }
.masthead-top {
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  justify-content: space-between; align-items: baseline;
  padding-bottom: 10px;
}
.masthead-top .eyebrow { font-family: var(--label); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.masthead-top .standing { font-size: 14px; color: var(--on-dark-3); }

.nameplate {
  display: block;
  border-top: 2px solid var(--on-dark);
  border-bottom: 1px solid var(--on-dark);
  padding: 10px 0 26px;
  color: var(--on-dark);
}
.nameplate:hover { text-decoration: none; color: var(--on-dark); }
.nameplate > span {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  text-transform: lowercase;
  font-size: clamp(44px, 11.2vw, 152px);
  line-height: .84;
  letter-spacing: -.012em;
  white-space: nowrap;
}
.nameplate .dot { display: inline; color: var(--accent); }
.nameplate small {
  display: block;
  font-family: var(--label);
  font-size: clamp(11px, 1.1vw, 14px);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--on-dark-3);
  margin-top: 12px;
}

.mastnav {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 2px solid var(--on-dark);
}
.mastnav a {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 13px 6px;
  font-family: var(--label); font-size: 11.5px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--on-dark);
  border-right: 1px solid var(--ground-3);
  text-align: center;
}
.mastnav a:last-child { border-right: none; }
.mastnav a.quiet { color: var(--on-dark-3); }
.mastnav a:hover { background: var(--ground-2); color: var(--accent); text-decoration: none; }
.mastnav a[aria-current] { background: var(--accent); color: var(--ground); }
.mastnav a[aria-current] .ico { stroke: var(--ground); }

/* ---------- homepage: lead ---------- */
.lead-band { position: relative; margin-top: 40px; }
.lead-band .lead-img { position: relative; }
.lead-band img { width: 100%; height: clamp(340px, 54vh, 660px); object-fit: cover; filter: saturate(.94) contrast(1.04); }
.lead-band .lead-txt { padding: 0 var(--gut); margin-top: -60px; position: relative; }
.lead-inner { background: var(--ground); padding: 30px 34px 4px; max-width: 1080px; }
.lead-inner h1 { font-size: clamp(40px, 6.6vw, 104px); }
.lead-inner .lead { font-family: var(--body); font-size: clamp(18px, 1.7vw, 24px); line-height: 1.5; color: var(--on-dark); max-width: 46ch; margin: 20px 0 0; }
.lead-inner .credit-line { margin-top: 16px; }

.morelink {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--label); font-size: 12.5px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 4px;
}
.morelink:hover { text-decoration: none; }

/* ---------- the emblem band ---------- */
.emblem-band { padding: 66px var(--gut) 0; }
.emblem-band svg.emblem { display: block; width: 100%; height: auto; }
.emblem-band svg.emblem text { font-size: 17px; }
.emblem-band svg.emblem .em-kick { font-size: 13px; }
@media (max-width: 1320px) {
  .emblem-band svg.emblem text { font-size: 21px; }
  .emblem-band svg.emblem .em-kick { font-size: 16px; }
}
@media (max-width: 1000px) {
  /* below this the in-drawing annotation cannot hold its size — the legend carries it */
  .emblem-band svg.emblem .em-anno { display: none; }
}
/* legend, part one: what the drawing shows, in order along the section */
.emblem-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px 34px; margin-top: 24px; padding-top: 18px; border-top: 2px solid var(--ground-3); }
.emblem-parts .pt { font-family: var(--label); font-size: 14px; line-height: 1.45; color: var(--on-dark-2); display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; align-items: start; }
.emblem-parts .pt > span { grid-row: 1 / span 2; font-family: var(--display); font-weight: 600; font-size: 24px; line-height: .9; color: var(--accent); }
.emblem-parts .pt b { display: block; font-size: 15px; font-weight: 600; color: var(--on-dark); margin-bottom: 2px; }

/* legend, part two: keyed to the drawing's own line system */
.emblem-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px 34px; margin-top: 22px; padding-top: 18px; border-top: var(--rule); }
.emblem-legend .lg { font-family: var(--label); font-size: 14px; line-height: 1.45; color: var(--on-dark-2); display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; align-items: start; }
.emblem-legend .lg > span { grid-row: 1 / span 2; padding-top: 3px; }
.emblem-legend .lg b { display: block; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.emblem-legend .lg-sw { width: 48px; height: 16px; display: block; }

/* ---------- section bands ---------- */
.band { padding: 46px 0 74px; }

/* ---- section transitions ----
   Every band opens on a hatched datum rule, the same figure the section drawing
   uses for a water surface, with the section number boxed beneath it. */
.band-head, .sup-head, .signature .inner, .quietband .inner { position: relative; }
.band-head::before, .sup-head::before, .signature .inner::before {
  content: ""; position: absolute; top: 0;
  left: 0; right: 0;
  height: 13px; pointer-events: none;
  border-top: 2px solid var(--datum, var(--accent));
  background: repeating-linear-gradient(-45deg, var(--datum, var(--accent)) 0 1px, transparent 1px 22px);
}
.band-head { padding-top: 44px; }
.sup-head { padding-top: 28px; --datum: var(--ground-3); }
.tealband .band-head { --datum: var(--accent-lt); }
.signature .inner { padding-top: 46px; --datum: var(--ground); }

.band-head { padding-inline: var(--gut); display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: flex-end; justify-content: space-between; }
.band-head h2 { font-size: clamp(34px, 4.6vw, 70px); max-width: 24ch; margin-top: 20px; }
.band-head .band-no {
  font-family: var(--display); font-weight: 600; font-size: 26px; line-height: 1;
  color: var(--accent); border: 2px solid var(--accent);
  width: 62px; height: 62px;
  display: inline-flex; align-items: center; justify-content: center;
}
.band-head p { margin: 0; max-width: 40ch; font-size: 17px; color: var(--on-dark-2); }

.feature-pair { padding-inline: var(--gut); display: grid; grid-template-columns: 1.65fr 1fr; gap: 40px; margin-top: 34px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }

/* story cards — even height, fixed image ratio */
.story { display: flex; flex-direction: column; height: 100%; color: var(--on-dark); }
.story:hover { text-decoration: none; }
.story:hover h3 { color: var(--accent); }
/* homepage images carry the same square-cornered, ochre-ruled, hairline-inset
   treatment as the article plates */
.story .shot, .run .row-shot {
  position: relative; overflow: hidden;
  background: var(--ground-2);
  border-top: 3px solid var(--accent);
}
.story .shot img, .run .row-shot img {
  width: 100%; object-fit: cover;
  outline: 1px solid rgba(242,237,227,.18); outline-offset: -1px;
  transition: transform .5s ease;
}
.story .shot img { aspect-ratio: 4 / 3; }
.story.big .shot img { aspect-ratio: 16 / 9; }
.story:hover .shot img { transform: scale(1.03); }
.story h3 { margin: 16px 0 0; font-size: 26px; }
.story.big h3 { font-size: clamp(28px, 3.2vw, 44px); }
.story p { margin: 10px 0 0; font-size: 16.5px; color: var(--on-dark-2); }
.story.big p { font-size: 18px; max-width: 52ch; }
.story .sect-tag { margin-top: auto; padding-top: 16px; }
.sect-tag { font-family: var(--label); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-3); display: flex; align-items: center; gap: 7px; }

/* dense run: rows, not tiles */
.run { padding-inline: var(--gut); margin-top: 32px; border-top: 2px solid var(--on-dark); }
.run a.row {
  display: grid; grid-template-columns: 78px minmax(0, 1fr) 300px; gap: 22px 34px;
  align-items: start; padding: 32px 20px; margin-inline: -20px;
  border-bottom: var(--rule);
  color: var(--on-dark);
  transition: background .25s ease;
}
.run a.row:hover { text-decoration: none; background: var(--ground-2); }
.run a.row:hover h3 { color: var(--accent); }
.run .numeral {
  font-family: var(--display); font-weight: 600; font-size: 26px; line-height: 1;
  color: var(--accent); border: 2px solid var(--accent);
  width: 62px; height: 62px;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s ease, color .25s ease;
}
.run a.row:hover .numeral { background: var(--accent); color: var(--ground); }
.run h3 { font-size: clamp(24px, 2.6vw, 38px); }
.run h3::before {
  content: ""; display: block; width: 66px; height: 2px;
  background: var(--ground-3); margin-bottom: 18px;
  transition: background .25s ease, width .25s ease;
}
.run a.row:hover h3::before { background: var(--accent); width: 110px; }
.run p { margin: 14px 0 0; font-size: 16.5px; color: var(--on-dark-2); max-width: 56ch; }
.run .row-shot { margin-top: 4px; }
.run .row-shot img { aspect-ratio: 4/3; }

/* signature band — the ochre AREA */
.signature { background: var(--accent); color: var(--ground); padding: 0 0 66px; }
.signature .inner { padding-inline: var(--gut); display: grid; grid-template-columns: 1.25fr 1fr; gap: 44px; align-items: center; }
.signature h2 { font-size: clamp(38px, 5.4vw, 82px); max-width: 22ch; }
.signature .sig-mark { margin-bottom: 20px; }
.signature p { font-size: 18px; max-width: 54ch; }
.signature a { color: var(--ground); border-color: var(--ground); }
.signature img { width: 100%; aspect-ratio: 5/4; object-fit: cover; border: 1px solid var(--ground); }
.signature figcaption { font-family: var(--label); font-size: 13.5px; margin-top: 10px; color: #4A3A0C; }

/* islands band — the teal AREA */
.tealband { background: var(--secondary); color: var(--on-dark); padding: 46px 0 74px; }
.tealband .band-head p { color: var(--secondary-lt); }
.tealband .band-head .band-no { color: var(--accent-lt); border-color: var(--accent-lt); }
.tealband .story p { color: var(--secondary-lt); }
.tealband .sect-tag { color: var(--secondary-lt); }
.tealband a.morelink { color: var(--paper); border-color: var(--accent-lt); }
.tealband a.morelink:hover { color: var(--accent-lt); }

/* quiet band */
.quietband { padding: 46px 0; border-top: var(--rule); border-bottom: var(--rule); }
.quietband .inner { padding-inline: var(--gut); display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: baseline; justify-content: space-between; }
.quietband h2 { font-size: clamp(28px, 3.4vw, 46px); max-width: 26ch; }
.quietband p { margin: 0; flex: 1 1 280px; font-size: 17px; color: var(--on-dark-2); max-width: 48ch; }

/* ============ FIGURE SYSTEM — three treatments, one drawing system ============
   .fig-bleed  full-bleed band, caption in a paper panel stepped over the image
   .fig-plate  photograph on a paper mat, inset hairline + ochre corner brackets
   .fig-inset  in-column figure, caption offset into the margin under a teal rule
   Shared: square corners, ochre bracket marks, caption in label face with a
   hanging kicker, credit smaller and quieter beneath.
   ============================================================================ */
figure { margin: 0; }

.article-figure figcaption,
.fig-bleed figcaption,
.fig-plate figcaption,
.fig-inset figcaption { font-family: var(--label); }

.credit-line {
  display: block;
  font-family: var(--label);
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--on-dark-3);
  margin-top: 6px;
}
.paper .credit-line, .fig-plate .credit-line, .signature .credit-line { color: var(--ink-3); }

/* 1 — bleed. As an article hero it breaks the wrapper's gutter but stays
   inside the page measure, so it lines up with the masthead and the body. */
.artwrap > .fig-hero { margin: 44px calc(-1 * var(--gut)) 0; }
.fig-bleed { position: relative; margin: 54px 0; }
.fig-bleed img { width: 100%; height: clamp(280px, 46vh, 560px); object-fit: cover; }
.artbody > .fig-bleed figcaption { margin-inline: 0; }
.fig-bleed figcaption {
  position: relative; margin: -34px var(--gut) 0 var(--gut);
  background: var(--paper); color: var(--ink);
  padding: 22px 26px; max-width: 560px;
  border-top: 4px solid var(--accent);
  font-size: 16px; line-height: 1.5;
}
.fig-bleed figcaption .cap-kicker { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--secondary); margin-bottom: 8px; }

/* 2 — plate */
.fig-plate { background: var(--paper); color: var(--ink); padding: 22px; margin: 48px 0; position: relative; }
.fig-plate::before, .fig-plate::after {
  content: ""; position: absolute; width: 26px; height: 26px; border: 2px solid var(--accent);
}
.fig-plate::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.fig-plate::after { bottom: 8px; right: 8px; border-left: none; border-top: none; }
.fig-plate img { width: 100%; aspect-ratio: 16/10; object-fit: cover; outline: 1px solid rgba(14,26,36,.35); outline-offset: -1px; }
.fig-plate figcaption { margin-top: 16px; font-size: 16px; line-height: 1.5; padding-left: 18px; border-left: 2px solid var(--secondary); }
.fig-plate figcaption .cap-kicker { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--secondary); margin-bottom: 6px; }

/* 3 — inset, caption offset into the margin */
.fig-inset { margin: 44px 0; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.fig-inset img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 1px solid var(--ground-3); }
.fig-inset figcaption { border-top: 2px solid var(--secondary); padding-top: 12px; font-size: 15.5px; line-height: 1.5; color: var(--on-dark-2); }
.paper .fig-inset figcaption { color: var(--ink-2); }
.fig-inset figcaption .cap-kicker { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.paper .fig-inset figcaption .cap-kicker { color: var(--accent-ink); }

/* generic .article-figure (styleguide component) — plate treatment */
.article-figure { background: var(--paper); color: var(--ink); padding: 20px; margin: 40px 0; }
.article-figure img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.article-figure figcaption { margin-top: 14px; font-size: 16px; padding-left: 16px; border-left: 2px solid var(--secondary); }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 40px 0; }
.gallery figure { background: var(--ground-2); }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.gallery figcaption { font-family: var(--label); font-size: 13.5px; padding: 10px 12px; color: var(--on-dark-2); }

/* map frame — styled only; this site injects no maps */
.map-figure { background: var(--paper); color: var(--ink); padding: 20px; margin: 40px 0; }
.map-figure .map-slot { aspect-ratio: 16/10; background: var(--paper-2); outline: 1px solid rgba(14,26,36,.3); outline-offset: -1px; }
.map-figure figcaption { font-family: var(--label); margin-top: 14px; font-size: 16px; padding-left: 16px; border-left: 2px solid var(--secondary); }

/* ============ SUPPORTERS ============
   Woven singles and pairs between the homepage's bands: 4 groups of 3,
   each under its own sub-label. Every tile is a constant width — the grid
   never stretches a slot. Prominence would be a class, never a position.
   ============================================================ */
.supporters { padding: 30px 0 38px; }
.supporters .sup-head { padding-inline: var(--gut); display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; }
.supporters .sup-head h2 { font-family: var(--label); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: none; color: var(--accent); }
.supporters .sup-head p { margin: 0; font-family: var(--label); font-size: 13px; color: var(--on-dark-3); }
/* a group is three tiles wide and sits at that measure, so the band never
   reads as a full-width row with a short run of tiles in it */

.sponsor-grid {
  padding-inline: var(--gut);
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--sup-tile));
  gap: var(--sup-gap);
  justify-content: start;
  max-width: calc(var(--sup-cols) * var(--sup-tile) + (var(--sup-cols) - 1) * var(--sup-gap) + 2 * var(--gut));
}
.sponsor {
  display: flex; flex-direction: column;
  width: var(--sup-tile);
  background: var(--ground-2);
  border: 1px solid var(--ground-3);
  padding: 16px 18px 18px;
  color: var(--on-dark);
}
.sponsor:hover { border-color: var(--accent); text-decoration: none; }
.sponsor img {
  /* height fixed, width free: holds 1:1 through 14:1 wordmarks */
  max-height: 46px; max-width: 100%; width: auto; height: auto;
  object-fit: contain; object-position: left center;
}
.sponsor .sponsor-logo {
  display: flex; align-items: center;
  height: 62px; width: 100%;
  background: #0A1319;
  border: 1px solid rgba(242,237,227,.12);
  padding: 8px 12px;
  margin-bottom: 12px;
}
.sponsor .sponsor-name {
  display: block;
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  font-size: var(--sup-name-fs); line-height: 1.15;
  white-space: nowrap;
}
.sponsor .sponsor-blurb {
  display: block; margin-top: 7px;
  font-family: var(--label); font-size: 14px; line-height: 1.45;
  color: var(--on-dark-2);
  min-height: 3em;
}

/* ============ ARTICLE ============ */
.artwrap { padding-inline: var(--gut); }
.art-head { padding: 46px 0 0; max-width: 1180px; margin-inline: auto; }
.art-head h1 { font-size: clamp(38px, 6.2vw, 96px); max-width: 22ch; margin-top: 14px; }
.art-head .lead {
  font-family: var(--body); font-size: clamp(19px, 1.9vw, 25px); line-height: 1.5;
  color: var(--on-dark); max-width: 52ch; margin: 22px 0 0; font-weight: 400;
}
.art-head .kicker { padding-bottom: 14px; border-bottom: 2px solid var(--accent); display: inline-flex; }
.art-head .art-meta { margin-top: 28px; padding-top: 16px; border-top: var(--rule); display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; }
.art-head .art-meta span { font-family: var(--label); font-size: 13.5px; color: var(--on-dark-3); }
.art-head .art-meta span:first-child { color: var(--accent); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }

/* reading column centred on its own axis; figures and data blocks break the measure */
.artbody {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 72ch) minmax(0, 1fr);
  column-gap: clamp(20px, 3vw, 44px);
  max-width: 1180px;
  margin-inline: auto;
  padding-block: 14px 0;
}
.artbody > * { grid-column: 2; }
.artbody > figure,
.artbody > .break { grid-column: 1 / -1; }
.artbody > p { margin: 0 0 24px; }
.artbody > p:last-child { margin-bottom: 0; }

/* an opening cap, so the piece starts rather than just continuing */
.artbody > p:first-of-type::first-letter {
  font-family: var(--display); font-weight: 600;
  font-size: 78px; line-height: .78;
  float: left; margin: 6px 12px 0 0;
  color: var(--accent);
}
.artbody h2 {
  font-size: clamp(26px, 3.2vw, 42px);
  margin: 62px 0 20px; padding-top: 22px;
  border-top: 2px solid var(--ground-3);
  max-width: 26ch;
  position: relative;
}
.artbody h2::before {
  content: ""; position: absolute; top: -2px; left: 0;
  width: 84px; height: 2px; background: var(--accent);
}
.artbody h3 { font-size: 24px; margin: 40px 0 14px; }

/* intersections: every break gets the same generous air on both sides */
.artbody > figure { margin: 62px 0; }
.artbody > .break { margin: 66px 0; }
.artbody > figure + figure { margin-top: 40px; }
.artbody > .break + .break { margin-top: 40px; }
.artbody > h2 + figure, .artbody > h2 + .break { margin-top: 34px; }
.artbody a { border-bottom: 1px solid rgba(224,165,38,.4); }

/* full-measure breaks live outside the reading column */
.break { max-width: 1180px; }

.lead { font-size: 21px; }
.pullquote { margin: 40px 0; padding: 0 0 0 26px; border-left: 4px solid var(--accent); max-width: 30ch; }
.pullquote p { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; margin: 0; }
.blockquote { margin: 36px 0; padding: 24px 26px; background: var(--ground-2); border-left: 4px solid var(--secondary); }
.blockquote p { margin: 0; font-size: 19px; }
.blockquote cite { display: block; margin-top: 12px; font-family: var(--label); font-size: 14px; font-style: normal; color: var(--on-dark-3); }
.callout { margin: 36px 0; padding: 24px 26px; background: var(--accent); color: var(--ground); }
.callout p { margin: 0; font-size: 18px; }
.note { font-family: var(--label); font-size: 15.5px; color: var(--on-dark-2); border-top: var(--rule); border-bottom: var(--rule); padding: 14px 0; margin: 30px 0; }

/* notes-for-design blocks — full-measure interruptions, not a side rail */
.notes-block { margin: 52px 0; background: var(--paper); color: var(--ink); padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 40px); }
.notes-block > h2 { font-size: clamp(23px, 2.6vw, 34px); margin: 0 0 22px; padding: 0 0 16px; border: none; border-bottom: 2px solid var(--secondary); max-width: none; display: flex; align-items: center; gap: 12px; }
.notes-block > h2::before { display: none; }
.notes-block.on-teal > h2 { border-bottom-color: var(--accent-lt); }
.notes-block .ico { stroke: var(--secondary); }
.notes-block.on-teal { background: var(--secondary); color: var(--on-dark); }
.notes-block.on-teal .ico { stroke: var(--accent-lt); }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: minmax(150px, 240px) 1fr; gap: 8px 26px; padding: 14px 0; border-top: 1px solid rgba(14,26,36,.2); align-items: baseline; }
.notes-block.on-teal .timeline li { border-color: rgba(242,237,227,.25); }
.timeline li:last-child { border-bottom: 1px solid rgba(14,26,36,.2); }
.notes-block.on-teal .timeline li:last-child { border-color: rgba(242,237,227,.25); }
.t-when { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: 20px; line-height: 1.1; color: var(--secondary); }
.notes-block.on-teal .t-when { color: var(--accent-lt); }
.t-what { font-size: 17px; }

.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2px; background: rgba(14,26,36,.18); }
.notes-block.on-teal .statrow { background: rgba(242,237,227,.22); }
.statblock { background: var(--paper); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.notes-block.on-teal .statblock { background: var(--secondary); }
.stat-num { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 3.6vw, 46px); line-height: .95; color: var(--secondary); text-transform: uppercase; }
.notes-block.on-teal .stat-num { color: var(--accent-lt); }
.stat-label { font-family: var(--label); font-size: 14.5px; line-height: 1.4; }

.datatable, .versus { width: 100%; border-collapse: collapse; font-size: 16.5px; }
.datatable caption, .versus caption { font-family: var(--label); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; text-align: left; padding-bottom: 10px; color: var(--secondary); }
.datatable th, .datatable td, .versus th, .versus td { text-align: left; padding: 11px 14px; border-bottom: 1px solid rgba(14,26,36,.2); vertical-align: top; }
.datatable th, .versus th { font-family: var(--label); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.versus tbody th { font-weight: 600; }
.table-scroll { overflow-x: auto; }

.chart { margin: 40px 0; }
/* each chart is capped at its own intrinsic viewBox width, so the viewBox scale
   stays ~1 and the type sizes below mean what they say */
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart.bar svg { max-width: 560px; }
.chart.line svg { max-width: 800px; }
.chart.donut svg { max-width: 240px; }
/* chart type is sized per chart, because each has its own viewBox scale */
.chart.bar svg text { font-size: 18px; }
.chart.line svg text { font-size: 13px; }
@media (max-width: 700px) {
  .chart.bar svg text { font-size: 26px; }
  .chart.line svg text { font-size: 19px; }
}
.chart figcaption { font-family: var(--label); font-size: 14.5px; margin-top: 10px; color: var(--ink-2); }

/* cards / references */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin: 36px 0; }
.profile-card { background: var(--ground-2); border: 1px solid var(--ground-3); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.profile-card .p-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; margin-bottom: 6px; }
.profile-card h3 { font-size: 24px; }
.profile-card .p-role { font-family: var(--label); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0; }
.profile-card p { margin: 0; font-size: 16.5px; }
.profile-card .p-links, .profile-card .p-attr { font-family: var(--label); font-size: 14px; margin-top: auto; padding-top: 10px; }
.profile-card .p-attr { color: var(--on-dark-3); }
.profile-card.no-photo { border-left: 4px solid var(--secondary); }

.org-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 30px 0; }
.org-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--ground-2); border: 1px solid var(--ground-3); color: var(--on-dark); }
.org-card:hover { border-color: var(--accent); text-decoration: none; }
.org-card .org-logo { max-height: 30px; width: auto; margin-bottom: 8px; }
.org-card .org-name { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: 20px; line-height: 1.05; }
.org-card .org-host { font-family: var(--label); font-size: 13px; color: var(--on-dark-3); }
.org-card.no-logo { border-left: 4px solid var(--accent); }

.entity-ref { font-family: var(--label); font-size: .94em; white-space: nowrap; }

.further-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin: 26px 0 0; }
.further-grid a { display: flex; align-items: flex-start; gap: 10px; padding: 18px; background: var(--ground-2); border: 1px solid var(--ground-3); font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: 21px; line-height: 1.08; color: var(--on-dark); }
.further-grid a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

.related-links { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 0; }
.related-links li { border-top: var(--rule); }
.related-links li:last-child { border-bottom: var(--rule); }
.related-links a { display: flex; align-items: baseline; gap: 12px; padding: 15px 0; font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: 23px; color: var(--on-dark); }
.related-links a:hover { color: var(--accent); text-decoration: none; }

.after-art { padding: 56px 0 0; border-top: 2px solid var(--on-dark); margin-top: 62px; max-width: 1180px; margin-inline: auto; }
.after-art h2 { font-size: 28px; margin-bottom: 4px; }

/* ---------- category / archive ---------- */
.cat-head { padding: 46px 0 34px; max-width: 1180px; margin-inline: auto; }
.cat-head h1 { font-size: clamp(40px, 6.6vw, 96px); max-width: 20ch; margin-top: 14px; }
.cat-head .lead { max-width: 56ch; margin: 22px 0 0; color: var(--on-dark); }

.cat-list { list-style: none; margin: 0 auto; padding: 0; border-top: 2px solid var(--on-dark); max-width: 1180px; }
.cat-list li { border-bottom: var(--rule); }
.cat-list > li > a { display: grid; grid-template-columns: 48px 1fr minmax(0, 300px); gap: 18px 32px; align-items: start; padding: 26px 0; color: var(--on-dark); }
.cat-list > li > a:hover { text-decoration: none; }
.cat-list > li > a:hover h2, .cat-list > li > a:hover h3 { color: var(--accent); }
.cat-list .numeral { font-family: var(--display); font-size: 30px; color: var(--accent); line-height: 1; }
.cat-list h3 { font-size: clamp(23px, 2.6vw, 34px); }
.cat-list p { margin: 9px 0 0; font-size: 16.5px; color: var(--on-dark-2); max-width: 60ch; }
.cat-list img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

.arch-group { margin-top: 48px; max-width: 1180px; margin-inline: auto; }
.arch-group > h2 { font-size: clamp(26px, 3vw, 40px); display: flex; align-items: center; gap: 12px; color: var(--accent); }
.arch-group > p { margin: 8px 0 18px; color: var(--on-dark-2); font-size: 17px; }

.prose { max-width: 72ch; margin-inline: auto; }
.prose p { margin: 0 0 20px; }
.prose h2 { font-size: clamp(26px, 3vw, 38px); margin: 44px 0 16px; padding-top: 16px; border-top: 2px solid var(--ground-3); }

/* CSS-only expander for long lists */
.expander { margin-top: 0; }
.expander input { position: absolute; opacity: 0; pointer-events: none; }
.expander .more { display: none; }
.expander input:checked ~ .more { display: block; }
.expander label {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer; margin-top: 20px;
  font-family: var(--label); font-size: 12.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent); border-bottom: 1px solid currentColor; padding-bottom: 4px;
}
.expander input:checked ~ label { display: none; }

/* ---------- footer ---------- */
.foot { padding: 60px var(--gut) 64px; margin-top: 76px; border-top: 2px solid var(--on-dark); }
.foot-top { display: flex; flex-wrap: wrap; gap: 22px 40px; justify-content: space-between; align-items: flex-start; }
.foot-name { font-family: var(--display); font-weight: 600; text-transform: lowercase; font-size: clamp(34px, 4.4vw, 62px); line-height: .9; }
.foot-name .dot { color: var(--accent); }
.foot-top p { margin: 0; max-width: 44ch; font-size: 15.5px; color: var(--on-dark-3); }
.foot-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 28px; margin-top: 40px; padding-top: 22px; border-top: var(--rule); }
.foot-nav a { display: flex; align-items: center; gap: 9px; font-family: var(--label); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-2); }
.foot-nav a:hover { color: var(--accent); text-decoration: none; }

/* ---------- responsive ---------- */
@media (max-width: 1250px) {
  /* four tiles need ~1250px before the copy column drops under its 200px floor,
     so below that the group reads as two-by-two rather than three-and-an-orphan */
  :root { --sup-tile: 264px; --sup-name-fs: 17.5px; --sup-cols: 2; }
}
@media (max-width: 1080px) {
  .feature-pair { grid-template-columns: 1fr; }
  .run a.row { grid-template-columns: 62px minmax(0, 1fr); }
  .run .row-shot { grid-column: 2; max-width: 340px; }
  .signature .inner { grid-template-columns: 1fr; }
  .cat-list > li > a { grid-template-columns: 40px 1fr; }
  .cat-list .thumb { grid-column: 2; max-width: 320px; }
}
@media (max-width: 980px) {
  /* a wrapping row fills its last line at any item count — no orphan cells, nothing hidden */
  .mastnav { display: flex; flex-wrap: wrap; gap: 1px; border-bottom: 2px solid var(--on-dark); border-top: 1px solid var(--ground-3); padding: 1px 0; }
  .mastnav a { flex: 1 1 auto; justify-content: flex-start; padding: 12px 14px; border-right: none; outline: 1px solid var(--ground-3); font-size: 12px; }
  .mastnav a:last-child { border-right: none; }
}
@media (max-width: 860px) {
  body { font-size: 17px; }
  .lead-band .lead-txt { margin-top: -26px; }
  .lead-inner { padding: 24px 20px 4px; }
  .fig-inset { grid-template-columns: 1fr; }
  .fig-bleed figcaption { margin-inline: var(--gut); max-width: none; }
  .timeline li { grid-template-columns: 1fr; }
  .band, .tealband { padding: 34px 0 52px; }
  .band-head { padding-top: 34px; }
  .band-head h2 { margin-top: 16px; }
  .band-head .band-no { width: 50px; height: 50px; font-size: 21px; }
  .artbody h2 { margin-top: 36px; }
  .artbody { grid-template-columns: minmax(0, 1fr); }
  .artbody > * , .artbody > figure, .artbody > .break { grid-column: 1; }
}
@media (max-width: 560px) {
  :root { --gut: 18px; }
  :root { --sup-tile: 100%; --sup-name-fs: 22px; --sup-cols: 1; }
  .sponsor-grid { grid-template-columns: 1fr; max-width: none; }
  .sponsor { width: 100%; }
  .sponsor .sponsor-logo { height: 74px; }
  .nameplate { padding-bottom: 18px; }
  .run a.row { grid-template-columns: 1fr; padding: 26px 16px; margin-inline: -16px; gap: 16px; }
  .run .numeral { width: 48px; height: 48px; font-size: 21px; }
  .run .row-shot { grid-column: 1; }
  .run h3::before { width: 48px; margin-bottom: 12px; }
  .cat-list > li > a { grid-template-columns: 34px 1fr; }
  .run .row-shot, .cat-list .thumb { max-width: none; }
  .notes-block { padding: 22px 18px; }
  .datatable, .versus { font-size: 15.5px; }
  .datatable th, .datatable td, .versus th, .versus td { padding: 9px 10px; }
  .datatable th, .versus th { font-size: 12px; }
  .artbody > p:first-of-type::first-letter { font-size: 62px; margin-right: 10px; }
  .artbody h2 { margin-top: 46px; }
  .artbody > figure, .artbody > .break { margin: 44px 0; }
  .art-head h1 { margin-top: 12px; }
  .after-art { margin-top: 46px; padding-top: 40px; }
  .related-links a { font-size: 19px; }
  .further-grid a { font-size: 18px; }
  .pullquote p { font-size: 30px; }
  .timeline li { padding: 12px 0; }
  .t-when { font-size: 18px; }
  .t-what { font-size: 16px; }
}

/* 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 .sup-head > .sponsor{flex:1 1 0!important;min-width:0!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

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

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

/* sp-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;flex-wrap:nowrap!important;align-items:center!important;height:auto!important;min-height:0!important}
.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}

/* sp-grid-stretch: fixed pixel tracks left the container part-empty. */
.foot-nav{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}

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

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.sponsor-grid .sponsor .sponsor-logo.sponsor-logo{display:block!important;width:100%!important}
.sponsor-grid .sponsor.sponsor img{height:38px!important;display:block!important;width:100%!important}

/* op-grid-fill-and-even: two things the operator asked for on this build.
   1. FULL ROW. The tracks were a fixed repeat(auto-fit, 316px) under a max-width computed from
      --sup-cols, so four tiles measured 1312px inside a 1424px band and the run stopped short of
      the container. Design's column COUNT is kept (--sup-cols, which its own breakpoints step to
      2 then 1); only the track sizing becomes fluid and the cap comes off.
   2. EVEN TILES. Girlfriends Films' sentence runs to two lines where every other runs to three,
      so that one tile came out 177px against 198px. min-height was 3em, which two lines of a
      1.5 leading (sp-blurb-unhide's, not Design's 1.45) already satisfy — three need 4.5em.
      Reserving them makes the run even at
      every width instead of depending on how long each sentence is. */
.sponsor-grid{
  grid-template-columns:repeat(var(--sup-cols),minmax(0,1fr));
  max-width:none;
}
.sponsor .sponsor-blurb{min-height:4.5em}


/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   2668px at 390, 21% of the whole page. Two columns bring it to
   1310px (51% shorter). Checked before writing: no new overflow, smallest mark still
   106px wide, longest blurb 3 lines, tile heights 210-210px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   Only the tier(s) that were one-per-row are touched (.sponsor-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){
  .sponsor-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:16px!important}
    .sponsor-grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-grid > * *{min-width:0!important;max-width:100%}
    .sponsor-grid img,.sponsor-grid svg{max-width:100%;height:auto}
}

/* op-article-width: the article column was capped at 648px (83 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through grid track 2 of "minmax(0px, 1fr) minmax(0px, 72ch) minmax(0px, 1fr)" (declared in .artbody) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  div.artbody{grid-template-columns:minmax(0px, 1fr) min(801px, calc(100% - 86px)) minmax(0px, 1fr)!important}
}
@media (min-width:1600px){
  div.artbody{grid-template-columns:minmax(0px, 1fr) min(clamp(801px, 55.625vw, 961px), calc(100% - 86px)) minmax(0px, 1fr)!important}
  div.artbody > :is(p:not([class])){font-size:clamp(18px,1.2500vw,21.6px)!important}
}
/* op-article-width:end */

/* op-name-wrap: on the live page a brand name or domain label ran out of its money tile (one unbreakable word in a narrow tile, measured 2026-09-23). The name wraps instead (a brand on two lines is better than half a word). Money tiles only. */
[data-partner] .sponsor-name{white-space:normal!important;overflow-wrap:anywhere;text-overflow:clip!important}
/* op-name-wrap:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 600; text-transform: uppercase; line-height: 1.02; margin: 0px; letter-spacing: 0px;}
.cat-list > li > a:hover h2:where(.rt-h3){color: var(--accent);}
.cat-list h2:where(.rt-h3){font-size: clamp(23px, 2.6vw, 34px);}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a > span.thumb > img,
  a.big.story > span.shot > img,
  a.row > span.row-shot > img,
  a.story > span.shot > img,
  div.artbody > figure.fig-bleed > img,
  div.artbody > figure.fig-inset > img,
  div.artbody > figure.fig-plate > img,
  div.inner > figure > img,
  main.artwrap > figure.fig-bleed.fig-hero > img,
  section.lead-band > div.lead-img > img){height:auto}
/* op-img-dims:end */

/* op-entity-wrap: long reference links wrap like the text around them (nowrap ran them off phone screens) */
.entity-ref.entity-ref{white-space:normal!important}