/* ============================================================
   Political Ad Sleuth — site stylesheet
   Newsroom navy + money-gold, chart-led, non-partisan, evergreen
   ============================================================ */
:root{
  --sand:#e7e2d6; --paper:#f4eddc; --card:#fbf7ec; --band:#eee6d0;
  --navy:#182230; --nav:#101a26; --footer:#0b1119;
  --gold:#c9a24b; --gold-hover:#a8842f; --gold-muted:#8a7a4e;
  --ink:#182230; --dek:#3f4855; --dek2:#5c6672;
  --on-navy:#fbf7ec; --on-navy-2:#efe7d3; --on-navy-muted:#9aa5b2;
  --line:#ddd4bf; --line2:#e2d9c2;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Public Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --wrap:1200px; --measure:70ch;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);background:var(--sand);color:var(--ink);
  font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--gold-hover)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.1;margin:0}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
.kicker{font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hover)}
.mono{font-family:var(--mono)}
.page{background:var(--paper)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Masthead ---------- */
.masthead{background:var(--navy)}
.mast-inner{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px;gap:18px}
.brand{font-family:var(--serif);font-weight:700;font-size:30px;color:var(--on-navy);letter-spacing:-.3px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.brand:hover{color:var(--on-navy)}
.brand .tagline{font-style:italic;font-weight:400;font-size:16px;color:var(--gold)}
.mast-right{display:flex;align-items:center;gap:16px;flex-shrink:0}
.badge{font-family:var(--mono);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-navy-muted)}
.btn-gold{background:var(--gold);color:var(--navy);font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;padding:11px 17px;border-radius:3px;border:none;cursor:pointer;display:inline-block}
.btn-gold:hover{background:var(--gold-hover);color:var(--navy)}

/* ---------- Nav + dropdowns (CSS only) ---------- */
.nav{background:var(--nav);border-bottom:2px solid var(--gold);position:relative;z-index:50}
.nav-inner{padding:0}
.navtog,.navtog-btn{display:none}
.nav-list{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:2px}
.nav-list>li>a{display:block;padding:14px 18px;color:#cdd4dd;font-weight:600;font-size:14px;letter-spacing:.01em}
.nav-list>li>a:hover,.nav-list>li:focus-within>a{color:var(--on-navy)}
.nav-list>li.has-sub{position:relative}
.nav-sub{list-style:none;margin:0;padding:8px 6px;position:absolute;top:100%;left:0;min-width:262px;
  background:var(--navy);border-top:2px solid var(--gold);box-shadow:0 22px 48px -16px rgba(6,10,18,.7);
  border-radius:0 0 3px 3px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .16s ease,transform .16s ease;z-index:60}
.nav-sub::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}/* hover bridge */
.nav-list>li.has-sub:hover .nav-sub,.nav-list>li.has-sub:focus-within .nav-sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav-sub .sub-kicker{font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);padding:5px 12px 9px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:5px}
.nav-sub li a{display:block;padding:9px 12px;color:var(--on-navy-2);font-size:14px;line-height:1.35;border-radius:2px}
.nav-sub li a:hover{background:rgba(201,162,75,.16);color:#fff}

/* ---------- Hero (navy) + Sankey ---------- */
.hero{background:var(--navy);color:var(--on-navy-2);background-image:radial-gradient(120% 90% at 82% -10%,rgba(201,162,75,.10),transparent 60%)}
.hero-inner{padding:54px 40px 46px}
.hero .lead-copy{max-width:64ch;margin-bottom:26px}
.hero-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.hero-eyebrow .rule{width:40px;height:2px;background:var(--gold);flex-shrink:0}
.hero-eyebrow span:last-child{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.hero h1{font-size:clamp(40px,5.4vw,56px);color:var(--on-navy);letter-spacing:-.6px;margin:0 0 15px}
.hero .dek{font-size:19.5px;line-height:1.5;color:#c2c9d2;margin:0;max-width:56ch}
.hop-chips{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:24px}
.hop-chips span:not(.arw){font-family:var(--mono);font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-navy-2);border:1px solid rgba(201,162,75,.42);border-radius:100px;padding:7px 15px}
.hop-chips .arw{color:var(--gold);font-size:15px}
.sankey-wrap{width:100%;margin-top:10px}
.sankey-wrap svg{width:100%;height:auto;display:block}
.sankey-cap{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;text-align:center;margin:16px 0 0;font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--on-navy-muted)}
.sankey-cap a{color:var(--gold)}
.sankey-cap a:hover{color:#e0be74}

/* ---------- Numbered steps ---------- */
.steps{background:var(--paper);border-bottom:1px solid var(--line)}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:38px 0}
.step{padding:0 26px;border-right:1px solid var(--line)}
.step:last-child{border-right:none;padding-right:0}
.step:first-child{padding-left:0}
.step .num{font-family:var(--serif);font-weight:600;font-size:48px;color:var(--gold);line-height:1}
.step h3{font-family:var(--sans);font-weight:600;font-size:16px;margin:9px 0 6px}
.step p{font-size:14.5px;line-height:1.5;color:var(--dek2);margin:0}

/* ---------- Chart hover tooltip ---------- */
.chart-tip{position:fixed;left:0;top:0;z-index:300;pointer-events:none;opacity:0;
  transition:opacity .12s ease;background:#0b1119;color:#fbf7ec;font-family:var(--mono);
  font-size:12px;font-weight:600;letter-spacing:.01em;padding:7px 11px;border-radius:4px;
  border:1px solid rgba(201,162,75,.5);white-space:nowrap;max-width:60vw;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.6)}
.chart-tip.on{opacity:1}

/* ---------- Chart explainers (2-col) ---------- */
.explainers{padding:44px 0;border-bottom:1px solid var(--line)}
.explainers-grid{display:grid;grid-template-columns:1fr;gap:44px}
.explainer{display:grid;grid-template-columns:0.85fr 1.15fr;gap:44px;align-items:center}
.explainer .ex-copy{max-width:46ch}
.explainer h2{font-size:29px;line-height:1.1;margin:6px 0 12px}
.explainer h2 a:hover{color:var(--gold-hover)}
.explainer .dek{font-size:16px;line-height:1.55;color:var(--dek);margin:0 0 18px}
.chart-card{background:var(--card);border:1px solid var(--line2);border-radius:4px;padding:22px 24px}
.chart-card svg{width:100%;height:auto;display:block}

/* SVG chart shared interactions */
.bar-row .bar-fill{transition:fill .12s}
.bar-row:hover .bar-fill{fill:var(--gold)}
.bar-row:hover .bar-label{fill:var(--ink);font-weight:600}
.bar-row:hover .bar-val{fill:var(--gold-hover)}
.bar-row,.dot,.ribbon,.snode{cursor:default}
.dot{transition:r .12s}
.dot:hover{r:6}
.ribbon{transition:opacity .14s}
.ribbon:hover{opacity:.62 !important}

/* ---------- Stat band ---------- */
.statband{background:var(--band);border-bottom:1px solid var(--line);padding:38px 0}
.statband-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:10px}
.statband-head h2{font-size:26px}
.pill{font-family:var(--mono);font-weight:500;font-size:11.5px;color:var(--gold-muted);border:1px solid #d0c39b;background:#efe7d1;padding:7px 13px;border-radius:3px}
.stat-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#d8cfb8;border:1px solid #d8cfb8;border-radius:4px;overflow:hidden}
.stat-tile{background:var(--card);padding:26px 24px}
.stat-tile .stat-num{font-family:var(--serif);font-weight:600;font-size:42px;color:var(--ink);line-height:1;display:block}
.stat-tile .stat-label{font-size:13px;color:var(--dek2);margin-top:8px;line-height:1.4;display:block}

/* ---------- Section cards / feed (even height) ---------- */
.feed{padding:44px 0 8px}
.feed-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:10px}
.feed-head h2{font-size:26px}
.feed-head .more{font-family:var(--mono);font-weight:600;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-hover)}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--card);border:1px solid var(--line2);border-radius:4px;overflow:hidden;display:flex;flex-direction:column}
.card .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .body{padding:18px 20px;display:flex;flex-direction:column;flex:1}
.card .cat{font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hover);margin-bottom:8px}
.card h3{font-size:21px;line-height:1.16;margin:0 0 10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.32em}
.card p{font-size:14px;line-height:1.5;color:var(--dek2);margin:0 0 14px;flex:1}
.card .meta{font-family:var(--mono);font-size:12px;color:var(--gold-muted);border-top:1px solid #eadfc6;padding-top:11px}

/* wide lead card variant */
.lead-card{grid-column:1 / -1;display:grid;grid-template-columns:1.1fr 1fr;gap:0}
.lead-card .thumb{aspect-ratio:auto;height:100%;min-height:280px}
.lead-card .body{padding:30px 34px;justify-content:center}
.lead-card h3{font-size:32px;-webkit-line-clamp:3;min-height:0}
.lead-card p{font-size:16px;line-height:1.55}

/* ---------- Sponsor single slot ---------- */
.sponsor-slot{margin:20px 0 8px;border:1px dashed #cdbf98;border-radius:4px;background:#efe7d1;display:flex;align-items:center;gap:22px;padding:20px 26px}
.sponsor-slot .lbl{font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-muted);border:1px solid #cdbf98;padding:5px 9px;border-radius:3px;white-space:nowrap}
.sponsor-slot .txt{flex:1}
.sponsor-slot .txt b{font-weight:600;font-size:15px}
.sponsor-slot .txt span{display:block;font-size:13.5px;color:#6b7480}
.sponsor-slot .cta{font-weight:600;font-size:14px;color:var(--gold-hover)}

/* ---------- Newsletter ---------- */
.newsletter{background:var(--gold)}
.newsletter-inner{padding:44px 40px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.newsletter h2{font-size:30px;color:var(--navy);margin:0 0 8px}
.newsletter p{font-size:15px;line-height:1.55;color:#3f3316;margin:0;max-width:44ch}
.nl-form{display:flex;gap:10px}
.nl-form input{flex:1;background:var(--card);border:none;border-radius:3px;padding:15px 16px;font-family:var(--sans);font-size:15px;color:var(--ink)}
.nl-form button{background:var(--navy);color:var(--on-navy);border:none;font-weight:700;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase;padding:0 24px;border-radius:3px;cursor:pointer}
.nl-form button:hover{background:#0b1119}
.nl-fine{font-family:var(--mono);font-size:11.5px;color:#6b5a2a;margin-top:11px}
.nl-thanks{background:var(--navy);border-radius:4px;padding:19px 20px;color:var(--on-navy);font-size:15px;display:none}

/* ---------- Methodology strip ---------- */
.methodology{background:var(--navy);padding:26px 0}
.methodology-inner{display:flex;gap:16px;align-items:flex-start}
.methodology .tag{font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);background:var(--gold);padding:5px 9px;border-radius:3px;white-space:nowrap;margin-top:2px}
.methodology p{margin:0;font-size:13.5px;line-height:1.6;color:var(--on-navy-muted);max-width:92ch}

/* ---------- Supporter strip (The Ledger) ---------- */
.ledger{background:#141d29;padding:40px 0}
.ledger-head{text-align:center;margin-bottom:26px}
.ledger-head .kicker{color:var(--gold)}
.ledger-head h2{color:var(--on-navy);font-size:26px;margin:8px 0 6px}
.ledger-head p{color:var(--on-navy-muted);font-size:13.5px;margin:0}
.ledger-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.sponsor{background:#0b1119;border:1px solid rgba(201,162,75,.14);border-radius:3px;aspect-ratio:12/4;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.sponsor img{width:100%;height:100%;object-fit:cover;opacity:.9}
.sponsor:hover{border-color:rgba(201,162,75,.4)}
.sponsor-blurb{display:none}

/* ---------- Footer ---------- */
.site-footer{background:var(--footer)}
.foot-top{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;padding-top:36px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.09)}
.foot-brand{font-family:var(--serif);font-weight:700;font-size:22px;color:var(--on-navy)}
.foot-brand span{font-style:italic;font-weight:400;font-size:14px;color:var(--gold)}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;font-size:14px}
.foot-links a{color:#aeb7c2}
.foot-note{font-size:12.5px;line-height:1.5;color:#6b7480;max-width:82ch;padding-top:18px;padding-bottom:34px}

/* ============================================================
   ARTICLE / POST
   ============================================================ */
.post-hero{background:var(--navy);color:var(--on-navy-2);background-image:radial-gradient(120% 90% at 85% -10%,rgba(201,162,75,.10),transparent 60%)}
.post-hero-inner{padding:52px 40px 0}
.post-hero .kicker{display:inline-flex;align-items:center;gap:12px;color:var(--gold)}
.post-hero .kicker::before{content:"";width:34px;height:2px;background:var(--gold);flex-shrink:0}
.post-hero h1{color:var(--on-navy);font-size:clamp(36px,4.8vw,52px);letter-spacing:-.5px;margin:18px 0 18px;max-width:19ch}
.post-hero .dek{font-size:20.5px;line-height:1.5;color:#c6cdd6;max-width:58ch;margin:0 0 26px}
.post-hero .byline{font-family:var(--mono);font-size:13px;letter-spacing:.05em;color:var(--on-navy-muted);padding:18px 0 40px;border-top:1px solid rgba(255,255,255,.1)}
.post-figure{margin:0;border-top:3px solid var(--gold)}
.post-figure img{width:100%;max-height:500px;object-fit:cover;display:block}
.post-figure figcaption{font-family:var(--mono);font-size:12.5px;color:var(--gold-muted);padding:14px 40px 0;max-width:var(--wrap);margin:0 auto;line-height:1.5}

.article{padding:44px 0 20px}
.article-body{max-width:var(--measure);margin:0 auto;padding-inline:40px;font-size:19.5px;line-height:1.72;color:#26303c}
.article-body>p{margin:0 0 1.15em}
.article-body a{color:var(--gold-hover);text-decoration:underline;text-decoration-color:rgba(168,132,47,.35);text-underline-offset:2px}
.article-body a:hover{text-decoration-color:var(--gold-hover)}
.article-body h2{font-size:30px;margin:1.5em 0 .5em;padding-top:.3em;display:flex;gap:16px;align-items:baseline}
.article-body h2 .h2-no{font-family:var(--mono);font-weight:600;font-size:15px;color:var(--gold);flex-shrink:0;padding-top:6px}
.article-body h3{font-size:23px;margin:1.4em 0 .4em}
.lead{font-size:23px;line-height:1.5;color:var(--ink);font-family:var(--serif);margin:0 0 1em}
.article-body>p.lead:first-letter,.dropcap:first-letter{float:left;font-family:var(--serif);font-weight:700;font-size:4.4em;line-height:.78;padding:.05em .1em 0 0;color:var(--navy)}

/* components */
.lead{}
.pullquote{margin:1.6em 0;padding:0 0 0 24px;border-left:3px solid var(--gold)}
.pullquote p{font-family:var(--serif);font-weight:500;font-size:27px;line-height:1.28;color:var(--navy);margin:0}
.blockquote{margin:1.6em 0;padding:20px 24px;background:var(--band);border-radius:4px}
.blockquote p{font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.45;color:var(--navy);margin:0 0 .4em}
.blockquote cite{font-family:var(--mono);font-style:normal;font-size:13px;color:var(--gold-muted)}
.callout{margin:1.6em 0;padding:22px 24px;background:#fbf7ec;border:1px solid var(--line2);border-left:4px solid var(--gold);border-radius:4px}
.callout p{margin:0;font-size:17.5px;line-height:1.55;color:var(--dek)}
.callout .co-label{font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hover);display:block;margin-bottom:8px}
.note{margin:1.4em 0;padding:14px 18px;background:rgba(24,34,48,.04);border-radius:4px;font-size:15.5px;line-height:1.5;color:var(--dek2)}
.note::before{content:"NOTE ";font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.12em;color:var(--gold-muted)}

/* key facts aside */
.keyfacts{margin:1.8em 0;background:var(--navy);color:var(--on-navy-2);border-radius:5px;padding:24px 26px}
.keyfacts h4{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.keyfacts dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 26px}
.keyfacts dt{font-weight:700;font-size:14.5px;color:var(--on-navy)}
.keyfacts dd{margin:2px 0 0;font-size:13.5px;line-height:1.45;color:var(--on-navy-muted)}

/* versus */
.versus{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:15.5px}
.versus caption{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hover);text-align:left;margin-bottom:10px}
.versus th,.versus td{padding:12px 14px;border-bottom:1px solid var(--line2);text-align:left;vertical-align:top}
.versus thead th{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-muted);border-bottom:2px solid var(--navy)}
.versus tbody th{font-weight:600;color:var(--navy);width:32%}

/* datatable */
.datatable{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:15.5px}
.datatable caption{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hover);text-align:left;margin-bottom:10px}
.datatable th,.datatable td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line2)}
.datatable thead th{background:var(--navy);color:var(--on-navy);font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.datatable tbody tr:nth-child(even){background:rgba(24,34,48,.03)}
.datatable td.num{font-family:var(--mono);text-align:right}

/* statblock */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line2);border:1px solid var(--line2);border-radius:4px;overflow:hidden;margin:1.6em 0}
.statblock{background:var(--card);padding:20px 22px}
.statblock .stat-num{font-family:var(--serif);font-weight:600;font-size:34px;color:var(--navy);line-height:1;display:block}
.statblock .stat-label{font-size:13px;line-height:1.4;color:var(--dek2);margin-top:7px;display:block}

/* timeline */
.timeline{list-style:none;margin:1.6em 0;padding:0;border-left:2px solid var(--gold)}
.timeline li{position:relative;padding:0 0 20px 26px}
.timeline li::before{content:"";position:absolute;left:-7px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--gold);border:2px solid var(--paper)}
.timeline .t-when{display:block;font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.03em;color:var(--gold-hover);margin-bottom:3px}
.timeline .t-what{display:block;font-size:16px;line-height:1.5;color:var(--dek)}

/* charts in article */
.chart{margin:1.8em 0}
.chart svg{width:100%;height:auto;display:block;background:var(--card);border:1px solid var(--line2);border-radius:4px;padding:18px}
.chart figcaption{font-family:var(--mono);font-size:12.5px;color:var(--gold-muted);margin-top:10px;line-height:1.5}

/* figures / gallery / map */
.article-figure{margin:1.8em 0}
.article-figure img{width:100%;border-radius:4px}
.article-figure figcaption{font-family:var(--mono);font-size:12.5px;color:var(--gold-muted);margin-top:10px;line-height:1.5}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:1.8em 0}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px}
.map-figure{margin:1.8em 0}
.map-figure .map-slot{aspect-ratio:16/9;background:repeating-linear-gradient(45deg,#eef0f2,#eef0f2 12px,#e6e8ea 12px,#e6e8ea 24px);border:1px solid var(--line2);border-radius:4px;display:flex;align-items:center;justify-content:center}
.map-figure .map-slot::after{content:none;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:#9aa2ac}
.map-figure figcaption{font-family:var(--mono);font-size:12.5px;color:var(--gold-muted);margin-top:10px}

/* profile / org / refs */
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:1.8em 0}
.profile-card{background:var(--card);border:1px solid var(--line2);border-radius:5px;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.no-photo{border-left:4px solid var(--gold)}
.profile-card h3{font-size:20px}
.profile-card .p-role{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--gold-hover);text-transform:uppercase;margin:0}
.profile-card p{font-size:15px;line-height:1.5;color:var(--dek2);margin:.4em 0 0}
.profile-card .p-links a{color:var(--gold-hover);font-size:14px;font-weight:600;margin-right:14px}
.org-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:1.6em 0}
.org-card{background:var(--card);border:1px solid var(--line2);border-radius:4px;padding:14px 16px;display:flex;flex-direction:column;gap:3px}
.org-card:hover{border-color:var(--gold)}
.org-logo{width:34px;height:34px;border-radius:4px;object-fit:cover;margin-bottom:4px;background:var(--navy)}
.org-card.no-logo .org-logo{display:none}
.org-name{font-weight:600;font-size:15.5px;color:var(--navy)}
.org-host{font-family:var(--mono);font-size:12px;color:var(--gold-muted)}
.entity-ref{color:var(--gold-hover);font-weight:600;text-decoration:underline;text-decoration-color:rgba(168,132,47,.35);text-underline-offset:2px}

/* related / further */
.related{border-top:1px solid var(--line);margin-top:40px;padding:34px 0 10px}
.related h2{font-size:24px;margin-bottom:18px}
.further-grid,.related-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.further-grid a,.related-links a{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line2);border-radius:4px;padding:18px 20px;min-height:100%}
.further-grid a:hover,.related-links a:hover{border-color:var(--gold)}
.related-links .r-cat{font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hover)}
.related-links .r-title{font-family:var(--serif);font-weight:600;font-size:18px;line-height:1.18;color:var(--navy)}

/* ============================================================
   CATEGORY / HUB / SIMPLE PAGES
   ============================================================ */
.pagehead{background:var(--navy);color:var(--on-navy-2)}
.pagehead-inner{padding:48px 40px}
.pagehead .kicker{color:var(--gold)}
.pagehead h1{color:var(--on-navy);font-size:clamp(34px,4.6vw,48px);margin:14px 0 14px}
.pagehead .dek{font-size:19px;line-height:1.5;color:#c2c9d2;max-width:64ch;margin:0}
.section-body{padding:44px 0 60px}
.cat-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.cat-list li{border-bottom:1px solid var(--line)}
.cat-list a{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding:22px 0}
.cat-list a:hover .cl-title{color:var(--gold-hover)}
.cat-list .cl-no{font-family:var(--serif);font-weight:600;font-size:26px;color:var(--gold)}
.cat-list .cl-main{}
.cat-list .cl-title{font-family:var(--serif);font-weight:600;font-size:23px;line-height:1.15;color:var(--navy)}
.cat-list .cl-dek{font-size:15px;color:var(--dek2);margin-top:5px;max-width:70ch}
.cat-list .cl-meta{font-family:var(--mono);font-size:12px;color:var(--gold-muted);white-space:nowrap}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
.hub-card{background:var(--card);border:1px solid var(--line2);border-radius:5px;padding:26px 28px;display:flex;flex-direction:column}
.hub-card:hover{border-color:var(--gold)}
.hub-card .cat{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hover)}
.hub-card h2{font-size:25px;margin:10px 0 8px}
.hub-card p{font-size:15px;line-height:1.5;color:var(--dek2);margin:0 0 14px;flex:1}
.hub-card .count{font-family:var(--mono);font-size:12.5px;color:var(--gold-muted)}
.prose{max-width:var(--measure);margin:0 auto;padding-inline:40px;font-size:19px;line-height:1.7;color:#26303c}
.prose h2{font-size:27px;margin:1.4em 0 .4em}
.prose a{color:var(--gold-hover);text-decoration:underline;text-underline-offset:2px}
.contact-methods{list-style:none;margin:1.4em 0;padding:0;display:grid;gap:12px}
.contact-methods li{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line2);border-radius:4px;padding:16px 18px}
.contact-methods svg{flex-shrink:0;color:var(--gold-hover)}
.contact-methods b{display:block;font-size:16px}
.contact-methods span{font-size:14px;color:var(--dek2)}
.err-wrap{text-align:center;padding:90px 40px}
.err-wrap .code{font-family:var(--serif);font-weight:700;font-size:120px;color:var(--gold);line-height:1}
.err-wrap h1{font-size:36px;margin:8px 0 14px}
.err-wrap p{font-size:18px;color:var(--dek);margin:0 0 24px}

/* styleguide */
.sg-section{padding:36px 0;border-bottom:1px solid var(--line)}
.sg-section>h2{font-size:26px;margin-bottom:6px}
.sg-section>.kicker{margin-bottom:20px;display:block}
.sg-demo{max-width:var(--measure);padding-inline:40px}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;padding:0 40px}
.swatch{border:1px solid var(--line2);border-radius:4px;overflow:hidden;font-family:var(--mono);font-size:11px}
.swatch .chip{height:56px}
.swatch .lab{padding:6px 8px;background:var(--card);color:var(--dek2)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .steps-grid{grid-template-columns:repeat(2,1fr);gap:24px 0}
  .step{padding:0 20px}.step:nth-child(odd){padding-left:0;border-right:1px solid var(--line)}.step:nth-child(even){padding-right:0;border-right:none}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .stat-tiles{grid-template-columns:repeat(2,1fr)}
  .ledger-grid{grid-template-columns:repeat(4,1fr)}
  .keyfacts dl{grid-template-columns:1fr}
  .profile-grid{grid-template-columns:1fr}
  .further-grid,.related-links{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:17px}
  .wrap{padding:0 22px}
  .explainers-grid{grid-template-columns:1fr;gap:34px}
  .explainer{grid-template-columns:1fr;gap:20px}
  .newsletter-inner{grid-template-columns:1fr;gap:24px;padding:36px 22px}
  .hero-inner,.post-hero-inner,.pagehead-inner{padding-left:22px;padding-right:22px}
  .post-figure figcaption{padding-inline:22px}
  .article-body,.prose,.sg-demo{padding-inline:22px}
  .lead-card{grid-template-columns:1fr}
  .lead-card .thumb{min-height:200px}
  .foot-top{flex-direction:column;gap:16px}
}
@media (max-width:620px){
  .card-grid{grid-template-columns:1fr}
  .stat-tiles{grid-template-columns:1fr;gap:1px}
  .steps-grid{grid-template-columns:1fr}
  .step{padding:0 0 4px 0 !important;border-right:none !important;border-bottom:1px solid var(--line);padding-bottom:18px !important}
  .step:last-child{border-bottom:none}
  .ledger-grid{grid-template-columns:repeat(2,1fr)}
  .further-grid,.related-links{grid-template-columns:1fr}
  .cat-list a{grid-template-columns:auto 1fr;gap:14px}
  .cat-list .cl-meta{grid-column:2;margin-top:6px}
  .gallery{grid-template-columns:1fr 1fr}
  /* mobile nav */
  .nav-inner{position:relative}
  .navtog-btn{display:flex;align-items:center;gap:10px;padding:13px 0;color:var(--on-navy);font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
  .navtog-btn svg{width:22px;height:22px}
  .nav-list{display:none;flex-direction:column;gap:0;padding-bottom:10px}
  .navtog:checked ~ .nav-list{display:flex}
  .nav-list>li>a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07)}
  .nav-list>li.has-sub{position:static}
  .nav-sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border-top:none;
    min-width:0;padding:2px 0 10px 14px;background:transparent}
  .nav-sub .sub-kicker{display:none}
  .nav-sub li a{padding:8px 0;color:var(--on-navy-muted);font-size:13.5px}
}

/* ---------- Mobile article refinements ---------- */
@media (max-width:760px){
  .post-hero-inner{padding-top:38px}
  .post-hero .kicker::before{width:26px}
  .post-hero h1{margin:14px 0 14px}
  .post-hero .dek{font-size:18px;margin-bottom:20px}
  .post-hero .byline{padding:15px 0 30px;font-size:12px}
  .post-figure{border-top-width:2px}
  .post-figure img{max-height:340px}
  .article{padding:30px 0 10px}
  .article-body{font-size:17.5px;line-height:1.68}
  .article-body>p{margin:0 0 1.05em}
  .article-body h2{font-size:24px;gap:11px;margin:1.25em 0 .45em}
  .article-body h2 .h2-no{font-size:12.5px;padding-top:5px}
  .article-body h3{font-size:20px}
  .lead{font-size:20px}
  .article-body>p.lead:first-letter,.dropcap:first-letter{font-size:3.5em}
  .pullquote{margin:1.3em 0;padding-left:18px}
  .pullquote p{font-size:21px}
  .blockquote{padding:16px 18px}
  .blockquote p{font-size:18px}
  .callout{padding:18px 20px}
  .callout p{font-size:16px}
  .note{font-size:14.5px}
  .keyfacts{padding:20px 20px}
  .keyfacts dl{gap:12px}
  .datatable,.versus{font-size:14px}
  .datatable th,.datatable td,.versus th,.versus td{padding:9px 10px}
  .versus tbody th{width:34%}
  .datatable td.num{font-size:13.5px}
  .statblock{padding:16px 18px}
  .statblock .stat-num{font-size:28px}
  .timeline .t-what{font-size:15px}
  .related{padding-top:28px}
  .related h2{font-size:22px}
}
@media (max-width:400px){
  .statrow{grid-template-columns:1fr}
  .versus,.datatable{font-size:13px}
  .versus th,.versus td,.datatable th,.datatable td{padding:8px 8px}
  .post-figure img{max-height:280px}
}

/* 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-text-contrast: sponsor copy measured against its OWN ground as a WCAG contrast RATIO, not as a
   luminance subtraction. The subtraction passed capitanalatriste's blurbs at a 75-point gap
   while they sat at 2.8:1 and could not be read. Bar is 4.5:1 for body copy, 3:1 for large or
   bold; opacity is folded in, because it compounds down the tree and computed colour ignores
   it. The lift keeps Design's hue and saturation and moves lightness only, by the smallest
   step that clears the bar, so a warm blurb on near-black stays warm. Colour only — size,
   weight, family and spacing are exactly as delivered. */
.sponsor-blurb.sponsor-blurb{color:rgb(92,126,173)!important;opacity:1!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. */
.ledger-grid .sponsor.sponsor img{box-sizing:border-box!important;height:43px!important;padding:8px 12px!important}

/* op-overflow-row: div.mast-right overhung the viewport by 74px at 320 on
   ad-money-goes.html — width 245px reaching x=393, white-space:normal,
   min-width:auto, inside div.wrap.mast-inner (flex/nowrap,
   tracks none). Closed at the element that causes it, phone
   widths only. */
@media (max-width:640px){
  .wrap.mast-inner{flex-wrap:wrap}
  .mast-right{min-width:0;max-width:100%}
}

/* op-overflow-grid: div overhung the viewport by 52px at 320 on
   index.html — width 350px reaching x=372, white-space:normal,
   min-width:auto, inside div.wrap.newsletter-inner (grid/nowrap,
   tracks 349.875px). Closed at the element that causes it, phone
   widths only. */
@media (max-width:640px){
  .wrap.newsletter-inner{grid-template-columns:minmax(0,1fr)}
}

/* op-overflow-row: button overhung the viewport by 52px at 320 on
   index.html — width 132px reaching x=372, white-space:normal,
   min-width:auto, inside form.nl-form (flex/nowrap,
   tracks none). Closed at the element that causes it, phone
   widths only. */
@media (max-width:640px){
  .nl-form{flex-wrap:wrap}
  .nl-form button{min-width:0;max-width:100%}
}

/* op-article-width: the article column was capped at 755px (85 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (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{--measure:min(83.063ch, 100%)!important}
}
@media (min-width:1600px){
  div.article-body{--measure:min(clamp(83.063ch, 68.819vw, calc(83.063ch * 1.2)), 100%)!important}
  div.article-body > :is(p:not([class])), div.article-body > :is(ol.timeline) > li{font-size:clamp(19.5px,1.3542vw,23.4px)!important}
}
/* op-article-width:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--serif); font-weight: 600; line-height: 1.1; margin: 0px;}
.step h2:where(.rt-h3){font-family: var(--sans); font-weight: 600; font-size: 16px; margin: 9px 0px 6px;}
.card h2:where(.rt-h3){font-size: 21px; line-height: 1.16; margin: 0px 0px 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.32em;}
.lead-card h2:where(.rt-h3){font-size: 32px; -webkit-line-clamp: 3; min-height: 0px;}
/* op-heading-levels:end */

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:701px) and (max-width:1299px){
  ul.cat-list{padding-left:max(40px, 18px);padding-right:max(40px, 18px)}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article > figure.post-figure > img,
  article.card > a.thumb > img,
  article.card.lead-card > a.thumb > img){height:auto}
/* op-img-dims:end */