/* ============================================================
   Rive Gauche — an after-dark guide to Montparnasse & the Left Bank
   Shared stylesheet. Plain CSS, self-contained (fonts via <link>).
   ============================================================ */

:root{
  --base:#161B27;
  --base-2:#12161f;
  --panel-a:#1b2233;
  --panel-b:#151a26;
  --gold:#C39A4E;
  --gold-light:#D9B978;
  --river:#5f7fb8;
  --ivory:#EDE4D2;
  --body:#c9c2b2;
  --body-strong:#d7d0c0;
  --muted:#8a8272;
  --muted-2:#7f8798;
  --hair:rgba(195,154,78,.22);
  --hair-soft:rgba(195,154,78,.14);
  --serif:'Marcellus', Georgia, serif;
  --serif-sc:'Marcellus SC', Georgia, serif;
  --body-face:'Spectral', Georgia, serif;
  --ui:'Josefin Sans', system-ui, sans-serif;
  --measure:68ch;
  --gutter:clamp(20px,5vw,64px);
  --maxw:1280px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--base);
  color:var(--body);
  font-family:var(--body-face);
  font-size:19px;
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
a{color:var(--gold);text-decoration:none;transition:color .18s ease;}
a:hover{color:var(--gold-light);}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ivory);font-weight:400;line-height:1.12;margin:0;}
p{margin:0 0 1.1em;text-wrap:pretty;}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.skip{position:absolute;left:-999px;}
.skip:focus{left:12px;top:12px;background:var(--gold);color:var(--base);padding:8px 14px;z-index:99;}

/* ---------- eyebrow / kicker / labels ---------- */
.eyebrow,.kicker{
  font-family:var(--ui);
  text-transform:uppercase;
  letter-spacing:.24em;
  font-weight:500;
  font-size:14px;
  color:var(--gold);
}
.kicker--gl{color:var(--gold-light);}

/* ============================================================
   MASTHEAD + NAV
   ============================================================ */
.masthead{border-bottom:1px solid var(--hair);}
.masthead__eyebrow{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:var(--ui);font-size:13px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);padding:22px 0 0;
}
.masthead__eyebrow span:last-child{color:var(--muted-2);}
.masthead__brand{text-align:center;padding:26px 0 4px;}
.wordmark{font-family:var(--serif-sc);letter-spacing:.08em;color:var(--ivory);line-height:1;}
.masthead .wordmark{font-size:clamp(42px,6vw,68px);}
.brand-rule{width:80px;height:2px;background:var(--gold);margin:16px auto;}
.tagline{font-family:var(--ui);font-weight:300;font-size:16px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-light);}
.mainnav{
  display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(18px,3vw,38px);
  padding:26px 0 24px;font-family:var(--ui);font-weight:400;font-size:15px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ivory);
}
.mainnav a{color:var(--ivory);}
.mainnav a:hover,.mainnav a[aria-current="page"]{color:var(--gold);}

/* compact sticky bar for interior pages */
.topbar{position:sticky;top:0;z-index:40;background:rgba(18,22,31,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair);}
.topbar__row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;}
.topbar .wordmark{font-size:26px;}
.topbar nav{display:flex;flex-wrap:wrap;gap:clamp(12px,2vw,26px);font-family:var(--ui);font-size:13px;letter-spacing:.18em;text-transform:uppercase;}
.topbar nav a{color:var(--body-strong);}
.topbar nav a:hover,.topbar nav a[aria-current="page"]{color:var(--gold);}

/* ============================================================
   HERO (homepage split)
   ============================================================ */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.hero__text{padding:clamp(40px,5vw,68px) clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center;}
.hero__text h1{font-size:clamp(38px,4.4vw,60px);line-height:1.05;margin:16px 0 20px;}
.hero__dek{font-size:clamp(19px,1.5vw,21px);font-weight:300;line-height:1.6;color:var(--body-strong);margin-bottom:22px;max-width:34ch;}
.byline{font-family:var(--ui);font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.hero__media{position:relative;min-height:440px;}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--base) 1%,rgba(22,27,39,.08) 32%,transparent);}

/* ============================================================
   SECTION SHELL
   ============================================================ */
.band{padding-block:clamp(44px,5vw,68px);}
.band--rule{border-top:1px solid var(--hair);}
.band__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px;}
.band__head h2{font-size:clamp(28px,3vw,38px);}
.band__head .accent{font-family:var(--body-face);font-style:italic;color:var(--gold-light);font-size:18px;}

/* ---------- Ten things after dark ---------- */
.tenlist{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(28px,4vw,56px);list-style:none;margin:0;padding:0;}
.tenlist li{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--hair-soft);}
.tenlist .n{font-family:var(--serif);font-size:26px;color:var(--gold);min-width:36px;}
.tenlist .t{font-weight:300;font-size:17px;color:var(--body-strong);line-height:1.45;}

/* ---------- At a glance ---------- */
.glance{border:1px solid rgba(195,154,78,.4);padding:clamp(28px,3.5vw,40px);background:linear-gradient(var(--panel-a),var(--panel-b));}
.glance__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 34px;}
.glance dt{font-family:var(--ui);letter-spacing:.18em;text-transform:uppercase;font-size:12px;color:var(--gold);margin-bottom:6px;}
.glance dd{margin:0;font-weight:300;font-size:16px;line-height:1.45;color:var(--body-strong);}

/* ---------- Map block ---------- */
.mapblock{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,3.5vw,40px);align-items:center;}
.mapframe{position:relative;border:1px solid var(--gold);background:radial-gradient(circle at 40% 40%,#232c40,#12161f);overflow:hidden;}
.mapframe svg{display:block;width:100%;height:auto;}
.mapframe figcaption,.map-cap{position:absolute;left:14px;bottom:12px;font-family:var(--ui);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(237,228,210,.7);}
.map-legend{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;gap:8px;font-family:var(--ui);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--body-strong);background:rgba(18,22,31,.66);padding:10px 12px;border:1px solid var(--hair-soft);}
.map-legend span{display:flex;align-items:center;gap:8px;}
.map-legend i{width:10px;height:10px;border-radius:50%;display:inline-block;}
.lc-pins circle{cursor:pointer;transition:transform .2s ease;transform-box:fill-box;transform-origin:center;}
.lc-pins circle:hover{transform:scale(1.4);}
.pin .tip{opacity:0;transition:opacity .15s ease;pointer-events:none;overflow:visible;}
.pin:hover .tip{opacity:1;}
.tip-wrap{height:100%;display:flex;align-items:flex-end;justify-content:center;}
.pin-tip{display:inline-block;background:rgba(12,16,25,.96);border:1px solid #C39A4E;padding:7px 12px;border-radius:6px;font-family:var(--ui);color:var(--ivory);font-size:13px;line-height:1.35;white-space:nowrap;box-shadow:0 8px 22px rgba(0,0,0,.55);text-align:center;letter-spacing:.02em;}
.pin-tip span{display:block;font-family:var(--body-face);font-style:italic;color:var(--gold-light);font-size:12px;}
.mapblock h2{font-size:clamp(26px,3vw,32px);margin-bottom:14px;}
.mapblock p{font-weight:300;font-size:16px;line-height:1.6;}

/* ============================================================
   CARD GRID (even-height)
   ============================================================ */
.cardgrid{display:grid;gap:clamp(28px,3.5vw,44px);}
.cardgrid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.cardgrid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.card{display:flex;flex-direction:column;height:100%;color:inherit;}
.card__media{aspect-ratio:16/10;overflow:hidden;margin-bottom:14px;background:var(--base-2);}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.card:hover .card__media img{transform:scale(1.04);}
.card .kicker{font-size:12px;letter-spacing:.2em;margin-bottom:7px;}
.card h3{font-size:clamp(21px,1.7vw,26px);line-height:1.14;margin-bottom:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.28em;}
.card p{font-weight:300;font-size:15.5px;line-height:1.5;color:#b9b2a2;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.card .card__meta{margin-top:auto;padding-top:12px;}

/* ---------- Feed (homepage newest-first) ---------- */
.feed{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(28px,4vw,52px);align-items:start;}
.feed__lead .card__media{aspect-ratio:16/9;}
.feed__lead h3{font-size:clamp(26px,2.6vw,34px);-webkit-line-clamp:3;min-height:auto;}
.feed__lead p{font-size:17px;-webkit-line-clamp:4;}
.feed__list{display:flex;flex-direction:column;}
.feed__item{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:18px 0;border-top:1px solid var(--hair-soft);}
.feed__item:first-child{border-top:0;padding-top:0;}
.feed__item .card__media{aspect-ratio:1/1;margin:0;}
.feed__item h3{font-size:18px;-webkit-line-clamp:2;min-height:auto;margin-bottom:5px;}
.feed__item .kicker{font-size:11px;margin-bottom:5px;}
.feed__item .byline{font-size:12px;letter-spacing:.12em;margin-top:6px;}
.more-toggle{display:none;}
.more-label{display:inline-flex;align-items:center;gap:8px;margin-top:18px;cursor:pointer;
  font-family:var(--ui);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);}
.more-label:hover{color:var(--gold-light);}
.more-item{display:none;}
.more-toggle:checked ~ .feed__list .more-item{display:grid;}
.more-toggle:checked ~ .more-label .more-label__more{display:none;}
.more-label__less{display:none;}
.more-toggle:checked ~ .more-label .more-label__less{display:inline;}

/* ============================================================
   SUPPORTER STRIP (sponsors, 11 slots, tiered)
   ============================================================ */
.supporters{border-top:1px solid var(--hair);}
.supporters__head{margin-bottom:26px;}
.supporters__head h2{font-size:clamp(26px,3vw,34px);margin-top:6px;}
.supporters__head p{font-weight:300;font-size:16px;color:var(--muted-2);max-width:60ch;margin-top:8px;}
.featured-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.5vw,28px);}
.sponsor{
  display:flex;flex-direction:column;gap:12px;padding:22px 24px;
  background:var(--base-2);border:1px solid var(--hair-soft);height:100%;
}
.sponsor img{width:100%;aspect-ratio:16/6;object-fit:cover;background:#0e1119;}
.sponsor-blurb{font-weight:300;font-size:14.5px;line-height:1.5;color:var(--body);min-height:1.5em;}
.sponsor:hover{border-color:var(--gold);}
.regulars{margin-top:clamp(40px,5vw,64px);padding-top:clamp(28px,3vw,40px);border-top:1px dashed var(--hair-soft);}
.regulars__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px;}
.regulars__head h3{font-size:22px;}
.regulars__head .accent{font-family:var(--body-face);font-style:italic;color:var(--muted-2);font-size:15px;}
.regulars-band{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;}
.regulars-band .sponsor{padding:14px 16px;gap:8px;}
.regulars-band .sponsor img{aspect-ratio:16/7;}
.regulars-band .sponsor-blurb{font-size:13px;color:var(--muted-2);}

/* ---------- single inline sponsor bar (kept for reference/spec) ---------- */

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{border-top:1px solid var(--hair);padding-block:clamp(34px,4vw,48px);text-align:center;}
.site-footer .wordmark{font-size:28px;margin-bottom:16px;}
.footer-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(16px,2.5vw,28px);
  font-family:var(--ui);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;}
.footer-nav a{color:var(--gold);}
.footer-nav a:hover{color:var(--gold-light);}
.disclaimer{font-weight:300;font-size:14px;line-height:1.5;color:var(--muted-2);margin:0 auto;max-width:56ch;}

/* ============================================================
   ARTICLE / POST
   ============================================================ */
.post-hero{position:relative;min-height:clamp(420px,56vw,620px);display:flex;align-items:flex-end;}
.post-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.post-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--base) 8%,rgba(22,27,39,.35) 55%,rgba(22,27,39,.15));}
.post-hero__inner{position:relative;padding-block:clamp(32px,4vw,56px);width:100%;}
.post-hero h1{font-size:clamp(34px,5vw,62px);line-height:1.03;margin:14px 0 16px;max-width:18ch;}
.post-hero__dek{font-weight:300;font-size:clamp(19px,1.6vw,22px);line-height:1.55;color:var(--body-strong);max-width:52ch;margin-bottom:16px;}

.article{padding-block:clamp(40px,5vw,72px);}
.article-body{max-width:min(880px,92vw);margin-inline:auto;padding-inline:var(--gutter);font-size:21px;line-height:1.8;}
.article-body .wide{width:min(1180px,94vw);margin-inline:auto;position:relative;left:50%;transform:translateX(-50%);}
.article-body>p{margin:0 0 1.25em;}
.article-body h2{font-size:clamp(26px,2.6vw,34px);margin:1.7em 0 .6em;line-height:1.15;}
.article-body h2 .sec-no{display:block;font-family:var(--ui);font-size:14px;letter-spacing:.24em;color:var(--gold);margin-bottom:10px;font-weight:500;}
.article-body h3{font-size:24px;margin:1.4em 0 .5em;}
.article-body strong{color:var(--ivory);font-weight:600;}
.article-body a{border-bottom:1px solid var(--hair);}
.article-body a:hover{border-color:var(--gold-light);}

/* drop cap + lead */
.lead{font-size:clamp(21px,1.9vw,25px);line-height:1.6;color:var(--body-strong);font-weight:300;}
.lead::first-letter{
  font-family:var(--serif);float:left;font-size:5.6em;line-height:.78;padding:.02em .12em 0 0;color:var(--gold);
}

/* components */
.pullquote{margin:1.8em 0;padding:0 0 0 28px;border-left:3px solid var(--gold);}
.pullquote p{font-family:var(--serif);font-size:clamp(24px,2.4vw,32px);line-height:1.28;color:var(--ivory);margin:0;font-style:normal;}
.blockquote{margin:1.6em 0;padding:24px 28px;background:linear-gradient(var(--panel-a),var(--panel-b));border:1px solid var(--hair-soft);}
.blockquote p{font-style:italic;font-size:20px;color:var(--body-strong);margin:0 0 .5em;}
.blockquote cite{font-family:var(--ui);font-style:normal;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);}
.callout{margin:1.6em 0;padding:22px 26px;border:1px solid var(--gold);background:rgba(195,154,78,.07);}
.callout p{margin:0;color:var(--body-strong);}
.callout::before{content:"Note";display:block;font-family:var(--ui);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;}
.note{margin:1.4em 0;padding-left:18px;border-left:2px solid var(--muted);font-style:italic;font-size:17px;color:var(--muted-2);}

/* by-the-numbers rail */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--hair-soft);border:1px solid var(--hair-soft);margin:1.8em 0;}
.statblock{background:var(--base);padding:22px 20px;display:flex;flex-direction:column;gap:6px;}
.stat-num{font-family:var(--serif);font-size:clamp(34px,4vw,46px);color:var(--gold);line-height:1;}
.stat-label{font-family:var(--ui);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--body-strong);line-height:1.35;}
.bynumbers-wrap{margin:2em 0;}
.bynumbers-wrap>.eyebrow{margin-bottom:14px;display:block;}

/* versus / datatable */
.versus,.datatable{width:100%;border-collapse:collapse;margin:1.8em 0;font-size:17px;}
.versus th,.versus td,.datatable th,.datatable td{border:1px solid var(--hair-soft);padding:14px 16px;text-align:left;vertical-align:top;}
.versus thead th,.datatable thead th{font-family:var(--ui);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);background:var(--base-2);}
.versus tbody th{font-family:var(--body-face);color:var(--ivory);font-weight:600;background:rgba(195,154,78,.04);}
.datatable tbody tr:nth-child(even){background:rgba(255,255,255,.015);}
.datatable td .num{font-family:var(--serif);color:var(--gold-light);}

/* timeline */
.timeline{list-style:none;margin:1.8em 0;padding:0;border-left:2px solid var(--hair);}
.timeline li{position:relative;padding:0 0 26px 28px;}
.timeline li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--gold);border:2px solid var(--base);}
.timeline .t-when{display:block;font-family:var(--ui);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:4px;}
.timeline .t-what{display:block;color:var(--body-strong);font-weight:300;}

/* charts */
.chart{margin:1.8em 0;}
.chart svg{width:100%;height:auto;overflow:visible;}
.chart .bar-rect{fill:var(--gold);}
.chart .bar-label,.chart .axis-label{font-family:var(--ui);font-size:12px;letter-spacing:.06em;fill:var(--body-strong);}
.chart .bar-val{font-family:var(--serif);font-size:13px;fill:var(--gold-light);}
.chart figcaption,.article-figure figcaption,.map-figure figcaption,.gallery figcaption{
  font-family:var(--ui);font-size:13px;letter-spacing:.06em;color:var(--muted-2);margin-top:10px;text-transform:none;}
.chart .grid-line{stroke:var(--hair-soft);}
.chart .line-path{fill:none;stroke:var(--gold);stroke-width:2.5;}
.chart .line-dot{fill:var(--gold-light);}

/* figures / gallery / map */
.article-figure{margin:2em 0;}
.article-figure img{width:100%;height:auto;}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:2em 0;}
.gallery figure{margin:0;}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.map-figure{margin:2em 0;}
.map-figure .map-slot{position:relative;border:1px solid var(--gold);background:radial-gradient(circle at 40% 40%,#232c40,#12161f);overflow:hidden;}
.map-figure .map-slot svg{display:block;width:100%;height:auto;}

/* profile / org / entity */
.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:2em 0;}
.profile-card{background:var(--base-2);border:1px solid var(--hair-soft);padding:22px 24px;display:flex;flex-direction:column;gap:6px;}
.profile-card .p-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;margin-bottom:6px;}
.profile-card h3{font-size:20px;}
.profile-card .p-role{font-family:var(--ui);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);}
.profile-card p{font-weight:300;font-size:15.5px;line-height:1.5;color:var(--body);margin:0;}
.profile-card .p-links{margin-top:4px;}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:2em 0;}
.org-card{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--base-2);border:1px solid var(--hair-soft);}
.org-card:hover{border-color:var(--gold);}
.org-logo{width:40px;height:40px;object-fit:contain;background:#0e1119;padding:4px;}
.org-card.no-logo .org-logo{display:none;}
.org-name{font-family:var(--serif);color:var(--ivory);font-size:17px;display:block;}
.org-host{font-family:var(--ui);font-size:11px;letter-spacing:.08em;color:var(--muted-2);}
.entity-ref{white-space:nowrap;border-bottom:1px solid var(--hair);}

/* related / further */
.related,.further{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--hair);padding-top:clamp(28px,3vw,40px);}
.related h2,.further h2{font-size:26px;margin-bottom:20px;}
.related-links{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.related-links li{border-top:1px solid var(--hair-soft);}
.related-links li:first-child{border-top:0;}
.related-links a{display:flex;align-items:baseline;gap:14px;padding:16px 0;color:var(--body-strong);}
.related-links a:hover{color:var(--gold-light);}
.related-links .rl-kicker{font-family:var(--ui);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);min-width:140px;}
.related-links .rl-title{font-family:var(--serif);font-size:19px;color:var(--ivory);}
.related-links a:hover .rl-title{color:var(--gold-light);}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;}
.further-grid a{padding:18px 20px;background:var(--base-2);border:1px solid var(--hair-soft);font-family:var(--serif);color:var(--ivory);font-size:18px;}
.further-grid a:hover{border-color:var(--gold);color:var(--gold-light);}

/* ============================================================
   CATEGORY / INDEX PAGES
   ============================================================ */
.cat-hero{border-bottom:1px solid var(--hair);padding-block:clamp(44px,5vw,72px);}
.cat-hero h1{font-size:clamp(36px,5vw,58px);margin:14px 0 16px;}
.cat-hero .cat-intro{font-weight:300;font-size:clamp(19px,1.6vw,22px);line-height:1.55;color:var(--body-strong);max-width:56ch;}
.cat-list{list-style:none;margin:0;padding:0;}
.cat-list li{border-top:1px solid var(--hair-soft);}
.cat-list>li:first-child{border-top:0;}
.cat-row{display:grid;grid-template-columns:200px 1fr auto;gap:clamp(18px,3vw,36px);align-items:center;padding:26px 0;}
.cat-row .cat-thumb{aspect-ratio:16/10;overflow:hidden;background:var(--base-2);}
.cat-row .cat-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.cat-row:hover .cat-thumb img{transform:scale(1.04);}
.cat-row h3{font-size:clamp(22px,2vw,28px);line-height:1.14;margin-bottom:8px;}
.cat-row:hover h3{color:var(--gold-light);}
.cat-row p{font-weight:300;font-size:16px;color:#b9b2a2;margin:0;max-width:60ch;}
.cat-row .byline{margin-top:10px;}
.cat-row .cat-read{font-family:var(--ui);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);white-space:nowrap;}

/* hub of sections */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;}
.hub-card{padding:28px 26px;background:linear-gradient(var(--panel-a),var(--panel-b));border:1px solid var(--hair-soft);display:flex;flex-direction:column;gap:10px;height:100%;}
.hub-card:hover{border-color:var(--gold);}
.hub-card h3{font-size:24px;}
.hub-card p{font-weight:300;font-size:15.5px;color:var(--body);margin:0;}
.hub-card .hub-count{margin-top:auto;font-family:var(--ui);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);}

/* ============================================================
   SIMPLE PAGES (about / contact / 404)
   ============================================================ */
.page{padding-block:clamp(44px,5vw,72px);}
.page__body{max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter);font-size:20px;line-height:1.8;}
.page__body h1{font-size:clamp(34px,4.5vw,54px);margin-bottom:.5em;}
.page__body h2{font-size:28px;margin:1.6em 0 .5em;}
.page__body .lead{margin-bottom:1.2em;}
.contact-methods{list-style:none;margin:1.4em 0;padding:0;display:grid;gap:14px;}
.contact-methods li{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--base-2);border:1px solid var(--hair-soft);}
.contact-methods svg{width:24px;height:24px;flex:none;stroke:var(--gold);}
.contact-methods .cm-label{font-family:var(--ui);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);display:block;}
.contact-methods .cm-val{font-size:18px;color:var(--ivory);}
.notfound{text-align:center;padding-block:clamp(80px,12vw,160px);}
.notfound .code{font-family:var(--serif);font-size:clamp(90px,16vw,190px);color:var(--gold);line-height:1;}
.notfound h1{font-size:clamp(28px,3vw,40px);margin:10px 0 16px;}
.notfound p{max-width:44ch;margin:0 auto 26px;color:var(--body-strong);}
.btn{display:inline-block;font-family:var(--ui);font-size:14px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--base);background:var(--gold);padding:14px 26px;}
.btn:hover{background:var(--gold-light);color:var(--base);}

/* ============================================================
   STYLEGUIDE
   ============================================================ */
.sg-section{padding-block:clamp(32px,4vw,52px);border-top:1px solid var(--hair-soft);}
.sg-section>.eyebrow{display:block;margin-bottom:8px;}
.sg-section h2{font-size:28px;margin-bottom:8px;}
.sg-note{color:var(--muted-2);font-size:15px;font-weight:300;margin-bottom:24px;}
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.swatch{border:1px solid var(--hair-soft);}
.swatch .chip{height:78px;}
.swatch .meta{padding:10px 12px;font-family:var(--ui);font-size:12px;letter-spacing:.06em;color:var(--body-strong);}
.type-row{padding:16px 0;border-top:1px solid var(--hair-soft);}
.type-row:first-of-type{border-top:0;}
.p-attr{font-family:var(--ui);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-top:4px;}
.chart.donut{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.chart.donut svg{width:200px;height:auto;}
.donut-key{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.donut-key li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--body-strong);}
.donut-key i{width:14px;height:14px;display:inline-block;border-radius:3px;}
.chart .hbar-label{font-family:var(--ui);font-size:12.5px;letter-spacing:.04em;fill:var(--body-strong);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  body{font-size:18px;}
  .hero{grid-template-columns:1fr;}
  .hero__media{min-height:0;aspect-ratio:16/10;order:-1;}
  .hero__media img{position:static;}
  .hero__media::after{background:linear-gradient(to top,var(--base) 2%,transparent 40%);}
  .feed{grid-template-columns:1fr;}
  .mapblock{grid-template-columns:1fr;}
  .cardgrid.cols-3,.featured-band{grid-template-columns:repeat(2,minmax(0,1fr));}
  .regulars-band{grid-template-columns:repeat(3,minmax(0,1fr));}
  .cat-row{grid-template-columns:1fr;gap:14px;}
  .cat-row .cat-thumb{aspect-ratio:16/9;}
  .cat-row .cat-read{display:none;}
}
@media (max-width:600px){
  body{font-size:17px;}
  .glance__grid{grid-template-columns:1fr 1fr;}
  .tenlist{grid-template-columns:1fr;}
  .cardgrid.cols-2,.cardgrid.cols-3,.featured-band{grid-template-columns:1fr;}
  .regulars-band{grid-template-columns:repeat(2,minmax(0,1fr));}
  .profile-grid{grid-template-columns:1fr;}
  .gallery{grid-template-columns:1fr 1fr;}
  .feed__item{grid-template-columns:90px 1fr;gap:14px;}
  .article-body{font-size:19px;}
  .lead::first-letter{font-size:4.4em;}
  .masthead__eyebrow{letter-spacing:.16em;font-size:11px;}
  .topbar nav{display:none;}
  .related-links a{flex-direction:column;gap:4px;}
  .related-links .rl-kicker{min-width:0;}
}
@media (max-width:380px){
  .glance__grid{grid-template-columns:1fr;}
}

/* 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;background:transparent}

/* 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{object-fit:contain!important}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.featured-band .sponsor.sponsor img{box-sizing:border-box!important;padding:12px 20px!important}
.regulars-band .sponsor.sponsor img{box-sizing:border-box!important;padding:12px 20px!important}

/* op-nav-collapse: this nav printed 209px 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 "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,64px)) 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 "bars" 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:fit-content;border:1px solid currentColor;border-radius:2px;padding:10px 15px;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .index-toggle-bars{width:15px;height:9px;flex:none;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;box-shadow:inset 0 3.5px 0 -1px currentColor}
  .mainnav{max-height:0;overflow:hidden;padding-block:0;border-top-width:0;border-bottom-width:0;transition:max-height .28s ease}
  .index-toggle-c:checked ~ .mainnav{max-height:220vh;padding-block:revert;border-top-width:revert;border-bottom-width:revert}
  .wrap:has(> .index-toggle){display:flow-root}
  .index-toggle:not(:has(~ .mainnav)){display:none}
}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   1836px at 390, 23% of the whole page. Two columns bring it to
   1493px (19% shorter). Checked before writing: no new overflow, smallest mark still
   117px wide, longest blurb 6 lines, tile heights 209-278px.
   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 (.featured-band), 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){
  .featured-band{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:28px!important}
    .featured-band > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .featured-band > * *{min-width:0!important;max-width:100%}
    .featured-band img,.featured-band svg{max-width:100%;height:auto}
  .featured-band .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-blurb-rows: money blurbs ran to 6 rows at 390, 989px of tier across
   8 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .regulars-band .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:60px!important;min-height:0!important;overflow:hidden!important}
}

/* op-odd-tier-lead: .featured-band (3 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){
  .featured-band:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-page-overflow: the page scrolled sideways at 320 — a.sp-domain reached
   283px in a 320px screen (+10px), inside
   div.sponsor. Remedy: let the words break. Structural only, no spacing value of mine;
   tried in order and this is the first that held, with the page's visible copy unchanged.
   Phone widths only — desktop is re-measured after writing and must not move. */
@media (max-width:360px){
  a.sp-domain,a.sp-domain *{overflow-wrap:anywhere!important;min-width:0!important}
}

/* op-article-width: the article column was capped at 752px (80 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width min(880px, 92vw) (declared in .article-body) 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){
  div.article-body{max-width:min(1081px, 100%)!important}
}
@media (min-width:1600px){
  div.article-body{max-width:min(clamp(1081px, 75.069vw, 1297px), 100%)!important}
  div.article-body > :is(p:not([class])), div.article-body > :is(ol.timeline) > li{font-size:clamp(21px,1.4583vw,25.2px)!important}
}
/* op-article-width:end */

/* op-name-wrap: on the live page a brand name or domain label ran out of its money tile (one unbreakable word in a narrow tile, measured 2026-09-23). The name wraps instead (a brand on two lines is better than half a word). Money tiles only. */
[data-partner] .sp-domain{white-space:normal!important;overflow-wrap:anywhere;text-overflow:clip!important}
/* op-name-wrap:end */

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .regulars-band 5 rows at 1024). 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){
  .regulars-band .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-heading-levels */
h2:where(.rt-h3){font-family: var(--serif); color: var(--ivory); font-weight: 400; line-height: 1.12; margin: 0px;}
.cat-row h2:where(.rt-h3){font-size: clamp(22px, 2vw, 28px); line-height: 1.14; margin-bottom: 8px;}
.cat-row:hover h2:where(.rt-h3){color: var(--gold-light);}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.card > div.card__media > img,
  a.cat-row > span.cat-thumb > img,
  div.gallery > figure > img,
  main > section.post-hero > img,
  section.hero > a.hero__media > img){height:auto}
/* op-img-dims:end */

/* op-domain-line-fit — the partner's domain line broke mid-word wherever its column was narrower than the domain.
   The tile that carries one is the size container; the domain scales down only as far as the column needs
   (12px floor), and a break that is still needed falls at the dot (<wbr>), never inside the name */
.sponsor:has(> .sp-domain){container-type:inline-size}
.sponsor .sp-domain .sp-dn{font-size:max(12px,min(1em,100cqi / var(--n)))}
/* op-domain-line-fit:end */
.featured-band > [data-partner] img{background:transparent!important}.regulars-band > [data-partner] img{background:transparent!important}