/* ============================================================
   fridaynightlightsmovie.com — "Sodium Vapour"
   Palette (named jobs):
     --ground   #0E0C0A  page ground
     --panel    #17140F  raised surface / logo grounds
     --ink      #F4EFE4  type on ground  (contrast 15.4:1)
     --muted    #C6BFB0  secondary type   (contrast 9.6:1)
     --dim      #8B8477  credits / quiet furniture
     --amber    #E9A52A  accent — datum strips, rules, links   (saturated, hue ~40)
     --terra    #C96442  secondary accent — sections 2 & 4      (saturated, hue ~17)
     --blue     #2F5FBE  flag — links on cream                  (saturated, hue ~220)
     --cream    #F4EFE4  inverted panel ground
     --mat      #E6DFCD  figure mats
     --cream-ink#1A1611  type on cream
   ============================================================ */

:root{
  --ground:#0E0C0A; --panel:#17140F; --ink:#F4EFE4; --muted:#C6BFB0; --dim:#8B8477;
  --amber:#E9A52A; --terra:#C96442; --blue:#2F5FBE;
  --cream:#F4EFE4; --mat:#E6DFCD; --cream-ink:#1A1611;
  --display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --text:"Source Serif 4",Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --prose:64ch; --wide:1040px; --pad:22px; --body:18px; --gap:34px;
}
@media (min-width:768px){ :root{ --pad:40px; --body:19px; --wide:1080px; --gap:44px; } }
@media (min-width:1200px){ :root{ --prose:70ch; --wide:1180px; --pad:56px; --body:19.5px; --gap:56px; } }
@media (min-width:1600px){ :root{ --prose:74ch; --wide:1440px; --pad:76px; --body:21px; --gap:64px; } }
@media (min-width:2000px){ :root{ --prose:78ch; --wide:1720px; --pad:100px; --body:22px; --gap:76px; } }
@media (min-width:2560px){ :root{ --prose:82ch; --wide:2040px; --pad:128px; --body:23.5px; --gap:88px; } }

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--ground); color:var(--ink);
  font-family:var(--text); font-size:var(--body); line-height:1.62;
  -webkit-font-smoothing:antialiased; text-wrap:pretty; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:var(--amber); text-decoration:none; }
a:hover,a:focus{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:800; line-height:.9; letter-spacing:-.012em; margin:0; text-transform:uppercase; }
figure{ margin:0; }
table{ border-collapse:collapse; }

/* ---------- shared measures ---------- */
.wrap{ padding-inline:var(--pad); }
.measure{ max-width:var(--prose); margin-inline:auto; padding-inline:var(--pad); }
.wide{ max-width:var(--wide); margin-inline:auto; padding-inline:var(--pad); }

.kicker{ font-family:var(--display); font-weight:800; font-size:clamp(15px,1.15vw,26px);
  letter-spacing:.22em; text-transform:uppercase; color:var(--amber);
  display:flex; align-items:center; gap:12px; margin:0; }
.kicker::before{ content:""; flex:none; width:5px; height:1.35em; background:var(--amber); }
.kicker svg{ width:1.4em; height:1.4em; flex:none; }
.opener .kicker::before{ box-shadow:0 0 10px rgba(14,12,10,.6); }
.opener.on-light .kicker::before{ background:#6f3407; box-shadow:0 0 10px rgba(244,239,228,.7); }
.rule-12{ height:12px; background:var(--amber); border:0; margin:0; }
.rule-4{ height:4px; background:var(--amber); border:0; margin:0; }
.rule-2{ height:2px; background:var(--amber); border:0; margin:0; }
.mono{ font-family:var(--mono); }

/* ---------- masthead ---------- */
.masthead{ background:var(--ground); }
.masthead-in{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(20px,2.4vw,60px); padding:clamp(20px,2vw,42px) var(--pad) clamp(14px,1.4vw,26px); flex-wrap:wrap; }
.wordmark{ display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(22px,3.2vw,84px); line-height:.9; letter-spacing:.02em;
  white-space:nowrap; text-transform:uppercase; color:var(--ink); }
.wordmark:hover{ color:var(--ink); text-decoration:none; }
.wordmark .lit{ color:var(--amber); }
.nav{ display:flex; flex-wrap:wrap; gap:clamp(14px,1.5vw,32px);
  font-family:var(--display); font-weight:700; font-size:clamp(14px,1.05vw,21px);
  letter-spacing:.16em; text-transform:uppercase; }
.nav a{ color:var(--muted); display:flex; align-items:center; gap:8px; }
.nav a:hover{ color:var(--ink); text-decoration:none; }
.nav a svg{ width:1.15em; height:1.15em; }
.nav a[aria-current="page"]{ color:var(--ink); box-shadow:inset 0 -3px 0 var(--amber); }
.nav-toggle,.nav-check{ display:none; }
@media (max-width:900px){
  .nav-toggle{ display:flex; align-items:center; gap:10px; min-height:48px; font-family:var(--display);
    font-weight:700; font-size:18px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--amber); cursor:pointer; padding:10px 0; }
  .nav{ display:none; width:100%; background:var(--panel); padding:10px var(--pad) 14px; margin-inline:calc(var(--pad)*-1);
    flex-direction:column; gap:0; font-size:19px; }
  .nav a{ min-height:48px; display:flex; align-items:center; gap:12px; border-bottom:1px solid rgba(244,239,228,.14); }
  .nav a:last-child{ border-bottom:0; }
  .nav-check:checked ~ .nav{ display:flex; }
}

/* ---------- section opener: photograph with the title set on it ---------- */
.opener{ position:relative; }
.opener img{ width:100%; height:clamp(300px,46vw,860px); object-fit:cover; }
.opener .opener-type{ position:absolute; left:var(--pad); right:var(--pad); bottom:clamp(20px,2.4vw,52px); }
.opener h1,.opener h2{ font-size:clamp(38px,5.4vw,150px); text-shadow:0 2px 26px rgba(14,12,10,.55); }
.opener .kicker{ margin-bottom:clamp(10px,1vw,20px); text-shadow:0 2px 14px rgba(14,12,10,.7); }
.opener.on-light h1,.opener.on-light h2{ color:var(--cream-ink);
  text-shadow:0 0 2px rgba(244,239,228,.95),0 1px 10px rgba(244,239,228,.92),0 2px 28px rgba(244,239,228,.8); }
.opener.on-light .kicker{ color:#6f3407; text-shadow:0 0 3px rgba(244,239,228,.95),0 1px 10px rgba(244,239,228,.95); }
.opener h1,.opener h2{ text-shadow:0 0 2px rgba(14,12,10,.95),0 1px 8px rgba(14,12,10,.9),0 2px 28px rgba(14,12,10,.78); }
.opener .kicker{ text-shadow:0 0 3px rgba(14,12,10,.95),0 1px 10px rgba(14,12,10,.92); }
.frameline{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:10px var(--pad) 0; }
.frameline p{ margin:0; font-size:clamp(14px,.95vw,18px); line-height:1.5; color:var(--muted); max-width:92ch; }
.frameline .credit{ font-family:var(--mono); font-size:clamp(12.5px,.8vw,15px); letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim); align-self:flex-end; }

/* ---------- datum strip ---------- */
.datum{ background:var(--amber); color:#161208; }
.datum-in{ display:flex; flex-wrap:nowrap; overflow-x:auto; gap:clamp(18px,2vw,52px);
  padding:clamp(16px,1.6vw,30px) var(--pad); align-items:baseline; scrollbar-width:none; }
.datum-in::-webkit-scrollbar{ height:0; }
.datum .d{ display:flex; align-items:baseline; gap:12px; flex:0 0 auto; }
.datum .d + .d{ border-left:1px solid rgba(22,18,8,.35); padding-left:clamp(18px,1.8vw,44px); }
.datum .d-num{ font-family:var(--display); font-weight:800; font-size:clamp(26px,2.6vw,58px); line-height:.9; }
.datum .d-lab{ font-family:var(--mono); font-size:clamp(12.5px,.8vw,15px); letter-spacing:.14em;
  text-transform:uppercase; max-width:26ch; min-width:8ch; line-height:1.35; }
.datum.terra{ background:var(--terra); color:#150c08; }
@media (min-width:2000px){ .datum-in{ padding-block:clamp(26px,2.2vw,46px); } }

/* ---------- homepage bands ---------- */
.band{ padding:clamp(40px,4.4vw,120px) 0 0; }
.band-head{ display:grid; gap:clamp(14px,1.4vw,28px); padding-inline:var(--pad); }
.band h2{ font-size:clamp(28px,3.2vw,78px); }
.deck{ font-size:clamp(17px,1.12vw,24px); line-height:1.5; color:var(--muted); max-width:58ch; margin:0; }
.quiet{ padding:clamp(56px,6.4vw,170px) var(--pad); text-align:center; }
.quiet p{ margin:0 auto; max-width:min(1240px,72vw); font-family:var(--display);
  font-weight:600; font-size:clamp(26px,3.1vw,74px); line-height:1.03; text-transform:none; color:var(--ink); }

.cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--gap); padding-inline:var(--pad); align-items:start; }
.cols.lead-2 > :first-child{ grid-column:span 2; }
@media (max-width:700px){ .cols.lead-2 > :first-child{ grid-column:auto; } }
@media (min-width:2000px){ .cols{ grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); } }

.item h3{ font-size:clamp(21px,1.7vw,40px); line-height:.98; margin:0 0 8px; }
.item h3 a{ color:var(--ink); }
.item p{ margin:0; font-size:clamp(15px,1vw,20px); line-height:1.5; color:var(--muted); }
.item .thumb{ aspect-ratio:4/3; width:100%; object-fit:cover; margin-bottom:clamp(12px,1.1vw,22px); }
.side-list{ list-style:none; margin:0; padding:0; border-top:2px solid var(--amber); }
.side-list li{ border-bottom:1px solid rgba(244,239,228,.16); }
.side-list a{ display:block; padding:12px 0; color:var(--ink); font-family:var(--display);
  font-weight:600; font-size:clamp(17px,1.25vw,26px); line-height:1.06; text-transform:uppercase; }
.side-list a:hover{ color:var(--amber); text-decoration:none; }

.cream{ background:var(--cream); color:var(--cream-ink); }
.cream a{ color:var(--blue); }
.cream a:hover{ color:var(--cream-ink); }
.cream .deck{ color:#4c4437; }
.cream .kicker{ color:var(--terra); }
.cream h2,.cream h3{ color:var(--cream-ink); }

/* ---------- figures: three treatments, one drawing system ---------- */
.cap{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px clamp(16px,1.6vw,40px); margin-top:12px; }
.cap p{ margin:0; flex:1 1 22ch; min-width:0; font-family:var(--text); font-style:italic;
  font-size:clamp(15px,1vw,20px); line-height:1.45; color:var(--muted); }
.cap .credit{ flex:0 1 auto; min-width:0; margin-left:auto; font-family:var(--mono); font-size:clamp(12.5px,.8vw,15px);
  letter-spacing:.1em; color:var(--dim); font-style:normal; overflow-wrap:anywhere; }
.cream .cap p{ color:#4c4437; } .cream .cap .credit{ color:#7d7365; }

/* 1 — full-bleed band */
.fig-bleed{ margin-block:clamp(30px,3vw,72px); }
.fig-bleed img{ width:100%; height:clamp(260px,40vw,760px); object-fit:cover; }
.fig-bleed .cap{ max-width:var(--wide); margin-inline:auto; padding:10px var(--pad) 0;
  border-top:2px solid var(--amber); }

/* 2 — cream mat */
.fig-mat{ background:var(--mat); padding:clamp(14px,1.3vw,28px); margin-block:clamp(30px,3vw,72px); }
.fig-mat img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.fig-mat .cap{ padding-inline:2px; }
.fig-mat .cap p{ color:#3a3428; font-style:italic; }
.fig-mat .cap .credit{ color:#7d7365; }

/* 3 — inset hairline frame, hanging caption */
.fig-inset{ position:relative; margin-block:clamp(30px,3vw,72px); padding:clamp(10px,.9vw,16px); }
.fig-inset::before{ content:""; position:absolute; inset:0; border:1px solid rgba(233,165,42,.55); pointer-events:none; }
.fig-inset img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.fig-inset .cap{ padding-left:14px; border-left:2px solid var(--amber); margin-left:2px; }
.fig-inset .cap p{ max-width:46ch; flex:1 1 18ch; }

/* article-figure (styleguide class) inherits the mat treatment */
.article-figure{ background:var(--mat); padding:clamp(14px,1.3vw,28px); margin-block:clamp(30px,3vw,72px); }
.article-figure img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.article-figure figcaption{ margin-top:12px; font-style:italic; color:#3a3428; font-size:clamp(15px,1vw,20px); }
.gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(12px,1.2vw,26px); }
.gallery figure{ background:var(--mat); padding:10px; }
.gallery img{ aspect-ratio:3/2; object-fit:cover; width:100%; }
.gallery figcaption{ margin-top:8px; font-size:clamp(14px,.9vw,17px); font-style:italic; color:#3a3428; }

/* ---------- article page ---------- */
.article-body{
  display:grid;
  grid-template-columns:minmax(var(--pad),1fr) min(var(--prose),calc(100% - var(--pad)*2)) minmax(var(--pad),1fr);
  row-gap:0;
}
.article-body > *{ grid-column:2; }
.article-body > .breakout{ grid-column:1/4; max-width:var(--wide); margin-inline:auto; width:100%; }
.article-body > .bleed{ grid-column:1/-1; max-width:none; }
.article-body > p{ margin:0 0 1.25em; }
.article-body > h2{ font-size:clamp(24px,2.1vw,50px); margin:clamp(28px,2.6vw,60px) 0 clamp(12px,1.1vw,24px); }
.article-body > h2::before{ content:""; display:block; width:64px; height:4px; background:var(--amber); margin-bottom:clamp(12px,1vw,20px); }
.article-body .lead{ font-family:var(--display); font-weight:600; font-size:clamp(22px,1.9vw,44px);
  line-height:1.14; color:var(--amber); text-transform:none; margin:0 0 clamp(24px,2.2vw,48px); }
.article-body > .insert{ margin-block:clamp(34px,3.2vw,76px); }
.article-body > figure{ margin-block:clamp(34px,3.2vw,76px); }
.marginnote{ display:none; }
@media (min-width:1400px){
  .article-body{ grid-template-columns:minmax(var(--pad),1fr) min(var(--prose),calc(100% - var(--pad)*2)) minmax(280px,1fr); column-gap:clamp(32px,3vw,72px); }
  .article-body > .breakout{ grid-column:2/4; margin-inline:0; }
  .marginnote{ display:block; grid-column:3; align-self:start; margin-block:clamp(20px,1.8vw,40px);
    border-top:2px solid var(--terra); padding-top:14px; max-width:38ch; }
  .marginnote h4{ font-family:var(--display); font-weight:700; font-size:clamp(14px,1vw,19px);
    letter-spacing:.18em; color:var(--terra); margin:0 0 10px; }
  .marginnote p{ margin:0 0 .7em; font-size:clamp(15px,.98vw,19px); line-height:1.45; color:var(--muted); }
  .fig-inset.side{ padding:8px; }
}

/* ---------- components (styleguide set) ---------- */
.pullquote{ margin:0; border-top:4px solid var(--amber); border-bottom:1px solid rgba(244,239,228,.2); padding:clamp(18px,1.6vw,34px) 0; }
.pullquote p{ margin:0; font-family:var(--display); font-weight:600; font-size:clamp(24px,2.2vw,52px);
  line-height:1.06; color:var(--ink); }
.blockquote{ margin:0; padding-left:clamp(16px,1.4vw,30px); border-left:4px solid var(--terra); }
.blockquote p{ margin:0 0 .6em; font-size:1.05em; }
.blockquote cite{ font-family:var(--mono); font-size:clamp(12.5px,.85vw,16px); letter-spacing:.1em; color:var(--dim); font-style:normal; }
.callout{ background:var(--panel); border-top:4px solid var(--amber); padding:clamp(18px,1.7vw,36px); }
.callout h4{ font-family:var(--display); font-weight:700; font-size:clamp(16px,1.2vw,24px);
  letter-spacing:.14em; color:var(--amber); margin:0 0 clamp(12px,1vw,20px); }
.callout p{ margin:0 0 .8em; }
.callout ul{ margin:0; padding:0; list-style:none; display:grid; gap:clamp(10px,.9vw,18px); }
.callout li{ font-size:clamp(15px,1.02vw,21px); line-height:1.45; padding-left:18px; position:relative; color:var(--ink); }
.callout li::before{ content:""; position:absolute; left:0; top:.62em; width:9px; height:2px; background:var(--amber); }
.callout li b{ color:var(--amber); font-weight:600; }
.note{ font-family:var(--mono); font-size:clamp(13px,.9vw,16px); line-height:1.55; color:var(--dim);
  border-left:2px solid var(--dim); padding-left:14px; }

.statrow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:clamp(16px,1.6vw,40px);
  border-top:4px solid var(--amber); padding-top:clamp(16px,1.4vw,30px); }
.statblock{ display:flex; flex-direction:column; gap:8px; }
.stat-num{ font-family:var(--display); font-weight:800; font-size:clamp(32px,3vw,72px); line-height:.86; color:var(--amber); }
.stat-label{ font-family:var(--mono); font-size:clamp(12.5px,.82vw,15px); letter-spacing:.1em;
  text-transform:uppercase; line-height:1.4; color:var(--muted); }

.timeline{ list-style:none; margin:0; padding:0; border-left:2px solid rgba(233,165,42,.45); }
.timeline li{ display:grid; grid-template-columns:minmax(0,1fr); gap:4px; padding:0 0 clamp(16px,1.4vw,30px) clamp(16px,1.4vw,30px); position:relative; }
.timeline li::before{ content:""; position:absolute; left:-5px; top:.55em; width:8px; height:8px; background:var(--amber); }
.t-when{ font-family:var(--mono); font-size:clamp(12.5px,.85vw,16px); letter-spacing:.1em;
  text-transform:uppercase; color:var(--amber); }
.t-what{ font-size:clamp(15px,1.02vw,21px); line-height:1.45; }
@media (min-width:900px){ .timeline li{ grid-template-columns:minmax(90px,15ch) minmax(0,1fr); gap:clamp(14px,1.4vw,32px); align-items:baseline; } }

.datatable,.versus{ width:100%; font-size:clamp(15px,1.02vw,21px); }
.datatable th,.versus th{ font-family:var(--display); font-weight:700; font-size:clamp(13px,.9vw,17px);
  letter-spacing:.16em; text-transform:uppercase; color:var(--amber); text-align:left;
  border-bottom:2px solid var(--amber); padding:0 14px 10px 0; }
.datatable td,.versus td{ padding:13px 14px 13px 0; border-bottom:1px solid rgba(244,239,228,.16); vertical-align:top; }
.datatable tr:last-child td,.versus tr:last-child td{ border-bottom:0; }
.datatable .num,.versus .num{ font-family:var(--mono); white-space:nowrap; }
.scroll-x{ overflow-x:auto; }
.cream .datatable th{ color:#8a4a10; border-color:var(--terra); }
.cream .datatable td{ border-color:rgba(26,22,17,.18); }

.chart figcaption{ font-family:var(--mono); font-size:clamp(12.5px,.85vw,16px); letter-spacing:.08em; color:var(--dim); margin-top:10px; }
.chart svg{ width:100%; height:auto; }

.profile-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(16px,1.6vw,36px); }
.profile-card{ background:var(--panel); padding:clamp(16px,1.4vw,28px); display:flex; flex-direction:column; gap:10px; }
.profile-card .p-photo{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.profile-card h3{ font-size:clamp(19px,1.4vw,30px); line-height:1; margin:0; }
.profile-card .p-role{ font-family:var(--mono); font-size:clamp(12.5px,.85vw,16px); letter-spacing:.1em; text-transform:uppercase;
  color:var(--amber); margin:0; }
.profile-card p{ margin:0; font-size:clamp(15px,1vw,19px); line-height:1.45; color:var(--muted); }
.profile-card .p-attr{ font-family:var(--mono); font-size:clamp(12.5px,.8vw,15px); color:var(--dim); }
.profile-card.no-photo{ border-left:4px solid var(--terra); }

.org-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(12px,1.2vw,24px); }
.org-card{ display:grid; gap:6px; background:var(--panel); padding:clamp(14px,1.2vw,22px); align-content:start; }
.org-card:hover{ text-decoration:none; outline:1px solid var(--amber); }
.org-logo{ height:34px; width:auto; max-width:100%; object-fit:contain; }
.org-name{ font-family:var(--display); font-weight:700; font-size:clamp(17px,1.2vw,24px);
  text-transform:uppercase; line-height:1; color:var(--ink); }
.org-host{ font-family:var(--mono); font-size:clamp(12.5px,.8vw,15px); letter-spacing:.08em; color:var(--dim); }
.org-card.no-logo{ border-top:2px solid var(--amber); }
.entity-ref{ font-family:var(--mono); font-size:.88em; letter-spacing:.02em; white-space:nowrap; }

.further-grid,.related-links{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(14px,1.3vw,28px); list-style:none; margin:0; padding:0; }
.further-grid a,.related-links a{ display:flex; flex-direction:column; gap:8px; height:100%;
  background:var(--panel); padding:clamp(16px,1.4vw,28px); color:var(--ink);
  font-family:var(--display); font-weight:600; font-size:clamp(18px,1.3vw,28px); line-height:1.04;
  text-transform:uppercase; border-top:4px solid var(--amber); }
.further-grid a:hover,.related-links a:hover{ color:var(--amber); text-decoration:none; }
.related-links li{ display:flex; }
.related-links .r-sec{ font-family:var(--mono); font-size:clamp(12.5px,.8vw,15px); letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); margin-top:auto; }

.cat-list{ list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:4px solid var(--amber); }
.cat-list li{ border-bottom:1px solid rgba(244,239,228,.16); }
.cat-list a{ position:relative; display:grid; grid-template-columns:1fr; gap:8px;
  padding:clamp(18px,1.6vw,32px) clamp(16px,1.4vw,28px); color:var(--ink); }
.cat-list a::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--amber); transition:width .12s ease; }
.cat-list a:hover{ text-decoration:none; background:rgba(233,165,42,.07); }
.cat-list a:hover::before{ width:5px; }
.cat-list .c-title{ font-family:var(--display); font-weight:700; font-size:clamp(21px,1.7vw,38px);
  line-height:1.02; text-transform:uppercase; }
.cat-list a:hover .c-title{ color:var(--amber); }
.cat-list .c-brief{ font-size:clamp(15px,1vw,20px); line-height:1.5; color:var(--muted); max-width:88ch; }
.cat-list .c-meta{ font-family:var(--mono); font-size:clamp(12.5px,.8vw,15px); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
@media (min-width:1200px){ .cat-list .c-meta{ text-align:right; padding-left:clamp(12px,1vw,24px); border-left:1px solid rgba(244,239,228,.16); align-self:stretch; padding-top:4px; } }
@media (min-width:1200px){
  .cat-list a{ grid-template-columns:minmax(0,1.05fr) minmax(0,1.35fr) minmax(120px,auto); column-gap:clamp(24px,2.4vw,60px); align-items:start; }
  .cat-list .c-title{ align-self:center; }
  .cat-list .c-brief{ align-self:center; }
}
.cat-thumb{ width:100%; aspect-ratio:16/9; object-fit:cover; }

/* ---------- supporters ---------- */
.supporters{ border-top:4px solid var(--amber); margin-top:clamp(50px,5vw,130px); padding:clamp(28px,2.6vw,60px) var(--pad) 0; }
.supporters h2{ font-size:clamp(22px,1.7vw,38px); }
.supporters .deck{ margin-top:10px; }
.sponsor-tier{ margin-top:clamp(22px,2vw,44px); }
.sponsor-tier > h3{ font-family:var(--mono); font-weight:400; font-size:clamp(12.5px,.85vw,16px); letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim); margin:0 0 14px; }
.sponsor-grid{ display:grid; grid-template-columns:repeat(auto-fit,460px); gap:clamp(12px,1.2vw,24px); justify-content:start; }
.sponsor{ display:grid; grid-template-columns:220px minmax(0,1fr); align-items:center;
  gap:18px; padding:14px; background:rgba(23,20,15,.6); color:var(--muted); }
.sponsor:hover{ text-decoration:none; outline:1px solid rgba(233,165,42,.6); }
.sponsor img{ width:100%; height:48px; max-height:48px; object-fit:contain; background:var(--panel); padding:6px; }
.sponsor .sponsor-name{ font-family:var(--display); font-weight:600; font-size:17px; line-height:1.05;
  letter-spacing:.01em; text-transform:uppercase; color:var(--ink); }
.sponsor.feat{ background:var(--panel); border-top:2px solid var(--amber); }
@media (max-width:1000px){
  .sponsor-grid{ grid-template-columns:repeat(auto-fit,minmax(280px,340px)); }
  .sponsor{ grid-template-columns:1fr; gap:10px; }
  .sponsor img{ height:44px; max-height:44px; }
}

/* ---------- footer ---------- */
.foot{ margin-top:clamp(40px,4vw,110px); border-top:1px solid rgba(233,165,42,.4);
  padding:clamp(26px,2.4vw,56px) var(--pad) clamp(40px,4vw,90px);
  display:grid; gap:clamp(14px,1.4vw,28px); }
.foot .f-name{ font-family:var(--display); font-weight:800; font-size:clamp(24px,2.2vw,52px);
  text-transform:uppercase; line-height:.9; }
.foot p{ margin:0; max-width:56ch; color:var(--muted); font-size:clamp(16px,1.05vw,22px); }
.foot .f-links{ display:flex; flex-wrap:wrap; gap:clamp(14px,1.4vw,30px); font-family:var(--display);
  font-weight:700; font-size:clamp(14px,1vw,19px); letter-spacing:.16em; text-transform:uppercase; }
@media (min-width:1200px){ .foot{ grid-template-columns:auto 1fr auto; align-items:end; } }

/* ---------- misc ---------- */
.skip{ position:absolute; left:-9999px; }
.skip:focus{ position:static; display:block; padding:10px var(--pad); background:var(--amber); color:#161208; }
.pagehead{ padding:clamp(30px,3vw,70px) 0 0; }
.pagehead h1{ font-size:clamp(38px,4.6vw,124px); }
.detail{ font-family:var(--mono); font-size:clamp(12.5px,.82vw,15px); letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); }
.expander{ margin-top:14px; }
.expander input{ position:absolute; opacity:0; pointer-events:none; }
.expander .more{ display:none; }
.expander input:checked ~ .more{ display:block; }
.expander label{ display:inline-block; margin-top:14px; font-family:var(--display); font-weight:700;
  font-size:15px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); cursor:pointer;
  border-bottom:2px solid var(--amber); }
.expander input:checked ~ label{ display:none; }

/* ---------- article alignment variants ---------- */
.article-body > .pull-left{ grid-column:1/3; max-width:var(--wide); margin-left:auto; width:100%; }
.fig-pair{ background:var(--mat); padding:clamp(14px,1.3vw,28px); }
.fig-pair .pair{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(12px,1.2vw,26px); }
.fig-pair img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.fig-pair .cap p{ color:#3a3428; }
.fig-pair .cap .credit{ color:#7d7365; }
.hero-fig img{ width:100%; height:clamp(300px,44vw,820px); object-fit:cover; }
.hero-fig .cap{ max-width:var(--wide); margin-inline:auto; padding:10px var(--pad) 0; border-top:2px solid var(--amber); }
.entity-end h3{ font-family:var(--display); font-weight:700; font-size:clamp(19px,1.4vw,32px); letter-spacing:.06em; margin:0 0 clamp(14px,1.2vw,26px); }
.entity-end{ border-top:4px solid var(--terra); padding-top:clamp(16px,1.4vw,30px); }
.entity-end .org-grid{ margin-top:clamp(14px,1.2vw,26px); }

/* ---------- horizontal timeline band ---------- */
.titles-band{ background:var(--panel); padding:clamp(30px,2.8vw,66px) 0 clamp(34px,3.2vw,74px); }
.timeline-h{ list-style:none; margin:clamp(20px,1.8vw,40px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); border-top:2px solid var(--amber); }
.timeline-h li{ position:relative; padding:clamp(18px,1.6vw,34px) clamp(16px,1.4vw,30px) 0 0; }
.timeline-h li::before{ content:""; position:absolute; top:0; left:0; width:2px; height:clamp(14px,1.2vw,24px); background:var(--amber); }
.timeline-h .th-year{ display:block; font-family:var(--display); font-weight:800; line-height:.88;
  font-size:clamp(30px,2.7vw,64px); color:var(--amber); }
.timeline-h .th-what{ display:block; margin-top:10px; font-family:var(--mono); font-size:clamp(12.5px,.82vw,15px);
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted); line-height:1.45; max-width:24ch; }
/* ---------- table panel ---------- */
.table-panel{ background:var(--panel); padding:clamp(16px,1.5vw,32px) clamp(16px,1.5vw,32px) clamp(8px,.8vw,16px); }
.datatable .num,.versus .num{ text-align:right; }
.datatable thead th:not(:first-child),.versus thead th:not(:first-child){ text-align:right; }
.datatable thead th:first-child{ text-align:left; }
.datatable tbody td:first-child{ font-family:var(--display); font-weight:700; font-size:1.08em;
  letter-spacing:.01em; text-transform:uppercase; color:var(--ink); }
.datatable tbody tr:hover td{ background:rgba(233,165,42,.06); }

@media (min-width:901px){ .nav a{ min-height:44px; display:flex; align-items: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}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

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

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

/* sp-blurb-size: the design never sized .sponsor-blurb, so it inherited body copy.
   Relative, so it still follows the design's scale. */
.sponsor .sponsor-blurb{font-size:.8em;line-height:1.45}
.sponsor .sp-brand{font-weight:700}

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
.sponsor.sponsor{justify-content:center!important}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}
/* the mobile un-clamp is retired: the operator asked for "2-3 rows max" on phones, which is
   what the desktop rule above already does — so mobile simply keeps it. */
@media (max-width:640px){.sponsor.sponsor .sponsor-blurb{-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}}

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


/* 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.pagehead{padding-inline:var(--pad)}
}

/* op-money-grid-fill: the supporters grid left a measurable band of unused width.
   Fixed pixel tracks (often `repeat(auto-fit,<length>)`, which can never fill) are
   restated as `minmax(min(<track>,100%),1fr)`: Design's track size becomes the
   MINIMUM and the tracks share the remainder, so the tiles stay equal and the row
   fills. Measured per width, and only applied where more than half a tile of width
   was going unused. Tile ground, padding, borders and logo sizing are untouched. */
.sponsor-grid{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.sponsor-grid{grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr))}

/* op-money-columns: the supporters block ran one tile per row — 10 tiles,
   1076px at 390, 10% of the whole page. Two columns bring it to
   583px (46% shorter). Checked before writing: no new overflow, smallest mark still
   136px wide, longest blurb 1 lines, tile heights 86-100px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   Only the tier(s) that were one-per-row are touched (.sponsor-grid), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .sponsor-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:17px!important}
    .sponsor-grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-grid > * *{min-width:0!important;max-width:100%}
    .sponsor-grid img,.sponsor-grid svg{max-width:100%;height:auto}
}

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

/* op-page-overflow: the page scrolled sideways at 320 — div reached
   336px in a 320px screen (+16px), inside
   div.cols. Remedy: unpin the grid track. Structural only, no spacing value of mine;
   tried in order and this is the first that held, with the page's visible copy unchanged.
   Phone widths only — desktop is re-measured after writing and must not move. */
@media (max-width:360px){
  div.cols{grid-template-columns:minmax(0,1fr)!important}
  div{min-width:0!important;max-width:100%!important}
}

/* op-article-seam: text ran into the band that follows it (0-7px) — operator: "end of paragraph nearly touches intersection. Padding is missing." The section now keeps Design's own gap before the band: div.frameline → div.datum: 37px (the gap after the band). */
  article > div.frameline:has(+ div.datum){padding-bottom:28px!important}
@media (min-width:1440px){
  article > div.frameline:has(+ div.datum){padding-bottom:37px!important}
}
/* op-article-seam:end */

/* op-hover-pad */
.datatable tbody tr td:first-child{padding-left:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:681px) and (max-width:1099px){
  aside.insert.entity-end.breakout{padding-left:max(var(--pad), 18px);padding-right:max(var(--pad), 18px)}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article > section.on-light.opener > img,
  article > section.opener > img,
  div.article-body > figure.fig-inset.insert.pull-left > img,
  div.cols > figure.fig-inset > img,
  div.cols > figure.fig-mat > img,
  div.cols.lead-2 > figure.fig-bleed > img,
  div.cols.lead-2 > figure.fig-inset > img,
  div.cols.lead-2 > figure.fig-mat > img,
  figure.breakout.fig-pair.insert > div.pair > img,
  main > section.on-light.opener > img,
  main > section.opener > img,
  section.band > figure.fig-inset.wrap > img){height:auto}
/* op-img-dims:end */
@media (min-width:700px) and (max-width:1100px){.sponsor-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.sponsor-grid > [data-partner]:nth-child(odd of [data-partner]):nth-last-child(1 of [data-partner]){grid-column:1/-1!important}}[data-partner] img{background:transparent!important}