/* fieraemaia.com — Fiera Emaia
   PALETTE (3 saturated + 2 grounds, each with a job)
   --ground   #E4E1DA  page ground (concrete)
   --paper    #F2F1EE  raised panels, tables, mats
   --ink      #16181A  type, dark bands, logo grounds
   --accent   #F2A100  sodium amber — full bands, tabs, plate numbers
   --secondary#2F4A22  work-light olive — second area, quiet bands
   --accent-ink #8A5A00 the accent held at text size on light grounds
*/
:root{
  --ground:#E4E1DA; --paper:#F2F1EE; --ink:#16181A; --ink-2:#0F1112;
  --accent:#F2A100; --accent-ink:#8A5A00; --secondary:#2F4A22;
  --rule:#CFCAC0; --rule-dark:#34383B; --muted:#5A5C5E; --muted-dark:#9E9A92;
  --measure:44rem; --page:88rem; --gut:clamp(20px,4vw,44px);
  --serif:"Petrona",Georgia,"Times New Roman",serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17.5px/1.62 var(--serif);
  -webkit-font-smoothing:antialiased;text-wrap:pretty}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent-ink)}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-0.02em;line-height:1.08}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
hr{border:0;border-top:1px solid var(--rule);margin:2.4rem 0}
::selection{background:var(--accent);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.wrap{max-width:var(--page);margin:0 auto;padding-inline:var(--gut)}
.kicker{font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.kicker--quiet{color:var(--muted)}
.ico{width:1.35em;height:1.35em;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:-0.28em}
.ico--lg{width:64px;height:64px;stroke-width:1.2}
.ico--xl{width:100%;height:auto;stroke-width:1.1}

/* ---------- masthead ---------- */
.masthead{background:var(--ink);color:var(--paper)}
.masthead a{color:var(--paper)}
.masthead a:hover{color:var(--accent)}
.mast-top{display:flex;flex-wrap:wrap;gap:18px 40px;align-items:flex-start;justify-content:space-between;padding:22px 0 18px}
.wordmark{display:block;font:600 clamp(30px,3.4vw,42px)/1 var(--serif);letter-spacing:-0.025em}
.mast-strap{margin:7px 0 0;font:400 11.5px/1.35 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.mast-blurb{margin:0;max-width:34ch;font-size:16.5px;line-height:1.4;color:#BFBBB2}
.nav-idx-band{border-top:1px solid var(--rule-dark)}
.nav-index{padding:18px 0 22px;display:grid;grid-template-columns:repeat(6,1fr);gap:18px 22px}
.nav-sec{min-width:0}
.nav-sec>a{display:flex;align-items:center;gap:9px;padding-bottom:7px;margin-bottom:8px;
  border-bottom:1px solid var(--accent);font:600 17.5px/1.1 var(--serif);letter-spacing:-0.01em}
.nav-sec ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.nav-sec li a{font-size:14.5px;line-height:1.28;color:#A6A29A}
.nav-sec li a:hover{color:var(--accent)}
.nav-util{background:var(--ink-2);border-top:1px solid var(--rule-dark)}
.nav-util .wrap{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline;padding-block:11px}
.nav-util a{font:400 13px/1 var(--mono);letter-spacing:.06em;color:#BFBBB2}
.nav-util .lbl{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#6E6A63}
.nav-here{background:var(--ink-2);border-top:1px solid var(--rule-dark)}
.nav-here .wrap{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;padding-block:11px}
.nav-here .cur{display:flex;align-items:center;gap:8px;font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.nav-here a{font-size:15px;color:#BFBBB2}

/* ---------- bands ---------- */
.band{padding-block:clamp(34px,5vw,62px)}
.band--tight{padding-block:clamp(24px,3vw,34px)}
.band--paper{background:var(--paper)}
.band--ink{background:var(--ink);color:var(--paper)}
.band--ink a{color:var(--paper)}
.band--accent{background:var(--accent);color:var(--ink)}
.band--accent .kicker{color:var(--ink)}
.band--accent .band-head{border-color:rgba(22,24,26,.4)}
.band--olive{background:var(--secondary);color:#EDEBE2}
.band--olive a{color:#EDEBE2}
.band-head{display:flex;flex-wrap:wrap;gap:10px 30px;align-items:baseline;justify-content:space-between;
  border-bottom:1px solid var(--ink);padding-bottom:11px;margin-bottom:clamp(20px,3vw,32px)}
.band-head h2{font-size:clamp(24px,2.6vw,32px)}
.band--ink .band-head,.band--olive .band-head{border-color:var(--rule-dark)}

/* lead / opener */
.opener{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(240px,1fr);gap:clamp(28px,4vw,60px);align-items:center}
.opener h1{font-size:clamp(38px,5.6vw,74px);line-height:.96;letter-spacing:-0.032em}
.opener .lead{font-size:clamp(18px,1.5vw,21px);max-width:46ch}
.emblem-key{display:flex;flex-wrap:wrap;gap:8px 30px;border-top:1px solid rgba(22,24,26,.35);
  margin-top:26px;padding-top:12px;font:400 12px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase}

/* one-line ledger */
.ledger{display:flex;flex-wrap:wrap;font:400 12.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.ledger span{padding:13px 24px;border-left:1px solid var(--rule-dark)}
.ledger span:first-child{padding-left:0;border-left:0;color:var(--accent)}
.quiet-line{margin:0;max-width:62ch;font-size:clamp(22px,2.6vw,34px);line-height:1.26;font-weight:400;letter-spacing:-0.012em}

/* section rows on the homepage */
.sec-row{display:grid;grid-template-columns:76px minmax(0,1.05fr) minmax(0,1.5fr) auto;gap:10px 28px;
  align-items:baseline;padding:20px 0;border-bottom:1px solid var(--rule)}
.sec-row:first-of-type{border-top:1px solid var(--ink)}
.sec-no{font:300 32px/1 var(--mono);color:var(--accent-ink)}
.sec-name{display:flex;align-items:center;gap:11px;font-size:clamp(24px,2.4vw,31px);font-weight:600;letter-spacing:-0.022em}
.sec-blurb{margin:0;font-size:16.5px;color:var(--muted)}
.sec-row .go{font:400 12px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);text-wrap:balance}

/* seconds: three to read */
.seconds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,38px)}
.card{display:flex;flex-direction:column;height:100%;background:var(--paper);border:1px solid var(--rule)}
.card .shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink)}
.card .shot img{width:100%;height:100%!important;object-fit:cover}
.card .tab{position:absolute;top:0;left:0;background:var(--accent);color:var(--ink);
  padding:5px 11px;font:500 11px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase}
.card .body{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:clamp(20px,1.9vw,24px);line-height:1.14;margin-bottom:7px;min-height:2.28em}
.card p{font-size:16px;color:var(--muted);margin:0}
.card .meta{margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:8px;
  font:500 11px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--accent-ink)}

/* register table band */
.datatable{width:100%;border-collapse:collapse;font-size:16px}
.datatable caption{text-align:left;padding-bottom:10px;font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.datatable th{text-align:left;font:500 11px/1.2 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);padding:9px 14px 9px 0;vertical-align:bottom}
.datatable td{border-bottom:1px solid var(--rule);padding:12px 14px 12px 0;vertical-align:top}
.datatable tbody tr:hover{background:#EAE6DC}
.datatable .num{font:400 14px/1.4 var(--mono);white-space:nowrap}
.datatable .no{font:400 13px/1.6 var(--mono);color:var(--accent-ink)}
.datatable .name{font-size:18.5px;font-weight:600;letter-spacing:-0.012em}
.datatable .sub{display:block;font-size:15px;color:var(--muted);margin-top:1px}
.versus{width:100%;border-collapse:collapse;font-size:16.5px}
.versus caption{text-align:left;padding-bottom:10px;font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.versus th{text-align:left;padding:10px 16px 10px 0;border-bottom:2px solid var(--ink);
  font:600 17px/1.2 var(--serif)}
.versus th:first-child{font:500 11px/1.2 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.versus td{padding:12px 16px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.versus tbody th{border-bottom:1px solid var(--rule);font:500 11px/1.3 var(--mono);letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);width:12rem}
.table-scroll{overflow-x:auto}

/* 48-hour scale */
.scale svg{display:block;width:100%;height:34px;stroke:currentColor;fill:none;stroke-width:1.2}
.stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-top:16px}
.stage{border-top:2px solid var(--accent);padding-top:13px}
.stage h3{font-size:21px;margin-bottom:7px}
.stage p{font-size:15.5px;color:var(--muted);margin:0}
.stage .when{display:block;font:400 12px/1 var(--mono);letter-spacing:.12em;color:var(--accent-ink);margin-bottom:6px}

/* ---------- figure system: four treatments, one drawing language ---------- */
figure{margin:0}
figcaption{padding-top:12px}
.figcap{margin:0 0 6px;font-size:16.5px;line-height:1.42}
.credit{display:block;margin:0;font:400 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8A857C}
/* 1 — plate: photo on a mat, ink border, amber plate tab */
.article-figure.fig--plate{background:var(--paper);border:1px solid var(--ink);padding:12px}
.fig--plate .holder{position:relative}
.fig--plate .tab{position:absolute;top:0;left:0;background:var(--accent);color:var(--ink);
  padding:5px 12px;font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.fig--plate figcaption{padding:12px 2px 0}
/* 2 — bleed: breaks the measure, caption block below on the ground */
.article-figure.fig--bleed img{width:100%;max-height:76vh;object-fit:cover}
.fig--bleed figcaption{display:grid;grid-template-columns:5.5rem minmax(0,1fr) 12rem;gap:10px 28px;
  align-items:start;border-top:1px solid var(--ink);margin-top:0;padding-top:12px}
.fig--bleed .figcap{font-size:18.5px;max-width:60ch}
/* 3 — inset: narrow, amber rule over, caption offset beside */
.article-figure.fig--inset{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:start}
.fig--inset .holder{border-top:2px solid var(--accent);padding-top:11px}
.fig--inset figcaption{padding-top:0}
.fig--inset .figcap{font-size:16px}
/* 4 — column: hairline frame, hanging caption */
.article-figure.fig--column{border:1px solid var(--rule);padding:10px;background:var(--paper)}
.fig--column figcaption{padding:11px 2px 2px;border-top:1px solid var(--rule);margin-top:11px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.gallery figure{border:1px solid var(--rule);background:var(--paper);padding:9px}
.gallery img{aspect-ratio:16/10;object-fit:cover;width:100%;height:auto}

/* ---------- article ---------- */
.article{display:grid;grid-template-columns:minmax(var(--gut),1fr) minmax(0,var(--measure)) minmax(var(--gut),1fr);
  padding-bottom:clamp(40px,6vw,80px)}
.article>*{grid-column:2}
.article>.bleed{grid-column:1/-1}
.article>.wide{grid-column:1/-1;width:min(var(--page),100%);margin-inline:auto;padding-inline:var(--gut)}
.article-head{padding:clamp(28px,4vw,52px) 0 clamp(18px,2vw,26px)}
.article-head .where{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.article-head h1{font-size:clamp(32px,4.6vw,60px);line-height:.99;letter-spacing:-0.03em}
.lead{margin:18px 0 0;font-size:clamp(18px,1.5vw,21.5px);line-height:1.42;color:#33373A;font-weight:400}
.prose{font-size:19px;line-height:1.66;color:#22252A}
.prose h2{margin:2.1em 0 .55em;font-size:clamp(24px,2.5vw,31px)}
.prose h3{margin:1.8em 0 .4em;font-size:21px}
.prose a{border-bottom:1px solid var(--accent);padding-bottom:1px}
.prose a:hover{background:var(--accent);border-color:var(--accent)}
.prose>*:first-child{margin-top:0}
.article .article-figure{margin-block:clamp(26px,3.4vw,40px)}
.article .bleed.article-figure{margin-block:clamp(30px,4vw,52px)}
.pullquote{margin:clamp(28px,3.4vw,44px) 0;padding:0 0 0 26px;border-left:3px solid var(--accent)}
.pullquote p{margin:0;font-size:clamp(22px,2.4vw,29px);line-height:1.24;letter-spacing:-0.018em}
.blockquote{margin:clamp(24px,3vw,36px) 0;padding:22px 26px;background:var(--paper);border-left:3px solid var(--secondary)}
.blockquote p{margin:0 0 10px;font-size:19px;line-height:1.5}
.blockquote cite{font:400 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-style:normal}
.callout{margin:clamp(24px,3vw,36px) 0;padding:20px 24px;background:var(--paper);border:1px solid var(--ink);
  border-top:6px solid var(--accent)}
.callout p{margin:0;font-size:18px;line-height:1.5}
.note{font-size:16.5px;line-height:1.5;color:var(--muted);padding-left:18px;border-left:2px solid var(--rule)}
/* notes-for-design furniture */
.board{margin:clamp(28px,3.6vw,46px) 0;background:var(--paper);border:1px solid var(--ink);padding:clamp(18px,2.2vw,26px)}
.board .kicker{display:block;margin-bottom:14px}
.board-grid{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:26px;align-items:start}
.board ol{list-style:none;margin:0;padding:0}
.board li{display:grid;grid-template-columns:2.3rem minmax(0,1fr);gap:14px;padding:11px 0;border-top:1px solid var(--rule)}
.board li:first-child{border-top:0;padding-top:0}
.board li .n{font:400 13px/1.55 var(--mono);color:var(--accent-ink)}
.board li b{display:block;font-weight:600;font-size:17.5px;line-height:1.3}
.board li span.d{display:block;font-size:16px;line-height:1.45;color:var(--muted);margin-top:2px}
.board .diagram{color:var(--ink);opacity:.5}
.bleed>.wide,.article-figure.fig--bleed figcaption.wide{width:100%;max-width:var(--page);margin-inline:auto;padding-inline:var(--gut)}
.tl-block{margin:clamp(26px,3.2vw,42px) 0}
.tl-block .kicker{display:block;margin-bottom:10px}
.wrongs{background:var(--secondary);color:#EDEBE2;padding-inline:0;border:0}
.wrongs .kicker{color:var(--accent)}
.wrongs .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px}
.wrongs .cols>div{border-top:2px solid var(--accent)}
.wrongs h4{margin:12px 0 6px;font-size:19px;line-height:1.24}
.wrongs .num{font:300 34px/1 var(--mono);color:var(--accent);display:block;padding-top:12px}
.wrongs p{margin:0;font-size:16.5px;line-height:1.5;color:#D6D3C9}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--rule);
  margin:clamp(24px,3vw,38px) 0;border:1px solid var(--rule)}
.statblock{background:var(--paper);padding:18px 18px 20px}
.stat-num{display:block;font:400 clamp(26px,3vw,38px)/1 var(--mono);letter-spacing:-0.02em;color:var(--ink)}
.stat-label{display:block;margin-top:8px;font-size:15.5px;line-height:1.4;color:var(--muted)}
.timeline{list-style:none;margin:clamp(24px,3vw,38px) 0;padding:0;border-top:2px solid var(--ink)}
.timeline li{display:grid;grid-template-columns:minmax(9rem,14rem) minmax(0,1fr);gap:8px 24px;
  padding:13px 0;border-bottom:1px solid var(--rule)}
.t-when{font:500 12px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.t-what{font-size:17px;line-height:1.45}
.chart figcaption{font-size:15.5px;color:var(--muted)}
.chart svg{width:100%;height:auto;overflow:visible}
.chart .bar-l{font:400 12px var(--mono);fill:var(--muted)}
.chart .bar-v{font:400 12px var(--mono);fill:var(--ink)}

/* related / further / lists */
.related-links,.cat-list{list-style:none;margin:0;padding:0}
.related-links li{border-top:1px solid var(--rule)}
.related-links li:last-child{border-bottom:1px solid var(--rule)}
.related-links a{display:flex;align-items:baseline;gap:12px;padding:13px 0;font-size:18px;line-height:1.3}
.related-links .ico{color:var(--accent-ink)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(18px,2.4vw,32px)}
.further-grid>a{display:block;border-top:2px solid var(--ink);padding-top:13px}
.further-grid>a>span{display:block}
.further-grid .t{font-size:21px;font-weight:600;line-height:1.16;letter-spacing:-0.018em;margin-bottom:6px}
.further-grid .d{font-size:15.5px;line-height:1.45;color:var(--muted)}
.cat-list li{border-bottom:1px solid var(--rule)}
.cat-list li:first-child{border-top:1px solid var(--ink)}
.cat-list a{display:grid;grid-template-columns:3.4rem minmax(0,1.1fr) minmax(0,1.5fr);gap:8px 26px;
  align-items:baseline;padding:17px 0}
.cat-list .n{font:400 13px/1.7 var(--mono);color:var(--accent-ink)}
.cat-list .t{font-size:clamp(20px,2vw,26px);font-weight:600;letter-spacing:-0.02em;line-height:1.14}
.cat-list .d{font-size:16px;line-height:1.45;color:var(--muted)}
.az{display:flex;flex-wrap:wrap;gap:7px 13px;font:400 13px/1 var(--mono)}
.entity-ref{border-bottom:1px solid var(--accent)}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.profile-card{background:var(--paper);border:1px solid var(--rule);padding:18px;display:flex;flex-direction:column;height:100%}
.profile-card .p-photo{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;margin-bottom:14px}
.profile-card h3{font-size:21px;margin-bottom:4px}
.profile-card .p-role{font:500 11.5px/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:10px}
.profile-card p{font-size:16px;line-height:1.5;color:var(--muted)}
.profile-card .p-links{margin-top:auto;padding-top:12px;font-size:16px}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.org-card{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:center;
  background:var(--paper);border:1px solid var(--rule);padding:13px}
.org-card .org-logo{width:56px;height:56px!important;object-fit:contain;background:var(--ink)}
.org-card .org-name{display:block;font-size:17.5px;font-weight:600;line-height:1.2}
.org-card .org-host{display:block;font:400 12px/1.4 var(--mono);color:var(--muted)}

/* ---------- supporters ---------- */
.supporters{background:var(--ink);color:#EDEBE2;border-top:4px solid var(--accent)}
.supporters .wrap{padding-block:clamp(26px,3vw,40px)}
.sup-head{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline;justify-content:space-between;
  border-bottom:1px solid var(--rule-dark);padding-bottom:11px;margin-bottom:20px}
.sup-head h2{font-size:22px}
.sup-head .kicker{color:var(--accent)}
.sup-group{margin-bottom:22px}
.sup-group>.kicker{display:block;margin-bottom:12px;color:#7D7972}
/* Four equal columns, stepping to two then one. The column COUNT is fixed by the
   breakpoint and never by the number of slots, so every row in every group divides
   the same way, every tile is the same width, and a row holding a single slot cannot
   stretch. Both groups (4 and 8) divide exactly by 4, 2 and 1, so no run leaves a
   ragged hole at any resolution. Do not swap this for auto-fit or a flex basis. */
.sponsor-run{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sponsor{width:100%;max-width:100%;background:var(--ink-2);border:1px solid var(--rule-dark);
  padding:12px;display:flex;flex-direction:column;gap:9px}
.sponsor:hover{border-color:var(--accent)}
.sponsor img{width:100%;height:44px!important;max-height:44px;object-fit:contain;object-position:left center}
.sponsor .sponsor-name{display:block;font-size:16px;line-height:1.25;font-weight:600;color:#EDEBE2}
.sponsor .sponsor-blurb{display:block;font-size:14.5px;line-height:1.4;color:#A6A29A}
.sponsor.feat{border-top:3px solid var(--accent)}
.sup-note{margin:0;font-size:14.5px;color:#7D7972;max-width:70ch}

/* ---------- footer ---------- */
.foot{background:var(--ink-2);color:#EDEBE2}
.foot a{color:#BFBBB2}
.foot a:hover{color:var(--accent)}
.foot .wrap{padding-block:clamp(28px,3.4vw,44px);display:grid;
  grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:28px 40px}
.foot h2{font-size:26px;margin-bottom:8px}
.foot p{font-size:15px;line-height:1.5;color:#8F8B84}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:15.5px}
.foot .kicker{display:block;margin-bottom:12px;color:#6E6A63}

/* ---------- utility pages ---------- */
.page-head{padding-block:clamp(30px,4.4vw,58px)}
.page-head h1{font-size:clamp(34px,5vw,64px);letter-spacing:-0.032em}
.page-head .lead{max-width:52ch}
.sec-hero{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) minmax(260px,26rem);
  gap:18px clamp(24px,4vw,48px);align-items:end;padding-block:clamp(30px,4.4vw,56px);border-bottom:1px solid var(--ink)}
.sec-hero .big-no{font:300 clamp(56px,8vw,96px)/.8 var(--mono);color:var(--accent-ink)}
.sec-hero h1{font-size:clamp(38px,6vw,74px);letter-spacing:-0.034em;display:flex;align-items:center;gap:16px}
.sec-hero .ico{width:.72em;height:.72em;stroke-width:1.2}
.sec-hero p{margin:0;font-size:clamp(17px,1.4vw,19.5px);line-height:1.45;color:#3A3D40}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.prose-page{max-width:var(--measure);font-size:18.5px;line-height:1.62}
.prose-page h2{margin:1.8em 0 .5em;font-size:26px}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .nav-index{grid-template-columns:repeat(3,1fr)}
  .seconds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stages{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:860px){
  body{font-size:17px}
  .opener{grid-template-columns:1fr}
  .opener .emblem{max-width:340px}
  .sec-row{grid-template-columns:52px minmax(0,1fr);row-gap:6px}
  .sec-row .sec-blurb,.sec-row .go{grid-column:2}
  .sec-row .go{justify-self:start;white-space:normal}
  .sec-hero{grid-template-columns:auto minmax(0,1fr)}
  .sec-hero p{grid-column:1/-1}
  .two-col{grid-template-columns:1fr}
  .fig--bleed figcaption{grid-template-columns:1fr}
  .fig--bleed figcaption .credit{text-align:left}
  .board-grid{grid-template-columns:1fr}
  .board .diagram{display:none}
  .article-figure.fig--inset{grid-template-columns:1fr}
  .cat-list a{grid-template-columns:2.6rem minmax(0,1fr)}
  .cat-list .d{grid-column:2}
  .ledger span{padding:10px 16px}
  .ledger span:first-child{flex:0 0 100%;padding-bottom:4px}
}
@media (max-width:620px){
  .nav-index{grid-template-columns:1fr;gap:14px}
  .seconds{grid-template-columns:1fr}
  .stages{grid-template-columns:1fr}
  .card h3{min-height:0}
  .foot .wrap{grid-template-columns:1fr}
  .prose{font-size:18px}
  .timeline li{grid-template-columns:1fr}
}
@media (max-width:1080px){
  .sponsor-run{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .sponsor-run{grid-template-columns:100%}
}
@media print{
  .masthead,.nav-util,.nav-here,.supporters{background:#fff;color:#000}
  .masthead a,.foot a{color:#000}
}

/* register controls */
.reg-tools{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;padding-bottom:18px}
.reg-set{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.reg-set .kicker{margin-right:4px}
.reg-btn{font:400 12.5px/1 var(--mono);letter-spacing:.06em;color:var(--ink);background:transparent;
  border:1px solid var(--rule);padding:8px 12px;cursor:pointer;border-radius:0}
.reg-btn:hover{border-color:var(--ink)}
.reg-btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.datatable .hours{display:block}
.hbar{display:block;margin-top:7px;min-width:64px}
.hbar span{display:block;height:4px;background:var(--accent);margin-bottom:2px}
.hbar .down{background:var(--secondary)}
.reg-state{margin:18px 0 0;font:400 15.5px/1.5 var(--serif);color:var(--muted);display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media (max-width:620px){.reg-tools{gap:12px 18px}.reg-btn{padding:7px 10px;font-size:12px}}

/* ---------- article rhythm ----------
   Every block inside an entry is a grid row, so vertical spacing comes from ONE
   row-gap rather than from each component's own margins. That stops adjacent
   items doubling their gaps and stops lifted paragraphs, notes, boards and
   figures from touching the prose above or below them. */
.article{row-gap:clamp(26px,3.4vw,44px)}
.article>.article-head{padding-bottom:0}
.article>.prose,
.article>.article-figure,
.article>.bleed.article-figure,
.article>.pullquote,
.article>.blockquote,
.article>.callout,
.article>.note,
.article>.board,
.article>.tl-block,
.article>.statrow,
.article>.timeline,
.article>.wide{margin-block:0}
.article>.note{border-left:2px solid var(--accent);padding:2px 0 2px 20px;font-size:18px;color:#3A3D40}
.article>.callout{border-top-width:5px}
.article>.tl-block .timeline{margin-block:10px 0}
.article>.prose>h2:first-child{margin-top:.2em}
.article>.prose>h3:first-child{margin-top:.2em}
.prose>*:last-child{margin-bottom:0}
.fig--inset figcaption .kicker{display:block;margin-bottom:7px}
.fig--plate figcaption .credit,.fig--column figcaption .credit{margin-top:6px}
@media (max-width:860px){
  .article>.note{padding-left:16px}
}

/* inset figure: both columns start on the same line, so a short caption reads as a
   column rather than as a hole beside the picture */
.fig--inset figcaption{border-top:1px solid var(--rule);padding-top:11px}
@media (max-width:860px){.fig--inset figcaption{border-top:0;padding-top:2px}}

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

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}

/* sp-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}


/* op-wrap-gutter: these elements carry the build's own gutter class but their own
   rule sets a padding SHORTHAND, which resets left/right to 0 — every line of type
   then sits against the screen edge at phone width. Design's own token is restated
   for the inline axis, on the exact element that lost it. Measured, not guessed:
   each selector below had TEXT within 2px of a viewport edge at 390. */
@media (max-width:900px){
  .wrap.mast-top{padding-inline:var(--gut)}
  .wrap.nav-index{padding-inline:var(--gut)}
}

/* op-nav-collapse: this nav printed 1002px of stacked links at 390 before any content
   (28 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 "block-fill", 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 (900px here), where the button appears and the nav starts closed.
   Folded with the "height-clip" technique and marked with the "chevron" icon — the mechanism
   is deliberately not identical across the fleet either. */
.index-toggle{display:none}
@media (max-width:900px){
  .index-toggle{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:auto;border:1px solid currentColor;border-radius:3px;padding:12px 16px;margin-inline:clamp(20px,4vw,44px);background:color-mix(in srgb, currentColor 9%, transparent);margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .index-toggle-bars{width:8px;height:8px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
  .wrap.nav-index{height:0;overflow:hidden;visibility:hidden;padding-block:0;margin-block:0;border-top-width:0;border-bottom-width:0}
  .index-toggle-c:checked ~ .wrap.nav-index{height:auto;overflow:visible;visibility:visible;padding-block:revert;margin-block:revert;border-top-width:revert;border-bottom-width:revert}
  .nav-idx-band:has(> .index-toggle){display:flow-root}
  .index-toggle:not(:has(~ .wrap.nav-index)){display:none}
}

/* op-footer-compact: the footer printed 10 rows for 10 link(s) in
   2 list(s) — 592px at 390, 6% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too,
   measured 592 -> 394px (33% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:clamp(7px,2.78vw,40px)!important;row-gap:7px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1501px at 390, 17% of the whole page. Two columns bring it to
   811px (46% shorter). Checked before writing: no new overflow, smallest mark still
   140px wide, longest blurb 3 lines, tile heights 99-175px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. Only the tier(s) that were one-per-row are touched (.sponsor-run), 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-run{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:16px!important}
    .sponsor-run > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-run > * *{min-width:0!important;max-width:100%}
    .sponsor-run img,.sponsor-run svg{max-width:100%;height:auto}
  .sponsor-run .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-article-width: the article column was capped at 704px (88 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through grid track 2 of "minmax(var(--gut),1fr) minmax(0,var(--measure)) minmax(var(--gut),1fr)" (declared in .article) 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 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  main.article{grid-template-columns:minmax(var(--gut),1fr) min(816px, 100%) minmax(var(--gut),1fr)!important}
}
@media (min-width:1600px){
  main.article{grid-template-columns:minmax(var(--gut),1fr) min(clamp(816px, 56.667vw, 979px), 100%) minmax(var(--gut),1fr)!important}
  main.article div.prose > :is(p:not([class])){font-size:clamp(19px,1.3194vw,22.8px)!important}
}
/* op-article-width:end */

/* op-hover-pad */
.datatable tbody tr>*:first-child{padding-left:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */

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