/* ============================================================
   QR Energy — independent oil & energy explainer
   Refinery steel + crude-amber, chart-led editorial
   ============================================================ */
:root{
  --paper:#F4F1EA;
  --charcoal:#22262B;
  --ink-dark:#1C2024;      /* footer / ticker */
  --card-dark:#2A2F35;
  --accent:#C8842E;
  --accent-hi:#E0A24E;
  --ink:#1A1D21;
  --muted:#5C5F63;
  --muted-2:#4A4D51;
  --on-dark:#F4F1EA;
  --on-dark-2:#C9CDD2;
  --on-dark-3:#9AA0A6;
  --border:#E2DDD1;
  --grid:#EDE8DC;
  --up:#7FB98A;
  --down:#D08A72;
  --wrap:1180px;
  --measure:70ch;
  --serif:'Spectral',Georgia,serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);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(--accent)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;letter-spacing:-.015em;line-height:1.08;margin:0}
p{margin:0 0 1.1em;text-wrap:pretty}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600}
.mono{font-family:var(--mono)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.amber{color:var(--accent)}

/* ---------- Header + nav ---------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--charcoal);color:var(--on-dark);border-bottom:1px solid rgba(255,255,255,.08)}
.header-bar{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:12px}
.brand-badge{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;background:var(--accent);color:var(--charcoal);font-family:var(--mono);font-weight:600;font-size:16px;border-radius:3px}
.brand-name{font-family:var(--serif);font-weight:600;font-size:22px;color:var(--on-dark);letter-spacing:.01em}
.nav-toggle,.nav-toggle-label{display:none}
.nav{display:flex;align-items:stretch;gap:2px;list-style:none;margin:0;padding:0;height:74px}
.nav > li{display:flex;align-items:center;position:relative}
.nav-top{display:flex;align-items:center;height:74px}
.nav-top > a,.nav > li > a{display:flex;align-items:center;height:74px;padding:0 14px;font-size:14.5px;font-weight:500;color:var(--on-dark);border-bottom:2px solid transparent}
.nav-top > a:hover,.nav > li > a:hover,.has-sub:hover .nav-top > a,.has-sub:focus-within .nav-top > a{color:var(--on-dark);border-bottom-color:var(--accent)}
.subtoggle{display:none}
.subcaret{display:none}
.nav-sub{position:absolute;top:74px;left:0;min-width:270px;list-style:none;margin:0;padding:8px;
  background:var(--card-dark);border:1px solid rgba(255,255,255,.1);border-top:2px solid var(--accent);
  box-shadow:0 24px 48px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s;z-index:110}
.has-sub:hover .nav-sub,.has-sub:focus-within .nav-sub{opacity:1;visibility:visible;transform:none}
.has-sub::after{content:"";position:absolute;left:0;right:0;top:74px;height:8px}/* hover bridge */
.nav-sub a{display:block;padding:10px 12px;font-size:14px;color:var(--on-dark-2);border-radius:3px;line-height:1.3}
.nav-sub a:hover{background:rgba(200,132,46,.14);color:var(--on-dark)}
.cta-btn{display:inline-flex;align-items:center;gap:8px;margin-left:14px;padding:0 18px;height:44px;font-size:14px;font-weight:600;
  background:var(--accent);color:var(--charcoal);border-radius:3px}
.cta-btn:hover{background:var(--accent-hi);color:var(--charcoal)}

/* ---------- Ticker ---------- */
.ticker{background:var(--ink-dark);border-top:1px solid rgba(255,255,255,.07)}
.ticker-row{display:flex;align-items:center;gap:26px;height:38px;overflow:hidden}
.ticker-tag{flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--accent);font-weight:600}
.tick{flex:none;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;color:var(--on-dark-2)}
.tick b{color:var(--on-dark);font-weight:500}
.tick .up{color:var(--up)}
.tick .down{color:var(--down)}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--charcoal);color:var(--on-dark)}
.hero-media{position:relative;width:100%;height:640px;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,23,26,.94) 0%,rgba(20,23,26,.72) 44%,rgba(20,23,26,.12) 100%);pointer-events:none}
.hero-inner{position:absolute;inset:0;display:flex;align-items:flex-end}
.hero-content{max-width:660px;padding-bottom:64px}
.hero-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.hero-eyebrow .div{width:28px;height:1px;background:rgba(255,255,255,.35)}
.hero-eyebrow .sub{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--on-dark-3)}
.hero h1{font-size:60px;line-height:1.03;margin-bottom:22px;text-wrap:balance}
.hero-dek{font-family:var(--serif);font-size:21px;line-height:1.5;color:#D6D3CB;margin-bottom:30px;max-width:560px}
.hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.btn-solid{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--charcoal);font-weight:600;font-size:15px;padding:14px 24px;border-radius:3px}
.btn-solid:hover{background:var(--accent-hi);color:var(--charcoal)}
.btn-outline{display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--charcoal);color:var(--charcoal);font-weight:600;font-size:15px;padding:13px 24px;border-radius:3px}
.btn-outline:hover{background:var(--charcoal);color:var(--on-dark)}
.byline{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--on-dark-3)}

/* ---------- Secondary leads ---------- */
.leads{background:var(--paper);border-bottom:1px solid var(--border)}
.leads-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:52px 0}
.lead-card{padding:0 34px;border-left:1px solid var(--border)}
.lead-card:first-child{padding-left:0;border-left:0}
.lead-card .kicker{display:block;margin-bottom:12px;font-size:11.5px}
.lead-card h3{font-size:23px;line-height:1.14;margin-bottom:10px}
.lead-card p{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0}

/* ---------- By the numbers (dark) ---------- */
.section{padding:78px 0}
.section-dark{background:var(--charcoal);color:var(--on-dark)}
.section-dark2{background:var(--card-dark);color:var(--on-dark)}
.btn-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.btn-head h2{font-size:42px;line-height:1.05;margin-top:14px}
.btn-head .disc{font-size:14px;color:var(--on-dark-3);max-width:320px;margin:0;line-height:1.5}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.09)}
.stat-cell{background:var(--card-dark);padding:30px 26px 28px;display:flex;flex-direction:column;min-height:210px}
.stat-cell .tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--on-dark-3);margin-bottom:auto}
.stat-cell .big{font-family:var(--serif);font-weight:700;font-size:52px;line-height:1;color:var(--accent);margin:18px 0 12px}
.stat-cell .desc{font-size:13.5px;line-height:1.45;color:var(--on-dark-2)}

/* ---------- Price chart module ---------- */
.chart-mod{background:var(--paper);border-bottom:1px solid var(--border)}
.chart-grid{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:start}
.chart-side{position:sticky;top:130px}
.chart-side h2{font-size:38px;line-height:1.06;margin:14px 0 16px}
.chart-side p{font-size:15.5px;line-height:1.6;color:var(--muted-2)}
.series-tabs{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--border);padding-top:6px}
.series-tab{text-align:left;border:0;background:transparent;cursor:pointer;padding:14px 16px;border-radius:3px;display:flex;align-items:center;justify-content:space-between;font-family:var(--sans);color:#3A3D41;transition:background .12s}
.series-tab:hover{background:#EDE8DC}
.series-tab .nm{font-size:15px;font-weight:500}
.series-tab .un{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#A9ACB0}
.series-tab[aria-selected="true"]{background:var(--charcoal);color:var(--on-dark)}
.series-tab[aria-selected="true"] .nm{font-weight:600}
.series-tab[aria-selected="true"] .un{color:var(--accent)}
.chart-card{background:#fff;border:1px solid var(--border);border-radius:4px;padding:28px 28px 20px}
.chart-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.chart-card-head h3{font-size:22px;font-weight:600}
.chart-pill{font-family:var(--mono);font-size:11.5px;color:#8A8D91;letter-spacing:.04em}
.chart-foot{font-family:var(--mono);font-size:10.5px;color:#A9ACB0;letter-spacing:.05em;margin:14px 2px 2px;text-align:right}
svg .axis-label{font-family:var(--mono);font-size:11px;fill:#9A9DA1}

/* ---------- Section grid ---------- */
.sec-head{border-bottom:2px solid var(--charcoal);padding-bottom:16px;margin-bottom:40px;display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sec-head h2{font-size:34px}
.sec-head .mono{font-size:12.5px;letter-spacing:.1em;color:#8A8D91}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ecard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:4px;overflow:hidden;height:100%}
.ecard:hover{border-color:var(--accent)}
.ecard .thumb{aspect-ratio:16/10;background:#E7E2D6;overflow:hidden}
.ecard .thumb img{width:100%;height:100%;object-fit:cover}
.ecard .body{padding:22px 24px;display:flex;flex-direction:column;flex:1}
.ecard .kicker{font-size:11px;margin-bottom:12px}
.ecard h3{font-size:21px;line-height:1.14;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ecard p{font-size:14px;line-height:1.55;color:var(--muted);margin:0 0 18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ecard .more{margin-top:auto;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--charcoal);font-weight:600}

/* ---------- How it works ---------- */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:0}
.flow-center{text-align:center;margin-bottom:52px}
.flow-center h2{font-size:42px;margin:14px 0}
.flow-center p{font-size:16px;color:#B4B9BF;max-width:560px;margin:0 auto;line-height:1.55}
.flow-step{background:var(--charcoal);border:1px solid rgba(255,255,255,.09);border-top:2px solid var(--accent);border-radius:4px;padding:30px 26px;display:flex;flex-direction:column;min-height:280px}
.flow-step .num{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--accent)}
.flow-step .rule{height:1px;flex:1;background:rgba(255,255,255,.12)}
.flow-step .top{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.flow-step h3{font-size:26px;margin-bottom:4px}
.flow-step .sub{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--on-dark-3);margin-bottom:16px}
.flow-step p{font-size:14.5px;line-height:1.55;color:var(--on-dark-2);margin:0 0 18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.chip{font-size:12px;font-family:var(--mono);color:var(--on-dark-2);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);padding:5px 10px;border-radius:3px}
.flow-arrow{display:flex;align-items:center;justify-content:center;width:56px;color:var(--accent);font-size:24px}

/* ---------- Featured ---------- */
.feature-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center}
.feature-grid h2{font-size:44px;line-height:1.05;margin-bottom:18px;text-wrap:balance}
.feature-grid p{font-size:17px;line-height:1.6;color:var(--muted-2);margin-bottom:26px;max-width:520px}
.feature-media{position:relative;aspect-ratio:4/3;border-radius:4px;overflow:hidden;border:1px solid var(--border)}
.feature-media img{width:100%;height:100%;object-fit:cover}

/* ---------- Sponsors / supporters ---------- */
.supporters{background:var(--paper)}
.sup-head{margin-bottom:26px}
.sup-head h2{font-size:30px;margin-top:12px}
.sup-head p{font-size:15px;color:var(--muted);max-width:640px;margin:10px 0 0}
.sponsor-row{display:grid;gap:16px}
.sponsor-row.three{grid-template-columns:repeat(3,1fr)}
.sponsor-row.roll{grid-template-columns:repeat(4,1fr)}
.sponsor{display:flex;flex-direction:column;gap:10px;background:var(--card-dark);border:1px solid rgba(255,255,255,.08);border-radius:4px;padding:20px;min-height:104px;justify-content:center}
.sponsor:hover{border-color:var(--accent)}
.sponsor img{height:34px;width:auto;object-fit:contain;opacity:1;border-radius:2px}
.sponsor-blurb{font-size:13px;line-height:1.45;color:var(--on-dark-2)}
.sponsor-blurb:empty{display:none}
.sup-featured .sponsor{min-height:132px}
/* featured logos were 34px (too small next to the 46px roll) — operator: "these with text are very small" */
.sup-featured .sponsor img{height:48px}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink-dark);color:var(--on-dark-2);padding:60px 0 34px}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.09)}
.footer-brand p{font-size:14px;line-height:1.6;color:var(--on-dark-3);margin:16px 0 0;max-width:280px}
.footer-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--on-dark);font-weight:600;margin-bottom:14px}
.footer-col a{display:block;font-size:14px;color:var(--on-dark-3);padding:5px 0}
.footer-col a:hover{color:var(--accent)}
.footer-disc{font-size:12.5px;line-height:1.6;color:#71767C;margin:22px 0 0;max-width:780px}
.footer-mark{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#5C6167;margin-top:16px}

/* ============================================================
   ARTICLE PAGES
   ============================================================ */
.art-hero{background:var(--charcoal);color:var(--on-dark);padding:64px 0 52px}
.art-hero .eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.art-hero .eyebrow .div{width:28px;height:1px;background:rgba(255,255,255,.3)}
.art-hero .eyebrow .sub{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--on-dark-3)}
.art-hero h1{font-size:54px;line-height:1.04;margin-bottom:22px;text-wrap:balance;max-width:16ch}
.art-hero .dek{font-family:var(--serif);font-size:22px;line-height:1.5;color:#D6D3CB;margin-bottom:28px;max-width:44ch}
.art-hero .meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--on-dark-3);border-top:1px solid rgba(255,255,255,.1);padding-top:20px}
.art-hero .meta b{color:var(--on-dark);font-weight:500}
.art-lead-media{background:var(--charcoal)}
.art-lead-media .frame{aspect-ratio:21/9;overflow:hidden}
.art-lead-media img{width:100%;height:100%;object-fit:cover}
.art-lead-cap{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:#8A8D91;padding:10px 0 0}

.article-wrap{padding:56px 0 40px}
.article-body{display:grid;grid-template-columns:1fr min(74ch,100%) 1fr;padding-inline:24px;overflow-wrap:break-word}
.article-body > *{grid-column:2;min-width:0}
.article-body > .breakout{grid-column:1 / -1;width:min(1080px,100%);justify-self:center;margin-top:36px;margin-bottom:36px}
.article-body h2{font-size:30px;line-height:1.15;margin:46px 0 16px;display:flex;align-items:baseline;gap:14px}
.article-body h2 .sec-no{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--accent);flex:none}
.article-body h3{font-size:22px;margin:32px 0 12px}
.article-body p{font-size:18.5px;line-height:1.72;color:#2E3236}
.article-body > p:first-of-type.dropcap::first-letter,.dropcap::first-letter{
  float:left;font-family:var(--serif);font-weight:700;font-size:76px;line-height:.82;
  margin:8px 14px 0 0;color:var(--accent)}
.article-body a{color:#8a5a1e;text-decoration:underline;text-decoration-color:rgba(200,132,46,.4);text-underline-offset:2px}
.article-body a:hover{color:var(--accent)}
.note-ref{font-size:.62em;font-weight:600;vertical-align:super;line-height:0}
.note-ref a{color:var(--accent);text-decoration:none;padding:0 1px}

/* article aside rail */
.article-rail{position:sticky;top:110px;display:flex;flex-direction:column;gap:22px}
.rail-box{border:1px solid var(--border);border-radius:4px;padding:20px}
.rail-box h4{font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:var(--charcoal);font-weight:600;margin-bottom:14px}
.rail-box.dark{background:var(--charcoal);color:var(--on-dark);border:0}
.rail-box.dark h4{color:var(--accent)}
.rail-list a{display:block;padding:10px 0;border-top:1px solid var(--border);font-family:var(--serif);font-weight:600;font-size:16px;line-height:1.2}
.rail-box.dark .rail-list a{border-top-color:rgba(255,255,255,.12);color:var(--on-dark)}
.rail-list a .k{display:block;font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.1em;color:var(--accent);margin-bottom:4px}
.rail-list a:first-child{border-top:0}

/* ---------- Article components ---------- */
.lead{font-family:var(--serif);font-size:22px;line-height:1.5;color:var(--ink);margin:0 0 26px;font-weight:400}
.pullquote{margin:36px 0;padding:6px 0 6px 26px;border-left:3px solid var(--accent)}
.pullquote p{font-family:var(--serif);font-style:italic;font-weight:500;font-size:26px;line-height:1.35;color:var(--charcoal);margin:0;text-wrap:balance}
.blockquote{margin:32px 0;padding:6px 0 6px 26px;border-left:3px solid var(--border)}
.blockquote p{font-family:var(--serif);font-size:21px;line-height:1.45;color:#2E3236;margin:0 0 8px}
.blockquote cite{font-family:var(--mono);font-size:12.5px;font-style:normal;letter-spacing:.04em;color:var(--muted)}
.callout{margin:32px 0;background:#EFE9DC;border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:4px;padding:22px 24px}
.callout p{margin:0;font-size:17px;line-height:1.55;color:#2E3236}
.callout .callout-tag{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--accent);font-weight:600;margin-bottom:8px}
.note{font-size:15.5px;line-height:1.55;color:var(--muted-2);background:#EFEADE;border-radius:4px;padding:14px 18px;margin:24px 0}
.note::before{content:"NOTE — ";font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--accent);font-weight:600}

/* versus / datatable */
.versus,.datatable{width:100%;border-collapse:collapse;margin:30px 0;font-size:15.5px}
.versus caption,.datatable caption{font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:var(--muted);text-transform:uppercase;text-align:left;margin-bottom:12px}
.versus th,.versus td,.datatable th,.datatable td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top;line-height:1.4}
.versus thead th,.datatable thead th{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--charcoal);background:#EFE9DC}
.versus tbody th{font-weight:600;font-family:var(--sans);width:26%;color:var(--charcoal)}
.datatable tbody tr:nth-child(even){background:#FBF9F4}
.datatable td.num{font-family:var(--mono);text-align:right;white-space:nowrap}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tablewrap table{margin:24px 0;min-width:460px}

/* statblocks */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:4px;overflow:hidden;margin:30px 0}
.statblock{background:#fff;padding:22px 20px;display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--serif);font-weight:700;font-size:38px;line-height:1;color:var(--accent)}
.stat-label{font-size:13px;line-height:1.4;color:var(--muted)}

/* timeline */
.timeline{list-style:none;margin:30px 0;padding:0;border-left:2px solid var(--border)}
.timeline li{position:relative;padding:0 0 22px 26px}
.timeline li::before{content:"";position:absolute;left:-7px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid var(--paper)}
.timeline .t-when{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--accent);font-weight:600;margin-bottom:4px;text-transform:uppercase}
.timeline .t-what{display:block;font-size:16px;line-height:1.5;color:#2E3236}

/* inline SVG charts */
.chart{margin:32px 0}
.chart svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--border);border-radius:4px}
.chart figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--muted);margin-top:10px}

/* figures / gallery */
.article-figure{margin:34px 0}
.article-figure img{width:100%;border-radius:4px;border:1px solid var(--border)}
.article-figure figcaption,.map-figure figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--muted);margin-top:10px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:34px 0}
.gallery figure{margin:0}
.gallery img{border-radius:4px;border:1px solid var(--border);aspect-ratio:4/3;object-fit:cover;width:100%}
.map-figure{margin:34px 0}
.map-slot{aspect-ratio:16/9;background:repeating-linear-gradient(45deg,#EDE8DC,#EDE8DC 10px,#F4F1EA 10px,#F4F1EA 20px);border:1px dashed #C9C2B2;border-radius:4px;display:flex;align-items:center;justify-content:center}
.map-slot::after{content:"LOCATOR MAP";font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#A79E88}

/* profile / org / entity cards */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:30px 0}
.profile-card{border:1px solid var(--border);border-radius:4px;padding:20px;background:#fff}
.profile-card .p-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;margin-bottom:12px}
.profile-card h3{font-size:19px;margin-bottom:2px}
.profile-card .p-role{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--accent);margin:0 0 10px}
.profile-card p{font-size:14.5px;line-height:1.5;color:var(--muted);margin:0 0 10px}
.profile-card .p-links a{font-size:13px;color:var(--charcoal);text-decoration:underline;margin-right:10px}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:30px 0}
.org-card{display:flex;flex-direction:column;gap:4px;border:1px solid var(--border);border-radius:4px;padding:16px 18px;background:#fff}
.org-card:hover{border-color:var(--accent)}
.org-name{font-family:var(--serif);font-weight:600;font-size:17px;color:var(--ink)}
.org-host{font-family:var(--mono);font-size:12px;color:var(--muted);line-height:1.4}
.entity-ref{color:#8a5a1e;text-decoration:underline;text-underline-offset:2px}

/* endnotes */
.endnotes{margin:44px 0 0;padding:24px 0 0;border-top:1px solid var(--border);counter-reset:none;list-style:decimal;padding-left:22px}
.endnotes li{font-size:15px;line-height:1.55;color:var(--muted-2);margin-bottom:12px;padding-left:6px}
.endnotes li::marker{font-family:var(--mono);color:var(--accent);font-weight:600}

/* related / further */
.related{margin:44px 0 0;padding-top:28px;border-top:2px solid var(--charcoal)}
.related h4,.further-grid + *{font-family:var(--serif)}
.related > .kicker{margin-bottom:16px;display:block}
.related h4{font-size:24px;margin-bottom:16px}
.related-links,.further-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.related-links li a,.further-grid a{display:block;border:1px solid var(--border);border-radius:4px;padding:18px 20px;height:100%}
.related-links li a:hover,.further-grid a:hover{border-color:var(--accent)}
.related-links .k,.further-grid .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--accent);margin-bottom:6px}
.related-links .t,.further-grid .t{font-family:var(--serif);font-weight:600;font-size:18px;line-height:1.2;color:var(--ink)}

/* ---------- Category / hub / simple pages ---------- */
.page-hero{background:var(--charcoal);color:var(--on-dark);padding:70px 0}
.page-hero .kicker{margin-bottom:14px;display:block}
.page-hero h1{font-size:48px;line-height:1.05;margin-bottom:16px;max-width:18ch}
.page-hero p{font-size:19px;line-height:1.55;color:var(--on-dark-2);max-width:60ch;margin:0}
.cat-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.cat-list li{border-bottom:1px solid var(--border)}
.cat-list li a{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding:26px 4px}
.cat-list li a:hover{background:#EFE9DC}
.cat-list .cno{font-family:var(--mono);font-size:13px;color:var(--accent);font-weight:600}
.cat-list .ctitle{font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.15;color:var(--ink)}
.cat-list .cbrief{font-size:15px;color:var(--muted);margin-top:6px;line-height:1.5}
.cat-list .cmeta{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.hub-card{border:1px solid var(--border);border-radius:4px;padding:28px;background:#fff;display:flex;flex-direction:column;height:100%}
.hub-card:hover{border-color:var(--accent)}
.hub-card .kicker{font-size:11px;margin-bottom:12px}
.hub-card h3{font-size:24px;margin-bottom:10px}
.hub-card p{font-size:15px;color:var(--muted);line-height:1.5;margin:0 0 16px}
.hub-card ul{list-style:none;margin:auto 0 0;padding:0}
.hub-card ul li a{display:block;padding:7px 0;font-size:14.5px;border-top:1px solid var(--border);color:#2E3236}
.hub-card ul li a:hover{color:var(--accent)}

.prose{max-width:70ch;padding-inline:0}
.prose h2{font-size:28px;margin:38px 0 14px}
.prose p{font-size:18px;line-height:1.7;color:#2E3236}
.prose a{color:#8a5a1e;text-decoration:underline}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:26px 0}
.contact-card{border:1px solid var(--border);border-radius:4px;padding:22px;background:#fff;display:flex;flex-direction:column;gap:8px}
.contact-card .ic{width:26px;height:26px;color:var(--accent)}
.contact-card h3{font-size:18px}
.contact-card p{font-size:14.5px;color:var(--muted);margin:0;line-height:1.5}

/* 404 */
.err-wrap{min-height:56vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 28px}
.err-wrap .code{font-family:var(--mono);font-size:15px;letter-spacing:.3em;color:var(--accent);font-weight:600}
.err-wrap h1{font-size:54px;margin:16px 0 12px}
.err-wrap p{font-size:18px;color:var(--muted);max-width:44ch;margin:0 0 28px}

/* styleguide */
.sg-block{padding:36px 0;border-bottom:1px solid var(--border)}
.sg-block > .kicker{display:block;margin-bottom:6px}
.sg-block > h2{font-size:26px;margin-bottom:22px}
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.sw{border:1px solid var(--border);border-radius:4px;overflow:hidden;font-family:var(--mono);font-size:11px}
.sw .chip{height:64px}
.sw .lab{padding:8px 10px;background:#fff;color:var(--ink)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  body{font-size:17px}
  .nav-toggle-label{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid rgba(255,255,255,.22);border-radius:3px;color:var(--on-dark);cursor:pointer}
  .nav-toggle-label svg{width:22px;height:22px}
  .nav{position:absolute;left:0;right:0;top:74px;height:auto;max-height:78vh;overflow:auto;flex-direction:column;gap:0;
    background:var(--charcoal);border-top:1px solid rgba(255,255,255,.08);display:none;padding:6px 0 14px}
  .nav-toggle:checked ~ .nav{display:flex}
  .nav > li{display:block;position:static;border-bottom:1px solid rgba(255,255,255,.07)}
  .nav-top{height:auto;justify-content:space-between}
  .nav-top > a,.nav > li > a{height:auto;padding:15px 28px;font-size:15.5px;font-weight:600;border-bottom:0;flex:1}
  .subcaret{display:flex;align-items:center;justify-content:center;width:52px;align-self:stretch;color:var(--accent);cursor:pointer}
  .subcaret::before{content:"+";font-family:var(--mono);font-size:20px}
  .subtoggle:checked ~ .nav-top .subcaret::before{content:"–"}
  .nav-sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-top:0;
    min-width:0;padding:0 28px 12px;background:transparent;display:none}
  .subtoggle:checked ~ .nav-sub{display:block}
  .nav-sub a{padding:9px 0;color:var(--on-dark-2)}
  .has-sub::after{display:none}
  .cta-btn{margin:10px 28px 4px;justify-content:center}

  .hero-media{height:520px}
  .hero h1{font-size:44px}
  .stat-grid{grid-template-columns:1fr 1fr}
  .chart-grid{grid-template-columns:1fr;gap:32px}
  .chart-side{position:static}
  .card-grid{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr}
  .flow-arrow{display:none}
  .feature-grid{grid-template-columns:1fr;gap:30px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .article-layout{grid-template-columns:1fr;gap:40px}
  .article-rail{position:static;flex-direction:row;flex-wrap:wrap}
  .article-rail .rail-box{flex:1 1 260px}
  .sponsor-row.roll{grid-template-columns:repeat(3,1fr)}
  .art-hero h1{font-size:42px}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .hero-media{height:460px}
  .hero-content{padding-bottom:44px}
  .hero h1{font-size:33px}
  .hero-dek{font-size:17px}
  .leads-grid{grid-template-columns:1fr;padding:36px 0;gap:26px}
  .lead-card{padding:22px 0 0;border-left:0;border-top:1px solid var(--border)}
  .lead-card:first-child{border-top:0;padding-top:0}
  .stat-grid{grid-template-columns:1fr}
  .card-grid{grid-template-columns:1fr}
  .btn-head h2,.flow-center h2,.feature-grid h2{font-size:30px}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .sponsor-row.three,.sponsor-row.roll{grid-template-columns:1fr 1fr}
  .art-hero h1{font-size:32px}
  .art-hero .dek{font-size:18px}
  .article-body p{font-size:17px}
  .article-body h2{font-size:25px}
  .article-body > p:first-of-type.dropcap::first-letter,.dropcap::first-letter{font-size:60px}
  .article-rail{flex-direction:column}
  .cat-list li a{grid-template-columns:auto 1fr;gap:14px}
  .cat-list .cmeta{grid-column:2;text-align:left}
  .pullquote p{font-size:22px}
}

/* 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-roll-fill: roll tiles were too tall for their logos (27px logo in 104px tile = dead space).
   Tighten roll tile height and let logos fill by HEIGHT (not width-stretch), uniform rows. */
.sponsor-row.roll{grid-auto-rows:1fr}
.sponsor-row.roll .sponsor{min-height:82px;padding:14px 16px}
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{height:42px;max-width:158px}

/* sp-blurb-link: money-link anchors in blurbs must inherit blurb colour (readable on dark OR light) */
.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.three.sup-featured .sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}
.sponsor-row.three.sup-featured .sponsor.sponsor img{height:48px!important;display:block!important;width:100%!important}
.sponsor-row.roll .sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}
.sponsor-row.roll .sponsor.sponsor img{height:42px!important;display:block!important;width:100%!important}

/* op-roll-centre: operator: the two bottom rows need centring. The roll tier's mark was
   width:auto at 158px inside a 235px anchor and sat flush left, and the tile's text was flush
   left under it. The mark takes the anchor's width (so object-fit centres the artwork) and the
   tile is centred with it. The featured row above already fills its plate and is left alone. */
.sponsor-row.roll .sponsor{text-align:center}
/* ⚠️ width:100%!important was ALREADY set for these marks (sp-mark-frame, above) and did
   nothing: an earlier roll block caps them at max-width:158px, and max-width beats width
   whatever the !important says. Release the cap — that is the whole fix. */
.sponsor-row.roll .sponsor.sponsor img{max-width:none!important;object-position:center center!important}

/* op-footer-compact: the footer printed 21 rows for 21 link(s) in
   4 list(s) — 1024px 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, and the group holder takes two columns,
   measured 1024 -> 717px (30% 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(1.11vw,16px)!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:20px}
}

/* op-blurb-rows: money blurbs ran to 6 rows at 390, 1176px of tier across
   11 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.three.sup-featured .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:57px!important;min-height:0!important;overflow:hidden!important}
  .sponsor-row.roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:57px!important;min-height:0!important;overflow:hidden!important}
}

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

/* op-article-width: the article column was capped at 799px (97 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through grid track 2 of "1fr min(74ch, 100%) 1fr" (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{grid-template-columns:1fr min(842px, 100%) 1fr!important}
}
@media (min-width:1600px){
  div.article-body{grid-template-columns:1fr min(clamp(842px, 58.472vw, 1010px), 100%) 1fr!important}
  div.article-body > :is(p.dropcap, p:not([class])){font-size:clamp(18.5px,1.2847vw,22.2px)!important}
}
/* op-article-width:end */

/* op-hover-pad */
.cat-list li a{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
/* op-heading-levels */
.contact-card h2:where(.rt-h3){font-size: 18px;}
h3.rt-h4{font-family: var(--serif); font-weight: 700; letter-spacing: -0.015em; line-height: 1.08; margin: 0px;}
h3:where(.rt-h4){font-family: var(--serif); font-weight: 700; letter-spacing: -0.015em; line-height: 1.08; margin: 0px;}
h2:where(.rt-h3){font-family: var(--serif); font-weight: 700; letter-spacing: -0.015em; line-height: 1.08; margin: 0px;}
.lead-card h2:where(.rt-h3){font-size: 23px; line-height: 1.14; margin-bottom: 10px;}
.chart-card-head h2:where(.rt-h3){font-size: 22px; font-weight: 600;}
.ecard h2:where(.rt-h3){font-size: 21px; line-height: 1.14; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.flow-step h2:where(.rt-h3){font-size: 26px; margin-bottom: 4px;}
.footer-col h3.rt-h4{font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--on-dark); font-weight: 600; margin-bottom: 14px;}
.footer-col h3:where(.rt-h4){font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--on-dark); font-weight: 600; margin-bottom: 14px;}
.related h3.rt-h4{font-family: var(--serif);}
.related h3:where(.rt-h4){font-family: var(--serif);}
.related h3.rt-h4{font-size: 24px; margin-bottom: 16px;}
.related h3:where(.rt-h4){font-size: 24px; margin-bottom: 16px;}
.hub-card h2:where(.rt-h3){font-size: 24px; margin-bottom: 10px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.ecard > div.thumb > img,
  div.feature-grid > div.feature-media > img,
  div.wrap > div.frame > img,
  section.hero > div.hero-media > img){height:auto}
/* op-img-dims:end */