/* troy-ohio-usa.com — "Paper Windows"
   PALETTE — "Petrol", five swappable roles:
     --c-ground     #0a4a4d  deep teal-petrol, used as AREA (page ground, bands)
     --c-mat-ground #073539  the darker mat a plate or emblem-note sits on
     --c-display    #f2c53d  chrome yellow, poster-scale type ON the ground (>=24px)
     --c-on-ground  #f6f2e8  every sub-24px run on the ground
     --c-accent     #a83c0e  burnt orange: data panels, links and marks on paper
     --c-paper      #f6f2e8  the windows, cards and mats
     --c-ink        #0f1615  type on paper
   Ground and accent are ~155 degrees apart in hue; the yellow is the one warm signal
   on the ground and never appears on paper. */

:root{
  --c-ground:#0a4a4d;
  --c-ground-dk:#073539;
  --c-ink:#0f1615;
  --c-paper:#f6f2e8;
  --c-mat:#e3ddcd;
  --c-accent:#a83c0e;
  --c-accent-dk:#832f09;
  --c-neutral:#67685f;
  --c-body:#2c2f2b;

  /* roles, so the palette can be swapped without touching layout:
     --c-display   poster-scale type ON the ground
     --c-on-ground every sub-24px run on the ground
     --c-on-accent type on the accent panel
     --c-numeral   the giant standing numerals
     --c-rule      the 3px structural rules on the ground */
  --c-display:#f2c53d;
  --c-on-ground:#f6f2e8;
  --c-on-accent:#f6f2e8;
  --c-numeral:#f2c53d;
  --c-mat-ground:#073539;
  --c-rule:#f6f2e8;

  --prose:860px;
  --marg:340px;
  --colgap:56px;
  --wide:1320px;
  --gut:clamp(20px,5vw,60px);

  --fs-body:17px;
  --fs-prose:19px;
  --fs-cap:16.5px;
  --para-gap:22px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--c-ground); color:var(--c-ink);
  font-family:"Bitter",Georgia,serif; font-size:var(--fs-body); line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{font-family:"Chivo","Helvetica Neue",Arial,sans-serif; margin:0; text-wrap:pretty}
p{margin:0}
ul,ol{margin:0; padding:0}
a{color:var(--c-accent); text-decoration:none; border-bottom:1px solid rgba(14,107,111,.35)}
a:hover{color:var(--c-accent-dk); border-bottom-color:var(--c-accent-dk)}
/* the accent is a colour for paper only: any link standing on the ground takes paper,
   or it lands at ~1.6:1 against the petrol */
.sec-index__head a,.sec-head__inner a,.pair-band > div > a,.num-band a,.quiet-band a,
.sponsors a,.mast a,.site-head a,.map-legend a,.err a{color:var(--c-on-ground); border-bottom-color:currentColor}
.sec-index__head a:hover,.sec-head__inner a:hover,.pair-band > div > a:hover,.num-band a:hover,
.quiet-band a:hover,.sponsors a:hover,.err a:hover{color:#fff; border-bottom-color:#fff}
svg{display:block}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- shared furniture ---------- */
.band{width:100%; padding-inline:var(--gut)}
.band--paper{background:var(--c-paper); color:var(--c-body)}
.band--ink{background:var(--c-ink); color:#f3d8cc}
.inner{max-width:var(--wide); margin-inline:auto}
.inner--full{max-width:1780px; margin-inline:auto}

.label{font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; line-height:1.4}
.label--paper{color:var(--c-on-ground)}
.label--accent{color:var(--c-accent)}
.label--quiet{color:var(--c-neutral)}
.rule-ink{height:3px; background:var(--c-ink); border:0; margin:0}

.ico{width:1.15em;height:1.15em;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter}
.ico--lg{width:34px;height:34px}

/* ---------- site header ---------- */
.site-head{background:var(--c-ground); padding:22px var(--gut) 0}
.site-head__row{max-width:1780px; margin-inline:auto; display:flex; flex-wrap:wrap; gap:18px 30px; align-items:flex-end; justify-content:space-between}
.wordmark{font-family:"Chivo",Arial,sans-serif; font-weight:900; letter-spacing:-.05em; line-height:.8; color:var(--c-display); font-size:96px; border:0}
.wordmark:hover{color:var(--c-display)}
.site-head .wordmark{font-size:clamp(60px,9vw,110px)}
.nav{display:flex; flex-wrap:wrap; gap:10px 26px; padding-bottom:14px}
.nav a{display:flex; align-items:center; gap:8px; color:var(--c-on-ground); border:0; font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; padding-bottom:5px; border-bottom:3px solid transparent}
.nav a:hover{color:var(--c-on-ground); border-bottom-color:var(--c-on-ground)}
.nav a[aria-current]{border-bottom-color:var(--c-display); color:var(--c-display)}
.site-head__rule{max-width:1780px; margin:0 auto; height:3px; background:var(--c-rule)}
.strap{font-size:15px; color:var(--c-on-ground); max-width:44ch}

/* ---------- footer ---------- */
.site-foot{background:var(--c-ink); color:#f3d8cc; padding:52px var(--gut) 60px; margin-top:0}
.site-foot__row{max-width:1780px; margin-inline:auto; display:flex; flex-wrap:wrap; gap:26px 60px; justify-content:space-between; align-items:flex-end}
.site-foot .wordmark{color:var(--c-ground); font-size:66px; line-height:1}
.site-foot nav{display:flex; flex-wrap:wrap; gap:10px 28px}
.site-foot nav a{color:#f3d8cc; border:0; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600}
.site-foot nav a:hover{color:#fff; text-decoration:underline}
.site-foot p{font-size:15px; max-width:52ch; margin-top:14px}

/* ---------- paper window (the signature figure) ---------- */
.window{background:var(--c-paper); padding:20px}
.window img{width:100%}
.window--tight{padding:14px}

/* ---------- homepage ---------- */
.mast{padding:46px var(--gut) 30px}
.mast__row{max-width:1780px; margin-inline:auto; display:flex; flex-wrap:wrap; gap:26px 50px; align-items:flex-end; justify-content:space-between}
.mast__name{font-family:"Chivo",Arial,sans-serif; font-weight:900; letter-spacing:-.055em; line-height:.78; color:var(--c-display); font-size:clamp(96px,21vw,300px)}
.mast__emblem{width:clamp(180px,24vw,300px); height:auto; color:var(--c-display); margin-bottom:10px}
.mast__foot{max-width:1780px; margin:24px auto 0; border-top:3px solid var(--c-rule); padding-top:0; display:flex; flex-wrap:wrap; gap:16px 40px; align-items:flex-start; justify-content:space-between}

/* the homepage menu is a contents index: one row, numbered, set light so the masthead
   above it keeps the weight */
.mast__foot .nav{counter-reset:sect; display:flex; flex-wrap:wrap; gap:8px 26px; flex:1 1 100%; padding:20px 0 0}
.mast__foot .nav a{counter-increment:sect; display:flex; align-items:baseline; gap:9px; padding:4px 0; border:0;
  color:var(--c-display); font-family:"Chivo",Arial,sans-serif; font-weight:400; font-size:clamp(15px,1.6vw,19px);
  line-height:1.2; letter-spacing:0; text-transform:none; white-space:nowrap}
.mast__foot .nav a::before{content:counter(sect,decimal-leading-zero); font-family:"Bitter",Georgia,serif; font-weight:400;
  font-size:11px; letter-spacing:.08em; color:var(--c-on-ground); opacity:.75}
.mast__foot .nav a .ico{display:none}
.mast__foot .nav a:hover{color:var(--c-on-ground)}
.mast__foot .nav a:hover::before{opacity:1}
.mast__foot .strap{flex:1 1 100%; padding-top:18px; border-top:1px solid var(--c-display); margin-top:14px; max-width:none}
@media (min-width:760px){
  .mast__foot .nav{flex-wrap:nowrap; justify-content:space-between; gap:26px}
}

.lead-band{padding:34px var(--gut) 0}
.lead-band__h1{font-weight:900; letter-spacing:-.035em; line-height:.94; color:var(--c-display); font-size:clamp(44px,7.2vw,112px); max-width:20ch; margin-bottom:30px}

/* every poster-scale heading standing ON the ground carries the same hard offset in the
   accent — no blur, so it reads as misregistered ink rather than a glow. Scales with the type. */
.lead-band__h1,.num-grid h2,.sec-index__head h2,.sec-head h1,.err h1{text-shadow:.045em .045em 0 var(--c-accent)}
.lead-grid{max-width:1780px; margin-inline:auto; display:grid; gap:34px}
.lead-side p{font-size:19px; color:var(--c-on-ground); margin-bottom:24px}
.lead-side .more{border-top:3px solid var(--c-on-ground); padding-top:14px; display:inline-flex; align-items:center; gap:10px; color:var(--c-on-ground); border-bottom:0; font-size:14px; font-weight:600; letter-spacing:.16em; text-transform:uppercase}
.lead-side .more:hover{color:var(--c-on-ground); opacity:.85}

.numeral{font-family:"Chivo",Arial,sans-serif; font-weight:900; letter-spacing:-.06em; line-height:.72; color:var(--c-numeral); font-size:clamp(140px,26vw,420px)}
.num-band .numeral,.num-grid p.numeral{font-size:clamp(140px,26vw,420px); color:var(--c-numeral); max-width:none}
.num-band{padding:96px var(--gut) 0}
.num-grid{max-width:1780px; margin-inline:auto; display:grid; gap:30px 60px; align-items:center}
.num-grid h2{font-weight:900; font-size:clamp(34px,4.4vw,64px); line-height:.98; letter-spacing:-.03em; color:var(--c-display); max-width:22ch}
.num-grid p{font-size:19px; color:var(--c-on-ground); max-width:60ch; margin-top:18px}
.dam-list{display:grid; gap:20px; margin-top:34px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
/* the emblem sits beside the cards only when the card grid can hold two tracks of its own */
.num-band .num-grid + .num-grid{align-items:start}
.dam-card{background:var(--c-paper); padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; border-bottom:6px solid var(--c-accent)}
.dam-card h3{font-size:21px; font-weight:700; line-height:1.14; color:var(--c-ink)}
.dam-card p{font-size:15px; color:var(--c-body)}
.dam-card a{margin-top:auto}

.quiet-band{background:var(--c-mat-ground); margin:110px 0; padding:70px var(--gut) 76px}
.quiet-band > *{max-width:1780px; margin-inline:auto}
.quiet-band p{max-width:30ch; margin:0; font-family:"Chivo",Arial,sans-serif; font-weight:900; font-size:clamp(28px,4.4vw,58px); line-height:1.06; letter-spacing:-.03em; color:var(--c-display); text-shadow:.03em .03em 0 var(--c-accent)}
.quiet-band cite{display:block; margin:28px 0 0; max-width:34ch; font-style:normal; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--c-on-ground)}
.quiet-band__rule{width:140px; height:8px; background:var(--c-accent); margin:0 0 30px; border:0}

.pair-band{padding:90px var(--gut) 0}
.pair-grid{max-width:1780px; margin-inline:auto; display:grid; gap:40px}
.pair-grid h3{font-weight:900; font-size:clamp(26px,3vw,38px); line-height:1.04; letter-spacing:-.02em; color:var(--c-display); margin:20px 0 10px}
.pair-grid h4{font-weight:700; font-size:23px; line-height:1.14; color:var(--c-on-ground); margin:14px 0 6px}
.pair-grid .more{border-top:3px solid var(--c-on-ground); padding-top:14px; display:inline-flex; align-items:center; gap:10px; color:var(--c-on-ground); border-bottom:0; font-size:14px; font-weight:600; letter-spacing:.16em; text-transform:uppercase}
.pair-grid .more:hover{color:var(--c-on-ground); opacity:.85}
.pair-grid p{font-size:17px; color:var(--c-on-ground)}
.stack{display:flex; flex-direction:column; gap:36px}

.sec-index{padding:96px var(--gut) 0}
.sec-index__head{max-width:1780px; margin:0 auto 30px; display:flex; flex-wrap:wrap; gap:14px 30px; align-items:baseline; justify-content:space-between; border-top:3px solid var(--c-rule); padding-top:18px}
.sec-index__head h2{font-weight:900; font-size:clamp(28px,3.4vw,46px); letter-spacing:-.025em; color:var(--c-display)}
.sec-cards{max-width:1780px; margin-inline:auto; display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.sec-card{background:var(--c-paper); padding:22px; display:flex; flex-direction:column; gap:10px; color:var(--c-body); border-bottom:0}
.sec-card:hover{background:#fff}
.sec-card__top{display:flex; align-items:center; gap:10px; color:var(--c-accent)}
.sec-card h3{font-weight:900; font-size:25px; line-height:1.08; color:var(--c-ink); letter-spacing:-.01em}
.sec-card p{font-size:15.5px}
.sec-card span.count{margin-top:auto; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--c-neutral)}

/* ---------- supporters ---------- */
.sponsors{padding:96px var(--gut) 0}
.sponsors__inner{max-width:1780px; margin-inline:auto; border-top:3px solid var(--c-rule); padding-top:18px}
.sponsors__head{display:flex; flex-wrap:wrap; gap:10px 30px; align-items:baseline; justify-content:space-between; margin-bottom:26px}
.sponsors__head h2{font-weight:900; font-size:clamp(24px,2.4vw,30px); letter-spacing:-.02em; color:var(--c-on-ground)}
.sponsors__head p{font-size:15px; color:var(--c-on-ground); max-width:56ch}
.sponsor-tier{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px}
.sponsor-tier--roll{gap:14px; margin-top:14px; padding-top:22px; border-top:1px solid currentColor}
.sponsor{max-width:100%; display:grid; grid-template-columns:180px minmax(0,1fr); gap:16px; align-items:center;
  background:var(--c-paper); padding:16px; border-bottom:0; color:var(--c-ink)}
.sponsor-tier--roll .sponsor{background:transparent; padding:10px 0; border-top:0}
.sponsor:hover{background:#fff}
.sponsor-tier--roll .sponsor:hover{background:rgba(247,245,242,.18)}
.sponsor img{background:var(--c-ink); width:100%; height:56px; object-fit:contain; padding:8px 12px}
.sponsor-name{font-family:"Chivo",Arial,sans-serif; font-weight:700; font-size:14.5px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sponsor-tier--roll .sponsor-name{color:var(--c-on-ground)}

/* ---------- section (category) pages ---------- */
.sec-head{padding:40px var(--gut) 0}
.sec-head__inner{max-width:1780px; margin-inline:auto; border-top:3px solid var(--c-rule); padding-top:26px}
.sec-head h1{font-weight:900; font-size:clamp(46px,8vw,132px); line-height:.88; letter-spacing:-.045em; color:var(--c-display); max-width:18ch}
.sec-head__meta{display:flex; flex-wrap:wrap; gap:20px 60px; align-items:flex-end; justify-content:space-between; margin-top:28px}
.sec-head__meta p{font-size:19px; color:var(--c-on-ground); max-width:64ch}
.level2{display:flex; flex-wrap:wrap; gap:12px 26px}
.level2 a{display:flex; align-items:center; gap:8px; color:var(--c-on-ground); border:0; font-size:13px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; padding-bottom:4px; border-bottom:3px solid transparent}
.level2 a:hover{border-bottom-color:var(--c-on-ground)}
.level2 a[aria-current]{color:var(--c-display); border-bottom-color:var(--c-display)}

.lede-entry{padding:48px var(--gut) 0}
.lede-entry__inner{max-width:1780px; margin-inline:auto; background:var(--c-paper); padding:22px; display:grid; gap:30px; align-items:center}
.lede-entry h2{font-weight:900; font-size:clamp(30px,3.8vw,52px); line-height:.99; letter-spacing:-.03em; color:var(--c-ink)}
.lede-entry p{font-size:17.5px; color:var(--c-body); margin-top:18px; max-width:60ch}
.lede-entry .more{margin-top:22px; display:inline-flex; gap:10px; align-items:center; font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:13px}

.entry-grid{padding:48px var(--gut) 0}
.entry-grid__inner{max-width:1780px; margin-inline:auto; display:grid; gap:40px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.entry{background:var(--c-paper); display:flex; flex-direction:column; padding:16px 16px 22px; color:var(--c-body); border-bottom:0}
.entry:hover{background:#fff}
.entry__img{aspect-ratio:16/10; width:100%; object-fit:cover; background:var(--c-mat)}
.entry__kick{display:flex; align-items:center; gap:8px; color:var(--c-accent); margin:16px 0 10px}
.entry h3{font-weight:900; font-size:24px; line-height:1.1; letter-spacing:-.015em; color:var(--c-ink); min-height:2.2em}
.entry p{font-size:15.5px; margin-top:10px}
.entry .go{margin-top:auto; padding-top:16px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--c-accent); font-weight:600}

/* ---------- archive register ---------- */
.register{padding:44px var(--gut) 0}
.register__inner{max-width:var(--wide); margin-inline:auto}
.reg-group{margin-bottom:54px}
.reg-group h2{display:flex; align-items:center; gap:12px; font-weight:900; font-size:28px; letter-spacing:-.02em; color:var(--c-ink); border-bottom:3px solid var(--c-ink); padding-bottom:12px}
.reg-row{display:grid; gap:6px 30px; padding:20px 0; border-bottom:1px solid rgba(26,15,9,.25)}
.reg-row h3{font-weight:700; font-size:21px; line-height:1.2; color:var(--c-ink)}
.reg-row h3 a{color:var(--c-ink); border-bottom-color:rgba(26,15,9,.4)}
.reg-row h3 a:hover{color:var(--c-ink)}
.reg-row p{font-size:16px; color:#22120a}

/* ---------- map ---------- */
.map-figure{margin:0}
.map-frame{background:var(--c-paper); padding:18px}
/* the homepage carries the map at half size with its legend beside it; maps.html has it full width */
.map-split{max-width:1780px; margin-inline:auto; display:grid; gap:28px}
.map-figure--compact{margin:0}
.map-figure--compact .map-frame{padding:12px}
.map-aside{display:flex; flex-direction:column; gap:16px; align-self:start}
.map-aside p{font-size:16px; line-height:1.55; color:var(--c-on-ground); max-width:46ch}
.map-aside .label{color:var(--c-on-ground); margin:0}
.map-key{list-style:none; display:flex; flex-direction:column; gap:12px; margin:0}
.map-key li{display:grid; grid-template-columns:26px minmax(0,1fr); gap:12px; align-items:start;
  font-size:14.5px; line-height:1.45; color:var(--c-on-ground)}
.key-dot{width:14px; height:14px; border-radius:50%; border:2px solid var(--c-paper); margin-top:3px}
.key-dot--dam{background:var(--c-accent)}
.key-dot--town{background:var(--c-ground-dk); width:11px; height:11px; margin-top:5px; margin-left:2px}
.key-line{height:0; border-top:2px dashed #9aa89c; margin-top:9px}
.key-bar{height:8px; border-left:2px solid var(--c-on-ground); border-right:2px solid var(--c-on-ground);
  border-bottom:2px solid var(--c-on-ground); margin-top:5px}
.map-aside .more{border-top:3px solid var(--c-on-ground); padding-top:12px; display:inline-flex; gap:10px;
  color:var(--c-on-ground); border-bottom:0; font-size:14px; font-weight:600; letter-spacing:.16em; text-transform:uppercase}
@media (min-width:900px){
  .map-split{grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:40px; align-items:start}
}
.map-pair{display:grid; gap:18px}
.map-locator{display:flex; flex-direction:column; gap:10px}
.map-locator__stage{position:relative; aspect-ratio:3621/4267; background:#d8cfbd}
.map-locator__stage img,.map-locator__stage svg{position:absolute; inset:0; width:100%; height:100%}
.map-locator__label{font-size:13px; line-height:1.4; color:var(--c-neutral)}
.map-slot{background:var(--c-mat)}
.map-stage{position:relative; aspect-ratio:1200/974; background:#eae5dc}
.map-stage--wide{aspect-ratio:3621/4267}
.map-svg.map-pins--wide text{font-size:78px; stroke-width:14px}
.map-svg.map-pins--wide circle{r:26; stroke-width:6}
.map-svg.map-pins--wide text[text-anchor="start"]{transform:translate(34px,22px)}
.map-svg.map-pins--wide text[text-anchor="end"]{transform:translate(-34px,22px)}
.map-base{position:absolute; inset:0; width:100%; height:100%}
.map-svg{width:100%; height:auto}
.map-pins{position:absolute; inset:0; height:100%}
.map-pins a{border-bottom:0}
.map-pins a:hover circle{fill:var(--c-ground)}
.map-pins a:hover text{fill:var(--c-ground-dk); font-weight:600}
.map-svg text{font-family:"Bitter",Georgia,serif; font-size:19px; fill:#241a12; paint-order:stroke; stroke:#f6f1e6; stroke-width:5px; stroke-linejoin:round}
.map-svg .pin{fill:var(--c-accent); stroke:#f6f1e6; stroke-width:2}
.map-svg .pin--key{fill:var(--c-ground); stroke:#f6f1e6; stroke-width:2}
.map-legend{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:16px}
.map-legend a{font-size:14px; color:var(--c-on-ground); border-bottom-color:rgba(247,245,242,.5)}
.map-legend a:hover{color:#fff; border-bottom-color:#fff}
.map-figure figcaption .cap{color:var(--c-on-ground)}
.map-figure figcaption .credit{color:var(--c-on-ground)}
.art .map-figure figcaption .cap{color:#2a201a}
.art .map-figure figcaption .credit{color:var(--c-neutral)}

/* ---------- article page (turns to paper) ---------- */
.art{background:var(--c-paper); color:var(--c-body); padding-bottom:80px}
.art-wrap{padding:0 var(--gut)}
.row{max-width:var(--prose); margin-inline:auto}
.row + .row{margin-top:var(--para-gap)}
.col-prose > * + *{margin-top:var(--para-gap)}
.col-prose p{font-size:var(--fs-prose); line-height:1.68; color:#1f1712}
.col-prose h2{font-weight:900; font-size:clamp(26px,2.6vw,36px); line-height:1.1; letter-spacing:-.02em; color:var(--c-ink); margin-top:46px}
.col-prose h2 + p{margin-top:16px}
.col-margin{margin-top:38px; margin-bottom:38px}
.breakout{max-width:var(--wide); margin:64px auto}

.art-head{padding:56px var(--gut) 0}
.art-head .row{display:block}
.kicker{display:flex; align-items:center; gap:10px; color:var(--c-accent); margin-bottom:20px}
.art-head h1{font-weight:900; font-size:clamp(38px,5.4vw,82px); line-height:.94; letter-spacing:-.035em; color:var(--c-ink)}
.lead{font-size:clamp(19px,2vw,24px); line-height:1.45; color:#3a2a20; margin-top:24px}
.art-head__rule{width:180px; height:4px; background:var(--c-ground); margin:36px 0 0}

/* figure system — three treatments, one drawing family */
figure{margin:0}
figcaption{display:flex; flex-wrap:wrap; gap:6px 26px; align-items:baseline; justify-content:space-between; margin-top:14px}
figcaption .cap{font-size:var(--fs-cap); line-height:1.5; color:#2a201a; flex:1 1 320px; min-width:0}
figcaption .cap a{display:block; margin-top:8px; font-size:.9em}
figcaption .credit{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-neutral); flex:0 1 auto; line-height:1.4}

/* 1 · plate: the photograph on a brick-red mat, caption inside the mat */
.fig-plate{background:var(--c-mat-ground); padding:26px}
.fig-plate img{width:100%}
.fig-plate figcaption{margin-top:16px}
.fig-plate figcaption .cap{color:var(--c-on-ground)}
.fig-plate figcaption .credit{color:var(--c-on-ground)}

/* 2 · column: inset hairline frame, caption hung off a teal rule */
.fig-column{max-width:var(--prose); margin-inline:auto}
.fig-column .frame{border:1px solid var(--c-mat); padding:10px; background:#fff}
.fig-column figcaption{border-top:2px solid var(--c-accent); padding-top:10px}

/* 3 · inset: small, sits in the margin column where there is one */
.fig-inset .frame{border-left:4px solid var(--c-ground); padding-left:14px}
.fig-inset figcaption{flex-direction:column; gap:8px; align-items:flex-start}
.fig-inset figcaption .cap{font-size:15px; flex:1 1 auto}

/* drawn emblem in the margin */
.emblem-note{background:var(--c-mat-ground); padding:22px}
.emblem-note svg{width:100%; max-width:220px; height:auto; color:var(--c-ink); margin-bottom:14px}
.emblem-note .label{color:var(--c-on-ground); margin-bottom:8px}
.emblem-note p{font-size:15px; line-height:1.55; color:var(--c-on-ground)}

/* margin notes and panels */
.mnote{border-left:3px solid var(--c-accent); padding:4px 0 4px 16px}
.mnote--pull{border-left-width:6px; padding-left:20px}
.mnote .label{margin-bottom:10px}
.mnote p{font-size:15.5px; line-height:1.6; color:#2a201a}
.mnote ul{list-style:none; display:flex; flex-direction:column; gap:12px; margin-top:10px}
.mnote li{font-size:15px; line-height:1.55}
.mnote.mnote--pull p{font-family:"Chivo",Arial,sans-serif; font-weight:700; font-size:22px; line-height:1.18; letter-spacing:-.015em; color:var(--c-ink)}

.panel{background:var(--c-accent); color:var(--c-on-accent); padding:34px}
.panel > .label{color:var(--c-on-accent); margin-bottom:20px; display:flex; align-items:center; gap:10px}
.panel a{color:#bfeceb; border-bottom-color:rgba(191,236,235,.4)}
.panel a:hover{color:#fff}
.panel--paper{background:#fff; color:var(--c-body); border:1px solid var(--c-mat)}
.panel--paper > .label{color:var(--c-accent)}

/* components */
.timeline{list-style:none; display:grid; gap:0}
.timeline li{display:grid; gap:4px 24px; padding:14px 0; border-top:1px solid rgba(247,245,242,.28)}
.timeline li:last-child{border-bottom:1px solid rgba(247,245,242,.28)}
.t-when{font-family:"Chivo",Arial,sans-serif; font-weight:700; font-size:17px; letter-spacing:.01em}
.t-what{font-size:16.5px; line-height:1.55}
.panel--paper .timeline li{border-color:var(--c-mat)}

.deflist{display:grid; gap:16px}
.deflist div{display:grid; gap:4px}
.deflist dt{font-family:"Chivo",Arial,sans-serif; font-weight:700; font-size:17px}
.deflist dd{margin:0; font-size:16.5px; line-height:1.55}

.statrow{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.statblock{display:flex; flex-direction:column; gap:8px}
.stat-num{font-family:"Chivo",Arial,sans-serif; font-weight:900; font-size:clamp(34px,4vw,52px); line-height:.9; letter-spacing:-.03em}
.stat-label{font-size:15px; line-height:1.5}

.datatable,.versus{width:100%; border-collapse:collapse; font-size:16.5px}
.datatable th,.datatable td,.versus th,.versus td{text-align:left; padding:12px 16px; border-bottom:1px solid rgba(247,245,242,.28); vertical-align:top}
.panel--paper .datatable th,.panel--paper .datatable td,.tablewrap .datatable th,.tablewrap .datatable td{border-color:var(--c-mat)}
.datatable th,.versus th{font-family:"Chivo",Arial,sans-serif; font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase}
.versus td:first-child{font-weight:600}
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}

.callout{background:#fff; border:1px solid var(--c-mat); border-left:6px solid var(--c-ground); padding:24px 26px}
.callout p{font-size:17.5px; line-height:1.6; color:#2a201a}
.callout ul{list-style:none; display:flex; flex-direction:column; gap:10px; margin-top:12px}
.callout li{font-size:16.5px; line-height:1.55; padding-left:18px; position:relative}
.callout li::before{content:""; position:absolute; left:0; top:.62em; width:8px; height:2px; background:var(--c-accent)}
.pullquote{margin:0; padding:0 0 0 26px; border-left:6px solid var(--c-ground)}
.pullquote p{font-family:"Chivo",Arial,sans-serif; font-weight:700; font-size:clamp(24px,2.6vw,34px); line-height:1.18; letter-spacing:-.02em; color:var(--c-ink)}
.blockquote{margin:0; background:#fff; border:1px solid var(--c-mat); padding:26px}
.blockquote p{font-size:19px; line-height:1.6; font-style:italic}
.blockquote cite{display:block; margin-top:14px; font-style:normal; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-neutral)}
.note{font-size:16px; line-height:1.6; color:#4a423c; border-top:2px solid var(--c-mat); border-bottom:2px solid var(--c-mat); padding:14px 0}

.gallery{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.gallery figure{background:#fff; border:1px solid var(--c-mat); padding:10px}
.gallery img{aspect-ratio:4/3; object-fit:cover; width:100%}
.gallery figcaption{margin-top:10px}

.profile-grid{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.profile-card{background:#fff; border:1px solid var(--c-mat); padding:20px; display:flex; flex-direction:column; gap:10px}
.profile-card .p-photo{width:100%; aspect-ratio:1/1; object-fit:cover}
.profile-card h3{font-weight:700; font-size:21px; color:var(--c-ink)}
.profile-card .p-role{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-accent)}
.profile-card p{font-size:16px; line-height:1.55}
.profile-card .p-links{margin-top:auto}
.profile-card .p-attr{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--c-neutral)}

.org-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.org-card{display:grid; grid-template-columns:56px minmax(0,1fr); gap:14px; align-items:center; background:#fff; border:1px solid var(--c-mat); padding:12px 14px; border-bottom:1px solid var(--c-mat)}
.org-card:hover{background:var(--c-paper)}
.org-logo{width:56px; height:56px; object-fit:contain; background:var(--c-ink)}
.org-name{font-family:"Chivo",Arial,sans-serif; font-weight:700; font-size:16px; color:var(--c-ink)}
.org-host{font-size:13px; color:var(--c-neutral)}
.entity-ref{white-space:nowrap}

.further-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.further-grid a{background:#fff; border:1px solid var(--c-mat); padding:18px; font-family:"Chivo",Arial,sans-serif; font-weight:700; font-size:18px; line-height:1.2; color:var(--c-ink)}
.further-grid a:hover{background:var(--c-paper); color:var(--c-ink)}

/* end furniture */
.art-end{padding:0 var(--gut)}
.related{max-width:var(--wide); margin:72px auto 0; border-top:3px solid var(--c-ink); padding-top:22px}
.related > .label{margin-bottom:20px}
.related-links{list-style:none; display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.related-links li{display:flex}
.related-links a{display:flex; flex-direction:column; gap:12px; background:#fff; border:1px solid var(--c-mat); padding:0 0 18px; width:100%; color:var(--c-ink)}
.related-links a:hover{background:var(--c-paper)}
.related-links img{aspect-ratio:16/9; object-fit:cover; width:100%}
.related-links .rl-kick{display:flex; align-items:center; gap:8px; color:var(--c-accent); padding:0 18px}
.related-links .rl-title{font-family:"Chivo",Arial,sans-serif; font-weight:700; font-size:19px; line-height:1.16; padding:0 18px}
.section-return{max-width:var(--wide); margin:40px auto 0; display:flex; flex-wrap:wrap; gap:12px 30px; align-items:center}

/* 404 */
.err{padding:120px var(--gut) 140px; text-align:left}
.err h1{font-weight:900; font-size:clamp(48px,10vw,150px); line-height:.86; letter-spacing:-.05em; color:var(--c-display); max-width:16ch}
.err p{font-size:21px; color:var(--c-on-ground); margin-top:26px; max-width:50ch}
.err .more{margin-top:30px; display:inline-flex; gap:10px; color:var(--c-on-ground); border-bottom:3px solid var(--c-on-ground); font-weight:600; letter-spacing:.16em; text-transform:uppercase; font-size:14px; padding-bottom:4px}

/* styleguide scaffolding */
.sg-section{max-width:var(--wide); margin:0 auto 64px}
.sg-section > h2{font-weight:900; font-size:30px; color:var(--c-ink); border-bottom:3px solid var(--c-ink); padding-bottom:10px; margin-bottom:24px}
.sg-note{font-size:14px; color:var(--c-neutral); margin-bottom:18px}
.sg-block{margin-bottom:34px}

/* ---------- responsive ---------- */
@media (min-width:700px){
  .map-pair{grid-template-columns:180px minmax(0,1fr); gap:24px; align-items:start}
  .lead-grid{grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr)}
  .num-grid{grid-template-columns:auto minmax(0,1fr)}
  .pair-grid{grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr)}
  .lede-entry__inner{grid-template-columns:minmax(0,1.25fr) minmax(280px,1fr)}
  .reg-row{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); align-items:baseline}
  .timeline li{grid-template-columns:200px minmax(0,1fr)}
  .deflist div{grid-template-columns:240px minmax(0,1fr); gap:20px}
}
@media (min-width:1000px){
  :root{--fs-body:17.5px}
  .lead-grid{grid-template-columns:minmax(0,1120px) minmax(280px,1fr); gap:60px}
  .pair-grid{gap:40px}
}
@media (max-width:1199px){
  .num-band .num-grid + .num-grid{grid-template-columns:minmax(0,1fr)}
  .num-band .num-grid + .num-grid .dam-list{grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:0}
}
@media (min-width:1200px){
  :root{--fs-prose:19px; --fs-cap:16.5px}
  .fig-inset .frame{padding-left:16px}
}
/* first breakpoint above the desktop cap: the margin column opens */
@media (min-width:1600px){
  :root{--prose:900px; --marg:340px; --wide:1440px; --fs-prose:19.5px; --para-gap:24px}
  .art-wrap .row{max-width:calc(var(--prose) + var(--colgap) + var(--marg)); display:grid; grid-template-columns:var(--prose) var(--colgap) var(--marg); align-items:start}
  .art-wrap .col-prose{grid-column:1}
  .art-wrap .col-margin{grid-column:3; margin-top:0; margin-bottom:0}
  .art-head .row{max-width:calc(var(--prose) + var(--colgap) + var(--marg))}
  .fig-inset .frame{border-left-width:5px}
  .entry-grid__inner{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sec-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* second breakpoint above the cap: prose, numerals and breakouts all step up */
@media (min-width:2100px){
  :root{--prose:940px; --marg:400px; --wide:1640px; --fs-prose:21px; --fs-cap:17.5px; --fs-body:19px; --colgap:64px}
  .num-band .numeral,.num-grid p.numeral{font-size:520px}
  .art-head h1{font-size:92px}
  .lead{font-size:26px}
  .entry-grid__inner{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sec-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .related-links{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:699px){
  .breakout{margin:36px auto}
  .col-margin{margin-top:32px; margin-bottom:32px}
  .fig-plate{padding:14px}
  .panel{padding:24px 20px}
  .sponsor{grid-template-columns:minmax(0,1fr); gap:12px}
  .sponsor img{width:100%; max-width:260px; height:52px}
  .sponsor-name{white-space:normal}
  .quiet-band{padding:70px var(--gut)}
  .num-band,.pair-band,.sec-index,.sponsors{padding-top:64px}
}

/* 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}
.sponsors__head{flex-wrap:wrap!important}
.sponsors__head > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-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-size: the design never sized .sponsor-blurb, so it inherited body copy.
   Relative, so it still follows the design's scale. */
.sponsor .sponsor-blurb{font-size:.8em;line-height:1.45}
.sponsor .sp-brand{font-weight:700}

/* 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):not(.sponsor-box):not(.sp-logo):not(.sponsor__logo){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}
/* the mobile un-clamp is retired: the operator asked for "2-3 rows max" on phones, which is
   what the desktop rule above already does — so mobile simply keeps it. */
@media (max-width:640px){.sponsor.sponsor .sponsor-blurb{-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}}

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

/* MAPKIT_BEGIN — injected real geodata; pins are links */
.map-slot{padding:0;background:none!important;border:0!important;display:flex;align-items:center;justify-content:center;min-height:0!important}
.map-slot>svg.mapkit{width:100%!important;max-width:100%;height:auto;max-height:none;margin:0 auto}
.map-slot{width:100%}
.map-slot{aspect-ratio:auto!important;height:auto!important}
.map-slot::after,.map-slot::before{content:none!important;display:none!important}
.map-figure figcaption{}
.mapkit-panels{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:16px;width:100%}
.mapkit-panels>svg.mapkit{width:100%;height:auto;display:block}
@media (max-width:700px){.mapkit-panels{grid-template-columns:minmax(0,1fr)}}
.mapkit__pin{cursor:pointer}
.mapkit__pin text{paint-order:stroke;stroke:#0C0F13;stroke-width:3px;stroke-linejoin:round}
.mapkit__pin:hover circle{r:9.1}
.mapkit__pin:hover text{font-weight:700}
/* MAPKIT_END */

/* 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. */
.sponsor-name.sponsor-name{color:rgb(128,106,50)!important;opacity:1!important}

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

/* op-text-spill: the page scrolled sideways on phones because TEXT spilled out of boxes that
   themselves fit — which no element rect shows: div.dam-card h3 (word, "Englewood, Germantown, Locki" +6px). Each is released the way its box needs
   (a code block scrolls inside itself, nowrap copy may wrap, a squeezing row may wrap, a box
   wider than its column is held to it, a long word may break). Structural only — no spacing
   value of mine. Verified on every failing page with webfonts settled; desktop unchanged. */
@media (max-width:400px){
  div.dam-card h3{overflow-wrap:anywhere!important;min-width:0!important}
}

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div > figure.fig-plate > img,
  div.breakout > figure.article-figure.fig-plate > img,
  div.entry-grid__inner > a.entry > img.entry__img,
  div.lead-grid > figure.fig-plate > img,
  div.lede-entry__inner > div > img,
  figure.article-figure.fig-column > div.frame > img,
  figure.article-figure.fig-inset > div.frame > img,
  li > a > img){height:auto}
/* op-img-dims:end */

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