/* ═══════════════════════════════════════════════════════════════════════
   AGLF 2026 — CAMPAIGN ATMOSPHERE LAYER
   A single additive visual pass that connects the existing website to the
   AGLF 2026 campaign artwork. Nothing is restructured: layout, typography,
   spacing, components, navigation and functionality are untouched.

   Colour calibration is taken directly from the campaign flyer (colour
   sampling of flyer.jpeg):

     off-white canvas        #F7F8F8
     deep navy / midnight    #081B62 · #052599
     electric cobalt         #0766E5
     sky / cyan              #1498E2 · #26DBF0 · #A3E0E6
     teal                    #129BA0 · #0B5C67
     emerald green           #169B64 · mint #30C060 / #54E89E
     warm gold (sparing)     #F0D030

   The flyer's colour language travels DEEP NAVY → ELECTRIC COBALT → CYAN →
   GREEN, then returns to small mint + restrained gold highlights:

     · blue/cyan       → atmospheric background glows behind content
     · green/mint      → small labels, active states, dividers, indicators
     · gold            → numbers, dates, small emphasis
     · deep navy       → darker surfaces

   Every decorative layer is extremely low opacity and sits behind content.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --camp-navy: #081b62;
  --camp-deepest: #060f45;
  --camp-cobalt: #0766e5;
  --camp-sky: #1498e2;
  --camp-cyan: #26dbf0;
  --camp-teal: #129ba0;
  --camp-emerald: #169b64;
  --camp-emerald-text: #0d7a52;
  --camp-mint: #2ad172;
  --camp-mint-soft: rgba(42, 209, 114, .3);
  --camp-gold: #f0d030;
  --camp-gold-em: #966b03;
  --camp-ink: rgba(5, 30, 80, .45);
}

/* Darker surfaces move from near-black toward the flyer's midnight navy, and
   the core action / label blues become the flyer's electric cobalt. Both
   themes share the shift so the whole system reads as one campaign family. */
:root,
:root[data-theme="dark"] {
  --color-forest: var(--camp-navy);
  --color-deepest: var(--camp-deepest);
  --color-action: var(--camp-cobalt);
  --color-action-hover: #0757c4;
}

:root {
  --color-bg: #f7f8f8;
  --color-surface: #eef3f6;
  --color-forest-soft: var(--camp-cobalt);
}

:root[data-theme="dark"] {
  --color-action-hover: #2b7bf0;
  --color-forest-soft: #93bcff;
}

/* ─────────────────────────────────────────────────────────────────────
   1 · ATMOSPHERIC GRADIENT FIELDS  (deep blue → cyan → green)
   Soft field glows on selected light sections; stronger macro fields on
   the dark navy wide (opportunity, invitation, footer). Applied via the
   sections' own background so no DOM is needed.
   ───────────────────────────────────────────────────────────────────── */

/* Context — cyan wash top-left, electric cobalt vapour top-right. */
#about {
  background:
    radial-gradient(46% 40% at 90% -2%, rgba(7, 102, 229, .08), transparent 70%),
    radial-gradient(36% 34% at 4% 8%, rgba(38, 219, 240, .06), transparent 72%),
    linear-gradient(180deg, rgba(8, 27, 98, .02), transparent 22%),
    var(--color-bg) !important;
}

/* Leadership themes — emerald field rising from the lower corner. */
#themes {
  background:
    radial-gradient(38% 36% at 96% 100%, rgba(18, 155, 100, .07), transparent 70%),
    radial-gradient(30% 42% at 6% 2%, rgba(7, 102, 229, .05), transparent 72%),
    var(--color-bg) !important;
}

/* Speakers — sky-blue light suspended behind the moving lanes. */
.atlas-page main > #speakers,
[data-theme="dark"] .atlas-page main > #speakers {
  background:
    radial-gradient(42% 52% at 80% 38%, rgba(20, 152, 226, .09), transparent 70%),
    radial-gradient(30% 40% at 38% 94%, rgba(22, 155, 100, .05), transparent 72%),
    var(--color-bg) !important;
}

/* Programme — cool electric aperture on the upper left of the agenda. */
#programme {
  background:
    radial-gradient(44% 46% at 8% 6%, rgba(7, 102, 229, .06), transparent 70%),
    radial-gradient(36% 44% at 96% 74%, rgba(22, 155, 100, .05), transparent 70%),
    var(--color-bg) !important;
}

/* Outcomes — emerald glow from the base, cobalt shear at the top. */
#outcome {
  background:
    radial-gradient(40% 38% at 6% 100%, rgba(22, 155, 100, .07), transparent 70%),
    radial-gradient(42% 40% at 94% 0%, rgba(7, 102, 229, .06), transparent 70%),
    var(--color-bg) !important;
}

/* Shared question panel — the navy surface gets cyan high and teal low. */
.atlas-question {
  background:
    radial-gradient(46% 90% at 90% 14%, rgba(38, 219, 240, .10), transparent 70%),
    radial-gradient(40% 80% at 2% 92%, rgba(18, 155, 160, .08), transparent 66%),
    linear-gradient(110deg, color-mix(in srgb, var(--color-surface) 96%, transparent), color-mix(in srgb, var(--color-forest) 85%, transparent)),
    url("../img/aglf-topographic-interface.f8353ab20fd0.webp") center / cover no-repeat;
}

/* Hero — a restrained cyan/mint field breathing behind the copy block. */
.atlas-hero-atmos {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 70% at 14% 40%, rgba(38, 219, 240, .10), transparent 62%),
    radial-gradient(40% 55% at 32% 6%, rgba(42, 209, 114, .05), transparent 62%);
}

/* Hero — background "breath": the cyan/mint fields and the topographic map
   image slowly pulse in and out. The redesign already reduces every
   animation to a single frame under prefers-reduced-motion, so this stays
   respectful of that setting automatically. */
@keyframes hero-bg-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: .6; }
}
.atlas-hero-atmos {
  animation: hero-bg-breathe 9s ease-in-out infinite;
  will-change: opacity;
}
.atlas-hero-image {
  animation: hero-bg-breathe 12s ease-in-out infinite;
}

/* Hero — live network nodes: the map halo rings pulse out from the hubs
   like decision signals. Staggered so the three hubs breathe in sequence. */
@keyframes hero-node-pulse {
  0% { opacity: .45; transform: scale(1); }
  60% { opacity: .06; transform: scale(2.1); }
  100% { opacity: 0; transform: scale(2.4); }
}
.atlas-map-network g .map-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-node-pulse 4.2s ease-out infinite;
  will-change: transform, opacity;
}
.atlas-map-network g:nth-of-type(1) .map-halo { animation-delay: -0.6s; }
.atlas-map-network g:nth-of-type(2) .map-halo { animation-delay: -2.2s; }
.atlas-map-network g:nth-of-type(3) .map-halo { animation-delay: -3.4s; }
.atlas-map-network .map-ring,
.atlas-map-network .map-point { animation: none; }

/* Opportunity (why-now interlude) — midnight navy base holds the topographic
   layer; a cyan field drifts in the upper right, an emerald field settles
   in the lower left: the flyer's signature blue→cyan→green drift. */
#opportunity::after {
  background:
    radial-gradient(34% 46% at 84% 6%, rgba(38, 219, 240, .16), transparent 72%),
    radial-gradient(42% 42% at 6% 96%, rgba(22, 155, 100, .13), transparent 70%),
    radial-gradient(circle at 58% 42%, rgba(5, 25, 90, .34), transparent 46%),
    linear-gradient(90deg, rgba(5, 19, 70, .97) 0%, rgba(6, 25, 82, .90) 50%, rgba(6, 25, 82, .55) 100%);
}

/* Invitation — the full navy → cobalt → cyan → emerald field sequence,
   held to low opacity so text stays dominant. */
.atlas-cta::before {
  background:
    radial-gradient(52% 100% at 22% 100%, rgba(11, 92, 103, .34), transparent 70%),
    radial-gradient(46% 100% at 38% 6%, rgba(7, 102, 229, .24), transparent 70%),
    radial-gradient(40% 100% at 62% 94%, rgba(163, 224, 230, .15), transparent 66%),
    radial-gradient(42% 100% at 82% 10%, rgba(22, 155, 100, .22), transparent 68%),
    linear-gradient(115deg, rgba(5, 19, 70, .18), rgba(5, 19, 70, 0) 56%);
}

/* Footer — teal rising from the lower-left, sky-blue kissing the top edge. */
.atlas-footer.site-footer {
  position: relative;
  background:
    radial-gradient(38% 60% at 10% 112%, rgba(18, 155, 160, .12), transparent 60%),
    radial-gradient(34% 56% at 96% 0%, rgba(20, 152, 226, .10), transparent 62%),
    var(--color-deepest) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   2 · GEOSPATIAL EMBROIDERY
   Faint topographic / map layers reusing the site's own cartographic SVG
   assets. Extremely low opacity, masked toward their anchor, and always
   behind the container content.
   ───────────────────────────────────────────────────────────────────── */

/* Context — contour lines breathe through the right-hand margin. */
#about::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: url("../img/aglf-contours.7e66f572b747.svg") 86% 64% / 42% auto no-repeat;
  opacity: .05;
  mask-image: linear-gradient(90deg, transparent, #000 42%, #000 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 42%, #000 78%, transparent 100%);
}

/* Leadership themes — a city/graticule grid emerging from the top-right. */
#themes::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: url("../img/aglf-city-grid.cdea15081100.svg") 96% 4% / 40% auto no-repeat;
  opacity: .05;
  mask-image: radial-gradient(66% 70% at 88% 18%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(66% 70% at 88% 18%, #000, transparent 78%);
}

/* Programme — an elevation sheet rising faintly behind the lower stack. */
#programme::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: url("../img/aglf-elevation.6f69971c1e47.svg") 10% 92% / 46% auto no-repeat;
  opacity: .04;
  mask-image: linear-gradient(180deg, transparent, #000 42%, #000 72%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 42%, #000 72%, transparent 100%);
}

/* ─────────────────────────────────────────────────────────────────────
   3 · COORDINATE MICRO-DETAILS
   Tiny mono coordinate text placed only in genuinely empty areas: the
   margin lane beside the context prose, the corner of the hero map, the
   register page margin, and the footer copyright line.
   ───────────────────────────────────────────────────────────────────── */

#about::before {
  content: "05.6037° N   ·   00.1870° W";
  position: absolute;
  z-index: 1;
  left: 1.25rem;
  top: 24%;
  color: var(--camp-ink);
  font: 400 .55rem/2 var(--font-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  opacity: .5;
  pointer-events: none;
}

.atlas-visual::after {
  content: "00.1870° W / 05.6037° N";
  position: absolute;
  z-index: 4;
  left: 6%;
  bottom: 8%;
  color: var(--color-copy);
  font: 500 .47rem/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .45;
  pointer-events: none;
}

.registration-page .reg-section::after {
  content: "05.6037° N · 00.1870° W  /  AGLF 2026 · ACC / GH";
  position: absolute;
  z-index: 0;
  left: clamp(1rem, 6vw, 3.75rem);
  bottom: clamp(2rem, 5vh, 3.5rem);
  color: var(--camp-ink);
  font: 400 .55rem/1 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .55;
  pointer-events: none;
}

/* Footer — appended to the existing copyright line; no layout change. */
.atlas-footer-bottom p::after {
  content: " ·  05.6037° N  00.1870° W  ·  ACC / GH";
  opacity: .55;
}

/* ─────────────────────────────────────────────────────────────────────
   4 · DIGITAL GRAIN
   A fixed full-viewport fractal-noise film at ~4% opacity. Very faint; it
   gives the flat sections the flyer's slightly textured digital surface
   without looking noisy or distressed.
   ───────────────────────────────────────────────────────────────────── */

body::after {
  content: "";
  position: fixed;
  z-index: 55;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: .04;
}

/* ─────────────────────────────────────────────────────────────────────
   5 · MINT / EMERALD ACCENTS  (small metadata, active states, indicators)
   Deliberately restrained: bright mint only for dots, dividers and the
   active nav indicator; a deeper emerald for legible label text on light
   surfaces. Calibrated to the flyer's mint greens (#30C060 / #54E89E).
   ───────────────────────────────────────────────────────────────────── */

/* Field labels carry the green DNA (bright mint on dark, emerald on light). */
.atlas-label { color: var(--camp-emerald-text); }
:root[data-theme="dark"] .atlas-label { color: var(--camp-mint); }

/* Active navigation indicator — a mint mission-pulse dot. */
.atlas-nav .nav-link.is-active::after {
  background: var(--camp-mint);
  box-shadow: 0 0 10px color-mix(in srgb, var(--camp-mint) 70%, transparent);
}

/* Objective markers become small mint signal points. */
.objective-brief li::before { background: var(--camp-mint); }

/* Short accent dividers above cards and archive entries. */
.theme-atlas-item::before,
.archive-item::before { background: var(--camp-mint); }

/* Hero data-card status dots read as mapped / modelled / linked lights. */
.map-layer i { background: var(--camp-emerald); }

/* Featured-leaders radar glyph tints cyan with a mint focal point. */
.fl-label .fl-label-glyph { color: var(--camp-cyan); }
.fl-label .fl-label-glyph circle:last-child { fill: var(--camp-mint); }

/* Section top rules run as emerald signal lines instead of cobalt. */
.atlas-section::before {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--camp-emerald) 30%, transparent) 20%, transparent 64%);
}

/* ─────────────────────────────────────────────────────────────────────
   6 · GOLD HIGHLIGHTS  (numbers / small emphasis)
   Bright flyer gold (#F0D030) for glows on dark; a deeper ochre of the
   same hue keeps numbers legible on light surfaces.
   ───────────────────────────────────────────────────────────────────── */

/* Forum-format step numbers. */
.format-number { color: var(--camp-gold-em); }

/* Outcome ledger counters ("01 / 02 …"). */
.outcome-atlas li::before { color: var(--camp-gold-em); }

/* ─────────────────────────────────────────────────────────────────────
   7 · TABLET & PHONE REFINEMENT
   Decorative coordinates that live in desktop-only empty lanes are removed
   on smaller screens; the embossed layers and grain stay but turn slightly
   quieter to preserve paint cost and quiet surfaces.
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  #about::before,
  .atlas-visual::after,
  .registration-page .reg-section::after { display: none; }
  #about::after,
  #themes::after { opacity: .035; }
  body::after { opacity: .03; }
}

@media (max-width: 640px) {
  #programme::after { opacity: .03; }
}

:root[data-theme="dark"] #about::after,
:root[data-theme="dark"] #themes::after,
:root[data-theme="dark"] #programme::after {
  filter: invert(1) opacity(.55);
}

/* ─────────────────────────────────────────────────────────────────────
   8 · WHY-NOW VARIANT — THEME-AWARE TEST LAYER
   A reusable reading of #opportunity's cartographic canvas, applied to two
   previously plain sections (#faq, #partners) as a preview:

     #faq      → midnight-navy topographic interlude in BOTH themes
                 (light mode wears the same dark canvas as dark mode).
     #partners → "Ghana as the launchpad" always wears the midnight-navy
                 topographic interlude in BOTH themes (matches its dark-
                 theme appearance even when the site is in light mode).

   Sections that already carry this language (#opportunity, .atlas-question,
   .atlas-cta, the footer, plus the field-glow sections) are left untouched.
   To stop the test simply remove `campaign-echo` from the section tags.
   ───────────────────────────────────────────────────────────────────── */

/* Shared — keep decorative layers behind the section content. */
#faq.campaign-echo > .container,
#partners.campaign-echo > .container { position: relative; z-index: 2; }

/* #faq — midnight-navy topographic interlude in every theme (light mode
   wears the same dark canvas as dark mode): nav-blues with cyan field
   top-right and emerald field bottom-left, on-dark text throughout. */
#faq.campaign-echo {
  color: var(--color-on-dark);
  background:
    radial-gradient(34% 46% at 84% 6%, rgba(38, 219, 240, .14), transparent 72%),
    radial-gradient(42% 42% at 6% 96%, rgba(22, 155, 100, .11), transparent 70%),
    var(--color-forest) !important;
  border-top-color: var(--color-line-dark);
}
#faq.campaign-echo::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 0 42%;
  pointer-events: none;
  background: url("../img/aglf-topographic-interface.f8353ab20fd0.webp") 30% center / cover no-repeat;
  opacity: .14;
  filter: saturate(.5) contrast(1.05);
}

/* #faq — on-dark text/row colours (now identical in both themes). */
#faq.campaign-echo h2 { color: var(--color-on-dark); }
#faq.campaign-echo .faq-question { color: var(--color-on-dark); }
#faq.campaign-echo .faq-question:hover,
#faq.campaign-echo .faq-item.is-open .faq-question { color: var(--camp-mint); }
#faq.campaign-echo .faq-question span { color: var(--camp-cyan); }
#faq.campaign-echo .faq-answer-inner { color: var(--color-on-dark-soft); }
#faq.campaign-echo .faq-list,
#faq.campaign-echo .faq-list .faq-item { border-color: var(--color-line-dark); }

/* #partners — "Ghana as the launchpad": midnight-navy topographic
   interlude (the #opportunity recipe) in every theme. */
#partners.campaign-echo {
  color: var(--color-on-dark);
  background:
    radial-gradient(34% 46% at 84% 6%, rgba(38, 219, 240, .14), transparent 72%),
    radial-gradient(42% 42% at 6% 96%, rgba(22, 155, 100, .11), transparent 70%),
    var(--color-forest) !important;
  border-top-color: var(--color-line-dark);
}
#partners.campaign-echo::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 0 42%;
  pointer-events: none;
  background: url("../img/aglf-topographic-interface.f8353ab20fd0.webp") 30% center / cover no-repeat;
  opacity: .14;
  filter: saturate(.5) contrast(1.05);
}

/* fallthrough removed: the shared navy rules above now apply to both
   themes, so the separate dark-mode FAQ block is no longer needed. */

/* FAQ — premium glass accordion (all themes). Each row turns into a
   frosted glass panel, filled when open: rounded corners, inset top
   highlight, blur, and the typed "+" sign in mint/cyan. */
#faq.campaign-echo .faq-list {
  border: 0;
  display: grid;
  gap: 12px;
}
#faq.campaign-echo .faq-item {
  margin: 0;
  padding: 0 22px;
  overflow: hidden;
  border: 1px solid var(--color-line-dark) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .045) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -1px 0 rgba(0, 145, 122, .04);
  transition: background var(--motion-base) ease, padding var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) ease, border-color var(--motion-base) ease;
}
#faq.campaign-echo .faq-question {
  font-weight: 600;
  letter-spacing: -0.01em;
}
#faq.campaign-echo .faq-question span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--camp-cyan) !important;
  background: rgba(38, 219, 240, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: transform var(--motion-base) var(--ease-out), color var(--motion-fast) ease,
    background var(--motion-fast) ease;
}
#faq.campaign-echo .faq-item:hover {
  border-color: rgba(38, 219, 240, .24) !important;
  background: rgba(255, 255, 255, .07) !important;
}
#faq.campaign-echo .faq-item.is-open {
  background: rgba(13, 122, 82, .14) !important;
  border-color: rgba(42, 209, 114, .32) !important;
}
#faq.campaign-echo .faq-item.is-open .faq-question span {
  color: var(--camp-mint) !important;
  background: rgba(42, 209, 114, .16);
}
#faq.campaign-echo .faq-answer-inner { padding: 0 40px 28px 0; }

/* Partners — grid, chips and text for the navy canvas (all themes). */
#partners.campaign-echo h2 { color: var(--color-on-dark); }
#partners.campaign-echo .convenor-grid h3 { color: var(--color-on-dark); }
#partners.campaign-echo .atlas-label { color: var(--camp-mint); }
#partners.campaign-echo .convenor-role { color: var(--camp-mint); }
#partners.campaign-echo .convenor-grid article > p:last-child,
#partners.campaign-echo .participant-intro > p:last-child { color: var(--color-on-dark-soft); }
#partners.campaign-echo .convenor-grid,
#partners.campaign-echo .convenor-grid article,
#partners.campaign-echo .participant-block { border-color: var(--color-line-dark) !important; }
#partners.campaign-echo .convenor-grid article {
  background: rgba(255, 255, 255, .045) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -1px 0 rgba(255, 255, 255, .03);
}
#partners.campaign-echo .participant-list span {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  color: var(--color-on-dark-soft);
}
#partners.campaign-echo .participant-list span:hover {
  border-color: color-mix(in srgb, var(--camp-mint) 50%, var(--color-line-dark));
  background: rgba(42, 209, 114, .08);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  color: var(--camp-mint);
}

/* ─────────────────────────────────────────────────────────────────────
   9 · SIX FIELDS (#themes) — HERO BACKGROUND TREATMENT
   The leadership-themes section borrows the hero's canvas in BOTH themes:
   the hero base colour (var(--color-bg) — off-white #f7f8f8 in light,
   near-black #0a0a0a in dark) with the same cyan drift top-left and a
   mint whisper top-right radial fields the hero wears. The six theme-atlas
   cards keep the same glassmorphic-but-still-transparent finish as the
   launchpad panels, switching frosted-white (light) / navy glass (dark).
   ───────────────────────────────────────────────────────────────────── */

/* #themes light mode — verbatim replica of the hero's light-mode canvas:
   the exact field overlay from .atlas-hero-atmos (cyan drift top-left,
   mint whisper top-right) over the hero base var(--color-bg), i.e. the
   off-white #f7f8f8 in light. */
#themes {
  color: var(--color-ink);
  background:
    radial-gradient(60% 70% at 14% 40%, rgba(38, 219, 240, .10), transparent 62%),
    radial-gradient(40% 55% at 32% 6%, rgba(42, 209, 114, .05), transparent 62%),
    var(--color-bg) !important;
  border-top-color: var(--color-line-soft);
}

/* #themes dark mode — the hero's canvas on the near-black base. */
:root[data-theme="dark"] #themes {
  background:
    radial-gradient(60% 70% at 14% 40%, rgba(38, 219, 240, .10), transparent 62%),
    radial-gradient(40% 55% at 32% 6%, rgba(42, 209, 114, .05), transparent 62%),
    var(--color-bg) !important;
}

/* The hero's actual background — its topographic map image, using the
   hero's own theme-aware variables (--hero-map-opacity and
   --map-image-filter), at a strength suited to sitting behind section
   copy, and masked at the edges so the content column stays clear. */
#themes::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: url("../img/aglf-topographic-interface.f8353ab20fd0.webp") center / cover no-repeat;
  opacity: calc(var(--hero-map-opacity) * .38);
  filter: var(--map-image-filter);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

/* Keep the section content above the map layer. */
#themes > .container { position: relative; z-index: 1; }

/* Dark mode — beat redesign's own #themes::after rule so the hero's dark
   map treatment (dark filter + opacity) is used here too. */
:root[data-theme="dark"] #themes::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: url("../img/aglf-topographic-interface.f8353ab20fd0.webp") center / cover no-repeat;
  opacity: calc(var(--hero-map-opacity) * .38);
  filter: var(--map-image-filter);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

.theme-atlas-item {
  background: rgba(255, 255, 255, .28) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(7, 102, 229, .05);
  border-right-color: rgba(7, 102, 229, .10) !important;
  border-bottom-color: rgba(7, 102, 229, .10) !important;
}

:root[data-theme="dark"] .theme-atlas-item {
  background: rgba(255, 255, 255, .045) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -1px 0 rgba(255, 255, 255, .03);
  border-right-color: rgba(255, 255, 255, .12) !important;
  border-bottom-color: rgba(255, 255, 255, .12) !important;
}

.theme-atlas-item:hover {
  background: rgba(255, 255, 255, .4) !important;
  border-color: color-mix(in srgb, var(--camp-cobalt) 36%, rgba(255, 255, 255, .3)) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  transform: translateY(-3px);
}

:root[data-theme="dark"] .theme-atlas-item:hover {
  background: rgba(255, 255, 255, .07) !important;
  border-color: rgba(255, 255, 255, .22) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
}

/* Practical information (#venue) — normal dark mode. Drop the special
   navy "coordinates" gradient and use the standard on-dark paper canvas
   (var(--color-bg), near-black) like every other section. */
:root[data-theme="dark"] #venue {
  isolation: isolate;
  background: var(--color-bg) !important;
}

/* Quiet the echo overlays on small screens. */
@media (max-width: 960px) {
  #faq.campaign-echo::after,
  #partners.campaign-echo::after { opacity: .03; }
}
@media (max-width: 640px) {
  #faq.campaign-echo::after,
  #partners.campaign-echo::after { opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────────────
   10 · SPEAKER PROFILE — PREMIUM CANVAS
   The profile pop-up (and the gallery drill-in) now wear the midnight-
   navy cartographic canvas: gold hairline frame, topographic whisper,
   cyan drift + emerald field, glass fact chips, and gold/mint accents
   on light-readable copy. Applies to the cloned .speaker-profile-content
   wherever it lands, so the #themes/FAQ/partners vocabulary carries into
   the modal.
   ───────────────────────────────────────────────────────────────────── */

.speaker-profile-panel {
  border-color: rgba(240, 208, 48, .28) !important;
}
.speaker-profile-modal .speaker-profile-head {
  border-bottom-color: rgba(240, 208, 48, .22) !important;
}
.speaker-profile-modal .speaker-modal-kicker {
  color: var(--camp-gold);
}

/* The cloned profile block becomes the canvas itself — a full two-column
   grid in every host, with a navy base, field glows and a faint topo
   layer sitting behind the media + details columns. */
.speaker-profile-content {
  position: relative;
  display: grid;
  grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
  grid-column: 1 / -1;
  padding: clamp(1.4rem, 3vw, 2.25rem);
  border: 1px solid rgba(240, 208, 48, .25);
  border-radius: 20px;
  background:
    radial-gradient(46% 60% at 88% 4%, rgba(38, 219, 240, .14), transparent 72%),
    radial-gradient(40% 55% at 4% 96%, rgba(22, 155, 100, .11), transparent 70%),
    linear-gradient(145deg, var(--camp-navy) 0%, var(--camp-deepest) 62%, #0b1e4e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 30px 70px rgba(5, 16, 64, .35);
}
.speaker-profile-content::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 0 42%;
  pointer-events: none;
  background: url("../img/aglf-topographic-interface.f8353ab20fd0.webp") center / cover no-repeat;
  opacity: .16;
  filter: saturate(.5) contrast(1.05);
  mask-image: linear-gradient(90deg, transparent, #000 55%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
}
.speaker-profile-content > .speaker-profile-media,
.speaker-profile-content > .speaker-profile-details {
  position: relative;
  z-index: 1;
}

/* Media column — framed like the launchpad convenor plates. */
.speaker-profile-media {
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(38, 219, 240, .12), transparent 55%),
    var(--camp-deepest);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    inset 0 -1px 0 rgba(0, 145, 122, .06);
}
.speaker-profile-media img {
  filter: saturate(.85) contrast(1.03);
}
.speaker-profile-media .speaker-image-placeholder {
  color: rgba(255, 255, 255, .92);
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(38, 219, 240, .2), transparent 58%),
    radial-gradient(120% 120% at 85% 100%, rgba(22, 155, 100, .16), transparent 60%),
    var(--camp-deepest);
}
.speaker-profile-media .speaker-image-label {
  color: var(--camp-gold);
  border-color: rgba(240, 208, 48, .4);
  background: rgba(6, 15, 69, .6);
}

/* Details column — on-dark, gold mono label, refined spacings. */
.speaker-profile-content .speaker-organisation {
  color: var(--camp-gold);
  font: 500 .62rem/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.speaker-profile-content .speaker-profile-name {
  color: var(--color-on-dark);
  text-shadow: 0 2px 24px rgba(38, 219, 240, .18);
}
.speaker-profile-content .speaker-role {
  color: var(--color-on-dark-soft);
}
.speaker-profile-content .speaker-facts div {
  border-color: var(--color-line-dark);
  background: rgba(255, 255, 255, .045);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.speaker-profile-content .speaker-facts dt {
  color: var(--camp-cyan);
}
.speaker-profile-content .speaker-facts dd {
  color: var(--color-on-dark);
}
.speaker-profile-content .speaker-bio > p {
  color: var(--color-on-dark-soft);
}
.speaker-profile-content .speaker-socials {
  border-top: 1px solid var(--color-line-dark);
}
.speaker-profile-content .speaker-social {
  border-color: var(--color-line-dark);
  color: var(--color-on-dark-soft);
}
.speaker-profile-content .speaker-social:hover {
  color: var(--camp-mint);
  border-color: rgba(42, 209, 114, .5);
  background: rgba(42, 209, 114, .08);
}

@media (max-width: 640px) {
  .speaker-profile-content {
    grid-template-columns: 1fr;
    padding: 1.25rem;
  }
}