/* todonieve.com — Whiteout
   PALETTE (3 grounds + 2 saturated accents, each with a job)
   --paper  #F4F1EA  ground        --ink   #16181C  ink
   --accent #1D4E89  accent (hue ~217) — bands, plates, panels, links
   --flag   #E4572E  secondary (hue ~17) — kickers, pins, marks in the drawn system
   --mat    #DFDAD0  mats and frames under photographs
   The two saturated members sit ~200 deg apart in hue and both carry real area. */
:root{
  --paper:#F4F1EA; --snow:#FFFDF8; --mat:#DFDAD0;
  --ink:#16181C; --ink-2:#2A2C30; --body:#3A3C40; --muted:#6E6A62; --quiet:#8A857C;
  --accent:#1D4E89; --accent-d:#163C68; --flag:#E4572E;
  --disp:'Instrument Serif',Georgia,'Times New Roman',serif;
  --text:'Source Serif 4',Georgia,serif;
  --gut:clamp(18px,4vw,44px);
  --measure:68ch;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);
  font-size:17px;line-height:1.6;overflow-x:hidden;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--flag)}
h1,h2,h3,h4{font-family:var(--disp);font-weight:400;letter-spacing:-0.008em;margin:0;text-wrap:balance}
p{margin:0 0 1.1em}
.wrap{max-width:1480px;margin:0 auto;padding-inline:var(--gut)}
.wrap-r{max-width:920px;margin:0 auto;padding-inline:var(--gut)}
.vis-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- the drawn system: graduated snow-stake rules + 24-grid icons ---- */
.stake{height:15px;border-bottom:1px solid currentColor;
  background-image:repeating-linear-gradient(to right,currentColor 0 1px,transparent 1px 12px),
                   repeating-linear-gradient(to right,currentColor 0 1px,transparent 1px 6px);
  background-size:12px 9px,6px 4px;background-position:0 100%,0 100%;background-repeat:repeat-x;
  color:rgba(22,24,28,.5)}
.stake--pale{color:rgba(255,253,248,.75)}
.ico{width:1.5em;height:1.5em;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-0.32em}
.ico--lg{width:2.6em;height:2.6em;stroke-width:1.3}
.kick{font-size:13px;line-height:1.3;letter-spacing:.18em;text-transform:uppercase;color:var(--flag);
  display:flex;align-items:center;gap:9px;margin:0 0 16px}
.kick--pale{color:#F1B79E}
.kick--quiet{color:var(--quiet)}

/* ---- masthead ---- */
.mast{background:var(--paper)}
.mast-in{display:flex;align-items:flex-end;gap:20px 26px;flex-wrap:wrap;padding:18px 0 14px}
.brand{display:flex;align-items:center;gap:14px;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand .mk{width:26px;height:52px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.brand .mk .snow{stroke:var(--accent);stroke-width:2}
.wordmark{font-family:var(--disp);font-size:clamp(34px,5vw,58px);line-height:.86;letter-spacing:-0.01em}
.wordmark i{font-style:normal;color:var(--flag)}
.mast-line{margin:0 0 10px;font-size:16px;line-height:1.34;max-width:26em;color:var(--body)}
.mast-sp{flex:1 1 20px}
.mast-browse{display:inline-flex;align-items:center;gap:9px;font-size:14px;letter-spacing:.12em;
  text-transform:uppercase;border-bottom:1px solid var(--accent);padding-bottom:4px;margin-bottom:8px}

/* two-level nav, stacked as full-width rows (never a column bank, never a dropdown) */
.navrows{border-top:1px solid rgba(22,24,28,.18)}
.nrow{display:flex;gap:4px 20px;align-items:baseline;flex-wrap:wrap;
  padding:9px 0;border-bottom:1px solid rgba(22,24,28,.12)}
.nrow:last-child{border-bottom:0}
.nrow-h{flex:0 0 auto;max-width:100%;display:flex;gap:9px;align-items:baseline;color:var(--ink)}
.nrow-h:hover{color:var(--accent)}
.nrow-h .ico{width:1.25em;height:1.25em;align-self:center;color:var(--flag)}
.nrow-t{font-family:var(--disp);font-size:19.5px;line-height:1.2;display:block}
.nrow-l{flex:1 1 320px;display:flex;flex-wrap:wrap;gap:2px 16px;font-size:14.5px}
.nrow-l a{white-space:nowrap}
@media(max-width:640px){.nrow-l a{white-space:normal}}

/* slim bar on inner pages */
.bar{position:sticky;top:0;z-index:30;background:rgba(244,241,234,.95);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(22,24,28,.18)}
.bar-in{display:flex;align-items:center;gap:10px 26px;flex-wrap:wrap;padding:11px 0}
.bar .brand .mk{width:17px;height:34px}
.bar .wordmark{font-size:25px}
.bar-nav{display:flex;gap:8px 22px;flex-wrap:wrap;align-items:center;font-size:15px;flex:1 1 340px}
.bar-nav a{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2)}
.bar-nav a:hover{color:var(--flag)}
.bar-nav .ico{width:1.15em;height:1.15em;color:var(--flag)}

/* ---- figure system: four treatments, one drawing system ---- */
figure{margin:0}
.fig-cap{margin:12px 0 0;max-width:46em}
.fig-cap .c{display:block;font-size:16.5px;line-height:1.42;color:var(--ink)}
.fig-cap .cr{display:block;font-size:12.5px;line-height:1.4;letter-spacing:.07em;text-transform:uppercase;
  color:var(--quiet);margin-top:6px}
.fig-cap--rule{border-top:1px solid rgba(22,24,28,.28);padding-top:11px}
/* 1. mat: the photograph sits on a paper mat inside a hairline */
.fig--mat img{width:100%}
.fig--mat .in{background:var(--snow);padding:11px;box-shadow:0 0 0 1px rgba(22,24,28,.18)}
/* 2. plate: photograph on a saturated panel, caption reversed out */
.fig--plate{background:var(--accent);padding:14px 14px 4px}
.fig--plate .fig-cap{padding:0 3px 14px}
.fig--plate .fig-cap .c{color:var(--snow)}
.fig--plate .fig-cap .cr{color:rgba(255,253,248,.62)}
/* 3. bleed: breaks the measure, caption steps out under the left edge */
.fig--bleed{margin-inline:calc(50% - 50vw);width:100vw}
.fig--bleed img{width:100%;max-height:82vh;object-fit:cover}
.fig--bleed .fig-cap{max-width:1480px;margin-inline:auto;padding:12px var(--gut) 0;
  display:flex;gap:10px 26px;flex-wrap:wrap;align-items:baseline}
.fig--bleed .fig-cap .cr{margin-top:0}
/* 4. inset: small, in the column, hanging caption keyed to the flag colour */
.fig--inset{border-left:2px solid var(--flag);padding-left:15px}
.fig--inset img{width:100%}

/* ---- article components ---- */
.lead{font-size:clamp(20px,2.1vw,25px);line-height:1.44;color:var(--ink);max-width:31em}
.prose{font-size:19px;line-height:1.66;color:var(--body);max-width:none}
.prose p{margin:0 0 1.15em}
.prose h2{font-size:clamp(28px,3vw,40px);line-height:1.02;color:var(--ink);margin:2em 0 .55em;max-width:24em}
.prose h3{font-size:23px;margin:1.7em 0 .5em;color:var(--ink)}
.prose a{border-bottom:1px solid rgba(29,78,137,.4)}
.prose em{font-style:italic}
.pullquote{margin:2em 0;padding:26px 0;border-top:1px solid rgba(22,24,28,.25);
  border-bottom:1px solid rgba(22,24,28,.25);max-width:none}
.pullquote p{font-family:var(--disp);font-size:clamp(26px,3vw,37px);line-height:1.11;color:var(--ink);margin:0}
.blockquote{margin:1.8em 0;padding-left:20px;border-left:2px solid var(--accent)}
.blockquote p{font-size:20px;line-height:1.5;color:var(--ink);margin:0 0 .5em}
.blockquote cite{font-style:normal;font-size:14px;letter-spacing:.09em;text-transform:uppercase;color:var(--quiet)}
.callout{margin:1.9em 0;background:var(--snow);box-shadow:0 0 0 1px rgba(22,24,28,.16);padding:22px 24px}
.callout p{margin:0;font-size:18px;line-height:1.5;color:var(--ink)}
.note{font-size:16px;line-height:1.5;color:var(--muted);border-left:2px solid var(--mat);padding-left:14px}

/* data */
.datatable,.versus{width:100%;border-collapse:collapse;font-size:16.5px;margin:1.6em 0}
.datatable th,.versus th{font-family:var(--text);font-weight:600;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--quiet);text-align:left;padding:10px 12px 10px 0;
  border-bottom:1px solid rgba(22,24,28,.28);vertical-align:bottom}
.datatable td,.versus td{padding:12px 12px 12px 0;border-bottom:1px solid rgba(22,24,28,.12);vertical-align:top}
.datatable tr:last-child td,.versus tr:last-child td{border-bottom:0}
.datatable tbody tr.hi td{background:rgba(29,78,137,.07)}
.versus td:first-child{font-weight:600;width:34%}
.tnum{font-variant-numeric:tabular-nums;white-space:nowrap}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));gap:1px;
  background:rgba(22,24,28,.16);margin:1.8em 0;border:1px solid rgba(22,24,28,.16)}
.statblock{background:var(--paper);padding:18px 16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.stat-num{font-family:var(--disp);font-size:clamp(32px,4vw,46px);line-height:.92;color:var(--accent);
  font-variant-numeric:tabular-nums}
.stat-label{font-size:14.5px;line-height:1.35;color:var(--muted);overflow-wrap:break-word}
.timeline{list-style:none;margin:1.8em 0;padding:0;border-top:1px solid rgba(22,24,28,.22)}
.timeline li{display:grid;grid-template-columns:minmax(0,13em) 1fr;gap:6px 24px;padding:13px 0;
  border-bottom:1px solid rgba(22,24,28,.12)}
.t-when{font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--flag);line-height:1.35}
.t-what{font-size:17px;line-height:1.45;color:var(--body)}
@media(max-width:560px){.timeline li{grid-template-columns:1fr}}
.chart{margin:1.9em 0}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart figcaption{margin-top:12px;font-size:16px;line-height:1.4;color:var(--ink)}
.chart .ax{stroke:rgba(22,24,28,.25);stroke-width:1}
.chart .gl{stroke:rgba(22,24,28,.1);stroke-width:1}
.chart .bar-f{fill:var(--accent)}
.chart .bar-h{fill:var(--flag)}
.chart .lbl{font-family:var(--text);font-size:14px;fill:var(--muted)}
.chart .val{font-family:var(--text);font-size:14px;fill:var(--ink);font-variant-numeric:tabular-nums}

/* the measured plate — Notes-for-Design material, full width, breaks the prose */
.plate{background:var(--accent);color:var(--snow);margin:2.4em 0;padding:clamp(24px,3vw,40px)}
.plate--wide{width:100%}
.plate h3{font-size:clamp(24px,2.6vw,33px);line-height:1.04;color:var(--snow);margin:0 0 18px;max-width:26em}
.plate .kick{color:#F1B79E}
.plate-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:22px 34px}
.plate dl{margin:0}
.plate dt{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,253,248,.62);margin:0 0 4px}
.plate dd{margin:0 0 15px;font-size:18px;line-height:1.4}
.plate dd b{font-family:var(--disp);font-size:26px;font-weight:400;display:block;line-height:1}
.plate ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px}
.plate li{font-size:17.5px;line-height:1.45;display:flex;gap:12px}
.plate li .ico{color:#F1B79E;width:1.05em;height:1.05em;margin-top:.3em}

/* glossary strip — landscape vocabulary, set as a run, not a rail */
.gloss{margin:2.2em 0;border-top:1px solid rgba(22,24,28,.28);border-bottom:1px solid rgba(22,24,28,.28);
  padding:20px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:20px 34px}
.gloss .g-t{display:block;font-family:var(--disp);font-size:22px;line-height:1.05;margin-bottom:5px}
.gloss .g-d{font-size:16px;line-height:1.45;color:var(--body);margin:0}

/* cards */
.cards{display:grid;gap:1px;background:rgba(22,24,28,.16);border:1px solid rgba(22,24,28,.16)}
.cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:600px){.cards--4{grid-template-columns:1fr}}
.card{background:var(--paper);display:flex;flex-direction:column;padding:0 0 20px;min-width:0}
.card:hover{background:var(--snow)}
.card .ph{aspect-ratio:16/10;overflow:hidden;background:var(--mat)}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card-b{padding:16px 18px 0;display:flex;flex-direction:column;flex:1}
.card h3{font-size:23px;line-height:1.06;margin:0 0 9px;min-height:2.12em;color:var(--ink)}
.card:hover h3{color:var(--accent)}
.card p{font-size:15.5px;line-height:1.44;color:var(--muted);margin:0 0 14px}
.card .meta{margin-top:auto;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);
  display:flex;align-items:center;gap:8px}
.card .meta .ico{width:1.1em;height:1.1em;color:var(--flag)}

/* lists */
.cat-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(22,24,28,.22)}
.cat-list li{border-bottom:1px solid rgba(22,24,28,.12)}
.cat-list a{display:grid;grid-template-columns:1fr minmax(0,22em);gap:8px 34px;padding:18px 0;align-items:baseline}
.cat-list .t{font-family:var(--disp);font-size:clamp(21px,2.1vw,27px);line-height:1.08;color:var(--ink)}
.cat-list a:hover .t{color:var(--accent)}
.cat-list .d{font-size:16px;line-height:1.42;color:var(--muted)}
@media(max-width:760px){.cat-list a{grid-template-columns:1fr}}
.related-links{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1px;
  background:rgba(22,24,28,.16);border:1px solid rgba(22,24,28,.16)}
.related-links li{background:var(--paper);min-width:0}
.related-links a{display:flex;flex-direction:column;gap:8px;padding:18px;height:100%}
.related-links .t{font-family:var(--disp);font-size:21px;line-height:1.08;color:var(--ink)}
.related-links a:hover .t{color:var(--accent)}
.related-links .s{font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--quiet);
  display:flex;align-items:center;gap:7px}
.related-links .s .ico{width:1.1em;height:1.1em;color:var(--flag)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1px;
  background:rgba(22,24,28,.16);border:1px solid rgba(22,24,28,.16)}
.further-grid a{background:var(--paper);padding:18px;font-family:var(--disp);font-size:21px;line-height:1.1;color:var(--ink)}
.further-grid a:hover{background:var(--snow);color:var(--accent)}

/* profile / org cards */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:24px;margin:1.9em 0}
.profile-card{background:var(--snow);box-shadow:0 0 0 1px rgba(22,24,28,.16);padding:18px;display:flex;
  flex-direction:column;gap:9px;min-width:0}
.profile-card .p-photo{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--mat)}
.profile-card h3{font-size:23px;line-height:1.06;margin:2px 0 0}
.profile-card .p-role{margin:0;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--flag)}
.profile-card p{font-size:16px;line-height:1.45;color:var(--body);margin:0}
.profile-card .p-links{font-size:15px}
.profile-card .p-attr{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--quiet);margin-top:auto}
.profile-card.no-photo{border-left:2px solid var(--accent)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px;margin:1.7em 0}
.org-card{display:flex;flex-direction:column;gap:5px;background:var(--snow);box-shadow:0 0 0 1px rgba(22,24,28,.16);
  padding:15px;min-width:0}
.org-logo{height:34px;width:auto;max-width:100%;object-fit:contain;object-position:center;background:var(--ink);padding:5px 9px}
.org-name{font-family:var(--disp);font-size:20px;line-height:1.1;color:var(--ink)}
.org-host{font-size:13px;letter-spacing:.06em;color:var(--quiet);overflow-wrap:anywhere}
.entity-ref{border-bottom:1px solid rgba(29,78,137,.4);white-space:nowrap}

/* map */
.map-figure{margin:0}
.map-figure .map-slot{background:var(--snow);box-shadow:0 0 0 1px rgba(22,24,28,.18)}
.map-figure figcaption{margin-top:13px;font-size:16.5px;line-height:1.42}
.geo{width:100%;height:auto;display:block}
.geo .land{fill:var(--mat);stroke:rgba(22,24,28,.45);stroke-width:1.1}
.geo .pin{fill:var(--flag)}
.geo .pin-r{stroke:var(--flag);fill:none;stroke-width:1.2}
.geo .pin-l{font-family:var(--text);font-size:20px;fill:var(--ink)}
.geo .pin-s{font-family:var(--text);font-size:15px;fill:var(--muted)}
.geo .lat{stroke:rgba(22,24,28,.22);stroke-width:1;stroke-dasharray:5 6}
.geo .lat-l{font-family:var(--text);font-size:15px;fill:var(--quiet)}

/* supporters rail */
.support{border-top:1px solid rgba(22,24,28,.18);padding-top:22px}
.support h2{font-size:26px;line-height:1.05;margin:0 0 6px}
.support-note{font-size:15.5px;line-height:1.45;color:var(--muted);margin:0 0 20px;max-width:30em}
.support-grp{margin-bottom:26px}
.support-grp h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);
  font-family:var(--text);font-weight:600;margin:0 0 12px;padding-bottom:9px;
  border-bottom:1px solid rgba(22,24,28,.16)}
.support-list{display:grid;grid-template-columns:repeat(auto-fit,268px);gap:14px;justify-content:start}
.sponsor{display:block;flex:0 0 268px;width:268px;background:var(--snow);
  box-shadow:0 0 0 1px rgba(22,24,28,.16);padding:12px;color:var(--ink)}
.sponsor:hover{box-shadow:0 0 0 1px var(--accent);color:var(--ink)}
.sponsor img{width:244px;height:48px;max-width:100%;object-fit:contain;object-position:center;
  background:var(--ink);padding:6px 10px;display:block}
.sponsor-name{display:block;font-family:var(--disp);font-size:20px;line-height:1.15;margin-top:10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sponsor-blurb{display:block;font-size:14.5px;line-height:1.4;color:var(--muted);margin-top:5px;min-height:2.8em}
@media(max-width:340px){.support-list{grid-template-columns:1fr}.sponsor,.sponsor img{width:100%;flex:0 0 auto}}

/* footer */
.foot{background:var(--ink);color:#DCD8D0;margin-top:0;padding:44px 0 54px}
.foot a{color:#BFD4EC}
.foot a:hover{color:#F0A98A}
.foot .brand{color:var(--snow)}
.foot .brand .mk .snow{stroke:#7FA9DA}
.foot .wordmark i{color:#F0A98A}
.foot-top{display:flex;gap:34px;flex-wrap:wrap;align-items:flex-end;padding-bottom:22px}
.foot-line{margin:0 0 6px;font-size:16px;line-height:1.4;max-width:26em;color:#BAB4AA}
.foot .navrows{border-top:1px solid rgba(255,253,248,.2)}
.foot .nrow{border-bottom:1px solid rgba(255,253,248,.13)}
.foot .nrow-h{color:var(--snow)}
.foot .nrow-h:hover{color:#F0A98A}
.foot .nrow-h .ico{color:#F0A98A}
.foot-end{display:flex;gap:12px 28px;flex-wrap:wrap;padding-top:22px;font-size:15px;color:#969086}

/* page furniture */
.crumb{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--quiet);margin:0 0 22px;flex-wrap:wrap}
.crumb a{color:var(--quiet);display:inline-flex;align-items:center;gap:8px}
.crumb a:hover{color:var(--flag)}
.crumb .ico{width:1.2em;height:1.2em;color:var(--flag)}
.section-head{padding:44px 0 0}
.section-head h1{font-size:clamp(36px,6vw,86px);line-height:.92;max-width:19em}
.byline{display:flex;gap:10px 22px;flex-wrap:wrap;align-items:center;font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--quiet);border-top:1px solid rgba(22,24,28,.2);
  border-bottom:1px solid rgba(22,24,28,.2);padding:13px 0;margin:26px 0 0}
.byline b{font-weight:600;color:var(--ink-2);letter-spacing:.06em}
.more{display:inline-flex;align-items:center;gap:11px;font-size:15px;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid var(--accent);padding-bottom:5px}
.more svg{width:26px;height:8px;fill:none;stroke:currentColor;stroke-width:1.2}
.band{padding:clamp(44px,6vw,92px) 0}
.band--tight{padding:clamp(30px,4vw,56px) 0}
.band--ink{background:var(--accent);color:var(--snow)}
.band--ink h2,.band--ink h3{color:var(--snow)}
.band--ink a{color:#CFE0F2}
.band--ink a:hover{color:#F6C2AD}
.hr-stake{margin:0 0 26px}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:clamp(28px,4vw,60px)}
.feed{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(30px,4vw,58px);align-items:start}
@media(max-width:1000px){.feed{grid-template-columns:1fr}}
.artgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media print{.bar{position:static}}

@media(max-width:820px){.sig{grid-template-columns:1fr !important}}
.cat-intro{font-size:clamp(19px,2vw,23px);line-height:1.46;color:var(--body);max-width:34em}
.reg{width:100%;border-collapse:collapse}
.reg caption{text-align:left;font-family:var(--disp);font-size:clamp(24px,2.6vw,34px);line-height:1.06;
  padding:0 0 12px;color:var(--ink)}
.reg th{font-family:var(--text);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--quiet);text-align:left;padding:9px 14px 9px 0;border-bottom:1px solid rgba(22,24,28,.28)}
.reg td{padding:13px 14px 13px 0;border-bottom:1px solid rgba(22,24,28,.12);vertical-align:top;font-size:16.5px}
.reg .rt{font-family:var(--disp);font-size:21px;line-height:1.1}
.reg td.d{color:var(--muted);font-size:15.5px;line-height:1.42}
@media(max-width:720px){.reg td.d,.reg th.d{display:none}}
.pagehero img{width:100%;height:min(52vh,460px);object-fit:cover}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:26px}

/* the reading measure lives on the text, not the container, so plates and
   figures can break it without viewport arithmetic */
.prose>p,.prose>h2,.prose>h3,.prose>ul,.prose>ol,.prose>.note,.prose>.blockquote,.prose>.callout{max-width:var(--measure)}
/* figures step out to the right of the reading measure, so the page uses its
   full width without a standing side rail */
.prose>.fig--mat,.prose>.fig--plate{max-width:min(100%,900px);margin-left:auto;margin-right:0}
@media(max-width:1100px){.prose>.fig--mat,.prose>.fig--plate{margin-left:0}}
.prose .fig--bleed{margin-inline:0;width:100%}
.prose .fig--bleed img{max-height:64vh}
.prose .fig--bleed .fig-cap{max-width:52em;margin-inline:0;padding:12px 0 0}
.prose .gloss{max-width:100%}

.prose>.pullquote{max-width:none}
.prose>.plate{max-width:none}

/* remaining styleguide components, same drawing system */
.article-figure{margin:2.1em 0}
.article-figure img{width:100%;background:var(--snow);padding:11px;box-shadow:0 0 0 1px rgba(22,24,28,.18)}
.article-figure figcaption{margin:12px 0 0;font-size:16.5px;line-height:1.42;max-width:46em;
  border-top:1px solid rgba(22,24,28,.28);padding-top:11px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:14px;margin:2em 0}
.gallery figure{min-width:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--mat)}
.gallery figcaption{font-size:14.5px;line-height:1.38;color:var(--muted);margin-top:8px}
.chart .seg-a,.chart .seg-b,.chart .seg-c,.chart .seg-d,.chart .seg-e{fill:none}
.chart .ln{fill:none;stroke:var(--accent);stroke-width:2}
.chart .dot{fill:var(--flag)}
.chart-key{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px;font-size:14.5px;color:var(--body)}
.chart-key span{display:inline-flex;align-items:center;gap:8px}
.chart-key i{width:13px;height:13px;display:inline-block;flex:none}
.org-card.no-logo{border-left:2px solid var(--flag)}
.sg-sec{padding:44px 0;border-top:1px solid rgba(22,24,28,.2)}
.sg-sec>h2{font-size:clamp(26px,3vw,38px);line-height:1.02;margin:0 0 4px}
.sg-sec>.sg-n{font-size:14px;color:var(--quiet);margin:0 0 26px}
.sg-narrow{max-width:360px;box-shadow:0 0 0 1px rgba(22,24,28,.2);padding:14px;margin-top:20px}

@media(max-width:640px){
  .datatable,.versus,.reg{display:block;overflow-x:auto;font-size:14.5px;-webkit-overflow-scrolling:touch}
  .datatable th,.datatable td,.versus th,.versus td,.reg th,.reg td{padding-right:8px}
  .datatable th,.reg th{font-size:11.5px;letter-spacing:.09em}
  .prose{font-size:18px}
  .plate dd b{font-size:23px}
}

/* signature band — the map as a tall ribbon with its labels set at true latitude,
   so the band's height is used rather than left empty beside a portrait plate */
.sig{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,auto);gap:clamp(30px,4vw,72px);align-items:start}
.sig-t h2{font-size:clamp(32px,4.4vw,64px);line-height:.95;max-width:17em}
.sig-d{font-size:clamp(18px,1.9vw,22px);line-height:1.44;color:rgba(255,253,248,.95);max-width:30em;margin:22px 0 18px}
.sig-p{font-size:17px;line-height:1.55;color:rgba(255,253,248,.8);max-width:32em;margin:0 0 14px}
.sig-p--q{border-top:1px solid rgba(255,253,248,.3);padding-top:16px;color:#F6C2AD;font-size:18px;max-width:28em}
.sig-plot{display:flex;gap:0;align-items:stretch}
.sig-m .map-slot{background:var(--snow);padding:10px 8px;box-shadow:none;flex:none}
.sig-m .geo{height:560px;width:auto}
.sig-labs{position:relative;flex:0 0 190px;margin-left:-1px}
.pinlab{position:absolute;left:0;transform:translateY(-50%);display:flex;align-items:baseline;gap:8px;white-space:nowrap;padding-left:12px;
  border-left:1px solid rgba(255,253,248,.35);color:#FFFDF8}
.pinlab:hover{color:#F6C2AD;border-left-color:#F6C2AD}
.pinlab .pn{font-family:var(--disp);font-size:19px;line-height:1}
.pinlab .pl{font-size:12.5px;letter-spacing:.09em;color:rgba(255,253,248,.6)}
.sig-m figcaption{color:rgba(255,253,248,.92);font-size:16px;margin-top:14px;max-width:30em}
@media(max-width:820px){.sig{grid-template-columns:1fr}.sig-plot{justify-content:center}}




/* the front-page selection: one piece given size, three set as quiet rows —
   not four equal tiles */
.pick{display:block;color:var(--ink)}
.pick--lead .ph{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--mat)}
.pick--lead .ph img{width:100%;height:100%;object-fit:cover}
.pick--lead .pb{display:block;padding-top:18px}
.pick--lead .meta{margin-bottom:12px}
.pick--lead h3{font-size:clamp(28px,3.4vw,46px);line-height:1;margin:0 0 14px;max-width:24em}
.pick--lead p{font-size:19px;line-height:1.5;color:var(--body);margin:0;max-width:34em}
.pick--lead:hover h3{color:var(--accent)}
.picks{margin-top:34px;border-top:1px solid rgba(22,24,28,.22)}
.pick--row{display:grid;grid-template-columns:132px minmax(0,1fr);gap:22px;align-items:center;
  padding:16px 0;border-bottom:1px solid rgba(22,24,28,.12)}
.pick--row:hover{background:var(--snow)}
.pick--row .th{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--mat)}
.pick--row .th img{width:100%;height:100%;object-fit:cover}
.pick--row .pb{display:block;min-width:0}
.pick--row h3{font-size:clamp(20px,2.1vw,26px);line-height:1.08;margin:0 0 8px}
.pick--row:hover h3{color:var(--accent)}
.pick .meta{display:flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--quiet)}
.pick .meta .ico{width:1.1em;height:1.1em;color:var(--flag)}
@media(max-width:520px){.pick--row{grid-template-columns:84px minmax(0,1fr);gap:16px}}

/* header menu: a real menu bar on the accent ground, with the section's own
   pieces on a second bar when the reader is inside a section */
.menu-stick{position:sticky;top:0;z-index:40}
.menu{background:var(--accent)}
.menu .wrap{padding-inline:calc(var(--gut) - 18px)}
.menu-l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:stretch}
.menu-l a{display:flex;align-items:center;gap:9px;padding:13px 18px;color:rgba(255,253,248,.92);
  font-size:14px;letter-spacing:.11em;text-transform:uppercase;line-height:1.2}
.menu-l a:hover{background:rgba(255,253,248,.14);color:#FFFDF8}
.menu-l a.on{background:var(--flag);color:#FFFDF8}
.menu-l a.on .ico{color:#FFFDF8}
.menu-l .ico{width:1.25em;height:1.25em;color:#F1B79E}
.menu-end{margin-left:auto}
.menu-end a{color:rgba(255,253,248,.72)}
.submenu{background:var(--snow);border-bottom:1px solid rgba(22,24,28,.18)}
.submenu .wrap{display:flex;flex-wrap:wrap;gap:5px 22px;align-items:baseline;padding:10px 0 11px}
.sub-k{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--quiet)}
.sub-k .ico{width:1.3em;height:1.3em;color:var(--flag)}
.submenu a{font-size:15px;color:var(--ink)}
.submenu a:hover{color:var(--flag)}
@media(max-width:700px){
  .menu-l a{padding:11px 13px;font-size:12.5px;letter-spacing:.08em}
  .menu-end{margin-left:0}
  .menu .wrap{padding-inline:calc(var(--gut) - 13px)}
}

.hero h1{text-shadow:0 2px 4px rgba(10,12,16,.5),0 8px 34px rgba(10,12,16,.55)}
.hero .kick,.hero p,.hero .more{text-shadow:0 1px 3px rgba(10,12,16,.6),0 6px 22px rgba(10,12,16,.5)}
/* the lead pick gets more height so the feed and the supporters rail finish together */
.pick--lead .ph{aspect-ratio:3/2}
/* compact supporter tiles */
.support-list{gap:10px}
.sponsor{padding:10px}
.sponsor img{height:40px;width:236px;padding:5px 9px}
.sponsor-name{font-size:18px;margin-top:8px}
.sponsor-blurb{font-size:14px;line-height:1.34;margin-top:4px;min-height:2.7em}
.support-grp{margin-bottom:20px}
.support h2{font-size:23px}
.support-note{font-size:15px;margin-bottom:16px}
/* footer: a foot, not a second menu */
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 30px;padding:20px 0 0;border-top:1px solid rgba(255,253,248,.18)}
.foot-nav a{display:inline-flex;align-items:center;gap:9px;font-size:15.5px;color:#DCD8D0}
.foot-nav a:hover{color:#F0A98A}
.foot-nav .ico{width:1.2em;height:1.2em;color:#F0A98A}
.foot-end{border-top:1px solid rgba(255,253,248,.13);margin-top:20px}

.wordmark{white-space:nowrap}
.wordmark i{font-style:normal;color:var(--flag)}

/* tiles keep one constant width; the row distributes them across the container
   instead of clumping left */
.support-list{justify-content:space-between}
@media(min-width:1001px){.support-list{justify-content:start}}

/* the selection uses the whole column: lead as an image/text pair, the rest as
   full-width rows with the standfirst in a third track */
.pick--lead{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(20px,3vw,44px);align-items:center}
.pick--lead .ph{aspect-ratio:4/3}
.pick--lead .pb{padding-top:0}
.pick--lead h3{font-size:clamp(26px,2.9vw,40px)}
.pick--lead p{font-size:18px;max-width:30em}
.pmore{display:inline-block;margin-top:16px;font-size:14px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:4px}
.pick--lead:hover .pmore{color:var(--flag);border-color:var(--flag)}
.pick--row{grid-template-columns:150px minmax(0,1.15fr) minmax(0,1fr);gap:26px;align-items:center}
.pick--row h3{margin:0 0 7px}
.pd{font-size:16px;line-height:1.45;color:var(--muted);min-width:0}
@media(max-width:900px){
  .pick--lead{grid-template-columns:1fr}
  .pick--lead .pb{padding-top:16px}
  .pick--row{grid-template-columns:130px minmax(0,1fr)}
  .pd{display:none}
}
@media(max-width:520px){.pick--row{grid-template-columns:88px minmax(0,1fr);gap:15px}}

/* both figures in the side-by-side carry the same treatment and the same frame */
.two .fig--mat .in{padding:10px}
.two .fig--mat img{aspect-ratio:8/5;object-fit:cover;width:100%}
.two .fig-cap{min-height:3.4em}

/* the map is drawn into the band rather than pasted onto it */
.sig-m .map-slot{background:transparent;padding:0;box-shadow:none}
.sig-m .geo{height:clamp(460px,64vh,660px)}
.geo .land{fill:rgba(255,253,248,.13);stroke:rgba(255,253,248,.6);stroke-width:1.1}
.geo .lat{stroke:rgba(255,253,248,.2)}
.geo .lat-l{fill:rgba(255,253,248,.5);font-size:16px}
.geo .pin{fill:var(--flag)}
.geo .pin-r{stroke:rgba(255,253,248,.85);stroke-width:1.2;fill:none}
.sig-plot{padding-top:6px}
.pinlab{border-left-color:rgba(255,253,248,.45)}

.feed-main{min-width:0}
.feed-h{display:flex;gap:16px 34px;flex-wrap:wrap;align-items:flex-end;margin-bottom:26px}
.feed-h h2{font-size:clamp(28px,3.2vw,44px);line-height:1.02;flex:1 1 380px;max-width:22em;margin:0}
.support{min-width:0}

/* supporters: a full-width block below the feed */
.feed{grid-template-columns:minmax(0,1fr)!important}
.support{border-top:1px solid rgba(22,24,28,.22);margin-top:44px;padding-top:26px;max-width:none}
.support-list{justify-content:space-between}

/* the selection, overhauled: one photograph across the full column with its
   caption block sitting into it, two middleweight pieces, two quiet ones */
.sel{display:block}
.sel-lead{display:block;position:relative;color:var(--ink)}
.sel-im{display:block;aspect-ratio:21/9;overflow:hidden;background:var(--mat)}
.sel-im img{width:100%;height:100%;object-fit:cover}
.sel-cap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:8px clamp(24px,4vw,60px);align-items:end;
  position:relative;margin:-72px 0 0 0;width:calc(100% - clamp(24px,5vw,80px));
  background:var(--paper);padding:26px clamp(22px,3vw,40px) 4px 0}
.sel-cap .meta{grid-column:1/-1}
.sel-cap h3{font-size:clamp(28px,3.7vw,52px);line-height:.98;margin:10px 0 0;max-width:20em}
.sel-cap-b{display:block;padding-bottom:6px}
.sel-cap-b p{font-size:18px;line-height:1.48;color:var(--body);margin:0}
.sel-lead:hover h3{color:var(--accent)}
.pmore{display:inline-block;margin-top:14px;font-size:13.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:4px}
.sel-lead:hover .pmore{color:var(--flag);border-color:var(--flag)}
.sel-mid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,44px);margin-top:40px;
  padding-top:30px;border-top:1px solid rgba(22,24,28,.22)}
.pk{display:block;color:var(--ink);min-width:0}
.pk-im{display:block;overflow:hidden;background:var(--mat)}
.pk-im img{width:100%;height:100%;object-fit:cover}
.pk--mid .pk-im{aspect-ratio:16/10}
.pk--mid .pk-t{display:block;padding-top:15px}
.pk--mid h3{font-size:clamp(21px,2.2vw,28px);line-height:1.06;margin:9px 0 9px}
.pk--mid p{font-size:16.5px;line-height:1.45;color:var(--muted);margin:0}
.pk:hover h3{color:var(--accent)}
.sel-tail{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,44px);margin-top:30px;
  padding-top:22px;border-top:1px solid rgba(22,24,28,.12)}
.pk--tail{display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;align-items:center}
.pk--tail .pk-im{aspect-ratio:1/1}
.pk--tail .pk-t{display:block;min-width:0}
.pk--tail h3{font-size:19.5px;line-height:1.14;margin:7px 0 0}
@media(max-width:820px){
  .sel-cap{grid-template-columns:1fr;margin-top:-40px;width:calc(100% - 18px);padding-right:20px}
  .sel-im{aspect-ratio:3/2}
  .sel-mid,.sel-tail{grid-template-columns:1fr}
}

/* selection meta + caption sits cleanly under the photograph */
.sel .meta{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--quiet)}
.sel .meta .ico{width:1.15em;height:1.15em;color:var(--flag);flex:none}
.sel-cap{margin:0;width:100%;padding:20px 0 0;align-items:start}
.sel-cap h3{margin:12px 0 0}
.sel-cap-b{padding-bottom:0;padding-top:2px}

/* card titles in the text face — Instrument Serif is for display sizes only */
.pk--mid h3,.pk--tail h3{font-family:var(--text);font-weight:600;letter-spacing:-0.004em}
.pk--mid h3{font-size:clamp(20px,2vw,25px);line-height:1.18}
.pk--tail h3{font-size:18px;line-height:1.24}
/* section labels carry weight */
.sel .meta{font-family:var(--text);font-weight:600;font-size:12.5px;letter-spacing:.13em;color:var(--ink)}
.sel .meta .ico{width:1.3em;height:1.3em;color:var(--flag)}
.pk:hover .meta{color:var(--accent)}

/* how a photograph meets the page in the selection: a snow mat inside a hairline
   frame, with drawn corner marks from the stake vocabulary on the larger two */
.sel-im,.pk--mid .pk-im,.pk--tail .pk-im{aspect-ratio:auto;position:relative;
  background:var(--snow);border:1px solid rgba(22,24,28,.18);overflow:visible}
.sel-im{padding:11px}
.pk--mid .pk-im{padding:9px}
.pk--tail .pk-im{padding:6px}
.sel-im img,.pk--mid .pk-im img,.pk--tail .pk-im img{width:100%;height:auto;display:block;object-fit:cover}
.sel-im img{aspect-ratio:21/9}
.pk--mid .pk-im img{aspect-ratio:16/10}
.pk--tail .pk-im img{aspect-ratio:1/1}
.sel-im::before,.sel-im::after,.pk--mid .pk-im::before,.pk--mid .pk-im::after{
  content:"";position:absolute;width:20px;height:20px;border:1.5px solid var(--flag);pointer-events:none}
.sel-im::before,.pk--mid .pk-im::before{top:-4px;left:-4px;border-right:0;border-bottom:0}
.sel-im::after,.pk--mid .pk-im::after{bottom:-4px;right:-4px;border-left:0;border-top:0}
.sel-lead:hover .sel-im,.pk:hover .pk-im{border-color:rgba(22,24,28,.4)}
@media(max-width:820px){.sel-im img{aspect-ratio:3/2}}

/* keep the corner marks inside the frame so nothing clips at the container edge */
.sel-im::before,.pk--mid .pk-im::before{top:4px;left:4px}
.sel-im::after,.pk--mid .pk-im::after{bottom:4px;right:4px}

/* ---- article re-format: one generous column, no dead side band ---- */
article .wrap{max-width:1000px}
article .prose{font-size:19.5px;line-height:1.62}
article .prose>p,article .prose>h2,article .prose>h3,article .prose>ul,article .prose>ol,
article .prose>.note,article .prose>.blockquote,article .prose>.callout{max-width:none}
article .prose>.fig--mat,article .prose>.fig--plate{max-width:none;margin-left:0}
article .prose>.plate,article .prose>.pullquote{max-width:none}
/* figures and plates step out past the measure so the page has two widths */
@media(min-width:1080px){
  article .prose>.fig--bleed,article .prose>.plate{margin-inline:calc(-1 * clamp(20px,4vw,64px));
    width:calc(100% + 2 * clamp(20px,4vw,64px))}
}
article .prose .fig--bleed .fig-cap{max-width:none}
article .prose>h2{margin-top:2.3em}
article .prose>h2:first-child{margin-top:0}

/* an intersection between long runs of prose: hairline with three stake ticks */
.brk{display:flex;align-items:center;gap:18px;margin:2.4em 0 2.5em;color:var(--flag)}
.brk::before,.brk::after{content:"";flex:1 1 auto;height:1px;background:rgba(22,24,28,.22)}
.brk svg{width:52px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round}
.brk--off{justify-content:flex-start}
.brk--off::before{flex:0 0 0}
.brk--off::after{flex:1 1 auto}

.brk--off{gap:14px}
.brk--off::before{flex:0 0 46px}
.brk--off svg{width:34px}

/* mobile: the latitude ribbon cannot hold a label track beside it, so the map
   stands alone and its places list underneath in two columns */
@media(max-width:480px){
  .sig-plot{flex-direction:row;align-items:stretch;gap:0;justify-content:center}
  .sig-m .geo{height:430px}
  .sig-labs{flex:0 0 158px;min-width:0;margin-left:-1px}
  .pinlab{flex-direction:row;align-items:baseline;gap:6px;white-space:nowrap;padding-left:9px;line-height:1}
  .pinlab .pn{font-size:12.5px}
  .pinlab .pl{font-size:9.5px;letter-spacing:.04em}
}

/* mobile: every nav target reaches 44px (v2) */
@media(max-width:700px){
  .bar a{min-height:44px;display:inline-flex;align-items:center;padding-block:12px}
  .mast-browse{min-height:44px;display:inline-flex;align-items:center}
  .nrow-l a{min-height:38px;display:inline-flex;align-items:center}
}

@media(max-width:700px){
  .menu-l a{min-height:44px;padding-block:11px;box-sizing:border-box}
  .sub a,.subnav a,.nrow-l a,.foot-nav a{min-height:40px;display:inline-flex;align-items:center}
}

@media(max-width:700px){.submenu a{min-height:40px;display:inline-flex;align-items:center}}

/* the ribbon holds its own scale between phone and desktop, and the labels sit
   close enough in latitude that they need to stay short */
.pinlab .pn{font-size:17px;line-height:1}
.pinlab .pl{font-size:11.5px;letter-spacing:.07em;line-height:1}
@media(max-width:820px) and (min-width:481px){
  .sig-m .geo{height:clamp(520px,66vh,620px)}
  .sig-labs{flex:0 0 220px}
}

/* 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-mark-pad: the mark keeps the height Design declared AND the inset Design drew.
   border-box stops width:100%+padding overflowing the tile; the box grows by the
   vertical padding and border so the artwork is not shrunk to pay for the inset. */
.sponsor img,.sponsor-box img,.sp-logo img{box-sizing:border-box!important;height:60px!important;max-height:60px!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}

/* 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. */
.support-list .sponsor.sponsor img{box-sizing:border-box!important;padding:10px 16px!important}

/* op-mobile-svg: a <g> inside the SVG measures 2190px — the drawing is wider than its viewBox
   allows for, so it pushed the page out. The SVG is capped to its column and scales. */
@media (max-width:640px){
  .band svg{max-width:100%!important;height:auto!important}
}
/* ⚠️ THE PREVIOUS BLOCK DID NOTHING ON ITS OWN. A flex or grid item defaults to min-width:auto,
   which means it cannot shrink below its content's min-content width — so the scroll container
   kept being stretched to the child's own min-width (640px / 1400px / 560px) and overflow-x:auto
   had nothing to scroll. min-width:0 has to travel up the chain from the scroller to its
   formatting context, which is what actually lets the container narrow to the column. */
@media (max-width:640px){
  .plan-scroll,.alm-scroll,.waterband__fig,.map-figure,pre.tok,
  .plan-scroll *,.alm-scroll > *,
  figure,section,article,main,div[class*="scroll"],div[class*="pair"],div[class*="band"]{min-width:0!important}
  img,svg,table,pre,code,figure{max-width:100%!important}
}

/* op-nav-collapse: this nav printed 176px of stacked links at 390 before any content
   (5 links), and the build shipped no control to close it. A disclosure cannot be
   built from CSS alone — :hover and :focus-within are unreachable on touch until a link has
   already been tapped — so a hidden checkbox and its label were injected immediately before
   the nav, and the nav collapses against the checked state. Exactly the mechanism the builds
   that DO have a burger already use.
   Treatment "rule-flank", bold, seeded from the domain so 175 builds do not all ship the
   same hairline box in the same place; it inherits this build's font and colour, and where the
   nav's own parent has no inline padding (0px measured) the button carries the build's
   gutter (clamp(18px,4vw,44px)) so it cannot sit against the glass. The links are hidden,
   not removed: they stay in the markup. Desktop is untouched — every rule below is inside the
   phone breakpoint (940px here), where the button appears and the nav starts closed.
   Folded with the "max-height" technique and marked with the "chevron" icon — the mechanism
   is deliberately not identical across the fleet either. */
.menu-open{display:none}
@media (max-width:940px){
  .menu-open{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:auto;border:0;padding:10px 0;letter-spacing:.18em;margin-inline:clamp(18px,4vw,44px);margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}
  .menu-open::before,.menu-open::after{content:"";flex:1 1 auto;height:1px;background:currentColor;opacity:.4}
  .menu-open-bars{width:8px;height:8px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
  .menu{max-height:0;overflow:hidden;padding-block:0;border-top-width:0;border-bottom-width:0;transition:max-height .28s ease}
  .menu-open-c:checked ~ .menu{max-height:220vh;padding-block:revert;border-top-width:revert;border-bottom-width:revert}
  .menu-stick:has(> .menu-open){display:flow-root}
  .menu-open:not(:has(~ .menu)){display:none}
}

/* op-overflow-row: div.sig-labs overhung the viewport by 68px at 320 on
   index.html — width 158px reaching x=389, white-space:normal,
   min-width:0px, inside div.sig-plot (flex/nowrap,
   tracks none). Closed at the element that causes it, phone
   widths only. */
@media (max-width:640px){
  .sig-plot{flex-wrap:wrap}
  .sig-labs{min-width:0;max-width:100%}
}

/* op-money-columns: the supporters block ran one tile per row — 10 tiles,
   1414px at 390, 19% of the whole page. Two columns bring it to
   868px (39% shorter). Checked before writing: no new overflow, smallest mark still
   150px wide, longest blurb 3 lines, tile heights 109-176px.
   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.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.support-list), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .support-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:10px!important}
    .support-list > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .support-list > * *{min-width:0!important;max-width:100%}
    .support-list img,.support-list svg{max-width:100%;height:auto}
  .support-list .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-odd-tier-lead: .support-list (5 tiles), .support-list (5 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .support-list:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
  .support-list:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:681px){
  div.submenu > div.wrap{padding-left:max(0px, calc(max(var(--gut), 18px) - max(0px, (100vw - 1480px) / 2)));padding-right:max(0px, calc(max(var(--gut), 18px) - max(0px, (100vw - 1480px) / 2)))}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.pk.pk--mid > span.pk-im > img,
  a.pk.pk--tail > span.pk-im > img,
  a.sel-lead > span.sel-im > img,
  article > figure.fig--bleed > img,
  article.hero > figure.fig--bleed > img,
  div.prose > figure.fig--bleed > img,
  div.prose > figure.fig--inset > img,
  div.prose > figure.fig--plate > img,
  figure.fig--mat > div.in > img,
  main > figure.pagehero > img){height:auto}
/* op-img-dims:end */
@media (min-width:660px) and (max-width:899px){.support-list:has(> [data-partner]){grid-template-columns:repeat(2,minmax(0,268px))!important;justify-content:center!important;column-gap:var(--sp-gap,18px)!important}}