/* ── Computer Industry Almanac ──────────────────────────────────────────
   Palette (4 members, each with a job)
     --ground  bone paper, the page                       #F3F0E9
     --ink     near-black, text and the dark bands        #14161A
     --accent  signal red, kickers / marks / one band     #D8410E   hue ~18
     --second  deep blue, numbers / panels / the map      #1B3FA0   hue ~225
     --quiet   subordinate type (credits, meta)           #6B6A64
   The two saturated members sit ~207° apart in hue.
   ------------------------------------------------------------------- */

:root{
  --ground:#F3F0E9;
  --ink:#14161A;
  --accent:#D8410E;
  --second:#1B3FA0;
  --quiet:#6B6A64;
  --mat:#E5E0D3;
  --mat-2:#CFC8B6;
  --rule:rgba(20,22,26,.22);

  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --display:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif;

  /* width system — three visibly different widths, and full bleed */
  --fs:17px;
  --prose:62ch;
  --wide:1040px;
  --pad:18px;
  --gut:26px;
}
@media (min-width:760px){  :root{ --fs:18px; --prose:68ch; --wide:1180px; --pad:36px; --gut:40px } }
@media (min-width:1200px){ :root{ --fs:19px; --prose:72ch; --wide:1400px; --pad:56px; --gut:56px } }
@media (min-width:1600px){ :root{ --fs:21px; --prose:76ch; --wide:1720px; --pad:76px; --gut:72px } }
@media (min-width:2100px){ :root{ --fs:23px; --prose:80ch; --wide:2040px; --pad:104px; --gut:88px } }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block }
p{ text-wrap:pretty }
a{ color:var(--second); text-decoration:none; border-bottom:1px solid rgba(27,63,160,.35) }
a:hover{ color:var(--accent); border-bottom-color:var(--accent) }
a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
h1,h2,h3,h4{ text-wrap:balance }
.ico{ width:1.15em; height:1.15em; flex:none; vertical-align:-.18em }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* ── masthead + menu ────────────────────────────────────────────── */
.masthead{ padding:clamp(18px,2vw,40px) var(--pad) 0 }
.mast-row{ display:flex; align-items:flex-end; gap:clamp(14px,1.8vw,36px); flex-wrap:wrap }
.mast-mark{ width:clamp(46px,4vw,84px); height:auto; flex:none; color:var(--accent) }
.mast-title{
  margin:0; font-family:var(--display); font-weight:800;
  font-size:clamp(20px,3.05vw,74px); line-height:.92; letter-spacing:-.035em; white-space:nowrap;
}
.mast-title a{ color:inherit; border:none }
.mast-meta{
  margin-left:auto; text-align:right; padding-bottom:6px;
  font-size:clamp(11px,.72vw,15px); letter-spacing:.14em; text-transform:uppercase;
  color:var(--quiet); line-height:1.7;
}
.mast-sig{ color:var(--accent); font-weight:700 }

.menu{
  margin-top:clamp(16px,1.8vw,34px);
  border-top:2px solid var(--ink); border-bottom:1px solid var(--rule);
  display:flex; flex-wrap:wrap; align-items:stretch;
}
.menu nav{ display:flex; flex-wrap:wrap; flex:1 1 auto }
.menu a{
  display:flex; align-items:center; gap:.55em; color:var(--ink); border:none;
  border-right:1px solid var(--rule);
  padding:clamp(10px,.85vw,17px) clamp(12px,1.2vw,24px);
  font-size:clamp(12px,.8vw,17px); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.menu a:hover{ background:var(--ink); color:var(--ground) }
.menu a[aria-current]{ color:var(--accent) }
.menu .band-key{
  display:flex; align-items:center; gap:8px; padding:0 clamp(12px,1.2vw,24px);
  border-left:1px solid var(--rule);
  font-size:clamp(10px,.68vw,14px); letter-spacing:.12em; text-transform:uppercase; color:var(--quiet);
}
.menu .band-key i{ width:22px; height:1px; background:var(--accent); display:block }
@media (max-width:640px){ .menu .band-key{ display:none } .menu a{ flex:1 1 auto; justify-content:center } }

@media (max-width:720px){
  .mast-title{ white-space:normal; font-size:clamp(24px,7.2vw,40px); letter-spacing:-.03em }
  .mast-row{ gap:12px }
  .mast-meta{ margin-left:0; width:100%; text-align:left; padding-bottom:0 }
}
/* ── width system ───────────────────────────────────────────────── */
.grid{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--pad),1fr)
    [wide-start] minmax(0,calc((var(--wide) - var(--prose))/2))
    [prose-start] minmax(0,var(--prose))
    [prose-end] minmax(0,calc((var(--wide) - var(--prose))/2))
    [wide-end] minmax(var(--pad),1fr)
    [full-end];
}
.grid > *{ grid-column:prose }
.grid > .breakout{ grid-column:wide }
.grid > .bleed{ grid-column:full }
.holder{ width:min(100% - (var(--pad)*2),var(--wide)); margin-inline:auto }

/* ── homepage bands ─────────────────────────────────────────────── */
.opener{ position:relative; margin:0 }
.opener img{ width:100%; height:clamp(380px,68vh,1000px); object-fit:cover; filter:saturate(.92) }
.opener .overlay{
  position:absolute; left:var(--pad); bottom:clamp(20px,2.4vw,52px);
  background:var(--ground); padding:clamp(20px,1.9vw,40px) clamp(22px,2.1vw,44px);
  max-width:min(calc(100% - var(--pad)*2),clamp(420px,42vw,820px));
}
.opener .kicker{ color:var(--accent) }
.opener p{ margin:14px 0 0; font-size:clamp(16px,1vw,22px); line-height:1.5; color:#3B3D42 }
.opener .credit{ position:absolute; right:var(--pad); top:clamp(14px,1.4vw,28px); color:rgba(255,255,255,.72);
  font-size:clamp(10px,.66vw,13px); letter-spacing:.13em; text-transform:uppercase; text-shadow:0 1px 6px rgba(0,0,0,.6) }
@media (max-width:700px){ .opener .overlay{ position:static; max-width:none; margin:0 } .opener .credit{ position:static; color:var(--quiet); text-shadow:none; padding:8px var(--pad) 0 } }

.kicker{
  display:flex; align-items:center; gap:.5em;
  font-size:clamp(11px,.7vw,15px); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin:0;
}
.kicker a{ color:inherit; border:none }

.band{ padding:clamp(46px,4.6vw,116px) 0 }
.band-dark{ background:var(--ink); color:var(--ground) }
.band-dark a{ color:var(--ground); border-bottom-color:rgba(243,240,233,.4) }
.band-dark a:hover{ color:#FFB199; border-bottom-color:#FFB199 }
.band-dark .kicker{ color:#FF7A4D }
.band-rule{ border-top:1px solid var(--rule) }

.feature{ display:grid; gap:clamp(22px,2.2vw,52px) }
.feature h2{
  margin:0; font-family:var(--serif); font-weight:400; letter-spacing:-.015em; line-height:1.02;
  font-size:clamp(34px,4.4vw,104px);
}
.feature h2 a{ color:inherit; border:none }
.feature h2 a:hover{ color:var(--accent) }
.feature .dek{ margin:0; font-size:clamp(18px,1.15vw,26px); line-height:1.5; color:#3B3D42; max-width:44em }

.seconds{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(28px,2.8vw,66px); align-items:start }
.seconds .major{ grid-column:span 2; min-width:0 }
@media (max-width:900px){ .seconds .major{ grid-column:auto } }
.seconds h3{ margin:12px 0 0; font-family:var(--serif); font-weight:400; line-height:1.08; font-size:clamp(24px,1.9vw,44px) }
.seconds .major h3{ font-size:clamp(28px,2.5vw,58px) }
.seconds h3 a{ color:inherit; border:none }
.seconds h3 a:hover{ color:var(--accent) }
.seconds p{ margin:10px 0 0; color:#4A4C51; font-size:clamp(15px,.94vw,20px); line-height:1.58 }

/* ── figure system — three treatments, one drawing system ───────── */
figure{ margin:0 }
figcaption{ margin-top:clamp(11px,1vw,20px) }
.cap{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.35em clamp(14px,1.3vw,30px);
}
.cap .cap-t{
  flex:1 1 min(100%,34em); min-width:min(100%,18em);
  font-size:clamp(15px,.94vw,20px); line-height:1.5; color:var(--ink);
  border-top:1px solid var(--ink); padding-top:9px;
}
.cap .cap-c{
  flex:0 1 auto; align-self:flex-start; padding-top:12px;
  font-size:clamp(10px,.66vw,13px); letter-spacing:.13em; text-transform:uppercase; color:var(--quiet);
}
.band-dark .cap .cap-t{ color:var(--ground); border-top-color:rgba(243,240,233,.45) }
.band-dark .cap .cap-c{ color:rgba(243,240,233,.55) }

/* 1 · matted — image sits on a mat with the caption inside it */
.fig-mat{ background:var(--mat); padding:clamp(14px,1.3vw,30px) }
.fig-mat img{ width:100%; aspect-ratio:16/10; object-fit:cover }
.fig-mat .cap-t{ border-top-color:var(--ink) }
.band-dark .fig-mat{ background:#1E2127 }

/* 2 · plate — hairline inset frame, caption hangs below the rule */
.fig-plate img{ width:100%; aspect-ratio:16/9; object-fit:cover; outline:1px solid var(--rule); outline-offset:-1px }
.fig-plate{ border-left:3px solid var(--accent); padding-left:clamp(12px,1.1vw,24px) }

/* 3 · bleed — full width, caption ranged under it */
.fig-bleed img{ width:100%; height:clamp(300px,56vh,860px); object-fit:cover }
.fig-bleed figcaption{ padding-inline:var(--pad) }

/* 4 · cross-reference — small inset figure that points at a sibling page */
.fig-ref{ background:var(--ground); border:1px solid var(--rule); padding:clamp(12px,1vw,22px);
  display:grid; grid-template-columns:minmax(120px,34%) 1fr; gap:clamp(14px,1.2vw,26px); align-items:start }
.fig-ref img{ width:100%; aspect-ratio:4/3; object-fit:cover }
.fig-ref figcaption{ margin:0 }
.fig-ref .cap-t{ border-top:none; padding-top:0 }
.fig-ref .rk{ font-size:clamp(10px,.66vw,13px); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:700; margin:0 0 6px }
@media (max-width:560px){ .fig-ref{ grid-template-columns:1fr } }

/* ── article ────────────────────────────────────────────────────── */
.art-head{ padding:clamp(30px,3.2vw,84px) 0 clamp(18px,1.8vw,40px) }
.art-head h1{
  margin:14px 0 0; font-family:var(--serif); font-weight:400;
  font-size:clamp(34px,4.4vw,104px); line-height:1; letter-spacing:-.02em;
}
.lead{ margin:clamp(16px,1.5vw,34px) 0 0; font-size:clamp(19px,1.25vw,28px); line-height:1.48; color:#3B3D42 }
.art-body{ padding-bottom:clamp(40px,4vw,100px) }
.art-body > p{ margin:0 0 1.1em; font-size:clamp(18px,1.12vw,25px); line-height:1.68; color:#22242A }
.art-body > h2{
  margin:clamp(34px,3vw,72px) 0 .5em; font-family:var(--serif); font-weight:400;
  font-size:clamp(26px,2.2vw,50px); line-height:1.1; letter-spacing:-.01em;
}
.art-body > figure,.art-body > .callout,.art-body > .pullquote,.art-body > .blockquote,
.art-body > .notes,.art-body > .statrow,.art-body > .datatable,.art-body > .versus,
.art-body > .chart,.art-body > .map-figure,.art-body > .timeline-band{
  margin-block:clamp(28px,2.8vw,66px);
}
.art-body > .note{ margin:0 0 1.1em; font-size:clamp(15px,.94vw,20px); color:var(--quiet); border-left:2px solid var(--rule); padding-left:1em }

.pullquote{ margin-inline:0; border-top:2px solid var(--accent); border-bottom:1px solid var(--rule); padding:clamp(18px,1.6vw,38px) 0 }
.pullquote p{ margin:0; font-family:var(--display); font-weight:600; font-size:clamp(22px,1.85vw,42px); line-height:1.24; letter-spacing:-.025em }
.blockquote{ margin-inline:0; padding-left:clamp(16px,1.4vw,32px); border-left:3px solid var(--second) }
.blockquote p{ margin:0; font-size:clamp(18px,1.1vw,24px); line-height:1.5 }
.blockquote cite{ display:block; margin-top:.7em; font-style:normal; font-size:clamp(13px,.8vw,16px); letter-spacing:.1em; text-transform:uppercase; color:var(--quiet) }
.callout{ background:var(--second); color:#fff; padding:clamp(18px,1.7vw,40px) }
.callout p{ margin:0; font-size:clamp(17px,1.05vw,23px); line-height:1.5 }
.callout a{ color:#fff; border-bottom-color:rgba(255,255,255,.5) }

/* Notes-for-Design material — interruptions, not a side rail */
.notes{ background:var(--ink); color:var(--ground); padding:clamp(22px,2.2vw,54px) }
.notes h3{ margin:0 0 clamp(14px,1.2vw,26px); font-size:clamp(11px,.72vw,15px); letter-spacing:.18em; text-transform:uppercase; color:#FF7A4D; font-weight:700 }
.notes ul{ margin:0; padding:0; list-style:none; display:grid; gap:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)) }
.notes li{ border-top:1px solid rgba(243,240,233,.22); padding:clamp(10px,.9vw,18px) clamp(14px,1.2vw,26px) clamp(10px,.9vw,18px) 0;
  font-size:clamp(15px,.94vw,20px); line-height:1.5 }
.notes b{ color:#fff; font-weight:600 }
.notes.light{ background:var(--mat); color:var(--ink) }
.notes.light h3{ color:var(--accent) }
.notes.light li{ border-top-color:var(--rule) }
.notes.light b{ color:var(--ink) }

.timeline{ list-style:none; margin:0; padding:0 }
.timeline li{ display:grid; grid-template-columns:minmax(140px,22%) 1fr; gap:clamp(12px,1.2vw,30px);
  border-top:1px solid var(--rule); padding:clamp(10px,.9vw,18px) 0 }
.timeline .t-when{ font-family:var(--display); font-weight:700; letter-spacing:-.01em; color:var(--accent);
  font-size:clamp(15px,.96vw,21px); line-height:1.35 }
.timeline .t-what{ font-size:clamp(15px,.96vw,21px); line-height:1.5 }
@media (max-width:560px){ .timeline li{ grid-template-columns:1fr; gap:2px } }

.statrow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:1px; background:var(--rule) }
.statblock{ background:var(--ground); padding:clamp(16px,1.4vw,32px); display:flex; flex-direction:column; gap:8px }
.stat-num{ font-family:var(--display); font-weight:800; letter-spacing:-.03em; color:var(--second);
  font-size:clamp(34px,3vw,68px); line-height:.9 }
.stat-label{ font-size:clamp(13px,.82vw,17px); line-height:1.4; color:var(--quiet) }

table.datatable,table.versus{ width:100%; border-collapse:collapse; font-size:clamp(15px,.94vw,20px) }
table.datatable th,table.versus th{ text-align:left; font-weight:600; font-size:clamp(11px,.72vw,15px);
  letter-spacing:.12em; text-transform:uppercase; color:var(--quiet); padding:0 1em .8em 0 }
table.datatable td,table.versus td{ border-top:1px solid var(--rule); padding:.75em 1em .75em 0; vertical-align:top }
table.versus td:first-child{ font-weight:600 }
.table-wrap{ overflow-x:auto }

.chart figcaption{ margin-top:12px }
.chart svg{ width:100%; height:auto; display:block }

.map-figure .map-slot{ background:var(--ink); padding:clamp(14px,1.4vw,34px) }
.map-pair{ display:grid; grid-template-columns:minmax(0,1.38fr) minmax(0,1fr); gap:clamp(14px,1.4vw,34px) }
.map-pair .map-pane + .map-pane{ border-left:1px solid rgba(243,240,233,.22); padding-left:clamp(14px,1.4vw,34px) }
@media (max-width:720px){ .map-pair{ grid-template-columns:1fr }
  .map-pair .map-pane + .map-pane{ border-left:0; border-top:1px solid rgba(243,240,233,.22); padding-left:0; padding-top:clamp(14px,1.4vw,34px) } }
.map-figure svg{ width:100%; height:auto; display:block }
.map-head{ font-family:var(--serif); font-weight:400; line-height:1.05; letter-spacing:-.012em;
  white-space:nowrap; font-size:min(2.62vw,54px) }
@media (max-width:720px){ .map-head{ white-space:normal; font-size:clamp(24px,6.4vw,38px) } }
.map-legend{ display:flex; align-items:baseline; gap:.6em; margin:0 0 clamp(12px,1.1vw,22px);
  font-size:clamp(13px,.82vw,17px); line-height:1.5; color:rgba(243,240,233,.72) }
.map-legend .dot{ flex:none; width:9px; height:9px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px rgba(216,65,14,.28); transform:translateY(-1px) }

.rel-band{ background:var(--ink); color:var(--ground); padding:clamp(34px,3.4vw,86px) 0 clamp(38px,3.6vw,92px) }
.rel-band .kicker{ color:#FF7A4D }
.rel-band h2{ margin:12px 0 clamp(22px,2vw,48px); font-family:var(--serif); font-weight:400;
  font-size:clamp(26px,2.2vw,50px); line-height:1.06; max-width:18em }
.related-links{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:clamp(20px,2vw,46px); background:none }
.related-links li{ background:none; display:flex }
.related-links a{ display:flex; flex-direction:column; gap:12px; padding:0; border:none; width:100%; color:var(--ground) }
.related-links img{ width:100%; aspect-ratio:5/4; object-fit:cover; filter:grayscale(.15) }
.related-links a:hover img{ filter:none }
.related-links a:hover .rt{ color:#FF7A4D }
.related-links .rk{ display:flex; align-items:center; gap:.5em; font-size:clamp(11px,.7vw,14px);
  letter-spacing:.15em; text-transform:uppercase; color:#FF7A4D; font-weight:700 }
.related-links .rt{ font-family:var(--serif); font-size:clamp(21px,1.45vw,34px); line-height:1.12 }
.related-links .rb{ font-size:clamp(14px,.86vw,18px); line-height:1.5; color:rgba(243,240,233,.62); margin-top:auto }

.further-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:1px; background:var(--rule) }
.further-grid a{ background:var(--ground); border:none; color:var(--ink); padding:clamp(14px,1.2vw,26px);
  display:flex; flex-direction:column; gap:8px; min-height:100% }
.further-grid a:hover{ background:var(--mat) }

/* ── cards ──────────────────────────────────────────────────────── */
.cat-list{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--rule) }
.cat-list li{ background:var(--ground); display:flex }
.cat-list a{ border:none; color:var(--ink); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(14px,1.4vw,36px); padding:clamp(16px,1.5vw,34px) 0; width:100%; align-items:baseline }
.cat-list a:hover{ color:var(--accent) }
.cat-list .t{ font-family:var(--serif); font-size:clamp(22px,1.7vw,40px); line-height:1.1 }
.cat-list .b{ font-size:clamp(14px,.9vw,19px); line-height:1.5; color:var(--quiet) }
@media (max-width:700px){ .cat-list a{ grid-template-columns:1fr; gap:6px } }

.profile-grid,.org-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:clamp(16px,1.4vw,32px) }
.profile-card{ display:flex; flex-direction:column; gap:10px; background:var(--mat); padding:clamp(16px,1.4vw,32px) }
.profile-card .p-photo{ width:100%; aspect-ratio:4/3; object-fit:cover }
.profile-card h3{ margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(21px,1.4vw,32px); line-height:1.1 }
.profile-card .p-role{ margin:0; font-size:clamp(12px,.74vw,15px); letter-spacing:.13em; text-transform:uppercase; color:var(--accent) }
.profile-card p{ margin:0; font-size:clamp(15px,.9vw,19px); line-height:1.55 }
.profile-card .p-attr{ color:var(--quiet); font-size:clamp(11px,.7vw,14px) }
.org-card{ background:var(--ink); border:none; display:flex; flex-direction:column; gap:8px; padding:clamp(14px,1.2vw,26px); color:var(--ground) }
.org-card:hover{ background:var(--second); color:#fff }
.org-logo{ height:34px; width:auto; max-width:100%; object-fit:contain }
.org-name{ font-weight:600; font-size:clamp(15px,.94vw,20px) }
.org-host{ font-size:clamp(11px,.7vw,14px); letter-spacing:.12em; text-transform:uppercase; color:rgba(243,240,233,.6) }
.entity-ref{ white-space:nowrap }

/* ── supporters — a rail beside the feed, two tiers, 3 groups of 3 ─ */
.rail-band{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,300px); gap:clamp(28px,3vw,80px); align-items:start }
@media (max-width:1000px){ .rail-band{ grid-template-columns:1fr } }
.supporters{ border-top:2px solid var(--ink); padding-top:clamp(14px,1.2vw,26px); position:sticky; top:20px }
.supporters > p{ margin:10px 0 0; font-size:clamp(13px,.82vw,17px); line-height:1.5; color:var(--quiet) }
.sp-group{ margin-top:clamp(20px,1.8vw,38px) }
.sp-label{ margin:0 0 10px; font-size:clamp(10px,.68vw,13px); letter-spacing:.16em; text-transform:uppercase; color:var(--quiet) }
.sp-slots{ display:grid; grid-template-columns:repeat(auto-fit,260px); gap:10px; justify-content:start }
@media (max-width:1000px){ .sp-slots{ grid-template-columns:repeat(auto-fit,260px) } }
.sponsor{
  width:260px; border:none; background:var(--ink); color:var(--ground);
  padding:12px 14px 13px; display:flex; flex-direction:column; gap:9px;
}
.sponsor:hover{ background:var(--second); color:#fff }
.sponsor img{ width:100%; height:44px; max-height:44px; object-fit:contain; object-position:left center }
.sponsor .sponsor-name{ font-weight:600; font-size:14px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sponsor .sponsor-blurb{ font-size:12.5px; line-height:1.45; color:rgba(243,240,233,.72) }
.sponsor:hover .sponsor-blurb{ color:rgba(255,255,255,.85) }
.sponsor.feat{ background:#22262D; outline:1px solid var(--accent); outline-offset:-1px }
.sponsor.feat:hover{ background:var(--second); outline-color:var(--second) }
@media (max-width:340px){ .sponsor{ width:100% } .sp-slots{ grid-template-columns:1fr } }

/* ── footer ─────────────────────────────────────────────────────── */
.site-foot{ border-top:2px solid var(--ink); margin-top:clamp(36px,3.6vw,90px); padding:clamp(30px,2.8vw,68px) 0 clamp(40px,3.4vw,80px) }
.foot-top{ display:flex; justify-content:space-between; gap:clamp(20px,2vw,50px); flex-wrap:wrap; align-items:flex-end }
.foot-line{ font-family:var(--serif); font-size:clamp(19px,1.4vw,32px); line-height:1.22; max-width:22em; margin:0 }
nav.foot-nav{ display:flex; flex-wrap:wrap; gap:clamp(14px,1.4vw,34px);
  margin-top:clamp(22px,2vw,48px); border-top:1px solid var(--rule); padding-top:clamp(16px,1.4vw,32px) }
nav.foot-nav a{ display:flex; align-items:center; gap:.5em; color:var(--ink); border:none;
  font-size:clamp(12px,.76vw,16px); font-weight:600; letter-spacing:.13em; text-transform:uppercase }
nav.foot-nav a:hover{ color:var(--accent) }

/* 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-mark-panel: Design set no ground on the mark, so light and dark logos cannot
   both read against the page. Give every mark the same dark plate and an inset — and
   GROW the box by that inset so the artwork keeps the size Design chose. */
.sponsor img,.sponsor-box img,.sp-logo img{background:#121013!important;padding:8px 12px!important;box-sizing:border-box!important;height:60px!important;max-height:60px!important;width:100%!important;object-fit:contain!important;border-radius:2px}

/* sp-domain-override: per-domain, from work/css_override.css */
/* The supporters rail (9 stacked cards, ~1700px) sat beside a 4-item list (~400px) and left a
   1300px void. Same markup, laid full-width: the three tiers side by side, three cards each. */
.rail-band{grid-template-columns:minmax(0,1fr)!important}
.supporters{position:static!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,2.4vw,48px)}
.supporters > p{grid-column:1/-1}
.sp-group{margin-top:clamp(16px,1.4vw,28px)}
.sp-slots{grid-template-columns:minmax(0,1fr)!important}
@media (max-width:1000px){.supporters{grid-template-columns:minmax(0,1fr)}}

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

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

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
.sponsor.sponsor{justify-content:center!important}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name){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}


/* sp-mark-panel (withdrawn): no second black box on an already-dark tile.
   Design makes the tile itself dark — .sponsor{background:var(--ink)} — and sizes the mark at
   44px. sp-mark-panel was added on the assumption that Design had left the mark without a
   ground, and painted #121013 behind it plus forced 60px: a black rectangle inside a black
   tile, which is what the operator objected to. Design's ground and Design's height stand; the
   mark stays centred (sp-mark-align). */
.sponsor img{background:transparent!important;padding:0!important;border-radius:0!important;
             height:44px!important;max-height:44px!important}


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

}

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

/* op-name-wrap: at 320 the money tile truncated its brand name — "Monsters of Cock" — losing up to 6px to an
   ellipsis. The name is allowed to wrap instead of being cut: a brand that reads as half a word
   is worse than a brand on two lines. Structural only, phone widths only, desktop untouched. */
@media (max-width:360px){
  .sponsor-name{white-space:normal!important;overflow-wrap:anywhere;text-overflow:clip}
}

/* op-edge-gutter: copy sat against the screen edge at phone width — figure.fig-mat — with no gutter at all
   (1 runs of text measured within 2px of the glass; 1 remain, in full-bleed
   elements that are set to the edge deliberately).
   ⚠️ THE 18px IS NOT MINE: it is the gutter this build already uses on its own full-width
   containers at the same width, taken as the median of them. Only the columns that TOUCH are
   padded — operator, on kaanet: "Only items needed padding are the ones touching edges of
   browsers ... Not globally." Phone widths only. */
@media (max-width:390px){
  figure.fig-mat{padding-left:18px!important;padding-right:18px!important;box-sizing:border-box!important}
}
/* op-heading-levels */
div:where(.rt-h1){text-wrap: balance;}
h2:where(.rt-h3){text-wrap: balance;}
.art-head div:where(.rt-h1){margin: 14px 0px 0px; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 104px); line-height: 1; letter-spacing: -0.02em;}
.notes h2:where(.rt-h3){margin: 0px 0px clamp(14px, 1.2vw, 26px); font-size: clamp(11px, 0.72vw, 15px); letter-spacing: 0.18em; text-transform: uppercase; color: rgb(255, 122, 77); font-weight: 700;}
.notes.light h2:where(.rt-h3){color: var(--accent);}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.major > figure.fig-plate > img,
  div > figure.fig-mat > img,
  div.art-body.grid > figure.breakout.fig-mat > img,
  div.art-body.grid > figure.fig-ref > img,
  div.grid > figure.bleed.fig-bleed > img,
  li > a > img,
  main > section.opener > img){height:auto}
/* op-img-dims:end */
@media (min-width:641px) and (max-width:1000px){.sp-slots{grid-template-columns:repeat(2,minmax(0,1fr))!important}.sp-slots > [data-partner]:nth-child(odd of [data-partner]):nth-last-child(1 of [data-partner]){grid-column:1/-1!important}}