/* Love, Sweat, Beers — Night Plate
   ground #12151A · panel #1B2027 · ink #E6EAE4 · flare #FF4A2E · verdigris #58B7AE */
:root{
  --marg:0px; --agap:0px;
  --ground:#12151A; --panel:#1B2027; --ink:#E6EAE4; --flare:#FF4A2E; --verdigris:#58B7AE;
  --rule:rgba(230,234,228,.28); --rule-strong:rgba(230,234,228,.85); --quiet:rgba(230,234,228,.62);
  --display:'Schibsted Grotesk',system-ui,sans-serif;
  --prose-face:'Spectral',Georgia,serif;
  --mono:'Martian Mono',ui-monospace,monospace;
  --body:19px; --prose:68ch; --breakout:1080px; --page:1360px; --pad:28px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--prose-face);font-size:var(--body);line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:900;letter-spacing:-.035em;line-height:1;margin:0;text-wrap:balance}
p{margin:0 0 1.15em}
::selection{background:var(--flare);color:var(--ground)}
:focus-visible{outline:2px solid var(--flare);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{width:100%;max-width:var(--page);margin-inline:auto;padding-inline:var(--pad)}
.bleed{width:100%}
.mono{font-family:var(--mono);font-weight:400;letter-spacing:.02em}
.kick{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--flare);
  display:flex;align-items:center;gap:9px}
.hero .kick,.cathero .kick,.feature .kick{align-self:flex-start;display:inline-flex;background:var(--flare);color:var(--ground);padding:8px 12px 8px 10px}
.kick svg{width:17px;height:17px;flex:0 0 auto}
.quiet{color:var(--quiet)}
.credit{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--quiet)}

/* ---------- masthead: the cartouche ---------- */
.masthead{padding:26px var(--pad) 0}
.cartouche{border:2px solid var(--rule-strong);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);max-width:var(--page);margin-inline:auto}
.mh-title{display:flex;align-items:center;gap:22px;padding:20px 26px;border-right:2px solid var(--rule-strong);min-width:0}
.mh-mark{width:66px;height:66px;flex:0 0 auto;color:var(--flare)}
.mh-name{display:block;font-family:var(--display);font-weight:900;font-size:clamp(28px,3.2vw,50px);line-height:.9;letter-spacing:-.045em;text-transform:uppercase;color:var(--flare);white-space:nowrap}
.mh-strap{display:block;font-family:var(--mono);font-size:9.5px;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);margin-top:12px;white-space:nowrap}
.mh-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.mh-nav a{min-width:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:20px 10px 17px;border-left:1px solid var(--rule);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:11px;text-align:center}
.mh-nav a:first-child{border-left:0}
.mh-nav a:hover{background:rgba(230,234,228,.05);text-decoration:none}
.mh-nav a.here{background:var(--flare);color:var(--ground);text-decoration:none}
.mh-nav a.here svg{color:var(--ground)}
.mh-nav a span{white-space:nowrap}
.mh-nav svg{width:28px;height:28px;flex:0 0 auto;color:var(--quiet)}
.mh-nav a:nth-child(1) svg,.mh-nav a:nth-child(3) svg{color:var(--flare)}
.mh-nav a:nth-child(2) svg,.mh-nav a:nth-child(4) svg{color:var(--verdigris)}

/* ---------- hero ---------- */
.hero{position:relative;margin-top:34px;overflow:hidden}
.hero-img{position:relative;width:100%;aspect-ratio:16/8}
.hero-img img{width:100%;height:100%;object-fit:cover}
.hero-veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(18,21,26,.97) 8%,rgba(18,21,26,.78) 46%,rgba(18,21,26,.2) 84%)}
.sig{position:absolute;font-family:var(--mono);font-weight:600;color:var(--flare);line-height:.8;
  font-size:15vw;right:-.06em;bottom:-.14em;pointer-events:none;letter-spacing:-.04em}
.hero-copy{position:absolute;left:0;right:0;bottom:0;padding:0 var(--pad) clamp(24px,3vw,52px)}
.hero-copy .inner{max-width:var(--page);margin-inline:auto}
.hero h1{font-size:clamp(36px,5.2vw,82px);line-height:.94;max-width:20ch;margin-top:18px;text-shadow:0 2px 34px rgba(12,14,17,.85),0 1px 4px rgba(12,14,17,.7)}
.deck{font-size:clamp(17px,1.35vw,22px);line-height:1.5;max-width:60ch;margin-top:20px;color:rgba(230,234,228,.86)}
.more{display:inline-flex;margin-top:22px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--flare);border-bottom:1px solid var(--flare);padding-bottom:4px}

/* ---------- bands ---------- */
.band{padding:clamp(46px,5vw,86px) 0}
.band--panel{background:var(--panel)}
.band--flare{background:var(--flare);color:var(--ground)}
.band--flare .kick,.band--flare .credit{color:rgba(18,21,26,.72)}
.band-head{display:flex;align-items:flex-end;justify-content:space-between;gap:44px;
  border-bottom:2px solid var(--rule-strong);padding-bottom:16px;margin-bottom:34px;flex-wrap:wrap}
.band-head h2{font-size:clamp(27px,2.8vw,44px);max-width:42ch;text-wrap:pretty}
.band-head .more{margin:0}

/* pulled statistic */
.statplate{display:grid;grid-template-columns:auto minmax(0,44ch);gap:clamp(24px,3vw,54px);align-items:center}
.statplate .num{margin:0;font-family:var(--mono);font-weight:600;color:var(--flare);font-size:clamp(58px,7.6vw,132px);line-height:.8;letter-spacing:-.05em}
.statplate .num small{display:block;font-size:.19em;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-top:.6em;line-height:1.4;max-width:22ch}
.statplate p{margin:0;font-size:clamp(17px,1.35vw,21px);line-height:1.6;color:rgba(230,234,228,.88)}

/* unequal editorial cluster */
.cluster{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:clamp(26px,3vw,52px);align-items:start}
.cluster .seconds{display:grid;gap:clamp(24px,2.4vw,38px)}
.piece{min-width:0}
.piece img{aspect-ratio:8/5;object-fit:cover;width:100%}
.piece h3{margin-top:16px;font-size:clamp(22px,2.1vw,34px);line-height:1.06}
.piece--lead h3{font-size:clamp(28px,3.2vw,50px)}
.piece p{margin:10px 0 0;font-size:17px;line-height:1.5;color:var(--quiet);max-width:56ch}
.piece .kick{margin-bottom:0}
.piece .frame{display:block;border:2px solid var(--rule-strong);padding:12px;background:var(--panel)}
.piece--sec{display:block;border-top:1px solid var(--rule);padding-top:22px}
.piece--sec:first-child{border-top:0;padding-top:0}
.piece--sec h3{margin-top:14px;font-size:clamp(21px,1.8vw,27px)}
.piece--sec .frame{padding:9px}
.piece--sec img{aspect-ratio:2/1}

/* section strip */
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--rule-strong);border-bottom:2px solid var(--rule-strong)}
.strip a{padding:26px 24px 28px;border-right:1px solid var(--rule);display:flex;flex-direction:column;min-width:0}
.strip a:last-child{border-right:0}
.strip a:hover{background:var(--panel);text-decoration:none}
.strip .no{font-family:var(--mono);font-weight:600;font-size:30px;color:var(--flare);line-height:1}
.strip h3{margin-top:14px;font-size:clamp(19px,1.6vw,25px);line-height:1.1}
.strip .n{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--quiet);margin-top:14px}
.strip svg{width:26px;height:26px;color:var(--verdigris);margin-top:auto;padding-top:30px;box-sizing:content-box}

/* second editorial moment */
.feature{position:relative;isolation:isolate;min-height:min(74vh,660px);display:flex;align-items:flex-end;overflow:hidden}
.feature>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.feature::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(18,21,26,.95) 0%,rgba(18,21,26,.8) 46%,rgba(18,21,26,.35) 100%)}
.feature .inner{padding:clamp(40px,5vw,90px) 0}
.feature h2{font-size:clamp(30px,4.2vw,64px);max-width:22ch;text-shadow:0 2px 30px rgba(12,14,17,.85),0 1px 4px rgba(12,14,17,.7)}
.feature p{max-width:56ch;margin-top:20px;font-size:clamp(17px,1.3vw,21px);color:rgba(230,234,228,.9);text-shadow:0 1px 20px rgba(12,14,17,.9)}

/* data-highlight row */
.datarow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--rule-strong)}
.datarow div{padding:0 26px 30px;border-right:1px solid var(--rule);display:flex;flex-direction:column}
.datarow div:last-child{border-right:0}
.datarow .fig{margin:0;padding:22px 0 20px;border-bottom:1px solid var(--rule);font-family:var(--mono);font-weight:600;
  font-size:clamp(38px,4.6vw,74px);color:var(--flare);line-height:.9;letter-spacing:-.05em}
.datarow .what{margin:20px 0 0;font-size:17px;line-height:1.5;max-width:38ch}
.datarow .src{margin:auto 0 0;padding-top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--quiet)}

/* ---------- supporters: a directory, not a gallery ---------- */
.supporters{border-top:2px solid var(--rule-strong);padding-top:22px}
.supporters h2{font-size:20px;letter-spacing:-.02em}
.sup-kick{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--flare);margin-bottom:10px}
.sup-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.sponsor{min-width:0;display:flex;flex-direction:column;gap:8px;padding:16px 18px;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sponsor-name{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.2;letter-spacing:-.02em}
.sponsor-blurb{font-size:15px;line-height:1.45;color:var(--quiet)}
.sponsor:hover .sponsor-name{color:var(--flare)}

/* ---------- footer ---------- */
.foot{background:var(--panel);margin-top:0;padding:40px 0 46px;border-top:2px solid var(--rule-strong)}
.foot .inner{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:14px clamp(36px,5vw,90px);align-items:start}
.foot .name{grid-column:1;grid-row:1;font-family:var(--display);font-weight:900;font-size:24px;letter-spacing:-.03em;color:var(--flare)}
.foot .strap{grid-column:1;grid-row:2;font-size:16px;line-height:1.5;color:var(--quiet)}
.foot nav{grid-column:2;grid-row:1/3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;align-content:start;
  font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase}

/* ---------- article ---------- */
.artgrid{max-width:var(--page);margin:clamp(38px,4vw,64px) auto 0;padding-inline:var(--pad);
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,3vw,52px)}
.marg{font-family:var(--mono);font-size:11.5px;line-height:1.75;letter-spacing:.02em;color:var(--quiet);
  border-top:2px solid var(--rule-strong);padding-top:14px}
.marg h2{font-family:var(--mono);font-weight:600;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--flare);margin-bottom:10px}
.marg ul{list-style:none;margin:0 0 18px;padding:0}
.marg li{margin-bottom:4px}
.marg .b{color:var(--ink)}
.prose{min-width:0}
.prose>p,.prose>h2,.prose>h3,.prose>ul,.prose>ol{max-width:var(--prose)}
.prose h2{font-size:clamp(24px,2.4vw,36px);margin:1.5em 0 .5em;letter-spacing:-.03em}
.prose .lead{font-size:1.22em;line-height:1.5;color:var(--ink)}
.prose a{color:var(--verdigris);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--flare)}
.artgrid .prose>*+.fig-plate,.artgrid .prose>*+.fig-inset,.artgrid .prose>*+.fig-bleed,
.artgrid .prose>*+.pull,.artgrid .prose>*+.notes{margin-top:clamp(34px,3vw,52px)}
.prose>.fig-plate+*,.prose>.fig-inset+*,.prose>.fig-bleed+*,.prose>.pull+*,.prose>.notes+*{margin-top:clamp(34px,3vw,52px)}

/* figure system — three treatments */
figure{margin:0}
.figcap{display:flex;gap:18px;align-items:baseline;justify-content:space-between;flex-wrap:wrap;margin-top:12px}
.figcap .cap{font-size:16px;line-height:1.45;flex:1 1 260px;min-width:min(100%,260px);max-width:66ch;margin:0}
.figcap .credit{flex:0 1 auto;min-width:0;text-align:right;overflow-wrap:anywhere}
.fig-plate{border:2px solid var(--rule-strong);background:var(--panel);padding:13px}
.fig-plate img{width:100%;aspect-ratio:8/5;object-fit:cover}
.fig-plate .figcap{padding:0 4px 2px}
.fig-inset{float:none;border-left:3px solid var(--flare);padding-left:20px}
.fig-inset img{width:100%;aspect-ratio:4/3;object-fit:cover}
.fig-inset .figcap{display:block}
.fig-inset .cap{max-width:44ch}
.fig-inset .credit{display:block;text-align:left;margin-top:8px}
.fig-bleed{margin-inline:calc(-1 * var(--pad));width:auto;max-width:none}
.fig-bleed img{width:100%;height:clamp(280px,44vw,620px);object-fit:cover}
.fig-bleed .figcap{padding:14px var(--pad) 0}
.pull{background:var(--flare);color:var(--ground);padding:clamp(26px,3vw,46px) clamp(24px,3vw,44px);max-width:none}
.pull p{font-family:var(--display);font-weight:900;font-size:clamp(24px,2.9vw,44px);line-height:1.08;letter-spacing:-.03em;margin:0;max-width:30ch}
.pull .src{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-top:18px;color:rgba(18,21,26,.75)}

/* notes-for-design material */
.notes{border:2px solid var(--rule-strong);background:var(--panel);padding:clamp(22px,2.4vw,34px)}
.notes>.kick{margin-bottom:16px}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:22px;padding:13px 0;border-top:1px solid var(--rule);align-items:baseline}
.timeline li:first-child{border-top:0}
.t-when{font-family:var(--mono);font-weight:600;font-size:14px;color:var(--flare);letter-spacing:.01em}
.t-what{font-size:17px;line-height:1.5}
.callout{margin:0}
.callout ul{list-style:none;margin:0;padding:0}
.callout li{padding:11px 0 11px 26px;border-top:1px solid var(--rule);font-size:17px;line-height:1.5;position:relative}
.callout li:first-child{border-top:0}
.callout li::before{content:"";position:absolute;left:0;top:1.05em;width:12px;height:1px;background:var(--verdigris)}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px;background:var(--rule)}
.statblock{background:var(--panel);padding:20px 22px 22px}
.stat-num{font-family:var(--mono);font-weight:600;font-size:clamp(22px,2vw,30px);color:var(--flare);display:block;line-height:1.1;letter-spacing:-.03em}
.stat-label{display:block;margin-top:10px;font-size:16px;line-height:1.45;color:var(--quiet)}
.note{font-size:16px;color:var(--quiet);border-left:3px solid var(--verdigris);padding-left:18px}
.pullquote{margin:0;border-top:2px solid var(--flare);border-bottom:2px solid var(--flare);padding:22px 0}
.pullquote p{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.3vw,32px);line-height:1.15;letter-spacing:-.025em;margin:0}
.blockquote{margin:0;padding-left:22px;border-left:3px solid var(--flare)}
.blockquote cite{display:block;margin-top:10px;font-family:var(--mono);font-size:12px;font-style:normal;color:var(--quiet)}
.datatable,.versus{width:100%;border-collapse:collapse;font-size:16px}
.datatable th,.datatable td,.versus th,.versus td{border-top:1px solid var(--rule);padding:11px 14px;text-align:left;vertical-align:top}
.datatable th,.versus th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--flare)}
.scrollx{overflow-x:auto}
.chart figcaption,.chart .figcap{margin-top:12px}
.chart svg{width:100%;height:auto;display:block}

/* article foot */
.artfoot{max-width:var(--page);margin:clamp(46px,5vw,80px) auto 0;padding:0 var(--pad) clamp(50px,5vw,84px)}
.related-links{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(24px,2.6vw,40px);border-top:2px solid var(--rule-strong);padding-top:26px}
.related-links li{min-width:0}
.related-links img{aspect-ratio:8/5;object-fit:cover;width:100%}
.related-links h3{margin-top:14px;font-size:21px;line-height:1.14}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.further-grid a{border:2px solid var(--rule-strong);padding:18px;font-family:var(--display);font-weight:700;font-size:19px;line-height:1.15}

/* ---------- category ---------- */
.cathero{position:relative;overflow:hidden;margin-top:34px}
.cathero .im{width:100%;aspect-ratio:32/9;min-height:260px}
.cathero .im img{width:100%;height:100%;object-fit:cover}
.cathero .veil{position:absolute;inset:0;background:linear-gradient(88deg,rgba(18,21,26,.96) 0%,rgba(18,21,26,.72) 52%,rgba(18,21,26,.2) 100%)}
.cathero .copy{position:absolute;inset:0;display:flex;align-items:center}
.cathero h1{font-size:clamp(30px,4.4vw,66px);max-width:22ch;margin-top:16px}
.cathero p{max-width:52ch;margin:18px 0 0;font-size:clamp(16px,1.25vw,20px);color:rgba(230,234,228,.86)}
.catmeta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);margin-top:18px}
.cat-lead{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(26px,3vw,52px);align-items:center;
  border:2px solid var(--rule-strong);background:var(--panel);padding:14px}
.cat-lead .im img{width:100%;aspect-ratio:8/5;object-fit:cover}
.cat-lead .tx{padding:8px clamp(14px,1.6vw,26px) 14px}
.cat-lead h2{font-size:clamp(24px,2.7vw,40px);margin-top:14px}
.cat-lead p{margin:14px 0 0;color:var(--quiet);font-size:17px;line-height:1.55;max-width:52ch}
.cat-list{list-style:none;margin:clamp(30px,3vw,48px) 0 0;padding:0;counter-reset:pl;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:clamp(26px,2.6vw,40px)}
.cat-list li{min-width:0;display:flex;flex-direction:column;background:var(--panel);border:2px solid var(--rule-strong);
  padding:0;counter-increment:pl;transition:background .15s ease}
.cat-list li:hover{background:#212831}
.cat-list li>a{display:block;text-decoration:none}
.cat-list li>a:hover h3{color:var(--flare)}
.cat-list img{width:100%;aspect-ratio:8/5;object-fit:cover;border-bottom:2px solid var(--rule-strong)}
.cat-list .kick{margin:18px 20px 0;font-size:10.5px;letter-spacing:.12em}
.cat-list .kick svg{width:15px;height:15px}
.cat-list h3{margin:12px 20px 0;font-size:clamp(20px,1.7vw,24px);line-height:1.08;letter-spacing:-.025em;min-height:0}
.cat-list p{margin:13px 20px 0;font-size:16px;line-height:1.5;color:var(--quiet)}
.cat-list .tag{margin:20px 20px 0;padding:14px 0 18px;border-top:1px solid var(--rule);margin-top:auto;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet)}
.cat-list .tag::before{content:"PL. " counter(pl) " — ";color:var(--flare)}
.othersecs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px;background:var(--rule);margin-top:clamp(40px,4vw,70px)}
.othersecs a{background:var(--panel);padding:20px;display:block}
.othersecs .no{font-family:var(--mono);font-weight:600;color:var(--flare);font-size:20px}
.othersecs h3{margin-top:10px;font-size:19px;line-height:1.14}

/* map */
.map-figure{border:2px solid var(--rule-strong);background:var(--panel);padding:13px}
.map-figure svg{width:100%;height:auto;display:block;background:#0C0E11}
.map-pin circle{fill:var(--flare)}
.map-pin text{font-family:var(--mono);font-size:13px;fill:var(--ink)}

/* register / archive */
.register{width:100%;border-collapse:collapse}
.register th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--flare);
  text-align:left;padding:0 14px 12px;border-bottom:2px solid var(--rule-strong)}
.register td{border-bottom:1px solid var(--rule);padding:14px;vertical-align:middle}
.register img{width:112px;aspect-ratio:8/5;object-fit:cover}
.register .ti{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.2;letter-spacing:-.02em}
.register .se{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--quiet)}

/* simple pages */
.page-head{padding:clamp(44px,5vw,86px) 0 0}
.page-head h1{font-size:clamp(32px,4.6vw,70px);max-width:24ch}
.page-body{padding:clamp(26px,3vw,44px) 0 clamp(50px,5vw,90px)}
.page-body p,.page-body ul{max-width:66ch}
.sg-item{border-top:2px solid var(--rule-strong);padding:30px 0}
.sg-item>.kick{margin-bottom:18px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  :root{--pad:18px;--body:18px}
  .cartouche{grid-template-columns:minmax(0,1fr)}
  .mh-title{border-right:0;border-bottom:2px solid var(--rule-strong)}
  .mh-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mh-nav a{padding:15px 8px 13px;gap:9px}
  .mh-nav svg{width:24px;height:24px}
  .mh-nav a:nth-child(4){border-left:0}
  .mh-nav a:nth-child(-n+3){border-bottom:1px solid var(--rule)}
  .mh-mark{width:48px;height:48px}
  .statplate,.cluster,.cat-lead,.feature .inner{grid-template-columns:minmax(0,1fr)}
  .strip,.datarow{grid-template-columns:minmax(0,1fr)}
  .strip a,.datarow div{border-right:0;border-bottom:1px solid var(--rule)}
  .strip a:last-child,.datarow div:last-child{border-bottom:0}
  .piece--sec{grid-template-columns:minmax(0,1fr)}
  .timeline li{grid-template-columns:minmax(0,1fr);gap:4px}
  .figcap .credit{text-align:left;flex:1 1 100%}
  .register img{width:78px}
  .register .hidem{display:none}
  .sig{font-size:24vw}
}
@media (min-width:1280px){
  :root{--pad:36px;--page:1240px;--marg:240px;--agap:38px}
  .artgrid{grid-template-columns:var(--marg) minmax(0,1fr);gap:var(--agap)}
  .fig-bleed{margin-left:calc(-1 * (var(--marg) + var(--agap)));margin-right:0;width:calc(100% + var(--marg) + var(--agap))}
  .fig-bleed .figcap{padding:14px 0 0}
}
@media (min-width:1600px){
  :root{--body:20px;--pad:44px;--page:1440px;--prose:70ch;--breakout:1240px;--marg:270px;--agap:64px}
  .artgrid{grid-template-columns:var(--marg) minmax(0,1fr);gap:var(--agap)}
  .fig-plate,.notes,.pull{margin-left:-46px}
  .prose h2{font-size:38px}
}
@media (min-width:2000px){
  :root{--body:21px;--page:1720px;--prose:74ch;--breakout:1420px;--marg:320px;--agap:80px}
  .artgrid{grid-template-columns:var(--marg) minmax(0,1fr);gap:var(--agap)}
  .fig-plate,.notes,.pull{margin-left:-70px}
  .hero h1{font-size:96px}
  .cat-list{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}
}
@media print{
  body{background:#fff;color:#111}
  .masthead,.foot,.supporters{display:none}
}

/* --- second deck line: large displays only --- */
.deck2{display:none}
@media (min-width:1600px){.deck2{display:inline}}

/* --- styleguide / component classes --- */
.article-figure{border:2px solid var(--rule-strong);background:var(--panel);padding:13px}
.article-figure img{width:100%;aspect-ratio:8/5;object-fit:cover}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%}
.map-slot{width:100%;aspect-ratio:16/9;border:1px dashed var(--rule);display:block}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.profile-card{border:2px solid var(--rule-strong);background:var(--panel);padding:22px}
.profile-card h3{font-size:23px;line-height:1.1}
.profile-card .p-photo{width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:16px}
.profile-card .p-role{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--flare);margin:10px 0 12px}
.profile-card p{font-size:16px;line-height:1.5;color:var(--quiet)}
.profile-card .p-links a{color:var(--verdigris);text-decoration:underline;text-underline-offset:3px}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px;background:var(--rule)}
.org-card{background:var(--panel);padding:18px 20px;display:flex;flex-direction:column;gap:6px;min-width:0}
.org-logo{max-height:34px;max-width:100%;width:auto;height:auto;object-fit:contain}
.org-name{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.15;letter-spacing:-.02em}
.org-host{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--quiet);overflow-wrap:anywhere}
.entity-ref{color:var(--verdigris);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}


/* --- narrow screens: overlay copy must never be clipped by a fixed aspect box --- */
@media (max-width:900px){
  .hero-img{aspect-ratio:auto;height:min(86vh,620px)}
  .hero h1{font-size:clamp(28px,7.4vw,40px)}
  .deck{font-size:16px;margin-top:14px}
  .hero-copy{padding-bottom:22px}
  .cathero .im{aspect-ratio:auto;height:min(74vh,520px);min-height:0}
  .cathero h1{font-size:clamp(26px,7vw,38px)}
  .cathero p{font-size:16px;margin-top:12px}
  .mh-name{font-size:34px}
}
@media (max-width:520px){
  .hero-img{height:min(90vh,560px)}
  .mh-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mh-nav a:nth-child(odd){border-left:0}
  .mh-nav a:nth-child(-n+4){border-bottom:1px solid var(--rule)}
}


/* nav labels hold one line between 900 and 1240 */
.mh-nav a span{white-space:nowrap}
@media (min-width:901px) and (max-width:1240px){
  .mh-nav a{font-size:9.5px;letter-spacing:.03em;padding:16px 6px 14px;gap:9px}
  .mh-nav svg{width:24px;height:24px}
}


/* the statistic band sits closer to its plate */
.band--panel .statplate{margin-bottom:0}
@media (max-width:900px){
  .mh-strap{white-space:normal}
  .statplate{grid-template-columns:minmax(0,1fr);gap:20px}
  .sup-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  .foot .inner{grid-template-columns:minmax(0,1fr)}
  .foot nav{grid-column:1;grid-row:auto;margin-top:8px}
  .datarow .fig{font-size:42px}
}

@media (min-width:1100px){ .sup-list{grid-template-columns:repeat(6,minmax(0,1fr))} }
@media (max-width:560px){ .sup-list{grid-template-columns:minmax(0,1fr)} }


/* the active cell's icon must survive the per-item colours */
.mh-nav a.here:nth-child(n) svg{color:var(--ground)}


/* the wordmark may not force the page wider than the phone */
@media (max-width:620px){
  .mh-name{white-space:normal;font-size:clamp(26px,8vw,34px);line-height:.95}
  .mh-strap{white-space:normal}
  .mh-title{gap:16px}
}


/* touch targets: the mono call-to-action links need a 44px hit area on phones */
@media (max-width:900px){
  .more{min-height:44px;padding:13px 0 9px;align-items:flex-end}
  .marg a,.foot nav a,.othersecs a{display:inline-block;min-height:24px;padding:3px 0}
}

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

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

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

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

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

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

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
.sponsor.sponsor{justify-content:center!important}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp: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}

/* pipeline: one brand treatment per tile — the name reads at the blurb's own size */
.sponsor .sp-brand{font:inherit!important;font-weight:700!important;letter-spacing:inherit!important;text-transform:none!important;color:inherit!important;display:inline!important;}

/* 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:#0C0E11;stroke-width:3px;stroke-linejoin:round}
.mapkit__pin:hover circle{r:9.1}
.mapkit__pin:hover text{font-weight:700}
/* MAPKIT_END */


/* 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.inner{padding-inline:var(--pad)}
  .wrap.page-head{padding-inline:var(--pad)}
}

/* op-nav-collapse: this nav printed 239px of stacked links at 390 before any content
   (6 links), and the build shipped no control to close it. A disclosure cannot be
   built from CSS alone — :hover and :focus-within are unreachable on touch until a link has
   already been tapped — so a hidden checkbox and its label were injected immediately before
   the nav, and the nav collapses against the checked state. Exactly the mechanism the builds
   that DO have a burger already use.
   Treatment "bracket", 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 (28px) 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 "max-height" technique and marked with the "chevron" icon — the mechanism
   is deliberately not identical across the fleet either. */
.menu-switch{display:none}
@media (max-width:900px){
  .menu-switch{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:fit-content;margin-inline:auto;justify-self:center;border:0;padding:10px 4px;letter-spacing:.2em;gap:12px;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}
  .menu-switch::before{content:"[";opacity:.55}
  .menu-switch::after{content:"]";opacity:.55}
  .menu-switch-bars{width:8px;height:8px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
  .mh-nav{max-height:0;overflow:hidden;padding-block:0;border-top-width:0;border-bottom-width:0;transition:max-height .28s ease}
  .menu-switch-c:checked ~ .mh-nav{max-height:220vh;padding-block:revert;border-top-width:revert;border-bottom-width:revert}
  .cartouche:has(> .menu-switch){display:flow-root}
  .menu-switch:not(:has(~ .mh-nav)){display:none}
}

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .sup-list 5 rows at 1440). Operator: "we should probably limit that to display only 2" — held to two rows in that width band only; the copy stays in the markup. */
@media (min-width:641px){
  .sup-list .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:901px) and (max-width:1299px){
  div.wrap.inner{padding-left:max(var(--pad), 18px);padding-right:max(var(--pad), 18px)}
  div.wrap.page-head{padding-left:max(var(--pad), 18px);padding-right:max(var(--pad), 18px)}
}
@media (min-width:681px) and (max-width:1299px){
  div.wrap.page-body{padding-left:max(var(--pad), 18px);padding-right:max(var(--pad), 18px)}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a > span.frame > img,
  aside.marg > figure.fig-inset > img,
  div.hero > div.hero-img > img,
  div.im > a > img,
  div.prose > figure.fig-bleed > img,
  div.prose > figure.fig-plate > img,
  li > a > img,
  main > section.feature > img,
  section.cathero > div.im > img,
  section.hero > div.hero-img > img,
  td > a > img){height:auto}
/* op-img-dims:end */