/* Flag Fen — Ten Parts
   Palette: 5 members, each with a job.
   --ground  peat black-brown   page ground
   --ink     bone               body text on ground
   --accent  oxide red          saturated, hue ~9°   — plates, rules, marks
   --second  tin blue           saturated, hue ~200° — data, links, diagrams
   --paper   bone light         the light section ground (a real area)
*/
:root{
  --ground:#17120F;
  --panel:#1E1712;
  --line:#3A2E26;
  --ink:#EDE6DC;
  --ink-2:#C9BDAE;
  --muted:#9A8E80;
  --accent:#C0341F;
  --accent-lift:#E4643F;
  --accent-ink:#FBEFE9;
  --second:#2F86B4;
  --second-lift:#63AACF;
  --paper:#E8E1D5;
  --paper-ink:#17120F;
  --paper-muted:#7A6C5E;
  --paper-line:#C9BFAE;
  --display:"Vollkorn",Georgia,serif;
  --text:"Asap",system-ui,sans-serif;
  --mono:"Azeret Mono",ui-monospace,SFMono-Regular,monospace;
  --wrap:1560px;
  --gut:44px;
  --measure:70ch;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font:400 17px/1.6 var(--text);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.015em;margin:0}
p{margin:0;text-wrap:pretty}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent-lift)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.measure{max-width:var(--measure)}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.kicker--accent{color:var(--accent-lift)}
.kicker--second{color:var(--second)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--accent);color:var(--accent-ink);padding:8px 14px}

/* ── the repeating drawn mark: ten parts, one filled ───────────── */
.ten{display:block;color:currentColor}
.ten-inline{width:96px;height:11px;vertical-align:-1px}
.icon{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icon--lg{width:34px;height:34px;stroke-width:1.4}
.icon--sm{width:17px;height:17px}

/* ── masthead ──────────────────────────────────────────────────── */
.mast{border-bottom:1px solid var(--line);background:var(--ground);position:relative;z-index:40}
.mast__top{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-block:20px 18px}
.mast__brand{display:flex;align-items:center;gap:22px;min-width:0}
.wordmark{font-family:var(--display);font-weight:700;font-size:33px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.wordmark:hover{color:var(--ink)}
.mast__strap{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:7px}
.mast__util{display:flex;align-items:center;gap:18px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;flex-wrap:wrap;justify-content:flex-end}
.mast__util a{color:var(--second)}
.mast__util a:hover{color:var(--second-lift)}
.mast__nav{border-top:1px solid var(--line);background:var(--panel)}
.navrow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 26px;list-style:none;margin:0;padding:0}
.navrow>li{position:relative}
.navlink{display:flex;align-items:center;gap:9px;padding:14px 0 15px;font-family:var(--display);font-size:17px;font-weight:600;color:var(--ink)}
.navlink .icon{color:var(--accent-lift)}
.navlink[aria-current]{color:var(--accent-lift)}
.navrow>li>.navlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:transparent}
.navrow>li:hover>.navlink::after,.navlink[aria-current]::after{background:var(--accent)}
.subnav{
  position:absolute;top:100%;left:-16px;min-width:262px;margin:0;padding:6px 0 10px;list-style:none;
  background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--accent);
  opacity:0;visibility:hidden;transform:translateY(2px);transition:opacity .12s ease,visibility .12s;
  z-index:50;box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.navrow>li::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.navrow>li:hover .subnav,.navrow>li:focus-within .subnav{opacity:1;visibility:visible;transform:none}
.subnav{max-width:calc(100vw - 2*var(--gut))}
.navrow>li:nth-last-child(-n+3) .subnav{left:auto;right:-16px}
.subnav a{display:block;padding:8px 18px;font-size:15.5px;color:var(--ink-2);line-height:1.35}
.subnav a:hover{background:rgba(192,52,31,.14);color:var(--ink)}
.subnav__all a{color:var(--second);font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase}
.subnav__sep{height:1px;background:var(--line);margin:7px 0}

/* ── bands ─────────────────────────────────────────────────────── */
.band{padding-block:64px}
.band--tight{padding-block:44px}
.band--paper{background:var(--paper);color:var(--paper-ink)}
.band--paper .kicker{color:var(--paper-muted)}
.band--paper .kicker--accent{color:#A0261A}
.band--panel{background:var(--panel);border-block:1px solid var(--line)}
.rule-top{border-top:2px solid var(--accent);padding-top:15px}
.rule-hair{border-top:1px solid var(--line)}
.band--paper .rule-hair{border-color:var(--paper-line)}
.band__head{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;flex-wrap:wrap;margin-bottom:26px}
.band__head h2{font-size:clamp(26px,2.4vw,36px);line-height:1.06}

/* ── opener ────────────────────────────────────────────────────── */
.opener{position:relative;background:#0F0B09;border-bottom:1px solid var(--line)}
.opener__img{position:absolute;inset:0}
.opener__img img{width:100%;height:100%;object-fit:cover;opacity:.62}
.opener__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,11,9,.94) 0%,rgba(15,11,9,.72) 46%,rgba(15,11,9,.24) 100%)}
.opener__inner{position:relative;padding-block:96px 76px}
.opener h1{font-size:clamp(40px,6.2vw,82px);line-height:.99;margin:22px 0 24px;max-width:19ch}
.opener__deck{font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:var(--ink-2);max-width:60ch}
.opener__emblem{max-width:520px;margin-top:38px}
.emblem-key{display:flex;gap:0;font-family:var(--mono);font-size:11px;letter-spacing:.07em;margin-top:6px}
.emblem-key span:first-child{color:var(--accent-lift);flex:0 0 9.6%}
.emblem-key span:last-child{color:var(--second)}
.opener__credit{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted);margin-top:34px;max-width:70ch}

/* ── lead feature ──────────────────────────────────────────────── */
.lead-feature{display:grid;grid-template-columns:1.15fr 1fr;gap:52px;align-items:center}
.lead-feature h2{font-size:clamp(30px,3.6vw,52px);line-height:1.02;margin:14px 0 18px}
.lead-feature p{font-size:19px;line-height:1.55;color:var(--ink-2)}
.lead-feature .more{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-lift);border-bottom:1px solid rgba(228,100,63,.4);padding-bottom:4px}

/* ── quiet line ────────────────────────────────────────────────── */
.quiet{max-width:1080px;margin-inline:auto;text-align:left}
.quiet p{font-family:var(--display);font-style:italic;font-size:clamp(22px,2.6vw,34px);line-height:1.3}

/* ── section grid ──────────────────────────────────────────────── */
.sec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.sec-card{display:flex;flex-direction:column;background:var(--ground);padding:26px 26px 24px;min-height:100%}
.sec-card:hover{background:#1C1512}
.sec-card__top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sec-card__top .icon{color:var(--accent-lift)}
.sec-card__no{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.1em;margin-left:auto}
.sec-card h3{font-size:25px;line-height:1.1;margin-bottom:8px}
.sec-card p{font-size:15.5px;color:var(--muted);line-height:1.55}
.sec-card__lead{margin-top:auto;padding-top:18px;font-size:15.5px;color:var(--second-lift);line-height:1.4}

/* ── three seconds (selection, varied weight) ──────────────────── */
.picks{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;align-items:start}
.pick h3{line-height:1.1;margin:14px 0 9px}
.pick--big h3{font-size:clamp(24px,2.5vw,34px)}
.pick h3{font-size:21px}
.pick p{font-size:15.5px;color:var(--muted);line-height:1.55}
.pick__meta{margin-bottom:0}

/* ── figure system: three treatments, one drawing system ───────── */
figure{margin:0}
figcaption{margin-top:14px}
.cap{font-family:var(--display);font-size:17.5px;font-weight:500;line-height:1.4;max-width:62ch}
.cap-kick{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-lift);display:block;margin-bottom:7px}
.credit{display:block;margin-top:8px;font-family:var(--mono);font-size:10.5px;line-height:1.5;letter-spacing:.05em;color:var(--muted);max-width:58ch}
.band--paper .credit,.fig-mat .credit{color:var(--paper-muted)}

/* 1 — plate: dark ground, roman numeral tab */
.fig-plate .fig-plate__box{position:relative;background:#0F0B09;border:1px solid var(--line)}
.fig-plate img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-plate__no{position:absolute;top:0;left:0;background:var(--accent);color:var(--accent-ink);font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding:5px 9px}

/* 2 — mat: the photograph sits on a bone mat, inset hairline */
.fig-mat{background:var(--paper);color:var(--paper-ink);padding:22px}
.fig-mat img{border:1px solid var(--paper-ink);width:100%;aspect-ratio:16/9;object-fit:cover}
.fig-mat .cap{color:var(--paper-ink)}
.fig-mat .cap-kick{color:#A0261A}

/* 3 — bleed: breaks the measure, caption plate overlaps */
.fig-bleed{position:relative}
.fig-bleed img{width:100%;height:clamp(300px,52vh,560px);object-fit:cover}
.fig-bleed figcaption{max-width:640px;margin:-46px 0 0 0;position:relative;background:var(--accent);color:var(--accent-ink);padding:20px 24px}
.fig-bleed .cap{color:var(--accent-ink)}
.fig-bleed .cap-kick,.fig-bleed .credit{color:#F3C4B7}

/* 4 — offset: image and caption step across the column, caption keyed to a rule */
.fig-offset{display:grid;grid-template-columns:1.55fr 1fr;gap:36px;align-items:center}
.fig-offset img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line)}
.fig-offset figcaption{margin-top:0;border-top:2px solid var(--accent);padding-top:18px}
.fig-offset .cap{font-size:19px}

/* inset: floats in the column, prose runs beside it (styleguide) */
.fig-inset{float:right;width:300px;margin:8px 0 22px 34px}
.art-body>figure:not(.fig-inset),.art-body>.record,.art-body>.chart,.art-body>.pullquote,.art-body>h2{clear:both}
.fig-inset img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line)}
.fig-inset .cap{font-size:15.5px}

/* ── article ───────────────────────────────────────────────────── */
.art-head{padding:56px 0 0;max-width:1120px;margin-inline:auto}
.art-head__meta{display:flex;align-items:center;gap:11px;margin-bottom:20px}
.art-head__meta .icon{color:var(--accent-lift)}
.art-head h1{font-size:clamp(34px,5vw,66px);line-height:1;margin-bottom:22px;max-width:22ch}
.art-body{font-size:18.5px;line-height:1.68;padding-block:8px 40px;max-width:1120px;margin-inline:auto;display:flow-root}
.art-body>p{margin:0 0 23px;max-width:var(--measure)}
.art-body>h2{font-size:clamp(24px,2.4vw,31px);line-height:1.14;margin:48px 0 18px;max-width:34ch}
.art-body>figure,.art-body>.record,.art-body>.pullquote,.art-body>.chart,
.art-body>.callout,.art-body>.blockquote,.art-body>.statrow,.art-body>.datatable{margin-block:46px}
.art-body>.fig-offset{max-width:980px}
.art-body>.fig-inset{margin:6px 0 26px 36px}
.art-body>*:first-child{margin-top:0}
.art-body>*:last-child{margin-bottom:0}
.art-body>h2::before{content:"";display:block;width:52px;border-top:2px solid var(--accent);margin-bottom:16px}
.art-body a{color:var(--second-lift);border-bottom:1px solid rgba(99,170,207,.38)}
.art-body a:hover{color:var(--accent-lift);border-bottom-color:rgba(228,100,63,.5)}
.lead{font-size:22px;line-height:1.48;color:var(--ink-2);max-width:60ch;margin-bottom:26px}
.art-foot{padding-block:36px 72px;max-width:1120px;margin-inline:auto}

/* the record blocks — the notes-for-design material, breaking the prose */
.record{background:var(--panel);border-top:2px solid var(--second);padding:28px 30px 30px;max-width:980px}
.record--wide{margin-inline:0}
.record__head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.record__head h3{font-size:21px}
.record__tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--second)}
.datatable{width:100%;border-collapse:collapse;font-size:16px}
.datatable th,.datatable td{text-align:left;vertical-align:top;padding:13px 22px 13px 0;border-bottom:1px solid var(--line)}
.datatable th{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:400}
.datatable tr:last-child td{border-bottom:none}
.datatable td:first-child{font-family:var(--display);font-weight:600;width:34%;padding-right:26px}
.datatable td:last-child{color:var(--ink-2)}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:minmax(150px,28%) 1fr;gap:26px;padding:14px 0;border-bottom:1px solid var(--line)}
.timeline li:last-child{border-bottom:none}
.t-when{font-family:var(--mono);font-size:13px;line-height:1.45;color:var(--accent-lift)}
.t-what{font-size:16px;line-height:1.55;color:var(--ink-2)}
.statrow{display:flex;flex-wrap:wrap;gap:1px;background:var(--line)}
.statblock{flex:1 1 200px;background:var(--panel);padding:18px 20px 20px}
.stat-num{display:block;font-family:var(--display);font-size:31px;font-weight:700;line-height:1;color:var(--accent-lift);margin-bottom:9px}
.stat-label{display:block;font-size:15px;line-height:1.5;color:var(--ink-2)}
.versus{width:100%;border-collapse:collapse;font-size:16px}
.versus th{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:400;text-align:left;padding:0 20px 11px 0;border-bottom:1px solid var(--accent)}
.versus th:first-child{color:var(--accent-lift)}
.versus th:nth-child(2){color:var(--second)}
.versus td{vertical-align:top;padding:14px 20px 14px 0;border-bottom:1px solid var(--line);line-height:1.55;color:var(--ink-2);width:50%}
.versus tr:last-child td{border-bottom:none}
.chart{max-width:980px}
.chart{overflow-x:auto}
.chart svg{width:100%;min-width:540px;height:auto;overflow:visible}
.chart.donut svg{min-width:0}
.chart .c-bar{fill:var(--accent)}
.chart .c-bar-2{fill:var(--second)}
.chart .c-lab,.chart .c-val{font-family:var(--mono);font-size:11px;fill:var(--muted)}
.chart .c-val{fill:var(--ink-2)}
.chart .c-axis{stroke:var(--line);stroke-width:1}
.band--paper .chart .c-lab{fill:var(--paper-muted)}
.band--paper .chart .c-val{fill:var(--paper-ink)}
.band--paper .chart .c-axis{stroke:var(--paper-line)}

.pullquote{padding:2px 0 2px 26px;border-left:3px solid var(--accent);max-width:52ch}
.pullquote p{font-family:var(--display);font-size:25px;line-height:1.32;font-style:italic}
.blockquote{padding:22px 26px;background:var(--panel);border-left:3px solid var(--second);max-width:60ch}
.blockquote p{font-size:18px;line-height:1.55}
.blockquote cite{display:block;margin-top:12px;font-family:var(--mono);font-size:11.5px;font-style:normal;letter-spacing:.08em;color:var(--muted)}
.callout{padding:22px 26px;background:rgba(192,52,31,.13);border:1px solid rgba(192,52,31,.42);max-width:64ch}
.callout p{font-size:17.5px;line-height:1.55}
.note{margin:26px 0;padding-left:20px;border-left:2px solid var(--line);font-size:15.5px;line-height:1.6;color:var(--muted);max-width:60ch}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}
.gallery img{aspect-ratio:1/1;object-fit:cover;border:1px solid var(--line)}
.gallery figcaption{margin-top:9px}
.gallery .cap{font-size:15px}
.map-figure .map-slot{width:100%;aspect-ratio:16/9;background:var(--panel);border:1px solid var(--line)}

/* cards / references */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:30px 0}
.profile-card{background:var(--panel);border-top:2px solid var(--second);padding:22px;display:flex;flex-direction:column}
.profile-card .p-photo{width:76px;height:76px;object-fit:cover;margin-bottom:14px;border-radius:50%}
.profile-card h3{font-size:20px;margin-bottom:5px}
.profile-card .p-role{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
.profile-card p{font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.profile-card .p-links{margin-top:auto;padding-top:14px}
.profile-card .p-links a{color:var(--second-lift);font-size:15px}
.profile-card .p-attr{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:10px}
.profile-card.no-photo{border-top-color:var(--accent)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:26px 0}
.org-card{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);padding:14px 16px}
.org-card:hover{border-color:var(--accent)}
.org-logo{max-height:30px;width:auto;object-fit:contain}
.org-name{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.2}
.org-host{font-family:var(--mono);font-size:10.5px;color:var(--muted);display:block;margin-top:3px}
.org-card.no-logo .org-name{margin-left:0}
.entity-ref{color:var(--second-lift);border-bottom:1px solid rgba(99,170,207,.38);white-space:nowrap}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--line);margin-top:20px}
.further-grid a{display:block;background:var(--ground);padding:20px 22px;font-family:var(--display);font-size:20px;font-weight:600;line-height:1.16}
.further-grid a:hover{background:var(--panel)}
.related-links{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.related-links a{font-size:17px;color:var(--second-lift)}
.related-links a:hover{color:var(--accent-lift)}

/* ── entry register (index + category pages) ───────────────────── */
.reg{width:100%;border-collapse:collapse}
.reg thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:400;text-align:left;padding:0 22px 11px 0;border-bottom:1px solid var(--accent)}
.reg td{vertical-align:top;padding:19px 22px 19px 0;border-bottom:1px solid var(--line)}
.reg tr:last-child td{border-bottom:none}
.reg__no{font-family:var(--mono);font-size:12.5px;color:var(--accent-lift);width:58px}
.reg__title{width:30%}
.reg__title a{font-family:var(--display);font-size:21px;font-weight:600;line-height:1.16;display:block}
.reg__sec{width:16%;font-size:15px}
.reg__sec a{color:var(--second-lift)}
.reg__brief{font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.reg__plate{width:88px}
.reg__plate img{width:76px;height:76px;object-fit:cover;border:1px solid var(--line)}

/* ── section (category) landing ────────────────────────────────── */
.cat-hero{display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:1px solid var(--line)}
.cat-hero__text{padding:64px var(--gut) 60px 0}
.cat-hero__text h1{font-size:clamp(34px,4.6vw,60px);line-height:1;margin:18px 0 20px}
.cat-hero__text .lead{margin-bottom:0}
.cat-hero__img{position:relative;min-height:420px}
.cat-hero__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list>li{border-bottom:1px solid var(--line)}
.cat-list>li:last-child{border-bottom:none}
.cat-list a{display:grid;grid-template-columns:100px 1fr;gap:28px;padding:24px 0;align-items:start}
.cat-list a:hover{background:rgba(192,52,31,.07)}
.cat-list img{width:100px;height:74px;object-fit:cover;border:1px solid var(--line)}
.cat-list h3{font-size:24px;line-height:1.12;margin-bottom:7px}
.cat-list p{font-size:15.5px;line-height:1.55;color:var(--muted);max-width:76ch;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:calc(2 * 1.55em)}

/* ── supporters: a rail beside the feed, two tiers, names as type ─ */
.feedrail{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:44px;row-gap:54px;align-items:start}
.feedrail__main{grid-column:1 / span 9;grid-row:1}
.supporters{display:contents}
.sup-lead{grid-column:10 / span 3;grid-row:1;border-top:2px solid var(--second);padding-top:16px}
.supporters>.sup-tier{grid-column:span 4;border-top:2px solid var(--second);padding-top:16px;margin-top:0}
.supporters__head{margin-bottom:6px}
.supporters__head h2{font-size:21px;margin-top:7px}
.supporters__note{font-size:14.5px;line-height:1.55;color:var(--muted);margin-top:9px}
.sup-tier{margin-top:24px}
.sup-tier__label{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:4px}
.sup-list{display:flex;flex-wrap:wrap;gap:1px;background:transparent}
.sponsor{flex:0 0 100%;display:block;padding:13px 0;border-bottom:1px solid var(--line)}
.sponsor:last-child{border-bottom:none}
.sponsor:hover .sponsor-name{color:var(--accent-lift)}
.sponsor-name{display:block;font-family:var(--display);font-size:17.5px;font-weight:600;line-height:1.25;color:var(--ink)}
.sponsor-blurb{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:5px;font-size:14px;line-height:1.5;color:var(--muted);min-height:calc(2 * 1.5em)}
.sponsor.feat{padding:15px 0}
.sponsor.feat .sponsor-name{font-size:20px;color:var(--accent-lift)}
.sponsor.feat:hover .sponsor-name{color:var(--ink)}

/* ── footer ────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);background:var(--panel);margin-top:0;padding-block:52px 60px}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.foot h2{font-size:23px;margin-bottom:11px}
.foot p{font-size:14.5px;line-height:1.6;color:var(--muted);max-width:46ch}
.foot__col h3{font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.foot__col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot__col a{font-size:15.5px;color:var(--ink-2)}
.foot__col a:hover{color:var(--accent-lift)}
.foot__base{margin-top:38px;padding-top:20px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted);line-height:1.7}

/* ── simple pages ──────────────────────────────────────────────── */
.page-body{padding-block:56px 76px}
.page-body h1{font-size:clamp(32px,4.4vw,54px);line-height:1.02;margin-bottom:22px}
.page-body h2{font-size:26px;margin:36px 0 12px}
.page-body p{font-size:18px;line-height:1.66;max-width:var(--measure);margin-bottom:20px}
.page-body ul{max-width:var(--measure);font-size:17px;line-height:1.66;color:var(--ink-2)}
.big404{font-family:var(--display);font-size:clamp(60px,12vw,150px);line-height:.9;color:var(--accent);margin-bottom:14px}

.chart.line .c-line{fill:none;stroke:var(--second);stroke-width:2.4}
.chart.line .c-dot{fill:var(--accent)}
.chart.line .c-grid{stroke:var(--line);stroke-width:1}
.chart.donut .c-ring{fill:none;stroke-width:26}
.chart.donut .c-ring-a{stroke:var(--accent)}
.chart.donut .c-ring-b{stroke:var(--second)}
.chart.donut .c-ring-c{stroke:var(--line)}
.chart.donut .c-mid{font-family:var(--display);font-size:26px;font-weight:700;fill:var(--ink)}
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:20px 0}
.sg-sw{padding:52px 14px 12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;border:1px solid var(--line)}
.sg-narrow{max-width:360px;border:1px dashed var(--line);padding:14px}

/* ── styleguide only ───────────────────────────────────────────── */
.sg-sec{border-top:1px solid var(--line);padding-block:40px}
.sg-sec>h2{font-size:24px;margin-bottom:6px}
.sg-sec>p.kicker{margin-bottom:22px}

/* ── responsive ────────────────────────────────────────────────── */
@media (max-width:1180px){
  .picks{grid-template-columns:1fr 1fr}
  .sec-grid{grid-template-columns:repeat(2,1fr)}
  .foot__grid{grid-template-columns:1fr 1fr}
  .feedrail{column-gap:32px}
  .feedrail__main{grid-column:1 / span 8}
  .sup-lead{grid-column:9 / span 4}
  .supporters>.sup-tier{grid-column:span 6}
  .sup-lead{grid-row:1}
}
@media (max-width:980px){
  :root{--gut:28px}
  .prop-grid{grid-template-columns:1fr!important;gap:34px!important}
  .lead-feature,.cat-hero{grid-template-columns:1fr;gap:30px}
  .cat-hero__text{padding:44px 0 34px}
  .cat-hero__img{min-height:300px}
  .feedrail{grid-template-columns:1fr;row-gap:40px}
  .feedrail__main,.sup-lead,.supporters>.sup-tier{grid-column:1 / -1;grid-row:auto}
  .feedrail__main{grid-row:1}
  .art-body{font-size:18px}
  .navrow{gap:0 22px}
}
@media (max-width:760px){
  :root{--gut:20px}
  body{font-size:16.5px}
  .band{padding-block:46px}
  .opener__inner{padding:60px 0 52px}
  .picks,.sec-grid,.foot__grid{grid-template-columns:1fr}
  .fig-inset,.art-body>.fig-inset{float:none;width:100%;margin:32px 0}
  .fig-offset{grid-template-columns:1fr;gap:18px}
  .art-body>figure,.art-body>.record,.art-body>.pullquote,.art-body>.chart,
  .art-body>.callout,.art-body>.blockquote{margin-block:34px}
  .art-body>h2{margin:38px 0 14px}
  .record__head{margin-bottom:16px;padding-bottom:12px}
  .fig-bleed figcaption{max-width:100%;margin-top:-18px}
  .mast__top{flex-direction:column;align-items:flex-start;gap:16px}
  .mast__util{justify-content:flex-start}
  .mast__nav{overflow-x:auto}
  .navrow{flex-wrap:nowrap;gap:0 20px;padding-bottom:2px}
  .navrow>li{flex:none}
  .subnav{display:none}
  .timeline li{grid-template-columns:1fr;gap:5px}
  .datatable td:first-child{width:42%}
  .reg thead{display:none}
  .reg tr{display:grid;grid-template-columns:56px 1fr;border-bottom:1px solid var(--line);padding:16px 0}
  .reg td{border:none;padding:0 0 6px}
  .reg__plate{display:none}
  .reg__title,.reg__sec,.reg__brief{grid-column:2}
  .reg__no{grid-row:1;grid-column:1}
  .cat-list a{grid-template-columns:74px 1fr;gap:18px}
  .cat-list img{width:74px;height:58px}
  .record{padding:20px 18px 22px}
  .statblock{flex:1 1 100%}
  .versus,.versus tbody,.versus tr,.versus td{display:block;width:100%}
  .versus thead{display:none}
  .versus td{border-bottom:1px solid var(--line);padding:12px 0}
  .versus td::before{content:attr(data-side);display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
}
@media print{
  .mast__nav,.supporters{display:none}
  body{background:#fff;color:#000}
}

/* 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){
  .wrap.opener__inner{padding-inline:var(--gut)}
}

/* op-overflow-grid: div overhung the viewport by 240px at 320 on
   index.html — width 540px reaching x=560, white-space:normal,
   min-width:auto, inside div.prop-grid (grid/nowrap,
   tracks 540px). Closed at the element that causes it, phone
   widths only. */
@media (max-width:640px){
  .prop-grid{grid-template-columns:minmax(0,1fr)}
}

/* op-overflow-grid: div overhung the viewport by 240px at 320 on
   index.html — width 540px reaching x=560, white-space:normal,
   min-width:auto, inside div.prop-grid (grid/nowrap,
   tracks 540px). Closed at the element that causes it, phone
   widths only, escalated because the first declaration lost the cascade. */
@media (max-width:640px){
  .prop-grid{grid-template-columns:minmax(0,1fr)!important}
}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   1072px at 390, 12% of the whole page. Two columns bring it to
   865px (19% shorter). Checked before writing: no new overflow, smallest mark still
   Nonepx wide, longest blurb 3 lines, tile heights 96-123px.
   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.
   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 (.sup-list), 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){
  .sup-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:1px!important}
    .sup-list > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup-list > * *{min-width:0!important;max-width:100%}
    .sup-list img,.sup-list svg{max-width:100%;height:auto}

}

/* op-odd-tier-lead: .sup-list (3 tiles), .sup-list (3 tiles), .sup-list (3 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){
  .sup-list:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
  .sup-list:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
  .sup-list:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-article-width: the article column was capped at 693px (85 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .art-body > p) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  div.art-body{--measure:min(84.365ch, 100%)!important}
}
@media (min-width:1600px){
  div.art-body > :is(p:not([class])){font-size:clamp(18.5px,1.2847vw,22.2px)!important}
}
/* op-article-width:end */

/* op-article-head: the article header followed the text column (693px) and was left behind when the text went to 835px. Operator: "article header page with title + meta info that are super shrinked". Its containers now follow the text again by the text's own factor. */
@media (min-width:1024px){
  header.art-head p.lead{max-width:min(835px, 100%)!important}
}
@media (min-width:1600px){
  header.art-head p.lead{max-width:min(calc(clamp(835px, 57.986vw, 1002px) + 0px), 100%)!important}
}
/* op-article-head:end */
/* op-heading-levels */
h2.rt-h3{font-family: var(--display); font-weight: 600; letter-spacing: -0.015em; margin: 0px;}
.record__head h2.rt-h3{font-size: 21px;}
.foot__col h2.rt-h3{font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.art-body > figure.article-figure.fig-bleed > img,
  div.art-body > figure.article-figure.fig-mat > img,
  div.cat-hero > div.cat-hero__img > img,
  div.fig-plate > div.fig-plate__box > img,
  div.lead-feature > figure.article-figure.fig-mat > img,
  figure.article-figure.fig-offset > div.fig-offset__img > img,
  figure.article-figure.fig-plate > div.fig-plate__box > img,
  li > a > img,
  section.opener > div.opener__img > img,
  td.reg__plate > a > img){height:auto}
/* op-img-dims:end */
.sup-list.sup-list:has(> [data-partner]){column-gap:20px!important}
@media (min-width:700px) and (max-width:999px){.sup-list:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--sp-gap,16px)!important}.sup-list:has(> [data-partner]) > [data-partner]{width:auto!important;min-width:0!important;margin-left:0!important;margin-right:0!important}}