/* ==========================================================================
   WoW Fail Blog — "Screen light"
   Palette, 5 members with named jobs:
     --ground  #0A0B0D  near-black page ground
     --panel   #14161A  subordinate ground for mats and plates
     --ink     #F0EDE6  body and display ink
     --accent  #3B82F6  saturated blue  (hue ~220) — sections, links, filled band
     --flag    #FFC53D  saturated amber (hue ~45)  — datelines, figures, filled plate
   The two saturated members sit ~175deg apart and each carries a real area:
   the blue Classic/Genre band ground and the amber Business stat plate.
   ========================================================================== */

:root {
  --ground: #0A0B0D;
  --panel: #14161A;
  --panel-2: #191C21;
  --line: #22262C;
  --line-2: #2A2E34;
  --ink: #F0EDE6;
  --ink-2: #CFCBC2;
  --muted: #8C9298;
  --accent: #3B82F6;
  --accent-deep: #16304E;
  --accent-ink: #9CC4FF;
  --flag: #FFC53D;
  --flag-deep: #B8331F;

  --sans: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Bricolage Grotesque', 'Work Sans', system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gut: 20px;
  --wrap: 100%;
  --prose: 100%;
  --break: 100%;
  --body: 17px;
  --lead-size: 20px;
  --cap: 14px;
  --credit: 11px;
  --h1: 40px;
  --h2: 26px;
  --h3: 20px;
  --kick: 11px;
  --para: 1.1em;
  --band: 56px;
}

@media (min-width: 768px) {
  :root { --gut: 34px; --wrap: 700px; --prose: 62ch; --break: 700px;
          --body: 17px; --lead-size: 22px; --h1: 56px; --h2: 30px; --h3: 21px; --band: 72px; }
}
@media (min-width: 900px) {
  :root { --gut: 40px; --wrap: 840px; --prose: 64ch; --break: 840px;
          --h1: 64px; --h2: 32px; --h3: 21px; --band: 80px; }
}
@media (min-width: 1024px) {
  :root { --gut: 44px; --wrap: 940px; --prose: 66ch; --break: 940px;
          --body: 18px; --lead-size: 25px; --cap: 15px; --credit: 12px;
          --h1: 72px; --h2: 34px; --h3: 22px; --band: 88px; }
}
@media (min-width: 1280px) {
  :root { --gut: 56px; --wrap: 1180px; --prose: 70ch; --break: 1120px;
          --body: 19px; --lead-size: 28px; --h1: 92px; --h2: 40px; --h3: 24px; --band: 104px; }
}
/* --- above the desktop cap: the page gains measure, size and breakout ------- */
@media (min-width: 1600px) {
  :root { --gut: 72px; --wrap: 1440px; --prose: 76ch; --break: 1340px;
          --body: 20px; --lead-size: 31px; --cap: 16px; --credit: 13px;
          --h1: 116px; --h2: 46px; --h3: 26px; --kick: 12px; --band: 124px; }
}
@media (min-width: 1920px) {
  :root { --gut: 92px; --wrap: 1720px; --prose: 82ch; --break: 1600px;
          --body: 21px; --lead-size: 34px; --cap: 17px;
          --h1: 140px; --h2: 52px; --h3: 28px; --band: 142px; }
}
@media (min-width: 2560px) {
  :root { --gut: 120px; --wrap: 2100px; --prose: 88ch; --break: 1940px;
          --body: 22px; --lead-size: 38px; --cap: 18px; --credit: 14px;
          --h1: 168px; --h2: 60px; --h3: 30px; --kick: 13px; --band: 168px; }
}

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

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

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

img, svg { max-width: 100%; }
img { display: block; height: auto; border: 0; }

a { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: 3px; text-decoration-color: rgba(59,130,246,.55); }
a:hover { color: var(--flag); text-decoration-color: var(--flag); }
a:focus-visible { outline: 2px solid var(--flag); outline-offset: 3px; }

::selection { background: var(--flag); color: var(--ground); }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -.03em;
                 line-height: 1.04; margin: 0; text-wrap: balance; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 200; background: var(--flag); color: var(--ground);
              padding: 10px 16px; font-weight: 600; }

.kicker { font-family: var(--display); font-weight: 700; font-size: var(--kick);
          letter-spacing: .2em; text-transform: uppercase; color: var(--accent-ink);
          display: flex; align-items: center; gap: 9px; }
.kicker svg { width: 1.35em; height: 1.35em; flex: none; }
.kicker--flag { color: var(--flag); }

/* the drawn device: a tick on a rule, used as the section divider ------------ */
.tick-rule { display: block; width: 100%; height: 14px; color: var(--line-2); }
.tick-rule .hit { color: var(--flag); }

/* ---------------------------------------------------------------- masthead -- */
.masthead { border-bottom: 1px solid var(--line); background: var(--ground);
            position: relative; z-index: 60; }
.masthead__in { display: flex; flex-wrap: wrap; align-items: flex-end;
                justify-content: space-between; gap: 0 40px; padding: 22px 0 0; }
.wordmark { display: inline-flex; align-items: flex-start; gap: 14px;
            text-decoration: none; color: inherit; }
.wordmark:hover { color: inherit; }
.wordmark__mark { width: 34px; height: 52px; flex: none; color: var(--accent); margin-top: 5px; }
.wordmark__type { font-family: var(--display); font-weight: 800; text-transform: uppercase;
                  font-size: clamp(20px, 3.1vw, 48px); line-height: .9; letter-spacing: -.045em;
                  white-space: nowrap; }
/* the one mark that travels across every page */
.wordmark__rule { display: block; width: 62px; height: 4px; background: var(--flag);
                  margin-top: 12px; }
.wordmark__tag { display: block; margin-top: 10px; font-size: 13px; line-height: 1.35;
                 letter-spacing: .02em; color: var(--muted); max-width: 42ch;
                 font-family: var(--sans); font-weight: 400; text-transform: none;
                 letter-spacing: normal; }

.nav { font-family: var(--sans); flex: 1 1 100%; margin-top: 20px;
       border-top: 1px solid var(--line); }
.nav__list { list-style: none; display: grid; width: 100%; margin: 0; padding: 0;
             grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.nav__link { display: flex; width: 100%; align-items: center; gap: 7px; padding: 13px 0 11px;
             font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
             color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; }
.nav__link svg { width: 15px; height: 15px; flex: none; }
.nav__link:hover { color: var(--flag); border-bottom-color: var(--flag); }
.nav__link[aria-current="page"] { border-bottom-color: var(--flag); color: var(--ink); }
.nav__item { position: relative; display: flex; min-width: 0; }
.nav__sub { list-style: none; margin: 0; padding: 12px 0; position: absolute; top: 100%; left: -16px;
            min-width: 250px; background: var(--panel); border: 1px solid var(--line-2);
            opacity: 0; visibility: hidden; transform: translateY(-5px);
            transition: opacity .14s ease, transform .14s ease; z-index: 80; }
/* hover-safety: bridge the gap between the item and its panel */
.nav__item::after { content: ""; position: absolute; top: 100%; left: -16px; right: -16px;
                    height: 14px; }
.nav__item:hover .nav__sub, .nav__item:focus-within .nav__sub {
  opacity: 1; visibility: visible; transform: translateY(0); }
.nav__sub a { display: block; padding: 8px 16px; font-size: 14px; font-weight: 500;
              letter-spacing: .05em; color: var(--ink); text-decoration: none; }
.nav__sub a:hover { background: var(--panel-2); color: var(--flag); }
@media (max-width: 767px) {
  .nav__sub { position: static; opacity: 1; visibility: visible; transform: none;
              background: none; border: 0; border-left: 2px solid var(--line-2);
              padding: 2px 0 6px; margin: 0 0 4px 6px; min-width: 0; }
  .nav__sub a { padding: 5px 12px; font-size: 13px; color: var(--muted); }
  .nav__list { gap: 0 18px; }
}

/* ------------------------------------------------------------------ bands -- */
.band { padding-block: var(--band); }
.band--tight { padding-block: calc(var(--band) * .62); }
.band__head { display: flex; flex-wrap: wrap; align-items: baseline;
              justify-content: space-between; gap: 14px 32px; margin-bottom: 34px; }
.band__title { font-size: var(--h2); max-width: 26ch; }
.band__more { font-family: var(--display); font-weight: 700; font-size: 13px;
              letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
              color: var(--accent-ink); white-space: nowrap; }
.band__blurb { margin: 0; color: var(--ink-2); max-width: 66ch; font-size: 1.02em; }

/* ------------------------------------------------------------------- hero -- */
.hero { position: relative; }
.hero__media { position: relative; width: 100%; height: clamp(440px, 78vh, 1080px);
               background: var(--panel); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,11,13,.82) 0%, rgba(10,11,13,.18) 30%,
              rgba(10,11,13,.42) 58%, rgba(10,11,13,.97) 100%); }
.hero__text { position: absolute; inset: auto 0 0 0; padding-bottom: clamp(26px, 4vw, 72px); }
.hero h1 { font-weight: 800; font-size: var(--h1); line-height: .9; letter-spacing: -.04em;
           margin: 16px 0 0; max-width: 19ch; }
.hero__dek { margin: 22px 0 0; max-width: 58ch; font-size: var(--lead-size); line-height: 1.38;
             color: var(--ink); font-weight: 300; }
.hero__foot { display: flex; flex-wrap: wrap; gap: 6px 40px; align-items: baseline;
              justify-content: space-between; padding-top: 14px; }

/* ---------------------------------------------------------------- figures -- */
/* One family: same hairline, same mat depth, same caption rhythm.
   Three treatments — bleed, mat, rule — plus a small in-column inset.        */
.fig { margin: 0; }
.fig img { width: 100%; }
.fig__cap { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline;
            gap: 4px 28px; }
.fig__caption { font-size: var(--cap); line-height: 1.5; color: var(--ink-2);
                max-width: 68ch; flex: 1 1 320px; margin: 0;
                border-left: 2px solid var(--line-2); padding-left: 14px; }
.fig__credit { font-family: var(--mono); font-size: var(--credit); line-height: 1.5;
               letter-spacing: .01em; color: var(--muted); margin: 0; flex: 0 1 auto; }
@media (min-width: 1280px) { .fig__cap { flex-wrap: nowrap; }
  .fig__credit { text-align: right; max-width: 30%; } }

.fig--bleed > .fig__frame { width: 100%; height: clamp(300px, 46vw, 820px); }
.fig--bleed > .fig__frame img { height: 100%; object-fit: cover; }
.fig--bleed > .fig__cap { max-width: var(--wrap); margin-inline: auto;
                          padding-inline: var(--gut); margin-top: 14px; }

.fig--mat > .fig__frame { position: relative; background: var(--panel);
                          border: 1px solid var(--line); padding: 12px; }
@media (min-width: 1024px) { .fig--mat > .fig__frame { padding: 16px; } }
.fig--mat > .fig__frame::after { content: ""; position: absolute; right: -6px; bottom: -6px;
  width: 46%; height: 2px; background: var(--flag); }

.fig--rule > .fig__frame { border-top: 3px solid var(--accent); padding-top: 12px; }
.fig--rule.is-flag > .fig__frame { border-top-color: var(--flag); }

.fig--inset { background: var(--panel); border: 1px solid var(--line); padding: 12px; }
@media (min-width: 1024px) {
  .fig--inset { float: right; width: 40%; margin: 6px 0 20px 32px; }
}

/* --------------------------------------------------------------- articles -- */
.post__head { padding-top: clamp(26px, 3vw, 56px); }
.post__head__in { display: grid; gap: clamp(24px, 2.6vw, 54px);
                  grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 1024px) {
  .post__head__in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
@media (min-width: 1920px) {
  .post__head__in { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
.post__h1 { font-weight: 800; font-size: calc(var(--h1) * .64); line-height: .95;
            letter-spacing: -.035em; margin: 15px 0 0; max-width: 20ch; }
.post__standfirst { margin: 20px 0 0; max-width: 50ch; font-size: var(--lead-size);
                    line-height: 1.34; font-weight: 300; color: var(--ink); }
.post__meta { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line);
              display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline;
              font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
              color: var(--muted); font-weight: 600; }
.post__meta a { color: var(--accent-ink); }
.post__lead { margin-top: clamp(22px, 2.4vw, 44px); }

/* the reading column is CENTRED in the content area; wide units break out of it
   symmetrically, so the right side is never a dead margin (ARTICLE_RECHECK B7) */
.post__body { display: grid; justify-content: center;
  grid-template-columns: minmax(0, 1fr) min(var(--prose), 100%) minmax(0, 1fr);
  padding-top: clamp(30px, 3.4vw, 60px); }
.post__body > * { grid-column: 2; min-width: 0; }
.post__body > p { margin: 0 0 var(--para); }
.post__body > h2 { grid-column: 2; font-size: var(--h2); margin: 1.5em 0 .55em;
                   max-width: 24ch; letter-spacing: -.028em; }
.post__body > h2:first-child { margin-top: 0; }
.post__body > h2 .h2-tick { display: block; width: 54px; height: 3px;
                            background: var(--accent); margin-bottom: 16px; }
.post__body > ul, .post__body > ol { margin: 0 0 var(--para); padding-left: 1.25em; }
.post__body > .breakout { grid-column: 1 / -1; width: min(var(--break), 100%);
                          margin-inline: auto; }
/* insertions: space on BOTH sides — always at least 2.4em (paragraph gap is 1.1em)
   and never below the 32px desktop / 24px mobile floor */
.post__body > .ins { margin-block: max(2.4em, clamp(34px, 3.4vw, 60px)); }
.post__body > .ins:first-child { margin-top: 0; }
.post__body::after { content: ""; grid-column: 1 / -1; display: block; height: 1px; }

/* a run of prose that a small inset figure floats inside -------------------- */
.post__body > .flow { grid-column: 2; }
.flow::after { content: ""; display: block; clear: both; }
.flow > p { margin: 0 0 var(--para); }
.flow > p:last-child { margin-bottom: 0; }

/* deliberately off the common left edge, so the page has more than one alignment */
@media (min-width: 1280px) {
  .post__body > .ins--offset { width: min(var(--break), 84%); margin-left: auto; margin-right: 0; }
}

.lead { font-size: 1.16em; line-height: 1.45; font-weight: 300; color: var(--ink); }

.pullquote { margin: 0; border-top: 3px solid var(--flag); border-bottom: 1px solid var(--line);
             padding: clamp(20px, 2.4vw, 40px) 0; }
.pullquote p { margin: 0; font-family: var(--display); font-weight: 300;
               font-size: calc(var(--h2) * .82); line-height: 1.16; letter-spacing: -.022em;
               max-width: 26ch; }

.blockquote { margin: 0; background: var(--panel); border-left: 3px solid var(--accent);
              padding: clamp(18px, 2vw, 30px) clamp(18px, 2.2vw, 34px); }
.blockquote p { margin: 0; font-size: 1.06em; line-height: 1.5; color: var(--ink); }
.blockquote cite { display: block; margin-top: 12px; font-style: normal;
                   font-family: var(--mono); font-size: var(--credit); color: var(--muted); }

.callout { background: var(--panel); border: 1px solid var(--line-2);
           border-top: 3px solid var(--flag); padding: clamp(20px, 2.2vw, 34px); }
.callout h3 { font-size: var(--h3); margin: 0 0 12px; }
.callout p { margin: 0; color: var(--ink-2); }
.callout > :last-child { margin-bottom: 0; }

.note { background: var(--panel); border-left: 2px solid var(--muted);
        padding: 14px 18px; font-size: .94em; color: var(--ink-2); margin: 0; }

/* --- notes-for-design units ------------------------------------------------ */
.unit { background: var(--panel); border: 1px solid var(--line); }
.unit__head { display: flex; align-items: center; gap: 10px; padding: 16px 20px;
              border-bottom: 1px solid var(--line); }
.unit__head svg { width: 18px; height: 18px; flex: none; color: var(--flag); }
.unit__title { font-family: var(--display); font-weight: 700; font-size: 13px;
               letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.unit__body { padding: 20px; }
@media (min-width: 1024px) { .unit__head { padding: 18px 26px; } .unit__body { padding: 26px; } }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px 26px;
               padding: 14px 0; border-top: 1px solid var(--line); }
.timeline li:first-child { border-top: 0; padding-top: 0; }
.timeline li:last-child { padding-bottom: 0; }
.t-when { font-family: var(--mono); font-size: .84em; line-height: 1.45; color: var(--flag);
          letter-spacing: .01em; }
.t-what { color: var(--ink-2); font-size: .97em; line-height: 1.5; }
@media (min-width: 768px) {
  .timeline li { grid-template-columns: minmax(140px, 22%) minmax(0, 1fr); align-items: baseline; }
}
@media (min-width: 1600px) { .timeline li { grid-template-columns: minmax(190px, 20%) minmax(0, 1fr); } }

.statrow { display: grid; gap: 1px; background: var(--line);
           grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.statblock { background: var(--panel); padding: 20px; display: flex; flex-direction: column;
             gap: 8px; }
.stat-num { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 3.4vw, 58px);
            line-height: .9; letter-spacing: -.04em; color: var(--flag); }
.stat-label { font-size: .88em; line-height: 1.45; color: var(--ink-2); }

.deflist { margin: 0; display: grid; gap: 0; }
.deflist > div { padding: 14px 0; border-top: 1px solid var(--line);
                 display: grid; gap: 4px 26px; grid-template-columns: minmax(0, 1fr); }
.deflist > div:first-child { border-top: 0; padding-top: 0; }
.deflist dt { font-weight: 600; color: var(--ink); font-size: .97em; line-height: 1.4; }
.deflist dd { margin: 0; color: var(--ink-2); font-size: .97em; line-height: 1.5; }
@media (min-width: 1024px) {
  .deflist > div { grid-template-columns: minmax(180px, 30%) minmax(0, 1fr); align-items: baseline; }
}

/* --- tables ---------------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.datatable, .versus { width: 100%; border-collapse: collapse; font-size: .95em;
                      min-width: 460px; }
.datatable caption, .versus caption { text-align: left; font-family: var(--display);
  font-weight: 700; font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 12px; }
.datatable th, .versus th { text-align: left; font-weight: 600; color: var(--ink);
  border-bottom: 2px solid var(--line-2); padding: 12px 16px 12px 0; font-size: .92em;
  letter-spacing: .06em; text-transform: uppercase; }
.datatable td, .versus td { border-bottom: 1px solid var(--line); padding: 13px 16px 13px 0;
  color: var(--ink-2); vertical-align: top; }
.versus td:first-child { color: var(--ink); font-weight: 600; }

/* --- charts ---------------------------------------------------------------- */
.chart { margin: 0; }
.chart svg { width: 100%; height: auto; display: block; }
.chart figcaption { margin-top: 12px; font-size: var(--cap); color: var(--ink-2);
                    border-left: 2px solid var(--line-2); padding-left: 14px; max-width: 68ch; }
.chart .c-axis { stroke: var(--line-2); stroke-width: 1; }
.chart .c-bar { fill: var(--accent); }
.chart .c-bar.is-flag { fill: var(--flag); }
.chart .c-line { fill: none; stroke: var(--accent); stroke-width: 3;
                 stroke-linecap: round; stroke-linejoin: round; }
.chart .c-line--dead { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 1 9; }
.chart .c-dot { fill: var(--accent); }
.chart .c-dot.is-flag { fill: var(--flag); }
.chart text { font-family: var(--mono); font-size: 11px; fill: var(--muted); }
.chart .c-val { fill: var(--ink); }

/* ------------------------------------------------------------------- cards -- */
.grid { display: grid; gap: clamp(26px, 2.6vw, 44px); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }

.card { display: flex; flex-direction: column; height: 100%; text-decoration: none;
        color: inherit; }
.card:hover { color: inherit; }
.card__frame { position: relative; aspect-ratio: 16 / 10; background: var(--panel);
               border-top: 3px solid var(--accent); overflow: hidden; }
.card.is-flag .card__frame { border-top-color: var(--flag); }
.card__frame img { width: 100%; height: 100%; object-fit: cover;
                   transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.card:hover .card__frame img { transform: scale(1.035); }
.card__kicker { margin-top: 15px; font-family: var(--display); font-weight: 700;
                font-size: var(--kick); letter-spacing: .2em; text-transform: uppercase;
                color: var(--muted); display: flex; align-items: center; gap: 8px; }
.card__kicker svg { width: 14px; height: 14px; flex: none; }
.card__title { margin: 9px 0 0; font-size: var(--h3); line-height: 1.12;
               letter-spacing: -.02em; min-height: 2.24em; }
.card:hover .card__title { color: var(--flag); }
.card__dek { margin: 10px 0 0; font-size: .92em; line-height: 1.5; color: var(--muted);
             max-width: 46ch; }
.card__foot { margin-top: auto; padding-top: 14px; }

/* ------------------------------------------------------------- feature band */
.feature { display: grid; gap: clamp(26px, 3vw, 60px);
           grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 1024px) { .feature { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
@media (min-width: 1920px) { .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.feature__title { font-size: calc(var(--h2) * 1.12); line-height: 1.02; max-width: 21ch; }
.feature :where(a) { text-decoration: none; color: inherit; }
.feature a:hover .feature__title { color: var(--flag); }

/* -------------------------------------------------------- alternating run -- */
.alt { display: grid; gap: clamp(30px, 3.2vw, 56px); }
.alt__item { display: grid; gap: clamp(20px, 2.4vw, 46px); align-items: center;
             grid-template-columns: minmax(0, 1fr); padding-top: clamp(24px, 2.4vw, 42px);
             border-top: 1px solid var(--line); }
@media (min-width: 1024px) {
  .alt__item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .alt__item:nth-child(even) .alt__fig { order: 2; }
}
.alt__item :where(a) { text-decoration: none; color: inherit; }
.alt__num { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 3vw, 56px);
            line-height: .82; letter-spacing: -.045em; color: #646A73; }
.alt__title { margin: 12px 0 0; font-size: var(--h3); line-height: 1.1; max-width: 24ch; }
.alt__item a:hover .alt__title { color: var(--flag); }

/* ------------------------------------------------------------- stat plate -- */
.plate { background: var(--flag); color: var(--ground); }
.plate :where(a) { color: var(--ground); text-decoration-color: rgba(10,11,13,.5); }
.plate :where(a):hover { color: var(--ground); text-decoration-color: var(--ground); }
.plate__in { display: grid; gap: clamp(26px, 3vw, 64px);
             grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 1024px) { .plate__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.plate__num { font-family: var(--display); font-weight: 800; letter-spacing: -.05em;
              line-height: .82; font-size: clamp(46px, 7vw, 132px); }
.plate__num--dead { color: #6B4A00; }
.plate__sep { font-family: var(--mono); font-size: 13px; letter-spacing: .16em;
              text-transform: uppercase; margin: 16px 0 12px; color: #4A3300; }
.plate__kicker { font-family: var(--display); font-weight: 700; font-size: var(--kick);
                 letter-spacing: .2em; text-transform: uppercase; color: #4A3300;
                 display: flex; align-items: center; gap: 9px; }
.plate__kicker svg { width: 1.35em; height: 1.35em; }
.plate p { color: #241A00; }

/* ------------------------------------------------------------- accent band -- */
.split { background: var(--accent-deep); color: var(--ink); }
.split :where(a) { color: var(--ink); }
.split :where(a):hover { color: var(--flag); }
.split__in { display: grid; gap: clamp(28px, 3vw, 56px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .split__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.split__col { display: flex; flex-direction: column; }
.split__col + .split__col { border-top: 2px solid rgba(240,237,230,.22); padding-top: 30px; }
@media (min-width: 1024px) {
  .split__col + .split__col { border-top: 0; border-left: 2px solid rgba(240,237,230,.22);
                              padding-top: 0; padding-left: clamp(28px, 3vw, 56px); }
}
.split p { color: var(--ink-2); }
.split p.split__kicker { font-family: var(--display); font-weight: 700; font-size: var(--kick);
                 letter-spacing: .2em; text-transform: uppercase; color: var(--flag);
                 display: flex; align-items: center; gap: 9px; }
.split p.split__kicker svg { width: 1.35em; height: 1.35em; }
.split h2 { font-size: calc(var(--h2) * .92); margin: 16px 0 0; max-width: 22ch; }
.split p { color: var(--ink-2); }
.split__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 0; }
.split__list li { border-top: 1px solid rgba(240,237,230,.2); }
.split__list a { display: block; padding: 13px 0; font-weight: 600; text-decoration: none;
                 font-size: 1.02em; line-height: 1.35; }
.split__list a:hover { text-decoration: underline; }

/* -------------------------------------------------------------- flagship --- */
.flagship { background: var(--panel); border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line); }
.flagship__in { display: grid; gap: clamp(26px, 3vw, 56px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1280px) { .flagship__in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.flagship :where(a) { text-decoration: none; color: inherit; }
.flagship h2 { font-size: calc(var(--h2) * 1.08); margin: 16px 0 0; max-width: 22ch; }
.flagship a:hover h2 { color: var(--flag); }

/* ---------------------------------------------------------------- buttons -- */
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display);
       font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
       text-decoration: none; background: var(--flag); color: var(--ground);
       padding: 14px 22px; border: 0; }
.btn:hover { background: var(--ink); color: var(--ground); }
.btn svg { width: 18px; height: 10px; }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn--ghost:hover { background: var(--panel); color: var(--flag); border-color: var(--flag); }
.btn--dark { background: var(--ground); color: var(--ink); }
.btn--dark:hover { background: var(--panel); color: var(--flag); }

/* ------------------------------------------------------------- supporters -- */
/* A colophon at the foot of the masthead area, not a banner. Every slot is the
   same self-contained unit; prominence is a CLASS (.feat), never a position.
   Tiles are a CONSTANT width — a slot never grows.                           */
.colophon { border-top: 1px solid var(--line); }
.colophon__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 26px;
                  margin-bottom: 24px; }
.colophon__title { font-family: var(--display); font-weight: 700; font-size: 13px;
                   letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.colophon__note { font-size: 14px; color: var(--muted); margin: 0; max-width: 60ch; }
.colophon__group { margin-top: 26px; }
.colophon__grouplabel { font-family: var(--mono); font-size: var(--credit);
                        letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
                        margin-bottom: 14px; }
.colophon__grid { display: grid; gap: 14px; justify-content: start;
                  grid-template-columns: repeat(auto-fit, 288px); }
@media (max-width: 719px) { .colophon__grid { grid-template-columns: repeat(auto-fit, 100%); } }
.sponsor { display: flex; flex-direction: column; gap: 9px; min-height: 128px;
           padding: 18px; background: var(--panel); border: 1px solid var(--line);
           text-decoration: none; color: inherit; }
.sponsor:hover { border-color: var(--flag); color: inherit; }
.sponsor.feat { background: var(--panel-2); border-color: var(--line-2);
                border-top: 3px solid var(--flag); }
.sponsor-name { font-family: var(--display); font-weight: 700; font-size: 17px;
                line-height: 1.14; letter-spacing: -.02em; color: var(--ink); }
.sponsor:hover .sponsor-name { color: var(--flag); }
.sponsor-blurb { font-size: 13.5px; line-height: 1.45; color: var(--muted); margin-top: auto; }

/* ------------------------------------------------------------- categories -- */
.cathead { padding-top: clamp(26px, 3vw, 54px); }
.cathead__in { display: grid; gap: clamp(24px, 2.6vw, 54px); grid-template-columns: minmax(0, 1fr);
               align-items: end; }
@media (min-width: 1024px) { .cathead__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.cathead h1 { font-weight: 800; font-size: calc(var(--h1) * .56); line-height: .96;
              letter-spacing: -.035em; margin: 14px 0 0; max-width: 20ch; }
.cathead__blurb { margin: 18px 0 0; font-size: 1.06em; line-height: 1.5; color: var(--ink-2);
                  max-width: 62ch; }
.cathead__count { margin-top: 18px; font-family: var(--mono); font-size: var(--credit);
                  letter-spacing: .12em; text-transform: uppercase; color: var(--flag); }

.catlead { display: grid; gap: clamp(24px, 2.8vw, 52px); grid-template-columns: minmax(0, 1fr);
           align-items: center; }
@media (min-width: 1024px) { .catlead { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.catlead :where(a) { text-decoration: none; color: inherit; }
.catlead h2 { font-size: calc(var(--h2) * 1.02); margin: 15px 0 0; max-width: 22ch; }
.catlead a:hover h2 { color: var(--flag); }

.cat-list { list-style: none; margin: 0; padding: 0; display: grid;
            gap: max(2.4em, clamp(34px, 2.8vw, 56px));
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 278px), 1fr)); }
.cat-list > li { display: flex; }

.catnav { border-top: 1px solid var(--line); }
.catnav__list { list-style: none; margin: 0 0 0 -1px; padding: 0; display: grid; gap: 0;
                background: transparent;
                grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.catnav__list a { display: flex; align-items: center; gap: 11px; padding: 20px;
                  background: var(--ground); text-decoration: none; color: var(--ink);
                  font-family: var(--display); font-weight: 700; font-size: 14px;
                  letter-spacing: .1em; text-transform: uppercase; height: 100%;
                  border: 1px solid var(--line); margin: -1px 0 0 -1px; }
.catnav__list a svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.catnav__list a:hover { background: var(--panel); color: var(--flag); }
.catnav__list a:hover svg { color: var(--flag); }

/* register / archive -------------------------------------------------------- */
.register { width: 100%; border-collapse: collapse; }
.register th { text-align: left; font-family: var(--display); font-weight: 700; font-size: 12px;
               letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
               border-bottom: 2px solid var(--line-2); padding: 0 20px 12px 0; }
.register td { border-bottom: 1px solid var(--line); padding: 16px 20px 16px 0;
               vertical-align: top; }
.register td:last-child, .register th:last-child { padding-right: 0; }
.register a { font-family: var(--display); font-weight: 600; font-size: 1.02em;
              letter-spacing: -.01em; text-decoration: none; color: var(--ink); }
.register a:hover { color: var(--flag); }
.register__sec { font-family: var(--mono); font-size: var(--credit); letter-spacing: .1em;
                 text-transform: uppercase; color: var(--accent-ink); white-space: nowrap; }
.register__thumb { width: 92px; }
.register__thumb img { width: 92px; height: 58px; object-fit: cover; background: var(--panel); }
@media (max-width: 767px) { .register__thumb, .register th.register__thumb { display: none; } }

/* --------------------------------------------------------------- related --- */
.related { border-top: 2px solid var(--line-2); margin-top: max(2.4em, clamp(34px, 3.4vw, 60px)); }
.related__title { font-family: var(--display); font-weight: 700; font-size: 13px;
                  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
                  margin-bottom: 22px; }
.related-links, .further-grid { list-style: none; margin: 0 0 0 -1px; padding: 0; display: grid;
  gap: 0; background: transparent;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.related-links > li { display: flex; margin: -1px 0 0 0; }
.related-links a, .further-grid a { display: flex; flex-direction: column; gap: 9px;
  padding: 22px; background: var(--ground); text-decoration: none; width: 100%;
  border: 1px solid var(--line); margin: 0 0 0 -1px; }
.further-grid a { margin-top: -1px; }
.related-links a:hover, .further-grid a:hover { background: var(--panel); }
.related-links .r-sec, .further-grid .r-sec { font-family: var(--mono);
  font-size: var(--credit); letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-ink); }
.related-links .r-title, .further-grid .r-title { font-family: var(--display);
  font-weight: 700; font-size: 1.04em; line-height: 1.2; letter-spacing: -.02em;
  color: var(--ink); }
.related-links a:hover .r-title, .further-grid a:hover .r-title { color: var(--flag); }

/* ----------------------------------------------------------------- cards ---- */
.profile-grid { display: grid; gap: 20px;
                grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.profile-card { background: var(--panel); border: 1px solid var(--line); padding: 22px;
                display: flex; flex-direction: column; gap: 10px; }
.profile-card .p-photo { width: 72px; height: 72px; object-fit: cover; }
.profile-card.no-photo { border-left: 3px solid var(--accent); }
.profile-card h3 { font-size: var(--h3); }
.profile-card .p-role { margin: 0; font-family: var(--mono); font-size: var(--credit);
                        letter-spacing: .1em; text-transform: uppercase; color: var(--flag); }
.profile-card p { margin: 0; font-size: .95em; color: var(--ink-2); }
.profile-card .p-links { margin-top: auto; padding-top: 8px; font-size: .92em; }
.profile-card .p-attr { font-family: var(--mono); font-size: var(--credit); color: var(--muted); }

.org-grid { display: grid; gap: 14px;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.org-card { display: flex; align-items: center; gap: 14px; padding: 16px;
            background: var(--panel); border: 1px solid var(--line); text-decoration: none; }
.org-card:hover { border-color: var(--flag); }
.org-logo { width: 44px; height: 44px; object-fit: contain; flex: none; }
.org-card.no-logo { border-left: 3px solid var(--muted); }
.org-name { font-family: var(--display); font-weight: 700; font-size: 1em; color: var(--ink);
            line-height: 1.2; }
.org-host { font-family: var(--mono); font-size: var(--credit); color: var(--muted);
            display: block; margin-top: 3px; }
.entity-ref { font-weight: 600; white-space: nowrap; }

.gallery { display: grid; gap: 12px;
           grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.gallery figure { margin: 0; }
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: var(--panel); }
.gallery figcaption { margin-top: 8px; font-size: var(--credit); font-family: var(--mono);
                      color: var(--muted); line-height: 1.4; }

.map-figure .map-slot { width: 100%; aspect-ratio: 16 / 9; background: var(--panel);
                        border: 1px dashed var(--line-2); }

/* ------------------------------------------------------------------ prose -- */
.prose { max-width: var(--prose); }
.prose p { margin: 0 0 var(--para); }
.prose h2 { font-size: var(--h2); margin: 1.5em 0 .5em; }
.prose h3 { font-size: var(--h3); margin: 1.6em 0 .45em; }
.prose > :last-child { margin-bottom: 0; }
.prose ul, .prose ol { margin: 0 0 var(--para); padding-left: 1.25em; }
.prose li { margin-bottom: .4em; }

/* ----------------------------------------------------------------- footer -- */
.foot { border-top: 1px solid var(--line); padding-block: clamp(34px, 3.4vw, 64px); }
.foot__in { display: grid; gap: 28px 40px;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.foot__mark { font-family: var(--display); font-weight: 800; font-size: 26px;
              text-transform: uppercase; letter-spacing: -.035em; line-height: .9; }
.foot__rule { display: block; width: 48px; height: 3px; background: var(--flag); margin-top: 10px; }
.foot p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted);
          max-width: 42ch; }
.foot__h { font-family: var(--mono); font-size: var(--credit); letter-spacing: .14em;
           text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot__list a { font-size: 15px; color: var(--ink-2); text-decoration: none; }
.foot__list a:hover { color: var(--flag); }

/* --------------------------------------------------------------- utilities -- */
.u-mono { font-family: var(--mono); }
.u-flag { color: var(--flag); }
.u-muted { color: var(--muted); }
.u-center { max-width: var(--prose); margin-inline: auto; }
.u-hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
          white-space: nowrap; }
hr.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------- bounded long lists ---- */
.expander { border-top: 1px solid var(--line); }
.expander > summary { cursor: pointer; list-style: none; padding: 14px 0 0;
  font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-ink); display: flex; align-items: center; gap: 10px; }
.expander > summary::-webkit-details-marker { display: none; }
.expander > summary::after { content: "+"; font-family: var(--mono); font-size: 16px; color: var(--flag); }
.expander[open] > summary::after { content: "\2212"; }
.expander > summary:hover { color: var(--flag); }
.expander__body { padding-top: 10px; }

/* ------------------------------------------------------------- styleguide -- */
.sg { padding-block: clamp(34px, 3.4vw, 62px); border-top: 1px solid var(--line); }
.sg__h { font-family: var(--mono); font-size: var(--credit); letter-spacing: .16em;
         text-transform: uppercase; color: var(--flag); margin: 0 0 6px; }
.sg__t { font-size: var(--h3); margin: 0 0 6px; }
.sg__n { margin: 0 0 26px; color: var(--muted); font-size: .94em; max-width: 76ch; }
.sg__row { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.sg__narrow { max-width: 360px; }
.sg__swatches { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.sg__sw { border: 1px solid var(--line); }
.sg__sw i { display: block; height: 76px; }
.sg__sw span { display: block; padding: 10px 12px; font-family: var(--mono); font-size: 11px;
               line-height: 1.5; color: var(--muted); }
.sg__sw b { display: block; color: var(--ink); font-family: var(--sans); font-size: 12px;
            letter-spacing: .1em; text-transform: uppercase; }
.sg__icons { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.sg__icon { border: 1px solid var(--line); padding: 16px; text-align: center; color: var(--accent); }
.sg__icon svg { width: 30px; height: 30px; margin-inline: auto; }
.sg__icon em { display: block; margin-top: 10px; font-style: normal; font-family: var(--mono);
               font-size: 11px; color: var(--muted); }
.chart .c-donut-track { fill: none; stroke: var(--line); stroke-width: 16; }
.chart .c-donut-seg { fill: none; stroke-width: 16; stroke-linecap: butt; }

/* 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-feat-level: the partner pool is unranked, so a two-tile accent border marks
   nothing. Match the rest of the row. */
.sponsor.feat .sponsor-logo,.sponsor.feat .logo-box,.sponsor.feat .sp-logo{border-color:var(--line)!important}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
.colophon__head{flex-wrap:wrap!important}
.colophon__head > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-grid-fill: fixed px columns leave a dead strip at wide widths — the tiles
   must stretch, and a tile with its own fixed width has to give that up too */
.colophon__grid{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))!important;justify-content:stretch!important}
.colophon__grid>[data-partner],.colophon__grid>*>[data-partner]{width: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: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):not(.sponsor-box):not(.sp-logo):not(.sponsor__logo){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:5;-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;}

/* op-nav-collapse: this nav printed 374px of stacked links at 390 before any content
   (10 links), and the build shipped no control to close it. A disclosure cannot be
   built from CSS alone — :hover and :focus-within are unreachable on touch until a link has
   already been tapped — so a hidden checkbox and its label were injected immediately before
   the nav, and the nav collapses against the checked state. Exactly the mechanism the builds
   that DO have a burger already use.
   Treatment "filled-soft", seeded from the domain so 175 builds do not all ship the
   same hairline box in the same place; it inherits this build's font and colour, and where the
   nav's own parent has no inline padding (0px measured) the button carries the build's
   gutter (20px) so it cannot sit against the glass. The links are hidden,
   not removed: they stay in the markup. Desktop is untouched — every rule below is inside the
   phone breakpoint (900px here), where the button appears and the nav starts closed.
   Folded with the "max-height" technique and marked with the "dots" icon — the mechanism
   is deliberately not identical across the fleet either. */
.menu-open{display:none}
@media (max-width:900px){
  .menu-open{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:fit-content;margin-inline:auto;justify-self:center;border:0;border-radius:2px;padding:12px 20px;background:color-mix(in srgb, currentColor 14%, transparent);margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .menu-open-bars{width:13px;height:3px;flex:none;border-radius:99px;background:currentColor;box-shadow:5px 0 0 -0.5px currentColor,-5px 0 0 -0.5px currentColor}
  .nav{max-height:0;overflow:hidden;padding-block:0;border-top-width:0;border-bottom-width:0;transition:max-height .28s ease}
  .menu-open-c:checked ~ .nav{max-height:220vh;padding-block:revert;border-top-width:revert;border-bottom-width:revert}
  .masthead__in:has(> .menu-open){display:flow-root}
  .menu-open:not(:has(~ .nav)){display:none}
}

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

/* op-odd-tier-lead: money_slots changed a tier's size — .colophon__grid (5 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){
  .colophon__grid:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}