/* Blue Ridge Parkway 75 — Milepost
   Palette: ground/ink/accent/secondary/quiet
   Type: Chivo (display) · Literata (prose) · Chivo Mono (mileposts)
   Widths: prose measure · break-out · full bleed. Breakpoints continue above 1200. */

:root{
  --paper:#F2EFE7;      /* ground */
  --ink:#14181B;        /* ink */
  --azalea:#C63F10;     /* accent — saturated warm */
  --spruce:#0F5340;     /* secondary — saturated cool, ~140deg from accent */
  --haze:#D7DAD1;       /* quiet — mats, rules, panels */
  --quiet:#6A6F66;

  --prose:68ch;
  --wide:1240px;
  --gut:20px;
  --fs:18px;
  --fs-cap:15px;
  --fs-credit:13px;
  --disp:1;
  --marg:0px;           /* margin column for captions; 0 until large screens */
  --marggap:0px;
}
@media (min-width:700px){ :root{--gut:36px} }
@media (min-width:1000px){ :root{--gut:52px; --wide:1180px} }
@media (min-width:1200px){ :root{--gut:64px; --prose:72ch; --wide:1320px; --fs:19px} }
@media (min-width:1600px){ :root{--gut:88px; --prose:76ch; --wide:1500px; --fs:20px; --fs-cap:16px; --fs-credit:14px; --disp:1.08; --marg:300px; --marggap:44px} }
@media (min-width:2000px){ :root{--gut:120px; --prose:80ch; --wide:1800px; --fs:21px; --fs-cap:17px; --disp:1.18; --marg:380px; --marggap:56px} }
@media (min-width:2400px){ :root{--gut:160px; --prose:84ch; --wide:2060px; --fs:22px; --disp:1.3; --marg:440px} }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Literata,Georgia,"Times New Roman",serif;
  font-size:var(--fs); line-height:1.65; text-wrap:pretty;
}
img{max-width:100%; display:block}
a{color:var(--spruce); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--azalea)}
h1,h2,h3,h4{font-family:Chivo,system-ui,sans-serif; font-weight:900; letter-spacing:-0.025em; line-height:0.98; margin:0}
.mono{font-family:"Chivo Mono",ui-monospace,monospace}

.wrap{width:100%; max-width:var(--wide); margin-inline:auto; padding-inline:var(--gut)}
.prose{max-width:var(--prose); padding-inline:var(--gut); margin-inline:auto}
.bleed{width:100%}
.kicker{font-family:"Chivo Mono",ui-monospace,monospace; font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--azalea); margin:0}
.quiet{color:var(--quiet)}

/* ---------- masthead ---------- */
.masthead{background:var(--spruce); color:#EDF2EA}
.mast-top{display:flex; align-items:flex-end; justify-content:space-between; gap:28px 48px; flex-wrap:wrap; padding:clamp(18px,2.2vw,38px) var(--gut) 0}
.brand{display:flex; align-items:center; gap:clamp(14px,1.7vw,30px); text-decoration:none; color:inherit}
.brand svg{height:calc(clamp(21px,3.3vw,56px) * var(--disp) * 0.92 + 26px); width:auto; flex:none; overflow:visible; color:#8FBBA2}
.brand-name{display:block; white-space:nowrap; font-family:Chivo,sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:-0.035em; line-height:0.9; font-size:calc(clamp(21px,3.3vw,56px) * var(--disp))}
.brand-75{display:inline-block; font-family:"Chivo Mono",ui-monospace,monospace; font-weight:700; font-size:.86em; letter-spacing:-.02em; color:var(--spruce); background:#EDF2EA; padding:.04em .13em .07em; margin-left:.2em; vertical-align:-.005em}
.brand-sig{display:block; margin-top:10px; font-family:"Chivo Mono",monospace; font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:#9DC1AC}
.mast-line{margin:0 0 8px; max-width:36ch; font-size:var(--fs-cap); line-height:1.5; color:#B7D2C2}

.nav{margin-top:clamp(18px,2.4vw,38px); border-top:1px solid rgba(237,242,234,.26); padding-inline:var(--gut)}
.nav ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:0 clamp(22px,3.4vw,64px)}
.nav a{display:flex; align-items:center; gap:11px; padding:16px 0; color:#A9C8B6; text-decoration:none;
  font-family:Chivo,sans-serif; font-weight:700; font-size:clamp(12.5px,.95vw,15px); letter-spacing:0.15em; text-transform:uppercase; border-bottom:3px solid transparent}
.nav a:hover{color:#fff}
.nav a[aria-current]{color:#EDF2EA; border-bottom-color:var(--azalea)}
.nav svg{width:20px; height:20px; flex:none; color:#E8875A}
.nav a[aria-current] svg{color:var(--azalea)}
.nav a:hover svg{color:#F5A87F}

/* hero legibility */
.hero-plate{text-shadow:0 2px 26px rgba(6,12,8,.8), 0 1px 4px rgba(6,12,8,.65)}
.hero-cap .f-cap{color:var(--quiet); font-family:Literata,Georgia,serif; font-size:var(--fs-cap)}
.hero-cap .f-credit{color:var(--quiet); opacity:.8}

/* ---------- footer ---------- */
.foot{background:var(--spruce); color:#B7D2C2; padding:clamp(34px,4vw,72px) 0; margin-top:clamp(48px,6vw,110px)}
.foot .wrap{display:flex; flex-wrap:wrap; gap:26px 64px; justify-content:space-between; align-items:flex-start}
.foot p{margin:0; max-width:42ch; font-size:var(--fs-cap); line-height:1.5}
.foot nav{display:flex; flex-wrap:wrap; gap:10px 32px}
.foot a{color:#EDF2EA; font-family:Chivo,sans-serif; font-weight:700; font-size:13px; letter-spacing:0.13em; text-transform:uppercase; text-decoration:none}
.foot a:hover{color:var(--paper); text-decoration:underline}

/* ---------- figure system ---------- */
figure{margin:0}
.f-cap{font-family:Chivo,sans-serif; font-size:var(--fs-cap); line-height:1.45; margin:0; max-width:66ch}
.f-credit{display:block; font-family:"Chivo Mono",monospace; font-size:var(--fs-credit); letter-spacing:.02em; color:var(--quiet); margin-top:5px; max-width:66ch}
.f-capbox{padding-top:10px; border-top:2px solid var(--ink); margin-top:10px}
@media (min-width:1200px){
  .f-capbox{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 28px}
  .f-capbox .f-cap{flex:1 1 30ch}
  .f-capbox .f-credit{margin-top:0; flex:0 1 auto; text-align:right; max-width:44ch}
}

/* 1 — full-bleed band; caption sits in the margin column on large screens */
.fig-bleed{width:100%}
.fig-bleed img{width:100%; height:clamp(280px,54vw,760px); object-fit:cover}
.fig-bleed .f-capbox{max-width:var(--wide); margin-inline:auto; padding-inline:var(--gut)}

/* 2 — mat: photograph sits on a quiet panel with an inset hairline */
.fig-mat{background:var(--haze); padding:clamp(14px,1.6vw,30px)}
.fig-mat img{width:100%; outline:1px solid rgba(20,24,27,.32); outline-offset:-1px}
.fig-mat .f-capbox{border-top-color:rgba(20,24,27,.45)}

/* 3 — break-out: wider than the prose measure, hangs left */
.fig-break{width:100%; max-width:var(--wide); margin:clamp(30px,3.4vw,60px) auto; padding-inline:var(--gut)}
.fig-break img{width:100%; aspect-ratio:16/9; object-fit:cover; border-left:6px solid var(--azalea)}

/* 4 — inset: small, in the column, prose beside it on desktop */
.fig-inset{float:none; width:100%; margin:24px 0}
@media (min-width:1000px){
  .fig-inset{float:right; width:300px; margin:6px 0 20px 34px; shape-outside:margin-box}
}
@media (min-width:1600px){ .fig-inset{width:360px; margin-right:calc(-1 * var(--marggap))} }
.fig-inset img{width:100%; aspect-ratio:4/5; object-fit:cover}
.fig-inset .f-capbox{border-top-width:1px}

/* 5 — plate strip */
.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:clamp(10px,1vw,18px)}
.gallery figure img{width:100%; aspect-ratio:1; object-fit:cover}
.gallery figcaption{font-family:"Chivo Mono",monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--quiet); margin-top:7px}

.article-figure img{width:100%}
.article-figure figcaption{font-family:Chivo,sans-serif; font-size:var(--fs-cap); line-height:1.45; padding-top:10px; margin-top:10px; border-top:2px solid var(--ink)}

/* ---------- homepage ---------- */
.hero{position:relative}
.hero img{width:100%; height:min(84vh,880px); min-height:400px; object-fit:cover}
.hero-plate{position:absolute; inset:auto 0 0 0; pointer-events:none;
  background:linear-gradient(to top,rgba(6,12,8,.93) 12%,rgba(6,12,8,.62) 48%,rgba(6,12,8,.16) 78%,transparent);
  padding:0 var(--gut) clamp(30px,3.6vw,66px)}
.hero-plate .inner{max-width:var(--wide); margin-inline:auto}
.hero h1{color:#F5F3ED; max-width:20ch; font-size:calc(clamp(34px,5vw,84px) * var(--disp)); line-height:.92; text-wrap:balance}
.hero p{margin:clamp(14px,1.5vw,26px) 0 0; max-width:54ch; color:#D5DBD1; font-size:calc(var(--fs) * 1.04)}
.hero a{color:#F0A183; pointer-events:auto}

.band{padding:clamp(46px,5.5vw,104px) 0}
.band-tight{padding:clamp(30px,3.4vw,58px) 0}
.band-dark{background:var(--ink); color:#ECEEE9}
.band-dark h2,.band-dark h3{color:#F3F5F0}
.band-dark .f-cap{color:#C6CAC1}
.band-dark .f-credit{color:#868C81}
.band-dark .f-capbox{border-top-color:#4B5148}
.band-dark a{color:#EFA285}
.band-green{background:var(--spruce); color:#E6EEE8}
.band-haze{background:var(--haze)}

.statement{font-family:Chivo,sans-serif; font-weight:900; letter-spacing:-0.03em; line-height:1.02;
  font-size:calc(clamp(24px,3.1vw,54px) * var(--disp)); max-width:26ch; margin:0}
.h-sec{font-size:calc(clamp(24px,2.5vw,42px) * var(--disp)); max-width:24ch}
.h-lead{font-size:calc(clamp(28px,3.4vw,60px) * var(--disp)); max-width:22ch; line-height:.96}

.split{display:grid; grid-template-columns:1fr; gap:clamp(24px,2.8vw,52px)}
@media (min-width:1000px){ .split{grid-template-columns:1.55fr 1fr; align-items:end} }
@media (min-width:1600px){ .split{grid-template-columns:1.75fr 1fr} }
.split-even{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:clamp(22px,2.4vw,44px)}

/* elevation strip (drawn device) */
.profile-strip svg{display:block; width:100%; height:clamp(120px,14vw,240px); overflow:visible}
.profile-keys{display:flex; flex-wrap:wrap; gap:6px 40px; margin-top:12px;
  font-family:"Chivo Mono",monospace; font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--quiet)}
.profile-keys .hot{color:var(--azalea)}

/* section teaser */
.teaser{display:flex; flex-direction:column; height:100%}
.teaser img{width:100%; aspect-ratio:3/2; object-fit:cover}
.teaser h3{margin:14px 0 0; font-size:calc(clamp(19px,1.5vw,26px) * var(--disp)); line-height:1.05}
.teaser p{margin:9px 0 0; font-size:var(--fs-cap); line-height:1.5; color:#41463F}
.teaser .go{margin-top:auto; padding-top:14px; font-family:Chivo,sans-serif; font-weight:700; font-size:13px; letter-spacing:.13em; text-transform:uppercase}
.sec-tag{display:flex; align-items:center; gap:8px; font-family:"Chivo Mono",monospace; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--azalea)}
.sec-tag svg{width:18px; height:18px; flex:none}

/* map */
.map-figure{width:100%}
.map-frame{background:var(--haze); border-top:2px solid var(--ink); border-bottom:2px solid var(--ink)}
.map-frame svg{display:block; width:100%; height:auto}
.map-slot{min-height:320px}

/* ---------- supporters ---------- */
.supporters .sp-grid{display:grid; grid-template-columns:repeat(auto-fit,270px); gap:clamp(14px,1.4vw,24px); justify-content:start}
.supporters .sp-roll{display:grid; grid-template-columns:repeat(auto-fit,270px); gap:clamp(14px,1.4vw,24px); justify-content:start; margin-top:clamp(14px,1.4vw,24px)}
.sponsor{display:flex; flex-direction:column; width:270px; text-decoration:none; color:inherit; background:transparent}
.sponsor img{width:100%; height:58px; max-height:58px; object-fit:contain; background:var(--ink); padding:9px 14px}
.sponsor .sponsor-name{display:block; margin-top:9px; font-family:Chivo,sans-serif; font-weight:700; font-size:14px; letter-spacing:.04em}
.sponsor .sponsor-blurb{display:block; margin-top:5px; font-size:13.5px; line-height:1.45; color:var(--quiet)}
.sponsor:hover .sponsor-name{color:var(--azalea)}

/* ---------- article ---------- */
.art-head{padding:clamp(28px,3.4vw,62px) 0 clamp(28px,3.2vw,56px)}
.art-head h1{font-size:calc(clamp(32px,4.6vw,84px) * var(--disp)); max-width:19ch; line-height:.93; margin-top:12px}
.lead{font-size:calc(var(--fs) * 1.16); line-height:1.5; max-width:52ch; margin:clamp(16px,1.8vw,28px) 0 0; font-weight:500}
.art-body{font-size:var(--fs); line-height:1.72}
.art-body > p{margin:0 0 1.15em}
.art-body h2{font-size:calc(clamp(22px,2.1vw,34px) * var(--disp)); margin:1.7em 0 .55em}
.art-body h3{font-size:calc(clamp(18px,1.5vw,24px) * var(--disp)); margin:1.5em 0 .45em}
.art-body ul,.art-body ol{padding-left:1.15em; margin:0 0 1.15em}
.art-body li{margin-bottom:.4em}

.pullquote{margin:clamp(28px,3vw,52px) 0; padding:0 0 0 clamp(16px,1.6vw,28px); border-left:6px solid var(--azalea)}
.pullquote p{margin:0; font-family:Chivo,sans-serif; font-weight:700; letter-spacing:-.02em; line-height:1.14; font-size:calc(clamp(21px,2vw,32px) * var(--disp))}
.blockquote{margin:clamp(24px,2.6vw,44px) 0; padding:clamp(16px,1.6vw,26px); background:var(--haze)}
.blockquote p{margin:0; font-size:calc(var(--fs) * 1.04)}
.blockquote cite{display:block; margin-top:10px; font-style:normal; font-family:"Chivo Mono",monospace; font-size:13px; color:var(--quiet)}
.callout{margin:clamp(24px,2.6vw,44px) 0; padding:clamp(16px,1.7vw,28px); background:var(--spruce); color:#E7EFE9}
.callout p{margin:0; font-size:calc(var(--fs) * 1.02)}
.note{font-size:var(--fs-cap); line-height:1.55; color:var(--quiet); border-left:2px solid var(--haze); padding-left:14px; margin:1.2em 0}

/* notes-for-design material: full-bleed interruptions, not a side rail */
.notes-band{background:var(--haze); padding:clamp(28px,3.2vw,58px) 0; margin:clamp(34px,3.6vw,66px) 0}
.notes-band.dark{background:var(--ink); color:#ECEEE9}
.notes-band.dark h2{color:#F3F5F0}
.notes-band.dark .t-what{color:#C6CAC1}
.notes-band.dark .timeline li{border-top-color:#4B5148}
.notes-band h2{font-size:calc(clamp(19px,1.7vw,28px) * var(--disp)); margin:0 0 clamp(16px,1.6vw,26px)}

.timeline{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:0}
@media (min-width:900px){ .timeline{grid-template-columns:repeat(2,1fr); column-gap:clamp(24px,2.6vw,52px)} }
@media (min-width:1600px){ .timeline{grid-template-columns:repeat(3,1fr)} }
.timeline li{display:grid; grid-template-columns:1fr; gap:2px; padding:12px 0; border-top:1px solid rgba(20,24,27,.28)}
@media (min-width:600px){ .timeline li{grid-template-columns:minmax(90px,auto) 1fr; gap:4px 20px} }
.t-when{font-family:"Chivo Mono",monospace; font-size:13px; letter-spacing:.06em; color:var(--azalea); text-transform:uppercase}
.t-what{font-size:var(--fs-cap); line-height:1.5}

.statrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:clamp(14px,1.5vw,26px)}
.statblock{display:flex; flex-direction:column; border-top:3px solid var(--azalea); padding-top:10px}
.stat-num{font-family:Chivo,sans-serif; font-weight:900; letter-spacing:-.035em; line-height:.9; font-size:calc(clamp(28px,2.6vw,48px) * var(--disp))}
.stat-label{margin-top:8px; font-size:var(--fs-cap); line-height:1.4; color:#41463F}
.notes-band.dark .stat-label{color:#C6CAC1}

.factlist{list-style:none; margin:0; padding:0; columns:1; column-gap:clamp(24px,2.6vw,52px)}
@media (min-width:900px){ .factlist{columns:2} }
@media (min-width:1600px){ .factlist{columns:3} }
.factlist li{break-inside:avoid; padding:11px 0; border-top:1px solid rgba(20,24,27,.28); font-size:var(--fs-cap); line-height:1.5}
.factlist li b{font-family:Chivo,sans-serif; font-weight:700; display:block}
.notes-band.dark .factlist li{border-top-color:#4B5148}

/* tables */
.datatable,.versus{width:100%; border-collapse:collapse; font-size:var(--fs-cap); margin:1.4em 0}
.datatable th,.versus th{text-align:left; font-family:Chivo,sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; border-bottom:2px solid var(--ink); padding:9px 12px 9px 0}
.datatable td,.versus td{padding:10px 12px 10px 0; border-bottom:1px solid rgba(20,24,27,.2); vertical-align:top}

/* cards / references */
.profile-grid,.org-grid,.further-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:clamp(14px,1.5vw,26px)}
.profile-card{display:flex; flex-direction:column; background:var(--haze); padding:clamp(14px,1.4vw,22px)}
.profile-card .p-photo{width:100%; aspect-ratio:1; object-fit:cover; margin-bottom:12px}
.profile-card h3{font-size:calc(clamp(17px,1.3vw,22px) * var(--disp))}
.p-role{margin:5px 0 9px; font-family:"Chivo Mono",monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--azalea)}
.profile-card p{font-size:var(--fs-cap); line-height:1.5; margin:0 0 .7em}
.p-links{margin-top:auto}
.org-card{display:flex; flex-direction:column; gap:5px; padding:14px; border:1px solid rgba(20,24,27,.28); text-decoration:none; color:inherit}
.org-logo{height:34px; width:auto; object-fit:contain}
.org-name{font-family:Chivo,sans-serif; font-weight:700}
.org-host{font-family:"Chivo Mono",monospace; font-size:12px; color:var(--quiet)}
.entity-ref{white-space:nowrap}
.further-grid a{display:flex; flex-direction:column; gap:6px; text-decoration:none; color:inherit; border-top:3px solid var(--ink); padding-top:12px; font-family:Chivo,sans-serif; font-weight:700; font-size:calc(var(--fs) * .95); line-height:1.22}
.further-grid a:hover{border-top-color:var(--azalea); color:var(--azalea)}
.related-links{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:16px 40px}
.related-links a{font-family:Chivo,sans-serif; font-weight:700; font-size:calc(var(--fs) * .95); line-height:1.25}

/* category + archive lists */
.cat-list{list-style:none; margin:0; padding:0}
.cat-list li{border-top:1px solid rgba(20,24,27,.26)}
.cat-list a{display:grid; grid-template-columns:1fr; gap:4px; padding:16px 0; text-decoration:none; color:inherit}
@media (min-width:900px){ .cat-list a{grid-template-columns:minmax(0,22ch) minmax(0,1fr); gap:4px 40px; align-items:baseline} }
@media (min-width:1600px){ .cat-list a{grid-template-columns:minmax(0,26ch) minmax(0,1fr) 12ch} }
.cat-list .c-title{font-family:Chivo,sans-serif; font-weight:900; letter-spacing:-.02em; font-size:calc(var(--fs) * 1.02); line-height:1.16}
.cat-list .c-brief{font-size:var(--fs-cap); line-height:1.5; color:#41463F}
.cat-list .c-sec{font-family:"Chivo Mono",monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--quiet)}
.cat-list a:hover .c-title{color:var(--azalea)}

.hub-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:clamp(22px,2.4vw,44px)}

.pill{display:inline-flex; align-items:center; gap:8px; font-family:Chivo,sans-serif; font-weight:700; font-size:13px; letter-spacing:.13em; text-transform:uppercase; text-decoration:none}
.pill svg{width:17px; height:17px}

.crumb{font-family:"Chivo Mono",monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--quiet)}
.crumb a{color:var(--quiet); text-decoration:none}
.crumb a:hover{color:var(--azalea)}


/* --- revisions --- */
.statement::before{content:""; display:block; width:clamp(56px,6.5vw,132px); height:9px; background:var(--azalea); margin-bottom:clamp(14px,1.7vw,28px)}
.band-dark .statement::before{background:var(--azalea)}

.profile-strip svg{height:auto; aspect-ratio:1400/376}

.f-capbox.tight{padding-top:8px; margin-top:8px; border-top-width:1px}
.f-capbox.tight .f-cap{font-size:calc(var(--fs-cap) * .94); line-height:1.38; max-width:48ch}
.f-capbox.tight .f-credit{font-size:12px}

/* teaser images unified to one grade */
.teaser .ph{display:block; background:var(--spruce); overflow:hidden}
.teaser .ph{background:var(--haze)}
.teaser .ph img{aspect-ratio:3/2; object-fit:cover; filter:grayscale(1) sepia(.14) contrast(1.07) brightness(1.03); transition:filter .25s}
.teaser:hover .ph img{filter:grayscale(.1) contrast(1.03)}

/* map — capped, and paired with a column of its own */
.map-figure{display:grid; grid-template-columns:1fr; gap:clamp(18px,2vw,34px)}
@media (min-width:1100px){ .map-figure{grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr); align-items:start} }
@media (min-width:1600px){ .map-figure{grid-template-columns:minmax(0,2fr) minmax(300px,1fr)} }
.map-frame svg{max-height:clamp(300px,52vh,560px); width:100%; height:auto}
.map-side{border-top:2px solid var(--ink); padding-top:12px}
.map-side .f-credit{margin-top:6px}

/* supporters — the tile is a constant width, but the constant steps up with the screen */
:root{--sp:270px}
@media (min-width:1600px){ :root{--sp:330px} }
@media (min-width:2000px){ :root{--sp:400px} }
.supporters .sp-grid,.supporters .sp-roll{grid-template-columns:repeat(auto-fit,var(--sp)); justify-content:space-between}
.sponsor{width:var(--sp)}
@media (min-width:1600px){ .sponsor img{height:70px; max-height:70px} }

/* footer identity */
.foot-id{display:flex; align-items:flex-start; gap:18px; max-width:52ch}
.foot-mark{flex:none; width:clamp(42px,3.4vw,64px); color:#8FBBA2}
.foot-mark svg{width:100%; height:auto; display:block}


/* section kickers as chips */
.kicker.sec-tag{display:inline-flex; align-items:center; gap:9px; background:var(--azalea); color:#FDF4EF;
  padding:8px 13px 9px; font-size:12.5px; letter-spacing:.17em; line-height:1}
.kicker.sec-tag svg{width:17px; height:17px}
.band-dark .kicker.sec-tag,.art-head .kicker.sec-tag{color:#FDF4EF}

/* hub: one compact row */
.hub-grid{gap:clamp(14px,1.3vw,24px)}
@media (min-width:1100px){ .hub-grid{grid-template-columns:repeat(5,minmax(0,1fr))} }
.hub-grid .teaser p{display:none}
.hub-grid .teaser .ph img{aspect-ratio:4/3}
.hub-grid .teaser h3{margin-top:9px; font-size:calc(clamp(16px,1.15vw,21px) * var(--disp)); line-height:1.08}
.hub-grid .teaser .go{padding-top:10px; font-size:12px}
.hub-grid .sec-tag{margin-top:10px; font-size:11px; letter-spacing:.14em}
.hub-grid .sec-tag svg{width:15px; height:15px}


/* --- map band: the homepage signature --- */
.map-intro{max-width:64ch; margin:clamp(14px,1.5vw,24px) 0 clamp(22px,2.4vw,40px); font-size:calc(var(--fs) * 1.02)}
.map-frame{border:2px solid var(--ink); border-top:2px solid var(--ink)}
.mpin{cursor:pointer}
.mpin-halo{fill:none; stroke:#C63F10; stroke-width:1.6; opacity:.4}
.mpin-dot{fill:#C63F10; stroke:#F2EFE7; stroke-width:2}
.mpin-num{font-family:Chivo, sans-serif; font-weight:900; font-size:17px; fill:#FDF4EF}
.mpin:hover .mpin-dot,.mpin:focus .mpin-dot{fill:var(--ink)}
.mpin:hover .mpin-halo,.mpin:focus .mpin-halo{opacity:1; stroke:var(--ink); stroke-width:2.4}

.map-legend-h{margin:0 0 14px; font-family:Chivo,sans-serif; font-weight:700; font-size:var(--fs-cap); letter-spacing:.02em}
.map-legend{list-style:none; margin:0 0 16px; padding:0; counter-reset:none}
.map-legend li{border-top:1px solid rgba(20,24,27,.26)}
.map-legend li:last-child{border-bottom:1px solid rgba(20,24,27,.26)}
.map-legend a{display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:2px 12px; align-items:baseline;
  padding:10px 0; text-decoration:none; color:inherit}
.ml-n{grid-row:span 2; align-self:center; width:24px; height:24px; border-radius:50%; background:var(--azalea); color:#FDF4EF;
  font-family:Chivo,sans-serif; font-weight:900; font-size:13px; display:flex; align-items:center; justify-content:center}
.ml-name{font-family:Chivo,sans-serif; font-weight:700; font-size:calc(var(--fs) * .95); line-height:1.15}
.ml-mp{font-family:"Chivo Mono",monospace; font-size:12px; color:var(--azalea); text-align:right; white-space:nowrap}
.ml-sec{grid-column:2 / 4; font-family:"Chivo Mono",monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--quiet)}
.map-legend a:hover{background:rgba(198,63,16,.07)}
.map-legend a:hover .ml-name{color:var(--azalea)}
.map-legend a:hover .ml-n{background:var(--ink)}


/* --- supporters: tighter, four to a row --- */
:root{--sp:250px}
@media (min-width:1600px){ :root{--sp:280px} }
@media (min-width:2000px){ :root{--sp:340px} }
@media (min-width:2400px){ :root{--sp:400px} }
.supporters{padding:clamp(32px,3.4vw,60px) 0}
.supporters .sp-grid,.supporters .sp-roll{justify-content:start; gap:clamp(12px,1.2vw,22px)}
.supporters .sp-roll{margin-top:clamp(18px,1.8vw,30px); padding-top:clamp(18px,1.8vw,30px); border-top:1px solid rgba(20,24,27,.22)}
.supporters h2{margin-top:10px}
.supporters .sp-grid{margin-top:clamp(16px,1.8vw,28px) !important}
.sponsor img{height:52px; max-height:52px}
@media (min-width:1600px){ .sponsor img{height:60px; max-height:60px} }

/* --- archive strip --- */
.archive-strip{padding:0 0 clamp(34px,4vw,72px)}
.archive-strip .wrap{border-top:2px solid var(--ink); padding-top:clamp(16px,1.8vw,28px);
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:14px 40px}
.archive-strip .statement{font-size:calc(clamp(19px,2vw,34px) * var(--disp)); max-width:34ch; margin:0}
.archive-strip .statement::before{width:clamp(44px,4vw,86px); height:7px; margin-bottom:clamp(10px,1.1vw,18px)}
.archive-strip .as-go{margin:0}

/* --- footer uses the row --- */
.foot{padding:clamp(28px,3.2vw,58px) 0}
.foot .wrap{display:grid; grid-template-columns:1fr; gap:26px; align-items:start; justify-content:initial}
@media (min-width:900px){ .foot .wrap{grid-template-columns:minmax(260px,30%) minmax(0,1fr); gap:0 clamp(40px,6vw,120px)} }
.foot-id{max-width:none}
.foot-sig{margin:10px 0 0 !important; font-family:"Chivo Mono",monospace; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#8FBBA2}
.foot nav{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 28px; border-top:1px solid rgba(237,242,234,.24); padding-top:16px}
@media (min-width:900px){ .foot nav{grid-template-columns:repeat(3,minmax(0,1fr)); border-top:none; padding-top:0} }
@media (min-width:1400px){ .foot nav{grid-template-columns:repeat(4,minmax(0,1fr))} }


.foot-id{display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px clamp(14px,1.4vw,22px); align-items:start}
.foot-mark{grid-row:span 2; align-self:start; margin-top:3px}
.foot .wrap p{max-width:34ch}
.foot-sig{grid-column:2}


/* supporters fill the row: fixed track COUNT (never a stretching auto-fit row) */
.supporters .sp-grid,.supporters .sp-roll{grid-template-columns:repeat(2,minmax(0,1fr)); justify-content:stretch}
@media (min-width:700px){ .supporters .sp-grid,.supporters .sp-roll{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1000px){ .supporters .sp-grid,.supporters .sp-roll{grid-template-columns:repeat(4,minmax(0,1fr))} }
.sponsor{width:auto}
.sponsor img{height:64px; max-height:64px}
@media (min-width:1600px){ .sponsor img{height:80px; max-height:80px} }
@media (min-width:2000px){ .sponsor img{height:96px; max-height:96px} }
.sponsor .sponsor-name{font-size:15px}
.sponsor .sponsor-blurb{font-size:14.5px}


/* close the gap above the footer */
.foot{margin-top:0}
.archive-strip{padding-bottom:clamp(26px,3vw,52px)}

/* footer identity: one comfortable measure, signature on one line */
@media (min-width:900px){ .foot .wrap{grid-template-columns:minmax(340px,38%) minmax(0,1fr)} }
.foot .wrap p{max-width:48ch}
.foot-sig{white-space:nowrap; margin-top:12px !important}
.foot-mark{width:clamp(38px,2.8vw,54px)}


/* ---------- mobile fixes ---------- */
@media (max-width:899px){
  .foot-sig{white-space:normal}
}
.entity-ref{white-space:normal; overflow-wrap:anywhere}
.foot-id{overflow-wrap:anywhere}

/* nothing below the 12px floor */
.gallery figcaption{font-size:12px}
.ml-sec{font-size:12px}
.hub-grid .sec-tag{font-size:12px}
.org-host,.p-role,.blockquote cite{font-size:12.5px}

/* comfortable tap targets and less cramped chrome on phones */
@media (max-width:699px){
  .nav ul{justify-content:flex-start; gap:0 26px}
  .nav a{padding:15px 0; min-height:48px}
  .cat-list a{padding:18px 0}
  .map-legend a{padding:13px 0}
  .foot nav a{display:inline-flex; align-items:center; min-height:44px}
  .pill{min-height:44px; padding:10px 0}
  .hero img{height:min(72vh,560px)}
  .hero h1{font-size:calc(clamp(30px,8.4vw,52px) * var(--disp))}
  .statement{font-size:calc(clamp(22px,6.4vw,38px) * var(--disp))}
  .archive-strip .wrap{gap:16px}
}


/* credit is metadata: it uses the full caption box, never the prose measure */
.f-credit{max-width:none; margin-top:7px}
.f-capbox .f-cap{max-width:72ch}


/* --- notes bands: one continuous block, one aligned rhythm --- */
.notes-band + .notes-band{margin-top:calc(-1 * clamp(34px,3.6vw,66px)); padding-top:0}
.notes-band + .notes-band > .wrap{border-top:1px solid rgba(20,24,27,.28); padding-top:clamp(26px,3vw,52px)}
.notes-band.dark + .notes-band.dark > .wrap{border-top-color:#4B5148}

/* dates stack above their text so every row shares one edge */
.timeline li{grid-template-columns:1fr !important; gap:4px; padding:14px 0}
.t-when{font-size:12px; letter-spacing:.14em}
.t-what{max-width:44ch}


/* --- notes bands: tracks follow the item count, block sized to its content --- */
.notes-band{padding:clamp(22px,2.4vw,40px) 0; margin:clamp(28px,3vw,52px) 0}
.notes-band + .notes-band{margin-top:calc(-1 * clamp(28px,3vw,52px))}
.notes-band + .notes-band > .wrap{padding-top:clamp(20px,2.2vw,36px)}
.notes-band h2{margin-bottom:clamp(12px,1.2vw,20px)}

.factlist,.timeline{display:grid !important; columns:auto !important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:0 clamp(20px,2.2vw,44px)}
.factlist li,.timeline li{padding:11px 0}
.timeline li{gap:3px}
.t-what,.factlist li{max-width:40ch}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

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

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

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
.sponsor.sponsor{justify-content:center!important}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}
/* the mobile un-clamp is retired: the operator asked for "2-3 rows max" on phones, which is
   what the desktop rule above already does — so mobile simply keeps it. */
@media (max-width:640px){.sponsor.sponsor .sponsor-blurb{-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}}

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* sp-text-contrast: sponsor copy measured against its OWN ground as a WCAG contrast RATIO, not as a
   luminance subtraction. The subtraction passed capitanalatriste's blurbs at a 75-point gap
   while they sat at 2.8:1 and could not be read. Bar is 4.5:1 for body copy, 3:1 for large or
   bold; opacity is folded in, because it compounds down the tree and computed colour ignores
   it. The lift keeps Design's hue and saturation and moves lightness only, by the smallest
   step that clears the bar, so a warm blurb on near-black stays warm. Colour only — size,
   weight, family and spacing are exactly as delivered. */
.sp-brand.sp-brand{color:rgb(104,109,100)!important;opacity:1!important}
.sponsor-blurb.sponsor-blurb{color:rgb(104,109,100)!important;opacity:1!important}

/* op-nav-collapse: this nav printed 162px of stacked links at 390 before any content
   (6 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 "filled-soft", 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 (20px) 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 (900px here), where the button appears and the nav starts closed.
   Folded with the "display" technique and marked with the "chevron" icon — the mechanism
   is deliberately not identical across the fleet either. */
.menu-switch{display:none}
@media (max-width:900px){
  .menu-switch{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:fit-content;margin-inline:auto;justify-self:center;border:0;border-radius:2px;padding:12px 20px;background:color-mix(in srgb, currentColor 14%, transparent);margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .menu-switch-bars{width:8px;height:8px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
  .nav{display:none}
  .menu-switch-c:checked ~ .nav{display:block}
  .masthead:has(> .menu-switch){display:flow-root}
  .menu-switch:not(:has(~ .nav)){display:none}
}

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

/* op-hover-pad */
.map-legend a{padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.teaser > span.ph > img,
  article > figure.fig-bleed > img,
  body > figure.fig-bleed > img,
  div.art-body > figure.fig-break > img,
  div.gallery > figure > img,
  div.prose > figure.fig-inset > img,
  div.split.wrap > figure > img,
  div.wrap > figure.fig-mat > img,
  main > section.hero > img){height:auto}
/* op-img-dims:end */
@media (min-width:984px) and (max-width:1439px){.sp-grid.sp-grid:has(> [data-partner]){grid-template-columns:repeat(auto-fit,minmax(min(221px,calc(50% - 6px)),1fr))!important;justify-content:stretch!important}.sp-grid.sp-grid > [data-partner]{width:auto!important;max-width:none!important}}