/* ffcuisineamateur.org — FF Cuisine Amateur
   PALETTE (3 saturated-capable members + ground/ink)
   --ground  paper, every page ground
   --ink     text + the dark panels that carry real area
   --accent  ochre: labels, numerals, rules, panel ground (saturated, hue ~42)
   --flag    crimson: disagreement marks, "argued" flags (saturated, hue ~349)
   --rule    hairline grey, furniture only
*/
:root{
  --ground:#FBFAF7;
  --ink:#14213A;
  --accent:#9C6608;
  --accent-bright:#C88A04;
  --flag:#9E1B32;
  --rule:#D8D4CA;
  --tint:#F3F0E7;
  --ink-soft:#3B3D45;
  --quiet:#6E6A61;
  --serif:Spectral,Georgia,serif;
  --mono:"DM Mono",ui-monospace,monospace;
  --measure:34rem;
  --pad:clamp(18px,4vw,56px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font:400 19px/1.68 var(--serif);
  overflow-x:hidden;text-wrap:pretty;
}
img{max-width:100%;display:block}
a{color:var(--flag);text-decoration:none}
a:hover{color:var(--ink)}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.06}
p{margin:0 0 1.15em}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding-inline:var(--pad)}
.measure{max-width:var(--measure)}
.icon{width:1.15em;height:1.15em;flex:none;vertical-align:-.18em}
.mono{font-family:var(--mono)}
.kicker{font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.rule-dbl{border-top:3px double var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ---------- masthead ---------- */
.topline{background:var(--ink);color:rgba(251,250,247,.8)}
.topline .wrap{display:flex;justify-content:space-between;gap:16px;padding-block:9px;font:400 12px/1.35 var(--mono);letter-spacing:.05em}
.masthead{position:relative;border-bottom:0;padding-bottom:4px}
/* the masthead closes on a tricolour rule: navy, paper, crimson */
.masthead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--ink) 0 33.34%,var(--tint) 33.34% 66.67%,var(--flag) 66.67% 100%)}
.mast-row>div:first-child::before{content:"";flex:none;align-self:center;
  width:16px;height:clamp(24px,3vw,36px);margin:0 4px 3px 0;
  border:1px solid var(--rule);
  background:linear-gradient(90deg,var(--ink) 0 33.34%,#FFFFFF 33.34% 66.67%,var(--flag) 66.67% 100%)}
.masthead .wrap{padding-block:22px 0}
.mast-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.wordmark{font:600 clamp(26px,4.4vw,50px)/.94 var(--serif);letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.wordmark:hover{color:var(--ink)}
.mast-domain{font:400 12px/1 var(--mono);letter-spacing:.1em;color:var(--quiet);padding-bottom:6px}
.mast-strap{font:400 15px/1.45 var(--serif);color:var(--ink-soft);max-width:30ch}
.nav{display:flex;flex-wrap:wrap;gap:0;padding:0;margin-top:18px;border-top:1px solid var(--rule)}
.nav a{position:relative;display:flex;align-items:center;gap:9px;padding:14px 20px;
  border-left:1px solid var(--rule);color:var(--ink);font:500 16px/1.2 var(--serif);
  transition:background .18s ease,color .18s ease}
.nav a:first-child{border-left:0;padding-left:0}
.nav a::before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--accent-bright);
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.nav a:hover::before,.nav a[aria-current]::before{transform:scaleX(1)}
.nav a:hover{background:var(--tint);color:var(--flag)}
.nav a:hover .icon{color:var(--flag)}
.nav a .icon{color:var(--accent);transition:color .18s ease}
.nav a .nav-no{font:400 10px/1 var(--mono);letter-spacing:.1em;color:var(--accent);align-self:flex-start;padding-top:3px}
.nav a[aria-current]{background:var(--ink);color:var(--ground);padding-left:20px;border-left-color:var(--ink)}
.nav a[aria-current] .icon,.nav a[aria-current] .nav-no{color:var(--accent-bright)}
.nav .nav-all{font-family:var(--mono);font-size:13px;letter-spacing:.04em;margin-left:auto;color:var(--quiet)}
.nav .nav-all:hover{color:var(--flag)}

/* ---------- homepage bands ---------- */
.band{padding-block:clamp(34px,5vw,62px)}
.band-tight{padding-block:clamp(26px,3vw,36px)}
.band-ink{background:var(--ink);color:var(--ground)}
.band-ink a{color:var(--accent-bright)}
.band-ink a:hover{color:#fff}
.band-tint{background:var(--tint)}
/* the arguments band carries a very light tricolour wash, left blue to right crimson */
.band-tricolore{background-color:var(--tint);
  background-image:linear-gradient(90deg,rgba(20,33,58,.10) 0%,rgba(20,33,58,.045) 28%,rgba(20,33,58,0) 34%,
    rgba(158,27,50,0) 66%,rgba(158,27,50,.045) 72%,rgba(158,27,50,.10) 100%)}
.band-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:22px}
.band-head h2{font-size:clamp(24px,2.6vw,31px)}
.band-head .more{font:400 13px/1 var(--mono)}

/* full-bleed splash hero */
.hero-splash{position:relative;margin:0;background:var(--ink)}
.hero-splash>img{width:100%;height:clamp(430px,66vh,680px);object-fit:cover;object-position:center 58%}
.hero-splash .scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(20,33,58,.9) 0%,rgba(20,33,58,.68) 36%,rgba(20,33,58,.12) 70%,rgba(20,33,58,.28) 100%)}
.hero-copy{position:absolute;left:0;right:0;bottom:0;padding-bottom:clamp(26px,4vw,54px)}
.hero-kicker{display:flex;align-items:center;gap:9px;margin:0 0 16px;
  font:400 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-bright)}
.hero-kicker a{color:var(--accent-bright)}
.hero-kicker .icon{width:18px;height:18px}
.hero-title{font-size:clamp(38px,6.6vw,80px);letter-spacing:-.04em;max-width:20ch}
.hero-title a{color:var(--ground)}
.hero-title a:hover{color:var(--accent-bright)}
.hero-dek{margin:18px 0 0;max-width:50ch;font:400 clamp(17px,1.5vw,21px)/1.5 var(--serif);color:rgba(251,250,247,.86)}
.hero-more{display:inline-block;margin-top:20px;font:400 13px/1 var(--mono);color:var(--accent-bright)}
.hero-splash figcaption{position:absolute;right:var(--pad);bottom:14px;padding:0;text-align:right}
.hero-splash .credit{color:rgba(251,250,247,.72);padding-top:0}
.hero-splash figcaption::after{color:rgba(251,250,247,.6);position:static;opacity:.75}
.hero-strip{border-bottom:1px solid var(--rule)}
.hero-strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-block:22px}
.hero-strip .statrow{margin:0;padding:0;border:0}
.hero-strip .hero-sig{max-width:40ch;font:italic 400 17px/1.5 var(--serif);color:var(--ink-soft);margin:0}

.lead-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:center}
.lead-copy .lead-title{font-size:clamp(34px,5.2vw,62px);letter-spacing:-.035em;margin:14px 0 0}
.lead-copy .lead-title a{color:var(--ink)}
.lead-copy .lead-title a:hover{color:var(--flag)}
.lead-dek{font:400 clamp(18px,1.5vw,21px)/1.55 var(--serif);color:var(--ink-soft);margin-top:18px;max-width:46ch}
.lead-meta{display:flex;align-items:center;gap:10px}
.statrow{display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:26px;padding-top:16px;border-top:3px double var(--ink)}
.statblock{display:flex;flex-direction:column;gap:6px}
.stat-num{font:400 30px/1 var(--mono);color:var(--accent)}
.stat-label{font:400 11px/1.45 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--quiet)}

.quiet-line{text-align:center;max-width:44ch;margin:0 auto;font:400 clamp(21px,2.4vw,30px)/1.42 var(--serif)}
.quiet-line em{color:var(--accent)}

.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.cell{background:var(--ground);padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px}
.cell h3{font-size:22px}
.cell h3 a{color:var(--ink)}
.cell h3 a:hover{color:var(--flag)}
.cell p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-soft)}
.cell .spot{color:var(--ink);width:100%;height:auto}
.cell .cell-no{font:400 12px/1 var(--mono);color:var(--accent);letter-spacing:.12em}

.sec-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 40px}
.sec-item{border-top:2px solid var(--ink);padding-top:16px;
  display:grid;grid-template-columns:68px minmax(0,1fr);column-gap:20px}
.icon-big{grid-column:1;grid-row:1/span 3;align-self:start;width:68px;height:68px;
  color:var(--accent-bright);stroke-width:1.1;display:block;margin:2px 0 0}
.sec-item>h3,.sec-item>p{grid-column:2}
.sec-item:hover .icon-big{color:var(--flag)}
.sec-item h3{display:flex;align-items:center;gap:10px;font-size:clamp(22px,2.2vw,27px)}
.sec-item h3 a{color:var(--ink)}
.sec-item h3 .icon{color:var(--accent);width:1.3em;height:1.3em}
.sec-item p{margin:8px 0 0;font-size:16px;line-height:1.5;color:var(--ink-soft)}
.sec-item .count{font:400 11px/1 var(--mono);color:var(--quiet);letter-spacing:.1em}

/* ---------- register / tables ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.datatable,table.versus{width:100%;border-collapse:collapse;font:400 15px/1.45 var(--mono)}
table.datatable th,table.versus th{
  text-align:left;padding:9px 14px 9px 0;font:400 11px/1.3 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);white-space:nowrap;
}
table.datatable thead tr,table.versus thead tr{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
table.datatable td,table.versus td{padding:11px 14px 11px 0;border-bottom:1px solid var(--rule);vertical-align:top}
table.datatable td:last-child,table.datatable th:last-child,
table.versus td:last-child,table.versus th:last-child{padding-right:0}
.t-dish{font:500 17px/1.3 var(--serif);font-style:italic}
.t-dish a{color:var(--ink)}
.t-dish a:hover{color:var(--flag)}
.t-gloss{color:var(--quiet)}
.t-no{color:var(--accent)}
.flagmark{color:var(--flag);white-space:nowrap}
table.versus td{font:400 16px/1.5 var(--serif)}
table.versus td:first-child,table.versus th:first-child{width:1%;white-space:nowrap;padding-right:22px}
table.versus td:first-child .t-dish{display:inline-flex;align-items:baseline;gap:8px}
table.versus td+td{border-left:1px solid var(--rule);padding-left:18px}

/* ---------- supporters ---------- */
.supporters{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sponsor-group{margin-top:20px}
.sponsor-group h3{font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);font-weight:400;padding-bottom:14px}
.sponsor-row{display:flex;flex-wrap:wrap;gap:16px}
.sponsor{
  flex:0 0 340px;max-width:100%;display:grid;grid-template-columns:180px minmax(0,1fr);
  gap:14px;align-items:center;padding:12px;border:1px solid var(--rule);background:var(--ground);
}
.sponsor:hover{border-color:var(--ink)}
.sponsor img{
  width:180px;height:52px;background:var(--ink);padding:7px 10px;
  object-fit:contain;object-position:center;
}
.sponsor-name{font:400 13px/1.35 var(--mono);color:var(--ink);letter-spacing:.02em}

/* ---------- figures: one drawing system, four treatments ---------- */
figure{margin:0}
figcaption{padding-top:11px;display:flex;flex-direction:column;gap:2px}
.fig-kicker{display:block;font:400 11px/1 var(--mono);letter-spacing:.12em;color:var(--accent);padding-bottom:6px}
.fig-text{font:400 16px/1.5 var(--serif);color:var(--ink-soft);max-width:70ch}
/* credits: collapsed to a © mark in the caption flow, opened on hover */
figure figcaption{position:relative}
figure figcaption::after{content:"©";align-self:flex-start;font:400 12px/1 var(--mono);
  color:var(--quiet);opacity:.55;pointer-events:none;transition:opacity .2s ease,margin .2s ease;margin-top:8px}
figure:hover figcaption::after{opacity:0;margin-top:0;font-size:0}
.credit{display:block;max-height:0;opacity:0;overflow:hidden;
  font:400 12px/1.45 var(--mono);letter-spacing:.05em;color:var(--quiet);
  transition:max-height .3s ease,opacity .25s ease,padding .3s ease;padding-top:0}
figure:hover .credit{max-height:4em;opacity:1;padding-top:8px}
figure figcaption:not(:has(.credit))::after{content:none}
.article-figure img{aspect-ratio:8/5;object-fit:cover;width:100%}

/* 1 · plate: full-bleed band, caption on the ink plate */
.fig-plate{position:relative;margin-block:clamp(24px,3vw,38px)}
.fig-plate img{aspect-ratio:16/9}
.fig-plate figcaption{
  background:var(--ink);color:var(--ground);padding:16px var(--pad) 18px;
  display:flex;flex-direction:row;gap:10px 28px;justify-content:space-between;flex-wrap:wrap;align-items:baseline;
}
.fig-plate .fig-kicker{padding-bottom:0;flex:none}
.fig-plate .fig-text{color:var(--ground);max-width:60ch}
.fig-plate .fig-kicker{color:var(--accent-bright)}
.fig-plate .credit{padding-top:0;text-align:right;color:rgba(251,250,247,.74)}
.fig-plate figcaption::after{color:rgba(251,250,247,.6);margin-top:0;align-self:baseline}
.fig-plate:hover .credit{padding-top:0}
.fig-mat figcaption::after{margin-top:6px}

/* 2 · mat: photograph sits on a tinted mat with a hairline */
.fig-mat{background:var(--tint);border:1px solid var(--rule);padding:16px;margin-block:clamp(22px,3vw,34px)}
.fig-mat figcaption{display:block}
.fig-mat .credit{padding-top:8px}

/* 3 · inset: sits in the column, caption hanging beside it */
.fig-inset{display:grid;grid-template-columns:minmax(140px,190px) minmax(0,1fr);gap:22px;
  align-items:center;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);
  padding-block:18px;margin-block:clamp(22px,3vw,32px)}
.fig-inset img{aspect-ratio:4/3;object-fit:cover}
.fig-inset figcaption{padding-top:0}

/* 4 · strip: wide short crop, ochre bar keyed to the palette */
.fig-strip{margin-block:clamp(22px,3vw,34px);border-top:3px solid var(--accent-bright)}
.fig-strip img{aspect-ratio:21/7;object-fit:cover}
.fig-strip figcaption{display:flex;flex-direction:row;gap:8px 26px;justify-content:space-between;flex-wrap:nowrap;align-items:baseline}
.fig-strip .fig-kicker{padding-bottom:0;flex:none}
.fig-strip .fig-text{flex:1 1 auto;min-width:0}
.fig-strip figcaption::after{margin-top:0;align-self:baseline;flex:none}
.fig-strip .credit{padding-top:0}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.gallery img{aspect-ratio:8/5;object-fit:cover}

/* ---------- article ---------- */
.article-head{padding-block:clamp(30px,4vw,52px) 0}
.article-kicker{display:flex;align-items:center;gap:9px;font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.article-kicker a{color:var(--accent)}
.article-kicker .icon{width:18px;height:18px}
h1.article-title{font-size:clamp(32px,4.6vw,52px);letter-spacing:-.035em;margin:16px 0 0}
p.lead{font:400 clamp(19px,1.7vw,23px)/1.5 var(--serif);color:var(--ink-soft);margin:20px 0 0;max-width:56ch}
.article-head,.article-foot{max-width:740px}
.article-body{padding-block:clamp(10px,2vw,18px) 0;font-size:19px;max-width:740px}
.article-body>*{max-width:100%}
.article-body>p+p{margin-top:0}
/* every interruption keeps a full band of air, and never abuts the next one */
.article-body>figure,.article-body>.ledger,.article-body>.sequence,
.article-body>.pullquote,.article-body>.blockquote,.article-body>.callout{
  margin-block:clamp(28px,4vw,44px)}
.article-body>figure+figure,.article-body>.ledger+.sequence,
.article-body>.sequence+.ledger,.article-body>figure+.ledger,
.article-body>figure+.sequence,.article-body>.ledger+figure,.article-body>.sequence+figure{margin-top:clamp(34px,5vw,56px)}
.article-body>h2+figure,.article-body>h2+.ledger,.article-body>h2+.sequence{margin-top:clamp(18px,2vw,26px)}
.article-body>figure+h2,.article-body>.ledger+h2,.article-body>.sequence+h2{margin-top:clamp(30px,4vw,46px)}
.article-body>p:last-child{margin-bottom:0}
/* opening paragraph reads a step larger, with a small ochre lead-in rule */
p.opening{font-size:1.09em;line-height:1.6;color:var(--ink)}
p.opening::first-line{letter-spacing:-.005em}
.article-body h2{font-size:clamp(23px,2.4vw,29px);margin:2.1em 0 .7em;max-width:30ch}
.article-body h2::before{content:"";display:block;width:44px;border-top:2px solid var(--accent-bright);margin-bottom:14px}
.article-body p{margin:0 0 1.2em}
.article-body em{font-style:italic}
.article-body>figure,.article-body>.ledger,.article-body>.sequence,.article-body>.pullquote,
.article-body>.callout,.article-body>.statrow{max-width:none}
.pullquote{margin:clamp(26px,3vw,40px) 0;padding:0 0 0 24px;border-left:4px solid var(--flag)}
.pullquote p{margin:0;font:400 clamp(21px,2.2vw,27px)/1.4 var(--serif);font-style:italic}
.blockquote{margin:26px 0;padding:20px 24px;background:var(--tint);border-left:4px solid var(--ink);max-width:52ch}
.blockquote p{margin:0;font:400 19px/1.55 var(--serif)}
.blockquote cite{display:block;padding-top:10px;font:400 12px/1.4 var(--mono);font-style:normal;color:var(--quiet)}
.callout{background:var(--tint);border:1px solid var(--rule);border-top:3px solid var(--accent-bright);padding:20px 22px;margin:26px 0;max-width:52ch}
.callout p{margin:0;font-size:17px;line-height:1.55}
.note{font:400 15px/1.55 var(--mono);color:var(--quiet);border-left:2px solid var(--rule);padding-left:14px}

/* Notes-for-Design material: two full-measure interruptions */
.ledger{background:var(--ink);color:var(--ground);padding:clamp(24px,3vw,36px) clamp(22px,3vw,36px);margin-block:clamp(28px,4vw,44px)}
.ledger h2,.ledger h3{color:var(--ground);font-size:clamp(22px,2.3vw,28px);margin:10px 0 0;max-width:30ch}
.ledger h2::before{display:none}
.ledger .kicker{color:var(--accent-bright)}
.ledger dl{display:grid;grid-template-columns:minmax(150px,250px) minmax(0,1fr);gap:0 30px;margin:24px 0 0}
.ledger dt{font:500 17px/1.45 var(--serif);padding:14px 0;border-top:1px solid rgba(251,250,247,.26)}
.ledger dd{margin:0;font:400 16px/1.55 var(--serif);color:rgba(251,250,247,.84);padding:14px 0;border-top:1px solid rgba(251,250,247,.26)}
.ledger dt:first-of-type,.ledger dt:first-of-type+dd{border-top-color:rgba(251,250,247,.5)}
/* a statement with no counterpart runs the full width, marked by an ochre bar */
.ledger dt.wide{grid-column:1/-1;font-weight:400;font-size:16px;line-height:1.55;
  color:rgba(251,250,247,.84);padding-left:16px;position:relative}
.ledger dt.wide::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:2px;background:var(--accent-bright)}
.sequence{margin-block:clamp(28px,4vw,44px);border-top:3px double var(--ink);padding-top:20px}
.sequence h3{font-size:clamp(20px,2vw,25px);margin:8px 0 0}
.sequence ol{list-style:none;counter-reset:s;margin:20px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px 32px}
.sequence li{counter-increment:s;padding-top:14px;border-top:1px solid var(--rule);font:400 16px/1.55 var(--serif);color:var(--ink-soft)}
.sequence li::before{content:counter(s,decimal-leading-zero);display:block;font:400 12px/1 var(--mono);color:var(--accent);letter-spacing:.1em;padding-bottom:9px}
.sequence li b{font-weight:600;color:var(--ink)}

.article-foot{padding-block:clamp(30px,4vw,48px)}
.article-foot>h2{font-size:20px;margin:0 0 20px;padding:0}
.article-foot>h2::before{content:"";display:block;width:44px;border-top:2px solid var(--accent-bright);margin-bottom:14px}
.related-links{list-style:none;margin:0;padding:0;display:block}
.related-links li{display:grid;grid-template-columns:minmax(120px,168px) minmax(0,1fr);
  gap:6px 24px;align-items:baseline;border-top:1px solid var(--rule);padding-block:16px}
.related-links li:first-child{border-top:2px solid var(--ink)}
.related-links li:last-child{border-bottom:1px solid var(--rule)}
.related-links a{display:block;font:600 21px/1.25 var(--serif);color:var(--ink)}
.related-links .r-sec{display:flex;align-items:center;gap:8px;font:400 11px/1.6 var(--mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);padding-bottom:0}
.further-grid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px 26px}
.further-grid a{border-top:2px solid var(--ink);padding-top:12px}
.related-links a:hover,.further-grid a:hover{color:var(--flag)}
.further-grid a{display:block;font:600 19px/1.25 var(--serif);color:var(--ink)}
.entity-ref{font-family:var(--mono);font-size:.9em}

/* ---------- category + archive ---------- */
.page-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:end;padding-block:clamp(30px,4vw,48px) 26px}
.page-head h1{font-size:clamp(36px,6vw,66px);letter-spacing:-.035em}
.page-head .page-intro{font:400 17px/1.6 var(--serif);color:var(--ink-soft);margin:0}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-top:1px solid var(--rule);padding-block:22px;display:grid;
  grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:start}
.cat-list li:first-child{border-top:1px solid var(--ink)}
.cat-list img{aspect-ratio:8/5;object-fit:cover;border:1px solid var(--rule)}
.cat-list h2{font-size:clamp(22px,2.4vw,28px)}
.cat-list h2 a{color:var(--ink)}
.cat-list h2 a:hover{color:var(--flag)}
.cat-list .c-no{font:400 11px/1 var(--mono);color:var(--accent);letter-spacing:.12em;padding-bottom:8px;display:block}
.cat-list p{margin:10px 0 0;font-size:17px;line-height:1.55;color:var(--ink-soft);max-width:62ch}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:rgba(251,250,247,.72);margin-top:clamp(30px,5vw,60px)}
.site-foot .wrap{padding-block:34px 30px}
.foot-top{display:flex;align-items:baseline;justify-content:space-between;gap:20px 34px;flex-wrap:wrap}
.foot-mark{font:600 22px/1 var(--serif);letter-spacing:-.02em;color:var(--ground)}
.foot-mark:hover{color:var(--accent-bright)}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 26px;margin:0;padding:0;list-style:none}
.foot-links a{color:rgba(251,250,247,.78);font:400 13px/1.6 var(--mono)}
.foot-links a:hover{color:var(--accent-bright)}
.foot-note{margin-top:24px;padding-top:14px;border-top:1px solid rgba(251,250,247,.2);
  font:400 12px/1.6 var(--mono);color:rgba(251,250,247,.55);
  display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap}

/* ---------- narrow ---------- */
@media (max-width:1100px){
  /* one row, swipeable, rather than a ragged second line */
  .nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:none;padding:13px 16px;font-size:15px}
  .nav .nav-all{margin-left:0;border-left:1px solid var(--rule);padding-left:16px}
}
@media (max-width:900px){
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-index{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-item{grid-template-columns:58px minmax(0,1fr);column-gap:16px}
  .icon-big{width:58px;height:58px}
  .lead-split,.page-head{grid-template-columns:minmax(0,1fr)}
  .fig-plate figcaption{padding-inline:var(--pad)}
  .ledger dl{grid-template-columns:minmax(0,1fr);gap:0}
  .ledger dd{border-top:0;padding-top:0;padding-bottom:14px}
  .ledger dt{padding-bottom:6px}
}
@media (max-width:640px){
  body{font-size:18px}
  .topline .wrap{flex-direction:column;gap:2px}
  .topline .wrap span+span{display:none}
  .masthead .wrap{padding-block:16px 0}
  .mast-strap{display:none}
  .mast-domain{font-size:11px;padding-bottom:4px}
  .article-body,.article-head,.article-foot{max-width:100%}
  .fig-inset{grid-template-columns:minmax(0,1fr);gap:14px}
  .fig-inset img{aspect-ratio:8/5}
  .related-links li{grid-template-columns:minmax(0,1fr);gap:6px;padding-block:14px}
  .related-links a{font-size:19px}
  .ledger dt.wide{padding-left:12px}
  .sequence ol{grid-template-columns:minmax(0,1fr);gap:16px}
  .foot-links{gap:8px 18px}
  .hero-splash>img{height:clamp(380px,72vh,520px)}
  .hero-splash .scrim{background:linear-gradient(180deg,rgba(20,33,58,.25) 0%,rgba(20,33,58,.55) 45%,rgba(20,33,58,.92) 100%)}
  .hero-splash figcaption{display:none}
  .grid-3{grid-template-columns:minmax(0,1fr)}
  .sec-index{grid-template-columns:minmax(0,1fr);gap:26px}  .sponsor{flex:0 0 100%;grid-template-columns:150px minmax(0,1fr)}
  .sponsor img{width:150px;height:46px}
  .fig-inset{grid-template-columns:minmax(0,1fr)}
  .cat-list li{grid-template-columns:minmax(0,1fr)}
  .cat-list img{max-width:280px}
  .nav{gap:0}
  .nav a{padding:12px 14px;font-size:15px}
  .nav a:first-child{padding-left:0}
  .nav a[aria-current]{padding-left:14px}
  .nav .nav-all{margin-left:0;border-left:0;padding-left:0}
  .fig-plate .credit{text-align:left}
  .fig-mat figcaption{grid-template-columns:minmax(0,1fr)}
  .fig-mat .credit{text-align:left}
}
@media (hover:none){
  .credit{max-height:none;opacity:1;padding-top:8px}
  figure figcaption::after{content:none}
}
@media print{
  .topline,.nav,.supporters{display:none}
  body{background:#fff}
}

/* markup helpers replacing former inline styles */
.mast-brand{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.mast-strap{margin:0}
.article-kicker,.hero-kicker,.kicker{margin:0}
.band-head h2{margin:0}

/* 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-article-width: the article column was capped at 628px (76 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 740px (declared in .article-body) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1280 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1280px){
  div.wrap.article-body{max-width:min(952px, 100%)!important}
}
@media (min-width:1600px){
  div.wrap.article-body{max-width:min(clamp(952px, 66.111vw, 1142px), 100%)!important}
  div.wrap.article-body > :is(p:not([class])){font-size:clamp(19px,1.3194vw,22.8px)!important}
}
/* op-article-width:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.article-body.wrap > figure.article-figure.fig-inset > img,
  div.article-body.wrap > figure.article-figure.fig-mat > img,
  div.article-body.wrap > figure.article-figure.fig-strip > img,
  div.gallery > figure.fig-mat > img,
  div.wrap > figure.article-figure.fig-strip > img,
  main > figure.article-figure.fig-plate > img,
  main > figure.hero-splash > img,
  ul.cat-list > li > img){height:auto}
/* op-img-dims:end */
@media (min-width:660px) and (max-width:1199px){.sponsor-row.sponsor-row:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(340px,calc(50% - 8px)),1fr))!important;column-gap:16px!important;row-gap:16px!important;justify-content:stretch!important;align-items:stretch!important}.sponsor-row.sponsor-row > [data-partner]{flex:none!important;width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important}}