/* =========================================================================
   BLUE PLANET RUN — "Atlas" design system
   Cartographic editorial · electric blue · Space Grotesk + Manrope
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Spectral:ital,wght@0,400;0,500;1,400&display=swap');

:root{
  /* palette */
  --paper:#FBFBF9;
  --paper-2:#F4F6F8;
  --paper-3:#EEF1F5;
  --ink:#17202B;
  --ink-2:#46515E;
  --ink-3:#7E8996;
  --line:#E6EAEF;
  --line-2:#DBE0E7;
  --accent:#1667E6;
  --accent-2:#0E4FB0;
  --accent-wash:#EAF1FE;
  --chip:#141A24;      /* dark backing for partner logos */
  --chip-2:#1E2733;
  --danger:#D64545;

  /* type */
  --display:'Space Grotesk', sans-serif;
  --body:'Manrope', sans-serif;
  --serif:'Spectral', Georgia, serif;

  /* scale — generous */
  --fs-body:19px;
  --fs-article:20px;
  --fs-meta:14px;
  --fs-label:13px;

  /* metrics */
  --maxw:1300px;
  --measure:70ch;
  --gutter:clamp(20px, 5vw, 72px);
  --radius:8px;

  /* map grid */
  --grid:52px;
}

*{box-sizing:border-box;}

/* Annotation hint: shows each empty data-fill's spec faintly so the template
   previews meaningfully. HTML stays empty; the hint disappears once filled. */
[data-fill]:empty::before{
  content:attr(data-fill);
  font-family:var(--body);font-weight:400;font-style:italic;
  font-size:0.82em;line-height:1.4;letter-spacing:0;text-transform:none;
  color:var(--ink-3);opacity:0.62;
}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--fs-body);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:var(--accent-2);text-decoration:none;}
a:hover{color:var(--accent);}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);line-height:1.08;font-weight:700;letter-spacing:-0.02em;margin:0;}
p{margin:0 0 1.1em;}
hr{border:none;border-top:1px solid var(--line);margin:0;}

/* --- shared utilities ------------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}
.eyebrow{
  font-family:var(--display);
  font-size:var(--fs-label);
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--accent-2);
  font-weight:600;
  margin:0;
}
.eyebrow.tick{display:inline-flex;align-items:center;gap:12px;}
.eyebrow.tick::before{content:"";width:30px;height:2px;background:var(--accent);}
.section-lead{font-size:1.05rem;color:var(--ink-2);max-width:60ch;line-height:1.6;}

/* map-grid background painter */
.mapgrid{
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:var(--grid) var(--grid);
}

/* ============================ HEADER / NAV ============================= */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(251,251,249,0.88);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:74px;
}
.brand{
  font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-0.01em;
  color:var(--ink);display:inline-flex;align-items:center;gap:11px;
}
.brand:hover{color:var(--ink);}
.brand .glyph{
  width:26px;height:26px;flex:none;color:var(--accent);
}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0;}
.nav-links a{
  font-family:var(--display);font-size:var(--fs-meta);font-weight:500;
  letter-spacing:0.09em;text-transform:uppercase;color:var(--ink-2);
}
.nav-links a:hover{color:var(--accent-2);}
.nav-cta{
  font-family:var(--display);font-size:var(--fs-meta);font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--accent-2);
  display:inline-flex;align-items:center;gap:7px;
}
.nav-cta svg{width:15px;height:15px;}
/* CSS-only mobile menu */
.nav-toggle,.nav-toggle-label{display:none;}

/* ============================ HERO (route) ============================= */
.hero{position:relative;overflow:hidden;background:var(--paper-2);border-bottom:1px solid var(--line);}
.hero .mapgrid{position:absolute;inset:0;}
.hero-route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.hero-route path{stroke:var(--accent);stroke-width:2.5;fill:none;stroke-dasharray:3 9;stroke-linecap:round;}
.hero-marker{
  position:absolute;width:14px;height:14px;border-radius:999px;background:var(--accent);
  transform:translate(-50%,-50%);box-shadow:0 0 0 6px rgba(22,103,230,0.16);
}
.hero-inner{position:relative;padding:clamp(56px,9vw,110px) var(--gutter) clamp(30px,5vw,44px);}
.hero h1{
  font-size:clamp(40px,6.4vw,74px);line-height:1.0;letter-spacing:-0.03em;
  max-width:15ch;margin:22px 0 0;
}
.hero .hero-sub{
  font-family:var(--body);font-size:clamp(17px,2vw,21px);line-height:1.6;color:var(--ink-2);
  max-width:46ch;margin:22px 0 0;font-weight:400;
}
.hero-legend{
  display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,56px);margin-top:clamp(34px,5vw,54px);
}
.hero-legend .leg-label{font-family:var(--display);font-size:12px;letter-spacing:0.15em;text-transform:uppercase;color:var(--ink-3);margin:0 0 4px;}
.hero-legend .leg-value{font-family:var(--display);font-size:1.12rem;font-weight:500;color:var(--ink);margin:0;}
.hero-legend .leg-value.accent{color:var(--accent-2);}

/* ============================ SECTION SHELL =========================== */
.section{padding:clamp(56px,8vw,104px) 0;}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(30px,4vw,48px);
}
.section-head h2{font-size:clamp(28px,3.6vw,42px);letter-spacing:-0.02em;margin-top:14px;max-width:18ch;}
.section-head .eyebrow{margin-bottom:2px;}
.link-more{
  font-family:var(--display);font-size:var(--fs-meta);font-weight:600;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--accent-2);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
}
.link-more svg{width:16px;height:16px;}

/* ============================ FEED / CARDS ============================ */
.feed{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,3vw,44px);align-items:start;}
.feed-lead{position:relative;}
.card{
  display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:border-color .18s ease, transform .18s ease;
}
.card:hover{border-color:var(--line-2);transform:translateY(-2px);}
.card .thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-3);}
.card .thumb img{width:100%;height:100%;object-fit:cover;}
.card-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:12px;flex:1;}
.card-meta{
  font-family:var(--display);font-size:var(--fs-meta);letter-spacing:0.02em;color:var(--ink-3);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:500;
}
.card-meta .cat{color:var(--accent-2);text-transform:uppercase;letter-spacing:0.12em;font-size:12px;font-weight:600;}
.card-meta .sep{color:var(--line-2);}
.card h3{font-size:1.4rem;line-height:1.14;}
.card p{font-size:1rem;color:var(--ink-2);line-height:1.55;margin:0;}
.card:empty::before{content:"";}

/* lead card — larger */
.feed-lead .card .thumb{aspect-ratio:16/9;}
.feed-lead .card h3{font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-0.02em;}
.feed-lead .card p{font-size:1.08rem;}
.feed-lead .card-body{padding:30px clamp(24px,3vw,40px) 36px;gap:16px;}
.badge-recent{
  align-self:flex-start;font-family:var(--display);font-size:11.5px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-2);
  background:var(--accent-wash);border-radius:999px;padding:5px 12px;
}
/* secondary column list */
.feed-rest{display:flex;flex-direction:column;gap:20px;}
.mini{
  display:grid;grid-template-columns:104px 1fr;gap:18px;align-items:center;
  border-bottom:1px solid var(--line);padding-bottom:20px;
}
.mini:last-child{border-bottom:none;padding-bottom:0;}
.mini .thumb{aspect-ratio:1/1;border-radius:6px;overflow:hidden;background:var(--paper-3);}
.mini .thumb img{width:100%;height:100%;object-fit:cover;}
.mini .m-cat{font-family:var(--display);font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-2);font-weight:600;margin:0 0 6px;}
.mini h4{font-family:var(--display);font-size:1.08rem;line-height:1.2;font-weight:600;margin:0;letter-spacing:-0.01em;}
.mini .m-meta{font-family:var(--display);font-size:13px;color:var(--ink-3);margin:7px 0 0;font-weight:500;}

/* feed signpost — fills/balances the secondary column */
.feed-signpost{
  position:relative;overflow:hidden;flex:1;min-height:150px;display:flex;
  background:var(--ink);border-radius:var(--radius);border:1px solid var(--ink);
  transition:transform .18s ease;
}
.feed-signpost:hover{transform:translateY(-2px);}
.feed-signpost .mapgrid{
  position:absolute;inset:0;opacity:0.16;
  background-image:
    linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px);
  background-size:34px 34px;
}
.feed-signpost .signpost-body{position:relative;display:flex;flex-direction:column;gap:10px;justify-content:center;padding:24px 26px;}
.feed-signpost .eyebrow{color:#7FB0FF;}
.feed-signpost .signpost-title{font-family:var(--display);font-size:1.3rem;font-weight:700;letter-spacing:-0.01em;color:#fff;line-height:1.15;}
.feed-signpost .signpost-link{font-family:var(--display);font-size:var(--fs-meta);font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:#7FB0FF;display:inline-flex;align-items:center;gap:8px;margin-top:2px;}
.feed-signpost .signpost-link svg{width:16px;height:16px;}

/* browse / category filter row (inside hero region per mockup) */
.browse{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding:20px 0;border-top:1px solid var(--line);margin-top:clamp(30px,4vw,44px);
}
.browse .browse-label{font-family:var(--display);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-right:6px;}
.chip{
  font-family:var(--display);font-size:var(--fs-meta);font-weight:500;letter-spacing:0.03em;
  color:var(--ink-2);background:var(--paper);border:1px solid var(--line-2);
  border-radius:999px;padding:8px 16px;cursor:pointer;transition:all .15s ease;
}
.chip:hover{border-color:var(--accent);color:var(--accent-2);}
.chip.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink);}

/* ============================ CLIMATE FEATURE ========================= */
.climate{background:#FFFFFF;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.climate-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center;}
.climate .panel{
  position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:4/3;background:var(--paper-2);
}
.climate .panel .mapgrid{position:absolute;inset:0;background-size:34px 34px;opacity:.7;}
.climate .panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.climate .panel .tag{
  position:absolute;left:16px;bottom:16px;font-family:var(--display);font-size:12px;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--paper);background:rgba(20,26,36,0.82);
  padding:7px 12px;border-radius:5px;font-weight:600;
}
.climate h2{font-size:clamp(28px,3.8vw,44px);letter-spacing:-0.02em;margin-top:16px;}
.climate p{font-size:1.08rem;color:var(--ink-2);line-height:1.7;margin-top:16px;max-width:52ch;}
.climate .cta-row{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px;}

/* ============================ BUTTONS ================================= */
.btn{
  font-family:var(--display);font-size:var(--fs-meta);font-weight:600;letter-spacing:0.05em;
  display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:6px;
  cursor:pointer;border:1px solid transparent;transition:all .16s ease;
}
.btn svg{width:16px;height:16px;}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn-primary:hover{background:var(--accent-2);color:#fff;}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-2);}
.btn-dark{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.btn-dark:hover{background:#0c1118;color:var(--paper);}

/* ============================ PARTNERS =============================== */
.partners{background:var(--paper-2);border-top:1px solid var(--line);}
.partner-wall{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;
  grid-auto-flow:dense;
}
.sponsor{
  display:flex;flex-direction:column;gap:14px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);padding:18px;
  transition:border-color .16s ease, transform .16s ease;
}
.sponsor:hover{border-color:var(--line-2);transform:translateY(-2px);}
.sponsor img{
  /* WIDE landscape logo strip on a DARK chip */
  width:100%;aspect-ratio:3/1;object-fit:contain;object-position:center;
  background:var(--chip);border-radius:6px;padding:18px 22px;
}
.sponsor .sponsor-blurb{
  font-size:0.98rem;line-height:1.5;color:var(--ink-2);
}
.sponsor .sponsor-blurb::before{
  /* partner name injected via data-brand attribute */
  content:attr(data-brand);display:block;font-family:var(--display);
  font-weight:600;font-size:1.02rem;color:var(--ink);letter-spacing:-0.01em;margin-bottom:4px;
}
.sponsor .sponsor-blurb:empty{min-height:0;}
/* featured — first two prominent, PRIMARY WALL ONLY */
.partner-wall.primary .sponsor:nth-child(-n+2){grid-column:span 2;flex-direction:row;align-items:center;gap:22px;padding:22px;}
.partner-wall.primary .sponsor:nth-child(-n+2) img{width:46%;flex:none;aspect-ratio:3/1;padding:20px 26px;}
.partner-wall.primary .sponsor:nth-child(-n+2) .sponsor-blurb{font-size:1.05rem;}
.partner-wall.primary .sponsor:nth-child(-n+2) .sponsor-blurb::before{font-size:1.15rem;}
/* CSS-only reveal */
.partner-more{margin-top:22px;}
.partner-more>summary{
  list-style:none;display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--display);font-size:var(--fs-meta);font-weight:600;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--accent-2);
  border:1px solid var(--line-2);border-radius:999px;padding:11px 22px;transition:all .15s ease;
}
.partner-more>summary:hover{border-color:var(--accent);}
.partner-more>summary::-webkit-details-marker{display:none;}
.partner-more>summary svg{width:15px;height:15px;transition:transform .2s ease;}
.partner-more[open]>summary svg{transform:rotate(180deg);}
.partner-more[open]>summary .more-txt{display:none;}
.partner-more .reveal-wall{margin-top:22px;}
.summary-less{display:none;}
.partner-more[open] .summary-less{display:inline;}
.partner-more[open] .summary-more{display:none;}

/* ============================ FOOTER ================================= */
.site-footer{background:var(--ink);color:#C4CCD6;border-top:3px solid var(--accent);}
.footer-inner{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:40px;padding:clamp(48px,6vw,72px) var(--gutter);}
.footer-brand .brand{color:#fff;}
.footer-brand .glyph{color:var(--accent);}
.footer-brand p{color:#8B97A4;font-size:1rem;line-height:1.6;max-width:32ch;margin-top:16px;}
.footer-col h4{font-family:var(--display);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:#6E7B89;font-weight:600;margin-bottom:16px;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.footer-col a{color:#C4CCD6;font-size:1rem;}
.footer-col a:hover{color:#fff;}
.footer-bottom{border-top:1px solid #263140;padding:22px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-family:var(--display);font-size:13px;color:#6E7B89;letter-spacing:0.02em;}
.footer-social{display:flex;gap:14px;}
.footer-social a{color:#8B97A4;display:inline-flex;}
.footer-social a:hover{color:#fff;}
.footer-social svg{width:19px;height:19px;}

/* ============================ PAGE HEADER (interior) ================== */
.page-hero{position:relative;overflow:hidden;background:var(--paper-2);border-bottom:1px solid var(--line);}
.page-hero .mapgrid{position:absolute;inset:0;}
.page-hero-inner{position:relative;padding:clamp(52px,7vw,88px) var(--gutter) clamp(40px,5vw,56px);}
.page-hero .kicker{margin-bottom:18px;}
.page-hero h1{font-size:clamp(38px,5.4vw,64px);letter-spacing:-0.03em;max-width:18ch;}
.page-hero .dek{font-size:clamp(17px,2vw,20px);color:var(--ink-2);max-width:56ch;margin-top:20px;line-height:1.6;}

/* ============================ PROSE ================================== */
.prose{font-size:var(--fs-article);line-height:1.75;color:var(--ink);}
.prose>*{max-width:var(--measure);}
.prose h2{font-size:clamp(26px,3vw,36px);letter-spacing:-0.02em;margin:1.8em 0 0.6em;}
.prose h3{font-size:1.4rem;margin:1.6em 0 0.5em;}
.prose p{margin:0 0 1.15em;}
.prose a{border-bottom:1px solid rgba(22,103,230,0.35);}
.prose a:hover{border-color:var(--accent);}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.3em;}
.prose li{margin-bottom:0.5em;}
.prose>.wide,.prose figure,.prose .statrow,.prose .versus,.prose .datatable,.prose .gallery,
.prose .chart,.prose .profile-grid,.prose .further-grid,.prose .map-figure,.prose .timeline{max-width:none;}

/* entity spans (article annotations) render as inline emphasis */
[data-entity],[data-person],[data-place]{color:var(--accent-2);border-bottom:1px solid rgba(22,103,230,0.3);cursor:help;}

/* ======================= ARTICLE COMPONENTS (PALETTE_SPEC) =========== */
.lead{font-family:var(--serif);font-size:clamp(21px,2.4vw,26px);line-height:1.5;color:var(--ink);font-weight:400;margin-bottom:1.2em;}

.pullquote{margin:1.8em 0;padding:0;border:none;}
.pullquote p{font-family:var(--display);font-size:clamp(24px,3.4vw,38px);line-height:1.16;letter-spacing:-0.02em;color:var(--ink);font-weight:700;margin:0;position:relative;padding-left:26px;}
.pullquote p::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:4px;background:var(--accent);border-radius:2px;}

.blockquote{margin:1.8em 0;padding:26px 30px;background:var(--paper-2);border-radius:var(--radius);border:1px solid var(--line);}
.blockquote p{font-family:var(--serif);font-style:italic;font-size:1.28rem;line-height:1.5;color:var(--ink);margin:0 0 12px;}
.blockquote cite{font-family:var(--display);font-style:normal;font-size:var(--fs-meta);font-weight:600;letter-spacing:0.04em;color:var(--ink-2);}

.callout{
  margin:1.8em 0;padding:24px 28px 24px 26px;background:var(--accent-wash);
  border-radius:var(--radius);border-left:4px solid var(--accent);position:relative;
}
.callout p{font-size:1.08rem;line-height:1.6;color:#123A7A;margin:0;font-weight:500;}

.note{
  font-size:0.98rem;line-height:1.6;color:var(--ink-2);background:var(--paper-2);
  border:1px dashed var(--line-2);border-radius:6px;padding:14px 18px 14px 44px;position:relative;margin:1.4em 0;
}
.note::before{
  content:"i";position:absolute;left:16px;top:14px;width:18px;height:18px;border-radius:999px;
  background:var(--ink);color:#fff;font-family:var(--display);font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

/* stats */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:1.8em 0;}
.statblock{display:flex;flex-direction:column;gap:6px;padding:26px 24px;background:var(--paper);}
.stat-num{font-family:var(--display);font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-0.02em;color:var(--accent-2);line-height:1;}
.stat-label{font-family:var(--display);font-size:var(--fs-meta);color:var(--ink-2);line-height:1.35;font-weight:500;}

/* tables */
.versus,.datatable{width:100%;border-collapse:collapse;margin:1.8em 0;font-size:1rem;}
.versus th,.versus td,.datatable th,.datatable td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;}
.versus thead th,.datatable thead th{font-family:var(--display);font-size:12.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600;border-bottom:2px solid var(--line-2);}
.datatable tbody tr:hover{background:var(--paper-2);}
.datatable td:first-child{font-weight:600;}
.versus{table-layout:fixed;}
.versus tbody th{font-family:var(--display);font-weight:600;color:var(--ink);width:34%;background:var(--paper-2);}
.versus td{font-family:var(--display);font-weight:500;}
.versus .win{color:var(--accent-2);}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.8em 0;}
.tablewrap .versus,.tablewrap .datatable{margin:0;min-width:520px;}

/* timeline — labels can be long multi-word phrases */
.timeline{list-style:none;margin:1.8em 0;padding:0;position:relative;}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line-2);}
.timeline li{position:relative;padding:0 0 26px 40px;}
.timeline li:last-child{padding-bottom:0;}
.timeline li::before{content:"";position:absolute;left:2px;top:5px;width:16px;height:16px;border-radius:999px;background:var(--paper);border:3px solid var(--accent);box-shadow:0 0 0 4px var(--paper);}
.t-when{display:block;font-family:var(--display);font-size:var(--fs-meta);font-weight:600;letter-spacing:0.02em;color:var(--accent-2);margin-bottom:4px;}
.t-what{display:block;font-size:1.02rem;line-height:1.5;color:var(--ink);}

/* charts */
.chart{margin:1.8em 0;}
.chart svg{width:100%;height:auto;display:block;overflow:visible;}
.chart figcaption{font-family:var(--display);font-size:13px;color:var(--ink-3);margin-top:14px;letter-spacing:0.02em;text-align:center;font-weight:500;}
.chart .bar-rect{fill:var(--accent);}
.chart .bar-rect.alt{fill:var(--ink);}
.chart .bar-label{font-family:var(--display);font-size:12px;fill:var(--ink-2);}
.chart .bar-value{font-family:var(--display);font-size:12px;font-weight:600;fill:var(--ink);}
.chart .axis{stroke:var(--line-2);stroke-width:1;}
.chart .grid-line{stroke:var(--line);stroke-width:1;}
.chart .line-path{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.chart .line-dot{fill:var(--paper);stroke:var(--accent);stroke-width:3;}
.chart .donut-track{fill:none;stroke:var(--line);}
.chart .donut-val{fill:none;stroke:var(--accent);stroke-linecap:round;}
.chart .donut-center{font-family:var(--display);font-weight:700;fill:var(--ink);}

/* figures / media */
.article-figure{margin:1.8em 0;}
.article-figure img{width:100%;border-radius:var(--radius);border:1px solid var(--line);background:var(--paper-2);}
.article-figure figcaption,.map-figure figcaption,.gallery figcaption{
  font-family:var(--display);font-size:13.5px;color:var(--ink-3);margin-top:12px;line-height:1.45;letter-spacing:0.01em;font-weight:500;
}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:1.8em 0;}
.gallery figure{margin:0;}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;border:1px solid var(--line);}
.map-figure{margin:1.8em 0;}
.map-figure svg{width:100%;height:auto;display:block;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);}
.map-figure .m-land{fill:var(--paper-3);stroke:var(--line-2);stroke-width:1;}
.map-figure .m-route{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-dasharray:3 8;stroke-linecap:round;}
.map-figure .m-pin{fill:var(--accent);}
.map-figure .m-label{font-family:var(--display);font-size:12px;font-weight:600;fill:var(--ink);}

/* profile cards */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:1.8em 0;}
.profile-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:6px;}
.profile-card .p-photo{width:72px;height:72px;border-radius:999px;object-fit:cover;background:var(--paper-3);margin-bottom:10px;border:1px solid var(--line);}
.profile-card.no-photo::before{
  content:attr(data-initials);width:72px;height:72px;border-radius:999px;background:var(--ink);color:#fff;
  font-family:var(--display);font-size:24px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:10px;
}
.profile-card h3{font-size:1.3rem;letter-spacing:-0.01em;}
.profile-card .p-role{font-family:var(--display);font-size:var(--fs-meta);font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--accent-2);margin:0;}
.profile-card p{font-size:1rem;line-height:1.6;color:var(--ink-2);margin:8px 0 0;}
.profile-card .p-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;}
.profile-card .p-links a{font-family:var(--display);font-size:13.5px;font-weight:600;color:var(--accent-2);display:inline-flex;align-items:center;gap:5px;}
.profile-card .p-attr{font-family:var(--display);font-size:12.5px;color:var(--ink-3);margin-top:12px;letter-spacing:0.02em;}

/* org cards */
.org-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:1.8em 0;}
.org-card{display:flex;align-items:center;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;transition:border-color .15s ease;}
.org-card:hover{border-color:var(--accent);}
.org-logo{width:52px;height:52px;flex:none;border-radius:8px;object-fit:contain;background:var(--chip);padding:8px;}
.org-card.no-logo .org-logo{background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;}
.org-name{font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--ink);display:block;line-height:1.2;}
.org-host{font-family:var(--display);font-size:12.5px;color:var(--ink-3);display:block;margin-top:3px;}

/* entity ref inline */
.entity-ref{font-family:var(--display);font-weight:600;color:var(--accent-2);border-bottom:1px solid rgba(22,103,230,0.35);}
.entity-ref:hover{border-color:var(--accent);}

/* further reading */
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:1.8em 0;}
.further-grid a{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;font-family:var(--display);font-weight:600;font-size:1.08rem;line-height:1.25;color:var(--ink);letter-spacing:-0.01em;transition:border-color .15s ease, transform .15s ease;position:relative;}
.further-grid a::after{content:"→";position:absolute;right:20px;bottom:18px;color:var(--accent);font-weight:400;}
.further-grid a:hover{border-color:var(--accent);transform:translateY(-2px);color:var(--ink);}

/* ============================ ARTICLE LAYOUT ========================= */
.article{padding:clamp(40px,5vw,64px) 0 clamp(56px,7vw,88px);}
.article-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.article-hero{position:relative;margin-bottom:clamp(30px,4vw,48px);}
.article-hero img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line);background:var(--paper-2);}
.article-head{max-width:var(--measure);margin:0 auto clamp(28px,3vw,40px);}
.article-head .kicker{margin-bottom:16px;}
.article-head h1{font-size:clamp(34px,5vw,58px);letter-spacing:-0.03em;line-height:1.04;}
.article-byline{font-family:var(--display);font-size:var(--fs-meta);color:var(--ink-2);margin-top:22px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-weight:500;}
.article-byline .cat{color:var(--accent-2);text-transform:uppercase;letter-spacing:0.1em;font-size:12.5px;font-weight:600;}
.article-byline .sep{color:var(--line-2);}
.article-body{max-width:var(--measure);margin:0 auto;}

/* ============================ FORM (contact) ========================= */
.form-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,3vw,40px);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;}
.field label{font-family:var(--display);font-size:var(--fs-meta);font-weight:600;letter-spacing:0.03em;color:var(--ink);}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:1.02rem;color:var(--ink);background:var(--paper-2);
  border:1px solid var(--line-2);border-radius:6px;padding:13px 15px;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(22,103,230,0.12);}
.field textarea{min-height:150px;resize:vertical;}

/* contact methods (SVG icons, no emoji) */
.contact-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}
.method{display:flex;gap:14px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px;}
.method .ic{width:40px;height:40px;flex:none;border-radius:8px;background:var(--accent-wash);color:var(--accent-2);display:flex;align-items:center;justify-content:center;}
.method .ic svg{width:20px;height:20px;}
.method h4{font-family:var(--display);font-size:1.05rem;margin:0 0 4px;letter-spacing:-0.01em;}
.method p{font-size:0.98rem;color:var(--ink-2);margin:0;line-height:1.5;}

/* ============================ 404 =================================== */
.err-wrap{min-height:70vh;display:flex;align-items:center;position:relative;overflow:hidden;background:var(--paper-2);}
.err-wrap .mapgrid{position:absolute;inset:0;}
.err-route{position:absolute;inset:0;width:100%;height:100%;}
.err-inner{position:relative;text-align:center;margin:0 auto;padding:80px 0;}
.err-code{font-family:var(--display);font-size:clamp(90px,20vw,220px);font-weight:700;letter-spacing:-0.05em;color:var(--ink);line-height:0.9;}
.err-inner h1{font-size:clamp(26px,4vw,40px);margin-top:12px;}
.err-inner p{font-size:1.1rem;color:var(--ink-2);margin:18px auto 30px;max-width:44ch;}

/* ============================ STYLEGUIDE ============================= */
.sg-section{padding:clamp(36px,5vw,64px) 0;border-bottom:1px solid var(--line);}
.sg-label{font-family:var(--display);font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:8px;}
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
.sw{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.sw .chip-c{height:80px;}
.sw .meta{padding:10px 12px;font-family:var(--display);font-size:13px;}
.sw .meta b{display:block;color:var(--ink);}
.sw .meta span{color:var(--ink-3);}

/* ============================ RESPONSIVE ============================= */
@media (max-width:1080px){
  .footer-inner{grid-template-columns:1fr 1fr;gap:32px;}
  .partner-wall.primary .sponsor:nth-child(-n+2){grid-column:span 1;}
}
@media (max-width:900px){
  :root{--fs-body:18px;--fs-article:19px;}
  .feed{grid-template-columns:1fr;}
  .climate-inner{grid-template-columns:1fr;}
  .climate .panel{aspect-ratio:16/9;order:-1;}
  .form-row{grid-template-columns:1fr;}
  .partner-wall.primary .sponsor:nth-child(-n+2){flex-direction:column;align-items:stretch;}
  .partner-wall.primary .sponsor:nth-child(-n+2) img{width:100%;}
}
@media (max-width:720px){
  .nav-links,.nav-cta{
    position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:flex-start;
    gap:0;background:var(--paper);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .25s ease;
  }
  .nav-links{padding:0 var(--gutter);}
  .nav-links a{width:100%;padding:15px 0;border-bottom:1px solid var(--line);letter-spacing:0.06em;font-size:15px;}
  .nav-toggle:checked ~ .nav-links{max-height:340px;padding:8px var(--gutter);}
  .nav-toggle-label{
    display:inline-flex;flex-direction:column;gap:5px;cursor:pointer;padding:6px;
  }
  .nav-toggle-label span{width:24px;height:2px;background:var(--ink);border-radius:2px;}
  .nav .nav-cta{display:none;}
  .partner-wall{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr;gap:28px;}
  .hero h1{max-width:none;}
}
@media (max-width:420px){
  :root{--grid:40px;}
  .mini{grid-template-columns:80px 1fr;gap:14px;}
  .statblock{padding:20px 18px;}
}

/* pipeline: sponsor link-treatment variety (footprint) */
.sponsor::before{content:none!important;}
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.sponsor-blurb a:hover{opacity:.8;}
.sponsor .sp-domain{display:inline-block;margin-top:8px;color:inherit;text-decoration:none;opacity:.75;font-size:.9em;letter-spacing:.02em;}
.sponsor .sp-domain:hover{text-decoration:underline;opacity:1;}

.sponsor a.sp-logo{display:contents;}

/* ===== pipeline mobile-gutter guard (finalize) — content never touches the screen edge ===== */
@media (max-width:680px){
  .wrap,.wrap-wide,.container,.hero-inner,.footer-inner,.footer-bottom,.article-inner,.climate-inner,.nav,
  [class$="-inner"],[class*="-inner "]{
    padding-left:max(18px,env(safe-area-inset-left,0px))!important;
    padding-right:max(18px,env(safe-area-inset-right,0px))!important;
  }
}

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

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   3156px at 390, 52% of the whole page. Two columns bring it to
   1457px (54% shorter). Checked before writing: no new overflow, smallest mark still
   124px wide, longest blurb 3 lines, tile heights 172-253px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.partner-wall.primary, .partner-wall.reveal-wall), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .partner-wall.primary{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!important}
    .partner-wall.primary > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .partner-wall.primary > * *{min-width:0!important;max-width:100%}
    .partner-wall.primary img,.partner-wall.primary svg{max-width:100%;height:auto}
  .partner-wall.reveal-wall{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!important}
    .partner-wall.reveal-wall > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .partner-wall.reveal-wall > * *{min-width:0!important;max-width:100%}
    .partner-wall.reveal-wall img,.partner-wall.reveal-wall svg{max-width:100%;height:auto}
  .partner-wall.primary .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
  .partner-wall.reveal-wall .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-odd-tier-lead: .partner-wall.primary (7 tiles), .partner-wall.reveal-wall (5 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){
  .partner-wall.primary:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
  .partner-wall.reveal-wall:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-article-width: the article column was capped at 854px (92 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .prose > *) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. The layout has no room to grow above 1600, so this width holds there. Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  div.article-body.prose{--measure:min(77.295ch, 100%)!important}
}
/* op-article-width:end */

/* op-article-head: the article header followed the text column (854px) and was left behind when the text went to 943px. Operator: "article header page with title + meta info that are super shrinked". Its containers now follow the text again through Design's own measure --measure. */
@media (min-width:1024px){
  header.article-head{--measure:min(77.295ch, 100%)!important}
}
/* op-article-head:end */

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .partner-wall.primary 9 rows at 1024). Operator: "we should probably limit that to display only 2" — held to two rows in that width band only; the copy stays in the markup. The partner's NAME is printed inside the blurb (::before, content:attr(data-brand)), so the clamp is three: the name + two rows of copy. */
@media (min-width:641px){
  .partner-wall.primary .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical!important;max-height:calc(3lh + 3px)!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */

/* op-money-readable: from 1080px Design narrows the two featured tiles to one column but keeps them a ROW
   (mark 46% + copy) until 900px — between 901 and 1080 the mark box (aspect 3/1, padding 20px 26px) kept
   0–14px of height and the Evil Angel Transexuals and Bait Bus marks vanished. Design's own <=900px stack
   (column, full-width mark) starts where the tiles narrow instead. */
@media (min-width:901px) and (max-width:1080px){
  .partner-wall.primary .sponsor:nth-child(-n+2){flex-direction:column!important;align-items:stretch!important}
  .partner-wall.primary .sponsor:nth-child(-n+2) img{width:100%!important}
}
/* op-money-readable:end */
/* op-heading-levels */
h3:where(.rt-h4){font-family: var(--display); color: var(--ink); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; margin: 0px;}
.footer-col h3:where(.rt-h4){font-family: var(--display); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(110, 123, 137); font-weight: 600; margin-bottom: 16px;}
.method h3:where(.rt-h4){font-family: var(--display); font-size: 1.05rem; margin: 0px 0px 4px; letter-spacing: -0.01em;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.card > div.thumb > img,
  a.mini > div.thumb > img,
  div.article-body.prose > figure.article-figure > img,
  div.article-inner > figure.article-hero > img,
  div.climate-inner.wrap > div.panel > img){height:auto}
/* op-img-dims:end */