/* unicamping.com — Italy measures the van
   Palette: 5 members, each with a job. Two saturated members 185° apart in hue. */
:root{
  --ground:#fbf7f0;   /* paper ground */
  --ink:#14181a;      /* text and rules */
  --accent:#b5122e;   /* signal red — bands, numbers, links */
  --secondary:#0f7f8f;/* teal — the restricted-zone material, mats, panels */
  --edge:#cfc7b7;     /* limestone hairline */
  --muted:#4a4741;    /* secondary text */
  --panel:#f3ede0;    /* raised panel on the ground */
  --dark:#14181a;     /* logo ground / footer */
  --measure:70ch;
  --pad:clamp(20px,4vw,44px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font:400 17px/1.55 Manrope,system-ui,-apple-system,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;text-wrap:pretty;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:-.005em;margin:0}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink)}
.ico{width:1.35em;height:1.35em;flex:none;vertical-align:-.28em}
.kicker{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:var(--ground);padding:8px 14px;z-index:200}

/* ---------- masthead + weighted-split nav ---------- */
.masthead{border-bottom:2px solid var(--ink);background:var(--ground)}
.mast-grid{display:grid;grid-template-columns:minmax(320px,34%) minmax(0,1fr)}
.brand-cell{display:flex;align-items:center;gap:20px;padding:24px var(--pad) 20px;border-right:1px solid var(--edge)}
.brand-mark{flex:none;margin-bottom:6px}
.wordmark{display:block;font-family:Anton,Impact,sans-serif;text-transform:uppercase;font-size:clamp(30px,3.5vw,54px);line-height:.9;color:var(--ink);white-space:nowrap;letter-spacing:-.01em}
.wm-a{color:#0b7a3f;margin-right:.06em}
.wm-b{color:#b5122e}
.wordmark:hover .wm-a,.wordmark:hover .wm-b{color:var(--ink)}
.brand-badge{flex:none;border-radius:7px}
.wordmark:hover{color:var(--accent)}
.tagline{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:11px;max-width:36ch}
.nav{display:grid;grid-template-columns:1.3fr 1.05fr 1fr 1.15fr}
.nav-col{padding:22px 16px 20px;border-right:1px solid var(--edge)}
.nav-col:last-child{border-right:0}
.nav-col.tint{background:var(--panel)}
.nav-head{display:flex;align-items:center;gap:11px;font-family:Anton,Impact,sans-serif;text-transform:uppercase;font-size:18px;line-height:1.04;color:var(--ink);margin-bottom:14px;padding-bottom:11px;border-bottom:1px solid var(--edge)}
.nav-head .ico{width:30px;height:30px}
.nav-head:hover .ico{color:var(--accent)}
.nav-head:hover{color:var(--accent)}
.nav-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.nav-list{gap:2px}
.nav-list a{color:var(--muted);font-size:15px;line-height:1.25;display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:center;padding:6px 0}
.nav-ico{width:21px;height:21px;flex:none;color:var(--accent);opacity:.85}
.nav-list a:hover .nav-ico{opacity:1;color:var(--ink)}
.nav-list a:hover{color:var(--accent)}
.nav-foot{border-top:1px solid var(--edge);display:flex;flex-wrap:wrap;gap:6px 26px;padding:9px var(--pad);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.nav-foot a{color:var(--muted)}
.nav-foot a:hover{color:var(--accent)}

/* ---------- generic bands ---------- */
.band{border-bottom:2px solid var(--ink)}
.band.hair{border-bottom:1px solid var(--edge)}
.inner{padding:clamp(34px,4vw,58px) var(--pad)}
.band.teal{background:var(--secondary);color:var(--ground);border-bottom:0}
.band.teal .kicker,.band.teal a{color:rgba(251,247,240,.78)}
.band.teal h2,.band.teal a:hover{color:var(--ground)}
.band.red{background:var(--accent);color:var(--ground);border-bottom:0}
.band.red .kicker{color:rgba(251,247,240,.72)}
.band.dark{background:var(--dark);color:var(--ground);border-bottom:0}

/* ---------- homepage lead ---------- */
.lead-plate{position:relative;background:var(--edge)}
.lead-plate img{width:100%;height:min(78vh,780px);object-fit:cover}
.plate-note{position:absolute;left:0;bottom:34px;max-width:min(600px,86vw);background:var(--accent);color:var(--ground);padding:18px clamp(18px,3vw,28px) 20px}
.plate-note .kicker{color:rgba(251,247,240,.75);margin-bottom:8px;display:block}
.plate-note p{margin:0;font-size:clamp(16px,1.5vw,20px);line-height:1.35;font-weight:500}
.lead-copy{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);padding:clamp(34px,4vw,52px) var(--pad)}
.lead-copy h1{font-size:clamp(38px,5.6vw,92px);line-height:.9}
.lead-copy h1 a{color:var(--ink)}
.lead-copy h1 a:hover{color:var(--accent)}
.dek{font-size:19px;line-height:1.5;margin:0 0 20px;color:var(--muted)}
.more{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-bottom:2px solid var(--accent);padding-bottom:3px;display:inline-block}
.side-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.side-list li{border-top:1px solid var(--edge);padding-top:12px}
.side-list a{font-family:Anton,Impact,sans-serif;text-transform:uppercase;font-size:20px;line-height:1.05;color:var(--ink);display:block}
.side-list a:hover{color:var(--accent)}
.side-list p{margin:6px 0 0;font-size:15.5px;line-height:1.45;color:var(--muted)}

/* ---------- numbers ---------- */
.numbers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,40px)}
.num{border-top:3px solid var(--ground);padding-top:14px}
.num b{display:block;font-family:Anton,Impact,sans-serif;font-size:clamp(40px,5.4vw,86px);line-height:.85;font-weight:400}
.num span{display:block;font-size:15.5px;line-height:1.45;margin-top:10px}
.num span strong{display:block;font-size:16px}

/* ---------- section blocks on the front ---------- */
.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,54px);align-items:center}
.split.rev{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.split.diagram-lead{grid-template-columns:minmax(0,0.9fr) minmax(0,1.5fr);align-items:start}
.split.diagram-lead .diagram{padding:clamp(20px,2.6vw,34px)}
.split.diagram-lead .diagram svg{min-height:300px}
.sec-title{font-size:clamp(28px,3.6vw,56px);line-height:.96;margin-bottom:14px;display:flex;gap:14px;align-items:flex-start}
.stack3{display:grid;gap:0;margin-top:26px;border-top:1px solid currentColor}
.stack3 article{border-top:1px solid currentColor;padding-top:12px;opacity:.999}
.stack3 h3{font-size:21px;line-height:1.06;margin-bottom:6px}
.stack3 h3 a{color:inherit}
.stack3 p{margin:0;font-size:15.5px;line-height:1.45}
.quiet-line{display:flex;align-items:center;justify-content:center;gap:22px;padding:clamp(32px,4vw,52px) var(--pad);text-align:center}
.quiet-line p{margin:0;font-size:clamp(19px,2.4vw,32px);line-height:1.3;font-weight:600;max-width:34ch}
.quiet-line svg{color:var(--accent);width:30px;height:30px;flex:none}

/* ---------- index band ---------- */
.index-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;background:var(--ground);border-top:1px solid var(--edge);border-left:1px solid var(--edge)}
.index-grid a{background:var(--ground);padding:20px 18px 22px;display:flex;flex-direction:column;gap:9px;color:var(--ink);border-right:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.index-grid a:hover{background:var(--panel)}
.index-grid .n{font-family:Anton,Impact,sans-serif;font-size:26px;color:var(--accent);line-height:1}
.index-grid strong{font-family:Anton,Impact,sans-serif;text-transform:uppercase;font-size:19px;line-height:1.05;font-weight:400}
.index-grid span{font-size:15px;color:var(--muted);line-height:1.45;margin-top:auto}

/* ---------- figures: three treatments, one drawing system ---------- */
figure{margin:0}
figcaption{padding-top:11px}
.cap{display:block;font-size:16.5px;line-height:1.5;max-width:62ch}
.cap-kicker{display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:7px}
.credit{display:block;font-size:12.5px;color:var(--muted);margin-top:7px;letter-spacing:.02em}
/* 1 — plate: full-bleed, caption in a ruled row beneath */
.fig-plate img{width:100%;height:min(70vh,700px);object-fit:cover}
.fig-plate figcaption{border-top:2px solid var(--ink);margin-top:0;padding:12px var(--pad) 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:baseline}
/* 2 — mat: photograph sits on a panel with a border, caption hangs off a rule */
.fig-mat{background:var(--panel);padding:clamp(14px,2vw,22px);border:1px solid var(--edge)}
.fig-mat img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-mat figcaption{border-top:1px solid var(--edge);margin-top:14px;padding-top:12px}
.band.teal .fig-mat{background:rgba(20,24,26,.16);border-color:rgba(251,247,240,.45)}
.band.teal .fig-mat figcaption{border-color:rgba(251,247,240,.4)}
.band.teal .cap-kicker{color:rgba(251,247,240,.8)}
.band.teal .credit{color:rgba(251,247,240,.62)}
/* 3 — inset: narrow, in the reading column, caption stepped out beside a coloured bar */
.fig-inset{max-width:none;float:none;margin:4px 0 8px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.fig-inset img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--edge)}
.fig-inset figcaption{border-left:3px solid var(--secondary);padding:2px 0 2px 14px;margin-top:0}
.fig-inset .cap{font-size:15.5px}

/* ---------- map ---------- */
.map-figure{background:var(--panel);border:1px solid var(--edge);padding:clamp(14px,2vw,22px)}
.map-figure svg{width:100%;height:auto;display:block;max-height:640px}
.map-figure figcaption{border-top:1px solid var(--edge);margin-top:12px;padding-top:12px}
.map-land{fill:var(--edge);stroke:var(--ink);stroke-width:1.4}
.map-pin circle{fill:var(--accent)}
.map-pin text{font:700 30px Manrope,sans-serif;fill:var(--ink);paint-order:stroke fill;stroke:var(--panel);stroke-width:6px;stroke-linejoin:round}
.map-pin:hover circle{fill:var(--ink)}
.map-pin:hover text{fill:var(--accent)}

/* ---------- article ---------- */
.piece{display:grid;
  grid-template-columns:[full-start] minmax(var(--pad),1fr) [wide-start] minmax(0,190px) [text-start] minmax(0,var(--measure)) [text-end] minmax(0,190px) [wide-end] minmax(var(--pad),1fr) [full-end];
  row-gap:26px;padding-bottom:20px;max-width:1560px;margin:0 auto}
.piece>*{grid-column:text}
.piece>.bleed{grid-column:full}
.piece>.wide{grid-column:wide}
.art-head{padding-top:clamp(30px,4vw,50px)}
.art-kicker{display:flex;align-items:center;gap:11px;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 26px;padding-bottom:2px}
.art-kicker a{color:var(--accent)}
.piece h1{font-size:clamp(34px,5vw,78px);line-height:.9;margin-bottom:20px}
.lead{font-size:clamp(19px,1.9vw,25px);line-height:1.42;font-weight:500;margin:0;color:var(--ink)}
.piece h2{font-size:clamp(24px,2.6vw,38px);line-height:1;margin:18px 0 -6px}
.piece p{font-size:19px;line-height:1.68;margin:0}
.piece p em{font-style:italic}
.piece p a{border-bottom:1px solid var(--edge)}
.piece .art-kicker a{border-bottom:0}
.piece p a:hover{border-color:var(--accent)}
.pullquote{margin:8px 0;border-top:3px solid var(--accent);border-bottom:3px solid var(--accent);padding:24px 0}
.pullquote p{font-family:Anton,Impact,sans-serif;text-transform:uppercase;font-size:clamp(22px,2.8vw,40px);line-height:1.04;letter-spacing:-.005em}
/* field notes — the Notes-for-Design material */
.fieldnote{background:var(--panel);border:1px solid var(--edge);border-top:3px solid var(--secondary);padding:clamp(20px,2.4vw,30px)}
.fieldnote h3{font-size:22px;line-height:1.05;margin-bottom:16px;display:flex;gap:10px;align-items:flex-start}
.fieldnote ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.fieldnote li{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:baseline}
.fieldnote .fn-num{font-family:Anton,Impact,sans-serif;font-size:15px;color:var(--secondary);line-height:1.4}
.fieldnote .fn-body{min-width:0}
.fieldnote .fn-term{display:block;font-weight:700;font-size:17px}
.fieldnote .fn-desc{display:block;font-size:16.5px;line-height:1.5;color:var(--muted)}
/* drawn diagram */
.diagram{background:var(--ground);border:1px solid var(--edge);padding:clamp(18px,2.2vw,28px);overflow:hidden}
.diagram svg{width:100%;height:auto;color:var(--ink);overflow:visible}
.diagram figcaption{border-top:1px solid var(--edge);margin-top:16px;padding-top:12px}
.related{border-top:2px solid var(--ink);padding-top:16px;margin-top:14px}
.related-links{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px}
.related-links li{border-top:1px solid var(--edge);padding-top:10px}
.related-links a{font-family:Anton,Impact,sans-serif;text-transform:uppercase;font-size:19px;line-height:1.06;color:var(--ink);display:block}
.related-links a:hover{color:var(--accent)}

/* ---------- category / hub / archive ---------- */
.page-head{padding:clamp(30px,4vw,52px) var(--pad) clamp(22px,3vw,34px)}
.page-head h1{font-size:clamp(36px,5.4vw,86px);line-height:.9;max-width:26ch}
.page-head .intro{font-size:19px;line-height:1.55;max-width:62ch;margin:18px 0 0;color:var(--muted)}
.cat-list{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--edge)}
.cat-list li{border-bottom:1px solid var(--edge)}
.cat-list a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,3vw,40px);padding:20px 0;color:var(--ink);align-items:baseline}
.cat-list a:hover{color:var(--accent)}
.cat-list strong{font-family:Anton,Impact,sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(21px,2.2vw,30px);line-height:1.02}
.cat-list span{font-size:16.5px;line-height:1.5;color:var(--muted)}
.datatable{width:100%;border-collapse:collapse;font-size:16.5px}
.datatable th{text-align:left;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:10px 14px 10px 0;border-bottom:2px solid var(--ink);font-weight:700}
.datatable td{padding:14px 14px 14px 0;border-bottom:1px solid var(--edge);vertical-align:top}
.datatable td:first-child{font-weight:700}
.datatable td:last-child,.datatable th:last-child{padding-right:0}
.versus{width:100%;border-collapse:collapse;font-size:16.5px}
.versus th{text-align:left;padding:10px 14px 10px 0;border-bottom:2px solid var(--ink);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.versus th:nth-child(2){color:var(--accent)}
.versus td{padding:14px 14px 14px 0;border-bottom:1px solid var(--edge);vertical-align:top}
.versus td:first-child{font-weight:700}

/* ---------- supporters ---------- */
.sponsors .inner{padding-top:clamp(26px,3vw,38px);padding-bottom:clamp(26px,3vw,38px)}
.sponsor-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;margin-bottom:20px}
.sponsor-head h2{font-size:20px;line-height:1}
.sponsor-head p{margin:0;font-size:14.5px;color:var(--muted)}
.sponsor-mosaic{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.sponsor{width:auto;height:80px;background:var(--dark);display:flex;align-items:center;justify-content:center;padding:14px 20px;border:1px solid var(--dark)}
.sponsor--wide{grid-column:span 2}
.sponsor:hover{border-color:var(--accent)}
.sponsor-mark{max-height:40px;max-width:100%;width:auto;height:auto;object-fit:contain}

/* ---------- footer ---------- */
.site-foot{background:var(--dark);color:var(--ground);padding:clamp(34px,4vw,52px) var(--pad) 40px}
.foot-grid{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,2.6fr);gap:clamp(24px,4vw,48px);align-items:start}
.foot-brand .wordmark{color:var(--ground);font-size:clamp(26px,2.6vw,36px)}
.foot-brand .wm-a{color:#3fbf6e}
.foot-brand .wm-b{color:#e2566a}
.foot-brand .wordmark:hover .wm-a,.foot-brand .wordmark:hover .wm-b{color:var(--ground)}
.foot-brand p{font-size:15.5px;line-height:1.5;color:#a9a49a;margin:14px 0 0;max-width:34ch}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px}
.foot-cols h2{font-size:15px;letter-spacing:.03em;margin-bottom:11px;display:flex;gap:8px;align-items:flex-start}
.foot-cols h2 a{color:var(--ground)}
.foot-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.foot-cols a{color:#d6d1c7}
.foot-cols a:hover{color:#fff}
.foot-rule{border-top:1px solid #2a3236;margin-top:32px;padding-top:16px;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:13px;color:#8b8f8c}
.foot-rule a{color:#8b8f8c}

/* ---------- components used in the styleguide + articles ---------- */
.callout{background:var(--panel);border-left:4px solid var(--accent);padding:18px 20px;margin:0}
.callout p{margin:0;font-size:17.5px;line-height:1.55}
.note{font-size:16px;line-height:1.55;color:var(--muted);border-top:1px solid var(--edge);padding-top:10px;margin:0}
.blockquote{margin:0;border-left:3px solid var(--secondary);padding:4px 0 4px 18px}
.blockquote p{font-size:19px;line-height:1.55;margin:0}
.blockquote cite{display:block;font-style:normal;font-size:14.5px;color:var(--muted);margin-top:9px}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px}
.statblock{border-top:3px solid var(--accent);padding-top:12px}
.stat-num{display:block;font-family:Anton,Impact,sans-serif;font-size:46px;line-height:.9}
.stat-label{display:block;font-size:15px;line-height:1.4;color:var(--muted);margin-top:8px}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:minmax(120px,220px) 1fr;gap:10px 20px;padding:13px 0;border-bottom:1px solid var(--edge)}
.t-when{font-weight:700;font-size:16px}
.t-what{font-size:16.5px;line-height:1.5;color:var(--muted)}
.chart{background:var(--panel);border:1px solid var(--edge);padding:20px;overflow:hidden}
.chart svg{width:100%;height:auto;overflow:visible}
.chart.donut svg{max-width:300px;margin:0 auto}
.chart figcaption{border-top:1px solid var(--edge);margin-top:14px;padding-top:11px}
.chart text{font:600 12px Manrope,sans-serif;fill:var(--muted)}
.chart .v{fill:var(--ink);font-weight:700}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.gallery figure{display:flex;flex-direction:column;height:100%}
.gallery img{aspect-ratio:3/2;object-fit:cover;border:1px solid var(--edge)}
.gallery figcaption{padding-top:9px}
.profile-grid,.org-grid,.further-grid{display:grid;gap:14px}
.profile-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.profile-card{border:1px solid var(--edge);background:var(--panel);padding:18px;display:flex;flex-direction:column;height:100%}
.profile-card .p-photo{width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:14px}
.profile-card h3{font-size:21px;line-height:1.05}
.p-role{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:7px 0 10px;font-weight:700}
.profile-card p{font-size:16px;line-height:1.5;margin:0 0 10px}
.p-links{margin-top:auto!important}
.p-attr{font-size:13px;color:var(--muted)}
.org-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.org-card{border:1px solid var(--edge);padding:14px 16px;display:flex;flex-direction:column;gap:4px;background:var(--ground)}
.org-logo{max-height:30px;width:auto;margin-bottom:6px}
.org-name{font-weight:700;font-size:17px;color:var(--ink)}
.org-host{font-size:14px;color:var(--muted)}
.entity-ref{border-bottom:1px solid var(--edge)}
.further-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.further-grid a{border-top:2px solid var(--ink);padding-top:12px;font-family:Anton,Impact,sans-serif;text-transform:uppercase;font-size:19px;line-height:1.06;color:var(--ink)}
.further-grid a:hover{color:var(--accent)}
details.expander{border-top:1px solid var(--edge);margin-top:10px}
details.expander summary{cursor:pointer;padding:10px 0;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);list-style:none}
details.expander summary::-webkit-details-marker{display:none}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .nav{grid-template-columns:1fr 1fr}
  .nav-col{border-bottom:1px solid var(--edge)}
  .nav-col:nth-child(2n){border-right:0}
  .numbers{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .mast-grid{grid-template-columns:1fr}
  .brand-cell{border-right:0;border-bottom:1px solid var(--edge)}
  .lead-copy,.split,.split.rev,.split.diagram-lead,.foot-grid{grid-template-columns:1fr}
  .piece{grid-template-columns:[full-start] var(--pad) [wide-start text-start] minmax(0,1fr) [text-end wide-end] var(--pad) [full-end]}

  .fig-plate img{height:52vh}
  .lead-plate img{height:56vh}
  .plate-note{position:static;max-width:none;bottom:auto}
  .cat-list a{grid-template-columns:1fr;gap:8px}
  .quiet-line svg{display:none}
  .fig-plate figcaption{grid-template-columns:1fr}
}
@media (max-width:600px){.wordmark{font-size:34px}}
@media (max-width:560px){
  .nav{grid-template-columns:1fr}
  .nav-col{border-right:0}
  .numbers{grid-template-columns:1fr}
  .sponsor--wide{grid-column:span 1}
  .timeline li{grid-template-columns:1fr}
  .datatable,.versus{font-size:15.5px}
  .datatable td,.versus td{padding-right:8px}
}
@media print{
  .masthead,.site-foot,.sponsors{display:none}
  body{background:#fff}
}

/* ---------- additional component treatments (used in articles + styleguide) ---------- */
.article-figure{background:var(--panel);padding:clamp(12px,1.6vw,18px);border:1px solid var(--edge)}
.article-figure img{width:100%;aspect-ratio:16/10;object-fit:cover}
.article-figure figcaption{border-top:1px solid var(--edge);margin-top:12px;padding-top:11px}
.profile-card.no-photo{border-left:4px solid var(--secondary)}
.org-card.no-logo{border-left:4px solid var(--accent)}
.chart .bar-fill{fill:var(--accent)}
.chart .axis{stroke:var(--edge);stroke-width:1}
.chart .series{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.chart .ring-a{fill:none;stroke:var(--accent);stroke-width:26}
.chart .ring-b{fill:none;stroke:var(--secondary);stroke-width:26}
.sg-section{border-top:2px solid var(--ink);padding:34px var(--pad) 10px}
.sg-section>h2{font-size:24px;margin-bottom:6px}
.sg-section>p.note{margin-bottom:22px}
.sg-grid{display:grid;gap:26px;padding-bottom:26px}
.sponsor-blurb{display:block;font-size:14px;line-height:1.45;color:#d6d1c7}
.sg-sponsor .sponsor{width:auto;height:auto;min-height:76px;flex-direction:column;align-items:flex-start;gap:10px;padding:16px}
.sg-sponsor .sponsor-name{display:block;font-weight:700;font-size:16px;color:#f2efe8}

/* ---------- signature band ---------- */
.signature{background:var(--dark);color:var(--ground);border-bottom:0;position:relative}
.signature::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(to right,#008c45 0 33.3%,#fbf7f0 33.3% 66.6%,#cd212a 66.6% 100%)}
.sig-inner{padding:clamp(44px,6vw,86px) var(--pad) clamp(30px,4vw,48px);max-width:1180px;margin:0 auto;text-align:center}
.sig-kicker{margin:0 0 22px;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#8b8f8c}
.sig-line{margin:0;font-family:Anton,Impact,sans-serif;text-transform:uppercase;font-size:clamp(30px,5.6vw,74px);line-height:.98;letter-spacing:-.01em}
.sig-em{color:#e2b30a}
.sig-rule{display:block;width:100%;height:44px;margin:clamp(26px,3.4vw,44px) 0 0;color:#4b545a}
.sig-foot{display:flex;justify-content:space-between;margin:6px 0 0;font-size:12.5px;font-weight:700;letter-spacing:.16em;color:#8b8f8c}
@media (max-width:560px){.sig-foot span:nth-child(2){display:none}}
/* ---------- compact footer list ---------- */
.foot-cols h2{align-items:center;gap:9px;padding-bottom:9px;border-bottom:1px solid #2a3236}
.foot-cols h2 .ico{width:22px;height:22px;color:#8b8f8c}
.foot-list{gap:5px!important;font-size:14px}
.foot-list a{color:#b9b4aa}
.foot-cols{grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:22px}

.diagram .sw-band{fill:rgba(181,18,46,.10);stroke:none}
.diagram .dia-accent{color:var(--accent)}

/* ---------- section-band guide rows ---------- */
.stack-row{display:grid;grid-template-columns:26px 1fr 22px;gap:14px;align-items:start;padding:15px 0;border-bottom:1px solid currentColor;color:inherit}
.stack-row .row-ico{width:26px;height:26px;color:var(--accent);margin-top:2px}
.band.teal .stack-row .row-ico{color:#fbf7f0;opacity:.9}
.row-body{display:block;min-width:0}
.row-n{display:block;font-family:Anton,Impact,sans-serif;font-size:12px;letter-spacing:.14em;opacity:.55;margin-bottom:3px}
.stack-row strong{display:block;font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:21px;line-height:1.04}
.row-dek{display:block;font-size:15.5px;line-height:1.45;margin-top:5px;opacity:.82}
.row-chev{width:22px;height:22px;margin-top:8px;opacity:.35;transition:transform .18s ease,opacity .18s ease}
.stack-row:hover{color:var(--accent)}
.band.teal .stack-row:hover{color:#fbf7f0}
.stack-row:hover .row-chev{opacity:1;transform:translateX(4px)}
.band.teal .stack-row:hover .row-ico{opacity:1}
.stack-all{display:inline-flex;align-items:center;gap:9px;margin-top:16px;font-size:13.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:inherit}
.stack-all .row-chev{margin-top:0;opacity:.6}
.stack-all:hover{color:var(--accent)}
.band.teal .stack-all:hover{color:#fbf7f0}
.stack-all:hover .row-chev{opacity:1;transform:translateX(4px)}
/* ---------- footer sections ---------- */
.foot-cols{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.foot-sec{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:center;padding:15px 16px;border:1px solid #2a3236;color:var(--ground)}
.foot-sec:hover{border-color:var(--ground)}
.foot-sec .ico{width:26px;height:26px;color:#8b8f8c}
.foot-sec:hover .ico{color:var(--ground)}
.foot-sec strong{display:block;font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:16px;line-height:1.06}
.foot-sec span span{display:block;font-size:13px;color:#8b8f8c;margin-top:3px}

/* ---------- article rhythm ---------- */
.art-head{padding-top:clamp(34px,4.4vw,60px);border-bottom:2px solid var(--ink);padding-bottom:clamp(22px,2.6vw,32px)}
.art-kicker{flex-wrap:wrap}
.art-sec-no{margin-left:auto;color:var(--muted);letter-spacing:.14em}
.piece>p{font-size:19.5px;line-height:1.68}
.piece>p.first{font-size:21px;line-height:1.6}
.piece>p.first::first-letter{float:left;font-family:Anton,Impact,sans-serif;font-size:76px;line-height:.66;color:var(--accent);margin:9px 12px 0 0}
.piece>h2{font-size:clamp(25px,2.7vw,40px);margin:20px 0 -8px;max-width:34ch}
.piece>h2::after{content:"";display:block;width:64px;height:3px;background:var(--accent);margin-top:14px}
.pullquote.wide{border-top:3px solid var(--accent);border-bottom:3px solid var(--accent);padding:30px 0;margin:10px 0}
.pullquote.wide p{font-size:clamp(24px,3vw,44px);max-width:30ch}
.piece>.gallery{gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.piece>.gallery img{aspect-ratio:4/3;border:1px solid var(--edge)}
.piece>.gallery figcaption{border-top:1px solid var(--edge);margin-top:10px;padding-top:9px}
.statpanel{background:var(--dark);color:var(--ground);padding:clamp(22px,2.6vw,34px)}
.statpanel h3{font-size:22px;line-height:1.05;display:flex;gap:10px;align-items:center;margin-bottom:22px;color:var(--ground)}
.statpanel h3 .ico{color:#e2b30a}
.statpanel .statrow{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:24px}
.statpanel .statblock{border-top:3px solid #e2b30a;padding-top:12px}
.statpanel .stat-num{font-size:clamp(26px,2.6vw,40px);line-height:1;color:#e2b30a}
.statpanel .stat-label{color:#c9c4ba;font-size:15.5px}
/* ---------- end of piece ---------- */
.next-up{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(22px,3vw,44px);margin-top:24px;padding-top:8px}
.next-up .related{margin-top:0}
.related-links li{display:grid;gap:4px}
.related-links li span{font-size:15.5px;line-height:1.45;color:var(--muted)}
.next-card{display:flex;flex-direction:column;gap:10px;background:var(--panel);border:1px solid var(--edge);border-top:3px solid var(--secondary);padding:22px;color:var(--ink)}
.next-card strong{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(21px,2vw,28px);line-height:1.03}
.next-dek{font-size:16px;line-height:1.5;color:var(--muted)}
.next-go{display:flex;align-items:center;gap:8px;margin-top:auto;font-size:13.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.next-card:hover{border-color:var(--secondary)}
.next-card:hover .next-go .row-chev{transform:translateX(4px)}
@media (min-width:861px) and (max-width:1080px){
  .piece{grid-template-columns:[full-start] minmax(var(--pad),1fr) [wide-start] minmax(0,60px) [text-start] minmax(0,var(--measure)) [text-end] minmax(0,60px) [wide-end] minmax(var(--pad),1fr) [full-end]}
}
@media (max-width:860px){
  .next-up{grid-template-columns:1fr}
  .piece>p.first::first-letter{font-size:60px;margin:7px 10px 0 0}
}

/* offset figure: breaks into the right-hand gutter, caption set beside the image */
@media (min-width:861px){
  .piece>.fig-inset{grid-column:text-start / wide-end;grid-template-columns:minmax(0,1fr) minmax(160px,215px);gap:22px;align-items:end}
  .piece>.fig-inset img{aspect-ratio:16/10}
}

/* ---------- touch targets on small screens ---------- */
@media (max-width:860px){
  .nav-list a{padding:11px 0;min-height:44px;align-items:center}
  .nav-head{padding:4px 0 12px}
  .nav-foot{gap:0 24px;padding:4px var(--pad) 8px}
  .nav-foot a{display:inline-block;padding:10px 0}
  .foot-rule{gap:0 22px}
  .foot-rule a{display:inline-block;padding:8px 0}
  .stack-row{padding:17px 0}
  .cat-list a{padding:18px 0}
  .related-links li{padding-top:13px}
  .more{padding:6px 0}
}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain}

/* sp-contain-guard: sponsor logos are wordmarks — never object-fit:cover (crops).
   object-fit ONLY. This block used to also set width:auto, padding:4px 10px,
   max-width:calc(100% - 20px) and min/max-height, which overrode Design's own frame and
   let every plate shrink-wrap its logo — the recurring "inconsistent sizing" and
   "lacks padding". Geometry belongs to Design. */
.sponsor img,.sponsor-box img,.sp-logo img{object-fit:contain!important;display:block;margin-left:auto;margin-right:auto;align-self:center}

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

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}
.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-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. */
.sponsor-mosaic .sponsor.sponsor img{height:50px!important}

/* op-nav-collapse: this nav printed 1160px of stacked links at 390 before any content
   (20 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 (clamp(20px,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 (860px here), where the button appears and the nav starts closed.
   Folded with the "height-clip" technique and marked with the "bars" icon — the mechanism
   is deliberately not identical across the fleet either. */
.nav-disclose{display:none}
@media (max-width:860px){
  .nav-disclose{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)}

  .nav-disclose-bars{width:15px;height:9px;flex:none;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;box-shadow:inset 0 3.5px 0 -1px currentColor}
  .nav{height:0;overflow:hidden;visibility:hidden;padding-block:0;margin-block:0;border-top-width:0;border-bottom-width:0}
  .nav-disclose-c:checked ~ .nav{height:auto;overflow:visible;visibility:visible;padding-block:revert;margin-block:revert;border-top-width:revert;border-bottom-width:revert}
  .nav-disclose:not(:has(~ .nav)){display:none}
}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   970px at 390, 10% of the whole page. Two columns bring it to
   520px (46% shorter). Checked before writing: no new overflow, smallest mark still
   101px wide, longest blurb 0 lines, tile heights 80-80px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   Only the tier(s) that were one-per-row are touched (.sponsor-mosaic), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .sponsor-mosaic{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:10px!important}
    .sponsor-mosaic > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-mosaic > * *{min-width:0!important;max-width:100%}
    .sponsor-mosaic img,.sponsor-mosaic svg{max-width:100%;height:auto}
}

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

/* op-article-width: the article column was capped at 726px (82 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through grid track 3 of "[full-start] minmax(var(--pad),1fr) [wide-start] minmax(0,190px) [text-start] minmax(0,var(--measure)) [text-end] minmax(0,190px) [wide-end] minmax(var(--pad),1fr) [full-end]" (declared in .piece) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1280 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1280px){
  article.piece{grid-template-columns:[full-start] minmax(var(--pad),1fr) [wide-start] minmax(0,190px) [text-start] min(907px, calc(100% - 380px)) [text-end] minmax(0,190px) [wide-end] minmax(var(--pad),1fr) [full-end]!important}
}
@media (min-width:1600px){
  article.piece{grid-template-columns:[full-start] minmax(var(--pad),1fr) [wide-start] minmax(0,190px) [text-start] min(clamp(907px, 62.986vw, 1088px), calc(100% - 380px)) [text-end] minmax(0,190px) [wide-end] minmax(var(--pad),1fr) [full-end]!important}
  article.piece > :is(p:not([class])){font-size:clamp(19.5px,1.3542vw,23.4px)!important}
}
/* op-article-width:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.piece > figure.bleed.fig-plate > img,
  article.piece > figure.fig-inset > img,
  article.piece > figure.fig-mat.wide > img,
  div.gallery.wide > figure > img,
  div.split > figure.fig-mat > img,
  main > figure.bleed.fig-plate > img,
  section.band > div.lead-plate > img,
  section.band > figure.fig-plate > img){height:auto}
/* op-img-dims:end */