/* Foire Salon — Iron and Crowd
   Palette (5 members, named jobs):
     --ground   #EFE4CC  page ground, large areas
     --ink      #17150F  type, dark grounds, signage boards
     --accent   #A8410F  saturated terracotta — rules, kickers, filled bands
     --secondary#0B5D53  saturated teal — panels, second-tier bands
     --flag     #C8901F  saturated ochre — directory board, timeline ground
   --accent and --secondary sit ~150 degrees apart in hue and both hold text at 16px. */

:root {
  --ground: #EFE4CC;
  --ink: #17150F;
  --accent: #A8410F;
  --secondary: #0B5D53;
  --flag: #C8901F;

  --paper-2: #E5D9BE;
  --rule: #CFC4AB;
  --quiet: #6A6250;
  --ink-soft: rgba(239, 228, 204, .78);

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* three visibly different widths + full bleed */
  --prose: 66ch;
  --breakout: 100%;
  --page: 100%;
  --gutter: 20px;

  --fs-body: 17px;
  --fs-lead: 20px;
  --fs-h1: 42px;
  --fs-h2: 28px;
  --fs-h3: 22px;
  --fs-board: 30px;
  --numeral: 74px;
  --mast: 44px;
}

@media (min-width: 768px) {
  :root { --page: 720px; --breakout: 720px; --gutter: 28px; --fs-h1: 58px; --fs-h2: 32px; --fs-board: 38px; --numeral: 110px; --mast: 58px; --fs-lead: 22px; }
}
@media (min-width: 1024px) {
  :root { --page: 980px; --breakout: 980px; --gutter: 36px; --fs-body: 18px; --fs-lead: 24px; --fs-h1: 72px; --fs-h2: 36px; --fs-h3: 24px; --fs-board: 46px; --numeral: 150px; --mast: 68px; }
}
@media (min-width: 1280px) {
  :root { --page: 1200px; --breakout: 1100px; --prose: 70ch; --gutter: 44px; --fs-h1: 86px; --fs-h2: 40px; --fs-board: 54px; --numeral: 190px; --mast: 80px; }
}
@media (min-width: 1600px) {
  :root { --page: 1500px; --breakout: 1340px; --prose: 76ch; --gutter: 60px; --fs-body: 19px; --fs-lead: 27px; --fs-h1: 104px; --fs-h2: 46px; --fs-h3: 26px; --fs-board: 64px; --numeral: 240px; --mast: 96px; }
}
@media (min-width: 2100px) {
  :root { --page: 1900px; --breakout: 1620px; --prose: 84ch; --gutter: 84px; --fs-body: 20px; --fs-lead: 30px; --fs-h1: 128px; --fs-h2: 52px; --fs-h3: 28px; --fs-board: 78px; --numeral: 300px; --mast: 112px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--secondary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: .92; margin: 0; text-transform: uppercase; letter-spacing: .01em; }
p { margin: 0 0 1.05em; text-wrap: pretty; }
table { border-collapse: collapse; width: 100%; }
figure { margin: 0; }
svg { display: block; }
.icon { width: 1.35em; height: 1.35em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }
.icon-lg { width: 40px; height: 40px; }

.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding-inline: var(--gutter); }
.measure { max-width: var(--prose); }
.breakout { width: 100%; max-width: var(--breakout); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: var(--ink); color: var(--ground); padding: 8px 12px; z-index: 99; }

/* ---------- masthead ---------- */
.masthead { border-bottom: 5px solid var(--ink); background: var(--ground); }
.masthead-in {
  width: 100%; max-width: 100%; margin: 0 auto; padding: 18px var(--gutter) 0;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px;
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); flex: 0 0 100%; max-width: min(1600px, 100%); margin-inline: auto; }
.brand:hover { color: var(--ink); }
.brand-mark { color: var(--accent); width: clamp(78px, 7.5vw, 132px); height: auto; }
.brand-name { font-family: var(--display); font-weight: 800; font-size: var(--mast); line-height: .82; text-transform: uppercase; letter-spacing: .005em; }
.brand-rule { display: block; height: 2px; background: var(--ink); margin-top: 7px; }
.brand-sub { display: block; font-family: var(--body); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--quiet); margin-top: 6px; font-weight: 500; }
.nav { font-family: var(--body); flex: 1 0 100%; width: calc(100% + var(--gutter) * 2); margin: 14px calc(var(--gutter) * -1) 0; padding: 12px var(--gutter); background: var(--ink); }
.nav ul { list-style: none; margin: 0 auto; padding: 0; max-width: min(1600px, 100%); display: flex; flex-wrap: nowrap; justify-content: center; gap: clamp(12px, 1.8vw, 34px); overflow-x: auto; }
.nav a {
  display: flex; align-items: center; gap: 7px; text-decoration: none; color: var(--ground);
  font-size: clamp(13px, 1.15vw, 19px); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  padding: 6px 0; border-bottom: 3px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--flag); color: var(--flag); }
.nav .icon { color: var(--flag); width: 15px; height: 15px; }
.nav-toggle { display: none; }
.nav-label { display: none; }

@media (max-width: 767px) {
  .nav-label {
    display: flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 800;
    font-size: 22px; text-transform: uppercase; letter-spacing: .06em; cursor: pointer;
    border: 2px solid var(--ground); color: var(--ground); padding: 5px 12px;
  }
  .nav ul { display: none; width: 100%; flex-direction: column; gap: 0; margin-top: 10px; }
  .nav { width: 100%; }
  .nav-toggle:checked ~ ul { display: flex; }
  .nav ul li { border-top: 1px solid rgba(239,228,204,.25); }
  .nav a { padding: 11px 0; border-bottom: none; }
}

/* ---------- ticket device ---------- */
.ticket { position: relative; }
.tk { position: relative; display: inline-block; width: 100%; line-height: 0; }
.tk-svg { width: 100%; height: auto; }
.tk-lbl {
  position: absolute; top: 50%; left: 73%; width: 25%; transform: translateY(-50%);
  font-family: var(--display); font-weight: 800; font-size: 15px; line-height: 1;
  letter-spacing: .01em; text-align: center; color: currentColor;
}
.brand .tk-lbl { font-size: clamp(13px, 1.35vw, 23px); }
.ticket-frame { position: absolute; inset: 0; color: var(--accent); pointer-events: none; }
.ticket-stub { font-family: var(--display); font-weight: 800; color: var(--accent); }

/* ---------- kickers, boards ---------- */
.kicker {
  display: flex; align-items: center; gap: 9px; margin: 0 0 12px;
  font-family: var(--body); font-size: 12.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
}
.kicker .icon { width: 17px; height: 17px; }
.kicker--pale { color: var(--ground); }
.opener-plate .kicker--pale { background: rgba(23,21,15,.84); padding: 6px 11px; align-self: flex-start; width: fit-content; }
.opener-plate .kicker--pale .icon, .mapband .kicker--pale .icon { color: var(--flag); }
.board {
  font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: .88;
  font-size: var(--fs-board);
}

/* ---------- hero (figure treatment 1: full bleed + ink caption band) ---------- */
.hero { position: relative; border-bottom: 5px solid var(--ink); }
.hero-img { width: 100%; height: clamp(420px, 74vh, 1000px); object-fit: cover; object-position: 50% 80%; background: var(--ink); }
.hero-plate {
  position: absolute; inset: 0 0 auto 0; padding: clamp(20px, 3vw, 46px) 0 clamp(64px, 11vh, 140px);
  background: linear-gradient(to bottom, rgba(23,21,15,.94), rgba(23,21,15,.88) 45%, rgba(23,21,15,.72) 70%, rgba(23,21,15,0));
}
.hero-plate .wrap { color: var(--ground); }
.hero h1 { color: var(--ground); font-size: var(--fs-h1); max-width: 22ch; }
.hero-deck { max-width: 54ch; margin: 18px 0 0; color: var(--ground); font-size: var(--fs-lead); line-height: 1.35; background: rgba(23,21,15,.8); padding: 13px 15px; }
.hero-stub {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 6px 12px;
  border: 1px solid rgba(239,228,204,.55); color: var(--ground); background: rgba(23,21,15,.82);
  font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .18em; text-transform: uppercase;
}
.caption-band { background: var(--ink); color: var(--ink-soft); }
.caption-band .wrap { padding-block: 13px; display: flex; flex-wrap: wrap; gap: 4px 30px; align-items: baseline; }
.caption-band .cap { font-size: 15.5px; line-height: 1.45; max-width: 78ch; }
.caption-band .credit { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: rgba(239,228,204,.55); }

/* ---------- section opener (signage board over photo) ---------- */
.opener { position: relative; border-bottom: 5px solid var(--ink); }
.opener-img { width: 100%; height: clamp(300px, 46vh, 620px); object-fit: cover; background: var(--ink); }
.opener-plate { position: absolute; inset: auto 0 0 0; background: linear-gradient(to top, rgba(23,21,15,.95), rgba(23,21,15,.88) 45%, rgba(23,21,15,.72) 70%, rgba(23,21,15,0)); padding: clamp(56px, 9vh, 120px) 0 clamp(20px, 3vw, 44px); }
.opener-plate .wrap { color: var(--ground); }
.opener h1, .opener h2 { color: var(--ground); font-size: var(--fs-h1); letter-spacing: .02em; max-width: 24ch; }
.opener-blurb { max-width: 60ch; margin: 14px 0 0; color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.35; }

/* ---------- directory board ---------- */
.directory { background: var(--ink); color: var(--ground); border-bottom: 5px solid var(--ink); }
.directory h2, .directory .board { color: var(--ground); }
.directory .wrap { padding-block: clamp(26px, 3vw, 52px); }
.directory-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 30px; border-bottom: 2px solid currentColor; padding-bottom: 10px; margin-bottom: 4px; }
.directory-head p { margin: 0; font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.dir-list { list-style: none; margin: 0; padding: 0; }
.dir-list li { border-bottom: 1px solid rgba(239,228,204,.28); }
.dir-list a {
  display: grid; grid-template-columns: 26px 1fr; gap: 8px 14px; align-items: center;
  padding: 20px 14px; margin-inline: -14px; text-decoration: none; color: var(--ground);
}
.dir-list a:hover { color: var(--flag); background: rgba(239,228,204,.07); }
.dir-list .dir-no { font-family: var(--mono); font-size: 12px; color: var(--flag); grid-row: 1; }
.dir-list .dir-name { font-family: var(--display); font-weight: 800; font-size: var(--fs-board); text-transform: uppercase; line-height: .9; display: flex; align-items: center; gap: 12px; }
.dir-list .dir-blurb { grid-column: 2; font-size: 15.5px; line-height: 1.45; max-width: 66ch; color: rgba(239,228,204,.8); }
@media (min-width: 1024px) {
  .dir-list a { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.15fr); align-items: baseline; }
  .dir-list .dir-blurb { grid-column: 3; grid-row: 1; }
}

/* ---------- featured long-read ---------- */
.featured { border-bottom: 5px solid var(--ink); }
.featured .wrap { padding-block: clamp(30px, 4vw, 70px); }
.featured-grid { display: grid; gap: clamp(20px, 2.5vw, 44px); align-items: start; }
@media (min-width: 1024px) { .featured-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
@media (min-width: 1600px) { .featured-grid { grid-template-columns: 55% minmax(0, 45%); } }
.featured-fig { position: relative; }
.featured-fig img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--ink); border: 4px solid var(--ink); }
.featured h2 { font-size: var(--fs-h1); max-width: 20ch; }
.featured h2 a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 4px; text-underline-offset: 7px; }
.featured h2 a:hover { color: var(--accent); }
.featured .deck { font-size: var(--fs-lead); line-height: 1.38; margin: 16px 0 0; max-width: 46ch; font-weight: 500; }
.featured .more { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; font-family: var(--display); font-weight: 800; font-size: clamp(17px, 1.4vw, 23px); letter-spacing: .09em; text-transform: uppercase; text-decoration: none; color: var(--ink); border-bottom: 3px solid var(--accent); }

/* ---------- unequal trio ---------- */
.trio { border-bottom: 5px solid var(--ink); }
.trio .wrap { padding-block: clamp(30px, 4vw, 70px); }
.trio-grid { display: grid; gap: clamp(18px, 2vw, 34px); }
@media (min-width: 768px) { .trio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.card { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--ink); border-top: 3px solid var(--ink); padding-top: 14px; }
.card:hover { color: var(--ink); }
.card:hover .card-title { color: var(--accent); }
.card img { width: 100%; object-fit: cover; background: var(--ink); }
.card--tall img { aspect-ratio: 3 / 4; }
.card--short img { aspect-ratio: 4 / 3; }
.card-meta { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.card-meta .icon { width: 16px; height: 16px; }
.card-title { font-family: var(--display); font-weight: 800; font-size: var(--fs-h3); text-transform: uppercase; line-height: .96; }
.card-dek { margin: 10px 0 0; font-size: 15.5px; line-height: 1.5; color: #3B3527; }
.card--short .card-title { font-size: calc(var(--fs-h3) * .92); }
.card-foot { margin-top: auto; padding-top: 14px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--quiet); }

/* ---------- quiet pull-quote band ---------- */
.figure-band { background: var(--ground); border-bottom: 5px solid var(--ink); }
.figure-band .wrap { padding-block: clamp(34px, 4.5vw, 78px); display: grid; gap: 18px; justify-items: center; text-align: center; }
.figure-band .fig-num { font-family: var(--display); font-weight: 800; font-size: var(--numeral); line-height: .8; color: var(--accent); }
.figure-band .fig-line { font-family: var(--mono); font-size: clamp(13.5px, 1.05vw, 16px); line-height: 1.65; letter-spacing: .01em; max-width: 68ch; color: var(--ink); }
.figure-band .fig-src { font-family: var(--mono); font-size: 12px; color: var(--quiet); }

/* ---------- map ---------- */
.mapband { background: var(--secondary); color: var(--ground); border-bottom: 5px solid var(--ink); }
.mapband .wrap { padding-block: clamp(30px, 4vw, 70px); }
.mapband h2 { color: var(--ground); font-size: var(--fs-h2); max-width: 26ch; }
.map-figure { display: grid; gap: clamp(18px, 2.5vw, 40px); margin-top: 24px; }
@media (min-width: 1024px) { .map-figure { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.map-slot { background: rgba(23,21,15,.18); border: 3px solid var(--ground); }
.map-slot svg { width: 100%; height: auto; }
.map-land { fill: rgba(239,228,204,.14); stroke: rgba(239,228,204,.5); stroke-width: 1.6; }
.map-neighbour { fill: rgba(239,228,204,.05); stroke: rgba(239,228,204,.16); stroke-width: 1; }
.map-pin { fill: var(--flag); stroke: var(--ink); stroke-width: 1.5; }
.map-pin-no { fill: var(--ink); font-family: var(--mono); text-anchor: middle; font-weight: 700; }
.map-cluster { fill: none; stroke: var(--flag); stroke-width: 2; stroke-dasharray: 6 5; }
.map-legend { list-style: none; margin: 0; padding: 0; }
.legend-head { margin: 0 0 16px; font-family: var(--body); font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--flag); }
.map-legend li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(239,228,204,.22); }
.map-legend .lg-body { display: block; }
.map-legend .lg-body a { display: block; font-family: var(--display); font-weight: 800; font-size: 19px; text-transform: uppercase; line-height: 1; text-decoration: none; }
.map-legend .lg-what { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: rgba(239,228,204,.82); }
.map-legend .no { font-family: var(--mono); font-size: 12.5px; color: var(--ground); padding-top: 3px; }
.map-legend a { color: var(--ground); }
.map-legend a:hover { color: var(--flag); }
.map-figure figcaption { font-size: 15px; line-height: 1.55; color: var(--ground); max-width: 70ch; margin-top: 20px; }
.map-figure figcaption .credit { display: block; font-family: var(--mono); font-size: 12px; color: rgba(239,228,204,.85); margin-top: 6px; }

/* ---------- supporters colophon ---------- */
.colophon { border-bottom: 5px solid var(--ink); }
.colophon .wrap { padding-block: clamp(28px, 3.5vw, 60px); display: grid; grid-template-columns: repeat(auto-fit, minmax(316px, 1fr)); gap: clamp(24px, 2.5vw, 40px) clamp(26px, 3vw, 48px); align-items: start; }
.colophon-head { grid-column: 1 / -1; }
.colophon-head { border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 22px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 26px; }
.colophon-head h2 { font-size: var(--fs-h2); }
.colophon-head p { margin: 0; font-family: var(--mono); font-size: 12.5px; color: var(--quiet); }
.sponsor-group { display: block; margin: 0; border-top: 2px solid var(--ink); padding-top: 12px; }
.sponsor-group > h3 { margin: 0 0 14px; padding: 0; }
.sponsor-group > h3 { font-family: var(--body); font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.sponsor-row { display: flex; flex-direction: column; gap: 14px; }
.sponsor {
  flex: 0 0 auto; width: 300px; max-width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px;
  padding: 14px; border: 1px solid var(--rule); background: var(--paper-2);
  text-decoration: none; color: var(--ink); align-content: start;
}
.sponsor:hover { color: var(--ink); border-color: var(--ink); }
.sponsor img { width: 100%; max-width: 100%; height: 52px; max-height: 52px; object-fit: contain; object-position: left center; background: var(--ink); padding: 6px 10px; }
.sponsor-name { font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; line-height: 1; }
.sponsor-blurb { display: block; font-size: 14.5px; line-height: 1.45; color: #3B3527; margin-top: 6px; }
@media (min-width: 768px) {
  .sponsor img { width: 100%; }
}
.sponsor.feat { border-color: var(--ink); border-width: 2px; }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: var(--ink-soft); }
.foot .wrap { padding-block: clamp(30px, 3.5vw, 58px); display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .foot .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.foot-line { max-width: 52ch; margin: 12px 0 0; font-size: 15.5px; line-height: 1.5; }
.foot h2 { color: var(--ground); font-size: 30px; }
.foot-nav { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr)); gap: 2px 16px; align-content: start; }
.foot-nav a { display: flex; align-items: center; gap: 7px; color: var(--ground); text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 15.5px; text-transform: uppercase; letter-spacing: .05em; padding: 3px 0; }
.foot-nav a:hover { color: var(--flag); }
.foot-nav .icon { width: 15px; height: 15px; }
.foot-marks { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; color: rgba(239,228,204,.55); }
.foot-marks .tk { width: clamp(84px, 26vw, 128px); flex: none; }
.foot-marks .tk-lbl { font-size: 16px; }
.foot-marks svg { width: 62px; height: auto; }

/* ---------- article ---------- */
.article { padding-bottom: clamp(44px, 5vw, 88px); }
.end-unit { display: block; margin: clamp(38px, 4vw, 66px) 0; }
.end-unit > * { margin-top: 0; margin-bottom: 0; }
.article-head { padding-top: clamp(22px, 3vw, 52px); }
.article-head h1 { font-size: var(--fs-h1); max-width: 26ch; }
.lead { font-size: var(--fs-lead); line-height: 1.4; font-weight: 500; max-width: 56ch; margin: 20px 0 0; }
.byline { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: var(--quiet); }
.byline .sep { color: var(--rule); }
.article-body { padding-top: clamp(26px, 3vw, 54px); padding-inline: var(--gutter); }
.article-body > * { margin-inline: auto; }
.article-body p, .article-body h2, .article-body h3, .article-body .note, .article-body ul, .article-body ol.plain {
  width: 100%; max-width: var(--prose);
}
.article-body h2 { font-size: var(--fs-h2); margin: clamp(30px, 3vw, 56px) auto 16px; max-width: var(--prose); }
.article-body h2 .h2-mark { color: var(--accent); }
.article-body p { font-size: var(--fs-body); line-height: 1.68; }
.article-body .measure-note { font-family: var(--mono); font-size: 13.5px; color: var(--quiet); }

/* breakout units */
.unit { width: 100%; max-width: var(--breakout); margin: clamp(34px, 3.4vw, 60px) auto; }
.unit-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; border-bottom: 2px solid var(--ink); padding-bottom: 9px; margin-bottom: 16px; }
.unit-head h3 { font-size: var(--fs-h3); }
.unit-head .unit-tag { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--quiet); }

/* figure treatment 2: offset mat with accent rule */
.article-figure.mat {
  width: 100%; max-width: var(--breakout); margin: clamp(34px, 3.4vw, 62px) auto;
  background: var(--paper-2); border-left: 4px solid var(--accent);
  display: grid; gap: 16px; padding: clamp(14px, 1.6vw, 26px);
}
@media (min-width: 1024px) { .article-figure.mat { grid-template-columns: minmax(0, 1.55fr) minmax(240px, 1fr); align-items: start; } }
.article-figure img { width: 100%; object-fit: cover; background: var(--ink); }
.article-figure.mat img { aspect-ratio: 8 / 5; }
.article-figure figcaption { font-size: 15.5px; line-height: 1.5; }
.article-figure figcaption .cap-kicker { display: block; font-family: var(--body); font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 7px; }
.article-figure figcaption .credit { font-family: var(--mono); font-size: 12px; color: var(--quiet); display: block; margin-top: 8px; }
@media (min-width: 1024px) {
  .article-figure.mat figcaption .credit { margin-top: 10px; }
}

/* figure treatment 3: inline portrait crop with ticket border */
.article-figure.plate {
  width: 100%; max-width: var(--prose); margin: clamp(34px, 3vw, 50px) auto;
  position: relative;
}
.article-figure.plate .plate-frame { display: block; position: relative; padding: 10px; border: 2px solid var(--ink); }
.article-figure.plate img { aspect-ratio: 5 / 4; }
.article-figure.plate .stub {
  position: absolute; top: 10px; left: 10px; background: var(--ground); color: var(--accent);
  font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 9px;
}
.article-figure.plate figcaption { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: baseline; }
.article-figure.plate figcaption .cap { max-width: 62ch; }

/* figure treatment 1 inside articles: full-bleed band */
.article-figure.bleed { width: auto; max-width: none; margin: clamp(34px, 4vw, 70px) calc(var(--gutter) * -1); }
.article-figure.bleed img { width: 100%; height: clamp(300px, 52vh, 720px); }
.article-figure.bleed figcaption { background: var(--ink); color: var(--ink-soft); }
.article-figure.bleed figcaption .inner {
  width: 100%; max-width: var(--page); margin: 0 auto; padding: 13px var(--gutter);
  display: flex; flex-wrap: wrap; gap: 4px 30px; align-items: baseline;
}
.article-figure.bleed figcaption .cap { max-width: 78ch; font-size: 15.5px; line-height: 1.45; }
.article-figure.bleed figcaption .credit { color: rgba(239,228,204,.5); }

/* components */
.pullquote { margin: clamp(34px, 3vw, 54px) auto; width: 100%; max-width: var(--breakout); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); padding: 22px 0; }
.pullquote p { margin: 0; font-family: var(--mono); font-size: clamp(15px, 1.25vw, 19px); line-height: 1.6; max-width: 60ch; }
.blockquote { margin: 26px auto; width: 100%; max-width: var(--prose); border-left: 4px solid var(--secondary); padding-left: 18px; }
.blockquote p { margin: 0 0 8px; font-size: calc(var(--fs-body) * 1.05); }
.blockquote cite { font-family: var(--mono); font-size: 12.5px; font-style: normal; color: var(--quiet); }
.callout { margin: 26px auto; width: 100%; max-width: var(--prose); background: var(--secondary); color: var(--ground); padding: 18px 20px; }
.callout p { margin: 0; font-size: 16.5px; line-height: 1.55; }
.note { font-family: var(--mono); font-size: 13.5px; line-height: 1.6; color: var(--quiet); border-left: 2px solid var(--rule); padding-left: 14px; }

.timeline-band { background: var(--flag); }
.unit.timeline-band { padding: clamp(18px, 2vw, 34px); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 18px; padding: 12px 0; border-top: 1px solid rgba(23,21,15,.3); }
.timeline li:last-child { border-bottom: 1px solid rgba(23,21,15,.3); }
.t-when { font-family: var(--display); font-weight: 800; font-size: 21px; text-transform: uppercase; line-height: 1.05; }
.t-what { font-size: 15.5px; line-height: 1.5; }
@media (min-width: 768px) { .timeline li { grid-template-columns: minmax(120px, 210px) minmax(0, 1fr); align-items: baseline; } }
@media (min-width: 1600px) { .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 2.5vw, 56px); } }
@media (min-width: 2100px) { .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(16px, 2vw, 34px); }
.statblock { display: flex; flex-direction: column; gap: 8px; }
.stat-num { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 3vw, 54px); line-height: .88; color: var(--accent); }
.stat-label { font-size: 15px; line-height: 1.45; }
.statrow--dark { background: var(--ink); color: var(--ink-soft); padding: clamp(18px, 2vw, 34px); }
.statrow--dark .stat-num { color: var(--flag); }

.datatable, .versus { font-size: 16px; }
.datatable th, .versus th { font-family: var(--body); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-align: left; padding: 10px 16px 10px 0; border-bottom: 2px solid var(--ink); }
.datatable td, .versus td { padding: 11px 16px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; line-height: 1.45; }
.datatable td:first-child { font-weight: 600; }
.versus td + td { color: #3B3527; }
.table-scroll { overflow-x: auto; }

.chart figcaption, .chart-caption { font-size: 14.5px; color: var(--quiet); margin-top: 10px; line-height: 1.5; }
.chart .bar-label { font-family: var(--body); font-size: 13px; fill: var(--ink); }
.chart .bar-value { font-family: var(--mono); font-size: 12px; fill: var(--quiet); }
.chart .bar-rect { fill: var(--accent); }
.chart .bar-rect.alt { fill: var(--secondary); }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.gallery figure img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.gallery figcaption { font-size: 14px; line-height: 1.45; margin-top: 8px; color: #3B3527; }
.gallery figcaption .credit { font-family: var(--mono); font-size: 11.5px; color: var(--quiet); display: block; margin-top: 4px; }

.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(16px, 2vw, 28px); }
.profile-card { border-top: 3px solid var(--ink); padding-top: 14px; display: flex; flex-direction: column; }
.profile-card .p-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--ink); margin-bottom: 12px; }
.profile-card.no-photo { border-top-color: var(--accent); }
.profile-card h3 { font-size: var(--fs-h3); }
.profile-card .p-role { font-family: var(--mono); font-size: 12.5px; color: var(--quiet); margin: 6px 0 10px; }
.profile-card p { font-size: 15.5px; line-height: 1.5; }
.profile-card .p-links { margin-top: auto; padding-top: 10px; font-size: 15px; }
.profile-card .p-attr { font-family: var(--mono); font-size: 11.5px; color: var(--quiet); }

.org-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.org-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 14px; align-items: center; border: 1px solid var(--rule); padding: 12px 14px; text-decoration: none; color: var(--ink); background: var(--paper-2); }
.org-card:hover { border-color: var(--ink); color: var(--ink); }
.org-logo { width: 56px; height: 56px; object-fit: contain; grid-row: span 2; background: var(--ink); }
.org-card.no-logo { grid-template-columns: minmax(0, 1fr); }
.org-name { font-family: var(--display); font-weight: 800; font-size: 19px; text-transform: uppercase; line-height: 1; }
.org-host { font-family: var(--mono); font-size: 12px; color: var(--quiet); }
.entity-ref { white-space: nowrap; }

.related { width: 100%; max-width: var(--breakout); margin: clamp(40px, 4.5vw, 72px) auto 0; border-top: 5px solid var(--ink); padding-top: 18px; }
.related h2 { font-size: var(--fs-h3); margin-bottom: 14px; }
.related-links, .further-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px 30px; }
.related-links a, .further-grid a {
  display: flex; flex-direction: column; gap: 8px; border-top: 2px solid var(--accent); padding-top: 12px;
  text-decoration: none; color: var(--ink); font-family: var(--display); font-weight: 800;
  font-size: clamp(17px, 1.5vw, 22px); text-transform: uppercase; line-height: 1.06; text-wrap: balance;
}
.related-links a:hover, .further-grid a:hover { color: var(--accent); }
.related-links .r-sec, .further-grid .f-sec { font-family: var(--body); font-size: 11.5px; font-weight: 600; letter-spacing: .18em; color: var(--quiet); text-transform: uppercase; }

/* ---------- category + archive ---------- */
.cat-body .wrap { padding-block: clamp(26px, 3vw, 56px); }
.cat-intro { max-width: 62ch; font-size: var(--fs-lead); line-height: 1.4; }
.cat-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: clamp(18px, 2vw, 30px); }
@media (min-width: 768px) { .cat-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } }
.cat-list > li { display: flex; }
.cat-list .card { width: 100%; }
.archive-group { margin-top: clamp(28px, 3vw, 52px); }
.archive-group h2 { font-size: var(--fs-h2); border-bottom: 3px solid var(--ink); padding-bottom: 8px; display: flex; align-items: center; gap: 12px; }
.archive-list { list-style: none; margin: 0; padding: 0; }
.archive-list li { border-bottom: 1px solid var(--rule); }
.archive-list a { display: grid; gap: 2px 20px; padding: 13px 0; text-decoration: none; color: var(--ink); }
@media (min-width: 1024px) { .archive-list a { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: baseline; } }
.archive-list a:hover { background: rgba(23,21,15,.05); }
.archive-list .a-title { font-family: var(--display); font-weight: 800; font-size: 22px; text-transform: uppercase; line-height: 1; }
.archive-list .a-dek { font-size: 15px; line-height: 1.45; color: #3B3527; }

/* CSS-only expander for long lists */
.expander { margin-top: 14px; }
.expander input { position: absolute; opacity: 0; pointer-events: none; }
.expander .more-items { display: none; }
.expander input:checked ~ .more-items { display: block; }
.expander label {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer; margin-top: 12px;
  font-family: var(--display); font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: .07em;
  border-bottom: 3px solid var(--accent);
}
.expander input:checked ~ label .lbl-more { display: none; }
.expander .lbl-less { display: none; }
.expander input:checked ~ label .lbl-less { display: inline; }

.notfound .wrap { padding-block: clamp(40px, 6vw, 110px); }
.notfound h1 { font-size: var(--fs-h1); }

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

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
.colophon-head{flex-wrap:wrap!important}
.colophon-head > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor-row > .sponsor{flex:0 0 auto!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:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
.sponsor.sponsor{justify-content:center!important}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp: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}

/* pipeline: one brand treatment per tile — the name reads at the blurb's own size */
.sponsor .sp-brand{font:inherit!important;font-weight:700!important;letter-spacing:inherit!important;text-transform:none!important;color:inherit!important;display:inline!important;}

/* MAPKIT_BEGIN — injected real geodata; pins are links */
.map-slot{padding:0;background:none!important;border:0!important;display:flex;align-items:center;justify-content:center;min-height:0!important}
.map-slot>svg.mapkit{width:100%!important;max-width:100%;height:auto;max-height:none;margin:0 auto}
.map-slot{width:100%}
.map-slot{aspect-ratio:auto!important;height:auto!important}
.map-slot::after,.map-slot::before{content:none!important;display:none!important}
.map-figure figcaption{}
.mapkit-panels{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:16px;width:100%}
.mapkit-panels>svg.mapkit{width:100%;height:auto;display:block}
@media (max-width:700px){.mapkit-panels{grid-template-columns:minmax(0,1fr)}}
.mapkit__pin{cursor:pointer}
.mapkit__pin text{paint-order:stroke;stroke:#EDEAE3;stroke-width:3px;stroke-linejoin:round}
.mapkit__pin:hover circle{r:10.6}
.mapkit__pin:hover text{font-weight:700}
/* MAPKIT_END */

/* op-money-columns: the supporters block ran one tile per row — 4 tiles,
   564px at 390, 7% of the whole page. Two columns bring it to
   378px (33% shorter). Checked before writing: no new overflow, smallest mark still
   136px wide, longest blurb 1 lines, tile heights 177-201px.
   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-row), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .sponsor-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .sponsor-row > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-row > * *{min-width:0!important;max-width:100%}
    .sponsor-row img,.sponsor-row svg{max-width:100%;height:auto}
}

/* op-money-cutoff: at 320 the grid column is pinned at 316px, 36px wider than the 280px column at 320. Structural only — no spacing value of mine: the mark is
   held to the box it is given, the column is allowed to shrink, or the tile is measured
   border-box. Trialled before writing: the cut-off is gone, no new overflow, the smallest mark
   still measures over 70px. Phone widths only; 390 and desktop are untouched. */
@media (max-width:360px){
  .wrap{grid-template-columns:minmax(0,1fr)!important}
  .sponsor-group{min-width:0!important;max-width:100%!important}
}

/* op-hover-pad */
.archive-list a{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.article-body > figure.article-figure.bleed > img,
  div.article-body > figure.article-figure.mat > img,
  div.end-unit > figure.article-figure.mat > img,
  div.featured-grid > figure.featured-fig > img,
  div.trio-grid > a.card.card--short > img,
  div.trio-grid > a.card.card--tall > img,
  figure.article-figure.plate > span.plate-frame > img,
  li > a.card.card--short > img,
  main > section.hero > img.hero-img,
  main > section.opener > img.opener-img){height:auto}
/* op-img-dims:end */

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