/* GRID Photofestival — The Wall
   Palette roles: ground / ink / accent / secondary / quiet
   ground  #F4EEE3  paper, every page sits on it
   ink     #1A1714  type, rules, one full band per page
   accent  #B4276B  magenta — title panels, section numbers, links
   second. #E8A33D  chrome — note panels, corner marks, band grounds
   quiet   #6E655C  labels and credits only
*/
:root{
  --paper:#F4EEE3;
  --paper-2:#EAE1D2;
  --paper-3:#EFE7DA;
  --ink:#1A1714;
  --ink-soft:#4A433C;
  --accent:#B4276B;
  --accent-deep:#8E1D54;
  --second:#E8A33D;
  --second-ink:#241A08;
  --quiet:#6E655C;
  --quiet-2:#8A7F73;
  --rule:rgba(26,23,20,.22);
  --rule-hard:rgba(26,23,20,.55);
  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --text:"Spectral",Georgia,serif;
  --gut:clamp(20px,5vw,56px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.6;
  text-wrap:pretty;
}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
svg{display:block}
.ico{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5}
.ico-lg{width:34px;height:34px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

.wrap{max-width:1360px;margin:0 auto;padding-inline:var(--gut)}
.wrap-mid{max-width:1080px;margin:0 auto;padding-inline:var(--gut)}
.kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--quiet);font-weight:500}
.kicker-accent{color:var(--accent)}

/* ---------- masthead ---------- */
.masthead{padding-top:26px}
.mast-row{display:flex;flex-wrap:wrap;gap:18px 40px;align-items:flex-end;justify-content:space-between;padding-bottom:18px}
.wordmark{display:flex;align-items:baseline;gap:14px;color:var(--ink)}
.wordmark:hover{text-decoration:none;color:var(--ink)}
.wordmark .mark{width:clamp(46px,5.4vw,60px);height:auto;flex:none;stroke:currentColor;fill:none;stroke-width:1.4;align-self:center}
.wordmark .mark .strike{stroke:var(--accent);stroke-width:2.6}
.wordmark b{font-family:var(--text);font-size:clamp(31px,4.4vw,42px);line-height:.92;font-weight:700;letter-spacing:-.015em}
.wordmark span{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--quiet);font-weight:500}
.signature{display:flex;align-items:center;gap:12px;color:var(--accent);max-width:520px}
.signature i{font-style:italic;color:var(--ink);font-size:15.5px;line-height:1.4}
.signature svg{width:10px;height:30px;flex:none;stroke:currentColor;fill:none;stroke-width:1.4}
.mast-rule{border-top:1px solid var(--rule-hard)}
/* the nav is a contact sheet: eight frames, numbered, one of them chosen */
.nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:14px 0 18px;counter-reset:stage}
.nav a{position:relative;display:flex;align-items:center;gap:12px;
  padding:15px 26px 15px 13px;border:1px solid var(--rule-hard);background:transparent;
  color:var(--ink);font-size:15px;font-weight:500;line-height:1.2;
  transition:background .16s linear,color .16s linear}
.nav a::before{counter-increment:stage;content:counter(stage,decimal-leading-zero);
  position:absolute;top:5px;right:9px;font-size:9.5px;letter-spacing:.16em;color:var(--quiet-2);font-weight:500}
.nav a .ico{width:28px;height:28px;opacity:.9;stroke-width:1.3}
.nav a:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.nav a:hover::before{color:#B99C74}
.nav a[aria-current]{background:var(--accent);border-color:var(--accent);color:#F7F2E8}
.nav a[aria-current]::before{color:#F0BFD5}
.nav a[aria-current] .ico{opacity:1}
.nav .browse{border-style:dashed;color:var(--ink-soft)}
.nav .browse::before{content:"\2014";letter-spacing:0}
.nav .browse:hover{color:var(--paper)}

/* ---------- bands ---------- */
.band{padding-block:clamp(56px,7vw,104px)}
.band-tight{padding-block:clamp(34px,4vw,56px)}
.band-paper2{background:var(--paper-2)}
.band-ink{background:var(--ink);color:var(--paper)}
.band-ink .kicker{color:#B99C74}
.band-ink a{color:var(--second)}
.band-ink a:hover{color:#F3CB8C}

/* ---------- lead ---------- */
.lead-figure{position:relative;margin-top:26px}
.lead-figure>img{width:100%;height:clamp(300px,52vw,660px);object-fit:cover}
.lead-panel{background:var(--accent);color:#F7F2E8;padding:clamp(22px,3vw,34px) clamp(22px,3vw,40px)}
@media (min-width:900px){
  .lead-panel{position:absolute;left:var(--gut);bottom:0;max-width:min(800px,72%)}
}
.lead-panel h1{font-family:var(--display);font-size:clamp(32px,4.6vw,60px);line-height:1.05}
.lead-panel .deck{margin-top:14px;font-size:clamp(16px,1.3vw,17px);line-height:1.55;max-width:60ch}
.lead-panel .kicker{color:#F3D3E2}
.lead-panel a{color:#FFF;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:2px}
.lead-panel a:hover{color:#FFF;text-decoration:none;border-bottom-color:#FFF}
.lead-meta{display:flex;flex-wrap:wrap;gap:10px 40px;justify-content:space-between;align-items:baseline;padding-top:16px}
.lead-meta p{font-size:16px;max-width:70ch}

/* ---------- figure system ----------
   three treatments: mat + keyline · pinned with corner marks · full-bleed band
*/
.article-figure{display:flex;flex-direction:column;gap:12px}
.fig-mat{background:var(--paper-3);border:1px solid rgba(26,23,20,.14);padding:clamp(18px,2.4vw,44px)}
.fig-mat .frame{border:1px solid var(--rule-hard);padding:9px}
.fig-pin{position:relative;padding:24px}
.fig-pin .corner{position:absolute;width:32px;height:32px;stroke:var(--accent);fill:none;stroke-width:1.6}
.fig-pin .c1{top:0;left:0}.fig-pin .c2{top:0;right:0}.fig-pin .c3{bottom:0;left:0}.fig-pin .c4{bottom:0;right:0}
.band-ink .fig-pin .corner{stroke:var(--second)}
.fig-bleed{margin-inline:calc(var(--gut)*-1)}
.fig-bleed>img{width:100%;height:clamp(240px,40vw,520px);object-fit:cover}
.fig-bleed figcaption{padding-inline:var(--gut)}
.fig-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fig-strip figure{display:flex;flex-direction:column;gap:8px}
.fig-strip img{aspect-ratio:3/4;object-fit:cover}

figcaption,.cap{font-size:15.5px;line-height:1.5}
.cap{border-top:1px solid var(--rule);padding-top:9px;max-width:62ch;display:flex;flex-direction:column;gap:6px}
.band-ink .cap{border-top-color:rgba(244,238,227,.3)}
.cap b{font-family:var(--display);font-size:20px;font-weight:400;display:block}
.credit{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet-2);font-weight:500}
.band-ink .credit{color:#B99C74}

/* ---------- supporters ---------- */
.band-supporters{padding-block:clamp(24px,3vw,40px)}
.band-supporters .supporters-head h2{font-size:clamp(20px,1.9vw,25px)}
.band-supporters .supporters-head p{font-size:14px;line-height:1.5}
.band-supporters .supporters{grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:clamp(16px,2.6vw,44px)}
.band-supporters .sponsor{padding:10px 0;font-size:16px}
.band-supporters .sponsor.feat{padding:12px 0}
.band-supporters .sponsor.feat .sponsor-name{font-size:clamp(19px,1.7vw,23px)}
.band-supporters .sponsor-group+.sponsor-group{margin-top:20px}
.sponsor-group.roll{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));column-gap:clamp(16px,3vw,34px)}
.sponsor-group.roll>.kicker{grid-column:1/-1}
.sponsor-group.roll .sponsor{border-top:1px solid var(--rule)}

.supporters{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:start}
.supporters-head{display:flex;flex-direction:column;gap:10px}
.supporters-head h2{font-family:var(--display);font-size:clamp(24px,2.4vw,30px);line-height:1.15}
.supporters-head p{font-size:15px;color:var(--ink-soft)}
.sponsor-group{border-top:2px solid var(--ink)}
.sponsor-group+.sponsor-group{margin-top:34px}
.sponsor-group>.kicker{display:block;padding:10px 0 4px}
.sponsor{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-top:1px solid var(--rule);color:var(--ink);font-size:17px}
.sponsor:first-of-type{border-top:none}
.sponsor:hover{color:var(--accent);text-decoration:none}
.sponsor-name{font-weight:500}
.sponsor.feat{padding:18px 0}
.sponsor.feat .sponsor-name{font-family:var(--display);font-weight:400;font-size:clamp(22px,2vw,27px);line-height:1.1}
.sponsor .mark{font-size:11px;letter-spacing:.14em;color:var(--quiet-2);font-weight:500;margin-left:auto;white-space:nowrap}

/* ---------- the premise: signature over a frame ---------- */
.band-premise{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;padding-block:clamp(52px,8vw,104px)}
.band-premise .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;filter:grayscale(.2) contrast(1.04)}
.premise-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.band-premise .kicker{color:var(--second)}
.premise-line{display:flex;align-items:center;gap:clamp(14px,3vw,40px);font-family:var(--display);font-size:clamp(26px,3.4vw,46px);line-height:1.22}
.premise-line span{max-width:26ch}
.premise-line svg{width:26px;height:clamp(58px,8vw,94px);flex:none;stroke:var(--second);fill:none;stroke-width:2}
.premise-note{max-width:62ch;font-size:16.5px;line-height:1.62;color:#E4DACA}
.band-premise a{color:var(--second)}
.band-premise a:hover{color:#F5CE93}
.band-premise .credit{color:#C6B79E}

/* ---------- the seven stages ---------- */
.stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,26px);border-top:2px solid var(--ink);padding-top:24px}
.stage{display:flex;flex-direction:column;gap:9px;color:var(--ink)}
.stage:hover{color:var(--accent);text-decoration:none}
.stage .thumb{position:relative;display:block}
.stage .thumb img{aspect-ratio:4/3;object-fit:cover;width:100%}
.stage .no{position:absolute;top:0;left:0;background:var(--ink);color:var(--paper);font-size:10.5px;letter-spacing:.14em;font-weight:500;padding:5px 8px}
.stage:hover .no{background:var(--accent)}
.stage .head{display:flex;align-items:center;gap:8px}
.stage .t{font-family:var(--display);font-size:clamp(20px,1.8vw,23px);line-height:1.1}
.stage .b{font-size:15px;color:var(--ink-soft);line-height:1.5}
.stage .c{margin-top:auto;padding-top:4px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
.stage-all{border:1px dashed var(--rule-hard);justify-content:center;padding:clamp(18px,2vw,26px);gap:12px}
.stage-all:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.stage-all:hover .b,.stage-all:hover .c{color:#CBBFAE}

/* ---------- one quiet line ---------- */
.oneline{display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,44px)}
.oneline svg{width:26px;height:clamp(56px,8vw,90px);flex:none;stroke:var(--second);fill:none;stroke-width:2}
.oneline p{font-family:var(--display);font-size:clamp(24px,3.2vw,44px);line-height:1.24;text-align:center;max-width:24ch}

/* ---------- plates ---------- */
.plates{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(24px,3vw,40px)}
.plate{display:flex;flex-direction:column;gap:14px;height:100%}
.plate .shot{position:relative}
.plate .shot img{aspect-ratio:8/5;object-fit:cover;width:100%}
.plate .no{position:absolute;top:0;left:0;background:var(--accent);color:#FFF;font-size:11px;letter-spacing:.14em;font-weight:500;padding:6px 9px}
.plate h3{font-family:var(--display);font-size:clamp(23px,2vw,29px);line-height:1.12}
.plate p{font-size:16px;color:var(--ink-soft)}
.plate .go{margin-top:auto;padding-top:6px;font-size:14.5px;font-weight:500}

/* ---------- register ---------- */
.register{border-top:2px solid var(--ink)}
.reg-row{display:grid;grid-template-columns:56px 34px minmax(140px,220px) minmax(0,1fr) 92px;gap:clamp(14px,2vw,26px);align-items:baseline;padding:20px 0;border-bottom:1px solid var(--rule);color:var(--ink)}
.reg-row:hover{color:var(--accent);text-decoration:none;background:rgba(180,39,107,.04)}
.reg-row .n{font-family:var(--display);font-size:26px;color:var(--accent)}
.reg-row .ico{margin-top:2px}
.reg-row .t{font-size:19px;font-weight:500}
.reg-row .b{font-size:15.5px;color:var(--ink-soft)}
.reg-row .c{font-size:14px;color:var(--quiet);text-align:right;white-space:nowrap}

/* ---------- prose / article ---------- */
.article-head{padding-top:clamp(40px,5vw,76px)}
.where{display:flex;align-items:center;gap:10px;color:var(--accent);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.where .ico{width:18px;height:18px}
.article-head h1{font-family:var(--display);font-size:clamp(36px,5.6vw,68px);line-height:1.02;margin-top:16px;max-width:26ch}
.lead{margin-top:18px;font-size:clamp(19px,1.7vw,22px);line-height:1.5;font-style:italic;max-width:52ch}
.stage-line{margin-top:22px;padding-top:12px;border-top:1px solid var(--rule);font-size:14.5px;color:var(--quiet);max-width:52ch}
.prose{max-width:calc(70ch + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut);font-size:18.5px}
.prose>*+*{margin-top:26px}
article{counter-reset:sec}
.prose h2{font-family:var(--display);font-size:clamp(26px,3vw,36px);line-height:1.14;margin-top:56px;padding-top:16px;border-top:2px solid var(--accent);scroll-margin-top:20px}
.prose h2::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);display:block;font-family:var(--text);font-size:11px;font-weight:500;letter-spacing:.2em;color:var(--accent);margin-bottom:9px}
.hero-slot{margin-top:clamp(28px,3vw,44px)}
.contents-wrap{display:flex;flex-direction:column;gap:12px;margin-top:clamp(30px,3.4vw,46px)}
.contents{display:flex;flex-wrap:wrap;gap:6px}
.contents a{border:1px solid var(--rule-hard);padding:10px 14px;font-size:14.5px;color:var(--ink);line-height:1.2}
.contents a:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.next{display:flex;flex-direction:column;gap:6px;margin-top:26px;padding:22px 0 4px;border-top:2px solid var(--accent);color:var(--ink)}
.next:hover{color:var(--accent);text-decoration:none}
.next .t{font-family:var(--display);font-size:clamp(26px,2.6vw,34px);line-height:1.1}
.next .d{font-size:16px;color:var(--ink-soft);max-width:60ch}
.prose h3{font-size:20px;font-weight:600;margin-top:34px}
.prose p{font-size:18.5px;line-height:1.78}
.prose p.opening::first-letter{float:left;font-family:var(--display);font-size:4.5em;line-height:.78;margin:8px 12px 0 0;color:var(--accent)}
.prose p.statement{font-family:var(--display);font-size:clamp(23px,2.4vw,31px);line-height:1.3;border-top:2px solid var(--second);padding-top:16px;margin-top:34px}
.prose p.statement+p{margin-top:30px}
.prose p.sect-open::first-line{font-variant-caps:small-caps;letter-spacing:.035em}
.prose .term{font-weight:600;box-shadow:inset 0 -2px 0 rgba(232,163,61,.55)}
.prose ul{display:flex;flex-direction:column;gap:10px}
.prose ul li{position:relative;padding-left:22px;font-size:18px;line-height:1.65}
.prose ul li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:1px;background:var(--accent)}
.prose .note{font-size:16.5px;color:var(--ink-soft);border-left:none;padding-top:12px;border-top:1px solid var(--rule)}
.wide{max-width:1080px;margin-inline:auto;padding-inline:var(--gut)}
.wide-full{margin-inline:auto;max-width:1360px;padding-inline:var(--gut)}

/* notes-for-design material, as interruptions rather than a rail */
.notes-band{background:var(--ink);color:var(--paper);padding-block:clamp(34px,4vw,58px);margin-block:clamp(38px,5vw,64px)}
.notes-band h2,.notes-panel h2{font-family:var(--display);font-size:clamp(24px,2.6vw,32px);line-height:1.14;margin-top:0;border:none;padding:0}
.notes-band .kicker{color:#B99C74}
.notes-panel{background:var(--second);color:var(--second-ink);padding:clamp(22px,3vw,38px);margin-block:clamp(38px,5vw,64px)}
.notes-panel a{color:#5A2A12}
.notes-outline{border:1px solid var(--ink);padding:clamp(22px,3vw,34px);margin-block:clamp(38px,5vw,64px)}
.notes-head{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.term-rows{display:flex;flex-direction:column}
.term-row{display:grid;grid-template-columns:minmax(140px,260px) minmax(0,1fr);gap:10px clamp(18px,3vw,40px);padding:15px 0;border-top:1px solid rgba(244,238,227,.22)}
.notes-panel .term-row,.notes-outline .term-row{border-top-color:rgba(26,23,20,.28)}
.term-row:last-child{border-bottom:1px solid rgba(244,238,227,.22)}
.notes-panel .term-row:last-child,.notes-outline .term-row:last-child{border-bottom-color:rgba(26,23,20,.28)}
.term-row dt{font-weight:600;font-size:17px}
.term-row dd{margin:0;font-size:16.5px;line-height:1.6}
.term-row.single dt{grid-column:1/-1}

.related{margin-top:clamp(44px,5vw,72px);border-top:2px solid var(--ink);padding-top:18px}
.related h2{font-family:var(--display);font-size:26px;margin-bottom:10px}
.related-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 clamp(20px,3vw,40px)}
.related-links li{border-top:1px solid var(--rule)}
.related-links a{display:block;padding:14px 0;font-size:17px;color:var(--ink)}
.related-links a:hover{color:var(--accent);text-decoration:none}
.related-links span{display:block;font-size:15px;color:var(--ink-soft);margin-top:4px}

/* ---------- category / browse ---------- */
.cat-open{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:end;padding-top:clamp(36px,4vw,56px)}
.cat-open h1{font-family:var(--display);font-size:clamp(40px,6vw,72px);line-height:1.02}
.cat-open .intro{font-size:clamp(18px,1.7vw,21px);line-height:1.55;margin-top:16px;max-width:46ch}
.cat-list{border-top:2px solid var(--ink)}
.cat-list li{border-bottom:1px solid var(--rule)}
.cat-list a{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,2vw,30px);align-items:baseline;padding:26px 0;color:var(--ink)}
.cat-list a:hover{color:var(--accent);text-decoration:none;background:rgba(180,39,107,.04)}
.cat-list .n{font-family:var(--display);font-size:24px;color:var(--accent)}
.cat-list .t{font-family:var(--display);font-size:clamp(24px,2.4vw,32px);line-height:1.12}
.cat-list .d{font-size:16px;color:var(--ink-soft)}
.browse-group{margin-top:clamp(38px,4vw,60px)}
.browse-head{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.browse-head h2{font-family:var(--display);font-size:clamp(24px,2.4vw,30px)}
.browse-head .c{margin-left:auto;font-size:14px;color:var(--quiet)}
.stack{display:flex;flex-direction:column;gap:0}

/* ---------- page furniture ---------- */
.page-head{padding-top:clamp(40px,5vw,72px)}
.page-head h1{font-family:var(--display);font-size:clamp(36px,5vw,60px);line-height:1.04}
.footer{background:var(--ink);color:var(--paper);margin-top:clamp(56px,7vw,96px);border-top:3px solid var(--accent)}
.footer .inner{display:flex;flex-wrap:wrap;gap:26px 60px;justify-content:space-between;align-items:flex-start;padding-block:44px}
.footer .wordmark,.footer .wordmark:hover{color:var(--paper)}
.footer .wordmark b{font-size:28px;color:var(--paper)}
.footer .wordmark .mark{width:46px}
.footer .wordmark .mark .strike{stroke:var(--second)}
.footer .wordmark span{color:var(--second)}
.footer p{font-size:15px;color:#E4DACA;max-width:44ch;margin-top:10px}
.foot-links{display:flex;flex-wrap:wrap;gap:10px 26px;max-width:720px}
.foot-links a{color:var(--paper);font-size:14.5px;padding-bottom:3px;border-bottom:1px solid rgba(244,238,227,.28)}
.foot-links a:hover{color:var(--second);border-bottom-color:var(--second);text-decoration:none}

/* ---------- styleguide-only components ---------- */
.sg-item{padding-block:clamp(30px,4vw,50px);border-top:1px solid var(--rule)}
.sg-label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:16px}
.pullquote{margin:0;border-top:2px solid var(--accent);border-bottom:2px solid var(--accent);padding:22px 0}
.pullquote p{font-family:var(--display);font-size:clamp(24px,2.6vw,32px);line-height:1.3}
.blockquote{margin:0;padding-left:22px;border-left:3px solid var(--second)}
.blockquote p{font-size:19px;line-height:1.6}
.blockquote cite{display:block;margin-top:10px;font-size:14.5px;font-style:normal;color:var(--quiet)}
.callout{background:var(--paper-2);border-top:2px solid var(--ink);padding:22px 24px}
.callout p{font-size:17px}
.versus,.datatable{width:100%;border-collapse:collapse;font-size:16px}
.versus th,.versus td,.datatable th,.datatable td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
.versus th,.datatable th{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);font-weight:500;border-bottom:1px solid var(--ink)}
.versus td:first-child{font-weight:600}
.datatable caption,.versus caption{text-align:left;font-size:14.5px;color:var(--ink-soft);padding-bottom:10px}
.table-scroll{overflow-x:auto}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px}
.statblock{border-top:2px solid var(--accent);padding-top:12px;display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--display);font-size:clamp(38px,4vw,54px);line-height:1}
.stat-label{font-size:15px;color:var(--ink-soft)}
.timeline{border-left:1px solid var(--ink);margin-left:6px}
.timeline li{position:relative;padding:0 0 24px 26px}
.timeline li::before{content:"";position:absolute;left:-4px;top:8px;width:7px;height:7px;background:var(--accent)}
.t-when{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);font-weight:500}
.t-what{display:block;font-size:17px;margin-top:5px}
.chart{display:flex;flex-direction:column;gap:12px}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{font-size:15px;color:var(--ink-soft)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.gallery img{aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{font-size:14.5px;margin-top:8px}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.profile-card{display:flex;flex-direction:column;gap:10px;background:var(--paper-2);padding:22px;height:100%}
.profile-card h3{font-family:var(--display);font-size:24px}
.p-photo{aspect-ratio:1/1;object-fit:cover;width:96px}
.p-role{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:500}
.profile-card p{font-size:16px}
.p-links{margin-top:auto;padding-top:8px;font-size:15px}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.org-card{display:flex;flex-direction:column;gap:4px;border:1px solid var(--rule);padding:16px 18px;color:var(--ink)}
.org-card:hover{border-color:var(--accent);text-decoration:none}
.org-name{font-weight:600}
.org-host{font-size:14px;color:var(--quiet)}
.entity-ref{white-space:nowrap;font-weight:500}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 26px}
.further-grid a{display:block;padding:14px 0;border-top:1px solid var(--rule);color:var(--ink);font-size:16.5px}
.further-grid a:hover{color:var(--accent);text-decoration:none}
form.contact{display:flex;flex-direction:column;gap:16px;max-width:44ch}
form.contact label{display:flex;flex-direction:column;gap:6px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);font-weight:500}
form.contact input,form.contact textarea{font-family:var(--text);font-size:17px;padding:11px 12px;border:1px solid var(--ink);background:var(--paper);color:var(--ink)}
form.contact button{align-self:flex-start;font-family:var(--text);font-size:15px;font-weight:500;letter-spacing:.06em;background:var(--ink);color:var(--paper);border:none;padding:13px 22px;cursor:pointer}
form.contact button:hover{background:var(--accent)}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .nav{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stages{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .reg-row{grid-template-columns:40px 26px minmax(0,1fr);row-gap:6px}
  .reg-row .b{grid-column:3/-1}
  .reg-row .c{grid-column:3/-1;text-align:left}
  .supporters,.band-supporters .supporters{grid-template-columns:minmax(0,1fr)}
  .cat-open{grid-template-columns:minmax(0,1fr)}
  .cat-list a{grid-template-columns:44px minmax(0,1fr);row-gap:6px}
  .cat-list .d{grid-column:2/-1}
}
@media (max-width:700px){
  body{font-size:16.5px}
  .nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  .nav a{font-size:13.5px;padding:13px 24px 13px 10px;gap:9px}
  .nav a .ico{width:23px;height:23px}
  .fig-strip{grid-template-columns:minmax(0,1fr);gap:22px}
  .fig-strip img{aspect-ratio:3/2}
  .oneline svg{display:none}
  .premise-line svg{display:none}
  .prose p{font-size:17.5px}
  .term-row{grid-template-columns:minmax(0,1fr)}
  .signature{display:none}
}
@media (max-width:480px){
  .stages{grid-template-columns:minmax(0,1fr)}
  .lead-figure>img{height:clamp(260px,60vw,660px)}
}
@media print{
  .nav,.footer .foot-links{display:none}
  body{background:#fff}
}

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

/* 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-nav-collapse: this nav printed 248px of stacked links at 390 before any content
   (8 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 "inset-box", 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 (20px measured) the button carries the build's
   gutter (clamp(20px,5vw,56px)) so it cannot sit against the glass. The links are hidden,
   not removed: they stay in the markup. Desktop is untouched — every rule below is inside the
   phone breakpoint (940px here), where the button appears and the nav starts closed.
   Folded with the "height-clip" technique and marked with the "chevron" icon — the mechanism
   is deliberately not identical across the fleet either. */
.nav-disclose{display:none}
@media (max-width:940px){
  .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;border:1px solid currentColor;border-radius:2px;padding:10px 15px;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .nav-disclose-bars{width:8px;height:8px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
  .nav{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}
  .wrap:has(> .nav-disclose){display:flow-root}
  .nav-disclose:not(:has(~ .nav)){display:none}
}

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

/* op-label-row: on phones the tier .sponsor-group is two per row and its group label (span.kicker) sat in a grid cell like a tile — the group ended on a lone tile beside an empty cell (and a long label was squeezed). The label takes the whole row, above its tiles; only while the tier is two per row. */
@media (max-width:640px){
  .sponsor-group > span.kicker:first-child{grid-column:1 / -1!important}
}
/* op-label-row:end */

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