/* Gem State Civics — The Statehouse Primer
   Design tokens drive everything. Slate/basalt ink + bronze accent + parchment paper. Non-partisan. */
:root{
  --paper:#F2ECDF; --paper2:#FAF6EC; --cream:#E8E1CE;
  --ink:#2A2E35; --ink2:#3E434C; --body:#33383F; --muted:#565B64; --faint:rgba(42,46,53,.25);
  --bronze:#B08442; --bronze-deep:#8F6A31; --dark:#22252B; --dark-ink:#EFE7D6;
  --acc-government:#5B6B7A; --acc-parties:#B08442; --acc-bills:#4E7E76; --acc-involved:#7E8B5A; --acc-issues:#B06A42;
  --serif:'Spectral',Georgia,serif; --sans:'Public Sans',system-ui,sans-serif;
  --fs-body:20px; --fs-meta:15px; --fs-label:13px;
  --wrap:1360px; --gutter:clamp(20px,4.5vw,72px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-body)/1.65 var(--serif);}
img{max-width:100%;display:block}
a{color:var(--bronze-deep);text-decoration:none}
a:hover{color:var(--bronze)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.kicker{font:700 12px/1.4 var(--sans);letter-spacing:.24em;color:var(--bronze-deep);text-transform:uppercase}
.rule-double{border-top:3px solid var(--ink)}
.rule-double::after{content:"";display:block;border-top:1px solid var(--bronze);margin-top:3px}

/* ---------- chrome ---------- */
.topbar{background:var(--ink);color:var(--dark-ink);font:500 14px/1.5 var(--sans);text-align:center;padding:10px var(--gutter);letter-spacing:.02em}
.masthead{padding-block:34px 0;text-align:center}
.masthead .site-kicker{font:700 12px/1.4 var(--sans);letter-spacing:.3em;color:var(--bronze-deep)}
.masthead .wordmark{font:600 clamp(34px,4.6vw,54px)/1 var(--serif);color:var(--ink);margin:12px 0 0}
.masthead .wordmark a{color:inherit}
.masthead .tagline{font:italic 400 18px/1.5 var(--serif);color:var(--muted);margin:10px 0 0}
.mainnav{display:flex;flex-wrap:wrap;justify-content:center;column-gap:30px;row-gap:8px;margin:24px 0 16px;font:600 13px/1.4 var(--sans);letter-spacing:.12em}
.mainnav a{color:var(--ink);text-transform:uppercase}
.mainnav a:hover,.mainnav a[aria-current]{color:var(--bronze-deep)}
.mainnav .dot{color:var(--bronze)}
.masthead-mini{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:20px 0 14px;flex-wrap:wrap}
.masthead-mini .wordmark{font:600 26px/1.2 var(--serif);color:var(--ink)}
.masthead-mini .wordmark a{color:inherit}
.masthead-mini .wordmark em{font:italic 400 15px var(--serif);color:var(--muted)}
.masthead-mini .mainnav{margin:0;justify-content:flex-end;column-gap:22px;font-size:12px}
.crumbs{font:500 14px/1.5 var(--sans);color:var(--muted);padding:16px 0}
.crumbs strong{color:var(--ink)}

/* ---------- homepage bands ---------- */
.hero{display:grid;grid-template-columns:1fr 520px;gap:64px;align-items:center;padding-block:60px 56px}
.hero h1{font:600 clamp(38px,4.5vw,54px)/1.12 var(--serif);margin:14px 0 0;text-wrap:pretty}
.hero .dek{font:400 21px/1.6 var(--serif);color:var(--ink2);margin:20px 0 0;max-width:34em;text-wrap:pretty}
.hero .go{display:inline-block;margin-top:24px;font:700 14px/1.4 var(--sans);letter-spacing:.1em}
.hero .go::before{content:"";display:block;width:64px;border-top:3px solid var(--bronze);margin-bottom:22px}
.plate{border:1px solid rgba(42,46,53,.28);background:var(--paper2);padding:12px}
.plate img{width:100%;height:100%;object-fit:cover}
.plate .ph{aspect-ratio:3/2;overflow:hidden}
.plate figcaption{font:italic 400 15px/1.5 var(--serif);color:var(--muted);padding:12px 6px 4px}
figure{margin:0}
.figure-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.figure-head .fig-title{display:flex;align-items:baseline;gap:14px}
.figure-head .fig-title h2{font:600 clamp(22px,2.2vw,26px)/1.3 var(--serif);margin:0}
.figure-head .fig-note{font:italic 400 15px var(--serif);color:var(--muted)}
.band{padding-block:56px}
.branches{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:18px}
.branch{background:var(--paper2);border:1px solid var(--ink);display:flex;flex-direction:column}
.branch .b-tag{background:var(--ink);color:var(--dark-ink);font:700 11px/1.4 var(--sans);letter-spacing:.2em;padding:8px 20px;text-transform:uppercase}
.branch .b-body{padding:22px 24px}
.branch h3{font:600 22px/1.3 var(--serif);margin:0}
.branch p{font:400 15px/1.6 var(--sans);color:var(--muted);margin:8px 0 0}
.checks{border:1px solid var(--ink);border-top:none;background:var(--paper2);display:grid;grid-template-columns:auto 1fr 1fr 1fr;align-items:stretch}
.checks .c-tag{background:var(--bronze);color:var(--dark);font:700 11px/1.4 var(--sans);letter-spacing:.16em;padding:12px 20px;display:flex;align-items:center}
.checks .c-item{font:600 13px/1.4 var(--sans);letter-spacing:.06em;color:var(--ink);padding:12px 20px;border-left:1px solid var(--faint);display:flex;align-items:center}
.contents-rule{display:flex;align-items:center;gap:20px}
.contents-rule::before,.contents-rule::after{content:"";flex:1;border-top:1px solid var(--faint)}
.contents-rule span{font:700 13px/1.4 var(--sans);letter-spacing:.28em;color:var(--ink)}
.toc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:28px}
.toc-card{background:var(--paper2);border:1px solid var(--faint);padding:28px 22px;display:flex;flex-direction:column;gap:10px;border-top:3px solid var(--acc,var(--bronze))}
.toc-card .numeral{font:600 24px/1 var(--serif);color:var(--acc,var(--bronze))}
.toc-card h3{font:600 20px/1.25 var(--serif);margin:0;color:var(--ink)}
.toc-card h3 a{color:inherit}
.toc-card p{font:400 14px/1.55 var(--sans);color:var(--muted);margin:0}
.toc-card .go{margin-top:auto;font:700 12px/1.4 var(--sans);letter-spacing:.08em}
.band-dark{background:var(--ink);color:var(--dark-ink);padding:56px 0}
.band-dark .kicker{color:var(--bronze)}
.band-dark a{color:var(--bronze)}
.band-dark .figure-head h2{color:#F5EFE0}
.band-dark .fig-note{color:rgba(239,231,214,.65)}
.pipeline{display:flex;align-items:stretch;gap:10px;margin-top:22px}
.pipeline .step{flex:1;background:var(--paper);border:1px solid var(--bronze);padding:14px 10px;text-align:center;min-width:0}
.pipeline .step .n{font:600 15px/1 var(--serif);color:var(--bronze-deep)}
.pipeline .step .s{font:600 14px/1.3 var(--sans);color:var(--ink);margin-top:5px}
.pipeline .step.last{background:var(--bronze)}
.pipeline .step.last .n,.pipeline .step.last .s{color:var(--dark)}
.pipeline .arrow{align-self:center;color:var(--bronze);font:600 18px/1 var(--serif);flex:none}
.pipe-note{font:italic 400 15px/1.5 var(--serif);margin-top:14px;color:var(--muted)}
.band-dark .pipe-note{color:rgba(239,231,214,.65)}

/* map band */
.mapband{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:56px;align-items:center;margin-top:24px}
.mapband .map-plate{border:1px solid var(--ink);background:var(--paper2);padding:24px}
.mapband svg{width:100%;height:auto;display:block}
.region-list{display:flex;flex-direction:column}
.region{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:16px 4px;border-top:1px solid var(--faint);align-items:baseline}
.region:last-child{border-bottom:1px solid var(--faint)}
.region .r-n{width:28px;height:28px;border-radius:50%;background:var(--bronze);color:var(--paper2);font:700 14px/28px var(--sans);text-align:center}
.region h3{font:600 20px/1.3 var(--serif);margin:0}
.region p{font:400 15px/1.55 var(--sans);color:var(--muted);margin:4px 0 0}

/* feed */
.feed-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:24px}
.gcard{background:var(--paper2);border:1px solid rgba(42,46,53,.28);display:flex;flex-direction:column}
.gcard .g-img{aspect-ratio:16/10;overflow:hidden}
.gcard .g-img img{width:100%;height:100%;object-fit:cover}
.gcard .g-body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.gcard .g-tag{font:700 11px/1.4 var(--sans);letter-spacing:.14em;color:var(--tag,var(--bronze-deep));text-transform:uppercase}
.gcard h3{font:600 21px/1.3 var(--serif);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.gcard h3 a{color:var(--ink)}
.gcard p{font:400 14.5px/1.55 var(--sans);color:var(--muted);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gcard .g-meta{margin-top:auto;font:600 12.5px/1.4 var(--sans);letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.feed-more{display:none}
.feed-more-grid{display:none;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:20px}
#feedmore:checked ~ .feed-more-grid{display:grid}
.feed-toggle{display:inline-block;margin-top:26px;border:1px solid var(--ink);padding:12px 26px;font:700 13px/1.4 var(--sans);letter-spacing:.12em;color:var(--ink);cursor:pointer;text-transform:uppercase}
.feed-toggle:hover{background:var(--paper2)}
#feedmore:checked ~ .feed-toggle .more-label,{display:none}
#feedmore:checked ~ .feed-toggle .more-label{display:none}
#feedmore:checked ~ .feed-toggle .less-label{display:inline}
.feed-toggle .less-label{display:none}

/* sponsors — "the underwriters' plate" / "the back leaf" */
.sponsor-band{border:1px dashed rgba(42,46,53,.4);background:var(--paper2);padding:34px clamp(20px,3vw,40px)}
.sponsor-band .s-head{text-align:center}
.sponsor-band .s-sub{font:400 15px/1.6 var(--sans);color:var(--muted);margin:8px 0 0}
.sponsor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.sponsor{display:flex;flex-direction:column;gap:10px;color:var(--ink)}
.sponsor img{width:100%;aspect-ratio:5/2;object-fit:cover;background:var(--dark);border:1px solid rgba(42,46,53,.35)}
.sponsor .sponsor-blurb{font:400 14px/1.5 var(--sans);color:var(--muted);min-height:1.5em}
.sponsor:hover img{border-color:var(--bronze)}
.backleaf .sponsor-grid{grid-template-columns:repeat(5,1fr);gap:16px}
.backleaf .sponsor img{aspect-ratio:5/2}
.backleaf .sponsor .sponsor-blurb{font-size:13px}

/* footer */
.footer{background:var(--cream);border-top:3px solid var(--ink);margin-top:64px}
.footer .f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:56px;padding:48px 0 0}
.footer .f-brand{font:600 26px/1.2 var(--serif)}
.footer .f-about{font:400 14px/1.65 var(--sans);color:var(--muted);margin-top:12px;max-width:30em}
.footer h4{font:700 12px/1.4 var(--sans);letter-spacing:.22em;color:var(--bronze-deep);margin:0 0 14px;text-transform:uppercase}
.footer .f-links{display:flex;flex-direction:column;gap:8px;font:500 14px/1.5 var(--sans)}
.footer .f-base{border-top:1px solid var(--faint);margin-top:36px;padding:18px 0 28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:400 13.5px/1.6 var(--sans);color:var(--muted)}
.backleaf{padding-block:40px 8px}

/* ---------- category / archive ---------- */
.cat-head{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:end;padding:30px 0 40px}
.cat-head .numeral{font:600 clamp(70px,9vw,110px)/0.85 var(--serif);color:var(--acc,var(--bronze))}
.cat-head h1{font:600 clamp(34px,4vw,50px)/1.1 var(--serif);margin:10px 0 0}
.cat-head .dek{font:400 19px/1.6 var(--serif);color:var(--ink2);margin:12px 0 0;max-width:42em;text-wrap:pretty}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-top:1px solid var(--faint)}
.cat-list li:last-child{border-bottom:1px solid var(--faint)}
.cat-row{display:grid;grid-template-columns:220px 1fr auto;gap:28px;align-items:center;padding:24px 4px;color:var(--ink)}
.cat-row .c-img{aspect-ratio:16/10;overflow:hidden;border:1px solid rgba(42,46,53,.28)}
.cat-row .c-img img{width:100%;height:100%;object-fit:cover}
.cat-row h3{font:600 24px/1.25 var(--serif);margin:0}
.cat-row p{font:400 15px/1.6 var(--sans);color:var(--muted);margin:8px 0 0}
.cat-row .c-meta{font:600 12.5px/1.5 var(--sans);letter-spacing:.06em;color:var(--muted);text-transform:uppercase;white-space:nowrap}
.cat-row:hover h3{color:var(--bronze-deep)}
.xsections{display:flex;flex-wrap:wrap;gap:12px;padding:36px 0 8px}
.xsections a{border:1px solid var(--ink);padding:10px 18px;font:600 12.5px/1.4 var(--sans);letter-spacing:.1em;color:var(--ink);text-transform:uppercase}
.xsections a:hover{background:var(--paper2);color:var(--bronze-deep)}

/* ---------- article ---------- */
.post-hero{position:relative;border-bottom:3px solid var(--ink)}
.post-hero img{width:100%;height:clamp(260px,42vw,460px);object-fit:cover}
.post-head{padding:44px 0 8px}
.post-head .h-grid{display:grid;grid-template-columns:88px minmax(0,74ch);column-gap:36px}
.post-head .h-mark{font:600 26px/1 var(--serif);color:var(--bronze)}
.post-head h1{font:600 clamp(34px,4.2vw,52px)/1.12 var(--serif);margin:14px 0 0;text-wrap:pretty}
.post-head .dek{font:400 21px/1.6 var(--serif);color:var(--ink2);margin:16px 0 0;text-wrap:pretty}
.post-head .p-meta{font:700 12.5px/1.6 var(--sans);letter-spacing:.16em;color:var(--muted);margin-top:18px;text-transform:uppercase}
.post-head .p-meta a{color:var(--tagcol,var(--bronze-deep))}
.hero-cap{font:italic 400 15px/1.5 var(--serif);color:var(--muted);margin:10px 0 0}
.post-body{padding:28px 0 24px}
.sec{display:grid;grid-template-columns:88px minmax(0,74ch);column-gap:36px;padding:18px 0 6px}
.sec .secno{font:600 20px/1.6 var(--serif);color:var(--bronze);padding-top:6px;white-space:nowrap}
.sec h2{font:600 clamp(25px,2.6vw,30px)/1.25 var(--serif);margin:0 0 6px}
.sec p{margin:14px 0 0;color:var(--body);font-size:var(--fs-body);line-height:1.7}
.sec ul,.sec ol{margin:14px 0 0;padding-left:1.3em;color:var(--body)}
.sec li{margin-top:8px}
.lead{font-size:22px;line-height:1.65;color:var(--ink)}
.dropcap::first-letter{float:left;font:600 76px/0.78 var(--serif);color:var(--bronze-deep);padding:8px 14px 0 0}
.pullquote{margin:36px 0 22px -124px;width:calc(100% + 124px);border:none;padding:0}
.pullquote p{font:500 clamp(26px,3vw,34px)/1.35 var(--serif);color:var(--ink);margin:0;text-wrap:pretty}
.pullquote::before{content:"";display:block;width:64px;border-top:3px solid var(--bronze);margin-bottom:18px}
.blockquote{margin:28px 0 0;border-left:3px solid var(--bronze);padding:6px 0 6px 24px}
.blockquote p{font:italic 400 21px/1.6 var(--serif);color:var(--ink2);margin:0}
.blockquote cite{display:block;font:600 13px/1.5 var(--sans);letter-spacing:.08em;color:var(--muted);margin-top:10px;font-style:normal}
.callout{border:1px solid var(--ink);border-top:4px solid var(--bronze);background:var(--paper2);padding:24px 28px;margin:30px 0 0}
.callout .c-k{font:700 12px/1.4 var(--sans);letter-spacing:.26em;color:var(--ink);text-transform:uppercase}
.callout p{font:400 18px/1.65 var(--serif);color:var(--ink);margin:10px 0 0}
.note{font:400 15.5px/1.6 var(--sans);color:var(--muted);border-left:3px solid var(--faint);padding:4px 0 4px 18px;margin:24px 0 0}
.note strong{color:var(--ink)}

table{border-collapse:collapse;width:100%}
.versus{margin:30px 0 0;font-family:var(--sans)}
.versus th{background:var(--ink);color:var(--dark-ink);font:700 12.5px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:12px 16px;text-align:left;border:1px solid var(--ink)}
.versus th:first-child{background:var(--bronze);color:var(--dark)}
.versus td{border:1px solid var(--faint);background:var(--paper2);padding:12px 16px;font-size:15.5px;line-height:1.55;color:var(--body);vertical-align:top}
.datatable{margin:30px 0 0;font-family:var(--sans)}
.datatable caption{caption-side:top;text-align:left;font:700 12px/1.4 var(--sans);letter-spacing:.2em;color:var(--bronze-deep);text-transform:uppercase;padding-bottom:10px}
.datatable th{font:700 12.5px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-align:left;padding:10px 14px;border-bottom:2px solid var(--ink)}
.datatable td{padding:12px 14px;border-bottom:1px solid var(--faint);font-size:15.5px;line-height:1.55;color:var(--body);vertical-align:top}
.datatable tr td:first-child{font-weight:600;color:var(--ink)}

.statrow{display:flex;gap:18px;flex-wrap:wrap;margin:30px 0 0}
.statblock{flex:1 1 180px;border:1px solid var(--ink);background:var(--paper2);padding:20px 22px;display:flex;flex-direction:column;gap:6px}
.stat-num{font:600 clamp(30px,3.4vw,42px)/1 var(--serif);color:var(--bronze-deep)}
.stat-label{font:500 14px/1.5 var(--sans);color:var(--muted)}

.timeline{list-style:none;margin:30px 0 0;padding:0;border-left:2px solid var(--ink)}
.timeline li{position:relative;padding:0 0 22px 28px}
.timeline li:last-child{padding-bottom:4px}
.timeline li::before{content:"";position:absolute;left:-7px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--bronze);border:2px solid var(--paper)}
.timeline .t-when{display:block;font:700 13px/1.5 var(--sans);letter-spacing:.1em;color:var(--bronze-deep);text-transform:uppercase}
.timeline .t-what{display:block;font:400 16.5px/1.6 var(--serif);color:var(--body);margin-top:4px}

.chart{margin:32px 0 0;border:1px solid var(--faint);background:var(--paper2);padding:24px}
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{font:italic 400 15px/1.5 var(--serif);color:var(--muted);margin-top:14px}
.chart .bar-label{font:600 13px var(--sans);fill:var(--ink)}
.chart .bar-val{font:700 13px var(--sans);fill:var(--bronze-deep)}
.chart .axis{stroke:rgba(42,46,53,.3)}

.article-figure{margin:32px 0 0;border:1px solid rgba(42,46,53,.28);background:var(--paper2);padding:12px}
.article-figure img{width:100%;object-fit:cover}
.article-figure figcaption{font:italic 400 15px/1.5 var(--serif);color:var(--muted);padding:12px 6px 4px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:32px 0 0}
.gallery figure{border:1px solid rgba(42,46,53,.28);background:var(--paper2);padding:8px;margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{font:italic 400 13.5px/1.5 var(--serif);color:var(--muted);padding:8px 4px 2px}
.map-figure{margin:32px 0 0;border:1px solid var(--ink);background:var(--paper2);padding:12px}
.map-figure .map-slot{aspect-ratio:16/9;background:repeating-linear-gradient(45deg,rgba(42,46,53,.05) 0 12px,transparent 12px 24px);border:1px dashed rgba(42,46,53,.35);display:flex;align-items:center;justify-content:center}
.map-figure .map-slot::after{content:none;font:600 12px/1.4 var(--sans);letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.map-figure figcaption{font:italic 400 15px/1.5 var(--serif);color:var(--muted);padding:12px 6px 4px}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:30px 0 0}
.profile-card{border:1px solid rgba(42,46,53,.28);background:var(--paper2);padding:24px;font-family:var(--sans)}
.profile-card .p-photo{width:72px;height:72px;object-fit:cover;border-radius:50%;border:2px solid var(--bronze);margin-bottom:14px}
.profile-card.no-photo::before{content:"";display:block;width:44px;border-top:3px solid var(--bronze);margin-bottom:14px}
.profile-card h3{font:600 20px/1.3 var(--serif);margin:0;color:var(--ink)}
.profile-card .p-role{font:700 12px/1.5 var(--sans);letter-spacing:.12em;color:var(--bronze-deep);text-transform:uppercase;margin:4px 0 10px}
.profile-card p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0}
.profile-card .p-links{margin-top:12px;font-weight:600;font-size:14px}
.profile-card .p-attr{font-size:12.5px;color:var(--muted);margin-top:10px}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:30px 0 0}
.org-card{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;border:1px solid rgba(42,46,53,.28);background:var(--paper2);padding:16px 18px;color:var(--ink);font-family:var(--sans)}
.org-card .org-logo{width:44px;height:44px;object-fit:cover;grid-row:span 2;border:1px solid var(--faint)}
.org-card.no-logo{grid-template-columns:1fr;border-left:3px solid var(--bronze)}
.org-card .org-name{font:600 16px/1.35 var(--sans)}
.org-card .org-host{font:400 13px/1.4 var(--sans);color:var(--muted)}
.org-card:hover .org-name{color:var(--bronze-deep)}
.entity-ref{border-bottom:1px solid var(--bronze);font-weight:500}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:30px 0 0}
.further-grid a{border:1px solid rgba(42,46,53,.28);background:var(--paper2);padding:18px 20px;font:600 16px/1.4 var(--serif);color:var(--ink)}
.further-grid a:hover{border-color:var(--bronze);color:var(--bronze-deep)}
.related{border-top:1px solid var(--faint);margin-top:44px;padding-top:26px}
.related h2{font:700 13px/1.4 var(--sans);letter-spacing:.24em;color:var(--ink);text-transform:uppercase;margin:0}
.related-links{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.related-links a{font:600 19px/1.4 var(--serif)}
.related-links .r-tag{font:700 11px/1.4 var(--sans);letter-spacing:.14em;color:var(--muted);text-transform:uppercase;margin-right:12px}

/* ---------- plain pages ---------- */
.page-body{max-width:74ch;padding:36px var(--gutter) 30px;margin:0}
.page-body h1{font:600 clamp(34px,4vw,48px)/1.15 var(--serif);margin:8px 0 0}
.page-body h2{font:600 26px/1.3 var(--serif);margin:36px 0 0}
.page-body p{color:var(--body);margin:16px 0 0}
.wrap .page-body{padding-inline:0}

/* ---------- styleguide ---------- */
.sg-section{border-top:1px solid var(--faint);padding:44px 0 10px}
.sg-section>h2{font:600 28px/1.3 var(--serif);margin:0}
.sg-section .sg-note{font:400 15px/1.6 var(--sans);color:var(--muted);margin:8px 0 0}
.sg-cols{display:grid;grid-template-columns:88px minmax(0,74ch);column-gap:36px}
.sg-cols>*{grid-column:2}


/* map ⇄ region cross-highlight (CSS-only, :has) */
.pin{cursor:pointer;outline:none}
.pin circle{transition:fill .15s}
.pin text{pointer-events:none}
.region{transition:background .15s;padding-inline:10px}
.region .r-n{transition:background .15s}
.map-hint{font:italic 400 14px/1.5 var(--serif);color:var(--muted);margin:14px 0 0;text-align:center}
.mapband:has(.pin-1:hover) .region[data-r="1"],.mapband:has(.pin-1:focus) .region[data-r="1"],.region[data-r="1"]:hover{background:var(--paper2)}
.mapband:has(.pin-1:hover) .region[data-r="1"] .r-n,.mapband:has(.region[data-r="1"]:hover) .pin-1 circle,.pin-1:hover circle,.pin-1:focus circle{fill:var(--ink)}
.mapband:has(.region[data-r="1"]:hover) .pin-1 circle,.pin-1:hover circle,.pin-1:focus circle{r:21px}
.mapband:has(.pin-2:hover) .region[data-r="2"],.mapband:has(.pin-2:focus) .region[data-r="2"],.region[data-r="2"]:hover{background:var(--paper2)}
.mapband:has(.pin-2:hover) .region[data-r="2"] .r-n,.mapband:has(.region[data-r="2"]:hover) .pin-2 circle,.pin-2:hover circle,.pin-2:focus circle{fill:var(--ink)}
.mapband:has(.region[data-r="2"]:hover) .pin-2 circle,.pin-2:hover circle,.pin-2:focus circle{r:21px}
.mapband:has(.pin-3:hover) .region[data-r="3"],.mapband:has(.pin-3:focus) .region[data-r="3"],.region[data-r="3"]:hover{background:var(--paper2)}
.mapband:has(.pin-3:hover) .region[data-r="3"] .r-n,.mapband:has(.region[data-r="3"]:hover) .pin-3 circle,.pin-3:hover circle,.pin-3:focus circle{fill:var(--ink)}
.mapband:has(.region[data-r="3"]:hover) .pin-3 circle,.pin-3:hover circle,.pin-3:focus circle{r:21px}
.mapband:has(.pin-4:hover) .region[data-r="4"],.mapband:has(.pin-4:focus) .region[data-r="4"],.region[data-r="4"]:hover{background:var(--paper2)}
.mapband:has(.pin-4:hover) .region[data-r="4"] .r-n,.mapband:has(.region[data-r="4"]:hover) .pin-4 circle,.pin-4:hover circle,.pin-4:focus circle{fill:var(--ink)}
.mapband:has(.region[data-r="4"]:hover) .pin-4 circle,.pin-4:hover circle,.pin-4:focus circle{r:21px}
.mapband:has(.pin-5:hover) .region[data-r="5"],.mapband:has(.pin-5:focus) .region[data-r="5"],.region[data-r="5"]:hover{background:var(--paper2)}
.mapband:has(.pin-5:hover) .region[data-r="5"] .r-n,.mapband:has(.region[data-r="5"]:hover) .pin-5 circle,.pin-5:hover circle,.pin-5:focus circle{fill:var(--ink)}
.mapband:has(.region[data-r="5"]:hover) .pin-5 circle,.pin-5:hover circle,.pin-5:focus circle{r:21px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .hero{grid-template-columns:1fr;gap:36px}
  .toc-grid{grid-template-columns:repeat(3,1fr)}
  .feed-grid,.feed-more-grid{grid-template-columns:repeat(2,1fr)}
  .backleaf .sponsor-grid{grid-template-columns:repeat(3,1fr)}
  .mapband{grid-template-columns:1fr;gap:36px}
  .mapband .map-plate{max-width:460px}
  .pipeline{flex-wrap:wrap}
  .pipeline .step{flex:1 1 110px}
  .pipeline .arrow{display:none}
}
@media (max-width:860px){
  .sec,.post-head .h-grid,.sg-cols{grid-template-columns:1fr}
  .sg-cols>*{grid-column:auto}
  .sec .secno{padding-top:0}
  .pullquote{margin-left:0;width:100%}
  .toc-grid{grid-template-columns:repeat(2,1fr)}
  .branches{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr}
  .checks .c-item{border-left:none;border-top:1px solid var(--faint)}
  .cat-row{grid-template-columns:1fr;gap:14px}
  .cat-row .c-img{max-width:340px}
  .cat-head{grid-template-columns:1fr;gap:8px}
  .footer .f-grid{grid-template-columns:1fr;gap:32px}
  .sponsor-grid{grid-template-columns:repeat(2,1fr)}
  .backleaf .sponsor-grid{grid-template-columns:repeat(2,1fr)}
  .masthead-mini{justify-content:center;text-align:center}
  .masthead-mini .mainnav{justify-content:center}
}
@media (max-width:560px){
  :root{--fs-body:18.5px}
  .versus,.datatable{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .toc-grid,.feed-grid,.feed-more-grid,.sponsor-grid,.backleaf .sponsor-grid{grid-template-columns:1fr}
  .hero{padding-top:36px}
  .region{grid-template-columns:34px 1fr}
  .pullquote p{font-size:24px}
  .dropcap::first-letter{font-size:58px}
}
@media print{
  .topbar,.mainnav,.feed-toggle{display:none}
}

/* idaho-final */
.sponsor img{object-fit:contain !important;filter:none !important;padding:12px 14px}
.sponsor-blurb{display:-webkit-box !important;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 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-grid .sponsor.sponsor img{height:76px!important}

/* op-mobile-collapse: FOUR content-sized columns (69+77+83+68 plus 3x18px gaps = 351px) in a
   308px band. Two columns below 640px, one below 420px. */
@media (max-width:640px){
  .sponsor-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:420px){
  .sponsor-grid{grid-template-columns:minmax(0,1fr)!important}
}

/* op-footer-compact: the footer printed 9 rows for 9 link(s) in
   2 list(s) — 1398px at 390, 13% 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, and the group holder takes two columns,
   measured 1398 -> 1063px (24% 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:min(4.51vw,65px)!important;row-gap:4px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
  footer [class*=grid],footer [class*=index],footer [class*=cols]{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:24px}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1398px at 390, 14% of the whole page. Two columns bring it to
   814px (42% shorter). Checked before writing: no new overflow, smallest mark still
   145px wide, longest blurb 2 lines, tile heights 125-128px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   Only the tier(s) that were one-per-row are touched (.sponsor-grid), 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-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!important}
    .sponsor-grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-grid > * *{min-width:0!important;max-width:100%}
    .sponsor-grid img,.sponsor-grid svg{max-width:100%;height:auto}
}

/* op-article-width: the article column was capped at 740px (85 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through grid track 2 of "88px minmax(0px, 74ch)" (declared in .sec) 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.post-body section.sec{grid-template-columns:88px min(885px, calc(100% - 124px))!important}
}
@media (min-width:1600px){
  div.post-body section.sec{grid-template-columns:88px min(clamp(885px, 61.458vw, 1062px), calc(100% - 124px))!important}
  div.post-body div.secbody > :is(p:not([class])){font-size:clamp(20px,1.3889vw,24.0px)!important}
}
/* op-article-width:end */
/* op-heading-levels */
.cat-row h2:where(.rt-h3){font: 600 24px/1.25 var(--serif); margin: 0px;}
.cat-row:hover h2:where(.rt-h3){color: var(--bronze-deep);}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.cat-row > span.c-img > img,
  article.gcard > a.g-img > img,
  div.wrap > figure.post-hero > img,
  figure.plate > div.ph > img){height:auto}
/* op-img-dims:end */