/* Equity Insider — site stylesheet.
   Distinct from ANG and USANG by design (Chris, 2026-08-09): slate/charcoal + market green,
   "trading terminal / insider intelligence". Dark instrument block (tape + masthead) over a
   light editorial page; the lead story is a dark briefing panel, not a photo overlay.
   Saira display / Spectral body / JetBrains Mono data — no typeface shared with ANG
   (Archivo/Source Serif 4/IBM Plex Mono) or USANG (Libre Franklin/Newsreader/Spline Sans Mono).
   Same 1400px wrap + 408px rail as the family. */
:root{
  --ink:#1F2530; --panel:#12161F; --panel2:#1B222E; --hair:#27303E;
  --paper:#F6F7F9; --card:#fff; --rule:#DEE2E8; --mut:#5C6470; --wash:#EDEFF2;
  --green:#0B8A58; --green-hi:#2BD98A; --down:#D14343; --down-hi:#FF7B7B;
  --block:#C6CBD2;
  --disp:'Saira',system-ui,sans-serif;
  --body:'Spectral',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --wrap:1400px; --gut:24px;
}
*{box-sizing:border-box}
/* .fullbleed uses 50vw, and vw includes the scrollbar on desktop - clip the sliver so a
   classic-scrollbar browser never gets a horizontal scroll. clip != hidden: no scroll container. */
html{overflow-x:clip}
body{overflow-x:clip;margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.58;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px;top:0;background:var(--panel);color:#fff;
  padding:10px 16px;z-index:99;font-family:var(--disp)}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ---------- instrument block: tape + masthead on deep slate ---------- */
.tape{background:var(--panel);color:#fff;border-bottom:1px solid var(--hair)}
.tape__in{display:flex;align-items:center;overflow-x:auto;scrollbar-width:none}
.tape__in::-webkit-scrollbar{display:none}
.tape__lbl{font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.22em;
  color:var(--green-hi);padding:8px 16px 8px 0;border-right:1px solid var(--hair);flex:0 0 auto}
.tq{display:flex;align-items:baseline;gap:8px;font-family:var(--mono);font-size:12px;
  padding:8px 16px;border-right:1px solid var(--hair);white-space:nowrap;flex:0 0 auto}
.tq__sym{font-weight:600;font-size:11px;letter-spacing:.06em;color:#8E99A9}
.tq__val{color:#E8ECF1}
.tq__chg{font-size:11px}
.tq--up .tq__chg{color:var(--green-hi)}
.tq--dn .tq__chg{color:var(--down-hi)}

.masthead{background:var(--panel);color:#fff}
.masthead__in{display:flex;align-items:center;gap:26px;padding-top:12px;padding-bottom:12px}
.logo{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.mark{display:grid;place-items:center;width:32px;height:32px;background:var(--block);
  color:var(--panel);font-family:var(--disp);font-weight:800;font-size:19px;
  letter-spacing:-.02em;padding-bottom:2px;flex:0 0 auto}
.wordmark{font-family:var(--disp);font-stretch:115%;font-weight:700;font-size:17.5px;
  letter-spacing:.32em;text-transform:uppercase;color:#fff;white-space:nowrap}
.mnav{display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}
.mnav::-webkit-scrollbar{display:none}
.mnav a{font-family:var(--disp);font-weight:600;font-size:13.5px;padding:7px 11px;
  color:#C4CBD6;white-space:nowrap}
.mnav a:hover{color:var(--green-hi)}
.mnav a[aria-current]{color:var(--green-hi)}
.msearch{display:flex;align-items:center;gap:7px;background:var(--panel2);
  border:1px solid var(--hair);padding:6px 11px;flex:0 0 auto}
.msearch input{background:none;border:0;color:#E8ECF1;font-family:var(--mono);
  font-size:12px;width:120px;outline:none}
.msearch input::placeholder{color:#6B7686}
/* signature: green tick rule under the masthead */
.striperule{height:2px;background:linear-gradient(90deg,var(--green) 0 220px,var(--hair) 220px)}

/* ---------- shared bits ---------- */
.stripes{height:2px;background:linear-gradient(90deg,var(--green) 0 46px,var(--rule) 46px)}
.sect{display:flex;align-items:center;gap:16px;margin:0 0 22px}
.sect h2,.sect h1{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:.02em;
  text-transform:uppercase;margin:0;color:var(--ink)}
.sect a:hover{color:var(--green)}
.sect .stripes{flex:1}
.shead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  border-top:2px solid var(--ink);padding-top:12px;margin:0 0 18px}
.shead h1,.shead h2{font-family:var(--disp);font-weight:800;font-size:19px;
  text-transform:uppercase;letter-spacing:.02em;margin:0;color:var(--ink)}
.shead a{font-family:var(--disp);font-weight:600;font-size:13px;color:var(--green)}
.shead a:hover{text-decoration:underline}
.hub-h1{font-size:26px !important;text-transform:none !important}
.eyebrow,.kick{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--green);display:inline-block}
.eyebrow--mut{color:var(--mut)}
.stamp{font-family:var(--mono);font-size:11px;color:var(--mut)}
.meta{display:flex;gap:10px;align-items:center;font-family:var(--mono);font-size:11px;color:var(--mut)}
.meta__by{color:var(--ink)}
.chip{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#8A6D1B;background:#F5ECD4;padding:2px 6px}
.ph{background:#E7EAEE;overflow:hidden}
.ph img{width:100%;height:auto}
/* title-card artwork (consumer-guide §4): headline is baked in — never crop, never overlay.
   THE CONTAINER takes the card's OWN 1200/630 ratio, never the photo thumb's (USANG's 230x153
   box holding a 1.905 image cropped 21% of the width and printed "RGY METAL NEWS"). Every
   listing context sets its own aspect on a HIGHER-SPECIFICITY selector — `.list__i .ph`
   (0,2,0), `.rel__i .ph` (0,2,0), the mobile `.list__i .ph` 4/3 override, and `.card__ph`
   which is declared LATER in this file — so a bare `.ph--tc` (0,1,0) loses in all of them.
   Each context is therefore named explicitly and forced. contain + the card's #0d1526
   background hue: identical to cover at the matched ratio, and still safe if an off-ratio
   card ever ships. Hero is not a case here — wire is barred from it by the hero rule. */
.ph--tc,
.card__ph--tc,
.list__i .ph--tc,
.rel__i .ph--tc,
.art__fig .ph--tc,
.band--wash .card__ph--tc{aspect-ratio:1200/630 !important;background:#0d1526 !important}
.ph--tc img,
.card__ph--tc img,
.list__i .ph--tc img,
.rel__i .ph--tc img,
.band--wash .card__ph--tc img{object-fit:contain !important;width:100%;height:100%;aspect-ratio:auto}
/* The card hover zoom scales the image 2.5% inside a clipped box — on a title card that
   shaves the baked-in headline. Title cards do not zoom. */
.card__ph--tc:hover img,.card__ph--tc img{transform:none !important}
/* Article lead: .art__fig .ph img is height:auto, so the img carries the ratio itself. */
.art__fig--tc .ph--tc{background:#0d1526}
.art__fig--tc .ph--tc img{object-fit:contain;aspect-ratio:1200/630;width:100%;height:auto}
.hl{font-family:var(--disp);font-weight:700;line-height:1.25;letter-spacing:-.008em;margin:0}
.hl a:hover,.list__t a:hover,.card__h a:hover{color:var(--green)}
.colhead{font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green);margin:0 0 14px}

/* ---------- page grid (article + listing pages): content | 408px rail ---------- */
.page{display:grid;grid-template-columns:minmax(0,1fr) 408px;gap:38px;padding:26px 0 40px}
.page__main{min-width:0}

/* ---------- homepage: briefing panel (signature) ---------- */
.top{display:grid;grid-template-columns:minmax(0,1fr) 408px;gap:38px;padding:26px 0 34px;
  border-bottom:1px solid var(--rule)}
.brief{display:grid;grid-template-columns:minmax(0,1fr) 46%;background:var(--panel);color:#fff;
  overflow:hidden;min-height:400px}
.brief__txt{padding:34px 36px 28px;display:flex;flex-direction:column}
.brief .kick{color:var(--green-hi)}
.brief h1{font-family:var(--disp);font-weight:800;font-size:clamp(28px,2.7vw,39px);
  line-height:1.1;letter-spacing:-.012em;margin:10px 0 0;color:#fff;text-wrap:balance;
  overflow-wrap:break-word}
.brief:hover h1{text-decoration:underline;text-decoration-thickness:3px;
  text-decoration-color:var(--green-hi);text-underline-offset:6px}
.brief__sum{font-size:16.5px;line-height:1.5;color:#A9B2C0;margin:14px 0 0;max-width:56ch}
.brief .meta{margin-top:auto;padding-top:18px}
.brief .meta,.brief .meta .meta__by{color:#8E99A9}
.brief__ph{position:relative;min-height:100%}
.brief__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.brief__ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--panel) 0,rgba(18,22,31,0) 18%)}
.subhero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:28px}

/* cards */
.card__ph{background:#E7EAEE;overflow:hidden;display:block;
  aspect-ratio:16/10;margin-bottom:11px}
.card__ph img{width:100%;height:100%;object-fit:cover}
.card__h{font-family:var(--disp);font-weight:700;font-size:17.5px;line-height:1.28;
  margin:4px 0 0;letter-spacing:-.005em;overflow-wrap:break-word}
.card .meta{margin-top:7px}
@media (prefers-reduced-motion: no-preference){
  .card__ph img{transition:transform .45s ease}
  .card__ph:hover img{transform:scale(1.025)}
}

/* bands */
.band{padding:34px 0 8px}
.band--intop{padding:36px 0 0}
.band--wash{background:var(--wash);padding-bottom:34px;margin-top:26px}
/* full-bleed band living inside .wrap: stretch to the viewport, re-center the content */
.fullbleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.wrap-inner{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.band--wash .card__ph{background:#fff}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;row-gap:34px}
.pf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 60px;list-style:none;margin:0;padding:0}
.pf li{padding:13px 0;border-bottom:1px solid var(--rule)}
.pf .row__t{font-size:16.5px}
.row__t{font-family:var(--disp);font-weight:600;font-size:15px;line-height:1.35;display:block;
  overflow-wrap:break-word}
.pf a:hover .row__t,.latest-rail a:hover .row__t,.mr a:hover .row__t{color:var(--green)}
.mr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 40px;list-style:none;
  margin:0;padding:0;counter-reset:mr}
.mr li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--rule);counter-increment:mr}
.mr li::before{content:counter(mr,decimal-leading-zero);font-family:var(--mono);font-weight:600;
  font-size:20px;color:var(--green);opacity:.65;line-height:1.3;min-width:34px}

/* ---------- rail ---------- */
.rail>*+*{margin-top:26px}
.mkt__panel{background:var(--panel);padding:10px 8px 4px}
.tv-copy,.tradingview-widget-copyright{font-family:var(--mono);font-size:10px;
  color:#6B7686;padding:6px 8px 8px}
.tv-copy a,.tradingview-widget-copyright a{color:#6B7686}
.tv-copy a:hover,.tradingview-widget-copyright a:hover{color:var(--green-hi)}
.panel--dark{background:var(--panel);overflow:hidden;padding:6px}
.panel--dark iframe{display:block;width:100%;border:0}
/* Trending — Eagle Eye data rendered natively on the dark panel */
.trend{background:var(--panel);color:#fff;padding:16px 18px 10px}
.trend__head{display:flex;align-items:center;justify-content:space-between;margin:0 0 4px}
.trend__brand{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.02em;
  text-transform:uppercase;color:#fff}
.trend__live{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;color:var(--green-hi)}
.trend__live i{width:7px;height:7px;border-radius:50%;background:var(--green-hi)}
@media (prefers-reduced-motion: no-preference){
  .trend__live i{animation:eepulse 2s infinite}
  @keyframes eepulse{0%,100%{opacity:1}50%{opacity:.35}}
}
.trend ol{list-style:none;margin:6px 0 0;padding:0}
.trend li{display:grid;grid-template-columns:16px 56px minmax(0,1fr) auto auto;gap:10px;
  align-items:baseline;padding:9px 0;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:12px}
.trend .n{color:#57627A;font-size:11px}
.trend .sym{font-weight:600;letter-spacing:.04em;color:#fff}
.trend .co{color:#8E99A9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.trend .ment{color:#8E99A9;font-size:11px;text-align:right;min-width:28px}
.trend .s-bull{color:var(--green-hi);font-weight:600;font-size:11px}
.trend .s-bear{color:var(--down-hi);font-weight:600;font-size:11px}
.trend .s-neut{color:#C4CBD6;font-weight:600;font-size:11px}
.trend__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid var(--hair);margin-top:2px;padding:10px 0 4px;
  font-family:var(--mono);font-size:10px;color:#6B7686}
.trend__foot a{color:var(--green-hi);font-weight:600}
.trend__foot a:hover{text-decoration:underline}
.trend__disc{font-family:var(--mono);font-size:9px;color:#57627A;padding:4px 0 2px}
.tick{background:var(--panel);padding:8px 6px 2px}
.tick .tv-copy,.tick .tv-copy a{color:#6B7686}
.latest-rail ul{list-style:none;margin:0;padding:0}
.latest-rail li{padding:11px 0;border-bottom:1px solid var(--rule)}
.latest-rail li:last-child{border-bottom:0}
.latest-rail .meta{margin-top:5px}
.sub{background:#fff;border:1px solid var(--rule);border-top:2px solid var(--green);padding:20px}
.sub h3{font-family:var(--disp);font-weight:700;font-size:16px;margin:0 0 6px;color:var(--ink)}
.sub p{font-size:14.5px;color:var(--mut);margin:0 0 12px;line-height:1.45}
.sub__f{display:flex;flex-direction:column;gap:8px;position:relative}
.sub__f button{align-self:flex-start}
.sub__f .stamp{position:absolute;left:-9999px}
.sub input{flex:1;border:1px solid var(--rule);padding:9px 12px;
  font-family:var(--disp);font-size:16px;background:#fff;min-width:0}
/* 44px minimum tap target (house standard) — measured 39px before the padding bump. */
.sub button{font-family:var(--disp);font-weight:700;font-size:13.5px;color:#fff;
  background:var(--green);border:0;padding:12px 18px;min-height:44px;cursor:pointer}
.sub button:hover{background:var(--ink)}
.sub small{display:block;margin-top:8px;font-family:var(--mono);font-size:10.5px;color:var(--mut)}

/* Signup result dialog — keeps the reader on the site instead of Mailchimp's own page. */
.mcm{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;
  background:rgba(10,13,20,.62)}
.mcm[hidden]{display:none}
.mcm__box{position:relative;background:#fff;max-width:420px;width:100%;padding:30px 30px 26px;
  border-top:3px solid var(--green);box-shadow:0 18px 50px rgba(10,13,20,.35)}
.mcm[data-state="err"] .mcm__box{border-top-color:var(--down)}
.mcm[data-state="wait"] .mcm__box{border-top-color:var(--mut)}
.mcm__t{font-family:var(--disp);font-weight:700;font-size:19px;margin:0 0 8px;color:var(--ink)}
.mcm__msg{font-size:15.5px;line-height:1.5;color:var(--mut);margin:0}
.mcm__x{position:absolute;top:4px;right:4px;width:44px;height:44px;border:0;background:none;
  font-family:var(--disp);font-size:24px;line-height:1;color:var(--mut);cursor:pointer}
.mcm__x:hover{color:var(--ink)}
@media (prefers-reduced-motion: no-preference){
  .mcm__box{animation:mcmin .18s ease-out}
  @keyframes mcmin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
.readnums{list-style:none;margin:0;padding:0;counter-reset:rn}
.readnums li{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--rule);counter-increment:rn}
.readnums li:last-child{border-bottom:0}
.readnums li::before{content:counter(rn,decimal-leading-zero);font-family:var(--mono);font-weight:600;
  font-size:18px;color:var(--green);opacity:.65;line-height:1.4;min-width:28px}
.readnums h3{font-family:var(--disp);font-weight:600;font-size:15px;line-height:1.35;margin:0}
.readnums a:hover{color:var(--green)}

/* ---------- lists (category / topic / archive / search) ---------- */
.latest ol,.latest ul{list-style:none;margin:0;padding:0}
.list__i{display:grid;grid-template-columns:230px minmax(0,1fr);gap:18px;padding:16px 0;
  border-bottom:1px solid var(--rule);align-items:start}
.list__i .ph{aspect-ratio:230/153}
.list__i .ph img{width:100%;height:100%;object-fit:cover}
.list__m{display:flex;gap:12px;align-items:baseline;margin:0 0 6px;font-family:var(--mono);font-size:11px}
.list__m::after{content:"";flex:1;height:1px;background:var(--rule);min-width:12px}
.list__when{color:var(--mut)}
.list__cat{color:var(--green);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:10.5px}
.list__t{font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.3;margin:0;
  letter-spacing:-.005em;overflow-wrap:break-word}
.s-snip{font-size:15px;color:#414B59;margin:7px 0 0;line-height:1.5}
.pager{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 0;font-family:var(--disp);font-weight:600;font-size:14px}
.pager a{color:var(--green)}
.pager a:hover{text-decoration:underline}
.pager span{color:var(--mut)}
.yearlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.yearlist a{display:flex;flex-direction:column;gap:4px;border:1px solid var(--rule);
  background:#fff;padding:16px 18px}
.yearlist a:hover{border-color:var(--green)}
.yearlist__y{font-family:var(--disp);font-weight:700;font-size:18px;color:var(--ink)}
.yearlist__n{font-family:var(--mono);font-size:11px;color:var(--mut)}
.bigsearch{display:flex;gap:10px;margin:6px 0 0}
.bigsearch input{flex:1;border:1px solid var(--rule);padding:12px 16px;
  font-family:var(--disp);font-size:16px;min-width:0}
.bigsearch button{font-family:var(--disp);font-weight:700;font-size:15px;color:#fff;
  background:var(--green);border:0;padding:12px 22px;cursor:pointer}
.bigsearch button:hover{background:var(--ink)}

/* ---------- article ---------- */
.crumb{font-family:var(--mono);font-size:11px;color:var(--mut);margin:0 0 14px}
.crumb a:hover{color:var(--green)}
.crumb span{color:var(--rule)}
.art__head{margin:0 0 20px}
.art__h1{font-family:var(--disp);font-weight:800;font-size:clamp(28px,2.9vw,40px);
  line-height:1.12;letter-spacing:-.012em;margin:8px 0 0;max-width:26ch;overflow-wrap:break-word}
.art__standfirst{font-size:19.5px;line-height:1.5;color:#414B59;margin:14px 0 0;
  max-width:62ch;font-weight:500}
.art__meta{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;font-family:var(--mono);
  font-size:11.5px;color:var(--mut);margin:16px 0 0;padding-bottom:18px;border-bottom:2px solid var(--ink)}
.art__by{color:var(--ink);font-weight:600}
.art__fig{margin:22px 0 0}
.art__fig .ph img{width:100%;height:auto}
.art__fig figcaption{font-family:var(--mono);font-size:10.5px;color:var(--mut);
  padding:8px 2px 0;border-top:1px solid var(--rule);margin-top:8px}
.archive-note{font-family:var(--mono);font-size:12px;color:var(--mut);background:var(--wash);
  border-left:3px solid var(--green);padding:12px 16px;margin:22px 0 0}
.spon-note{font-family:var(--mono);font-size:12px;color:#8A6D1B;background:#F5ECD4;
  border-left:3px solid #C9A227;padding:12px 16px;margin:22px 0 0}
.prose{font-size:18px;line-height:1.72;max-width:68ch;color:#242B36;margin-top:22px}
.prose p{margin:0 0 1.15em}
.prose h2{font-family:var(--disp);font-weight:700;font-size:23px;line-height:1.25;
  margin:1.6em 0 .5em;letter-spacing:-.008em;max-width:none}
.prose h3{font-family:var(--disp);font-weight:600;font-size:19px;line-height:1.3;margin:1.5em 0 .5em}
.prose a{color:var(--green);text-decoration:underline;text-decoration-color:#B7DFCB;text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--green)}
.prose img{margin:1.4em 0;height:auto}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.15em}
.prose li{margin:0 0 .45em}
.prose blockquote{border-left:3px solid var(--green);margin:1.4em 0;padding:2px 0 2px 18px;
  color:#414B59;font-style:italic}
.prose .image-credit{font-family:var(--mono);font-style:normal;font-size:10.5px;color:var(--mut);
  border-top:1px solid var(--rule);padding-top:8px}
.prose .article-abstract{font-size:17px;color:#414B59;background:var(--wash);
  padding:16px 20px}
.prose--plain{margin-top:6px;font-size:17px}
.pull{border-top:2px solid var(--green);border-bottom:1px solid var(--rule);margin:1.8em 0;padding:18px 0}
.pull p{font-family:var(--disp);font-weight:700;font-size:22px;line-height:1.35;margin:0;
  letter-spacing:-.008em;color:var(--ink)}
.keynums{background:var(--wash);padding:18px 22px;margin:1.4em 0}
.keynums dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.keynums dd{font-family:var(--disp);font-weight:700;font-size:22px;margin:2px 0 12px;color:var(--ink)}
.art__foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:26px 0 0;
  padding-top:16px;border-top:1px solid var(--rule)}
.tag{font-family:var(--disp);font-weight:600;font-size:12.5px;background:var(--wash);
  padding:6px 14px;color:var(--ink)}
.tag:hover{background:var(--green);color:#fff}
.rel{margin-top:38px}
.rel__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.rel__i .ph{aspect-ratio:16/10;margin-bottom:10px}
.rel__i .ph img{width:100%;height:100%;object-fit:cover}
.rel__i h3{font-family:var(--disp);font-weight:600;font-size:15.5px;line-height:1.32;margin:6px 0 0;
  overflow-wrap:break-word}
.rel__i h3 a:hover{color:var(--green)}

/* ---------- footer ---------- */
.foot{background:var(--panel);color:#C4CBD6;margin-top:44px}
.foot .wrap{padding:34px var(--gut) 40px}
.foot__in{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
.foot .wordmark{font-size:15px}
.foot__ab{font-size:14.5px;line-height:1.5;margin:14px 0;max-width:38ch}
.foot h4{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-hi);margin:4px 0 12px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0}
.foot a{font-family:var(--disp);font-size:13.5px;font-weight:600}
/* 44px tap targets: pad the anchor, not the li (WCAG 2.5.8) */
.foot ul a{display:inline-block;padding:11px 0}
.foot nav a:hover,.foot ul a:hover{color:#fff}
.foot .email{color:var(--green-hi)}
.foot__disclaim{font-size:12.5px;line-height:1.55;color:#8E99A9;border-top:1px solid var(--hair);
  margin:28px 0 0;padding-top:18px;max-width:110ch}
.foot__legal{font-family:var(--mono);font-size:11px;color:#6B7686;margin-top:14px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .top,.page{grid-template-columns:1fr}
  .subhero{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid4{grid-template-columns:1fr 1fr}
  .mr{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr 1fr}
  .yearlist{grid-template-columns:1fr 1fr}
}
.mnav .m-only{display:none}
.navtoggle{display:none}
.hamb{display:none}
@media (max-width:680px){
  .subhero,.grid3,.grid4,.pf,.rel__grid{grid-template-columns:1fr}
  .grid3,.grid4,.subhero{gap:22px}
  /* masthead: logo + hamburger; the nav opens as a dropdown panel */
  .masthead__in{flex-wrap:wrap;gap:6px 16px;padding-top:10px;padding-bottom:10px}
  .msearch{display:none}
  .wordmark{font-size:14px;letter-spacing:.22em}
  .hamb{display:block;margin-left:auto;padding:10px 4px;cursor:pointer}
  .hamb i{display:block;width:21px;height:2px;background:#E8ECF1;margin:4px 0;
    transition:transform .18s ease,opacity .18s ease}
  .navtoggle:checked ~ .hamb i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .navtoggle:checked ~ .hamb i:nth-child(2){opacity:0}
  .navtoggle:checked ~ .hamb i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .mnav{display:none;flex:1 1 100%;order:4;flex-direction:column;gap:0;
    margin:6px 0 0;padding:0 0 4px;overflow:visible}
  .navtoggle:checked ~ .mnav{display:flex}
  .mnav a{padding:12px 2px;font-size:15px;border-top:1px solid var(--hair)}
  .mnav a:hover{background:none}
  .mnav .m-only{display:block}
  .brief{grid-template-columns:1fr;min-height:0}
  .brief__ph{min-height:210px;order:-1;position:relative}
  .brief__ph img{position:absolute}
  .brief__ph::after{background:linear-gradient(0deg,var(--panel) 0,rgba(18,22,31,0) 30%)}
  .brief__txt{padding:18px 18px 20px}
  .brief h1{font-size:24px}
  .brief__sum{font-size:14.5px;margin-top:8px}
  .top{padding-top:16px;gap:30px}
  .band{padding:26px 0 6px}
  .sect h2,.shead h1,.shead h2{font-size:17px}
  .art__h1{font-size:26px}
  .art__standfirst{font-size:17px}
  .prose{font-size:17px}
  .prose h2{font-size:20px}
  .pull p{font-size:19px}
  .list__i{grid-template-columns:96px minmax(0,1fr);gap:12px}
  .list__i .ph{aspect-ratio:4/3}
  .list__t{font-size:16px}
  .list__m::after{display:none}
  .mr li::before{font-size:17px;min-width:26px}
  .foot__in,.yearlist{grid-template-columns:1fr}
  .foot .wrap{padding-top:26px}
}
.mtime{font-family:var(--mono);font-size:11px;color:var(--mut);flex:0 0 auto}
.railhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.railhead .colhead{margin-bottom:14px}