:root{
  --paper:#0e0c09; --panel:#16130d; --panel2:#1c1812;
  --ink:#e7e0d2; --muted:#9a917f; --faint:#6e6656;
  --accent:#e2a43b; --line:rgba(231,224,210,.14); --line-strong:rgba(231,224,210,.3);
  --disp:'Big Shoulders Display',sans-serif; --mono:'IBM Plex Mono',monospace; --sans:'Archivo',sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--sans)}
img{max-width:100%;display:block}
a{color:var(--accent)}a:hover{color:#f0bd66}
h1,h2,h3{text-wrap:pretty}
.wrap{max-width:1200px;margin:0 auto;padding-inline:24px}

/* ---------- header ---------- */
.site-head{border-bottom:1px solid var(--line)}
.masthead{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding:26px 0 18px}
.brand{font:800 34px/0.95 var(--disp);letter-spacing:.5px;color:var(--ink);text-decoration:none}
.brand:hover{color:var(--ink)}
.badge{font:600 9.5px var(--sans);letter-spacing:.16em;color:var(--accent);border:1.5px solid var(--accent);padding:4px 9px;transform:rotate(-1.2deg);white-space:nowrap}
.mast-line{font:400 12.5px/1.45 var(--sans);color:var(--muted);margin-left:auto;max-width:380px}
.site-nav{display:flex;gap:4px 26px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--line);font:500 11.5px var(--mono);letter-spacing:.12em}
.site-nav a{color:var(--ink);text-decoration:none;padding:4px 0}
.site-nav a:hover{color:var(--accent)}
.site-nav a.on{color:var(--accent);border-bottom:2px solid var(--accent)}

/* ---------- homepage bands ---------- */
.hero{position:relative;border-bottom:1px solid var(--line-strong)}
.hero img{width:100%;height:600px;object-fit:cover}
.hero-copy{position:absolute;left:0;right:0;bottom:40px}
.hero-copy .h{font:800 clamp(44px,7vw,92px)/0.92 var(--disp);text-shadow:0 2px 24px rgba(0,0,0,.7);margin:0;max-width:14ch}
.house-rule{font:500 clamp(12px,1.6vw,15px) var(--sans);letter-spacing:.06em;color:var(--accent);margin-top:14px;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.band{position:relative;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.band-img{width:100%;height:440px;object-fit:cover}
.band-copy{position:absolute;left:0;right:0;bottom:32px;pointer-events:none}
.band-copy a{pointer-events:auto}
.band-no{font:600 11px var(--sans);letter-spacing:.2em;color:var(--accent);text-shadow:0 1px 8px rgba(0,0,0,.8)}
.band-title{font:800 clamp(34px,4.5vw,54px)/1 var(--disp);margin:2px 0 0;text-shadow:0 2px 18px rgba(0,0,0,.7)}
.band-title a{color:var(--ink);text-decoration:none}
.band-title a:hover{color:var(--accent)}
.band-dek{font:400 14px var(--sans);color:#cfc7b6;margin-top:8px;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.band-toc{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font:400 12px var(--mono)}
.band-toc a{color:#cfc7b6;text-decoration:none;text-shadow:0 1px 8px rgba(0,0,0,.9)}
.band-toc a:hover{color:var(--accent)}
.band-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,12,9,0) 30%,rgba(14,12,9,.82) 100%)}
.flagship{border-top:1px solid var(--line);background:var(--panel)}
.flagship-in{display:flex;gap:28px;align-items:baseline;flex-wrap:wrap;padding:34px 0}
.flagship .k{font:600 11px var(--sans);letter-spacing:.2em;color:var(--accent);white-space:nowrap}
.flagship a{font:800 clamp(24px,3.4vw,40px)/1.05 var(--disp);color:var(--ink);text-decoration:none}
.flagship a:hover{color:var(--accent)}
.flagship .m{font:400 12px var(--mono);color:var(--muted);margin-left:auto}

/* ---------- sponsors ---------- */
.backline{border-top:1px solid var(--accent);background:var(--panel);padding:38px 0 44px}
.backline .k{font:800 22px var(--disp);letter-spacing:.06em;color:var(--accent);margin:0}
.backline .sub{font:400 13.5px/1.55 var(--sans);color:var(--muted);margin:6px 0 24px;max-width:620px}
.backline h3{font:600 10.5px var(--mono);letter-spacing:.18em;color:var(--faint);margin:26px 0 12px}
.sponsor-row{display:grid;grid-template-columns:repeat(auto-fit,272px);gap:14px}
.sponsor{display:flex;flex-direction:column;gap:10px;background:var(--paper);border:1px solid var(--line);padding:20px 22px;text-decoration:none;color:var(--ink)}
.sponsor:hover{border-color:var(--line-strong)}
.sponsor img{width:100%;height:56px;object-fit:contain}
.sponsor-name{font:600 12px var(--mono);letter-spacing:.06em;text-align:center;color:var(--ink)}
.sponsor-blurb{font:400 12.5px/1.55 var(--sans);color:var(--muted)}
.sponsor.feat{border-color:rgba(226,164,59,.4)}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);margin-top:64px;padding:34px 0 44px;font:400 13px/1.6 var(--sans);color:var(--muted)}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 24px;font:400 11.5px var(--mono);letter-spacing:.1em;margin-bottom:20px}
.foot-nav a{color:var(--muted);text-decoration:none}
.foot-nav a:hover{color:var(--accent)}
.foot-disc{font-style:italic;max-width:70ch}
.foot-rules{font:400 10.5px var(--mono);letter-spacing:.08em;color:var(--faint);margin-top:10px}

/* ---------- category pages ---------- */
.cat-hero{position:relative;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.cat-hero img{width:100%;height:380px;object-fit:cover}
.cat-hero .band-copy{bottom:28px}
.cat-intro{font:400 18px/1.6 var(--sans);color:#cfc7b6;max-width:70ch;padding:30px 0 4px}
.cat-list{list-style:none;margin:22px 0 0;padding:0}
.cat-list li{border-top:1px solid var(--line)}
.cat-list a{display:grid;grid-template-columns:150px 1fr auto;gap:20px;align-items:center;padding:18px 0;text-decoration:none;color:var(--ink)}
.cat-list img{width:150px;height:92px;object-fit:cover}
.cat-list .t{display:block;font:800 24px/1.05 var(--disp)}
.cat-list .d{display:block;font:400 13.5px/1.5 var(--sans);color:var(--muted);margin-top:6px;max-width:64ch}
.cat-list .m{font:400 11px var(--mono);color:var(--faint);white-space:nowrap}
.cat-list a:hover .t{color:var(--accent)}

/* ---------- article ---------- */
.art-head{padding:44px 0 10px}
.art-kicker{font:600 11px var(--mono);letter-spacing:.18em;color:var(--accent)}
.art-kicker a{color:var(--accent);text-decoration:none}
.art-title{font:800 clamp(38px,5.4vw,64px)/0.98 var(--disp);margin:12px 0 0;max-width:20ch}
.byline{font:400 13px var(--mono);color:var(--muted);margin:18px 0 0}
.art-hero{margin:28px 0 0}
.art-hero img{width:100%;height:460px;object-fit:cover}
.art-hero figcaption{font:400 11px var(--mono);letter-spacing:.06em;color:var(--faint);margin-top:8px}
.prose{max-width:72ch;margin:0 auto;padding:34px 24px 0;font:400 17.5px/1.75 var(--sans)}
.prose h2{font:800 30px/1.1 var(--disp);letter-spacing:.02em;margin:44px 0 14px}
.prose p{margin:0 0 20px}
.prose .lead{font:400 21px/1.6 var(--sans);color:#d8d1c1}
.pullquote{margin:38px 0;padding:0;border:0}
.pullquote p{font:800 clamp(24px,3vw,34px)/1.2 var(--disp);color:var(--accent);margin:0}
.pullquote p::before{content:"“"}.pullquote p::after{content:"”"}
.blockquote{margin:30px 0;padding:18px 24px;border-left:3px solid var(--accent);background:var(--panel)}
.blockquote p{margin:0;font-style:italic}
.blockquote cite{display:block;font:400 12px var(--mono);color:var(--muted);margin-top:10px;font-style:normal}
.callout{margin:30px 0;padding:20px 24px;background:var(--panel);border:1px solid var(--line)}
.callout p{margin:0}
.note{font:400 14px/1.6 var(--sans);color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin:26px 0}

/* full-bleed breaker bands from Notes-for-Design */
.breaker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel);margin:44px 0;padding:30px 0 34px}
.breaker .wrap{max-width:1080px}
.breaker-k{font:600 10.5px var(--mono);letter-spacing:.2em;color:var(--accent);margin:0 0 18px}
.term-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px;background:var(--line)}
.term{background:var(--panel2);padding:14px 18px}
.term dt{font:600 13px var(--mono);color:var(--ink);margin:0}
.term dd{font:400 13.5px/1.55 var(--sans);color:var(--muted);margin:6px 0 0}
.breaker ul.plain{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px 32px}
.breaker ul.plain li{font:400 14.5px/1.6 var(--sans);color:#cfc7b6;padding-left:18px;position:relative}
.breaker ul.plain li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--accent)}

/* timeline */
.timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--line-strong)}
.timeline li{position:relative;padding:0 0 20px 26px}
.timeline li::before{content:"";position:absolute;left:-6px;top:.5em;width:10px;height:10px;background:var(--accent)}
.timeline .t-when{display:block;font:600 12.5px var(--mono);letter-spacing:.06em;color:var(--accent)}
.timeline .t-what{display:block;font:400 15px/1.6 var(--sans);color:#cfc7b6;margin-top:3px}

/* figures */
.article-figure{margin:36px 0}
.article-figure img{width:100%}
.article-figure figcaption,.gallery figcaption,.map-figure figcaption,.chart figcaption{font:400 11.5px var(--mono);letter-spacing:.04em;color:var(--faint);margin-top:8px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:36px 0}
.gallery figure{margin:0}
.gallery img{width:100%;height:220px;object-fit:cover}
.map-figure{margin:36px 0}
.map-figure .map-slot{min-height:320px;border:1.5px dashed var(--accent);background:var(--panel)}
.map-render{background:var(--panel);border:1px solid var(--line)}
.map-render svg{display:block;width:100%;height:auto}

/* data */
.versus,.datatable{width:100%;border-collapse:collapse;margin:30px 0;font:400 14.5px/1.5 var(--sans)}
.versus th,.datatable th{font:600 11px var(--mono);letter-spacing:.12em;text-align:left;color:var(--accent);border-bottom:2px solid var(--accent);padding:10px 12px}
.versus td,.datatable td{border-bottom:1px solid var(--line);padding:10px 12px;vertical-align:top}
.versus td:first-child{font-weight:600}
.statrow{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0}
.statblock{flex:1 1 160px;background:var(--panel);border:1px solid var(--line);padding:18px 20px}
.stat-num{display:block;font:800 40px/1 var(--disp);color:var(--accent)}
.stat-label{display:block;font:400 12.5px/1.5 var(--sans);color:var(--muted);margin-top:6px}
.chart{margin:34px 0}
.chart svg{width:100%;height:auto;display:block}

/* cards / refs */
.profile-grid{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0}
.profile-card{flex:1 1 260px;background:var(--panel);border:1px solid var(--line);padding:20px 22px}
.profile-card .p-photo{width:72px;height:72px;object-fit:cover;border-radius:50%}
.profile-card h3{font:800 22px var(--disp);margin:12px 0 0}
.profile-card .p-role{font:400 12px var(--mono);color:var(--accent);margin:4px 0 10px}
.profile-card p{font:400 14px/1.6 var(--sans);color:var(--muted);margin:0 0 8px}
.profile-card .p-links a{font:400 12.5px var(--mono)}
.org-grid{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0}
.org-card{flex:1 1 220px;display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);padding:12px 16px;text-decoration:none}
.org-logo{width:40px;height:40px;object-fit:contain}
.org-card.no-logo .org-logo{display:none}
.org-name{font:600 13.5px var(--sans);color:var(--ink)}
.org-host{font:400 11px var(--mono);color:var(--faint);margin-left:auto}
.entity-ref{font:inherit;text-decoration:none;border-bottom:1px solid var(--accent)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:30px 0}
.further-grid a{background:var(--panel);border:1px solid var(--line);padding:18px 20px;text-decoration:none;color:var(--ink);font:600 16px/1.3 var(--sans)}
.further-grid a:hover{border-color:var(--accent)}

/* related / prev-next */
.art-end{max-width:72ch;margin:0 auto;padding:10px 24px 0}
.related-h{font:600 10.5px var(--mono);letter-spacing:.2em;color:var(--accent);margin:34px 0 10px}
.related-links{list-style:none;margin:0;padding:0}
.related-links li{border-top:1px solid var(--line)}
.related-links a{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding:12px 0;text-decoration:none;color:var(--ink);font:600 17px/1.3 var(--sans)}
.related-links a span{font:400 11px var(--mono);color:var(--faint);white-space:nowrap}
.related-links a:hover{color:var(--accent)}

/* pages */
.page-body{max-width:72ch;margin:0 auto;padding:44px 24px 0;font:400 17px/1.75 var(--sans)}
.page-body h1{font:800 clamp(36px,5vw,56px)/1 var(--disp);margin:0 0 20px}
.big404{font:800 clamp(90px,18vw,220px)/1 var(--disp);color:var(--accent);margin:40px 0 0}

@media (max-width:760px){
  .hero img{height:440px}
  .band-img{height:340px}
  .mast-line{display:none}
  .cat-list a{grid-template-columns:96px 1fr;gap:14px}
  .cat-list img{width:96px;height:64px}
  .cat-list .m{display:none}
  .art-hero img{height:280px}
  .prose{font-size:16.5px}
  .sponsor-row{grid-template-columns:repeat(auto-fit,minmax(230px,272px))}
  .flagship .m{margin-left:0}
}

/* 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-money-columns: the supporters block ran one tile per row — 11 tiles,
   1680px at 390, 35% of the whole page. Two columns bring it to
   1072px (36% shorter). Checked before writing: no new overflow, smallest mark still
   115px wide, longest blurb 3 lines, tile heights 91-206px.
   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. An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.sponsor-row), 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-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .sponsor-row > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-row > * *{min-width:0!important;max-width:100%}
    .sponsor-row img,.sponsor-row svg{max-width:100%;height:auto}
  .sponsor-row .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-odd-tier-lead: .sponsor-row (7 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .sponsor-row:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(body > div.cat-hero > img,
  body > div.hero > img,
  body > section.band > img.band-img,
  div.prose > figure.article-figure > img,
  div.wrap > figure.art-hero > img,
  li > a > img){height:auto}
/* op-img-dims:end */
@media (min-width:660px) and (max-width:1199px){.sponsor-row.sponsor-row:has(> [data-partner]){grid-template-columns:repeat(auto-fill,minmax(min(272px,calc(50% - 7px)),1fr))!important;justify-content:stretch!important}.sponsor-row.sponsor-row > [data-partner]{width:auto!important;max-width:none!important}}