/* Via Brachy — "The Line". Dark build. Palette + type fixed by spec. */
:root{
  --ground:#201B12;      /* page */
  --band:#35302A;        /* secondary ground */
  --paper:#F2EAD9;       /* ink on dark */
  --clay:#A4501E;        /* the only warm signal */
  --green:#1F3D2C;       /* rare — stage markers */
  --dim:#CABFA4;         /* secondary text */
  --muted:#8D8062;       /* fine print */
  --muted-2:#6E6650;
  --rule:rgba(202,191,164,.20);
  --rule-strong:rgba(202,191,164,.42);
  --line:rgba(202,191,164,.34);
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --measure:68ch;
  --gutter:clamp(18px,4vw,56px);
  --line-x:96px;         /* x-position of THE LINE */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--paper);
  font:400 19px/1.75 var(--serif);
  text-wrap:pretty;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--paper);text-decoration:none}
a:hover{color:var(--clay)}
h1,h2,h3,h4{font-weight:500;line-height:1.1;margin:0}
p{margin:0 0 1.15em}
::selection{background:var(--clay);color:var(--paper)}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:50;background:var(--clay);color:var(--paper);padding:10px 16px;font:600 12px var(--sans)}
.skip:focus{left:8px;top:8px}

/* ── eyebrows, tags, meta ─────────────────────────────── */
.eyebrow{font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--clay);margin:0 0 12px}
.stage-tag{display:inline-block;font:600 11px/1 var(--mono);letter-spacing:.2em;color:var(--paper);background:var(--band);border:1px solid var(--rule-strong);padding:7px 11px}
.stage-tag.is-clay{background:var(--clay);border-color:var(--clay)}
.stage-tag.is-green{background:var(--green);border-color:var(--green)}
.meta{font:500 14px/1.5 var(--mono);letter-spacing:.02em;color:var(--muted);margin:0}
.meta a{color:var(--dim);border-bottom:1px solid var(--rule-strong)}
.kicker{font:600 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--clay)}

/* ── header ───────────────────────────────────────────── */
.site-head{border-bottom:1px solid var(--rule);background:var(--ground)}
.head-in{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px 32px;padding:20px var(--gutter)}
.wordmark{display:flex;flex-direction:column;gap:5px;flex:none}
.wordmark b{font:600 30px/1 var(--serif);letter-spacing:.045em}
.wordmark span{font:500 9.5px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.site-nav{display:flex;flex-wrap:wrap;gap:6px 22px;margin-left:auto;font:500 12px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.site-nav a{padding:6px 0;border-bottom:1.5px solid transparent}
.site-nav a:hover{border-bottom-color:var(--clay)}
.site-nav a[aria-current]{color:var(--clay);border-bottom-color:var(--clay)}
.site-nav .nav-hub{color:var(--muted)}

/* ── THE LINE — one unbroken rule, stages hung off it ─── */
.line-page{position:relative}
.line-page::before{content:'';position:absolute;left:var(--line-x);top:0;bottom:0;width:2px;background:var(--line)}
.stage{position:relative;padding:44px var(--gutter) 48px calc(var(--line-x) + 54px);border-top:1px solid var(--rule)}
.stage:first-child{border-top:0}
.stage::before{content:'';position:absolute;left:var(--line-x);top:64px;width:34px;height:2px;background:var(--line)}
.stage::after{content:'';position:absolute;left:calc(var(--line-x) - 5px);top:57px;width:12px;height:12px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--ground),0 0 0 4.5px var(--line)}
.stage.is-dark{background:var(--band)}
.stage.is-terminus::after{background:var(--clay);width:16px;height:16px;left:calc(var(--line-x) - 7px);top:55px}
.stage-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;margin-bottom:22px}
.stage-where{font:500 12px/1 var(--mono);letter-spacing:.14em;color:var(--muted)}

/* ── masthead band ────────────────────────────────────── */
.masthead h1{font:600 clamp(46px,8vw,92px)/.98 var(--serif);letter-spacing:.03em;margin:0 0 18px}
.masthead .strap{display:flex;align-items:center;gap:16px;font:500 12px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--dim);margin-bottom:22px}
.masthead .strap i{flex:1;max-width:180px;height:1px;background:var(--rule-strong)}
.masthead p{font:italic 400 20px/1.6 var(--serif);color:var(--dim);max-width:54ch;margin:0}

/* ── feature (article-led front) ──────────────────────── */
.feature{display:grid;grid-template-columns:1fr minmax(0,42%);gap:clamp(24px,4vw,52px);align-items:center}
.feature h2{font:500 clamp(32px,4.2vw,52px)/1.05 var(--serif);margin:0 0 16px}
.feature .lead{font:italic 400 21px/1.55 var(--serif);color:var(--dim);margin:0 0 20px}
.feature .figure{margin:0}
.more{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--mono);letter-spacing:.16em;color:var(--clay);border-bottom:1.5px solid var(--clay);padding-bottom:4px}
.more:hover{color:var(--paper);border-bottom-color:var(--paper)}

/* ── figures ──────────────────────────────────────────── */
figure{margin:0}
.article-figure img,.figure img{width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.03)}
.article-figure,.figure{position:relative}
.article-figure>img,.figure>img{aspect-ratio:3/2;background:var(--band)}
.article-figure figcaption,.figure figcaption,.map-figure figcaption{
  font:400 14.5px/1.5 var(--sans);color:var(--muted);padding-top:10px;border-top:1px solid var(--rule);margin-top:12px
}
.full-bleed{margin-left:calc(-1 * (var(--line-x) + 54px));margin-right:calc(-1 * var(--gutter))}
.full-bleed>img{aspect-ratio:21/9}
.full-bleed>figcaption{margin-left:calc(var(--line-x) + 54px);margin-right:var(--gutter)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.gallery figure img{aspect-ratio:4/3}
.gallery figcaption{font:400 13.5px/1.45 var(--sans);color:var(--muted);border-top:0;padding-top:8px;margin-top:0}

/* ── map slots — frame only, never drawn ──────────────── */
.map-figure{border:1px solid var(--rule-strong);background:
  repeating-linear-gradient(45deg,rgba(202,191,164,.045) 0 8px,transparent 8px 16px);padding:14px}
.map-slot{min-height:280px;border:1.5px dashed var(--rule-strong);display:flex;align-items:center;justify-content:center}
.map-figure figcaption{border-top:0;color:var(--muted);padding-top:12px;margin-top:0}
.map-figure figcaption b{display:block;font:600 11px/1 var(--mono);letter-spacing:.18em;color:var(--dim);margin-bottom:6px;font-weight:600}

/* ── cards — EVEN HEIGHT ──────────────────────────────── */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:clamp(18px,2.4vw,32px)}
.card{display:flex;flex-direction:column;height:100%;background:var(--band);border:1px solid var(--rule);padding:0 0 20px}
.card:hover{border-color:var(--rule-strong)}
.card>img{aspect-ratio:16/10;width:100%;object-fit:cover;filter:saturate(.86)}
.card .card-in{display:flex;flex-direction:column;flex:1;padding:18px 20px 0;gap:10px}
.card h3{font:500 22px/1.2 var(--serif);min-height:2.4em;margin:0}
.card p{font:400 16px/1.55 var(--serif);color:var(--dim);margin:0}
.card .meta{margin-top:auto;padding-top:14px;font-size:13px}
.card-num{font:600 11px/1 var(--mono);letter-spacing:.16em;color:var(--clay)}

/* ── stage index (sub-stops) ──────────────────────────── */
.substops{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.substops li{border-bottom:1px solid var(--rule)}
.substops a{display:grid;grid-template-columns:118px 1fr auto;gap:10px 26px;align-items:baseline;padding:20px 4px}
.substops a:hover{background:rgba(202,191,164,.05)}
.substops .s-tag{font:600 10.5px/1.5 var(--mono);letter-spacing:.14em;color:var(--clay)}
.substops .s-title{font:500 25px/1.2 var(--serif);color:var(--paper)}
.substops .s-dek{font:400 16px/1.5 var(--serif);color:var(--dim);grid-column:2;margin-top:4px}
.substops .s-read{font:500 12.5px/1.5 var(--mono);color:var(--muted);white-space:nowrap}

/* ── sponsors / "Roadside" — dark grounds for light logos ─ */
.roadside{display:grid;gap:16px}
.sponsor-row{display:grid;gap:16px}
.sponsor-row.featured{grid-template-columns:repeat(3,minmax(0,1fr))}
.sponsor-row.rest{grid-template-columns:repeat(3,minmax(0,1fr))}
.sponsor{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:#12100C;border:1px solid var(--rule);min-height:104px;padding:18px 16px;text-align:center}
.sponsor:hover{border-color:var(--clay)}
.sponsor img{max-height:46px;width:auto;object-fit:contain;font:500 10px/1.4 var(--mono);color:var(--muted-2)}
.sponsor-row.featured .sponsor{min-height:150px}
.sponsor-row.featured .sponsor img{max-height:64px}
.sponsor-blurb{font:400 13.5px/1.45 var(--sans);color:var(--muted)}
.sponsor-blurb:empty{display:none}

/* ── footer ───────────────────────────────────────────── */
.site-foot{border-top:2px solid var(--rule-strong);background:var(--band);padding:44px var(--gutter) 52px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:32px}
.site-foot h4{font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--clay);margin:0 0 14px}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font:400 16px/1.4 var(--serif);color:var(--dim)}
.foot-brand b{font:600 24px/1 var(--serif);letter-spacing:.04em;display:block;margin-bottom:6px}
.foot-brand span{font:500 9.5px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.disclaimer{font:italic 400 15px/1.6 var(--serif);color:var(--muted);margin:12px 0 0;max-width:44ch}

/* ── reading column ───────────────────────────────────── */
.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gutter)}
.measure{max-width:var(--measure);padding-inline:0}

/* ── article ──────────────────────────────────────────── */
.post-head{padding:clamp(34px,5vw,64px) var(--gutter) 30px;border-bottom:1px solid var(--rule)}
.post-head h1{font:500 clamp(34px,5.4vw,62px)/1.04 var(--serif);letter-spacing:-.005em;margin:0 0 18px;max-width:22ch}
.post-head .lead{font:italic 400 clamp(19px,2.2vw,23px)/1.55 var(--serif);color:var(--dim);max-width:52ch;margin:0 0 20px}
.post-body{font:400 19.5px/1.78 var(--serif)}
.post-body>*+*{margin-top:0}
.post-body h2{font:500 clamp(26px,3vw,34px)/1.15 var(--serif);margin:2.1em 0 .7em;scroll-margin-top:24px}
.post-body h2:first-child{margin-top:0}
.post-body h3{font:600 16px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--clay);margin:2em 0 .8em}
.post-body p a,.post-body li a{color:var(--paper);border-bottom:1px solid var(--clay)}
.post-body p a:hover,.post-body li a:hover{color:var(--clay)}
.post-body p a.note-ref,.post-body li a.note-ref,.post-body .note-ref{color:var(--clay);border-bottom:0}
.post-body a.note-ref:hover{background:var(--clay);color:var(--ground)}
.post-body ul,.post-body ol{padding-left:1.15em;margin:0 0 1.15em}
.post-body li{margin-bottom:.5em}
.post-body figure{margin:2.2em 0}
.post-body hr{border:0;border-top:1px solid var(--rule);margin:2.4em 0}
.post-layout{display:grid;grid-template-columns:214px minmax(0,1fr);gap:clamp(26px,4vw,58px);
  padding:clamp(28px,4vw,46px) var(--gutter) 10px;align-items:start}
.post-layout.no-rail{grid-template-columns:minmax(0,1fr);max-width:calc(var(--measure) + 2 * var(--gutter));margin:0 auto}

/* the Line, reused as a margin progress rail */
.rail{position:sticky;top:22px;align-self:start}
.rail-title{font:600 10px/1 var(--mono);letter-spacing:.22em;color:var(--clay);margin:0 0 18px 26px}
.rail ol{list-style:none;margin:0;padding:0;position:relative}
.rail ol::before{content:'';position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line)}
.rail li{position:relative;padding:0 0 20px 26px}
.rail li:last-child{padding-bottom:0}
.rail a{display:block;font:600 10.5px/1.45 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.rail a::before{content:'';position:absolute;left:0;top:5px;width:14px;height:14px;border-radius:50%;
  background:var(--ground);border:2px solid var(--line);transition:all .22s ease}
.rail a:hover{color:var(--dim)}
.rail a[aria-current]{color:var(--clay)}
.rail a[aria-current]::before{background:var(--clay);border-color:var(--clay);transform:scale(1.18)}
.rail-strip{display:none}

/* article components */
.lead{font:italic 400 21px/1.6 var(--serif);color:var(--dim)}
.pullquote{margin:2.4em 0;padding:26px 0;border-top:2px solid var(--rule-strong);border-bottom:2px solid var(--rule-strong)}
.pullquote p{font:italic 400 clamp(23px,2.8vw,30px)/1.35 var(--serif);margin:0;color:var(--paper)}
.blockquote{margin:2.2em 0;padding-left:24px;border-left:2px solid var(--clay)}
.blockquote p{font:italic 400 20px/1.6 var(--serif);margin:0 0 10px}
.blockquote cite{font:500 14px/1.4 var(--mono);color:var(--muted);font-style:normal}
.callout{margin:2.2em 0;background:var(--band);border:1px solid var(--rule-strong);border-left:3px solid var(--clay);padding:22px 24px}
.callout p{margin:0;font:400 18px/1.65 var(--serif);color:var(--paper)}
.callout p+p{margin-top:.8em}
p.note{font:400 16px/1.6 var(--sans);color:var(--muted);border-top:1px solid var(--rule);padding-top:12px}
/* ── end-notes: inline markers → notes at the foot ───── */
.note-ref{display:inline-block;font:600 11px/1 var(--mono);color:var(--clay);text-decoration:none;
  vertical-align:super;margin-left:2px;padding:0 2px;border-bottom:0}
.note-ref sup{font-size:inherit;vertical-align:baseline;line-height:1}
.note-ref:hover{background:var(--clay);color:var(--ground)}
.endnotes{margin:3em 0 0;padding:26px 0 0;border-top:2px solid var(--rule-strong)}
.endnotes h2{font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--clay);margin:0 0 18px}
.endnotes ol{list-style:none;counter-reset:en;margin:0;padding:0;display:grid;gap:16px}
.endnotes li{counter-increment:en;position:relative;padding-left:34px;
  font:400 17px/1.6 var(--serif);color:var(--dim);scroll-margin-top:24px}
.endnotes li::before{content:counter(en);position:absolute;left:0;top:3px;
  font:600 11px/1 var(--mono);color:var(--clay)}
.endnotes li:target{color:var(--paper)}
.endnotes li:target::before{background:var(--clay);color:var(--ground);padding:3px 5px;left:-4px;top:0}
.note-back{color:var(--muted);font-size:15px;text-decoration:none}
.note-back:hover{color:var(--clay)}
.related{margin:0;padding:34px 0 0;border-top:1px solid var(--rule)}
.related h2{font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--clay);margin:0 0 16px}
.related-links{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.related-links:empty{display:none}
.related-links a{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:14px 0;border-bottom:1px solid var(--rule);font:500 20px/1.3 var(--serif)}
.related-links small{font:500 12px/1 var(--mono);letter-spacing:.1em;color:var(--muted)}
.post-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 30px;
  padding:26px var(--gutter);border-top:1px solid var(--rule);font:500 12.5px/1.5 var(--mono);letter-spacing:.08em;color:var(--muted)}
.post-nav a{color:var(--dim)}
.post-nav a:hover{color:var(--clay)}

/* ── data components (styleguide + posts) ─────────────── */
table.versus,table.datatable{width:100%;border-collapse:collapse;margin:2em 0;font:400 16.5px/1.5 var(--sans)}
table.versus th,table.versus td,table.datatable th,table.datatable td{
  text-align:left;padding:13px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
table.versus th,table.datatable th{font:600 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--clay);border-bottom-color:var(--rule-strong)}
table.versus tbody th{color:var(--dim);letter-spacing:.04em;font-size:15px;text-transform:none}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll table{min-width:760px;margin-block:1.6em}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:2.2em 0}
.statblock{display:flex;flex-direction:column;gap:6px;background:var(--band);border:1px solid var(--rule);padding:20px}
.stat-num{font:500 40px/1 var(--serif);color:var(--clay)}
.stat-label{font:400 14.5px/1.4 var(--sans);color:var(--dim)}
.timeline{list-style:none;margin:2.2em 0;padding:0;position:relative}
.timeline::before{content:'';position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:var(--line)}
.timeline li{position:relative;padding:0 0 22px 30px;display:flex;flex-direction:column;gap:5px}
.timeline li::before{content:'';position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:50%;background:var(--ground);border:2px solid var(--clay)}
.t-when{font:600 11px/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--clay)}
.t-what{font:400 17px/1.55 var(--serif);color:var(--dim)}
.chart{margin:2.2em 0}
.chart-scroll{overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.chart-scroll svg{min-width:600px}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart figcaption{font:400 14.5px/1.5 var(--sans);color:var(--muted);padding-top:10px;border-top:1px solid var(--rule);margin-top:12px}

/* ── profile / org / further ──────────────────────────── */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:2.2em 0}
.profile-card{display:flex;flex-direction:column;gap:10px;background:var(--band);border:1px solid var(--rule);padding:22px}
.profile-card .p-photo{width:74px;height:74px;border-radius:50%;object-fit:cover}
.profile-card.no-photo::before{content:'';width:74px;height:74px;border-radius:50%;border:1.5px dashed var(--rule-strong)}
.profile-card h3{font:500 22px/1.2 var(--serif)}
.profile-card .p-role{font:600 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--clay);margin:0}
.profile-card p{font:400 16.5px/1.6 var(--serif);color:var(--dim);margin:0}
.profile-card .p-links{display:flex;flex-wrap:wrap;gap:8px 18px;font:500 13px/1.4 var(--mono);margin-top:auto;padding-top:6px}
.profile-card .p-links a{color:var(--dim);border-bottom:1px solid var(--rule-strong)}
.profile-card .p-attr{font:400 13px/1.4 var(--sans);color:var(--muted-2)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin:2.2em 0}
.org-card{display:flex;align-items:center;gap:14px;background:var(--band);border:1px solid var(--rule);padding:15px 17px;min-width:0}
.org-card:hover{border-color:var(--clay)}
.org-logo{width:38px;height:38px;object-fit:contain;flex:none;background:#12100C}
.org-card.no-logo::before{content:'';width:38px;height:38px;flex:none;border:1.5px dashed var(--rule-strong)}
.org-card span{min-width:0;overflow-wrap:anywhere}
.org-name{font:500 17px/1.25 var(--serif);display:block}
.org-host{font:500 12px/1.3 var(--mono);color:var(--muted);display:block;margin-top:3px}
.entity-ref{color:var(--paper);border-bottom:1px solid var(--clay);white-space:nowrap}
.further-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:2.2em 0}
.further-grid a{display:block;background:var(--band);border:1px solid var(--rule);padding:18px 20px;font:500 20px/1.3 var(--serif)}
.further-grid a:hover{border-color:var(--clay)}

/* ── collapsible long lists (CSS-only) ────────────────── */
.expander{margin-top:14px}
.expander summary{cursor:pointer;font:600 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--clay);padding:12px 0;list-style:none}
.expander summary::-webkit-details-marker{display:none}
.expander summary::after{content:' +'}
.expander[open] summary::after{content:' −'}

/* ── category / hub ───────────────────────────────────── */
.cat-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.cat-list li{border-bottom:1px solid var(--rule)}
.cat-list a{display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:baseline;padding:20px 4px}
.cat-list a:hover{background:rgba(202,191,164,.05)}
.cat-list .c-title{font:500 25px/1.2 var(--serif)}
.cat-list .c-dek{grid-column:1;font:400 16.5px/1.5 var(--serif);color:var(--dim)}
.cat-list .c-read{font:500 12.5px/1.4 var(--mono);color:var(--muted);white-space:nowrap}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(20px,3vw,38px)}
.hub-sec h3{font:500 30px/1.1 var(--serif);margin:0 0 8px}
.hub-sec p{font:400 16.5px/1.55 var(--serif);color:var(--dim);margin:0 0 14px}
.hub-sec ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.hub-sec ul a{display:block;padding:10px 0;border-top:1px solid var(--rule);font:400 17.5px/1.35 var(--serif);color:var(--dim)}
.hub-sec ul a:hover{color:var(--clay)}

/* ── simple pages ─────────────────────────────────────── */
.page-body{padding:clamp(34px,5vw,64px) var(--gutter) 60px}
.page-body h1{font:500 clamp(34px,5vw,56px)/1.05 var(--serif);margin:0 0 22px}
.page-body .measure p{margin-bottom:1.2em}

/* ── styleguide scaffolding ───────────────────────────── */
.sg-sec{padding:40px var(--gutter);border-top:1px solid var(--rule)}
.sg-sec>h2{font:600 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--clay);margin:0 0 6px}
.sg-sec>p.sg-note{font:400 15px/1.5 var(--sans);color:var(--muted);margin:0 0 26px;max-width:70ch}

/* ── responsive ───────────────────────────────────────── */
@media (max-width:900px){
  :root{--line-x:18px;--measure:100%}
  .feature{grid-template-columns:1fr}
  .post-layout{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .rail-strip{display:block;padding:22px var(--gutter) 4px}
  .rail-strip ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;margin:0;padding:0}
  .rail-strip a{display:block;font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
    color:var(--dim);border:1px solid var(--rule-strong);padding:8px 10px}
  .full-bleed{margin-left:calc(-1 * (var(--line-x) + 34px));margin-right:calc(-1 * var(--gutter))}
  .full-bleed>figcaption{margin-left:calc(var(--line-x) + 34px)}
  .substops a,.cat-list a{grid-template-columns:1fr}
  .substops .s-dek,.cat-list .c-dek{grid-column:1}
  .substops .s-read{padding-top:6px}
  .stage{padding-left:calc(var(--line-x) + 34px)}
  .stage::before{width:20px}
}
@media (max-width:640px){
  body{font-size:18px}
  .post-body{font-size:18.5px}
  .head-in{gap:14px 20px}
  .site-nav{margin-left:0;width:100%;gap:4px 16px}
  .card h3{min-height:0}
  .masthead .strap{flex-wrap:wrap;gap:10px;letter-spacing:.24em}
  .masthead .strap i{display:none}
  .sponsor-row.rest{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sponsor-row.featured{grid-template-columns:minmax(0,1fr)}
}
@media print{
  body{background:#fff;color:#000}
  .site-nav,.rail,.rail-strip,.roadside{display:none}
}

/* mapkit: 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:auto!important;max-width:100%;max-height:640px;margin:0 auto}
.map-slot::after,.map-slot::before{content:none!important;display:none!important}
.map-figure figcaption{}
.mapkit__pin{cursor:pointer}
.mapkit__pin text{paint-order:stroke;stroke:#201B12;stroke-width:3px;stroke-linejoin:round}
.mapkit__pin:hover circle{r:9.1}
.mapkit__pin:hover text{font-weight:700}


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

/* 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. */
.sponsor-row.featured .sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}
.sponsor-row.featured .sponsor.sponsor img{height:64px!important;display:block!important;width:100%!important}
.sponsor-row.rest .sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}
.sponsor-row.rest .sponsor.sponsor img{height:46px!important;display:block!important;width:100%!important}

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

/* op-blurb-rows: money blurbs ran to 13 rows at 390, 1125px of tier across
   9 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){
  .sponsor-row.rest .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: .sponsor-row.rest (9 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.rest:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-narrow-cols: .sponsor-row.rest is Design's three-across, which at 390 gives 96px tiles —
   the mark shrinks to 62px, the copy wraps to ~55px of measure, and nine tiles land as
   1+3+3+2, leaving a 112px hole at the end of the last row. That hole is what reads as a grid
   gone off centre. Two columns at phone width: 152px tiles, rows of two, no hole.
   ⚠️ NO SPACING VALUE OF MINE HERE. The column count is the only change; the gaps stay
   Design's own 16px, and the tile keeps its own 18px/16px padding and 8px stack gap. */
@media (max-width:640px){
  .sponsor-row.rest{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* op-page-overflow: the page scrolled sideways at 320 — a.card reached
   324px in a 320px screen (+4px), inside
   div.card-grid. Remedy: unpin the grid track. 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){
  div.card-grid{grid-template-columns:minmax(0,1fr)!important}
  a.card{min-width:0!important;max-width:100%!important}
}

/* op-article-width: the article column was capped at 731px (93 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .measure) 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 1280 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1280px){
  body:has(.rail-strip) div.post-body.measure{--measure:min(74.497ch, 100%)!important}
}
@media (min-width:1600px){
  body:has(.rail-strip) div.post-body.measure{--measure:min(clamp(74.497ch, 55.625vw, calc(74.497ch * 1.2)), 100%)!important}
  body:has(.rail-strip) div.post-body.measure > :is(p:not([class])){font-size:clamp(19.5px,1.3542vw,23.4px)!important}
}
/* op-article-width:end */

/* op-hover-pad */
.substops a{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad: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 */
/* op-heading-levels */
h2:where(.rt-h3){font-weight: 500; line-height: 1.1; margin: 0px;}
.hub-sec h2:where(.rt-h3){font: 500 30px/1.1 var(--serif); margin: 0px 0px 8px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div > figure.article-figure > img,
  div > figure.article-figure.full-bleed > img,
  div.figure > figure.article-figure > img,
  div.measure.post-body > figure.article-figure > img){height:auto}
/* op-img-dims:end */