/* Les Albiez — "The Valley in Section" */

:root{
  /* palette: ground · ink · accent · secondary · mat */
  --ground:#101215;
  --panel:#15191D;
  --panel-2:#1B1E22;
  --hair:#23282E;
  --hair-2:#2A2F35;
  --ink:#EDE9E0;
  --body:#DCD8CF;
  --quiet:#9AA3AC;
  --faint:#7C858E;
  --accent:#9E2B18;          /* rust — kickers, ticks, rules, numerals */
  --accent-lift:#C8552F;
  --secondary:#1B4FA0;       /* shadow-blue — whole bands, not rules */
  --secondary-deep:#173F80;
  --secondary-ink:#F2F5FA;
  --mat:#DCD8CF;             /* matted figure ground */
  --sec:#9E2B18;             /* per-section accent, overridden by [data-sec] */

  --prose:820px;
  --breakout:1240px;
  --gutter:24px;
  --body-size:19px;
  --lead-size:22px;
  --cap-size:16.5px;
  --credit-size:12.5px;
  --sans:Chivo,system-ui,-apple-system,Segoe UI,sans-serif;
  --display:Syne,Chivo,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--body);
  font:300 var(--body-size)/1.62 var(--sans);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--accent-lift);text-decoration:none;border-bottom:1px solid rgba(200,85,47,.42)}
a:hover{color:#E4794F;border-bottom-color:#E4794F}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0;text-wrap:pretty}
p{margin:0 0 1.05em}
figure{margin:0}
table{border-collapse:collapse}
:focus-visible{outline:2px solid var(--accent-lift);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- shared measure helpers ---------- */
.wrap{width:min(100% - 2*var(--gutter),1560px);margin-inline:auto}
.kicker{font:600 12.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 22px;display:flex;align-items:center;gap:10px}
.kicker svg{width:20px;height:20px;flex:none}
.eyebrow{font:600 12.5px/1.2 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}

/* ---------- masthead ---------- */
.masthead{background:var(--panel-2);border-bottom:1px solid var(--hair)}
.mast-in{width:min(100% - 2*var(--gutter),1560px);margin-inline:auto;padding:22px 0 0;
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:18px;border-bottom:0}
.brand:hover{border-bottom:0}
.brand-mark{width:auto;height:clamp(42px,3.3vw,58px);aspect-ratio:1;color:var(--accent);flex:none}
.brand-name{display:flex;align-items:baseline;gap:.2em;white-space:nowrap;
  font:800 clamp(34px,4.6vw,58px)/.9 var(--display);color:var(--ink);margin:0;text-transform:uppercase}
.wm-a{-webkit-text-stroke:1.5px var(--accent);color:transparent;letter-spacing:.1em;
  font-size:.52em;transform:translateY(-.34em);font-weight:700}
.wm-b{color:var(--ink);letter-spacing:-.055em}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .wm-b{background:repeating-linear-gradient(38deg,#EDE9E0 0 3px,#8E8A80 3px 4.4px);
    -webkit-background-clip:text;background-clip:text;color:transparent}
}
.brand-name::after{content:"";align-self:stretch;width:3px;background:var(--accent);margin-left:.16em}
.foot-name .wm-a{-webkit-text-stroke-width:1.2px;-webkit-text-stroke-color:#4A5158;margin-right:.34em}
.foot-name .wm-b{color:#3A4149;background:none;-webkit-background-clip:border-box;background-clip:border-box}
.foot-name::after{display:none}
.brand-sub{display:block;font:400 12.5px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:9px 0 0}
.brand > span{display:block}
.mast-alt{padding:10px 0 0;color:var(--hair-2)}
.mast-alt svg{width:100%;height:22px;display:block}

.nav-toggle{display:none}
.nav-label{display:none;align-items:center;gap:10px;font:600 12.5px/1.2 var(--sans);letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink);border:1px solid var(--hair-2);padding:12px 14px;cursor:pointer}
.nav-label svg{width:22px;height:14px;color:var(--accent)}
.nav{display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap;justify-content:flex-end;padding-bottom:10px}
.nav a{display:flex;align-items:center;gap:8px;font:600 13px/1 var(--sans);letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink);border-bottom:2px solid transparent;padding-bottom:5px}
.nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.nav a[aria-current]{border-bottom-color:var(--accent)}
.nav svg{width:19px;height:19px;flex:none;color:var(--quiet)}
.nav a:hover svg,.nav a[aria-current] svg{color:var(--accent-lift)}
.alt-chip{font:600 12.5px/1.2 var(--sans);letter-spacing:.09em;background:var(--accent);color:#fff;padding:7px 10px}

@media (max-width:1023px){
  .nav-label{display:inline-flex;margin:0 0 18px}
  .nav{display:none;flex-direction:column;align-items:flex-start;width:100%;
    border-top:1px solid var(--hair);padding:18px 0 6px;gap:0}
  .nav a{width:100%;padding:15px 0;border-bottom:1px solid var(--hair)}
  .nav-toggle:checked ~ .nav{display:flex}
  .mast-in{align-items:flex-start}
  .alt-chip{display:none}
}

/* ---------- homepage: hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);grid-template-rows:1fr auto;
  border-bottom:1px solid var(--hair);background:var(--panel-2)}
.hero-img{grid-area:1 / 1 / 3 / 3;width:100%;height:100%;min-height:clamp(380px,60vw,820px);object-fit:cover}
.hero::after{content:"";grid-area:1 / 1 / 3 / 3;
  background:linear-gradient(to top,rgba(16,18,21,.96),rgba(16,18,21,.74) 32%,rgba(16,18,21,.34) 58%,rgba(16,18,21,.04) 82%)}
.hero-body{grid-area:2 / 1 / 3 / 2;align-self:end;position:relative;padding:110px var(--gutter) 46px}
.hero h1{font-size:clamp(30px,5.1vw,82px);line-height:.97;letter-spacing:-.03em;max-width:21ch;margin:0;
  text-shadow:0 1px 3px rgba(16,18,21,.7),0 6px 26px rgba(16,18,21,.9),0 0 80px rgba(16,18,21,.8)}
.hero-cap{grid-area:2 / 2 / 3 / 3;align-self:end;position:relative;
  padding:0 var(--gutter) 52px 0;display:flex;flex-direction:column;gap:8px}
.hero-cap p{margin:0;font-weight:400;font-size:var(--cap-size);color:var(--ink);
  text-shadow:0 2px 22px rgba(16,18,21,.92)}
.hero-cap .credit{text-shadow:0 2px 22px rgba(16,18,21,.92)}
.credit{font:400 var(--credit-size)/1.45 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--quiet);margin:0}

/* ---------- homepage: bands ---------- */
.band{padding:clamp(56px,7vw,104px) 0 0}
.band-in{width:min(100% - 2*var(--gutter),1560px);margin-inline:auto}
.lede{display:grid;grid-template-columns:minmax(0,var(--prose)) minmax(0,1fr);gap:80px;align-items:start}
.lede h2{font-size:clamp(28px,3.1vw,46px);line-height:1.08;margin:0 0 26px}
.lede p{font-size:var(--lead-size);color:var(--body)}
.lede p.kicker{font:600 12.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--sec)}
.figures{border-left:1px solid var(--accent);padding-left:28px;margin-top:44px}
.figures .num{font:800 clamp(40px,4.4vw,68px)/.9 var(--display);letter-spacing:-.04em;color:var(--accent);margin:0 0 6px}
.figures .num.alt{color:var(--ink)}
.figures p{font-size:var(--cap-size);margin:0 0 22px;font-weight:400}
.figures p:last-child{margin-bottom:0}

/* signature: the altitude cross-section */
.section-plate{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:#13171B;padding:34px 0 20px;margin-top:26px;overflow-x:auto}
.section-plate svg{width:100%;min-width:1472px;height:auto;display:block}
.plate-head{display:flex;align-items:flex-end;justify-content:space-between;gap:44px;margin-bottom:24px;flex-wrap:wrap}
.plate-head h2{font-size:clamp(26px,2.7vw,40px);line-height:1.08;max-width:34ch;margin:0}
.plate-note{margin:16px 0 0;font-size:var(--cap-size);color:var(--quiet);font-weight:400}

.hachure{color:#2F3540;margin-top:clamp(40px,5vw,70px)}
.hachure svg{width:100%;height:26px;display:block}

/* featured piece */
.feature{display:grid;grid-template-columns:2fr 1fr;gap:36px;align-items:start}
.feature h2{font-size:clamp(26px,3vw,44px);line-height:1.05;margin:0 0 20px}
.feature .deck{font-size:var(--lead-size);color:var(--body)}
.seconds{display:grid;gap:32px}

/* three unequal secondary pieces */
.unequal{display:grid;grid-template-columns:1.55fr 1fr 1fr;gap:36px;align-items:start}
.card{display:flex;flex-direction:column;height:100%;background:var(--panel);border:1px solid var(--hair);
  padding:0 0 22px;border-bottom:1px solid var(--hair)}
.card img{aspect-ratio:16/10;object-fit:cover;width:100%}
.card .card-in{padding:22px 22px 0;display:flex;flex-direction:column;flex:1}
.card h3{font-size:22px;line-height:1.16;margin:0 0 10px}
.card .kick{font:600 12.5px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:8px;margin:0 0 12px}
.card .kick svg{width:16px;height:16px}
.card p{font-size:var(--cap-size);color:var(--quiet);font-weight:400;margin:0 0 14px}
.card .more{margin-top:auto;font:600 12.5px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);border:0}
.card:hover h3{color:var(--accent-lift)}

/* mid-weight editorial pair — image-led, two-up with a spine */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:0}
.pair article{display:flex;flex-direction:column;padding:0 clamp(24px,3vw,52px)}
.pair article:first-child{padding-left:0}
.pair article:last-child{padding-right:0;border-left:1px solid var(--hair)}
.pair img{aspect-ratio:3/2;object-fit:cover;width:100%}
.pair article > div{border-top:2px solid var(--sec,var(--accent));padding-top:20px;margin-top:24px;
  display:flex;flex-direction:column;flex:1}
.pair h3{font-size:clamp(24px,2.2vw,34px);line-height:1.08;margin:0 0 14px}
.pair p{font-size:17.5px;line-height:1.55;color:var(--quiet);font-weight:400;margin:0;max-width:56ch}
.pair .more{margin-top:auto;padding-top:22px;font:600 12.5px/1.2 var(--sans);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);border:0}
@media (max-width:1023px){
  .pair{grid-template-columns:1fr}
  .pair article{padding:0}
  .pair article:last-child{border-left:0;border-top:1px solid var(--hair);padding-top:36px}
}

/* blue band */
.blue{margin-top:clamp(56px,7vw,104px);background:var(--secondary);color:var(--secondary-ink);padding:clamp(48px,6vw,80px) 0}
.blue .blue-in{width:min(100% - 2*var(--gutter),1560px);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--prose));gap:80px;align-items:center}
.blue .kicker{color:#BFD2EE}
.blue h2{font-size:clamp(28px,3.6vw,54px);line-height:1.05;color:#fff;margin:0 0 22px}
.blue p{font-size:var(--lead-size);color:#E3EAF6;max-width:46ch}
.blue img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid #3A69B0}
.blue a{color:#fff;border-bottom-color:rgba(255,255,255,.5)}

/* section hub */
.hub{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.hub a{display:flex;flex-direction:column;border:0}
.hub img{aspect-ratio:3/4;object-fit:cover}
.hub h3{font-size:23px;margin:16px 0 8px;display:flex;align-items:center;gap:10px}
.hub h3 svg{width:22px;height:22px;color:var(--accent);flex:none}
.hub p{font-size:var(--cap-size);color:var(--quiet);font-weight:400;margin:0}
.hub .count{margin-top:10px;font:600 12.5px/1.2 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.hub a:hover h3{color:var(--accent-lift)}

/* ---------- supporters ---------- */
.supporters{padding:clamp(56px,7vw,104px) 0 0}
.sup-head{display:flex;align-items:baseline;gap:18px;margin-bottom:10px}
.sup-head svg{width:34px;height:18px;color:var(--accent);flex:none}
.sup-lead{font-size:var(--cap-size);color:var(--quiet);font-weight:400;margin:0 0 26px;max-width:62ch}
.sup-group{margin-bottom:30px}
.sup-group h3{font:600 12.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  margin:0 0 16px;border-top:1px solid var(--hair);padding-top:14px}
.sup-grid{display:flex;flex-wrap:wrap;gap:20px}
.sponsor{display:flex;flex-direction:column;gap:14px;flex:0 0 calc(25% - 15px);
  background:var(--panel);border:1px solid var(--hair);padding:20px;border-bottom:1px solid var(--hair)}
.sponsor:hover{border-color:var(--hair-2)}
.sponsor .sponsor-box{background:#0B0D10;border:1px solid var(--hair);height:68px;width:100%;
  display:flex;align-items:center;justify-content:center;padding:8px 16px}
.sponsor img{max-height:44px;max-width:100%;width:auto;height:auto;object-fit:contain}
@media (max-width:1279px){.sponsor{flex:0 0 calc(33.333% - 14px)}}
@media (max-width:899px){.sponsor{flex:0 0 calc(50% - 10px)}}
@media (max-width:559px){.sponsor{flex:0 0 100%}}
.sponsor-name{font:600 14px/1.25 var(--sans);color:var(--ink)}
.sponsor-blurb{font-size:15px;line-height:1.5;color:var(--quiet);font-weight:400}
@media (max-width:719px){
  .sponsor{flex:0 0 100%}
}

/* ---------- map ---------- */
.map-figure{margin:0}
.map-inner{display:grid;grid-template-columns:minmax(0,780px) minmax(0,1fr);gap:44px;align-items:stretch}
/* few pins: legend stacks under a centred map. six or more: it sits beside it. */
.map-figure{margin:0 auto;max-width:820px;justify-self:center}
.map-figure:has(.map-legend li:nth-child(6)){max-width:none;margin:0;justify-self:stretch}
.map-inner{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:stretch}
.map-figure:has(.map-legend li:nth-child(6)) .map-inner{grid-template-columns:minmax(0,780px) minmax(0,1fr);gap:44px}
.map-frame{border:1px solid var(--hair-2);background:#0D1013;padding:0;overflow:hidden}
.map-frame svg{width:100%;height:auto;display:block}
.map-side{padding-top:0;display:flex;flex-direction:column}
.map-legend-head{font:600 12.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.map-legend{list-style:none;margin:0;padding:0;flex:0 0 auto;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 46px;align-content:start}
.map-legend li:last-child{border-bottom:1px solid var(--hair)}
.map-figure:has(.map-legend li:nth-child(6)) .map-side{padding-top:2px}
.map-figure:has(.map-legend li:nth-child(6)) .map-legend{flex:1 1 auto}
.map-figure:has(.map-legend li:nth-child(6)) .map-legend li:last-child{border-bottom:0}
.map-legend:has(li:nth-child(6)){align-content:space-between}
.map-legend li{padding:16px 0;border-top:1px solid var(--hair);display:grid;
  grid-template-columns:30px minmax(0,1fr) auto;gap:6px 16px;align-items:center}
.map-legend .n{font:600 12.5px/22px var(--mono);color:#fff;background:var(--accent);text-align:center;align-self:start}
.map-legend a{border:0;color:var(--ink);font:400 18px/1.28 var(--sans);display:block}
.map-legend a:hover{color:var(--accent-lift)}
.map-legend .sec{display:block;font:600 12.5px/1.2 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--faint);margin-top:7px}
.map-legend .alt{font:600 15px/1.3 var(--mono);letter-spacing:.02em;color:var(--accent);white-space:nowrap;text-align:right}
.map-legend-foot{margin:18px 0 0;font:400 13px/1.5 var(--mono);color:var(--faint)}
@media (max-width:1023px){.map-figure:has(.map-legend li:nth-child(6)) .map-inner{grid-template-columns:minmax(0,1fr)}
  .map-legend:has(li:nth-child(6)){align-content:start}
  .map-frame{overflow-x:auto}
  .map-frame svg{min-width:780px}}
.map-figure figcaption{margin-top:16px;display:flex;gap:28px;align-items:baseline;flex-wrap:wrap}
.map-figure figcaption p{margin:0;font-size:var(--cap-size);color:var(--quiet);font-weight:400;max-width:70ch}
.map-key{display:flex;gap:22px;flex-wrap:wrap;margin:14px 0 0;padding:0;list-style:none}
.map-key li{font:400 13px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--faint);
  display:flex;align-items:center;gap:8px}
.map-key i{width:9px;height:9px;background:var(--accent);border-radius:50%;display:block}

/* ---------- footer ---------- */
.site-foot{margin-top:clamp(64px,8vw,110px);border-top:1px solid var(--hair);padding:44px 0 60px}
.foot-in{width:min(100% - 2*var(--gutter),1560px);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:44px;align-items:start}
.site-foot p{font-size:var(--cap-size);max-width:54ch;color:var(--body);font-weight:400}
.foot-nav{display:flex;flex-wrap:wrap;gap:14px 26px;margin:0;padding:0;list-style:none}
.foot-nav a{font:600 12.5px/1.2 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--quiet);border:0}
.foot-nav a:hover{color:var(--ink)}
.foot-name{font:800 22px/1 var(--display);letter-spacing:-.02em;color:#3A4149;margin:26px 0 0}

/* ---------- article page ---------- */
.article{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter),1fr)
    [wide-start] minmax(0,calc((var(--breakout) - var(--prose))/2))
    [prose-start] min(var(--prose),calc(100% - 2 * var(--gutter)))
    [prose-end] minmax(0,calc((var(--breakout) - var(--prose))/2))
    [wide-end] minmax(var(--gutter),1fr)
    [full-end];
}
.article > *{grid-column:prose}
.article > .breakout{grid-column:wide-start / wide-end}
.article > .fullbleed{grid-column:full-start / full-end}
.article-head{padding-top:clamp(40px,5vw,64px)}
.article-head h1{font-size:clamp(30px,4.2vw,62px);line-height:1.02;letter-spacing:-.03em;margin:0 0 26px}
.article-body h2{font-size:clamp(24px,2.4vw,34px);line-height:1.14;margin:0 0 18px}
.article-body p{font-size:var(--body-size);color:var(--body)}
.article-body > p + p{margin-top:0}
.lead{font-size:var(--lead-size);line-height:1.55;color:var(--ink);font-weight:400;
  border-left:3px solid var(--accent);padding-left:26px;margin:0 0 34px}
.sec-rule{margin:40px 0 26px;border:0;border-top:1px solid var(--hair);height:0}
.article-body h2{margin-top:0}
.article > * + h2{margin-top:8px}

/* insertions: reserved space in flow, both sides */
.article > .ins{margin:44px 0}
@media (max-width:767px){.article > .ins{margin:28px 0}}

/* figure treatment 1 — full bleed with overlay caption strip */
.fig-bleed{position:relative}
.fig-bleed img{width:100%;height:clamp(260px,44vw,660px);object-fit:cover}
.fig-bleed figcaption{position:absolute;inset:auto 0 0 0;background:rgba(27,30,34,.8);
  padding:18px var(--gutter);display:flex;gap:32px;align-items:baseline;flex-wrap:wrap;
  backdrop-filter:blur(2px)}
.fig-bleed figcaption .cap{margin:0;font-size:var(--cap-size);color:var(--ink);font-weight:400;max-width:82ch;flex:1 1 340px}
.fig-bleed figcaption .credit{flex:0 1 auto}

/* figure treatment 2 — offset: image bleeds left, caption in the right column */
.fig-offset{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.fig-offset img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-offset .cap-col{display:flex;flex-direction:column;gap:8px;align-self:start}
.fig-offset .cap{margin:0;font-size:var(--cap-size);color:var(--body);font-weight:400}
@media (min-width:1024px){
  .fig-offset{grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:34px;align-items:start}
}

/* figure treatment 3 — matted on the pale ground with a rust rule */
.fig-mat{background:var(--mat);padding:22px 22px 20px}
.fig-mat img{width:100%;aspect-ratio:3/2;object-fit:cover}
.fig-mat figcaption{border-top:1px solid var(--accent);margin-top:18px;padding-top:14px}
.fig-mat .cap{margin:0 0 6px;font-size:var(--cap-size);color:#23282E;font-weight:400}
.fig-mat .credit{color:#5A6169}
@media (min-width:1024px){
  .fig-mat figcaption{display:flex;gap:30px;align-items:baseline;justify-content:space-between}
  .fig-mat .cap{margin:0;max-width:76ch}
  .fig-mat .credit{text-align:right;flex:0 1 auto}
}

/* inset figure inside the prose */
/* inset figure inside the prose — image and caption side by side, no float void */
.prose-wrap{display:block}
.prose-wrap::after{content:"";display:block;clear:both}
.prose-wrap > p:last-child{margin-bottom:0}
.fig-inset{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:26px;align-items:stretch;
  background:var(--panel);border:1px solid var(--hair);padding:18px;margin:28px 0}
.fig-inset img{width:100%;height:100%;min-height:180px;aspect-ratio:auto;object-fit:cover}
.fig-inset figcaption{margin-top:0;display:flex;flex-direction:column;justify-content:center;gap:8px}
.fig-inset .cap{margin:0;font-size:var(--cap-size);color:var(--body);font-weight:400}
@media (max-width:767px){.fig-inset{grid-template-columns:minmax(0,1fr);gap:16px;padding:14px}
  .fig-inset img{aspect-ratio:3/2;height:auto;min-height:0}}
.clear{clear:both}

/* ---------- article components ---------- */
.pullquote{margin:0;border-left:3px solid var(--accent);padding:2px 0 2px 28px}
.pullquote p{font:600 clamp(21px,2.1vw,30px)/1.26 var(--display);letter-spacing:-.015em;color:var(--ink);margin:0}
.blockquote{margin:0;background:var(--panel);border:1px solid var(--hair);padding:26px 28px}
.blockquote p{font-size:var(--lead-size);color:var(--ink);margin:0 0 12px;font-weight:400}
.blockquote cite{font:400 14px/1.5 var(--mono);color:var(--quiet);font-style:normal}
.callout{background:var(--panel);border:1px solid var(--hair);border-left:3px solid var(--accent);padding:24px 26px}
.callout p{margin:0;font-size:17.5px;color:var(--ink);font-weight:400}
p.note{font-size:16.5px;color:var(--quiet);border-top:1px solid var(--hair);padding-top:14px;font-weight:400}

.ins-head{font:600 12.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  margin:0 0 18px;display:flex;align-items:center;gap:10px}
.ins-head svg{width:18px;height:18px;flex:none}

.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:minmax(96px,150px) minmax(0,1fr);gap:26px;
  padding:16px 0;border-top:1px solid var(--hair)}
.timeline li:last-child{border-bottom:1px solid var(--hair)}
.t-when{font:800 17px/1.25 var(--display);color:var(--accent);letter-spacing:-.01em}
.t-what{font-size:17px;color:var(--body);font-weight:400}
@media (max-width:600px){
  .timeline li{grid-template-columns:1fr;gap:6px}
}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--hair)}
.statblock{background:var(--panel);padding:22px;display:flex;flex-direction:column;gap:8px}
.stat-num{font:800 clamp(26px,2.6vw,38px)/1 var(--display);letter-spacing:-.03em;color:var(--accent)}
.stat-label{font-size:15.5px;line-height:1.45;color:var(--quiet);font-weight:400}

.table-scroll{overflow-x:auto}
.datatable,.versus{width:100%;font-size:16.5px;font-weight:400;min-width:420px}
.datatable th,.versus th{text-align:left;font:600 12.5px/1.3 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);padding:12px 18px 12px 0;border-bottom:1px solid var(--accent)}
.datatable td,.versus td{padding:14px 18px 14px 0;border-bottom:1px solid var(--hair);color:var(--body);vertical-align:top}
.versus td:first-child{color:var(--ink);font-weight:600}

.chart figcaption{margin-top:14px;font-size:var(--cap-size);color:var(--quiet);font-weight:400}
.chart svg{width:100%;height:auto;display:block}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.gallery figure{background:var(--panel);border:1px solid var(--hair);padding:14px}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%}
.gallery figcaption{margin-top:12px;font-size:15px;color:var(--quiet);font-weight:400}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.profile-card{background:var(--panel);border:1px solid var(--hair);padding:22px;display:flex;flex-direction:column;gap:10px}
.profile-card .p-photo{width:100%;aspect-ratio:4/3;object-fit:cover}
.profile-card h3{font-size:21px}
.profile-card .p-role{font:600 12.5px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0}
.profile-card p{font-size:16px;font-weight:400;color:var(--quiet);margin:0}
.profile-card .p-attr{font:400 12.5px/1.5 var(--mono);color:var(--faint)}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.org-card{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:2px 16px;
  background:var(--panel);border:1px solid var(--hair);padding:16px 18px;align-items:center}
.org-card .org-logo{grid-row:1 / span 2;width:52px;height:52px;object-fit:contain;background:#0B0D10;padding:6px}
.org-card.no-logo{grid-template-columns:minmax(0,1fr)}
.org-name{font:600 16px/1.3 var(--sans);color:var(--ink)}
.org-host{font:400 13px/1.3 var(--mono);color:var(--faint)}
.entity-ref{font-weight:400}

.further-grid,.related-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;
  margin:0;padding:0;list-style:none}
.further-grid a,.related-links a{display:block;background:var(--panel);border:1px solid var(--hair);
  padding:20px 22px;font:700 19px/1.2 var(--display);color:var(--ink);letter-spacing:-.01em}
.related-links a:hover,.further-grid a:hover{color:var(--accent-lift);border-color:var(--hair-2)}
.related-links .rl-kick{display:block;font:600 12.5px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin-bottom:10px}
.end-block{border-top:1px solid var(--hair);padding-top:28px}
.end-block h2{font-size:22px;margin:0 0 20px}

/* article foot furniture */
.article-foot{padding:clamp(40px,5vw,64px) 0 0}
.prevnext{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:28px}
.prevnext a{display:block;border:1px solid var(--hair);padding:20px 22px;background:var(--panel)}
.prevnext span{display:block;font:600 12.5px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin-bottom:10px}
.prevnext strong{font:700 18px/1.22 var(--display);color:var(--ink);letter-spacing:-.01em}

/* ---------- section / category page ---------- */
.cat-head{padding:clamp(40px,5vw,72px) 0 0}
.cat-head-in{width:min(100% - 2*var(--gutter),1560px);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:70px;align-items:end}
.cat-head h1{font-size:clamp(30px,4.4vw,64px);line-height:1;letter-spacing:-.03em;margin:0}
.cat-head .blurb{font-size:var(--lead-size);color:var(--body);margin:0}
.cat-meta{margin:20px 0 0;font:400 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.cat-hero img{width:100%;height:clamp(240px,34vw,480px);object-fit:cover}

.cat-list{list-style:none;margin:0;padding:0;display:grid;gap:56px}
.cat-list > li{margin:0}
.cat-lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;
  background:var(--panel);border:1px solid var(--hair);padding:clamp(22px,2.6vw,44px)}
.cat-lead img{width:100%;aspect-ratio:16/10;object-fit:cover}
.cat-lead h2{font-size:clamp(24px,2.8vw,42px);line-height:1.06;margin:0 0 18px}
.cat-lead p{font-size:var(--lead-size);color:var(--body);margin:0}
.cat-rest{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:56px 48px}
.cat-row{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:28px;align-items:start}
.cat-row img{width:100%;aspect-ratio:1;object-fit:cover}
.cat-row h2{font-size:26px;line-height:1.14;margin:0 0 12px}
.cat-row p{font-size:var(--cap-size);color:var(--quiet);font-weight:400;margin:0}
.cat-row .kick{font:600 12.5px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  margin:0 0 12px;display:flex;align-items:center;gap:8px}
.cat-row .kick svg{width:16px;height:16px}
.cat-row:hover h2,.cat-lead:hover h2{color:var(--accent-lift)}
@media (max-width:560px){
  .cat-row{grid-template-columns:1fr}
  .cat-rest{grid-template-columns:1fr}
  .cat-lead{grid-template-columns:1fr;gap:28px}
}
.other-sections{padding:clamp(48px,6vw,84px) 0 0}
.other-sections ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px 20px}
.other-sections a{display:flex;align-items:center;gap:9px;border:1px solid var(--hair);padding:13px 17px;
  font:600 12.5px/1.2 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.other-sections a svg{width:18px;height:18px;color:var(--accent)}
.other-sections a:hover{border-color:var(--accent)}

/* ---------- 404 / styleguide ---------- */
.plain{padding:clamp(48px,7vw,110px) 0}
.plain h1{font-size:clamp(32px,5vw,64px);line-height:1.02;margin:0 0 22px}
.plain p{font-size:var(--lead-size);max-width:56ch}
.sg-block{border-top:1px solid var(--hair);padding:44px 0 0;margin-top:44px}
.sg-block > h2{font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  font-family:var(--sans);font-weight:600;margin:0 0 24px}
.sg-note{font:400 13px/1.5 var(--mono);color:var(--faint);margin:0 0 18px}

/* ---------- responsive: down ---------- */
@media (max-width:1279px){
  .unequal{grid-template-columns:1fr 1fr}
  .unequal > *:first-child{grid-column:1 / -1}
  .hub{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023px){
  :root{--body-size:18px;--lead-size:20px;--prose:820px}
  .lede,.blue .blue-in,.cat-head-in{grid-template-columns:1fr;gap:36px}
  .figures{margin-top:0}
  .feature{grid-template-columns:1fr}
  .pair{grid-template-columns:1fr;gap:32px}
  .hero{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto auto}
  .hero-img{grid-area:1 / 1 / 4 / 2}
  .hero::after{grid-area:1 / 1 / 4 / 2}
  .hero-body{grid-area:2 / 1 / 3 / 2;padding:90px var(--gutter) 18px}
  .hero-cap{grid-area:3 / 1 / 4 / 2;padding:0 var(--gutter) 30px}
  .foot-in{grid-template-columns:1fr}
}
@media (max-width:767px){
  :root{--gutter:18px}
  .unequal{grid-template-columns:1fr}
  .unequal > *:first-child{grid-column:auto}
  .hub{grid-template-columns:1fr}
  .pair article{grid-template-columns:1fr}
  .pair img{aspect-ratio:16/10}
  .hero-body{padding-top:70px}
}

/* ---------- responsive: UP. the page gains, it does not just gain margin ---------- */
@media (min-width:1600px){
  :root{--prose:900px;--breakout:1600px;--body-size:20px;--lead-size:24px;--cap-size:17.5px;--gutter:44px}
  .wrap,.band-in,.mast-in,.blue .blue-in,.foot-in,.cat-head-in{width:min(100% - 2*var(--gutter),1840px)}
  .hub{grid-template-columns:repeat(4,minmax(0,1fr));gap:34px}
  .cat-rest{grid-template-columns:repeat(auto-fit,minmax(520px,1fr))}
  .sup-grid{grid-template-columns:repeat(auto-fit,340px)}
  .sponsor{width:340px}
  /* the homepage lead gains a caption strip at the right edge instead of overlaid text */
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,440px);grid-template-rows:1fr auto}
  .hero-img{grid-area:1 / 1 / 3 / 3;min-height:clamp(560px,46vw,900px)}
  .hero::after{grid-area:1 / 1 / 3 / 3}
  .hero-body{grid-area:2 / 1 / 3 / 2;padding:170px 48px 56px}
  .hero-body h1{max-width:24ch}
  .hero-cap{grid-area:2 / 2 / 3 / 3;padding:0 48px 62px 0;gap:12px}
  .hero-cap p{font-size:19px}
  .fig-offset{grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:44px}
  .timeline li{grid-template-columns:minmax(140px,190px) minmax(0,1fr)}
}
@media (min-width:1920px){
  :root{--prose:940px;--breakout:1740px}
  .wrap,.band-in,.mast-in,.blue .blue-in,.foot-in,.cat-head-in{width:min(100% - 2*var(--gutter),2000px)}
  .cat-rest{grid-template-columns:repeat(auto-fit,minmax(560px,1fr))}
}
@media (min-width:2100px){
  :root{--prose:980px;--breakout:1880px;--body-size:22px;--lead-size:26px;--cap-size:18.5px;--credit-size:13.5px}
  .wrap,.band-in,.mast-in,.blue .blue-in,.foot-in,.cat-head-in{width:min(100% - 2*var(--gutter),2260px)}
  /* above the cap the offset figure spends the outer right margin on a live caption column */
  .article > .fig-offset{grid-column:full-start / full-end;grid-template-columns:minmax(0,1fr) 460px;gap:56px;
    padding-left:var(--gutter);padding-right:var(--gutter)}
  .article > .fig-offset .cap-col{border-left:1px solid var(--accent);padding-left:30px}
  .hub{gap:44px}
  .cat-rest{grid-template-columns:repeat(auto-fit,minmax(620px,1fr))}
}
@media (min-width:2560px){
  :root{--gutter:64px}
  .wrap,.band-in,.mast-in,.blue .blue-in,.foot-in,.cat-head-in{width:min(100% - 2*var(--gutter),2420px)}
}

@media print{
  body{background:#fff;color:#111}
  .masthead,.supporters,.site-foot{border-color:#ccc}
}

/* ---------- narrow screens: compact, and nothing scales below legibility ---------- */
@media (max-width:767px){
  /* the map keeps its type at size and scrolls inside its own frame */
  .map-inner{gap:26px}
  .map-legend li{padding:14px 0;grid-template-columns:26px minmax(0,1fr) auto;gap:4px 12px}
  .map-legend a{font-size:17px}
  .map-legend-foot{margin-top:14px}
  /* full-bleed figure captions sit under the image instead of over it */
  .fig-bleed figcaption{position:static;background:var(--panel);padding:16px var(--gutter) 18px;gap:8px}
  .fig-bleed figcaption .cap{flex:1 1 100%}
  .fig-bleed img{height:clamp(240px,58vw,420px)}
  .hero-img{min-height:clamp(420px,105vw,620px)}
  .fig-mat{padding:14px 14px 16px}
  .fig-inset{padding:12px}
  .statblock{padding:18px}
  .callout,.blockquote{padding:20px 18px}
  .pullquote{padding-left:18px}
  .lead{padding-left:18px}
  .end-block h2{font-size:20px}
  .sponsor{padding:16px}
  .sup-lead{margin-bottom:20px}
  .secnav-list a{padding:15px 14px;letter-spacing:.12em}
  .secnav-list svg{width:20px;height:20px}
  .nav a{letter-spacing:.12em}
  .other-sections a{padding:12px 14px;letter-spacing:.1em}
  .cat-hero img{height:clamp(200px,54vw,340px)}
  .prevnext a,.related-links a,.further-grid a{padding:16px 18px}
  .related-links a,.further-grid a{font-size:17.5px}
}
@media (max-width:479px){
  .brand{gap:13px}
  .brand-mark{height:36px}
  .brand-name{font-size:28px;gap:.16em}
  .brand-sub{font-size:11px;letter-spacing:.12em;margin-top:7px}
  .mast-in{padding-top:18px}
  .mast-alt svg{height:16px}
  .nav-label{padding:11px 12px;margin-bottom:14px}
  .map-frame svg{min-width:780px}
  .foot-name{font-size:19px}
}

/* ---------- per-section accent: three saturated members, one job each ---------- */
[data-sec="maurienne"],[data-sec="cols"],[data-sec="villages"]{--sec:#9E2B18}
[data-sec="snow"],[data-sec="engineering"]{--sec:#4E86D8}
[data-sec="alpage"],[data-sec="the-park"]{--sec:#B8863B}
.kicker[data-sec],.kick[data-sec]{color:var(--sec)}
.kicker[data-sec] svg,.kick[data-sec] svg{color:var(--sec)}
.secnav-list a[data-sec] svg,.other-sections a[data-sec] svg{color:var(--sec)}
.secnav-list a[data-sec]:hover svg{color:var(--sec);opacity:.75}
.nav a[data-sec]:hover svg,.nav a[data-sec][aria-current] svg{color:var(--sec)}
.nav a[data-sec][aria-current]{border-bottom-color:var(--sec)}
.blue .kicker[data-sec]{color:#BFD2EE}
.blue .kicker[data-sec] svg{color:#BFD2EE}
.card[data-sec]:hover h3,.cat-row[data-sec]:hover h2{color:var(--sec)}
.map-legend .n{background:var(--accent)}

/* ---------- additions ---------- */
.wide-only{display:none}
@media (min-width:1600px){.wide-only{display:inline}}

.sponsor.feat{background:#181D22;border-color:var(--hair-2)}
.sponsor.feat .sponsor-box{background:#080A0C}

.secnav{padding-top:clamp(28px,3vw,44px)}
.secnav-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.secnav-list li{border-right:1px solid var(--hair)}
.secnav-list li:last-child{border-right:0}
.secnav-list a{display:flex;align-items:center;gap:10px;padding:18px 16px;border:0;
  font:600 12.5px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--ink)}
.secnav-list svg{width:22px;height:22px;color:var(--accent);flex:none}
.secnav-list .sn-n{margin-left:auto;font:400 12.5px/1 var(--mono);color:var(--faint);letter-spacing:.04em}
.secnav-list a:hover{background:var(--panel);color:var(--ink)}
.secnav-list a:hover svg{color:var(--accent-lift)}
@media (max-width:1279px){.secnav-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .secnav-list li{border-bottom:1px solid var(--hair)}}
@media (max-width:719px){.secnav-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:400px){.secnav-list{grid-template-columns:1fr}.secnav-list li{border-right:0}}

.feature > figure{margin:0}
.feature h2 a{border:0;color:var(--ink)}
.feature h2 a:hover{color:var(--accent-lift)}
.feature .pullquote{margin:26px 0}
.cat-hero{margin:clamp(28px,3.4vw,52px) 0 0}
.cat-hero img{width:100%;height:clamp(240px,32vw,560px);object-fit:cover;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.pair .kick{margin:0 0 12px}
.pair h3 a{border:0;color:var(--ink)}
.pair h3 a:hover{color:var(--accent-lift)}
.pair article > a{border:0;display:block}
.cat-lead,.cat-row{border:0}
.cat-lead figure,.cat-row figure{margin:0}
h2.plate-head{display:block;font-size:clamp(26px,2.9vw,40px);line-height:1.08;max-width:36ch;margin:0 0 40px}
.card{text-decoration:none}
.hub a,.card,.cat-row,.cat-lead,.secnav-list a,.other-sections a,.prevnext a,.related-links a,.further-grid a,.sponsor,.foot-nav a,.nav a,.brand{border-bottom: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}
.sup-head{flex-wrap:wrap!important}
.sup-head > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sup-grid{flex-wrap:wrap!important}
.sup-grid > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-grid-fill: fixed px columns leave a dead strip at wide widths — the tiles
   must stretch, and a tile with its own fixed width has to give that up too */
.sup-grid{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))!important;justify-content:stretch!important}
.sup-grid>[data-partner],.sup-grid>*>[data-partner]{width:auto!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. */
.sup-grid .sponsor .sponsor-box.sponsor-box{display:block!important;width:100%!important}
.sup-grid .sponsor.sponsor img{height:44px!important;display:block!important;width:100%!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){
  /* NOT .section-plate — it is `overflow-x:auto` around an SVG pinned to min-width:1472px,
     i.e. a diagram Design means you to swipe. Padding a scroll container just insets the
     scrollport; the artwork still runs to the edge, which is the point. */
}

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

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.cat-lead > figure > img,
  a.cat-row > figure > img,
  article > a > img,
  div.blue-in > figure > img,
  div.feature > figure.fig-mat > img,
  div.prose-wrap > figure.fig-inset > img,
  div.unequal > a.card > img,
  div.unequal > a.card.wide > img,
  main > figure.cat-hero > img,
  main > section.hero > img.hero-img,
  main.article > figure.breakout.fig-mat.ins > img,
  main.article > figure.breakout.fig-offset.ins > img,
  main.article > figure.fig-bleed.fullbleed > img){height:auto}
/* op-img-dims:end */

/* op-odd-tier-lead: money_slots changed a tier's size — .sup-grid (5 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){
  .sup-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.sup-group:nth-of-type(3) > div.sup-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important}
}
/* op-grow-same-size:end */
@media (min-width:1001px) and (max-width:1219px){.map-legend.map-legend{grid-template-columns:minmax(0,1fr)!important}}
@media (min-width:1001px) and (max-width:1199px){.section-plate.section-plate{overflow-x:auto!important;max-width:100%!important}}
[data-partner] .sponsor-box{background:transparent!important}