/* ==========================================================================
   Rasowy — "The Record"
   Palette (5 members, each with a job)
     --paper      ground        #F4F0E7   warm document paper
     --ink        ink           #171310   near-black, all running text
     --vermilion  accent        #C43C22   saturated, hue ~12  — kickers, rules, marks
     --aubergine  secondary     #4C2244   saturated, hue ~320 — full band grounds, mats
     --mustard    flag          #B98D14   drawn measure strokes, chronology rails
   The two saturated members sit ~308 degrees apart in hue and both carry real
   area: aubergine as band and mat grounds, vermilion as filled labels and the
   supporters plate. --mustard-ink is the darkened text-safe variant.
   ========================================================================== */

:root{
  --paper:#F4F0E7;
  --paper-2:#EDE7DC;
  --mat:#E7E1D5;
  --ink:#171310;
  --ink-2:#3A332D;
  --mid:#5E554E;
  --quiet:#7D7267;
  --vermilion:#C43C22;
  --vermilion-dk:#93290F;
  --aubergine:#4C2244;
  --aubergine-lt:#6A3560;
  --mustard:#B98D14;
  --mustard-ink:#6E5200;
  --gold:#E9B93A;
  --rule:rgba(23,19,16,.18);
  --rule-2:rgba(23,19,16,.32);

  --display:"Bricolage Grotesque","Public Sans",system-ui,sans-serif;
  --body:"Public Sans",system-ui,-apple-system,sans-serif;
  --quote:"Instrument Serif",Georgia,serif;

  --gutter:20px;
  --shell:1400px;
  --breakout:1040px;
  --edge:0px;
  --prose:100%;
  --side:0px;
  --fs:17px;
  --lh:1.62;
  --para:1.15em;
}

@media (min-width:700px){ :root{ --gutter:32px; --fs:18px; } }
@media (min-width:1100px){
  :root{ --edge:140px; --prose:680px; --side:220px; }
}
/* --- above the desktop cap: the page gains measure, not margin --- */
@media (min-width:1600px){
  :root{
    --shell:1560px; --breakout:1280px;
    --edge:230px; --prose:760px; --side:290px;
    --gutter:48px; --fs:19px;
  }
}
@media (min-width:2200px){
  :root{
    --shell:1960px; --breakout:1600px;
    --edge:380px; --prose:840px; --side:380px;
    --gutter:72px; --fs:20px;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:var(--fs)/var(--lh) var(--body);
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--vermilion);text-decoration:none}
a:hover{color:var(--vermilion-dk);text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;letter-spacing:-.025em;margin:0;text-wrap:pretty}
p{margin:0 0 var(--para)}
table{border-collapse:collapse}
:focus-visible{outline:3px solid var(--vermilion);outline-offset:3px}

.wrap{max-width:var(--shell);margin:0 auto;padding-inline:var(--gutter)}
.wrap-b{max-width:var(--breakout);margin:0 auto;padding-inline:var(--gutter)}
.kicker{
  font:700 12.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);display:flex;align-items:center;gap:12px;margin:0 0 20px;
}
.kicker svg{width:17px;height:17px;flex:none;color:var(--vermilion)}
.kicker::after{content:"";flex:1 1 auto;border-top:1px solid var(--rule);height:0}
.plate .kicker::after{border-top-color:rgba(246,241,232,.34)}
.kicker .measure--h{width:52px;height:14px}
.kicker--quiet{color:var(--mid)}
.eyebrow{font:600 11px/1 var(--body);letter-spacing:.19em;text-transform:uppercase;color:var(--quiet)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:99}

/* ============================ masthead ============================ */
.masthead{border-bottom:2px solid var(--ink);background:var(--paper)}
.masthead__in{
  max-width:var(--shell);margin:0 auto;padding:26px var(--gutter) 18px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:18px;text-decoration:none;color:inherit}
.brand:hover{text-decoration:none}
.brand__mark{width:64px;height:64px;flex:none;color:var(--vermilion)}
.brand__word{
  font-family:var(--display);font-weight:800;font-size:clamp(44px,8.2vw,118px);
  line-height:.82;letter-spacing:-.05em;
}
.masthead--inner .brand__word{font-size:clamp(38px,5vw,58px)}
.masthead--inner .brand__mark{width:44px;height:44px}
.nav{display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding-bottom:6px}
.nav__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 26px}
.nav__list a{
  display:flex;align-items:center;gap:7px;color:var(--ink);
  font:800 14.5px/1 var(--body);letter-spacing:.04em;text-transform:uppercase;
  padding-bottom:6px;border-bottom:2px solid transparent;
}
.nav__list a:hover{color:var(--vermilion);text-decoration:none;border-bottom-color:var(--rule-2)}
.nav__list a[aria-current]{color:var(--vermilion);border-bottom-color:var(--vermilion)}
.nav__list svg{width:15px;height:15px;flex:none}
.nav-toggle,.nav-burger{display:none}

@media (max-width:1099px){
  .masthead__in{align-items:center}
  .nav-burger{
    display:flex;align-items:center;gap:10px;cursor:pointer;
    font:700 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
    border:1.5px solid var(--ink);padding:14px 18px;min-height:48px;box-sizing:border-box;
  }
  .nav-burger svg{width:18px;height:14px}
  .nav{align-items:flex-start;width:100%;padding-bottom:0}
  .nav__list{display:none;flex-direction:column;gap:0;width:100%;border-top:1px solid var(--rule);margin-top:14px}
  .nav__list li{border-bottom:1px solid var(--rule)}
  .nav__list a{padding:14px 0;font-size:16px;border-bottom:0}
  .nav-toggle:checked ~ .nav .nav__list{display:flex}
}

/* ============================ footer ============================ */
.foot{background:var(--ink);color:var(--paper-2);margin-top:0}
.foot__in{max-width:var(--shell);margin:0 auto;padding:46px var(--gutter) 50px}
.foot__top{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
@media (min-width:900px){ .foot__top{grid-template-columns:auto minmax(0,1fr);align-items:end;gap:56px} }
.foot .brand__word{font-size:clamp(34px,4vw,46px);font-weight:800}
.foot .brand__mark{display:none}
.foot__scope{font:400 15.5px/1.5 var(--body);color:#BEB4A6;max-width:52ch}
.foot__nav{list-style:none;margin:34px 0 0;padding:24px 0 0;border-top:1px solid rgba(246,241,232,.22);display:flex;flex-wrap:wrap;gap:12px 30px}
.foot__nav a{color:var(--paper-2);font:800 13px/1 var(--body);letter-spacing:.05em;text-transform:uppercase}
.foot__nav a:hover{color:var(--gold)}

/* ==================== the drawn measure (signature device) ====================
   A bracket divided at one third — the ratio the Dutch instrument legislates.
   Used as section marker, chronology rail and figure bracket. Never in the menu. */
.measure{color:var(--mustard);flex:none}
.measure--h{width:62px;height:16px}
.measure--v{width:14px;align-self:stretch}

/* ============================ homepage ============================ */
/* band 1 — the lead: one frame, one piece, at size */
.lead-band{position:relative;border-bottom:1px solid var(--rule)}
.lead-band__img{position:relative;background:var(--mat)}
.lead-band__img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.lead-band__body{
  max-width:var(--shell);margin:0 auto;padding:0 var(--gutter);
}
.lead-card{background:var(--paper);border-left:6px solid var(--vermilion);padding:30px 26px 26px}
.lead-card h1{font-size:clamp(30px,4.6vw,74px);line-height:.98;letter-spacing:-.032em;font-weight:500}
.lead-card__dek{font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:var(--ink-2);margin:20px 0 0;max-width:64ch}
.lead-card__more{
  display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  font:600 12.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--vermilion);
}
.arw{width:26px;height:9px;flex:none}
.sec-open__meta a{display:inline-flex;align-items:center;gap:10px}
.plain .btn .arw,.entry__count .arw{flex:none}
@media (min-width:1100px){
  .lead-band__body{position:absolute;left:0;right:0;bottom:56px}
  .lead-card{width:min(58%,940px);padding:40px 44px 36px;box-shadow:0 2px 0 var(--rule)}
}

/* band 2 — one quiet line: the site's scope */
.scope-band{border-bottom:1px solid var(--rule)}
.scope-band__in{
  max-width:var(--shell);margin:0 auto;padding:34px var(--gutter) 30px;
  display:flex;align-items:baseline;gap:20px;
}
.scope-band p{
  margin:0;font-family:var(--quote);font-size:clamp(21px,2.1vw,34px);line-height:1.28;
  max-width:52ch;color:var(--ink);
}

/* band 3 — the editorial cluster: four pieces, unequal */
.cluster{border-bottom:1px solid var(--rule);padding-block:58px 64px}
.cluster__grid{display:grid;gap:44px}
@media (min-width:820px){
  .cluster__grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:52px 48px}
}
.cluster__stack{display:flex;flex-direction:column;gap:36px}
@media (min-width:1600px){ .cluster__grid{gap:60px 64px} }
.piece-card{display:flex;flex-direction:column}
.piece-card img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--mat)}
.piece-card h3{margin:14px 0 0;font-size:25px;line-height:1.14}
.piece-card__dek{margin:10px 0 0;font-size:16.5px;line-height:1.5;color:var(--mid)}
.piece-card--lead img{aspect-ratio:4/3}
.piece-card--lead h3{font-size:clamp(28px,3vw,46px);line-height:1.04;margin-top:20px}
.piece-card--lead .piece-card__dek{font-size:18.5px;color:var(--ink-2);max-width:56ch}
.piece-card--flat{border-top:2px solid var(--ink);padding-top:16px}
.piece-card--flat h3{font-size:22px;margin-top:0}
.piece-card__meta{
  margin:14px 0 0;font:600 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);
  display:flex;align-items:center;gap:8px;
}
.piece-card__meta svg{width:15px;height:15px;color:var(--vermilion)}

/* band 4 — the pulled-out data figure at display scale (aubergine, real area) */
.plate{background:var(--aubergine);color:#F6F1E8}
.plate__in{max-width:var(--shell);margin:0 auto;padding:64px var(--gutter) 70px}
.plate .kicker{color:var(--gold)}
.plate h2{font-size:clamp(28px,3.6vw,58px);line-height:1.02;max-width:26ch;font-weight:500}
.plate__lede{font-size:clamp(17px,1.3vw,20px);line-height:1.52;color:rgba(246,241,232,.9);max-width:62ch;margin:22px 0 0}
.plate__grid{display:grid;gap:40px;margin-top:44px}
@media (min-width:1000px){ .plate__grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:64px;align-items:end} }
.scale{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid rgba(246,241,232,.34)}
.scale li{
  display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:18px;row-gap:12px;
  align-items:baseline;padding:15px 0 17px;border-bottom:1px solid rgba(246,241,232,.16);
}
.scale b{font-family:var(--display);font-size:30px;font-weight:600;color:var(--gold);letter-spacing:-.02em;line-height:.85}
.scale__txt{font-size:16.5px;line-height:1.42;color:rgba(246,241,232,.9)}
.scale__bar{grid-column:2;display:block;height:5px;background:rgba(246,241,232,.16)}
.scale__bar i{display:block;height:100%;background:var(--gold)}
.plate__legend b{font-family:var(--display);font-size:26px;font-weight:600;color:var(--gold);letter-spacing:-.02em}
.plate__legend span{color:rgba(246,241,232,.88)}
.plate a{color:var(--gold)}
.plate__more{color:var(--gold)}
.plate__more:hover{color:#fff}

.hub__grid{margin-top:44px}

/* band 5 — section entry points, each with its own image */
.entries{padding-block:62px 66px;border-bottom:1px solid var(--rule)}
.index-rows{display:grid;border-top:2px solid var(--ink)}
.irow{
  display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:20px;row-gap:6px;
  padding:20px 0 22px;border-bottom:1px solid var(--rule);color:inherit;text-decoration:none;
}
.irow:hover{text-decoration:none;background:var(--paper-2)}
.irow:hover h3{color:var(--vermilion)}
.irow:hover .irow__arw{transform:translateX(6px)}
.irow__no{font:700 13px/1 var(--body);letter-spacing:.1em;color:var(--vermilion);padding-top:9px}
.irow__body h3{margin:0;font-size:clamp(23px,2.3vw,34px);line-height:1.05;letter-spacing:-.02em;transition:color .15s}
.irow__body p{margin:9px 0 0;font-size:16px;line-height:1.5;color:var(--mid);max-width:76ch}
.irow__count{grid-column:2;font:700 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
.irow__arw{display:none;width:26px;height:9px;color:var(--vermilion);align-self:center;transition:transform .18s}
@media (min-width:840px){
  .irow{grid-template-columns:56px minmax(0,1fr) auto 26px;column-gap:24px;align-items:start;padding:22px 0 24px}
  .irow__count{grid-column:auto;padding-top:11px;white-space:nowrap}
  .irow__arw{display:block}
}
.entries__grid{display:grid;gap:40px 36px}
@media (min-width:760px){ .entries__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1240px){ .entries__grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:2200px){ .entries__grid{grid-template-columns:repeat(5,minmax(0,1fr))} }
.entry{
  display:flex;flex-direction:column;height:100%;
  border-top:2px solid var(--ink);padding-top:18px;color:inherit;
}
.entry:hover{text-decoration:none}
.entry:hover h3{color:var(--vermilion)}
.entry__fig{position:relative;background:var(--mat)}
.entry__fig img{width:100%;aspect-ratio:16/10;object-fit:cover}
.entry__no{
  position:absolute;left:0;top:0;background:var(--vermilion);color:#fff;
  font:600 12px/1 var(--body);letter-spacing:.12em;padding:8px 11px;
}
.entry h3{margin:18px 0 0;font-size:clamp(21px,1.8vw,29px);line-height:1.1}
.entry__blurb{margin:12px 0 0;font-size:16px;line-height:1.5;color:var(--mid)}
.entry__count{
  margin-top:auto;padding-top:18px;
  font:600 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);
  display:flex;align-items:center;gap:9px;
}
.entry__count svg{width:16px;height:16px;color:var(--vermilion)}

/* the strip — unequal full-bleed run of frames */
.strip{display:grid;grid-template-columns:minmax(0,1fr);border-bottom:1px solid var(--rule)}
@media (min-width:820px){ .strip{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)} }
.strip figure{margin:0;position:relative;background:var(--mat);border-right:1px solid var(--rule)}
.strip figure:last-child{border-right:0}
.strip img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
@media (min-width:820px){ .strip figure:not(:first-child) img{aspect-ratio:3/4} }
.strip figcaption{
  position:absolute;left:0;bottom:0;right:0;padding:16px 18px;
  color:#F1EADE;font-size:14.5px;line-height:1.4;isolation:isolate;
}
.strip figcaption::before{
  content:"";position:absolute;left:0;right:0;bottom:0;top:-72px;z-index:-1;
  background:linear-gradient(to top,rgba(23,19,16,.95) 0%,rgba(23,19,16,.9) 55%,rgba(23,19,16,.62) 82%,rgba(23,19,16,0) 100%);
}
.strip figcaption b{display:block;font:600 10.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}

/* ============================ the map band ============================ */
.mapband{border-bottom:1px solid var(--rule);padding-block:58px 64px}
.mapband__grid{display:grid;gap:28px}
@media (min-width:1000px){ .mapband__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:56px;align-items:start} }
.mapband__h{font-size:clamp(26px,3vw,46px);line-height:1.04;letter-spacing:-.025em;font-weight:500;margin:0}
.mapband__lede{font-size:clamp(16.5px,1.2vw,19px);line-height:1.5;color:var(--ink-2);max-width:60ch;margin:18px 0 22px}
.map-slot{width:100%;aspect-ratio:16/10;background:var(--mat);border:1px solid var(--rule-2)}
@media (max-width:719px){ .map-slot{aspect-ratio:4/5} }

/* ============================ supporters ============================ */
.supporters{border-bottom:1px solid var(--rule);padding:52px 0 58px}
.supporters__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 24px;margin-bottom:26px}
.supporters__head h2{font-size:clamp(22px,2vw,30px)}
.sponsor-grid{display:flex;flex-wrap:wrap;gap:20px}
.sponsor{
  flex:0 0 300px;width:300px;
  display:flex;flex-direction:column;gap:12px;
  background:var(--paper-2);border:1px solid var(--rule);padding:16px;color:inherit;
}
.sponsor:hover{text-decoration:none;border-color:var(--rule-2)}
.sponsor__box{
  background:var(--ink);display:flex;align-items:center;justify-content:center;
  padding:12px 14px;aspect-ratio:4.5/1;width:100%;
}
.sponsor__box img{max-height:44px;max-width:100%;width:auto;height:auto;object-fit:contain}
.sponsor__text{display:flex;flex-direction:column;gap:6px;min-width:200px}
.sponsor-name{font:600 15px/1.25 var(--body);color:var(--ink)}
.sponsor-blurb{font-size:14px;line-height:1.45;color:var(--mid)}
@media (min-width:1600px){ .sponsor{flex-basis:340px;width:340px} }
@media (max-width:719px){ .sponsor{flex:0 0 100%;width:100%} }

/* ============================ category / section page ============================ */
.sec-open{border-bottom:1px solid var(--rule)}
.sec-open__in{max-width:var(--shell);margin:0 auto;display:grid;gap:0}
@media (min-width:960px){ .sec-open__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch} }
.sec-open__text{padding:52px var(--gutter) 48px}
.sec-open h1{font-size:clamp(32px,4.4vw,66px);line-height:1;font-weight:500}
.sec-open__blurb{font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--ink-2);margin:22px 0 0;max-width:58ch}
.sec-open__meta{
  margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  font:600 11.5px/1 var(--body);letter-spacing:.15em;text-transform:uppercase;color:var(--quiet);
}
.sec-open__img{background:var(--mat);min-height:280px}
.sec-open__img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
@media (min-width:960px){ .sec-open__img img{aspect-ratio:auto;min-height:100%} }

.listing{padding:52px 0 60px}
.cat-list{list-style:none;margin:0;padding:0}
/* lead entry — more room than the rest */
.cat-list__lead{display:grid;gap:28px;padding-bottom:52px;border-bottom:1px solid var(--rule)}
.cat-grid > .cat-list__lead,.cat-grid > .cat-wide{grid-column:1/-1}
@media (min-width:900px){ .cat-list__lead{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:center} }
.cat-list__lead .mat{margin:0}
.cat-list__lead h2{font-size:clamp(26px,3vw,44px);line-height:1.06}
.cat-list__lead p{margin:16px 0 0;font-size:18px;line-height:1.55;color:var(--ink-2);max-width:56ch}
.cat-grid{display:grid;gap:52px 40px;list-style:none;margin:0;padding:0}
@media (min-width:720px){ .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1240px){ .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 44px} }
@media (min-width:2200px){ .cat-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
.cat-card{display:flex;gap:16px;height:100%}
.cat-card__bracket{display:none}
@media (min-width:720px){ .cat-card__bracket{display:block;width:12px;color:var(--mustard);flex:none;margin-top:4px} }
.cat-card__body{flex:1;display:flex;flex-direction:column;border-top:2px solid var(--ink);padding-top:16px}
.cat-card img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--mat)}
.cat-card h3{margin:18px 0 0;font-size:24px;line-height:1.14;min-height:2.28em}
.cat-card p{margin:12px 0 0;font-size:16px;line-height:1.5;color:var(--mid)}
.cat-card__tag{
  margin-top:auto;padding-top:18px;
  font:600 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);
}
.cat-card a{color:inherit}
.cat-card a:hover{color:var(--vermilion);text-decoration:none}
/* one wide entry breaking the rhythm */
.cat-wide{
  display:grid;gap:0;border-top:2px solid var(--ink);
  background:var(--paper-2);
}
@media (min-width:900px){ .cat-wide{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center} }
.cat-wide__text{padding:36px 34px 38px}
.cat-wide h3{font-size:clamp(24px,2.6vw,38px);line-height:1.08}
.cat-wide p{margin:16px 0 0;font-size:17.5px;line-height:1.55;color:var(--ink-2);max-width:56ch}
.cat-wide img{width:100%;aspect-ratio:2/1;object-fit:cover;background:var(--mat)}

/* ============================ the reading page ============================ */
.piece{display:block;padding:0 0 40px}
.piece > *{max-width:min(var(--prose),100%);margin-inline:auto;padding-inline:var(--gutter)}
@media (min-width:1100px){
  .piece{
    display:grid;padding-bottom:56px;
    grid-template-columns:
      [full-start] minmax(var(--gutter),1fr)
      [break-start] var(--edge)
      [prose-start] minmax(0,var(--prose)) [prose-end]
      var(--side)
      [break-end] minmax(var(--gutter),1fr) [full-end];
  }
  .piece > *{max-width:none;margin-inline:0;padding-inline:0;grid-column:prose-start/prose-end}
  .piece > .u-break{grid-column:break-start/break-end}
  .piece > .u-side{grid-column:prose-end/break-end;padding-left:34px}
  .piece > .u-full{grid-column:full-start/full-end;width:100%}
}
.piece > .u-full{padding-inline:0;max-width:none;width:100%}

.art-head{padding-top:52px}
.art-head .kicker{margin-bottom:22px}
.art-title{font-size:clamp(32px,5.2vw,80px);line-height:.99;letter-spacing:-.032em;font-weight:500}
@media (min-width:1600px){ .art-title{font-size:88px} }
@media (min-width:2200px){ .art-title{font-size:96px} }
.lead{
  font-size:clamp(19px,1.7vw,26px);line-height:1.44;color:var(--ink-2);
  margin:26px 0 0;font-weight:400;
}
.piece h2{font-size:clamp(24px,2.4vw,36px);line-height:1.1;margin:0 0 4px}
.piece h2::before{
  content:"";display:block;width:62px;height:0;border-top:3px solid var(--vermilion);
  margin-bottom:16px;
}
.piece .sec-h{margin-top:8px}
.piece p{font-size:var(--fs);line-height:var(--lh)}
.piece p:last-child{margin-bottom:0}
.piece p a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* vertical rhythm — every inserted unit gets ≥2x the paragraph gap on BOTH sides */
.piece > .unit{margin-top:40px;margin-bottom:40px}
@media (min-width:1100px){ .piece > .unit{margin-top:56px;margin-bottom:56px} }
.piece > .art-head{margin-bottom:8px}

/* --- figure system: three treatments, one drawing system --- */
/* 1 · bleed — edge to edge, caption offset back into the measure */
.fig-bleed{margin:0}
.fig-bleed img{width:100%;aspect-ratio:21/9;object-fit:cover;background:var(--mat);
  border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.fig-bleed figcaption{max-width:var(--breakout);margin:0 auto;padding:16px var(--gutter) 0}
/* 2 · mat — inset in an aubergine panel with drawn corner marks */
.mat{position:relative;background:var(--aubergine);padding:22px;margin:0}
.mat img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#3a1a34}
.mat figcaption{padding-top:16px;color:#F3EDE4}
.mat figcaption .credit{color:var(--gold)}
.mat::before,.mat::after{
  content:"";position:absolute;width:16px;height:16px;border:2px solid var(--gold);
}
.mat::before{left:8px;top:8px;border-right:0;border-bottom:0}
.mat::after{right:8px;bottom:8px;border-left:0;border-top:0}
/* 3 · plate — 1px ink rule with the measure bracket at the left edge.
   At desktop the figure occupies the prose column and its caption sits in the
   outer margin column, top-aligned, so the caption box is sized by the caption. */
.plate-fig{margin:0;display:flex;flex-direction:column;gap:14px}
.plate-fig__rule{display:none}
.plate-fig__body{min-width:0}
.pair{display:grid;gap:24px}
.pair__side{align-self:start}
.fig-inset figcaption .credit{text-align:left}
@media (min-width:1100px){
  .piece > .pair{
    grid-column:prose-start/break-end;
    grid-template-columns:minmax(0,var(--prose)) var(--side);column-gap:0;
  }
  .pair__side{padding-left:34px}
  .piece > .plate-fig{
    grid-column:prose-start/break-end;display:grid;align-items:start;
    grid-template-columns:14px minmax(0,1fr) var(--side);column-gap:18px;row-gap:0;
  }
  .plate-fig__rule{display:block;align-self:stretch;color:var(--mustard)}
  .piece > .plate-fig figcaption{padding-left:34px;padding-top:0;display:block}
  .piece > .plate-fig figcaption .credit{display:block;text-align:left;margin-top:10px}
}
.plate-fig img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--mat);border:1px solid var(--ink)}
.plate-fig figcaption{padding-top:14px}
/* 4 · inset — small, sits in the side column beside the opening prose */
.fig-inset{margin:0}
@media (max-width:1099px){ .fig-inset img{aspect-ratio:16/10} }
.fig-inset img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--mat);border:1px solid var(--rule-2)}
.fig-inset figcaption{padding-top:12px}

/* caption typography — sized by the caption, never by the picture.
   Caption and credit share one row where there is room; the block closes up
   when the caption is short and wraps in the same measure when it is long. */
figcaption{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:6px 28px;font-size:16.5px;line-height:1.45;
}
figcaption .cap{flex:1 1 26ch;min-width:0;max-width:78ch;margin:0}
figcaption .credit{
  flex:0 1 auto;font:600 12px/1.35 var(--body);letter-spacing:.11em;text-transform:uppercase;
  color:var(--quiet);text-align:right;
}
.mat figcaption .cap{color:#F3EDE4}
.article-figure{margin:0}
.article-figure img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--mat)}
.article-figure figcaption{padding-top:14px}
.gallery{display:grid;gap:20px;margin:0}
@media (min-width:700px){ .gallery{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} }
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--mat)}

/* --- notes-for-design material --- */
.timeline{list-style:none;margin:0;padding:0}
.timeline li{
  display:grid;grid-template-columns:minmax(0,1fr);gap:4px;
  padding:16px 0 16px 26px;border-left:3px solid var(--mustard);position:relative;
}
.timeline li::before{
  content:"";position:absolute;left:-7px;top:24px;width:11px;height:11px;
  background:var(--paper);border:3px solid var(--mustard);border-radius:50%;
}
@media (min-width:820px){
  .timeline li{grid-template-columns:minmax(150px,.42fr) minmax(0,1fr);gap:6px 28px;align-items:baseline}
}
.t-when{font:600 13px/1.3 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--mustard-ink)}
.t-what{font-size:17px;line-height:1.5;color:var(--ink-2)}
.unit-head{
  display:flex;align-items:center;gap:12px;margin:0 0 18px;
  font:600 11.5px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--vermilion);
}
.unit-head svg{width:60px;height:15px;color:var(--mustard);flex:none}
.statrow{display:flex;flex-wrap:wrap;gap:2px;background:var(--rule);border:1px solid var(--rule)}
.statblock{flex:1 1 100%}
@media (min-width:620px){ .statblock{flex:1 1 190px} }
.statblock{background:var(--paper);padding:22px 20px;display:flex;flex-direction:column;gap:8px}
.stat-num{font-family:var(--display);font-size:clamp(30px,3vw,44px);line-height:1;font-weight:600;letter-spacing:-.03em;color:var(--vermilion)}
.stat-label{font-size:15px;line-height:1.4;color:var(--ink-2)}
.callout{
  background:var(--paper-2);border-top:3px solid var(--aubergine);
  padding:26px 26px 22px;margin:0;
}
.callout p{margin:0;font-size:18px;line-height:1.55}
.callout p + p{margin-top:.8em}
.note{
  font-size:16px;line-height:1.55;color:var(--mid);
  border-left:3px solid var(--rule-2);padding-left:18px;margin:0;
}
.pullquote{margin:0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:26px 0}
.pullquote p{
  margin:0;font-family:var(--quote);font-size:clamp(24px,2.7vw,42px);line-height:1.16;
  letter-spacing:-.005em;max-width:34ch;
}
.blockquote{margin:0;padding-left:22px;border-left:4px solid var(--vermilion)}
.blockquote p{font-size:19px;line-height:1.5;margin:0 0 10px}
.blockquote cite{font:600 13px/1.4 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--quiet);font-style:normal}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.datatable,.versus{width:100%;min-width:min(560px,100%);font-size:16.5px;line-height:1.42}
.datatable th,.versus th{
  text-align:left;padding:12px 16px 12px 0;border-bottom:2px solid var(--ink);
  font:600 11.5px/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--mid);
}
.datatable td,.versus td{padding:15px 16px 15px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.datatable tr td:first-child,.versus tr td:first-child{font-weight:600}
.datatable--single{min-width:0}
.datatable--single tr td:first-child{font-weight:400;max-width:88ch}
.versus th:not(:first-child),.versus td:not(:first-child){width:34%}
.chart{margin:0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{padding-top:14px}

/* --- cards / references --- */
.profile-grid{display:grid;gap:24px;margin:0}
@media (min-width:760px){ .profile-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} }
.profile-card{background:var(--paper-2);border:1px solid var(--rule);padding:20px;display:flex;flex-direction:column;gap:10px}
.p-photo{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--mat)}
.profile-card h3{font-size:21px;line-height:1.12}
.p-role{margin:0;font:600 11.5px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--vermilion)}
.profile-card p{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.p-links{display:flex;flex-wrap:wrap;gap:14px}
.p-attr{font-size:12.5px;color:var(--quiet)}
.profile-card.no-photo{border-left:4px solid var(--aubergine)}
.org-grid{display:flex;flex-wrap:wrap;gap:14px;margin:0}
.org-card{
  flex:0 0 260px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;
  align-items:center;background:var(--paper-2);border:1px solid var(--rule);padding:14px 16px;color:inherit;
}
.org-card:hover{text-decoration:none;border-color:var(--vermilion)}
.org-logo{grid-row:span 2;width:46px;height:46px;object-fit:contain;background:var(--ink);padding:5px}
.org-card.no-logo{grid-template-columns:minmax(0,1fr)}
.org-name{font:600 15px/1.25 var(--body)}
.org-host{font-size:12.5px;color:var(--quiet);word-break:break-word}
.entity-ref{font-weight:600;white-space:nowrap}
.further-grid{display:grid;gap:16px;margin:0}
@media (min-width:760px){ .further-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} }
.further-grid a{
  display:block;background:var(--paper-2);border-top:3px solid var(--vermilion);
  padding:18px 18px 20px;color:var(--ink);font-family:var(--display);
  font-size:20px;line-height:1.16;letter-spacing:-.015em;
}
.further-grid a:hover{background:var(--mat);text-decoration:none;color:var(--vermilion)}

/* end furniture — separated from the last unit by the same rule as A2 */
.art-end{border-top:1px solid var(--rule);margin-top:56px;padding-top:34px}
@media (min-width:1100px){ .art-end{margin-top:72px} }
.art-end h2{font-size:22px}
.art-end h2::before{display:none}
.related-links{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
@media (min-width:760px){ .related-links{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} }
.related-links li{border-top:2px solid var(--ink);padding-top:14px}
.related-links a{font-family:var(--display);font-size:19px;line-height:1.16;color:var(--ink);letter-spacing:-.015em}
.related-links a:hover{color:var(--vermilion);text-decoration:none}
.related-links .eyebrow{display:block;margin-bottom:8px}

/* side-column cargo */
.side-note{margin:0}
.side-note h3{
  font:600 11.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;
  color:var(--vermilion);margin:0 0 12px;font-family:var(--body);
}
.side-note p{margin:0 0 .7em;font-size:16px;line-height:1.5;color:var(--mid)}
.side-note p:last-child{margin-bottom:0}
.side-note--rule{border-top:1px solid var(--rule-2);padding-top:16px}

/* ============================ archive / hub ============================ */
.hub{padding:52px 0 60px}
.hub h1{font-size:clamp(30px,4vw,58px);line-height:1.02}
.hub__intro{font-size:19px;line-height:1.55;color:var(--ink-2);max-width:62ch;margin:20px 0 0}
.arch-sec{border-top:1px solid var(--rule);padding:34px 0 6px}
.arch-sec__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;margin-bottom:18px}
.arch-sec__head h2{font-size:26px}
.arch-sec__head h2::before{display:none}
.arch-sec__head svg{width:19px;height:19px;color:var(--vermilion);flex:none}
.arch-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
@media (min-width:1000px){ .arch-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px} }
@media (min-width:2200px){ .arch-list{grid-template-columns:repeat(3,minmax(0,1fr))} }
.arch-list li{border-bottom:1px solid var(--rule);padding:14px 0}
.arch-list a{font-size:17.5px;line-height:1.4;color:var(--ink)}
.arch-list a:hover{color:var(--vermilion);text-decoration:none}
.arch-list span{display:block;font:600 10.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);margin-top:7px}

/* short pages */
.plain{padding:56px 0 70px}
.plain h1{font-size:clamp(30px,4vw,58px);line-height:1.02}
.plain p{font-size:19px;line-height:1.6;max-width:62ch;margin-top:20px}
.plain .btn{
  display:inline-flex;align-items:center;gap:10px;margin-top:28px;background:var(--ink);color:var(--paper);
  padding:15px 22px;font:600 12.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
}
.plain .btn:hover{background:var(--vermilion);text-decoration:none;color:#fff}

/* styleguide only */
.sg-band{border-top:1px solid var(--rule-2);padding:40px 0}
.sg-band > h2{font-size:24px;margin-bottom:24px}
.sg-label{font:600 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);margin:32px 0 12px}

/* 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}
.supporters__head{flex-wrap:wrap!important}
.supporters__head > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor-grid{flex-wrap:wrap!important}
.sponsor-grid > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor__box{flex-wrap:wrap!important}
.sponsor__box > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor__text > .sponsor{flex:0 0 auto!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-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:5;-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}

/* pipeline: one brand treatment per tile — the name reads at the blurb's own size */
.sponsor .sp-brand{font:inherit!important;font-weight:700!important;letter-spacing:inherit!important;text-transform:none!important;color:inherit!important;display:inline!important;}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.sponsor-grid .sponsor .sponsor__box.sponsor__box{display:block!important;width:100%!important}
.sponsor-grid .sponsor.sponsor img{height:44px!important;display:block!important;width:100%!important}

/* op-even-mark-boxes: operator: 'bottom 2 have HUGE space left. logos can be increased there...
   or just height of black area shrinked.' The black area was the WRAPPER, sized by aspect-ratio
   (4.5/1) off its own width — so a tile in the stretched last row gave a 419px wrapper 93px tall
   while the rest were 51px, with the artwork capped at 44px floating inside it.
   ⚠️ I CHASED THIS THE WRONG WAY FIRST: fixing the wrapper's height left one box at 71px however
   much specificity I threw at it, because the ARTWORK was still sizing itself off the wrapper's
   width and driving the height back up — and capping the artwork instead made the eight marks
   measure 15 to 55px, which is worse. The estate's own shape is deterministic and is what this
   now uses: the IMAGE is the plate (one height, full width, object-fit:contain, the dark ground
   and the inset on the image itself) and the wrapper carries nothing. */
.sponsor-grid .sponsor .sponsor__box.sponsor__box{
  aspect-ratio:auto!important;height:auto!important;min-height:0!important;
  padding:0!important;background:transparent!important;line-height:0!important;display:block!important;
}
.sponsor-grid .sponsor .sponsor__box.sponsor__box img{
  width:100%!important;height:60px!important;max-height:none!important;max-width:none!important;
  object-fit:contain!important;object-position:center center!important;
  background:var(--ink)!important;padding:8px 14px!important;box-sizing:border-box!important;
  margin:0!important;display:block!important;
}


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

/* op-money-columns: the supporters block ran one tile per row — 8 tiles,
   1324px at 390, 16% of the whole page. Two columns bring it to
   883px (33% shorter). Checked before writing: no new overflow, smallest mark still
   133px wide, longest blurb 2 lines, tile heights 190-211px.
   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:20px!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-edge-gutter: copy sat against the screen edge at phone width — div.plain.wrap-b > h1, div.plain.wrap-b > p — with no gutter at all
   (59 runs of text measured within 2px of the glass; 59 remain, in full-bleed
   elements that are set to the edge deliberately).
   ⚠️ THE 20px 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){
  div.plain.wrap-b > h1{padding-left:20px!important;padding-right:20px!important;box-sizing:border-box!important}
  div.plain.wrap-b > p{padding-left:20px!important;padding-right:20px!important;box-sizing:border-box!important}
}

/* op-edge-gutter: copy sat against the screen edge at 390px on animal-welfare-licensing-2018.html — blockquote.unit.pullquote —
   (1 runs of text within 2px of the glass). The 20px is NOT mine: it is the gutter this
   build already uses on its own full-width containers at the same width. Only the column that
   touches is padded (gutter). Phone widths only; desktop re-measured and unchanged. */
@media (max-width:400px){
  blockquote.unit.pullquote{padding-left:20px!important;padding-right:20px!important;box-sizing:border-box!important}
}

/* op-hover-pad */
.irow{padding-left:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 500; letter-spacing: -0.025em; margin: 0px; text-wrap: pretty;}
.piece-card h2:where(.rt-h3){margin: 14px 0px 0px; font-size: 25px; line-height: 1.14;}
.piece-card--lead h2:where(.rt-h3){font-size: clamp(28px, 3vw, 46px); line-height: 1.04; margin-top: 20px;}
.piece-card--flat h2:where(.rt-h3){font-size: 22px; margin-top: 0px;}
.irow:hover h2:where(.rt-h3){color: var(--vermilion);}
.irow__body h2:where(.rt-h3){margin: 0px; font-size: clamp(23px, 2.3vw, 34px); line-height: 1.05; letter-spacing: -0.02em; transition: color 0.15s;}
/* op-heading-levels: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){
  blockquote.unit.pullquote{padding-left:max(var(--gutter), 18px);padding-right:max(var(--gutter), 18px)}
  div.plain.wrap-b{padding-left:max(var(--gutter), 18px);padding-right:max(var(--gutter), 18px)}
}
@media (min-width:681px) and (max-width:799px){
  div.cat-card__body{padding-left:max(var(--gutter), 18px);padding-right:max(var(--gutter), 18px)}
}
@media (min-width:901px){
  div.supporters__head{padding-left:max(var(--gutter), 18px);padding-right:max(var(--gutter), 18px)}
}
@media (min-width:681px) and (max-width:899px){
  li.cat-list__lead > div{padding-left:max(var(--gutter), 18px);padding-right:max(var(--gutter), 18px)}
}
@media (min-width:1001px){
  ul.cat-list.cat-grid{padding-left:max(var(--gutter), 18px);padding-right:max(var(--gutter), 18px)}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.piece > figure.fig-bleed.u-full.unit > img,
  article.piece > figure.mat.u-break.unit > img,
  article.piece-card > a > img,
  article.piece-card.piece-card--lead > a > img,
  div.cat-card__body > a > img,
  div.pair > figure.fig-inset.pair__side > img,
  div.sec-open__in > div.sec-open__img > img,
  figure.plate-fig.unit > div.plate-fig__body > img,
  li.cat-list__lead > figure.mat > img,
  section.lead-band > div.lead-band__img > img,
  section.strip > figure > img,
  ul.cat-grid.cat-list > li.cat-wide > img){height:auto}
/* op-img-dims:end */

/* op-odd-tier-lead: money_slots changed a tier's size — .sponsor-grid (9 tiles) now show an ODD count on phones, so the lead tile takes the whole row (operator: "the 1st item in such rows to be 100% width, then split"). Parity-guarded: it steps aside again when the count is even. */
@media (max-width:640px){
  .sponsor-grid:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-grow-same-size: an added partner would have wrapped onto a new row ALONE and stretched across the grid (flex rows that grow). Same minimum (basis 220px, min-width min(220px, 100%)), same columns at every width, a short row keeps its siblings' size — applied at the moment of adding, as the operator chose (2026-09-23). Phones keep their own rules. */
@media (min-width:641px){
  div.sponsor-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important}
}
/* op-grow-same-size:end */