/* rfae.org — Airflow
   Palette: ground / ink / accent / accent-lift / secondary / muted
   Display: Anybody   Text: Asap                                        */

:root {
  --ground: #E7EEF3;
  --paper: #F7FAFC;
  --ink: #101820;
  --accent: #0F6BB5;
  --accent-lift: #7FC1EE;
  --secondary: #0B4A78;
  --muted: #5C6B78;
  --flag: #C2552F;
  --rule: rgba(16, 24, 32, .22);
  --rule-soft: rgba(16, 24, 32, .12);
  --rule-rev: rgba(247, 250, 252, .3);
  --display: 'Anybody', 'Arial Black', sans-serif;
  --text: 'Asap', system-ui, sans-serif;
  --measure: 92ch;
  --gutter: clamp(18px, 4vw, 44px);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: 'wdth' 125;
  letter-spacing: -0.012em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

.wrap { max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 880px; margin: 0 auto; padding-inline: var(--gutter); }
.band { padding-block: clamp(38px, 6vw, 70px); }
.band-tight { padding-block: clamp(26px, 3.4vw, 40px); }
.band-ink { background: var(--ink); color: var(--paper); }
.band-ink a { color: var(--accent-lift); }
.band-ink a:hover { color: var(--paper); }
.band-blue { background: var(--secondary); color: var(--paper); }
.band-blue a { color: var(--paper); }
.band-paper { background: var(--paper); }
.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 118;
  font-size: 12.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); text-decoration: none;
}
.band-ink .kicker, .band-blue .kicker { color: var(--accent-lift); }
.band-blue .kicker { color: #CFE6F7; }
.eyebrow {
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.band-ink .eyebrow, .band-blue .eyebrow { color: rgba(247, 250, 252, .62); }

/* ---------- drawn device: icons, rules ---------- */

.ico { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico-sm { width: 15px; height: 15px; stroke-width: 1.7; }
.ico-md { width: 24px; height: 24px; }
.ico-lg { width: 46px; height: 46px; stroke-width: 1.3; }
.arc { display: block; fill: none; stroke: var(--flag); stroke-width: 1.8; }

/* ---------- masthead + ribbon index ---------- */

.masthead { background: var(--ground); }
.masthead-top {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
  padding: 14px var(--gutter) 12px; max-width: 1240px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-mark { width: clamp(38px, 4.6vw, 52px); height: clamp(38px, 4.6vw, 52px); color: var(--accent); }
.brand-name {
  font-family: var(--display); font-weight: 900; font-variation-settings: 'wdth' 145;
  font-size: clamp(32px, 4.4vw, 52px); line-height: .84; letter-spacing: -0.015em;
}
.brand-tld {
  font-family: var(--display); font-weight: 600; font-variation-settings: 'wdth' 110;
  font-size: clamp(12.5px, 1.1vw, 15px); letter-spacing: .05em; color: var(--accent);
  display: block; margin-top: 3px;
}
.standing { max-width: 34ch; font-size: 15.5px; line-height: 1.35; color: rgba(16, 24, 32, .72); padding-bottom: 6px; }

.masthead-right { display: flex; align-items: center; gap: 20px; }
.util { display: flex; gap: 20px; }
.util a { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.util a:hover { color: var(--accent); }
.ribbon { background: var(--ink); color: var(--paper); }
.ribbon-inner { max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); }
.nav-main { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px clamp(14px, 2.3vw, 32px); align-items: center; padding: 13px 0 12px; }
.nav-main a { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: rgba(247, 250, 252, .92);
  font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 116; font-size: clamp(13.5px, 1.35vw, 16px); white-space: nowrap; }
.nav-main a:hover, .nav-main a[aria-current] { color: var(--accent-lift); }
.nav-main .ico { width: clamp(16px, 1.5vw, 19px); height: clamp(16px, 1.5vw, 19px); stroke-width: 1.6; }
.nav-sub { display: flex; flex-wrap: wrap; gap: 7px 20px; align-items: baseline; padding: 11px 0 14px; border-top: 1px solid rgba(247, 250, 252, .18); }
.nav-sub-label { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(247, 250, 252, .5); }
.nav-sub a { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; color: rgba(247, 250, 252, .88); text-decoration: none; }
.nav-sub a:hover, .nav-sub a[aria-current] { color: var(--accent-lift); }

/* ---------- homepage ---------- */

.lead-band { position: relative; }
.lead-figure { position: relative; }
.lead-figure img { display: block; width: 100%; height: clamp(440px, 58vw, 720px); object-fit: cover; }
.lead-overlay { position: absolute; inset: auto 0 0 0; color: var(--paper);
  background: linear-gradient(to top, rgba(16, 24, 32, .97) 0%, rgba(16, 24, 32, .94) 45%, rgba(16, 24, 32, .86) 78%, rgba(16, 24, 32, .5) 94%, rgba(16, 24, 32, 0) 100%); }
.lead-overlay h1, .lead-overlay .cap { color: var(--paper); }
.lead-overlay .kicker { color: var(--paper); background: rgba(16, 24, 32, .8); padding: 6px 11px 6px 9px; }
.lead-overlay .lead-dek { color: rgba(247, 250, 252, .93); }
.lead-overlay .btn-ghost { color: var(--paper); border-bottom-color: var(--accent-lift); }
.lead-overlay .btn-ghost:hover { color: var(--accent-lift); }
.lead-head { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 44px; padding-block: clamp(46px, 7vw, 96px) clamp(22px, 3vw, 36px); align-items: end; }
.lead-head h1 { font-variation-settings: 'wdth' 132; font-size: clamp(34px, 5.2vw, 62px); margin-bottom: 18px; }
.lead-dek { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.45; max-width: 52ch; margin: 0; text-wrap: pretty; }
.lead-aside { border-top: 1px solid rgba(247, 250, 252, .45); padding-top: 13px; }

.split { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: stretch; }
.split-wide { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.diagram { width: 100%; height: 100%; }
.diagram-cell { display: flex; align-self: stretch; align-items: center; justify-content: center;
  border: 1px solid rgba(247, 250, 252, .3); padding: clamp(14px, 2vw, 26px); position: relative; }
.diagram-cell::before, .diagram-cell::after { content: ""; position: absolute; width: 26px; height: 26px; pointer-events: none; }
.diagram-cell::before { top: -1px; left: -1px; border-top: 2px solid var(--accent-lift); border-left: 2px solid var(--accent-lift); }
.diagram-cell::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--accent-lift); border-right: 2px solid var(--accent-lift); }

.quiet {
  display: flex; align-items: center; justify-content: center; gap: 26px;
  padding-block: clamp(40px, 5vw, 66px);
}
.quiet p {
  font-family: var(--display); font-weight: 600; font-variation-settings: 'wdth' 108;
  font-size: clamp(20px, 2.4vw, 28px); line-height: 1.26; margin: 0; max-width: 40ch; text-align: center;
}

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 26px; }
.cards > li { display: flex; }
.card {
  height: 100%; width: 100%;
  display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--rule); text-decoration: none; color: var(--ink);
}
.card:hover { border-color: var(--accent); color: var(--ink); }
.card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 16px 20px 20px; }
.card h3 { font-size: 22px; font-variation-settings: 'wdth' 116; margin-bottom: 8px; }
.card p { font-size: 15.5px; line-height: 1.45; margin: 0 0 14px; color: rgba(16, 24, 32, .8); }
.card-meta { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }

.index-list { list-style: none; margin: 0; padding: 0; }
.index-list li { border-top: 1px solid var(--rule); }
.index-list a {
  display: flex; align-items: baseline; gap: 12px; padding: 12px 0;
  text-decoration: none; color: inherit; font-size: 17px;
}
.index-list a:hover { color: var(--accent); }
.index-list .il-note { margin-left: auto; text-align: right; font-size: 14px; color: var(--muted); }
.band-blue .index-list li, .band-ink .index-list li { border-color: var(--rule-rev); }
.band-blue .index-list .il-note, .band-ink .index-list .il-note { color: rgba(247, 250, 252, .68); }

/* ---------- figure system ---------- */

figure { margin: 0; }
.cap { font-size: 16.5px; line-height: 1.38; }
.cap b { font-family: var(--display); font-weight: 700; font-variation-settings: 'wdth' 112; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 6px; }
.credit { display: block; font-size: 12.5px; line-height: 1.4; color: var(--muted); margin-top: 7px; }
.band-ink .credit, .fig-mat .credit { color: rgba(247, 250, 252, .6); }

.article-figure img { display: block; width: 100%; }

/* 1 — full-bleed band, caption stepped under it */
.fig-bleed { width: 100vw; margin-left: calc(50% - 50vw); }
.fig-bleed img { height: clamp(240px, 40vw, 540px); object-fit: cover; }
.fig-bleed figcaption {
  max-width: 1240px; margin: 0 auto; padding: 16px var(--gutter) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 30px; align-items: start;
}
.fig-bleed figcaption .cap { border-top: 2px solid var(--ink); padding-top: 12px; }
.fig-bleed figcaption .credit { border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 0; }

/* 2 — mat: photograph on an ink plate, caption reversed inside it */
.fig-mat { background: var(--ink); color: var(--paper); padding: 16px 16px 18px; }
.fig-mat figcaption { padding-top: 14px; }
.fig-mat .cap b { color: var(--accent-lift); }

/* 3 — framed: hairline inset with drawn corner marks */
.fig-frame { position: relative; border: 1px solid var(--ink); padding: 12px; }
.fig-frame::before, .fig-frame::after {
  content: ""; position: absolute; width: 26px; height: 26px; pointer-events: none;
}
.fig-frame::before { top: -7px; left: -7px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.fig-frame::after { bottom: -7px; right: -7px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.fig-frame figcaption { padding-top: 13px; }

/* 4 — spill: breaks the measure, caption held to the text column */
.fig-spill { width: calc(100% + 2 * clamp(0px, 7vw, 140px)); margin-inline: calc(-1 * clamp(0px, 7vw, 140px));
  background: var(--paper); border: 1px solid var(--rule); padding: 14px 14px 16px; }
.fig-spill img { border: 1px solid rgba(16, 24, 32, .3); }
.fig-spill figcaption { margin: 15px clamp(0px, 6vw, 126px) 0; border-top: 2px solid var(--accent); padding-top: 13px; }

/* 5 — inset in the column, prose flowing beside it */
.fig-inset { float: right; width: min(300px, 46%); margin: 4px 0 22px 30px; }
@media (min-width: 1140px) { .fig-inset { width: 320px; margin-right: -170px; } }
.fig-inset figcaption { padding-top: 11px; border-top: 1px solid var(--rule); margin-top: 11px; }
.fig-inset .cap { font-size: 15px; }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.gallery figure { display: flex; flex-direction: column; }
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; }
.gallery figcaption { padding-top: 10px; font-size: 14.5px; line-height: 1.35; }

.map-figure .map-frame { border: 1px solid var(--ink); background: rgba(16, 24, 32, .05); padding: 10px; }
.band-blue .map-figure .map-frame, .band-ink .map-figure .map-frame { border-color: var(--rule-rev); background: rgba(255, 255, 255, .09); }
.map-figure svg { display: block; width: 100%; height: auto; }
.map-frame { max-width: 520px; margin-inline: auto; }
.map-figure .map-frame { max-width: 520px; margin-inline: auto; }
.map-figure figcaption { padding-top: 12px; font-size: 14.5px; }
.map-land { fill: rgba(16, 24, 32, .08); stroke: var(--ink); stroke-width: 2; }
.map-box { fill: rgba(15, 107, 181, .14); stroke: var(--accent); stroke-width: 70; }
.band-blue .map-box, .band-ink .map-box { fill: rgba(127, 193, 238, .18); stroke: var(--accent-lift); }
.map-lead { stroke: var(--accent); stroke-width: 60; }
.band-blue .map-lead, .band-ink .map-lead { stroke: var(--accent-lift); }
.map-grid path { stroke-width: 30; }
.map-north path { stroke-width: 80; }
.map-scale { stroke-width: 80; }
.map-dot { r: 130; }

.band-blue .map-land, .band-ink .map-land { fill: rgba(247, 250, 252, .12); stroke: rgba(247, 250, 252, .75); }
.map-pin { fill: none; stroke: var(--accent); stroke-width: 6; }
.band-blue .map-pin { stroke: var(--accent-lift); }
.map-label { font-family: var(--text); font-size: 34px; fill: var(--ink); }
.band-blue .map-label, .band-ink .map-label { fill: var(--paper); }

/* ---------- article ---------- */

.article-head { padding-block: clamp(30px, 4vw, 52px) 26px; }
.article-head h1 { font-variation-settings: 'wdth' 130; font-size: clamp(34px, 5.6vw, 66px); margin: 14px 0 18px; }
.crumbs { display: flex; align-items: center; gap: 11px; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; }
.crumbs span { color: var(--muted); }
.prose { max-width: var(--measure); margin: 0 auto; padding-inline: clamp(20px, 5vw, 72px); }
.prose > * + * { margin-top: 26px; }
.prose p { font-size: 19.5px; line-height: 1.66; margin: 0; text-wrap: pretty; }
.prose h2 {
  font-size: clamp(24px, 2.6vw, 32px); font-variation-settings: 'wdth' 118;
  margin-top: 42px; padding-top: 16px; border-top: 2px solid var(--ink);
}
.prose h3 { font-size: 21px; margin-top: 30px; }
.prose .article-figure { margin-block: 48px; }
.prose h2, .workings { clear: both; }
.related-links a { display: block; padding: 13px 0; text-decoration: none; color: inherit; }
.related-links a:hover .rel-t { color: var(--accent); }
.rel-t { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 700; font-variation-settings: 'wdth' 114; font-size: 19px; }
.rel-d { display: block; color: var(--muted); font-size: 15.5px; line-height: 1.4; margin-top: 5px; }
.prose .fig-inset { margin-top: 6px; }
.lead {
  font-size: clamp(19px, 2vw, 23px); line-height: 1.42; margin: 0; max-width: 54ch;
  color: rgba(16, 24, 32, .88);
}

/* full-bleed interruption panels built from the writers' notes */
.workings { width: 100vw; margin-left: calc(50% - 50vw); margin-block: 52px; background: var(--ink); color: var(--paper); padding-block: clamp(36px, 4.4vw, 58px); }
.workings-blue { background: var(--secondary); }
.workings h2 { border: 0; margin: 0 0 6px; padding: 0 0 14px; font-size: clamp(22px, 2.4vw, 30px); border-bottom: 1px solid var(--rule-rev); }
.workings-inner { max-width: 1100px; margin: 0 auto; padding-inline: var(--gutter); }
.workings .timeline { position: relative; padding-left: 26px; }
.workings .timeline::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--rule-rev); }
.workings .timeline li { position: relative; grid-template-columns: minmax(150px, 270px) minmax(0, 1fr); gap: 8px 34px; padding: 18px 0; border-color: var(--rule-rev); }
.workings .timeline li::before { content: ""; position: absolute; left: -26px; top: 27px; width: 14px; height: 2px; background: var(--accent-lift); }
.workings-blue .timeline li::before { background: #CFE6F7; }
.workings .t-when { font-size: 17px; line-height: 1.25; }
.workings .t-what { font-size: 17px; line-height: 1.5; max-width: 64ch; }
.workings .t-when { color: var(--accent-lift); }
.workings-blue .t-when { color: #CFE6F7; }
.workings .datatable th { background: rgba(247, 250, 252, .12); color: var(--paper); }
.workings .datatable td { font-size: 17px; line-height: 1.5; }
.workings .datatable td { border-color: var(--rule-rev); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: var(--rule-rev); }
.steps li { background: var(--ink); padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 11px; }
.workings-blue .steps li { background: var(--secondary); }
.steps .step-no { font-family: var(--display); font-weight: 900; font-variation-settings: 'wdth' 120; font-size: 22px; letter-spacing: .06em; color: var(--accent-lift); }
.workings-blue .steps .step-no { color: #CFE6F7; }
.steps p { margin: 0; font-size: 16.5px; line-height: 1.45; }

.article-foot { padding-block: clamp(30px, 4vw, 54px); }
.further-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.further-grid a {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit;
  border-top: 2px solid var(--ink); padding-top: 13px; font-family: var(--display);
  font-weight: 700; font-variation-settings: 'wdth' 114; font-size: 19px; line-height: 1.1;
}
.further-grid a:hover { border-color: var(--accent); color: var(--accent); }
.further-grid a span { font-family: var(--text); font-weight: 400; font-size: 15px; line-height: 1.4; color: var(--muted); }
.related-links { list-style: none; margin: 0; padding: 0; }
.related-links li { border-top: 1px solid var(--rule); }
.related-links a { display: block; padding: 11px 0; text-decoration: none; }

/* ---------- text components ---------- */

.pullquote { margin: 34px 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 22px 0; }
.pullquote p { font-family: var(--display); font-weight: 600; font-variation-settings: 'wdth' 108; font-size: clamp(21px, 2.2vw, 27px); line-height: 1.24; margin: 0; }
.blockquote { margin: 30px 0; padding-left: 22px; border-left: 2px solid var(--accent); }
.blockquote p { font-size: 19px; line-height: 1.5; margin: 0; }
.blockquote cite { display: block; margin-top: 10px; font-size: 14.5px; font-style: normal; color: var(--muted); }
.callout { background: var(--paper); border-top: 3px solid var(--accent); padding: 20px 22px 22px; }
.callout p { margin: 0; font-size: 17.5px; line-height: 1.5; }
.note { font-size: 16px; line-height: 1.45; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 11px; }

.versus, .datatable { width: 100%; border-collapse: collapse; }
.versus caption, .datatable caption { text-align: left; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-bottom: 10px; }
.versus th, .datatable th {
  background: var(--ink); color: var(--paper); text-align: left; font-family: var(--text);
  font-weight: 500; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; padding: 10px 14px;
}
.versus td, .datatable td { padding: 11px 14px; border-bottom: 1px solid var(--rule); font-size: 16.5px; vertical-align: top; }
.versus th:first-child, .datatable th:first-child { width: 34%; }

.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 1px; background: var(--rule); }
.statblock { background: var(--ground); padding: 16px 18px 18px; }
.stat-num { color: var(--flag); display: block; font-family: var(--display); font-weight: 900; font-variation-settings: 'wdth' 120; font-size: clamp(30px, 3.4vw, 42px); line-height: 1; }
.stat-label { display: block; font-size: 14px; line-height: 1.35; color: var(--muted); margin-top: 8px; }
.workings .statblock { background: transparent; }
.workings .stat-label { color: rgba(247, 250, 252, .68); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: minmax(140px, 260px) minmax(0, 1fr); gap: 6px 26px; padding: 13px 0; border-top: 1px solid var(--rule); }
.t-when { font-family: var(--display); font-weight: 700; font-variation-settings: 'wdth' 112; font-size: 15.5px; line-height: 1.3; color: var(--accent); }
.t-what { font-size: 16.5px; line-height: 1.45; }

.chart svg { display: block; width: 100%; height: auto; }
.chart figcaption { padding-top: 12px; font-size: 14.5px; color: var(--muted); }
.chart .bar-label { font-family: var(--text); font-size: 13px; fill: var(--ink); }
.chart .bar-fill { fill: var(--accent); }
.chart .bar-fill-alt { fill: var(--secondary); }
.chart .axis { stroke: var(--rule); stroke-width: 1; }

.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.profile-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; background: var(--paper); border: 1px solid var(--rule); padding: 18px; }
.profile-card.no-photo { grid-template-columns: minmax(0, 1fr); }
.profile-card .p-photo { width: 120px; height: 152px; object-fit: cover; display: block; }
.profile-card h3 { font-size: 21px; font-variation-settings: 'wdth' 114; }
.profile-card .p-role { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 6px 0 10px; }
.profile-card p { margin: 0 0 10px; font-size: 16px; line-height: 1.45; }
.profile-card .p-links { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 15px; margin: 0; }
.profile-card .p-attr { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }

.org-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.org-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
  gap: 2px 14px; align-items: center; text-decoration: none; color: inherit;
  background: var(--paper); border: 1px solid var(--rule); padding: 14px 16px;
}
.org-card:hover { border-color: var(--accent); }
.org-card .ico, .org-card .org-logo { grid-row: span 2; }
.org-card .org-logo { width: 46px; height: 46px; object-fit: contain; }
.org-card .org-name { font-family: var(--display); font-weight: 700; font-variation-settings: 'wdth' 112; font-size: 17px; }
.org-card .org-host { font-size: 13.5px; color: var(--muted); }
.entity-ref { white-space: nowrap; }

.cat-list { list-style: none; margin: 0; padding: 0; }

/* ---------- supporters rail ---------- */

.support-band { border-top: 1px solid var(--rule); }
.support-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.support-rail { border-top: 2px solid var(--ink); padding-top: 14px; }
.support-rail h2 { font-size: 19px; font-variation-settings: 'wdth' 114; margin-bottom: 4px; }
.support-run { display: flex; flex-wrap: wrap; gap: 0; margin-top: 12px; }
.sponsor {
  flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 8px;
  padding: 7px 13px 7px 0; margin-right: 13px; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--rule-soft);
}
.sponsor:hover { color: var(--accent); }
.sponsor.feat .sponsor-name { color: var(--accent); }
.sponsor-name { font-size: 16px; line-height: 1.3; }
.sponsor-blurb { flex: 1 1 200px; min-width: 200px; font-size: 14.5px; line-height: 1.4; color: var(--muted); }

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

.site-foot { background: var(--ink); color: var(--paper); padding-block: 40px; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px 34px; }
.foot-grid h3 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-lift); font-variation-settings: 'wdth' 116; margin-bottom: 12px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: 7px; }
.foot-grid a { color: rgba(247, 250, 252, .86); text-decoration: none; font-size: 15px; }
.foot-grid a:hover { color: var(--accent-lift); }
.foot-line { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--rule-rev); display: flex; flex-wrap: wrap; gap: 12px 30px; align-items: baseline; justify-content: space-between; }
.foot-line p { margin: 0; font-size: 15px; color: rgba(247, 250, 252, .7); max-width: 52ch; }

/* ---------- forms (contact) ---------- */

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
label { display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
input, textarea, select { width: 100%; font-family: var(--text); font-size: 16px; padding: 11px 13px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); }
button, .btn {
  display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 800;
  font-variation-settings: 'wdth' 116; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); border: 0; padding: 14px 20px; cursor: pointer; text-decoration: none;
}
button:hover, .btn:hover { background: var(--accent); color: var(--paper); }
.btn-ghost { background: transparent; color: var(--ink); border-bottom: 2px solid var(--accent); padding: 0 0 5px; }
.btn-ghost:hover { background: transparent; color: var(--accent); }

/* ---------- CSS-only expander for long lists ---------- */

.expander { margin: 0; padding: 0; border: 0; }
.expander > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); padding-top: 14px; }
.expander > summary::-webkit-details-marker { display: none; }
.expander[open] > summary { color: var(--muted); }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .lead-head, .split, .split-wide, .support-layout, .fig-bleed figcaption { grid-template-columns: minmax(0, 1fr); }
  .lead-head { gap: 22px; }
  .split, .split-wide { gap: 30px; }
  .lead-aside { border-top-width: 1px; }
}

@media (max-width: 860px) {
  .nav-main { gap: 10px 22px; justify-content: flex-start; }
  .masthead-right { align-items: flex-start; }
  .masthead-top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .standing { padding-bottom: 0; }
  .quiet { flex-direction: column; gap: 18px; }
  .quiet .arc { width: 90px; }
  .fig-inset { float: none; width: 100%; margin: 24px 0; }
  .profile-card { grid-template-columns: minmax(0, 1fr); }
  .profile-card .p-photo { width: 100%; height: 220px; }
  .timeline li { grid-template-columns: minmax(0, 1fr); }
  .sponsor-blurb { flex-basis: 100%; }
  .prose p { font-size: 18px; }
}

@media (max-width: 480px) {
  body { font-size: 16.5px; }
  .card h3 { font-size: 20px; }
  .stat-num { font-size: 30px; }
  .sponsor { margin-right: 0; }
}

/* closing register rows */
.toc { list-style: none; margin: 0; padding: 0; }
.toc li { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 4px 18px; align-items: baseline; border-top: 1px solid var(--rule); padding: 15px 0; }
.toc-no { font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--flag); }
.toc-title { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 116; font-size: 20px; text-decoration: none; color: var(--ink); }
.toc-title:hover { color: var(--accent); }
.toc-blurb { display: block; font-size: 15.5px; color: var(--muted); margin-top: 4px; }
.toc-count { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
@media (max-width: 560px) { .toc li { grid-template-columns: 34px minmax(0, 1fr); } .toc-count { grid-column: 2; } }

/* locator plot */
.map-grid path { stroke: var(--ink); stroke-width: 1.4; opacity: .14; }
.band-blue .map-grid path, .band-ink .map-grid path { stroke: var(--paper); opacity: .22; }
.map-tick { stroke: var(--accent); stroke-width: 3; opacity: .8; }
.band-blue .map-tick { stroke: var(--accent-lift); }
.map-pin { fill: none; stroke: var(--accent); stroke-width: 7; }
.band-blue .map-pin, .band-ink .map-pin { stroke: var(--accent-lift); }
.map-dot { fill: var(--accent); stroke: none; }
.band-blue .map-dot { fill: var(--accent-lift); }
.map-scale { stroke: var(--ink); stroke-width: 3; }
.band-blue .map-scale, .band-ink .map-scale { stroke: var(--paper); }
.map-north path { stroke: var(--ink); stroke-width: 3; fill: none; }
.band-blue .map-north path, .band-ink .map-north path { stroke: var(--paper); }
.map-label { font-family: var(--text); fill: var(--ink); }
.band-blue .map-label, .band-ink .map-label { fill: var(--paper); }


/* horizontal supporters strip */
.support-strip { border-top: 2px solid var(--ink); margin-top: clamp(34px, 5vw, 56px); padding-top: 18px; }
.strip-head { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; margin-bottom: 14px; }
.strip-head h2 { font-size: 20px; font-variation-settings: 'wdth' 114; }
.support-strip .support-run { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; align-items: stretch; }
.support-strip .sponsor { flex: none; flex-direction: column; align-items: flex-start; gap: 7px;
  padding: 12px 14px; margin: 0; border: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper); }
.support-strip .sponsor:hover { border-color: var(--accent); }
.support-strip .sponsor-name { font-size: 15.5px; line-height: 1.25; }
.support-strip .sponsor-blurb { flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.35; }

/* compact icon register */
.reg-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.reg-tile { display: inline-flex; align-items: center; gap: 10px; padding: 10px 15px; background: var(--paper); border: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.reg-tile:hover { border-color: var(--accent); color: var(--accent); }
.reg-tile .ico { color: var(--accent); }
.reg-name { font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 114; font-size: 15.5px; white-space: nowrap; }
.reg-count { font-size: 12.5px; letter-spacing: .08em; color: var(--muted); }

/* compact footer */
.site-foot { padding-block: 30px 26px; }
.foot-row { display: flex; flex-wrap: wrap; gap: 12px clamp(16px, 2.4vw, 30px); padding-bottom: 20px; }
.foot-sec { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: rgba(247, 250, 252, .92);
  font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 114; font-size: 15.5px; white-space: nowrap; }
.foot-sec:hover { color: var(--accent-lift); }
.foot-sec .ico { width: 18px; height: 18px; color: var(--accent-lift); }
.foot-util { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot-util a { color: rgba(247, 250, 252, .72); font-size: 14px; text-decoration: none; }
.foot-util a:hover { color: var(--accent-lift); }
.foot-line { margin-top: 0; }

/* minimal end-of-article run */
.article-foot { padding-block: clamp(24px, 3.2vw, 40px); }
.related-links.next-min { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; list-style: none; margin: 0; padding: 15px 0 0; border-top: 2px solid var(--ink); }
.related-links.next-min li { border-top: 0; margin: 0; }
.related-links.next-min a { display: inline; padding: 0; font-family: var(--display); font-weight: 700; font-variation-settings: 'wdth' 114; font-size: 18px; text-decoration: none; color: var(--ink); }
.related-links.next-min a:hover { color: var(--accent); }
.next-label { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.related-links.next-min a.next-all { font-family: var(--text); font-weight: 500; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }

/* ---------- phone (audit fixes) ---------- */
@media (max-width: 860px) {
  .entity-ref { white-space: normal; overflow-wrap: anywhere; }
  .workings .timeline { padding-left: 18px; }
  .workings .timeline li { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .workings .timeline li::before { left: -18px; top: 24px; width: 10px; }
  .workings .t-what { max-width: none; }
  .datatable, .versus { display: block; overflow-x: auto; }

  .fig-spill { width: 100%; margin-inline: 0; padding: 10px 10px 12px; }
  .fig-spill figcaption { margin-inline: 0; }
  .prose { padding-inline: var(--gutter); }
  .masthead-top { padding: 12px var(--gutter) 10px; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-name { font-size: 30px; }
  .brand-tld { display: none; }
  .masthead-right { gap: 14px; }
  .util { gap: 14px; }
  .util a { font-size: 11.5px; letter-spacing: .08em; padding: 6px 0; }
  .ribbon-inner { padding-inline: 0; }
  .nav-main, .nav-sub { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-inline: var(--gutter); }
  .nav-main::-webkit-scrollbar, .nav-sub::-webkit-scrollbar { display: none; }
  .nav-main { gap: 20px; padding-block: 0; }
  .nav-main a { font-size: 14.5px; min-height: 46px; align-items: center; white-space: nowrap; }
  .nav-sub { gap: 18px; padding-block: 0; align-items: center; }
  .nav-sub a { font-size: 14px; min-height: 44px; white-space: nowrap; }
  .nav-sub-label { white-space: nowrap; }
  .foot-row { gap: 2px 20px; }
  .foot-sec { min-height: 44px; }
  .foot-util a { padding: 10px 0; }
  .index-list a, .related-links.next-min a { min-height: 44px; align-items: center; }
  .fig-bleed img { height: clamp(280px, 62vw, 380px); }
  .article-head { padding-block: 22px 18px; }
  .kicker, .btn-ghost, .next-all, .brand, .card-meta, .toc-title, .reg-tile { min-height: 44px; align-items: center; }
  .btn-ghost { padding-bottom: 10px; }
  .datatable td a, .versus td a { display: flex; align-items: center; min-height: 44px; }
  .datatable td, .versus td { padding: 6px 12px; }
  .sponsor { min-height: 56px; flex-wrap: wrap; }
  .sponsor-blurb { flex: 1 1 100%; min-width: 0; }
  .org-card.no-logo { grid-template-columns: minmax(0, 1fr); }
  .org-name, .sponsor-name { overflow-wrap: anywhere; }
  .fig-frame { margin-inline: 0; }
  .fig-frame::before { top: 0; left: 0; }
  .fig-frame::after { bottom: 0; right: 0; }
  .support-rail { max-width: none; }
  .support-rail .sponsor { flex: 1 1 100%; max-width: 100%; }
}
@media (max-width: 480px) {
  .nav-main a { font-size: 13.5px; }
  .brand-name { font-size: 27px; }
  .masthead-top { flex-wrap: wrap; gap: 8px 12px; }
  .masthead-right { flex: 1 1 100%; justify-content: space-between; gap: 10px; }
  .util { flex: 1 1 auto; justify-content: space-between; gap: 10px; width: 100%; }
  .util a { font-size: 11px; }
  .workings-inner .steps li { padding: 18px 18px 20px; }
}

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

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

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

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}

/* 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-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}

/* op-wrap-gutter: these elements carry the build's own gutter class but their own
   rule sets a padding SHORTHAND, which resets left/right to 0 — every line of type
   then sits against the screen edge at phone width. Design's own token is restated
   for the inline axis, on the exact element that lost it. Measured, not guessed:
   each selector below had TEXT within 2px of a viewport edge at 390. */
@media (max-width:900px){
  .ribbon-inner{padding-inline:var(--gutter)}
}

/* op-money-columns: the supporters block ran one tile per row — 13 tiles,
   885px at 390, 16% of the whole page. Two columns bring it to
   520px (41% shorter). Checked before writing: no new overflow, smallest mark still
   Nonepx wide, longest blurb 4 lines, tile heights 56-113px.
   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.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.support-run), 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){
  .support-run{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:10px!important}
    .support-run > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .support-run > * *{min-width:0!important;max-width:100%}
    .support-run img,.support-run svg{max-width:100%;height:auto}
  .support-run .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-blurb-rows: money blurbs ran to 4 rows at 390, 520px of tier across
   13 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped.
   13 of these tiles carry no mark, so the blurb IS the tile — the copy is clipped
   for display, never removed, and the tile keeps its shape. */
@media (max-width:640px){
  .support-run .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:60px!important;min-height:0!important;overflow:hidden!important}
}

/* op-odd-tier-lead: .support-run (13 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .support-run:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-article-width: the article column was capped at 693px (82 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .prose) 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 1280 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1280px){
  div.prose{--measure:min(110.390ch, 100%)!important}
}
@media (min-width:1600px){
  div.prose{--measure:min(clamp(110.390ch, 69.722vw, calc(110.390ch * 1.2)), 100%)!important}
  div.prose > :is(p:not([class])){font-size:clamp(19.5px,1.3542vw,23.4px)!important}
}
/* op-article-width:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 125; letter-spacing: -0.012em; line-height: 1.02; margin: 0px; text-wrap: balance;}
.card h2:where(.rt-h3){font-size: 22px; font-variation-settings: "wdth" 116; margin-bottom: 8px;}
.profile-card h2:where(.rt-h3){font-size: 21px; font-variation-settings: "wdth" 114;}
@media (max-width: 480px){.card h2:where(.rt-h3){font-size: 20px;}}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.gallery > figure > img,
  div.profile-grid > div.profile-card > img.p-photo){height:auto}
/* op-img-dims:end */

/* featured sponsors: the name leads, bold and larger than the regular tiles */
.support-run .sponsor.feat .sponsor-name{font-weight:700;font-size:18px;line-height:1.25}

/* 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}