/* thaicongenvancouver.org — "Month Five"
   PALETTE (3 named jobs + 2 supports)
     --ground  #14120F  page ground
     --ink     #EFE7D6  body ink
     --accent  #E8761A  saffron — kickers, numerals, rules, the plate ground
     --second  #2A9C74  jade — the quiet band, secondary marks
     --panel   #1B1814  raised panel / mat
   Saturated members: saffron (h~28) and jade (h~157) — 129 degrees apart.
   Contrast on --ground: ink 14.1:1, saffron 6.4:1, jade 5.6:1 — all legible at 15px.
   TYPE: Kanit (display, 500/600/800) + Bai Jamjuree (text, 400/600/700). */

:root{
  --ground:#14120F;
  --ink:#EFE7D6;
  --accent:#E8761A;
  --second:#2A9C74;
  --panel:#1B1814;
  --deep:#0C0B09;
  --ink-70:rgba(239,231,214,.72);
  --ink-50:rgba(239,231,214,.52);
  --ink-22:rgba(239,231,214,.22);
  --ink-12:rgba(239,231,214,.12);
  --display:"Kanit",system-ui,sans-serif;
  --text:"Bai Jamjuree",system-ui,sans-serif;
  --rail:318px;
  --gutter:clamp(20px,3.2vw,52px);
  /* Bai Jamjuree's `0` is ~0.645em, so 1ch buys well over one average
     character: 60ch here resolves to ~658px, which is ~72 real characters
     per line at the 18.5px prose size. Do not raise this to "widen" the
     column — it overshoots the 66–75ch target fast. */
  --measure:60ch;
}

*,*::before,*::after{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.55;
  -webkit-font-smoothing:antialiased;text-wrap:pretty;
  display:grid;grid-template-columns:var(--rail) minmax(0,1560px);justify-content:center;align-items:start;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--second)}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.06;margin:0;letter-spacing:-.015em}
p{margin:0}
figure{margin:0}
table{border-collapse:collapse}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* ─── rail / masthead ─────────────────────────────────────────── */
.rail{
  align-self:start;
  padding:22px 20px 28px;border-right:1px solid var(--ink-22);background:var(--ground);
}
/* Only pin the rail on viewports tall enough to hold all of it — otherwise the
   second level would sit inside a hidden inner scroller. */
@media (min-height:1000px){
  .rail{position:sticky;top:0;max-height:100vh;overflow-y:auto}
}
.masthead{display:flex;gap:13px;align-items:flex-start;color:var(--ink)}
.masthead:hover{color:var(--ink)}
.mark{flex:none;color:var(--accent);margin-top:3px}
.wordmark{font-family:var(--display);font-weight:800;font-size:36px;line-height:.88;letter-spacing:-.03em;text-transform:uppercase}
.standing{margin:14px 0 22px;font-size:12.5px;line-height:1.4;color:var(--ink-50);max-width:33ch}
.railnav{display:grid;gap:14px}
.railsec{display:grid;grid-template-columns:24px 1fr;align-content:start;gap:4px 10px}
.railsec .ico{grid-row:span 2;color:var(--accent);margin-top:2px}
.railsec > a.sec{font-family:var(--display);font-weight:600;font-size:14.5px;line-height:1.15;color:var(--ink)}
.railsec > a.sec:hover{color:var(--accent)}
.railsub{grid-column:2;display:grid;align-content:start;gap:3px;font-size:13px;line-height:1.34}
.railsub a{color:var(--ink-70)}
.railsub a:hover{color:var(--accent)}
.railsub a[aria-current]{color:var(--accent)}
.railfoot{margin-top:20px;padding-top:14px;border-top:1px solid var(--ink-22);display:grid;gap:5px;font-size:13px}
.railfoot a{font-family:var(--display);font-weight:500;color:var(--second)}
.railfoot a:hover{color:var(--accent)}

/* ─── generic bands ───────────────────────────────────────────── */
main{min-width:0}
.band{padding:clamp(38px,5.2vw,76px) var(--gutter)}
.band-tight{padding:clamp(26px,3.4vw,44px) var(--gutter)}
.band-bleed{padding:0}
.band-panel{background:var(--panel)}
.band-jade{background:var(--second);color:#0B1F17}
.band-jade a{color:#0B1F17;border-bottom:2px solid #0B1F17}
.band-plate{background:var(--accent);color:#1A0E03}
.band-plate a{color:#1A0E03}
.rule{border:0;border-top:1px solid var(--ink-22);margin:0 var(--gutter)}

.kicker{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:8px}
.kicker .ico{color:var(--accent)}
.kicker a{color:inherit}
.deck{font-size:18px;line-height:1.5;color:var(--ink-70)}
.crumbs{font-family:var(--display);font-weight:500;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-50);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs a{color:var(--ink-50)}
.crumbs a:hover{color:var(--accent)}

/* numerals — the site's repeating drawn mark */
.num{font-family:var(--display);font-weight:800;line-height:.72;color:transparent;-webkit-text-stroke:1.6px var(--accent);flex:none}
.num-lg{font-size:clamp(58px,8vw,132px);-webkit-text-stroke-width:2px}
.num-md{font-size:clamp(44px,5.4vw,88px)}
.num-sm{font-size:30px;-webkit-text-stroke-width:1.2px}
.num-jade{-webkit-text-stroke-color:var(--second)}
.num-quiet{-webkit-text-stroke-color:var(--ink-50)}

/* ─── homepage ────────────────────────────────────────────────── */
.hero-head{max-width:24ch}
.hero-h1{font-family:var(--display);font-weight:800;font-size:clamp(32px,4.8vw,74px);letter-spacing:-.025em;line-height:.96}
.diagram{display:block;width:100%;overflow:visible;font-family:var(--text)}
.figcap-narrow{max-width:56ch;font-size:15.5px;line-height:1.5;color:var(--ink-70)}

.lede{display:grid;gap:clamp(18px,2.4vw,34px)}
.lede-title{font-family:var(--display);font-weight:800;font-size:clamp(28px,4.2vw,62px);line-height:.98;letter-spacing:-.02em;max-width:26ch}
.lede-title a{color:var(--ink)}
.lede-title a:hover{color:var(--accent)}

.stack{display:grid;gap:clamp(30px,4vw,56px)}
.piece{display:flex;flex-wrap:wrap;gap:clamp(18px,2.4vw,30px);align-items:flex-start;max-width:1180px}
.piece-body{flex:1 1 320px;min-width:min(100%,270px)}
.piece-img{flex:0 1 300px;min-width:min(100%,230px)}
.piece h2{font-size:clamp(22px,2.6vw,38px);line-height:1.05}
.piece h3{font-size:clamp(19px,2vw,26px);line-height:1.12;font-weight:600}
.piece h2 a,.piece h3 a{color:var(--ink)}
.piece h2 a:hover,.piece h3 a:hover{color:var(--accent)}
.piece p{margin-top:8px;font-size:16.5px;line-height:1.5;color:var(--ink-70);max-width:58ch}
.divided > * + *{border-top:1px solid var(--ink-22);padding-top:clamp(24px,3vw,44px)}

.quiet-line{font-family:var(--display);font-weight:600;font-size:clamp(24px,3.8vw,56px);line-height:1.06;max-width:26ch;margin:0}
.jade-cta{display:inline-block;margin-top:24px;font-family:var(--display);font-weight:600;font-size:15px}

/* ─── figure system — four treatments, one drawing system ─────── */
.article-figure{margin:clamp(28px,3.4vw,46px) 0}
.article-figure img{width:100%;height:auto}
.article-figure figcaption{margin-top:12px}
.fig-kicker{font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:5px}
.fig-cap{display:block;font-size:16px;line-height:1.45;max-width:60ch}
.fig-inset .fig-cap,.fig-mat .fig-cap{max-width:none}
.fig-credit{display:block;margin-top:5px;font-size:12.5px;line-height:1.4;color:var(--ink-50)}

/* 1 · bleed — breaks the measure, caption offset into a narrow column */
.fig-bleed{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter))}
article > .fig-bleed,main > .fig-bleed,.band-bleed > .fig-bleed{margin-left:0;margin-right:0}
.fig-bleed img{aspect-ratio:16/10;object-fit:cover;max-height:min(78vh,880px)}
.fig-bleed figcaption{margin:12px var(--gutter) 0;padding-top:10px;border-top:2px solid var(--accent);max-width:66ch}

/* 2 · mat — the photograph sits on a panel with a deep mat */
.fig-mat{background:var(--panel);padding:16px 16px 18px}
.fig-mat img{aspect-ratio:3/2;object-fit:cover}
.fig-mat figcaption{margin-top:14px;padding-left:14px;border-left:2px solid var(--second)}

/* 3 · inset — narrower, in the column, caption hanging beside it */
.fig-inset{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:start}
.fig-inset img{aspect-ratio:4/5;object-fit:cover;border:1px solid var(--ink-22)}
.fig-inset figcaption{margin-top:0}

/* 4 · plate — saffron bar down the side, caption stepped in beneath it */
.fig-plate{padding:0 0 0 clamp(12px,1.8vw,26px);border-left:3px solid var(--accent)}
.fig-plate img{aspect-ratio:2/1;object-fit:cover}
.fig-plate figcaption{margin-top:16px}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:10px;margin:clamp(26px,3vw,40px) 0}
.gallery figure{margin:0}
.gallery img{aspect-ratio:1;object-fit:cover}
.gallery figcaption{margin-top:8px;font-size:14px;line-height:1.4;color:var(--ink-70)}

/* ─── article page ────────────────────────────────────────────── */
.post-head{padding:clamp(26px,3.6vw,54px) var(--gutter) 0}
.post-h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,4.6vw,66px);line-height:.98;letter-spacing:-.025em;max-width:22ch;margin:14px 0 0}
.post-meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:18px;font-size:15px;color:var(--ink-50)}
.post-meta .sec-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.lead{font-size:clamp(19px,2vw,25px);line-height:1.4;font-weight:400;color:var(--ink);max-width:46ch;margin:20px 0 0}

.prose{padding:0 var(--gutter);max-width:calc(var(--measure) + 2 * var(--gutter))}
.prose p{font-size:18.5px;line-height:1.62;margin:0 0 22px}
.prose p:last-child{margin-bottom:0}
.prose > h2{position:relative;font-size:clamp(22px,2.6vw,34px);line-height:1.1;margin:44px 0 16px;padding-top:16px;border-top:1px solid var(--ink-22)}
.prose > h2 .h2num{font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.08em;color:transparent;-webkit-text-stroke:1px var(--accent);display:block;margin-bottom:8px}
.prose ul{margin:0 0 22px;padding-left:1.1em}
.prose li{font-size:18px;line-height:1.55;margin-bottom:7px}
.prose em{font-style:italic}
.prose a{border-bottom:1px solid rgba(232,118,26,.4)}
.prose a:hover{border-bottom-color:var(--second)}
.prose .article-figure{margin-left:0;margin-right:0}
.prose .fig-bleed{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter))}
/* Figures that interrupt the prose are siblings of it, so they need their own
   horizontal placement — four different widths, not four edge-to-edge slabs. */
article > .fig-mat,article > .fig-inset,article > .fig-plate,article > .chart{margin-left:var(--gutter);margin-right:var(--gutter)}
article > .fig-mat{max-width:var(--measure)}
article > .chart{max-width:calc(var(--measure) + 14ch)}
article > .fig-inset{max-width:calc(var(--measure) - 6ch)}
article > .fig-plate{max-width:calc(var(--measure) + 14ch)}

/* note plates — the Notes-for-Design material, full-bleed between sections.
   Deliberately not a side rail: it interrupts the measure instead. */
.plate{padding:clamp(30px,4vw,56px) var(--gutter);background:var(--panel);border-top:1px solid var(--ink-22);border-bottom:1px solid var(--ink-22);margin:clamp(34px,4vw,54px) 0}
.plate-head{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:baseline;margin-bottom:24px}
.plate-head h2{font-size:clamp(21px,2.4vw,32px);line-height:1.08}
.plate-list{list-style:none;margin:0;padding:0;display:grid;gap:20px 34px;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));max-width:1180px}
.plate-list li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}
.plate-n{font-family:var(--display);font-weight:800;font-size:22px;line-height:1;color:transparent;-webkit-text-stroke:1px var(--second)}
.plate-list strong{display:block;font-family:var(--display);font-weight:600;font-size:16px;line-height:1.2;margin-bottom:3px}
.plate-list span.pt{font-size:15.5px;line-height:1.45;color:var(--ink-70);display:block}

/* ─── text components ────────────────────────────────────────── */
.pullquote{margin:32px 0;padding:0 0 0 clamp(14px,2vw,26px);border-left:4px solid var(--accent)}
.pullquote p{font-family:var(--display);font-weight:500;font-size:clamp(21px,2.4vw,30px);line-height:1.18;margin:0}
.blockquote{margin:30px 0;padding:20px 22px;background:var(--panel)}
.blockquote p{font-size:18px;line-height:1.5;margin:0 0 10px}
.blockquote cite{font-style:normal;font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:.04em;color:var(--accent)}
.callout{margin:30px 0;padding:20px 22px;border:1px solid var(--accent);background:rgba(232,118,26,.08)}
.callout p{font-size:17.5px;line-height:1.5;margin:0}
p.note{margin:24px 0;padding-left:16px;border-left:2px solid var(--second);font-size:16px;line-height:1.5;color:var(--ink-70)}

/* ─── data components ────────────────────────────────────────── */
.tablewrap{overflow-x:auto;margin:30px 0;-webkit-overflow-scrolling:touch}
table.versus,table.datatable{width:100%;min-width:min(100%,420px);font-size:16px}
table.versus th,table.versus td,table.datatable th,table.datatable td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--ink-22);vertical-align:top;line-height:1.4}
table.versus th,table.datatable th{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);border-bottom-color:var(--accent)}
table.versus tbody th{text-transform:none;letter-spacing:0;font-size:15.5px;color:var(--ink);border-bottom-color:var(--ink-22)}
table.datatable caption,table.versus caption{caption-side:top;text-align:left;font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-50);padding-bottom:10px}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:1px;background:var(--ink-22);margin:30px 0;border:1px solid var(--ink-22)}
.statblock{background:var(--ground);padding:18px 16px;display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.4vw,46px);line-height:.9;color:var(--accent)}
.stat-label{font-size:14.5px;line-height:1.35;color:var(--ink-70)}

.timeline{list-style:none;margin:30px 0;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:minmax(120px,26%) 1fr;gap:8px 20px;padding:14px 0;border-top:1px solid var(--ink-22)}
.timeline li:last-child{border-bottom:1px solid var(--ink-22)}
.t-when{font-family:var(--display);font-weight:600;font-size:14.5px;line-height:1.25;color:var(--accent)}
.t-what{font-size:16px;line-height:1.45}

.chart{margin:32px 0}
.chart svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--text)}
.chart figcaption{margin-top:12px;font-size:15.5px;line-height:1.45;color:var(--ink-70);max-width:58ch}
.chart figcaption .fig-kicker{color:var(--second)}

/* chart key — named in real HTML type so it stays legible on a phone,
   where in-SVG labels would scale down to 7px */
.diagram-key{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:9px 24px}
.diagram-key li{display:flex;align-items:baseline;gap:9px;font-size:15.5px;line-height:1.3}
.diagram-key .dk-n{font-family:var(--display);font-weight:800;font-size:18px;line-height:1;color:var(--accent);min-width:1.3em;text-align:right}
.diagram-key .dk-line{align-self:center;width:26px;height:3px;flex:none;border-radius:2px}
.diagram-key .dk-bkk{background:var(--accent)}
.diagram-key .dk-van{background:var(--second)}
.diagram-key-months{margin-top:12px;padding-top:14px;border-top:1px solid var(--ink-12)}
.diagram-note{margin:12px 0 0;font-size:14px;color:var(--ink-50)}

/* ─── cards / references ─────────────────────────────────────── */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;margin:30px 0}
.profile-card{background:var(--panel);padding:18px;display:flex;flex-direction:column;gap:8px;height:100%}
.profile-card .p-photo{width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:4px}
.profile-card h3{font-size:19px;line-height:1.15}
.profile-card .p-role{font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.profile-card p{font-size:15.5px;line-height:1.45;color:var(--ink-70)}
.profile-card .p-links{margin-top:auto;padding-top:8px;font-size:14.5px;color:var(--ink)}
.profile-card .p-attr{font-size:12.5px;color:var(--ink-50)}
.profile-card.no-photo{border-top:3px solid var(--second)}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px;margin:28px 0}
.org-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:2px 12px;align-items:center;padding:14px;border:1px solid var(--ink-22);background:var(--panel);color:var(--ink)}
.org-card:hover{border-color:var(--accent);color:var(--ink)}
.org-logo{grid-row:span 2;width:44px;height:44px;object-fit:contain}
.org-name{font-family:var(--display);font-weight:600;font-size:16px;line-height:1.15;align-self:end}
.org-host{font-size:13px;color:var(--ink-50);align-self:start}
.org-card.no-logo{grid-template-columns:1fr}
.org-card.no-logo .org-name,.org-card.no-logo .org-host{grid-row:auto}
.entity-ref{border-bottom:1px solid rgba(232,118,26,.4);white-space:nowrap}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1px;background:var(--ink-22);border:1px solid var(--ink-22);margin:0}
.further-grid a{display:flex;flex-direction:column;gap:6px;padding:18px;background:var(--ground);font-family:var(--display);font-weight:600;font-size:17.5px;line-height:1.15;color:var(--ink);min-height:100%}
.further-grid a:hover{background:var(--panel);color:var(--accent)}
.further-grid a .why{font-family:var(--text);font-weight:400;font-size:15px;line-height:1.4;color:var(--ink-70);margin-top:auto}

ul.related-links{list-style:none;margin:0;padding:0;display:grid;gap:0}
ul.related-links li{border-top:1px solid var(--ink-22)}
ul.related-links li:last-child{border-bottom:1px solid var(--ink-22)}
ul.related-links a{display:grid;grid-template-columns:26px 1fr;gap:12px;padding:15px 0;font-family:var(--display);font-weight:600;font-size:17px;line-height:1.2;color:var(--ink)}
ul.related-links a:hover{color:var(--accent)}
ul.related-links .ico{color:var(--accent);margin-top:1px}

/* ─── category / archive lists ───────────────────────────────── */
ul.cat-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
ul.cat-list > li{border-top:1px solid var(--ink-22)}
ul.cat-list > li:last-child{border-bottom:1px solid var(--ink-22)}
ul.cat-list > li > a{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;padding:20px 0;color:var(--ink)}
ul.cat-list > li > a:hover{color:var(--accent)}
ul.cat-list .cl-n{grid-row:span 2;font-family:var(--display);font-weight:800;font-size:26px;line-height:1;color:transparent;-webkit-text-stroke:1px var(--second);min-width:32px}
ul.cat-list .cl-t{font-family:var(--display);font-weight:600;font-size:clamp(19px,2.1vw,27px);line-height:1.12}
ul.cat-list .cl-d{font-size:16px;line-height:1.45;color:var(--ink-70);max-width:66ch}
.archive-group{margin-bottom:clamp(34px,4vw,56px)}
.archive-group h2{font-size:clamp(21px,2.4vw,32px);display:flex;align-items:center;gap:12px;margin-bottom:6px}
.archive-group h2 .ico{color:var(--accent)}
.archive-group .blurb{font-size:16px;color:var(--ink-70);margin-bottom:14px}
details.more{margin-top:14px}
details.more > summary{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--second);cursor:pointer;list-style:none;padding:10px 0}
details.more > summary::-webkit-details-marker{display:none}
details.more > summary::after{content:" +"}
details.more[open] > summary::after{content:" −"}

/* ─── colophon (supporters) — a directory, not a gallery ─────── */
.colophon{padding:clamp(34px,4.4vw,64px) var(--gutter);background:var(--deep);border-top:1px solid var(--ink-22)}
.colophon-inner{display:flex;flex-wrap:wrap;gap:26px clamp(32px,4vw,64px);align-items:flex-start}
.colophon-head{flex:1 1 240px;max-width:34ch}
.colophon-head h2{font-size:clamp(20px,2.2vw,28px);margin-bottom:8px}
.colophon-head p{font-size:15.5px;line-height:1.45;color:var(--ink-50)}
.sponsor-list{flex:2 1 400px;min-width:min(100%,280px);max-width:820px;columns:2;column-gap:clamp(26px,3.2vw,52px);column-rule:1px solid var(--ink-22);border-top:1px solid var(--ink-22)}
a.sponsor{display:block;padding:13px 0;border-bottom:1px solid var(--ink-22);break-inside:avoid;color:var(--ink)}
a.sponsor:hover{color:var(--accent)}
.sponsor-name{font-size:17px;line-height:1.3}
a.sponsor.feat .sponsor-name{font-size:19px;font-family:var(--display);font-weight:600}
a.sponsor.feat{padding-left:14px;box-shadow:inset 2px 0 0 var(--second)}
.sponsor-blurb{display:block;margin-top:3px;font-size:14.5px;line-height:1.4;color:var(--ink-50)}

/* ─── footer ─────────────────────────────────────────────────── */
.sitefoot{padding:clamp(30px,3.6vw,52px) var(--gutter) 34px;border-top:1px solid var(--ink-22);display:grid;gap:22px}
.foot-top{display:flex;flex-wrap:wrap;gap:20px 44px;align-items:flex-end;justify-content:space-between}
.foot-word{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.6vw,36px);line-height:1;text-transform:uppercase;letter-spacing:-.02em}
.foot-nav{display:grid;gap:14px}
.foot-secs{display:flex;flex-wrap:wrap;gap:10px 26px}
.foot-secs a{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:15px;line-height:1.2;color:var(--ink)}
.foot-secs a:hover{color:var(--accent)}
.foot-secs .ico{color:var(--accent);flex:none}
.foot-util{display:flex;flex-wrap:wrap;gap:6px 20px;padding-top:12px;border-top:1px solid var(--ink-12);font-size:13.5px}
.foot-util a{color:var(--second)}
.foot-util a:hover{color:var(--accent)}
.foot-legal{font-size:12.5px;line-height:1.5;color:var(--ink-50);max-width:70ch}

/* ─── responsive ─────────────────────────────────────────────── */
@media (max-width:1000px){
  body{grid-template-columns:1fr}  .rail{position:static;max-height:none;overflow:visible;border-right:0;border-bottom:1px solid var(--ink-22);padding-bottom:22px}
  .railnav{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));display:grid;gap:16px 26px}
  .fig-inset{grid-template-columns:1fr;align-items:start}
  .fig-inset img{aspect-ratio:3/2}
  .sponsor-list{columns:1;column-rule:none}}
@media (max-width:560px){
  body{font-size:16.5px}
  .prose p{font-size:17.5px}
  .fig-plate figcaption{margin-top:12px}
  .timeline li{grid-template-columns:1fr}
  .plate-list li{grid-template-columns:28px 1fr}
}
@media (prefers-reduced-motion:no-preference){
  a{transition:color .14s ease}
}

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

  .nav-disclose-bars{width:13px;height:3px;flex:none;border-radius:99px;background:currentColor;box-shadow:5px 0 0 -0.5px currentColor,-5px 0 0 -0.5px currentColor}
  .railnav{height:0;overflow:hidden;visibility:hidden;padding-block:0;margin-block:0;border-top-width:0;border-bottom-width:0}
  .nav-disclose-c:checked ~ .railnav{height:auto;overflow:visible;visibility:visible;padding-block:revert;margin-block:revert;border-top-width:revert;border-bottom-width:revert}
  .rail:has(> .nav-disclose){display:flow-root}
  .nav-disclose:not(:has(~ .railnav)){display:none}
}

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

}

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

/* op-article-width: the article column was capped at 659px (78 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width calc(var(--measure) + 2 * var(--gutter)) (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 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  article div.prose{max-width:min(956px, 100%)!important}
}
@media (min-width:1600px){
  article div.prose{max-width:min(clamp(956px, 66.389vw, 1147px), 100%)!important}
  article div.prose > :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 (659px) and was left behind when the text went to 864px. 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){
  article p.lead{max-width:min(864px, 100%)!important}
}
@media (min-width:1600px){
  article p.lead{max-width:min(calc(clamp(864px, 60.000vw, 1037px) + 0px), 100%)!important}
}
/* op-article-head:end */