/* ============================================================
   Ocean Futures — design system
   Rebuilt from the project's own Figma Brand Guidelines (V2.0):
   typography (Anonymous Pro / Inter), color palette (#0A2B39,
   #0C2D49, #BFBFBF, #000000), dot-grid + noise treatments,
   outlined 10px-radius components, circle-based symbol icons.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@400;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:        #0A2B39;
  --bg2:       #0C2D49;
  --bg-deep:   #071e29;
  --panel:     rgba(191,191,191,0.035);
  --border:    rgba(191,191,191,0.32);
  --border-soft: rgba(191,191,191,0.16);

  --fg:        #BFBFBF;
  --fg-strong: #E7E9E9;
  --fg-dim:    rgba(191,191,191,0.62);
  --fg-faint:  rgba(191,191,191,0.4);
  --black:     #000000;

  --teal:      #5FC9C2;
  --teal-fill: #144149;
  --coral:     #C97F8E;
  --coral-fill:#5B2B37;

  --radius-sm: 8px;
  --radius:    10px;
  --radius-lg: 10px;
  --maxw:      1180px;

  --font-mono: 'Anonymous Pro', ui-monospace, monospace;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --header-h: 72px;
  --ease: cubic-bezier(.22,.7,.27,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 18px); }

body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Dot grid + soft teal "motif" glow, both fixed to the viewport (the
   pattern stays put while page content scrolls over it) via a
   position:fixed pseudo-element rather than body's own
   background-attachment:fixed — a fixed *background* forces the browser
   onto a slower repaint path that fights with position:sticky (that's
   what caused the header-scroll jank fixed earlier); a fixed *element*
   composites on its own GPU layer and doesn't have that problem.
   (An earlier attempt at this was reverted after appearing to cause a
   blank-screenshot bug — that turned out to be an unrelated testing-tool
   issue, not this CSS; re-applying with confidence.) */
body::before{
  content:"";
  position: fixed; inset:0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(191,191,191,0.16) 1px, transparent 0),
    radial-gradient(ellipse 900px 600px at 82% 6%, rgba(95,201,194,0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 8% 60%, rgba(95,201,194,0.05), transparent 60%);
  background-size: 16px 16px, auto, auto;
  pointer-events:none;
  z-index:0;
}

/* noise texture overlay, per brand guide's "Visual Treatments > Noise / Apply noise to backgrounds" */
body::after{
  content:"";
  position: fixed; inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================== PAGE TRANSITION ============================== */
/* A single circular reveal on arrival — real page content visibly
   growing outward from the center of the screen, filled with the
   site's own dot-grid + glow (the same pattern as body::before)
   rather than a plain color. There is deliberately no animation on
   the way OUT: clicking a link navigates immediately (see
   initPageTransition in main.js), so there's only ever one motion to
   watch, not a blank covering circle followed by a second content
   one. .page-transition (a plain, contentless pattern layer) exists
   only to make sure the new page never flashes unstyled/uncovered
   for the instant before its own reveal starts — it snaps to fully
   covering with NO transition the moment the page begins loading
   (html.pt-incoming, set before first paint by the inline script
   right after <body>), then disappears the instant .pt-content's own
   reveal begins. .pt-content — the wrapper around the page's actual
   header/main/footer markup, see #ptContent in every page — is what
   actually animates: main.js waits for the page's `load` event
   (images included, not just DOMContentLoaded) before growing its
   clip-path circle from nothing to full, so there's always real
   rendered content inside the growing circle, never bare background
   with content popping in after.
   clip-path:circle(0%)/none are the resting/default states, so both
   elements stay inert if JS never touches them at all. 150vmax (not
   a percentage) guarantees full coverage regardless of aspect ratio.
   2.2s and an eased curve so the motion reads as slow and deliberate. */
.page-transition{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(191,191,191,0.16) 1px, transparent 0),
    radial-gradient(ellipse 900px 600px at 82% 6%, rgba(95,201,194,0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 8% 60%, rgba(95,201,194,0.05), transparent 60%);
  background-size: 16px 16px, auto, auto;
  clip-path: circle(0% at 50% 50%);
}
html.pt-incoming .page-transition{ clip-path: circle(150vmax at 50% 50%); }

/* clip-path:none at rest (not an unclipped circle()) — any clip-path
   value at all, even a huge no-op circle, makes this element a
   containing block for its position:sticky descendants (the header),
   breaking sticky-on-scroll. Only actually clipped while the reveal
   is genuinely in progress; main.js removes .pt-reveal (see
   transitionend in initPageTransition) the moment it finishes so
   clip-path goes back to none and the header stickies normally. */
.pt-content{ clip-path: none; }
/* will-change here (not on the bare .pt-content rule above, so the
   promotion is dropped once the reveal is over) pre-promotes this to
   its own compositor layer before the transition starts. Without it,
   the browser was repainting the clip boundary against the page's
   real, complex content on every frame — cheap on a light page, but
   on Trends Explorer's 40+ cards or the Solutions grid that per-frame
   repaint cost made the 2.2s transition visibly take ~3s+ and stutter
   doing it, which is what read as "slow and janky" specifically on
   those pages and nowhere else. */
/* 50vh (not 50%) for the vertical center — .pt-content wraps the whole
   page (header through footer), so on anything taller than one
   viewport, a plain 50% position is 50% of ITS full height, often far
   below the fold: the circle would appear to grow in from the bottom
   of the screen instead of its actual center. vh anchors to the
   viewport itself regardless of how tall the wrapped content is,
   matching .page-transition's own already-viewport-relative circle
   above and the boot loader it hands off from (both dead-centered on
   screen via position:fixed + flex centering). */
html.pt-incoming .pt-content{ clip-path: circle(0% at 50% 50vh); will-change: clip-path; }
.pt-content.pt-reveal{ transition: clip-path 2.2s var(--ease); clip-path: circle(150vmax at 50% 50vh); will-change: clip-path; }

/* ============================== BOOT LOADER ============================== */
/* Sits above .page-transition (z-index 9999), covering first paint on
   every page load — direct visits included, which the circle reveal
   above never touches. Present in the markup by default (no JS needed
   to show it), only ever hidden by initBootLoader() in main.js once
   the page is actually ready, so there's no race with first paint. */
.boot-loader{
  position:fixed; inset:0; z-index:10000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  background: var(--bg-deep);
  opacity:1; visibility:visible;
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.boot-loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.bl-waves{ width:min(120px, 32vw); height:min(120px, 32vw); position:relative; }
.bl-waves svg{ position:absolute; inset:0; width:100%; height:100%; transform-origin:60px 60px; }
.bl-wave1{ animation: bl-spin 6s linear infinite; }
.bl-wave2{ animation: bl-spin 9s linear infinite reverse; opacity:0.6; }
.bl-wave3{ animation: bl-spin 13s linear infinite; opacity:0.35; }
@keyframes bl-spin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .bl-wave1, .bl-wave2, .bl-wave3{ animation: none; }
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

.wrap{ max-width: var(--maxw); margin:0 auto; padding: 0 28px; position:relative; z-index:1; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-strong);
  display:flex; align-items:center; gap:10px;
}

h1, .h1, h2, .h2, h3, .h3, .eyebrow{ text-wrap: balance; }
h1, .h1{
  font-family: var(--font-mono);
  font-weight:700;
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--fg-strong);
}
h2, .h2{
  font-family: var(--font-mono);
  font-weight:700;
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--fg-strong);
}
h3, .h3{
  font-family: var(--font-mono);
  font-weight:700;
  font-size: 20px;
  color: var(--fg-strong);
}
.lead{
  font-size: 16px;
  color: var(--fg-dim);
  max-width: 62ch;
}
.lead + .lead{ margin-top: 16px; }
.text-dim{ color: var(--fg-dim); }
.text-faint{ color: var(--fg-faint); }

.section{ padding: 88px 0; position:relative; }
/* Divider between stacked sections is inset to the content column, not
   full viewport width — drawn on a ::before inside .wrap (which is
   already margin-centered and padded to match every page's content)
   rather than on .section itself, which spans edge to edge. */
.section + .section{ border-top: none; }
.section + .section > .wrap{ position:relative; }
.section + .section > .wrap::before{
  content:""; position:absolute; top:-88px; left:0; right:0;
  border-top: 1px solid var(--border-soft);
}
.section-head{ margin-bottom: 44px; display:flex; flex-direction:column; gap:16px; }
.section-head .h2{ max-width: 24ch; }

/* Scroll reveal — see initReveal() in main.js, which is what adds
   .reveal/.in and sets --reveal-delay per element; nothing here fires
   on its own. Skipped entirely (class never added) under
   prefers-reduced-motion, so there's no motion to disable here. */
.reveal{
  opacity:0; transform: translateY(30px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.in{ opacity:1; transform:none; }

/* ============================== BUTTONS — rounded rectangles ============================== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing:0.03em;
  padding: 13px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-strong);
  cursor:pointer;
  transition: all .22s var(--ease);
  white-space:nowrap;
}
.btn:hover{ border-color: var(--fg-strong); background: rgba(191,191,191,0.06); transform: translateY(-1px); }
.btn.primary{ background: var(--fg); border-color: var(--fg); color: var(--bg-deep); font-weight:700; }
.btn.primary:hover{ background: var(--fg-strong); }
.btn svg{ width:14px; height:14px; }

/* ============================== HEADER ============================== */
.site-header{
  position: sticky; top:0; z-index: 200;
  height: var(--header-h);
  display:flex; align-items:center;
  background: rgba(7,30,41,0.9);
  border-bottom: 1px solid var(--border-soft);
}
.header-inner{
  padding:0 40px;
  width:100%; display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:11px; }
.header-inner .logo-mark{ width:28px; height:28px; }
.footer-brand .logo-mark{ width:24px; height:24px; }
.brand-word{
  font-family: var(--font-mono); font-weight:700;
  font-size:22px; letter-spacing:0.01em;
  color: var(--fg-strong);
}
.brand-word span{ color: var(--fg-dim); font-weight:400; }

/* Groups nav + search + mobile-toggle as one unit on the right, so
   .header-inner's space-between only ever splits two things (the
   brand, and this group) — without it, each of nav/search/toggle was
   its own flex child, spread evenly across the bar and leaving the
   nav links stranded nearer the middle than the search icon. */
.header-right{ display:flex; align-items:center; gap:28px; }
.main-nav{ display:flex; align-items:center; gap:6px; }
.nav-item{ position:relative; display:flex; align-items:center; }
.nav-item > a{
  font-family: var(--font-mono); font-size: 13.5px; letter-spacing:0.02em;
  padding: 10px 6px 10px 16px;
  color: var(--fg-dim);
  transition: color .18s;
}
.nav-item > a:hover{ color: var(--fg-strong); }
.nav-item.active > a{ color: var(--fg-strong); }
.nav-caret{
  background:none; border:none; cursor:pointer;
  color: var(--fg-faint); padding: 10px 14px 10px 4px;
  display:flex; align-items:center;
}
.nav-caret svg{ width:10px; height:10px; transition: transform .25s var(--ease); }
.nav-item.open .nav-caret svg{ transform: rotate(180deg); color: var(--fg-strong); }
.nav-caret:hover svg{ color: var(--fg-strong); }

.mobile-toggle{ display:none; background:none; border:1px solid var(--border); border-radius: var(--radius); padding:8px 10px; cursor:pointer; color: var(--fg); }
.mobile-toggle svg{ width:18px; height:18px; }

.nav-link{
  font-family: var(--font-mono); font-size: 16px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  padding: 10px 16px;
  color: var(--fg-strong);
  transition: color .18s;
}
.nav-link:hover{ color: var(--teal); }
.nav-link.active{ color: var(--teal); }

/* ============================== MOBILE NAV SHEET ============================== */
.mobile-nav-sheet{
  position:fixed; inset:0; z-index:300; display:none;
  background: var(--bg-deep);
}
.mobile-nav-sheet.show{ display:block; }
.mns-head{ display:flex; align-items:center; justify-content:space-between; height:var(--header-h); padding:0 20px; border-bottom:1px solid var(--border-soft); }
.mns-close{ background:none; border:1px solid var(--border); border-radius: var(--radius); padding:8px; color: var(--fg); cursor:pointer; }
.mns-close svg{ width:16px; height:16px; }
.mns-list{ list-style:none; margin:0; padding:20px; }
.mns-list li + li{ margin-top:4px; }
.mns-list a{ display:block; padding:16px 6px; font-family: var(--font-mono); font-size:17px; color: var(--fg-strong); border-bottom:1px solid var(--border-soft); }

/* ============================== HEADER SEARCH ============================== */
.search-toggle{
  display:flex; align-items:center; justify-content:center;
  background:none; border:1px solid var(--border); border-radius: var(--radius);
  width:38px; height:38px; margin-left:8px;
  color: var(--fg); cursor:pointer;
  transition: all .18s var(--ease);
}
.search-toggle svg{ width:16px; height:16px; }
.search-toggle:hover{ border-color: var(--fg-strong); color: var(--fg-strong); background: rgba(191,191,191,0.06); }

.search-overlay{
  position:fixed; inset:0; z-index:400;
  display:none; align-items:flex-start; justify-content:center;
  padding: min(14vh, 140px) 20px 20px;
  background: rgba(4,16,22,0.72);
  backdrop-filter: blur(3px);
  opacity:0; transition: opacity .22s var(--ease);
}
.search-overlay.show{ display:flex; opacity:1; }
.search-panel{
  width:100%; max-width:600px;
  background: var(--bg-deep);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  overflow:hidden;
  transform: translateY(-10px);
  transition: transform .22s var(--ease);
}
.search-overlay.show .search-panel{ transform: translateY(0); }
.search-field{ display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--border-soft); }
.search-field svg{ width:16px; height:16px; color: var(--fg-faint); flex-shrink:0; }
.search-field input{
  flex:1; background:none; border:none; outline:none;
  font-family: var(--font-mono); font-size:16px; color: var(--fg-strong);
}
.search-field input::placeholder{ color: var(--fg-faint); }
.search-close{ background:none; border:1px solid var(--border); border-radius: var(--radius-sm); padding:5px 9px; color: var(--fg-dim); cursor:pointer; font-family: var(--font-mono); font-size:11px; flex-shrink:0; }
.search-close:hover{ color: var(--fg-strong); border-color: var(--fg-strong); }
.search-results{ max-height:56vh; overflow-y:auto; padding:8px; }
.search-result{
  display:flex; flex-direction:column; gap:3px;
  padding:12px 14px; border-radius: var(--radius-sm);
  transition: background .15s;
}
.search-result:hover, .search-result:focus{ background: rgba(191,191,191,0.07); }
.sr-title{ font-family: var(--font-mono); font-weight:700; font-size:14.5px; color: var(--fg-strong); }
.sr-desc{ font-size:13px; color: var(--fg-dim); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.search-result mark{ background: rgba(95,201,194,0.28); color: var(--fg-strong); border-radius:3px; padding:0 1px; }

/* The flash-highlight a visitor lands on after clicking a body-text
   search result — starts bright so it's immediately findable on
   scroll-in, then fades to a quiet permanent tint rather than
   vanishing, so re-reading the paragraph doesn't lose the context. */
mark.search-highlight{
  background: rgba(95,201,194,0.55); color: var(--fg-strong);
  border-radius:3px; padding:0 2px;
  transition: background 1.8s var(--ease);
}
mark.search-highlight.fade{ background: rgba(95,201,194,0.22); }
.search-empty{ padding:20px 14px; color: var(--fg-faint); font-size:14px; }

/* ============================== NAV DRAWER (opens from left) ============================== */
.nav-scrim{
  position: fixed; inset:0; top: var(--header-h);
  background: rgba(4,16,22,0.6);
  opacity:0; pointer-events:none;
  transition: opacity .28s var(--ease);
  z-index: 190;
}
.nav-scrim.show{ opacity:1; pointer-events:auto; }

.nav-drawer{
  position: fixed; left:0; top: var(--header-h);
  height: calc(100vh - var(--header-h));
  width: min(340px, 86vw);
  background: var(--bg-deep);
  background-image: radial-gradient(circle at 1px 1px, rgba(191,191,191,0.14) 1px, transparent 0);
  background-size: 16px 16px;
  border-right: 1px solid var(--border);
  transform: translateX(-104%);
  transition: transform .32s var(--ease);
  z-index: 195;
  display:flex; flex-direction:column;
  box-shadow: 24px 0 60px rgba(0,0,0,0.35);
}
.nav-drawer.show{ transform: translateX(0); }

.drawer-head{ padding: 26px 26px 18px; border-bottom:1px solid var(--border-soft); position:relative; }
.drawer-eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em; color:var(--fg-faint); text-transform:uppercase; }
.drawer-title{ font-family:var(--font-mono); font-size:23px; font-weight:700; margin-top:6px; color:var(--fg-strong); }
.drawer-close{
  position:absolute; top:20px; right:20px;
  background:none; border:1px solid var(--border); border-radius:50%;
  width:30px; height:30px; color:var(--fg-dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.drawer-close:hover{ color:var(--fg-strong); border-color:var(--fg-strong); }

.drawer-list{ padding: 10px 14px; overflow-y:auto; flex:1; }
.drawer-list li a{
  display:flex; align-items:center; gap:12px;
  padding: 13px 12px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--fg-dim);
  transition: all .18s;
}
.drawer-list li a::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background: var(--fg-faint); flex-shrink:0;
  transition: background .18s;
}
.drawer-list li a:hover{ background: rgba(191,191,191,0.07); color: var(--fg-strong); }
.drawer-list li a:hover::before{ background: var(--teal); }

.drawer-foot{ padding:18px 26px 26px; border-top:1px solid var(--border-soft); }
.drawer-foot a{ font-family:var(--font-mono); font-size:16px; color:var(--fg-faint); }
.drawer-foot a:hover{ color:var(--fg-strong); }

/* ============================== HERO ============================== */
.hero{
  position:relative; overflow:hidden;
  padding: 96px 0 84px;
  border-bottom: 1px solid var(--border-soft);
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:0.28; }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,43,57,0.5) 0%, var(--bg) 92%);
}
.hero-inner{ position:relative; z-index:1; max-width:780px; }
.hero .eyebrow{ margin-bottom:22px; }
.hero h1{ margin-bottom:22px; }
.hero .lead{ margin-bottom:34px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero.compact{ padding: 66px 0 60px; }
/* When a hero carries a full-bleed banner, the banner's own border-bottom
   (already full-bleed) is the divider — drop the hero's own bottom
   padding/border so the line sits flush against the image instead of
   floating 60-84px below it as a second, redundant line. */
.hero.compact:has(.hero-banner){ padding-bottom:0; border-bottom:none; }
.hero.compact .hero-inner{ max-width:720px; margin:0 auto; text-align:center; }
.hero.compact .eyebrow{ justify-content:center; }
.hero.compact .hero-actions{ justify-content:center; }
/* text-align:center only centers inline content — .lead is a block
   with its own max-width, so it needs auto margins to center the box
   itself (the homepage hero is the one compact hero with a lead). */
.hero.compact .lead{ margin-left:auto; margin-right:auto; }

/* Standalone rounded-corner hero image — a card-style visual break, not a
   background behind text (which hurt text contrast and readability). */
.hero-image{
  margin-top:40px; border-radius: var(--radius-lg); overflow:hidden;
  border:1px solid var(--border-soft); height:320px;
}
.hero-image img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Full-bleed elongated banner — breaks out of .wrap to span the full
   viewport width (the standard negative-margin trick), used below a
   hub page's hero text and before its first content section. */
.hero-banner{
  width:100vw; margin-left:calc(50% - 50vw); margin-top:70px;
  height:380px; overflow:hidden; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);
}
.hero-banner img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:640px){
  .hero-banner{ height:220px; }
}

/* Homepage offering sections (Ocean Guide / Ocean Maps / Insights / About) —
   a text column and an image column, alternating sides via .reverse so
   the page doesn't read as a repeated template. */
.offer-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:center; }
.offer-text .eyebrow{ margin-bottom:18px; }
.offer-text h2{ margin-bottom:16px; }
.offer-text p{ margin-bottom:26px; }
.offer-image{ order:2; border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--border-soft); aspect-ratio:1/1; height:auto; }
.offer-text{ order:1; }
.offer-grid.reverse .offer-image{ order:1; }
.offer-grid.reverse .offer-text{ order:2; }
.offer-image img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width: 900px){
  .offer-grid{ grid-template-columns:1fr; gap:32px; }
  .offer-grid .offer-image{ order:-1; }
}

/* ============================== STATS STRIP ============================== */
.stat-strip{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
.stat-tile{ background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius); padding: 26px 24px; }
.stat-icon{ width:34px; height:34px; margin-bottom:16px; color: var(--fg-strong); }
.stat-icon svg{ width:100%; height:100%; }
.stat-num{ font-family: var(--font-mono); font-weight:700; font-size: clamp(24px,2.8vw,30px); color: var(--fg-strong); }
.stat-label{ margin-top:8px; font-size:14px; color: var(--fg-dim); line-height:1.45; }

/* ============================== TWO-PATH CARDS ============================== */
.path-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.path-card{
  position:relative; border-radius: var(--radius-lg); overflow:hidden;
  border:1px solid var(--border);
  min-height: 320px; display:flex; flex-direction:column; justify-content:flex-end;
  padding: 32px;
  transition: transform .3s var(--ease), border-color .3s;
}
.path-card:hover{ transform: translateY(-4px); border-color: var(--fg-strong); }
.path-card .pc-bg{ position:absolute; inset:0; z-index:0; }
.path-card .pc-bg img{ width:100%; height:100%; object-fit:cover; opacity:0.42; transition: transform .5s var(--ease), opacity .3s; }
.path-card:hover .pc-bg img{ transform: scale(1.05); opacity:0.55; }
.path-card .pc-bg::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,43,57,0.1), var(--bg) 96%);
}
.path-card-content{ position:relative; z-index:1; }
.path-card .eyebrow{ margin-bottom:14px; }
.path-card h3{ margin-bottom:10px; text-transform:none; }
.path-card p{ color:var(--fg-dim); font-size:14px; max-width:40ch; margin-bottom:16px; }
.path-card .pc-link{ font-family:var(--font-mono); font-size:16px; color:var(--fg-strong); display:inline-flex; gap:8px; align-items:center; white-space:nowrap; }

.feature-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-top:34px; }
.feature-card{
  display:block; padding:26px 22px; border:1px solid var(--border-soft); border-radius: var(--radius-lg);
  background: var(--panel); transition: border-color .2s, transform .2s;
}
.feature-card:hover{ transform: translateY(-3px); }
.feature-icon{ width:38px; height:38px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color: var(--teal); margin-bottom:18px; }
.feature-icon svg{ width:18px; height:18px; }
.feature-title{ font-family: var(--font-mono); font-size:20px; font-weight:700; color: var(--fg-strong); margin-bottom:8px; }
.feature-desc{ font-size:14px; color: var(--fg-dim); line-height:1.55; }

@media (max-width: 900px){
  .feature-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .feature-grid{ grid-template-columns: 1fr; }
}

/* ============================== CARDS / GRIDS ============================== */
.card{
  background: var(--panel);
  border:1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 24px;
  transition: border-color .2s, transform .2s;
}
/* Unified interactive-card hover, used by every clickable card on the
   site: a white-to-teal gradient ring on a separate ::before pseudo-
   element, cut down to just the 1px border using mask-composite —
   this works regardless of the card's own background opacity (several
   cards use a translucent --panel fill, which broke the simpler
   double-background-clip version of this trick: the panel color wasn't
   opaque enough to mask the gradient to just the border, so the whole
   card face tinted instead of just the ring).
   Scoped to `a.card`/`a.insight-card` (not the bare class) so it only
   fires on cards that are actually links — several `.card` divs on the
   site (Resources' Abbreviations box, driver cards, image cards) aren't
   clickable and shouldn't hint that they are. */
a.card, .feature-card, .course-topic-card, a.insight-card, .read-card, .gpn-link{ position:relative; }
a.card::before, .feature-card::before, .course-topic-card::before, a.insight-card::before, .read-card::before, .gpn-link::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:inherit;
  padding:1px;
  background: linear-gradient(135deg, #ffffff, var(--teal));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:0;
  transition: opacity .2s;
  pointer-events:none;
}
a.card:hover::before, .feature-card:hover::before, .course-topic-card:hover::before, a.insight-card:hover::before, .read-card:hover::before, .gpn-link:hover::before{ opacity:1; }

.driver-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.driver-card{
  background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column;
}
.driver-media{ height:190px; position:relative; overflow:hidden; border-bottom:1px solid var(--border-soft); }
.driver-media img{ width:100%; height:100%; object-fit:cover; filter:saturate(0.9); }
.driver-media.tint{ display:flex; align-items:center; justify-content:center; }
.driver-media.tint svg{ width:52px; height:52px; opacity:0.6; color: var(--fg); }
.driver-body{ padding:22px 24px 26px; }
.driver-tag{ font-family:var(--font-mono); font-size:16px; letter-spacing:0.14em; text-transform:uppercase; color:var(--teal); margin-bottom:10px; display:block; }
.driver-headline{ font-family:var(--font-mono); font-weight:700; font-size:20px; line-height:1.4; margin-bottom:10px; color: var(--fg-strong); }
.driver-headline b, .driver-headline strong{ color: var(--fg-strong); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset:3px; }
.driver-body p.driver-desc{ color:var(--fg-dim); font-size:14px; line-height:1.6; }
/* Plain .card used inside .driver-grid (no image, just a title + one
   line) is a denser, smaller unit than the full driver-card above —
   the shared .h3 class at 20px, next to .driver-desc's own inherited
   16px body size, left title and body reading as the same weight of
   information instead of a clear title-then-detail hierarchy. */
.driver-grid .card .h3{ font-size:16px; }
.driver-grid .card .driver-desc{ font-size:14px; color: var(--fg-dim); }

/* ============================== DIAGRAM VIEWER (Figma-sourced diagrams) ============================== */
.diagram-tabs{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:34px; }
.diagram-tab{
  font-family: var(--font-mono); font-size:16px; letter-spacing:0.03em;
  padding: 10px 18px; border-radius: var(--radius); border:1px solid var(--border);
  background:transparent; color:var(--fg-dim); cursor:pointer; transition: all .18s;
}
.diagram-tab:hover{ color: var(--fg-strong); border-color: var(--fg-strong); }
.diagram-tab.active{ background: var(--fg); border-color: var(--fg); color: var(--bg-deep); font-weight:700; }

.diagram-panel{ display:none; }
.diagram-panel.active{ display:block; }
/* Shared bordered/rounded box for every image+caption diagram on the
   site (causes & effects, mitigation & adaptation, the GHG Sankey) —
   the caption always sits inside this same box, never floating below it. */
.diagram-box{ border:1px solid var(--border-soft); border-radius: var(--radius-lg); overflow:hidden; margin-top:26px; }
.diagram-stage{ position:relative; background: transparent; }
.diagram-stage img{ width:100%; display:block; }
.diagram-caption{ padding:18px 22px; border-top:1px solid var(--border-soft); }
.diagram-caption h4{ font-family:var(--font-mono); font-size:16px; letter-spacing:0.03em; color:var(--fg-strong); margin-bottom:6px; }
.diagram-caption p{ font-family:var(--font-mono); font-size:16px; color:var(--fg-dim); line-height:1.6; }

.hotspot{
  position:absolute; border-radius:50%;
  transform: translate(-50%,-50%);
  border: 1px dashed rgba(191,191,191,0.4);
  background: rgba(95,201,194,0.06);
  cursor: pointer;
  transition: background .18s, border-color .18s;
}
.hotspot:hover, .hotspot:focus-visible{ background: rgba(95,201,194,0.18); border-color: var(--teal); border-style: solid; outline:none; }
.hotspot.coral:hover{ background: rgba(201,127,142,0.2); border-color: var(--coral); }

.tooltip{
  position:absolute; z-index:20; pointer-events:none;
  min-width:200px; max-width:260px;
  background: var(--bg-deep); border:1px solid var(--border);
  border-radius: var(--radius); padding:14px 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  opacity:0; transform: translate(-50%,-100%) translateY(-10px);
  transition: opacity .16s, transform .16s;
}
.tooltip.show{ opacity:1; transform: translate(-50%,-100%) translateY(-16px); }
.tooltip-title{ font-family:var(--font-mono); font-size:16px; font-weight:700; color:var(--fg-strong); margin-bottom:5px; }
.tooltip-desc{ font-size:14px; color:var(--fg-dim); line-height:1.5; }
.diagram-hint{ text-align:center; font-size:16px; color:var(--fg-faint); margin-top:14px; font-family:var(--font-mono); }

/* ============================== FLOW / DATA CALLOUTS (for carbon cycle / ghg captions) ============================== */
.flow-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin: 30px 0 8px; }
.flow-card{ flex:1; min-width:150px; background:var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius); padding:20px; text-align:center; }
.flow-card .fc-num{ font-family:var(--font-mono); font-weight:700; font-size:22px; color:var(--fg-strong); }
.flow-card .fc-label{ font-family:var(--font-mono); font-size:16px; color:var(--fg-dim); margin-top:6px; }
.res-note{ margin-top:16px; font-size:16px; color:var(--fg-faint); font-family:var(--font-mono); }

/* ============================== MITIGATE / ADAPT summary chips (used below diagram) ============================== */
.chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.chip{ font-family:var(--font-mono); font-size:16px; padding: 10px 15px; border-radius: var(--radius); background: var(--panel); border:1px solid var(--border-soft); color: var(--fg-dim); }

/* ============================== SOLUTIONS ============================== */
.sol-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.sol-card{ background:var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius); overflow:hidden; display:flex; flex-direction:column; }
.sol-media{ height:130px; position:relative; border-bottom:1px solid var(--border-soft); }
.sol-media img{ width:100%; height:100%; object-fit:cover; filter:saturate(0.9); }
.sol-media.icon-tile{ display:flex; align-items:center; justify-content:center; }
.sol-media.icon-tile svg{ width:38px; height:38px; opacity:0.7; color: var(--fg); }
.sol-body{ padding:18px 20px 20px; flex:1; display:flex; flex-direction:column; }
.sol-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; gap:10px; }
.sol-tag{ font-family:var(--font-mono); font-size:16px; letter-spacing:0.08em; text-transform:uppercase; color:var(--fg-faint); }
.badge{ font-family:var(--font-mono); font-size:16px; letter-spacing:0.04em; text-transform:uppercase; padding:4px 9px; border-radius: 6px; white-space:nowrap; flex-shrink:0; border:1px solid; }
.badge.rec{ color: var(--teal); border-color: rgba(95,201,194,0.4); }
.badge.watch{ color: #D8C48A; border-color: rgba(216,196,138,0.4); }
.badge.no{ color: var(--coral); border-color: rgba(201,127,142,0.4); }
.sol-title{ font-family:var(--font-mono); font-weight:700; font-size:17px; margin-bottom:8px; color:var(--fg-strong); }
.sol-desc{ font-size:14px; color:var(--fg-dim); line-height:1.55; flex:1; }
.sol-stat{ margin-top:14px; padding-top:12px; border-top:1px solid var(--border-soft); font-family:var(--font-mono); font-size:13px; color:var(--fg-dim); }

.legend-row{ display:flex; gap:22px; margin-top:26px; flex-wrap:wrap; }
.legend-item{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:16px; color:var(--fg-dim); }
.legend-dot{ width:8px; height:8px; border-radius:50%; }

/* ============================== TRENDS EXPLORER ============================== */
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px; }
.filter-pill{
  font-family: var(--font-mono); font-size:16px; letter-spacing:0.03em;
  padding: 9px 17px; border-radius: var(--radius); border:1px solid var(--border);
  background:transparent; color:var(--fg-dim); cursor:pointer; transition: all .18s;
}
.filter-pill:hover{ color:var(--fg-strong); border-color:var(--fg-strong); }
.filter-pill.active{ background:var(--fg); border-color:var(--fg); color:var(--bg-deep); font-weight:700; }

.trend-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
.trend-card{ background:var(--panel); border:1px solid var(--border-soft); border-top:2px solid var(--cat-color, var(--border-soft)); border-radius: var(--radius); padding:20px; }
.trend-cat{ font-family:var(--font-mono); font-size:16px; letter-spacing:0.14em; text-transform:uppercase; color: var(--cat-color, var(--teal)); margin-bottom:10px; display:inline-block; }
.trend-title{ font-family:var(--font-mono); font-weight:700; font-size:20px; margin-bottom:8px; color: var(--fg-strong); }
.trend-desc{ font-size:14px; color:var(--fg-dim); line-height:1.55; margin-bottom:10px; }
.trend-src{ font-family:var(--font-mono); font-size:16px; color:var(--fg-faint); }
.trend-src a{ color:var(--fg-faint); text-decoration:underline; text-decoration-color:var(--border); text-underline-offset:2px; transition:color .15s; }
.trend-src a:hover{ color:var(--cat-color, var(--fg-strong)); text-decoration-color:currentColor; }
.trend-count{ font-family:var(--font-mono); font-size:16px; color:var(--fg-faint); margin-bottom:18px; }

.trend-card[data-cat="social"]{ --cat-color: #5FC9C2; }
.trend-card[data-cat="tech"]{ --cat-color: #6FA3D8; }
.trend-card[data-cat="econ"]{ --cat-color: #D8C48A; }
.trend-card[data-cat="env"]{ --cat-color: #7BC99A; }
.trend-card[data-cat="pol"]{ --cat-color: #C97F8E; }

.filter-pill[data-cat="social"].active{ background:#5FC9C2; border-color:#5FC9C2; }
.filter-pill[data-cat="tech"].active{ background:#6FA3D8; border-color:#6FA3D8; }
.filter-pill[data-cat="econ"].active{ background:#D8C48A; border-color:#D8C48A; }
.filter-pill[data-cat="env"].active{ background:#7BC99A; border-color:#7BC99A; }
.filter-pill[data-cat="pol"].active{ background:#C97F8E; border-color:#C97F8E; }

/* ============================== EMERGING / EDITORIAL ============================== */
/* Single column, not a grid — each entry runs a full paragraph of
   analysis, which reads far better at full width than squeezed into a
   three-up card. */
.editorial-grid{ display:flex; flex-direction:column; gap:16px; max-width:74ch; }
.editorial-card{ background:var(--panel); border:1px solid var(--border); border-radius: var(--radius); padding:26px; position:relative; }
.editorial-label{ font-family:var(--font-mono); font-size:16px; letter-spacing:0.14em; text-transform:uppercase; color: #D8C48A; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.editorial-label svg{ width:12px; height:12px; }
.editorial-card h4{ font-family:var(--font-mono); font-weight:700; font-size:20px; margin-bottom:12px; color: var(--fg-strong); }
.editorial-card p{ font-size:14px; color:var(--fg-dim); line-height:1.65; }
.editorial-note{ margin-top:24px; font-size:14px; color:var(--fg-faint); border-top:1px solid var(--border-soft); padding-top:16px; }

/* ============================== FURTHER READING ============================== */
.read-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; }
.read-card{
  display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
  background:var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding:16px 16px; font-family:var(--font-mono); font-size:16px; line-height:1.45; transition: border-color .18s;
}
.read-card .rc-org{ display:block; color:var(--fg-faint); font-size:16px; margin-bottom:4px; }
.read-card svg{ width:13px; height:13px; flex-shrink:0; margin-top:2px; color:var(--fg-faint); }
.read-card:hover svg{ color:var(--fg-strong); }

/* ============================== ABOUT / ACK ============================== */
.about-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:50px; }
.about-grid p + p{ margin-top:16px; }
.ack-box{ background:var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius); padding:26px; align-self:start; }
.ack-box h4{ font-family:var(--font-mono); font-weight:700; font-size:20px; margin-bottom:14px; color:var(--fg-strong); }
.ack-box p{ font-size:14px; color:var(--fg-dim); line-height:1.65; }
.byline{ margin-top:22px; padding-top:18px; border-top:1px solid var(--border-soft); font-family:var(--font-mono); font-size:16px; color:var(--fg-faint); }
.insight-byline{ font-family:var(--font-mono); font-size:14px; color:var(--fg-dim); letter-spacing:0.03em; }
.insight-byline b{ color:var(--fg-strong); font-weight:700; }

/* ============================== FOUNDER QUOTE ============================== */
.founder-quote{
  display:flex; gap:22px; align-items:flex-start;
  background: var(--panel); border:1px solid var(--border-soft); border-left:3px solid var(--teal);
  border-radius: var(--radius-lg); padding:32px 36px;
}
.founder-quote .fq-mark{ font-family:var(--font-mono); font-size:40px; line-height:1; color: var(--teal); flex-shrink:0; }
.founder-quote blockquote{ margin:0; }
.founder-quote p.h3{ margin:0 0 14px; line-height:1.5; font-weight:700; }
.founder-quote cite{ font-style:normal; font-family:var(--font-mono); font-size:13px; color: var(--fg-faint); }
@media (max-width:640px){
  .founder-quote{ padding:24px; flex-direction:column; gap:10px; }
}

/* ============================== VENN DIAGRAM ============================== */
.venn-wrap{ display:flex; align-items:center; justify-content:center; padding:20px 0; }
.venn-diagram{ width:100%; max-width:460px; height:auto; }
.venn-label{ font-family: var(--font-mono); font-size:13px; font-weight:700; fill: var(--fg-strong); text-anchor:middle; }
.venn-center-label{ font-family: var(--font-mono); font-size:12px; font-weight:700; fill: var(--fg-strong); text-anchor:middle; letter-spacing:0.04em; }
@media (max-width:760px){
  .approach-grid{ grid-template-columns: 1fr !important; }
}

.prose{ max-width: 74ch; }
.prose p + p{ margin-top:15px; }
.prose h3{ margin-top:38px; margin-bottom:14px; }
/* Full-width variant used on About/Resources — same wide measure as
   every other section on the site instead of the narrower reading
   column, with body paragraphs reflowed into two columns to use the
   extra width instead of just stretching the line length. */
.prose-wide{ max-width:none; }
.prose-columns{ column-count:2; column-gap:56px; }
.prose-columns p{ break-inside: avoid; }
@media (max-width: 760px){
  .prose-columns{ column-count:1; }
}

/* ============================== FOOTER ============================== */
/* Same background color/opacity as .site-header. It also needs the
   same stacking treatment (position + z-index above the fixed
   body::before dot-grid/glow layer) as the header gets from its own
   sticky positioning — without it, the footer's 10% transparency
   blends with that fixed pattern instead of the plain page
   background, which reads as a slightly different, inconsistent
   shade even though the color value itself is identical. */
.site-footer{ position:relative; z-index:1; border-top:1px solid var(--border-soft); padding: 60px 0 36px; background: rgba(7,30,41,0.9); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:40px; margin-bottom:44px; }
.footer-grid.footer-grid-3{ grid-template-columns: 1.4fr 1fr 1fr 1fr; }
/* An empty spacer track (2) opens up extra breathing room between the
   brand/subscribe column and the 4 link columns, which are otherwise
   tightened together and shifted right of it — grid `gap` alone is
   uniform across all tracks, so the spacer is the standard way to get
   an uneven gap without touching the (shared, 22-file) footer markup. */
.footer-grid.footer-grid-4{ grid-template-columns: 1.3fr 0.5fr 0.72fr 0.72fr 0.72fr 0.72fr; }
.footer-grid.footer-grid-4 .footer-brand{ grid-column: 1; }
.footer-grid.footer-grid-4 .footer-col:nth-child(2){ grid-column: 3; }
.footer-grid.footer-grid-4 .footer-col:nth-child(3){ grid-column: 4; }
.footer-grid.footer-grid-4 .footer-col:nth-child(4){ grid-column: 5; }
.footer-grid.footer-grid-4 .footer-col:nth-child(5){ grid-column: 6; }
.footer-brand .brand{ margin-bottom:14px; }
.footer-grid p{ font-size:14px; color:var(--fg-dim); line-height:1.6; max-width:34ch; }
.footer-subscribe{ display:flex; gap:8px; margin-top:18px; max-width:320px; }
.footer-subscribe input{
  flex:1; min-width:0; background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding:9px 12px; font-family: var(--font-body); font-size:14px; color: var(--fg-strong);
}
.footer-subscribe input::placeholder{ color: var(--fg-faint); }
.footer-subscribe input:focus{ outline:none; border-color: var(--teal); }
.footer-subscribe button{
  font-family: var(--font-mono); font-size:16px; letter-spacing:0.04em; white-space:nowrap;
  background: var(--fg); border:1px solid var(--fg); color: var(--bg-deep); font-weight:700;
  padding:9px 16px; border-radius: var(--radius-sm); cursor:pointer; transition: background .18s;
}
.footer-subscribe button:hover{ background: var(--fg-strong); }
.footer-col h5{ font-family:var(--font-mono); font-size:16px; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-strong); margin-bottom:16px; }
.footer-col h5 a:hover{ color: var(--teal); }
.footer-col ul li{ margin-bottom:11px; }
.footer-col ul li a{ font-family:var(--font-mono); font-size:16px; color:var(--fg-dim); transition:color .18s; }
.footer-col ul li a:hover{ color:var(--fg-strong); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid var(--border-soft); flex-wrap:wrap; gap:12px; }
.footer-bottom span{ font-size:16px; color:var(--fg-faint); font-family:var(--font-mono); }
.disclaimer{ font-size:11.5px; color:var(--fg-faint); max-width:60ch; margin-top:10px; line-height:1.6; }

/* ============================== OVAL TEMPERATURE FRAME (Ocean Warming Today) ============================== */
.oval-frame{ border-radius:999px; overflow:hidden; aspect-ratio: 917/463; position:relative; }
.oval-frame img{ width:100%; height:100%; object-fit:cover; opacity:0.85; }
.temp-scale{ margin-top:18px; height:16px; border-radius:999px; border:1px solid rgba(255,255,255,0.6);
  background: linear-gradient(90deg, rgba(6,46,147,0.75) 0%, rgba(255,255,255,0.75) 52%, rgba(181,161,60,0.75) 74.5%, rgba(151,14,16,0.75) 100%); }
.temp-scale-labels{ display:flex; justify-content:space-between; margin-top:8px; font-family:var(--font-mono); font-size:16px; color:var(--fg-dim); }

/* ============================== EXPLORER MAP ============================== */
/* Map chrome uses a light/white card system (per explicit design
   direction: blue is reserved for the site header only). */
:root{
  --mc-bg: #ffffff;
  --mc-bg-soft: #f4f6f6;
  --mc-text: #16323d;
  --mc-text-dim: #5b6b70;
  --mc-text-faint: #8a9a9e;
  --mc-border: #e3e8e8;
  --mc-shadow: 0 8px 24px rgba(10,30,40,0.16);
}
.map-shell{ position:relative; height: calc(100vh - var(--header-h)); min-height:520px; width:100%; background: var(--bg-deep); }
/* Globe projection only covers a sphere, leaving the surrounding space
   transparent — show the same dot grid used on every other page there
   instead of flat --bg-deep, so it doesn't look like a different surface. */
#oceanMap{
  position:absolute; inset:0; z-index:0;
  background-color: var(--bg-deep);
  background-image: radial-gradient(circle at 1px 1px, rgba(191,191,191,0.16) 1px, transparent 0);
  background-size: 16px 16px;
}
.maplibregl-map{ font-family: var(--font-body); }
.maplibregl-ctrl-attrib{ background: rgba(255,255,255,0.9) !important; color: var(--mc-text-dim) !important; font-size:10.5px !important; border-radius:6px; }
.maplibregl-ctrl-attrib a{ color: var(--mc-text-dim) !important; }
.maplibregl-popup-content{ background: var(--mc-bg) !important; color: var(--mc-text) !important; border:none !important; border-radius: var(--radius-sm) !important; font-family: var(--font-body) !important; font-size:13px !important; padding:12px 14px !important; box-shadow: var(--mc-shadow) !important; }
.maplibregl-popup-content b{ font-family: var(--font-mono) !important; color:#0A2B39 !important; }
.popup-faint{ color: var(--mc-text-faint) !important; }
/* Marker/area popup hierarchy: a bold mono name (matching the map's
   own "Select a map" menu item font, just larger and bolder so it
   reads as a title), a normal-weight Inter line for where/when, and a
   small grey line for the record's own source, since every point on
   this map is already real data, there's no need to say so three
   times. */
.popup-title{ font-family: var(--font-mono) !important; font-weight:700; font-size:15px; color:#0A2B39; display:block; }
.popup-common{ font-weight:400; color: var(--mc-text-dim); }
.popup-meta{ font-family: var(--font-body); font-size:13px; color: var(--mc-text); display:block; margin-top:3px; }
.popup-source{ font-family: var(--font-body); font-size:11px; color: var(--mc-text-faint); display:block; margin-top:3px; }
.maplibregl-popup-tip{ border-top-color: var(--mc-bg) !important; border-bottom-color: var(--mc-bg) !important; }
.maplibregl-popup-close-button{ color: var(--mc-text-dim) !important; font-size:16px; }
.maplibregl-ctrl-group{ display:none; } /* replaced by the custom bottom-right toolbar */

/* ---------------- "Select a map" pill + dropdown ---------------- */
.map-select{ position:absolute; top:20px; left:20px; z-index:500; width:280px; max-width: calc(100% - 40px); }
.map-select-label{
  font-family: var(--font-mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
  color: rgba(255,255,255,0.75); margin: 0 0 6px 4px; text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.map-select-pill{
  display:flex; align-items:center; gap:10px; width:100%;
  background: var(--mc-bg); box-shadow: var(--mc-shadow);
  border:none; border-radius: var(--radius-lg);
  padding:13px 16px; cursor:pointer; font-family: var(--font-body); font-size:13.5px; color: var(--mc-text);
  text-align:left;
}
.msp-caret{ width:11px; height:8px; margin-left:auto; color: var(--mc-text-faint); flex-shrink:0; transition: transform .18s var(--ease); }
.map-select.open .msp-caret{ transform: rotate(180deg); }

.map-select-dropdown{
  margin-top:8px; max-height:0; overflow:hidden; opacity:0;
  background: var(--mc-bg);
  border-radius: var(--radius-lg); box-shadow: none;
  transition: max-height .22s var(--ease), opacity .18s var(--ease), box-shadow .18s;
}
.map-select.open .map-select-dropdown{ max-height: 70vh; overflow-y:auto; opacity:1; box-shadow: var(--mc-shadow); padding:6px; }

.map-group{ border-top:1px solid var(--mc-border); }
.map-group:first-child{ border-top:none; }
.map-group-head{
  width:100%; display:flex; align-items:center; gap:10px;
  background:none; border:none; cursor:pointer; padding:12px 8px;
  font-family: var(--font-body); text-align:left;
}
.mgh-title{ flex:1; font-family: var(--font-mono); font-size:12px; letter-spacing:0.05em; text-transform:uppercase; color: var(--mc-text); }
.mgh-caret{ width:10px; height:7px; color: var(--mc-text-faint); transition: transform .18s var(--ease); flex-shrink:0; }
.map-group.open .mgh-caret{ transform: rotate(180deg); }
.map-group-body{ max-height:0; overflow:hidden; transition: max-height .22s var(--ease); }
.map-group.open .map-group-body{ max-height:500px; padding-bottom:10px; }

.map-option{
  display:block; width:100%; text-align:left;
  padding: 9px 10px; border-radius: var(--radius-sm); cursor:pointer;
  background:none; border:1px solid transparent; transition: background .15s, border-color .15s;
}
.map-option:hover{ background: var(--mc-bg-soft); }
.map-option.active{ background: rgba(95,201,194,0.14); border-color: var(--teal); }
.mo-title{ font-family: var(--font-mono); font-size:12.5px; color: var(--mc-text); }
.mo-sub{ font-size:11px; color: var(--mc-text-faint); margin-top:2px; }

/* Bottom-center control row: timeline (left) + legend (center) +
   SST warming-projection box (right), laid out as equal-height
   siblings so the timeline sits directly next to the legend instead
   of stacked above it. Children toggle their own .show class; the
   row itself has no background, so it collapses to whichever boxes
   are currently visible. */
/* left+right are both set (not auto/50%+transform) so the row's
   available width is the real span between them, not the CSS
   shrink-to-fit half-of-container quirk that a left:50%+transform
   centering trick would silently cap it to. justify-content:center
   then centers the actual (narrower) content within that span. */
.map-bottom-bar{
  position:absolute; bottom:20px; left:20px; right:110px; z-index:500;
  display:flex; align-items:stretch; gap:12px; justify-content:center; flex-wrap:wrap-reverse;
}
.map-legend{
  background: var(--mc-bg); box-shadow: var(--mc-shadow);
  border-radius: var(--radius-lg); padding:12px 20px;
  font-size:11.5px; color: var(--mc-text-dim); display:none;
  align-items:center; gap:24px; flex-wrap:wrap; justify-content:center;
}
.map-legend.show{ display:flex; }
.map-legend-block{ display:flex; align-items:center; gap:8px; }
.map-legend-title{ font-family: var(--font-mono); font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase; color: var(--mc-text); margin-right:4px; white-space:nowrap; }
.map-legend-bar{ display:flex; align-items:center; gap:8px; }
.map-legend-val{ font-family: var(--font-mono); font-size:11px; color: var(--mc-text); white-space:nowrap; }
.map-legend-grad{ width:120px; height:10px; border-radius:5px; flex-shrink:0; position:relative; }
.map-legend-iucn{ gap:14px; }
.map-legend-row{ display:flex; align-items:center; gap:6px; color: var(--mc-text-dim); }
.map-legend-swatch{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }

/* Play/pause + slider timeline — real historical years only (see
   TIMELINE_LAYERS in map.js). Sits directly left of the legend. */
.map-timeline{
  background: var(--mc-bg); box-shadow: var(--mc-shadow);
  border-radius: var(--radius-lg); padding:8px 16px 8px 8px;
  display:none; align-items:center; gap:12px;
  width:min(230px, 32vw); flex-shrink:0;
}
.map-timeline.show{ display:flex; }
.timeline-play{
  width:32px; height:32px; flex-shrink:0; border-radius:50%;
  background: var(--mc-text); border:none; color: var(--mc-bg); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition: background .15s;
}
.timeline-play:hover{ background: var(--mc-text-dim); }
.timeline-play svg{ width:14px; height:14px; }
.timeline-play .icon-pause{ display:none; }
.timeline-play.playing .icon-play{ display:none; }
.timeline-play.playing .icon-pause{ display:block; }
.timeline-slider{
  flex:1; min-width:0; -webkit-appearance:none; appearance:none;
  height:4px; border-radius:2px; background: var(--mc-border); cursor:pointer;
}
.timeline-slider::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background: var(--mc-text); cursor:pointer; border:2px solid var(--mc-bg);
}
.timeline-slider::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background: var(--mc-text);
  cursor:pointer; border:2px solid var(--mc-bg);
}
.timeline-year{
  font-family: var(--font-mono); font-size:12.5px; color: var(--mc-text);
  min-width:38px; text-align:right; flex-shrink:0;
}

/* SST future-projection box (+2.0°C / +3.0°C) — not real historical
   data, so kept out of the timeline entirely and shown as its own
   box next to the legend, only while the SST layer is active. */
.map-scenario-box{
  background: var(--mc-bg); box-shadow: var(--mc-shadow);
  border-radius: var(--radius-lg); padding:8px 10px;
  display:none; align-items:center; gap:6px; flex-shrink:0;
}
.map-scenario-box.show{ display:flex; }
.map-scenario-title{ font-family: var(--font-mono); font-size:10px; letter-spacing:0.04em; text-transform:uppercase; color: var(--mc-text-faint); margin-right:2px; white-space:nowrap; }
.scenario-btn{
  font-family: var(--font-mono); font-size:11px; white-space:nowrap;
  background: var(--mc-bg-soft); border:1px solid var(--mc-border); color: var(--mc-text-dim);
  border-radius:6px; padding:6px 10px; cursor:pointer; transition: color .15s, border-color .15s, background .15s;
}
.scenario-btn:hover{ color: var(--mc-text); }
.scenario-btn.active{ background: rgba(95,201,194,0.18); border-color: var(--teal); color: var(--mc-text); font-weight:600; }

@media (max-width: 640px){
  .map-bottom-bar{ left:16px; right:16px; bottom:16px; flex-direction:column; align-items:stretch; }
  .map-legend{ border-radius: var(--radius); }
  .map-timeline{ width:auto; border-radius: var(--radius); }
  .map-scenario-box{ border-radius: var(--radius); justify-content:center; }
}

.map-toolbar{
  position:absolute; bottom:20px; right:20px; z-index:500;
  display:flex; flex-direction:column; gap:4px;
  background: var(--mc-bg); box-shadow: var(--mc-shadow);
  border-radius: var(--radius-lg); padding:4px;
}
.map-toolbar button{
  width:34px; height:34px; border-radius: var(--radius-sm);
  background:none; border:none; color: var(--mc-text-dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition: color .15s, background .15s;
}
.map-toolbar button:hover{ color: var(--mc-text); background: var(--mc-bg-soft); }
.map-toolbar svg{ width:16px; height:16px; }
.map-toolbar-sep{ height:1px; background: var(--mc-border); margin:3px 4px; }

.adjust-view-flyout{
  position:absolute; bottom:20px; right:68px; z-index:501;
  background: var(--mc-bg); box-shadow: var(--mc-shadow);
  border-radius: var(--radius-lg);
  padding:14px; width:230px;
  display:none; flex-direction:column; gap:2px;
}
.adjust-view-flyout.show{ display:flex; }
.adjust-view-flyout h4{ font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color: var(--mc-text-faint); font-family: var(--font-mono); margin:0 0 8px 4px; font-weight:400; }
.avf-item{
  display:flex; align-items:center; gap:11px; padding:9px 6px; border-radius: var(--radius-sm);
  background:none; border:none; color: var(--mc-text); font-family: var(--font-body); font-size:13px;
  cursor:pointer; text-align:left; transition: background .15s;
}
.avf-item:hover{ background: var(--mc-bg-soft); }
.avf-item svg{ width:17px; height:17px; flex-shrink:0; color: var(--mc-text-dim); }

.tour-caption{
  position:absolute; bottom:78px; left:50%; transform:translateX(-50%); z-index:500;
  background: var(--mc-bg); box-shadow: var(--mc-shadow);
  border-radius: var(--radius-lg);
  padding:16px 20px; width:min(420px, calc(100% - 40px)); display:none;
}
.tour-caption.show{ display:block; }
.tour-text{ font-size:13.5px; line-height:1.55; color: var(--mc-text); margin-bottom:12px; }
.tour-controls{ display:flex; justify-content:flex-end; gap:8px; }
.tour-controls button{
  font-family: var(--font-mono); font-size:11px; letter-spacing:0.04em; text-transform:uppercase;
  background: var(--mc-bg-soft); border:1px solid var(--mc-border); color: var(--mc-text-dim);
  border-radius:6px; padding:7px 14px; cursor:pointer; transition: color .15s, border-color .15s;
}
#tourNextBtn{ background: rgba(95,201,194,0.18); border-color: var(--teal); color: var(--mc-text); font-weight:600; }
.tour-controls button:hover{ color: var(--mc-text); }

.map-loading{
  position:absolute; inset:0; z-index:500;
  background: var(--bg-deep);
  display:none; align-items:center; justify-content:center; flex-direction:column; gap:14px;
}
.map-loading.show{ display:flex; }
.map-loading .spin{ width:20px; height:20px; border-radius:50%; border:2.5px solid var(--border-2,var(--border)); border-top-color:var(--teal); animation: mapspin .7s linear infinite; }
.map-loading .ml-text{ font-family: var(--font-mono); font-size:13px; color: var(--mc-text-dim); }
@keyframes mapspin{ to{ transform: rotate(360deg); } }

@media (max-width: 640px){
  .map-select{ width: calc(100% - 32px); left:16px; top:16px; }
  .map-toolbar{ right:16px; }
  .adjust-view-flyout{ right:16px; width:calc(100% - 90px); }
}

/* ============================== LOGO MARK ============================== */
.logo-mark{ border-radius:50%; flex-shrink:0; display:block; }

/* ============================== OCEAN GUIDE (same shell pattern as Insights — contained width, no divider line) ============================== */
.guide-shell{ display:flex; align-items:flex-start; max-width: var(--maxw); margin:0 auto; padding:44px 28px 100px; gap:40px; }
.guide-sidebar{
  width:260px; flex-shrink:0;
  position:sticky; top:calc(var(--header-h) + 30px);
}
.guide-sidebar-group{ margin-bottom:26px; }
.guide-sidebar-group:last-child{ margin-bottom:0; }
.guide-sidebar-label{
  font-family: var(--font-mono); font-size:16px; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--fg-strong); margin-bottom:10px; padding-left:12px;
}
.guide-sidebar-list{ list-style:none; margin:0; padding:0; }
.guide-sidebar-list a{
  display:block; padding:9px 12px; border-radius: var(--radius-sm); font-family:var(--font-mono); font-size:16px;
  color: var(--fg-dim); transition: color .15s, background .15s;
}
.guide-sidebar-list a:hover{ color: var(--fg-strong); background: rgba(191,191,191,0.05); }
/* Active state matches .insights-type-btn.active — color only, no left
   bar or background fill, for the same plain-highlight treatment used
   by the Insights filter sidebar. */
.guide-sidebar-list a.active{ color: var(--teal); font-weight:600; }
.guide-content{ flex:1; min-width:0; }

.guide-pagenav{ display:flex; justify-content:space-between; gap:20px; margin:60px 0 80px; padding-top:30px; border-top:1px solid var(--border-soft); }
.gpn-link{
  display:flex; flex-direction:column; gap:6px; padding:16px 20px; border-radius: var(--radius-lg);
  border:1px solid var(--border-soft); flex:1 1 0; min-width:0; transition: border-color .15s, background .15s;
}
.gpn-next{ text-align:right; }
.gpn-dir{ font-family: var(--font-mono); font-size:16px; letter-spacing:0.14em; text-transform:uppercase; color: var(--fg-strong); margin-bottom:2px; }
.gpn-label{ font-family: var(--font-mono); font-size:20px; font-weight:700; color: var(--fg-strong); }

/* ---------------- Course landing (ocean-guide.html) ---------------- */
.course-part{ padding-bottom:60px; }
.course-part + .course-part{ padding-top:56px; border-top:1px solid var(--border-soft); }
.course-part-head{ margin-bottom:18px; }
.course-part-num{ display:block; font-family: var(--font-mono); font-size:16px; letter-spacing:0.14em; text-transform:uppercase; color: var(--fg-strong); margin-bottom:10px; }
.course-part-head h2{ margin:0; }
.course-part-intro{ max-width:62ch; margin:18px 0 32px; color: var(--fg-dim); font-size:16px; line-height:1.6; }
.course-topic-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
.course-topic-card{
  display:block; padding:20px; border:1px solid var(--border-soft); border-radius: var(--radius-lg);
  background: var(--panel); transition: border-color .15s, transform .15s;
  min-height:148px;
}
.course-topic-card:hover{ transform: translateY(-2px); }
.ctc-num{ font-family: var(--font-mono); font-size:16px; color: var(--fg-faint); margin-bottom:8px; }
.ctc-title{ font-family: var(--font-mono); font-size:20px; font-weight:700; color: var(--fg-strong); line-height:1.4; }
.ctc-desc{ font-size:14px; color: var(--fg-dim); margin-top:8px; line-height:1.55; }

@media (max-width: 900px){
  .guide-pagenav{ flex-direction:column; }
  .gpn-link{ max-width:none; text-align:left; }
  .gpn-next{ text-align:left; margin-left:0; }
  .course-topic-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .course-topic-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 900px){
  .guide-shell{ flex-direction:column; padding:32px 20px 80px; }
  .guide-sidebar{
    width:100%; position:static;
    border-bottom:1px solid var(--border-soft); padding-bottom:20px;
    display:flex; gap:24px; overflow-x:auto;
  }
  .guide-sidebar-group{ margin-bottom:0; flex-shrink:0; }
}

/* ============================== INSIGHTS ============================== */
.insights-shell{ display:flex; align-items:flex-start; max-width: var(--maxw); margin:0 auto; padding:44px 28px 100px; gap:40px; }
.insights-sidebar{ width:260px; flex-shrink:0; position:sticky; top:calc(var(--header-h) + 30px); }
.insights-sidebar-label{
  font-family: var(--font-mono); font-size:16px; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--fg-strong); margin:0 0 10px;
}
.insights-type-list{ list-style:none; margin:0 0 30px; padding:0; }
.insights-type-list li + li{ margin-top:2px; }
.insights-type-btn{
  display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:8px 10px; border-radius: var(--radius-sm); font-family:var(--font-mono); font-size:16px; color: var(--fg-dim); transition: color .15s, background .15s;
}
.insights-type-btn:hover{ color: var(--fg-strong); background: rgba(191,191,191,0.05); }
.insights-type-btn.active{ color: var(--teal); font-weight:600; }
.insights-topic-wrap{ display:flex; flex-wrap:wrap; gap:8px; }
.insights-topic-pill{
  font-family: var(--font-mono); font-size:16px; padding:7px 13px; border-radius:999px;
  border:1px solid var(--border); color: var(--fg-dim); background:none; cursor:pointer; transition: all .15s;
}
.insights-topic-pill:hover{ color: var(--fg-strong); border-color: var(--fg-strong); }
.insights-topic-pill.active{ background: var(--fg); border-color: var(--fg); color: var(--bg-deep); font-weight:700; }

.insights-content{ flex:1; min-width:0; }
.insights-count{ font-family: var(--font-mono); font-size:16px; color: var(--fg-faint); margin-bottom:18px; }
.insights-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:20px; }
.insight-card{
  display:flex; flex-direction:column; border:1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding:24px; background: var(--panel); transition: border-color .15s, transform .15s;
  text-decoration:none; color:inherit;
}
.insight-type{
  display:inline-flex; align-self:flex-start; font-family: var(--font-mono); font-size:16px; letter-spacing:0.06em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; margin-bottom:16px;
}
.insight-type.explainer{ background: rgba(95,201,194,0.16); color: var(--teal); }
.insight-type.idea{ background: rgba(216,196,138,0.16); color: #D8C48A; }
.insight-type.essay{ background: rgba(201,127,142,0.16); color: var(--coral); }
.insight-title{ font-family: var(--font-mono); font-size:20px; font-weight:700; color: var(--fg-strong); line-height:1.35; margin-bottom:10px; }
.insight-desc{ font-size:14px; color: var(--fg-dim); line-height:1.6; flex:1; }
.insight-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; }
.insight-tag{ font-family: var(--font-mono); font-size:16px; padding:4px 10px; border-radius:999px; border:1px solid var(--border-soft); color: var(--fg-dim); }
.insight-link{ margin-top:16px; font-family: var(--font-mono); font-size:16px; color: var(--teal); display:inline-flex; align-items:center; gap:5px; }
.insight-link svg{ width:11px; height:11px; }
.insight-card.hide{ display:none; }

@media (max-width: 900px){
  .insights-shell{ flex-direction:column; padding:32px 20px 80px; }
  .insights-sidebar{ width:100%; position:static; }
  .insights-grid{ grid-template-columns:1fr; }
}

/* ============================== RESPONSIVE ============================== */
@media (max-width: 920px){
  .path-grid, .driver-grid, .about-grid{ grid-template-columns:1fr; }
  .sol-grid{ grid-template-columns: repeat(2,1fr); }
  .trend-grid{ grid-template-columns: repeat(2,1fr); }
  .read-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-grid, .footer-grid.footer-grid-3, .footer-grid.footer-grid-4{ grid-template-columns: 1fr 1fr; }
  .footer-grid.footer-grid-4 .footer-brand,
  .footer-grid.footer-grid-4 .footer-col{ grid-column: auto; }
  .stat-strip{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  .main-nav{ display:none; }
  .mobile-toggle{ display:flex; }
  .sol-grid, .trend-grid, .read-grid{ grid-template-columns: 1fr; }
  .stat-strip{ grid-template-columns: 1fr; }
  .footer-grid, .footer-grid.footer-grid-3, .footer-grid.footer-grid-4{ grid-template-columns: 1fr; gap:30px; }
  .footer-grid.footer-grid-4 .footer-brand,
  .footer-grid.footer-grid-4 .footer-col{ grid-column: auto; }
  .section{ padding:60px 0; }
  .diagram-tabs{ justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; padding-bottom:6px; }
  .tooltip{ display:none; }
}