/*
Theme Name:   Wild Orbit
Theme URI:    https://thewildorbit.com/
Author:       The Wild Orbit
Author URI:   https://thewildorbit.com/
Description:  A bespoke expedition-journal theme for The Wild Orbit — guided journeys through the Sundarban, the Himalayas and the Northeast. Ships an editable one-page front page built from Expeditions, Stories, Wildlife, Places and Field Reports, plus full archive, single and search templates.
Version:      1.0.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  wild-orbit
Tags:         one-column, custom-logo, custom-menu, featured-images, translation-ready, block-styles, wide-blocks, dark-mode-support
*/

/* ==========================================================================
   THE WILD ORBIT — stylesheet
   Source of truth: Figma "Orbit" / page Showpage-WO (node 3:3189)

   Conventions
   -----------
   • Every type size is fluid via clamp() and lives in the token block below.
     No component sets a fixed font-size — change a token, the site follows.
   • The orbit diagram is built from CSS circles + one SVG for the curved
     connectors only. Nothing is a flattened image.
   • position:absolute is used only for genuinely positioned decoration
     (orbit nodes, map pins, card overlays) — never for page layout.

   Contents
   --------
     1.  Design tokens
     2.  Reset & base
     3.  Layout helpers
     4.  Reusable components
     5.  Header / navigation
     6.  Hero
     7.  About — orbit system
     8.  Featured expeditions
     9.  Discover map
     10. Stories
     11. Wildlife
     12. Scores
     13. Orbit arc
     14. Testimonials
     15. Join us
     16. Footer
     17. Responsive
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* --- Brand colours (sampled from the Figma file) --- */
  --color-gold:          #ae7c35;   /* buttons, card borders          */
  --color-gold-light:    #f1ad4e;   /* headings, rings, accents       */
  --color-gold-warm:     #f5a623;
  --color-gold-pale:     #ffdfad;
  --color-cream:         #f8f3ed;
  --color-white:         #ffffff;

  --color-background:    #020a0b;   /* page ground                    */
  --color-surface:       #0d1714;   /* orbit core + icon discs        */
  --color-surface-alt:   #0b120f;
  --color-forest:        #223832;   /* scroll-cue button              */
  --color-muted:         #a4a4a4;
  --color-muted-dark:    #5e5e5e;

  /* --- Surfaces & overlays --- */
  --overlay-hero:        rgba(0, 0, 0, 0.34);
  --overlay-section:     rgba(2, 10, 11, 0.72);
  --surface-nav:         rgba(0, 10, 10, 0.8);
  --surface-glass:       rgba(2, 10, 11, 0.34);
  --surface-eyebrow:     rgba(255, 204, 0, 0.15);
  --border-glass:        rgba(255, 255, 255, 0.55);
  --border-hairline:     rgba(255, 255, 255, 0.12);

  /* --- Text --- */
  --color-text:          var(--color-white);
  --color-text-soft:     var(--color-cream);
  --color-accent:        var(--color-gold-light);

  /* --- Brand wordmark gradient (stops read straight from the Figma fill) --- */
  --gradient-wordmark: linear-gradient(
    180deg,
    #704100 0%,
    #fcd761 36%,
    #ffdfad 48%,
    #e9ae2a 57%,
    #4e2c00 96%
  );

  /* --- Font families --- */
  --font-display: "Hedvig Letters Serif", Georgia, "Times New Roman", serif;
  --font-brand:   "Cinzel", Georgia, serif;
  --font-body:    "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* --- Fluid type scale -------------------------------------------------
     Every size below is clamp(min, preferred, max). The max matches the
     Figma value at 1920px; the min keeps things readable on a 320px phone. */
  --fs-hero:         clamp(2.25rem,  1.30rem + 3.30vw, 4.6875rem); /* 36 → 75 */
  --fs-display:      clamp(2rem,     1.20rem + 2.70vw, 3.75rem);   /* 32 → 60 */
  --fs-section:      clamp(1.75rem,  1.20rem + 1.90vw, 3rem);      /* 28 → 48 */
  --fs-brand-lg:     clamp(1.375rem, 0.95rem + 1.80vw, 2.5rem);    /* 22 → 40 */
  --fs-brand:        clamp(1.125rem, 0.80rem + 1.10vw, 1.75rem);   /* 18 → 28 */
  --fs-card-title:   clamp(1.125rem, 0.95rem + 0.70vw, 1.5rem);    /* 18 → 24 */
  --fs-quote:        clamp(1.125rem, 0.95rem + 0.70vw, 1.5rem);    /* 18 → 24 */
  --fs-panel-title:  clamp(1.125rem, 0.95rem + 0.70vw, 1.5rem);    /* 18 → 24 */
  --fs-h3:           clamp(1rem,     0.90rem + 0.40vw, 1.25rem);   /* 16 → 20 */
  --fs-eyebrow:      clamp(0.875rem, 0.83rem + 0.20vw, 1rem);      /* 14 → 16 */
  --fs-link:         clamp(0.875rem, 0.83rem + 0.20vw, 1rem);      /* 14 → 16 */
  --fs-link-sm:      clamp(0.8125rem,0.78rem + 0.15vw, 0.875rem);  /* 13 → 14 */
  --fs-lead:         clamp(0.9375rem,0.90rem + 0.20vw, 1rem);      /* 15 → 16 */
  --fs-chip:         clamp(0.875rem, 0.83rem + 0.20vw, 1rem);      /* 14 → 16 */
  --fs-map-label:    clamp(0.75rem,  0.70rem + 0.30vw, 1rem);      /* 12 → 16 */
  --fs-nav:          clamp(0.75rem,  0.70rem + 0.25vw, 0.875rem);  /* 12 → 14 */
  --fs-body:         clamp(0.9375rem,0.90rem + 0.20vw, 1rem);      /* 15 → 16 */
  --fs-small:        clamp(0.8125rem,0.78rem + 0.15vw, 0.875rem);  /* 13 → 14 */
  --fs-badge:        clamp(0.625rem, 0.60rem + 0.15vw, 0.6875rem);
  --fs-fineprint:    clamp(0.5625rem,0.55rem + 0.10vw, 0.625rem);
  --fs-stat:         clamp(2rem,     1.30rem + 2.60vw, 3.75rem);   /* 32 → 60 */
  --fs-stat-symbol:  clamp(2.5rem,   1.70rem + 3.00vw, 4.5rem);    /* 40 → 72 */
  --fs-quote-mark:   clamp(4.5rem,   2.50rem + 6.20vw, 8.75rem);   /* 72 → 140 */
  --fs-compass:      clamp(0.75rem,  0.72rem + 0.15vw, 0.875rem);

  /* --- Fluid line-height & tracking --- */
  --lh-tight:        clamp(1.05, 1.02 + 0.15vw, 1.15);
  --lh-normal:       1.55;
  --tracking-brand:  clamp(0.04em, 0.03em + 0.08vw, 0.05em);

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* --- Spacing scale --- */
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: clamp(2rem,    1.30rem + 2.2vw, 3rem);
  --space-20: clamp(2.5rem,  1.60rem + 2.8vw, 3.75rem);
  --space-24: clamp(2.75rem, 1.75rem + 3.2vw, 4.5rem);

  /* --- Layout --- */
  --container-max: 1640px;
  --gutter:        clamp(1.25rem, 4vw, 4.375rem);
  --nav-height:    clamp(64px, 3.5rem + 2vw, 96px);

  /* --- Radii, effects --- */
  --radius-pill: 999px;
  --radius-none: 0;
  --blur-nav:    17.5px;
  --blur-glass:  22px;   /* the glass pills; doubled from the original 11px */
  --transition:  200ms ease;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--color-gold-light); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   3. LAYOUT HELPERS
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { position: relative; isolation: isolate; overflow: hidden; }

.section__bg { position: absolute; inset: 0; z-index: -2; }
.section__bg img { width: 100%; height: 100%; object-fit: cover; }
.section__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--overlay-section);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   4. REUSABLE COMPONENTS
   ========================================================================== */

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-8);
  min-height: clamp(42px, 2.2rem + 1.2vw, 49px);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background-color: var(--color-gold); color: var(--color-white); }
.btn--primary:hover { background-color: var(--color-gold-light); }

.btn--ghost {
  background-color: var(--surface-glass);
  border: 2px solid var(--color-gold);
  color: var(--color-white);
  backdrop-filter: blur(4px);
}
.btn--ghost:hover { background-color: var(--color-gold); }

.btn--nav { font-size: var(--fs-nav); }

/* --- Eyebrow pill --- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-8);
  background-color: var(--surface-eyebrow);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(var(--blur-glass));
  font-size: var(--fs-eyebrow);
  color: var(--color-white);
}
.eyebrow img {
  width: clamp(12px, 0.6rem + 0.4vw, 16px);
  height: clamp(12px, 0.6rem + 0.4vw, 16px);
  flex-shrink: 0;
}

/* --- Gradient wordmark ---
   The gold ramp is reserved for the "THE WILD ORBIT" logo text only. --- */
.wordmark {
  font-family: var(--font-brand);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-brand);
  background-image: var(--gradient-wordmark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Section heading --- */
.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--color-accent);
  text-align: center;
}
.section-title--left { text-align: left; margin-top: var(--space-8); }

/* --- Card link with arrow --- */
.card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-size: var(--fs-link);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  color: var(--color-accent);
  transition: gap var(--transition);
}
.card-link:hover { gap: var(--space-4); }
.card-link img { width: clamp(18px, 1rem + 0.4vw, 24px); height: auto; }

/* --- Scroll reveal --- */
/* Scoped to .js — set by a one-line inline script in the document head.
   Without it every expedition, story, animal and quote sits at opacity:0
   with nothing to reveal it: a script that fails to load, a blocked CDN or a
   crawler that does not execute JavaScript would see an empty page. The
   starting state therefore belongs to the JavaScript build of the page, not
   to the page itself. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* --- Shared photographic card shell --- */
.media-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(360px, 20rem + 12vw, 488px);
  padding: var(--space-8);
  border: 1px solid var(--color-gold);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--transition), transform var(--transition);
}
.media-card:hover { transform: translateY(-6px); border-color: var(--color-gold-light); }

.media-card__media { position: absolute; inset: 0; z-index: -1; }
.media-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}
.media-card:hover .media-card__media img { transform: scale(1.05); }
.media-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(2, 10, 11, 0) 0%, var(--color-background) 80.74%);
}

.media-card__badge {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  padding: 5px 14px;
  background-color: rgba(2, 10, 11, 0.6);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(5px);
  font-size: var(--fs-badge);
  color: #b1b1b1;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
}
.section-head__text { max-width: 703px; }

/* ==========================================================================
   5. HEADER / NAVIGATION
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-height);
  background-color: var(--surface-nav);
  backdrop-filter: blur(var(--blur-nav));
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  height: 100%;
}

.brand { display: flex; align-items: center; gap: var(--space-4); flex-shrink: 0; }
.brand__mark {
  width: clamp(38px, 2rem + 1.4vw, 60px);
  height: clamp(38px, 2rem + 1.4vw, 60px);
  object-fit: contain;
}
.brand__text { display: flex; flex-direction: column; gap: 4px; }
.brand__name { font-size: var(--fs-brand); line-height: 1.1; white-space: nowrap; }
.brand__rule { width: 100%; height: auto; }

.nav { display: flex; align-items: center; gap: var(--space-10); }
.nav__list { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 4.375rem); }
.nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--space-2);
  font-size: var(--fs-nav);
  text-transform: uppercase;
  color: var(--color-white);
  opacity: 0.5;
  transition: opacity var(--transition), color var(--transition);
}
.nav__link:hover { opacity: 1; }
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 53px; height: 2px;
  background-color: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav__item--active .nav__link {
  color: var(--color-gold);
  opacity: 1;
  font-weight: var(--fw-bold);
}
.nav__item--active .nav__link::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: var(--space-6); }
.icon-btn {
  display: grid;
  place-items: center;
  flex-shrink: 0;            /* stops flex squashing the circle into an oval */
  width: clamp(24px, 1.2rem + 0.6vw, 30px);
  height: clamp(24px, 1.2rem + 0.6vw, 30px);
  opacity: 0.9;
  transition: opacity var(--transition);
}
.icon-btn:hover { opacity: 1; }
.icon-btn img { width: 100%; height: 100%; }

.nav-toggle { display: none; width: 44px; height: 44px; padding: 10px; }
.nav-toggle span { display: block; height: 2px; background-color: var(--color-white); transition: transform var(--transition), opacity var(--transition); }
.nav-toggle span + span { margin-top: 6px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ==========================================================================
   6. HERO
   ========================================================================== */
.hero {
  display: flex;
  align-items: flex-end;
  min-height: clamp(560px, 40rem + 12vw, 1082px);
  padding-block: calc(var(--nav-height) + var(--space-16)) var(--space-16);
}
.hero .section__bg::after { background-color: var(--overlay-hero); }

.hero__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
}
.hero__content { max-width: 660px; }
.hero__title {
  margin-block: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--color-cream);
}
.hero__title em { font-style: normal; color: var(--color-accent); }
.hero__lead {
  max-width: 515px;
  margin-bottom: var(--space-10);
  font-size: var(--fs-lead);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-8); }

.hero__counter { flex-shrink: 0; text-align: right; }
.hero__counter-current { font-size: var(--fs-stat); color: var(--color-cream); line-height: 1; }
.hero__counter-total { font-size: var(--fs-section); color: var(--color-accent); }
.hero__progress { margin-top: var(--space-6); width: min(288px, 40vw); margin-left: auto; }

/* ==========================================================================
   7. ABOUT - ORBIT DIAGRAM
   The rings, connectors, nodes and the six icon discs are drawn once as a
   single SVG diagram using the exact Figma coordinates (section space
   1928x964, cropped to viewBox "185 195 1560 685"). Only the centre content
   -- emblem, wordmark, caption, button -- and the six labels are HTML, so
   every word stays editable.
   ========================================================================== */
.about { padding-block: var(--space-16) var(--space-20); }
.about__title { margin-bottom: var(--space-12); }

.orbit-system {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  aspect-ratio: 1560 / 685;
}

/* --- The drawn diagram --- */
.orbit-diagram { position: absolute; inset: 0; width: 100%; height: 100%; }

.orbit-diagram__lines * {
  fill: none;
  stroke: var(--color-gold-light);
  stroke-width: 2;
  stroke-dasharray: 9 11;
  stroke-linecap: round;
  opacity: 0.9;
}
.orbit-diagram__dots circle { fill: var(--color-gold-light); }
.orbit-diagram__discs circle {
  fill: var(--color-surface);
  stroke: rgba(241, 173, 78, 0.45);
  stroke-width: 1;
}

/* --- Centre disc: real HTML on top of the diagram --- */
.orbit-core {
  position: absolute;
  left: 49.94%;
  top: 49.78%;
  width: 33.97%;                /* 530 / 1560 */
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.2rem, 1cqw, 1rem);
  padding: 6%;
  overflow: hidden;
  text-align: center;
  background-color: var(--color-surface);
  border: 1px solid var(--color-gold-light);
  border-radius: 50%;
}

/* Inner type is sized in cqw so it scales with the disc, never the viewport.
   Ratios from Figma: emblem 253/530, wordmark 48/1560, caption 16/1560. */
.orbit-core__emblem { width: 47.7%; height: auto; }
.orbit-core__name {
  font-size: clamp(1rem, 3.077cqw, 3rem);
  line-height: 1.1;
  white-space: nowrap;
}
.orbit-core__caption {
  max-width: 60%;
  font-size: clamp(0.625rem, 1.026cqw, 1rem);
  line-height: 1.45;
  color: var(--color-white);
}
.orbit-core__cue {
  display: grid;
  place-items: center;
  flex-shrink: 0;              /* keep it round inside the flex column */
  aspect-ratio: 1;
  width: clamp(30px, 3.243cqw, 51px);
  height: auto;
  margin-top: var(--space-2);
  background-color: var(--color-forest);
  border-radius: var(--radius-pill);
  transition: transform var(--transition);
}
.orbit-core__cue:hover { transform: translateY(3px); }
.orbit-core__cue img { width: 34%; height: auto; }

/* --- Category labels: positioned at their exact Figma text origins --- */
.orbit-label {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-size: clamp(0.8rem, 1.538cqw, 1.5rem);   /* 24 / 1560 */
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-white);
  transition: color var(--transition);
}
.orbit-label:hover { color: var(--color-accent); }

/* Shown only when the diagram is swapped out on small screens */
.orbit-label__icon { display: none; }

/* ==========================================================================
   8. FEATURED EXPEDITIONS
   ========================================================================== */
.expeditions {
  background-color: var(--color-background);
  border-top: 1px solid var(--border-hairline);
  padding-block: var(--space-16) var(--space-20);
}
.expedition-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--color-white);
  text-transform: uppercase;
}
.expedition-card__subtitle { margin-top: var(--space-2); font-size: var(--fs-link); }
.expedition-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
}
.expedition-card__meta img {
  width: clamp(17px, 1rem + 0.3vw, 21px);
  height: auto;
  flex-shrink: 0;
}
.expedition-card__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
  font-size: var(--fs-lead);
}
.expedition-card__tags li { display: flex; align-items: center; gap: var(--space-4); }
.expedition-card__tags li + li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: var(--radius-pill);
  background-color: var(--color-white);
}

/* ==========================================================================
   9. DISCOVER MAP
   ========================================================================== */
.map-section {
  position: relative;
  background-color: var(--color-background);
  border-top: 1px solid var(--border-hairline);
  padding-block: var(--space-16) var(--space-20);
}
.map-section__bg { position: absolute; inset: 0; z-index: -2; opacity: 0.6; overflow: hidden; }
.map-section__bg img { width: 100%; height: 100%; object-fit: cover; }
.map-section__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(2, 10, 11, 0.49), rgba(2, 10, 11, 0));
}
.map-section__lead {
  max-width: 900px;
  margin-top: var(--space-6);
  font-size: var(--fs-link);
}

.map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 410px);
  gap: var(--space-12);
  align-items: start;
  margin-top: var(--space-12);
}
.map-stage { position: relative; aspect-ratio: 1180 / 760; min-height: 320px; }

.map-pin {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  transition: transform var(--transition);
}
.map-pin:hover { transform: translate(-50%, -50%) scale(1.08); }
.map-pin__icon {
  width: clamp(16px, 0.9rem + 0.6vw, 25px);
  height: auto;
  flex-shrink: 0;
}
.map-pin__icon--active { display: none; }
.map-pin__label { font-size: var(--fs-map-label); font-weight: var(--fw-medium); transition: color var(--transition); }
.map-pin:hover .map-pin__label { color: var(--color-accent); }
.map-pin[aria-current="true"] .map-pin__icon--default { display: none; }
.map-pin[aria-current="true"] .map-pin__icon--active { display: block; }
.map-pin[aria-current="true"] .map-pin__label { color: var(--color-accent); }

.map-compass { position: absolute; left: 2%; bottom: 2%; width: clamp(56px, 5vw + 1rem, 111px); text-align: center; }
.map-compass img { width: 100%; height: auto; }
.map-compass figcaption { font-family: var(--font-display); font-size: var(--fs-compass); color: var(--color-accent); }

.map-detail:hover { transform: none; }
.map-detail__title {
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: #c78634;
}
.map-detail__text { margin-top: var(--space-3); font-size: var(--fs-small); }
.map-detail .card-link { font-size: var(--fs-link-sm); }

.map-note {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background-color: var(--surface-glass);
  border: 1px solid var(--color-gold);
  backdrop-filter: blur(4px);
  font-size: var(--fs-body);
  text-align: center;
}
.map-note strong { color: var(--color-accent); font-weight: var(--fw-regular); }

/* ==========================================================================
   10. STORIES
   ========================================================================== */
.stories {
  background-color: #050f0b;
  border-top: 1px solid var(--border-hairline);
  padding-block: var(--space-16) var(--space-20);
}
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-12); }
.filter-chip {
  padding: var(--space-3) var(--space-8);
  min-height: clamp(42px, 2.2rem + 1.2vw, 51px);
  background-color: var(--color-background);
  border: 1px solid rgba(177, 177, 177, 0.28);
  border-radius: var(--radius-pill);
  font-size: var(--fs-chip);
  color: #838383;
  transition: color var(--transition), border-color var(--transition);
}
.filter-chip:hover { color: var(--color-cream); border-color: var(--border-glass); }
.filter-chip[aria-pressed="true"] { color: var(--color-accent); border-color: rgba(241, 173, 78, 0.28); }

.story-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--color-white);
}
.story-card__excerpt { margin-top: var(--space-3); font-size: var(--fs-small); }
.story-card .card-link { font-size: var(--fs-link-sm); }
.story-card[hidden] { display: none; }

/* ==========================================================================
   11. WILDLIFE
   ========================================================================== */
/* Shared backdrop: dark green ground with the Figma "Ellipse 1269" glow
   bleeding in from the top edge. Used by Wildlife and Join Us. */
.section--glow { position: relative; background-color: #0e1a15; }
.section--glow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: min(1677px, 92%);
  aspect-ratio: 1677 / 561;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(241, 173, 78, 0.30) 0%,
    rgba(241, 173, 78, 0.10) 40%,
    rgba(241, 173, 78, 0) 70%
  );
  pointer-events: none;
  z-index: -1;
}

.wildlife {
  border-top: 1px solid var(--border-hairline);
  padding-block: var(--space-16) var(--space-20);
  text-align: center;
}
.wildlife__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.wildlife__title { margin-bottom: var(--space-16); }
.wildlife__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(0.75rem, 1.4vw, 1.5rem); }

/* Figma column: figure 305x325, 25px gap, panel 305x153 */
.animal-card {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.6vw, 1.5625rem);
}

.animal-card__figure {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 305 / 325;
}
.animal-card__ring {
  position: absolute;
  width: 92.8%;              /* 283 / 305 */
  height: auto;
  opacity: 0.75;
  pointer-events: none;
}
.animal-card__img {
  position: relative;
  width: 82%;                /* 250 / 305 */
  height: auto;
  object-fit: contain;
  transition: transform var(--transition);
}
.animal-card:hover .animal-card__img { transform: scale(1.05); }

.animal-card__panel {
  padding: clamp(0.75rem, 1.2vw, 1.125rem) var(--space-4);
  border: 1px solid rgba(174, 124, 53, 0.55);
  text-align: center;
  transition: border-color var(--transition), background-color var(--transition);
}
.animal-card:hover .animal-card__panel {
  border-color: var(--color-gold);
  background-color: rgba(2, 10, 11, 0.35);
}
.animal-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  color: var(--color-cream);
}
.animal-card__quote {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--color-muted);
}
.animal-card__panel .card-link {
  margin-top: var(--space-4);
  font-size: var(--fs-link-sm);
  font-weight: var(--fw-regular);
  text-transform: none;
}

/* ==========================================================================
   12. SCORES
   ========================================================================== */
.scores {
  background-color: var(--color-surface-alt);
  border-top: 1px solid var(--border-hairline);
  padding-block: var(--space-16);
}
.scores__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); text-align: center; }
.stat__value { font-family: var(--font-display); font-size: var(--fs-stat); line-height: 1; color: var(--color-accent); }
.stat__value--symbol { font-size: var(--fs-stat-symbol); }
.stat__label { margin-top: var(--space-4); font-size: var(--fs-body); }

/* ==========================================================================
   13. ORBIT ARC
   ========================================================================== */
.arc {
  background-color: var(--color-surface);
  border-top: 1px solid var(--border-hairline);
  padding-block: var(--space-16) var(--space-20);
  text-align: center;
}
.arc__emblem { width: clamp(52px, 4vw + 1rem, 75px); height: auto; margin: 0 auto var(--space-6); }
.arc__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.arc__title { margin-bottom: var(--space-20); }
.arc__steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-6);
  border-top: 1px solid rgba(241, 173, 78, 0.4);
}
.arc-step { position: relative; padding-top: var(--space-12); }
.arc-step__marker {
  position: absolute;
  top: 0; left: 50%;
  width: clamp(20px, 1rem + 0.8vw, 28px);
  height: clamp(20px, 1rem + 0.8vw, 28px);
  transform: translate(-50%, -50%) rotate(45deg);
  background-color: var(--color-surface);
  border: 2px solid var(--color-gold-light);
}
.arc-step--done .arc-step__marker { background-color: var(--color-gold-light); }
.arc-step__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-regular); color: var(--color-accent); }
.arc-step__text { max-width: 22ch; margin: var(--space-3) auto 0; font-size: var(--fs-body); color: var(--color-muted); }

/* ==========================================================================
   14. TESTIMONIALS
   ========================================================================== */
.testimonials {
  background-color: var(--color-surface-alt);
  border-top: 1px solid var(--border-hairline);
  padding-block: var(--space-16) var(--space-20);
}
.testimonials__title { margin-bottom: var(--space-16); }
.testimonials__title span { color: var(--color-white); }
.testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }

.quote-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(320px, 20rem + 10vw, 501px);
  padding: var(--space-12) var(--space-10) var(--space-10);
  background-color: var(--color-surface);
  transition: transform var(--transition);
}
.quote-card:hover { transform: translateY(-6px); }
.quote-card::before {
  content: "“";
  position: absolute;
  top: -0.35em;
  left: var(--space-8);
  font-family: var(--font-display);
  font-size: var(--fs-quote-mark);
  line-height: 1;
  color: var(--color-accent);
  pointer-events: none;
}
.quote-card__text { font-family: var(--font-display); font-size: var(--fs-quote); line-height: var(--lh-tight); }
.quote-card__author {
  margin-top: var(--space-8);
  font-size: var(--fs-body);
  text-transform: uppercase;
  color: var(--color-muted-dark);
  font-style: normal;
}

/* ==========================================================================
   15. JOIN US
   ========================================================================== */
.join {
  border-top: 1px solid var(--border-hairline);
  padding-block: var(--space-16) var(--space-20);
  text-align: center;
}
.join__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.join__lead { max-width: 538px; margin: var(--space-8) auto 0; font-size: var(--fs-lead); color: var(--color-muted); }
.join__panel {
  max-width: 951px;
  margin: var(--space-12) auto 0;
  padding: var(--space-12) var(--space-8);
  background-color: rgba(13, 21, 18, 0.34);
  backdrop-filter: blur(4px);
}
.join__panel-title { font-family: var(--font-display); font-size: var(--fs-panel-title); font-weight: var(--fw-regular); }
.signup-form { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-8); }
.signup-form__input {
  width: 343px;
  max-width: 100%;
  padding: var(--space-3);
  background-color: rgba(4, 63, 45, 0.02);
  border: 1px solid rgba(174, 124, 53, 0.17);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--fs-small);
}
.signup-form__input::placeholder { color: rgba(94, 94, 94, 0.6); }
.signup-form__input:focus { outline: none; border-color: var(--color-gold); }
.join__fineprint { max-width: 264px; margin: var(--space-4) auto 0; font-size: var(--fs-fineprint); color: var(--color-muted); }
.form-status { margin-top: var(--space-4); font-size: var(--fs-small); color: var(--color-accent); }

/* ==========================================================================
   16. FOOTER
   ========================================================================== */
.site-footer {
  background-color: var(--color-background);
  border-top: 1px solid var(--border-hairline);
  padding-block: var(--space-16) var(--space-10);
}
.site-footer__top { display: grid; grid-template-columns: minmax(0, 404px) repeat(5, 1fr); gap: var(--space-10); }
.site-footer .brand { margin-bottom: var(--space-6); }
.site-footer__about { font-size: var(--fs-lead); color: var(--color-muted); }
.social-list { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-8); }
.social-list a { font-size: var(--fs-body); text-transform: uppercase; color: var(--color-white); transition: color var(--transition); }
.social-list a:hover { color: var(--color-accent); }

.footer-col__title {
  margin-bottom: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  color: var(--color-accent);
}
.footer-col li + li { margin-top: var(--space-3); }
.footer-col a { font-size: var(--fs-body); color: var(--color-muted); transition: color var(--transition); }
.footer-col a:hover { color: var(--color-white); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(174, 124, 53, 0.25);
  font-size: var(--fs-body);
  color: var(--color-muted);
}
.legal-list { display: flex; gap: var(--space-8); }
.legal-list a:hover { color: var(--color-white); }

/* ==========================================================================
   17. RESPONSIVE
   Type scales itself through clamp(), so these rules only change LAYOUT.
   ========================================================================== */

/* --- Tablet / small desktop --- */
@media (max-width: 1200px) {
  .nav__list { display: none; }
  .nav-toggle { display: block; }
  .site-header__inner { gap: var(--space-4); }

  .nav__list.is-open {
    display: flex;
    position: absolute;
    top: var(--nav-height);
    left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-4) var(--gutter) var(--space-8);
    background-color: var(--surface-nav);
    backdrop-filter: blur(var(--blur-nav));
    border-top: 1px solid var(--border-hairline);
  }
  .nav__list.is-open .nav__link { padding-block: var(--space-4); }

  .hero__inner { flex-direction: column; align-items: flex-start; gap: var(--space-10); }
  .hero__counter { text-align: left; }
  .hero__progress { margin-left: 0; }

  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .section-head { margin-bottom: var(--space-10); }

  .map-layout { grid-template-columns: 1fr; }
  .wildlife__grid { grid-template-columns: repeat(3, 1fr); }
  .wildlife__title { margin-bottom: var(--space-10); }
  .scores__list { grid-template-columns: repeat(2, 1fr); gap: var(--space-12); }
  .arc__steps { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-12); }
  .arc__title { margin-bottom: var(--space-12); }
  .testimonials__grid { grid-template-columns: 1fr; }
  .quote-card { min-height: 0; padding-top: var(--space-16); }
  .testimonials__title { margin-bottom: var(--space-10); }
  .site-footer__top { grid-template-columns: repeat(3, 1fr); }
  .site-footer__about { grid-column: 1 / -1; }
}

/* --- Orbit: below this width the radial layout stops being legible, so it
       becomes a stacked composition instead of a squeezed one. --- */
@media (max-width: 900px) {
  .orbit-system {
    container-type: normal;
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8) var(--space-4);
    place-items: center;
  }

  /* The drawn diagram is far too wide to read on a phone, so it is replaced
     by the same six links rendered as icon discs. Nothing is duplicated on
     screen — exactly one of the two is ever visible. */
  .orbit-diagram { display: none; }

  /* Container queries are off below this width, so the core's inner type
     falls back to the fluid viewport tokens. */
  .orbit-core {
    position: static;
    transform: none;
    order: -1;
    grid-column: 1 / -1;
    width: min(340px, 78vw);
    padding: 9%;
    margin-bottom: var(--space-6);
  }
  .orbit-core__name { font-size: var(--fs-brand); white-space: normal; }
  .orbit-core__caption { font-size: var(--fs-small); max-width: 85%; }
  .orbit-core__cue { width: 44px; height: 44px; }

  .orbit-label {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--fs-h3);
    white-space: normal;
    text-align: center;
  }
  .orbit-label__icon {
    display: block;
    width: clamp(64px, 18vw, 104px);
    height: clamp(64px, 18vw, 104px);
    padding: 14%;
    background-color: var(--color-surface);
    border: 1px solid rgba(241, 173, 78, 0.45);
    border-radius: 50%;
    object-fit: contain;
  }

  .orbit-node {
    position: static;
    transform: none;
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }
  .orbit-node__label {
    position: static;
    margin: 0 !important;
    white-space: normal;
  }
}

/* --- Mobile --- */
@media (max-width: 767px) {
  :root { --gutter: 1.25rem; }

  .hero__actions { gap: var(--space-4); }
  .hero__actions .btn { flex: 1 1 auto; }

  .card-grid { grid-template-columns: 1fr; }
  .media-card { padding: var(--space-6); }
  .section-head { flex-direction: column; align-items: flex-start; }

  .map-stage { aspect-ratio: 1 / 1; }
  .wildlife__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .animal-card__panel { padding: var(--space-3); }

  .arc__steps {
    grid-template-columns: 1fr;
    border-top: 0;
    border-left: 1px solid rgba(241, 173, 78, 0.4);
    margin-left: 14px;
    text-align: left;
    row-gap: var(--space-8);
  }
  .arc-step { padding-top: 0; padding-left: var(--space-8); }
  .arc-step__marker { top: 8px; left: 0; }
  .arc-step__text { margin-inline: 0; max-width: none; }

  .quote-card { padding: var(--space-12) var(--space-6) var(--space-6); }
  .quote-card::before { left: var(--space-4); }

  .join__panel { padding: var(--space-8) var(--space-4); }
  .signup-form { flex-direction: column; align-items: stretch; }
  .signup-form__input { width: 100%; }

  .site-footer__top { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   18. WORDPRESS CORE
   Everything below this line is theme plumbing that the static prototype
   never needed: skip links, editor output, comments, pagination and the
   article templates. It reuses the tokens above — no new colours or sizes.
   ========================================================================== */

/* --- Accessibility helpers ------------------------------------------------
   WordPress core, plugins and the block editor all emit .screen-reader-text,
   so it is aliased onto the prototype's .visually-hidden rather than being a
   second, subtly different implementation. --- */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Parked just above its own resting place rather than at top:-100%, which
   resolves against the viewport — from there the reveal is a 900px slide that
   a fast keyboard user tabs straight past. This travels one button height. */
.skip-link {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 999;
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-gold);
  color: var(--color-white);
  font-size: var(--fs-link);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-pill);
  transform: translateY(calc(-100% - var(--space-8)));
  transition: transform 120ms ease;
}
.skip-link:focus { transform: translateY(0); }

/* The admin bar is fixed on the front end for logged-in editors; the sticky
   header has to sit below it rather than under it. */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

/* --- Alignment & media, as emitted by the editor -------------------------- */
.alignleft  { float: left;  margin: 0 var(--space-6) var(--space-4) 0; }
.alignright { float: right; margin: 0 0 var(--space-4) var(--space-6); }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { margin-block: var(--space-8); }
.alignfull  { width: 100%; }

.wp-caption { max-width: 100%; margin-bottom: var(--space-6); }
.wp-caption img { width: 100%; height: auto; }
.wp-caption-text,
.wp-element-caption,
figcaption {
  margin-top: var(--space-3);
  color: var(--color-muted);
  font-size: var(--fs-small);
  text-align: center;
}

.sticky .entry-card__title::after {
  content: "\2605";
  margin-left: var(--space-2);
  color: var(--color-gold-light);
}

/* --- Long-form article body ------------------------------------------------
   One place decides what editor-authored prose looks like, so posts, pages
   and the excerpt fallbacks stay consistent. --- */
.entry-content {
  max-width: 76ch;
  color: var(--color-text-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}
.entry-content > * + * { margin-top: var(--space-6); }

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin-top: var(--space-12);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
}
.entry-content h2 { font-size: var(--fs-section); }
.entry-content h3 { font-size: var(--fs-card-title); }
.entry-content h4,
.entry-content h5,
.entry-content h6 { font-size: var(--fs-h3); }

.entry-content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.entry-content a:hover,
.entry-content a:focus-visible { color: var(--color-gold-pale); }

.entry-content ul,
.entry-content ol { padding-left: var(--space-6); }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li + li { margin-top: var(--space-2); }
.entry-content li::marker { color: var(--color-gold); }

.entry-content blockquote {
  padding-left: var(--space-6);
  border-left: 2px solid var(--color-gold);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--fs-quote);
  line-height: 1.4;
}
.entry-content blockquote cite {
  display: block;
  margin-top: var(--space-4);
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-style: normal;
}

.entry-content img,
.entry-content figure img { height: auto; border-radius: 2px; }

.entry-content hr {
  height: 1px;
  border: 0;
  background-color: var(--border-hairline);
}

.entry-content code,
.entry-content kbd {
  padding: 0.15em 0.4em;
  background-color: var(--color-surface);
  border: 1px solid var(--border-hairline);
  border-radius: 3px;
  font-size: 0.9em;
}
.entry-content pre {
  padding: var(--space-6);
  overflow-x: auto;
  background-color: var(--color-surface);
  border: 1px solid var(--border-hairline);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.entry-content pre code { padding: 0; background: none; border: 0; }

/* Tables can be wider than the column; they scroll inside themselves rather
   than pushing the page sideways. */
.entry-content .wp-block-table,
.entry-content figure.wp-block-table { overflow-x: auto; }
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.entry-content th,
.entry-content td {
  padding: var(--space-3);
  text-align: left;
  border: 1px solid var(--border-hairline);
}
.entry-content th { color: var(--color-accent); font-weight: var(--fw-bold); }

/* ==========================================================================
   19. ARCHIVE / SINGLE / PAGE TEMPLATES
   ========================================================================== */
.page-shell { padding-block: calc(var(--nav-height) + var(--space-20)) var(--space-24); }

.page-header { margin-bottom: var(--space-16); }
.page-header__title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--color-white);
}
.page-header__title em { color: var(--color-accent); font-style: italic; }
.page-header__meta {
  margin-top: var(--space-4);
  color: var(--color-muted);
  font-size: var(--fs-small);
}
.page-header__description {
  max-width: 68ch;
  margin-top: var(--space-6);
  color: var(--color-text-soft);
  font-size: var(--fs-lead);
}

.entry-hero {
  margin-bottom: var(--space-12);
  overflow: hidden;
  border: 1px solid var(--border-hairline);
}
.entry-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  color: var(--color-muted);
  font-size: var(--fs-small);
}
.entry-meta a { color: var(--color-accent); }
.entry-meta a:hover { color: var(--color-gold-pale); }
.entry-meta__sep { color: var(--color-muted-dark); }

.entry-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-hairline);
  font-size: var(--fs-small);
}

.post-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-16);
  padding-top: var(--space-10);
  border-top: 1px solid var(--border-hairline);
}
.post-nav__link { display: block; }
.post-nav__link--next { text-align: right; }
.post-nav__label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-muted);
  font-size: var(--fs-link-sm);
  letter-spacing: var(--tracking-brand);
  text-transform: uppercase;
}
.post-nav__title {
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  line-height: 1.25;
}
.post-nav__link:hover .post-nav__title { color: var(--color-accent); }

/* --- Pagination ----------------------------------------------------------- */
.pagination {
  margin-top: var(--space-16);
  padding-top: var(--space-10);
  border-top: 1px solid var(--border-hairline);
}
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--space-3);
  color: var(--color-text-soft);
  font-size: var(--fs-link);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  transition: var(--transition);
}
.pagination .page-numbers:hover,
.pagination .page-numbers:focus-visible {
  color: var(--color-white);
  border-color: var(--color-gold);
}
.pagination .page-numbers.current {
  color: var(--color-background);
  background-color: var(--color-gold-light);
  border-color: var(--color-gold-light);
  font-weight: var(--fw-bold);
}
.pagination .page-numbers.dots { border-color: transparent; }

/* --- Comments -------------------------------------------------------------- */
.comments-area {
  margin-top: var(--space-20);
  padding-top: var(--space-12);
  border-top: 1px solid var(--border-hairline);
}
.comments-area__title {
  margin-bottom: var(--space-10);
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: var(--fw-regular);
  color: var(--color-white);
}
.comment-list li { margin-bottom: var(--space-8); }
.comment-list .children { margin-top: var(--space-8); padding-left: var(--space-8); }
.comment-body {
  padding: var(--space-6);
  background-color: var(--surface-glass);
  border: 1px solid var(--border-hairline);
}
.comment-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-white);
  font-weight: var(--fw-bold);
}
.comment-author img { border-radius: 50%; }
.comment-metadata { margin-top: var(--space-2); color: var(--color-muted); font-size: var(--fs-link-sm); }
.comment-content { margin-top: var(--space-4); color: var(--color-text-soft); }
.comment-content > * + * { margin-top: var(--space-4); }
.comment-awaiting-moderation { color: var(--color-gold-light); font-size: var(--fs-small); }
.comment-reply-link { color: var(--color-accent); font-size: var(--fs-small); }

.comment-respond { margin-top: var(--space-12); }
.comment-reply-title {
  margin-bottom: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-regular);
  color: var(--color-white);
}
.comment-form > p { margin-bottom: var(--space-4); }
.comment-form label { display: block; margin-bottom: var(--space-2); font-size: var(--fs-small); color: var(--color-muted); }

/* --- Form controls, shared by comments, search and the newsletter ---------- */
.wo-field,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.search-form__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
  color: var(--color-white);
  background-color: var(--surface-glass);
  border: 1px solid var(--border-hairline);
  border-radius: 2px;
  font: inherit;
  font-size: var(--fs-body);
}
.comment-form textarea { min-height: 160px; resize: vertical; }
.wo-field:focus,
.comment-form :focus,
.search-form__input:focus {
  outline: 2px solid var(--color-gold-light);
  outline-offset: 1px;
  border-color: var(--color-gold);
}
.comment-form input::placeholder,
.search-form__input::placeholder { color: var(--color-muted-dark); }

.comment-form .submit,
.search-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: var(--space-8);
  background-color: var(--color-gold);
  color: var(--color-white);
  border: 0;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: var(--transition);
}
.comment-form .submit:hover,
.search-form__submit:hover { background-color: var(--color-gold-light); }

.search-form { display: flex; gap: var(--space-3); max-width: 560px; }
.search-form__input { flex: 1 1 auto; }

.no-results { max-width: 68ch; color: var(--color-text-soft); }
.no-results .search-form { margin-top: var(--space-8); }

/* --- Cards used by archives, search and related lists ---------------------- */
.entry-card__title {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-regular);
  line-height: 1.25;
  color: var(--color-white);
}
.entry-card__title a:hover,
.entry-card__title a:focus-visible { color: var(--color-accent); }
.entry-card__excerpt {
  margin-top: var(--space-3);
  color: var(--color-muted);
  font-size: var(--fs-small);
}

/* --- 404 ------------------------------------------------------------------- */
.error-404 { text-align: center; }
.error-404__code {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  color: var(--color-accent);
  line-height: 1;
}
.error-404 .search-form { margin-inline: auto; margin-top: var(--space-10); }
.error-404__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

/* ==========================================================================
   20. RESPONSIVE REFINEMENTS
   Gaps the prototype's three breakpoints left open, found by walking the
   layout from 320px up.
   ========================================================================== */

/* Nothing may push the page sideways — long unbroken words in editor content
   are the usual culprit. */
html, body { overflow-x: hidden; }
.entry-content { overflow-wrap: break-word; }

@media (max-width: 900px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav__link--next { text-align: left; }
}

@media (max-width: 767px) {
  .search-form { flex-direction: column; }
  .search-form__submit { width: 100%; }
  .comment-list .children { padding-left: var(--space-4); }
  .page-shell { padding-block: calc(var(--nav-height) + var(--space-12)) var(--space-16); }

  /* Pin labels collide once the stage is phone-width, so they wrap and the
     compass shrinks out of their way instead of overlapping them. */
  .map-pin__label {
    max-width: 40vw;
    font-size: var(--fs-map-label);
    white-space: normal;
  }
  .map-compass { transform: scale(0.7); transform-origin: bottom right; }
}

/* Very small phones: 320px is the floor the type scale was designed against. */
@media (max-width: 400px) {
  .wildlife__grid { grid-template-columns: 1fr; }
  .scores__list { grid-template-columns: 1fr; gap: var(--space-8); }
  .filter-bar { gap: var(--space-2); }
  .hero__actions { flex-direction: column; align-items: stretch; }
}

/* Coarse pointers get finger-sized hit areas even where the design draws
   something smaller. */
@media (pointer: coarse) {
  .icon-btn,
  .filter-chip,
  .nav__link { min-height: 44px; }
  .map-pin { min-width: 44px; min-height: 44px; }
}

/* Wide desktops: the container caps, so only the reading measure needs help. */
@media (min-width: 1921px) {
  .entry-content { max-width: 82ch; }
}

@media print {
  .site-header, .site-footer, .nav, .hero__actions, .filter-bar,
  .join, .comment-respond, .pagination { display: none !important; }
  body { background: #fff; color: #000; }
  .entry-content, .page-header__title { color: #000; }
  a { text-decoration: underline; }
}

/* ==========================================================================
   21. THEME ADDITIONS
   Classes the WordPress templates introduce that the prototype had no need
   for. Kept last so they can lean on every token and component above.
   ========================================================================== */

/* --- Honeypot ------------------------------------------------------------
   Positioned off-canvas rather than display:none, because some bots skip
   fields they can tell are hidden. It is aria-hidden and tabindex=-1 in the
   markup, so nobody using the page can reach it either way. --- */
.signup-form__trap {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status.is-error { color: #ff9d8a; }

/* --- Header search panel -------------------------------------------------- */
.header-search {
  padding-block: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-hairline);
}
.header-search[hidden] { display: none; }
.header-search .search-form { max-width: 100%; margin-inline: auto; }

/* Stop the page scrolling behind the open mobile menu. */
body.has-open-nav { overflow: hidden; }
@media (min-width: 1201px) {
  body.has-open-nav { overflow: visible; }
}

/* --- Editor-only hint under a starter-content grid ------------------------ */
.section-note {
  grid-column: 1 / -1;
  padding: var(--space-4) var(--space-6);
  color: var(--color-gold-light);
  background-color: var(--surface-glass);
  border: 1px dashed var(--color-gold);
  font-size: var(--fs-small);
}

/* --- Card titles are links now, so they need the hover the design implies -- */
.expedition-card__title a,
.story-card__title a,
.animal-card__name a,
.entry-card__title a { color: inherit; }
.expedition-card__title a:hover,
.story-card__title a:hover,
.animal-card__name a:hover,
.expedition-card__title a:focus-visible,
.story-card__title a:focus-visible,
.animal-card__name a:focus-visible { color: var(--color-accent); }

/* --- Multi-page posts ----------------------------------------------------- */
.page-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-10);
  font-size: var(--fs-small);
}
.page-links a,
.page-links > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
}
.page-links a:hover { border-color: var(--color-gold); }

.no-comments {
  margin-top: var(--space-6);
  color: var(--color-muted);
  font-size: var(--fs-small);
}

/* --- Editor content appended below the front-page composition -------------- */
.front-page-content { padding-block: var(--space-20); }
.front-page-content .entry-content { margin-inline: auto; }

/* --- Comment navigation --------------------------------------------------- */
.comment-navigation .nav-links {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
  font-size: var(--fs-small);
}

/* ==========================================================================
   22. NARROW-VIEWPORT HEADER
   The prototype's header is one flex row of brand + nav + actions, with the
   brand set to flex-shrink:0 and the wordmark to white-space:nowrap. Below
   about 600px that row is wider than the screen, and because the row is laid
   out left-to-right the thing pushed out of view first is the menu button —
   so on a small phone the navigation became unreachable. Nothing scrolled
   sideways to reveal it, because body has overflow-x:hidden.

   The fix is to let the header give up its least important parts in order:
   first the decorative rule, then the wordmark's size, then the wordmark
   itself. The logo mark and the menu button always survive.
   ========================================================================== */

@media (max-width: 900px) {
  .site-header__inner { gap: var(--space-4); }
  .header-actions { gap: var(--space-4); }

  /* Let the brand yield space instead of insisting on its full width. */
  .brand { flex-shrink: 1; min-width: 0; }
  .brand__text { min-width: 0; }
}

@media (max-width: 600px) {
  .brand { gap: var(--space-3); }
  .brand__name { font-size: var(--fs-small); }
  .brand__rule { display: none; }

  .header-actions { gap: var(--space-3); }
  .btn--nav {
    padding-inline: var(--space-4);
    font-size: var(--fs-link-sm);
    white-space: nowrap;
  }
}

@media (max-width: 430px) {
  /*
   * Below this the wordmark cannot share the row with the controls. The mark
   * stays, and the link keeps its accessible name from the image alt text, so
   * the header is still identifiable and still announces as "home".
   */
  .brand__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .btn--nav { padding-inline: var(--space-3); }
}

@media (max-width: 360px) {
  /* Last thing to go: the search icon, which the menu panel duplicates. */
  .icon-btn { display: none; }
  .header-search { display: none; }
}

/* --- Card links are the main in-card action; 22px is too short to hit ----- */
@media (pointer: coarse) {
  .card-link {
    padding-block: var(--space-3);
    min-height: 44px;
    align-items: center;
  }
}

/* ==========================================================================
   23. NARROW-VIEWPORT MAP
   .map-stage carries min-height:320px, and below 767px it also carries
   aspect-ratio:1/1. A definite min-height plus an aspect ratio transfers into
   a minimum *width* of the same 320px — wider than the 280px column left on a
   320px phone, so the map, its detail card and its note all pushed past the
   gutter. Dropping the floor lets the ratio size the stage from the width it
   actually has.
   ========================================================================== */
@media (max-width: 1200px) {
  /* minmax(0, 1fr) rather than 1fr: a bare 1fr floors the track at the
     content's min-content width, which is what let the overflow through. */
  .map-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .map-stage { min-height: 0; }
}

/* Orbit labels are the only tap target in the About section — give them a
   real hit area where the pointer is a finger. */
@media (pointer: coarse) {
  .orbit-label { padding-block: var(--space-2); }
}

/* ==========================================================================
   24. BLOCK EDITOR
   The section blocks preview themselves with ServerSideRender, so the editor
   shows the real template output. These rules only make that output behave
   inside the editor canvas — they never load on the front end.
   ========================================================================== */

/* The preview is live markup, so its links and buttons would navigate the
   editor away or steal focus. The shield lets clicks fall through to the
   block itself, which is what an editor expects when they click a block. */
.wild-orbit-block-preview__shield {
  position: relative;
  pointer-events: none;
  user-select: none;
}

/* The sticky site header inside a preview would follow the editor's scroll
   and sit on top of the toolbar. */
.wild-orbit-block-preview .site-header { position: static; }

.wild-orbit-block-preview [data-reveal] { opacity: 1; transform: none; }

.wild-orbit-media-field { margin-bottom: var(--space-4, 1rem); }
.wild-orbit-media-field__label {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
}
.wild-orbit-media-field__help,
.wild-orbit-block-help {
  margin-top: 8px;
  font-size: 12px;
  font-style: normal;
}

/* On the front end the blocks are already full-bleed sections; this stops the
   editor's content wrapper from boxing them in. */
.front-page-blocks > .alignfull,
.front-page-blocks > .wp-block-group { margin-inline: 0; max-width: none; }

/* ==========================================================================
   25. FOOTER TAP TARGETS
   The footer's link columns are dense lists of small type — fine to click with
   a mouse, too small to hit reliably with a thumb. Padding on the link itself
   (not the list item) keeps the visual rhythm of the design while giving each
   link a full-width, finger-sized hit area.
   ========================================================================== */
@media (pointer: coarse) {
  .footer-col ul a,
  .social-list a,
  .legal-list a,
  .site-footer__about a:not(.brand) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Absorb the extra height so the columns do not grow taller than designed. */
  .footer-col ul { gap: 0; }
  .social-list { align-items: center; }

  /* Card titles become links once real posts exist; the heading's own line
     box is only ~21px, so the link needs its own hit area. */
  .animal-card__name a,
  .expedition-card__title a,
  .story-card__title a,
  .entry-card__title a {
    display: inline-block;
    padding-block: var(--space-2);
  }
}

/* ==========================================================================
   26. HOMEPAGE STORY SLIDER
   Six chapters. Full-bleed imagery, slow cross-fade, Ken Burns drift, manual
   navigation. Ported from templates.css in the screens package.

   The first slide carries .is-active in the markup, so the hero is complete
   before JavaScript runs — and the .js guard below means that without a script
   the remaining panels stay hidden rather than stacking into one long column.
   ========================================================================== */
.hero--slider { position: relative; overflow: hidden; }

.hero__slides { position: absolute; inset: 0; z-index: -2; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1100ms ease, visibility 1100ms;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
}
.hero__slide.is-active img { animation: heroDrift 12s ease-out forwards; }
@keyframes heroDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.2%, -1.4%, 0); }
}
.hero__slides::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(2, 10, 11, 0.62) 0%,
    rgba(2, 10, 11, 0.28) 38%,
    rgba(2, 10, 11, 0.9) 100%
  );
}

.hero--slider .hero__inner { position: relative; z-index: 2; }

/* The chapter label lives inside the glass pill now, so the rule-and-label
   treatment the screens package used is retired. The class is kept styled as
   a plain pill in case existing content still emits it. */
.hero__chapter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-8);
  background-color: var(--surface-eyebrow);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(var(--blur-glass));
  font-size: var(--fs-eyebrow);
  color: var(--color-white);
}

/* Text swaps with the image. Scoped to .js for the same reason the reveal
   animation is: without a script there is nothing to bring a hidden panel
   back, so with JavaScript off every panel stays visible and the hero simply
   reads as six stacked chapters rather than disappearing entirely. */
.js .hero--slider .hero__panel { display: none; }
.js .hero--slider .hero__panel.is-active {
  display: block;
  animation: heroRise 700ms ease both;
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Counter column becomes the navigation. */
.hero__nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  justify-content: flex-end;
}
.hero__nav-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: 1px solid rgba(174, 124, 53, 0.5);
  color: var(--color-cream);
  background-color: rgba(2, 10, 11, 0.35);
  backdrop-filter: blur(8px);
  transition: border-color var(--transition), background-color var(--transition);
}
.hero__nav-btn:hover,
.hero__nav-btn:focus-visible {
  border-color: var(--color-gold);
  background-color: rgba(174, 124, 53, 0.22);
}
.hero__nav-btn img { width: 18px; height: auto; }

/* One arrow asset, mirrored — no second file to ship or keep in step. */
.hero__nav-btn--prev img { transform: scaleX(-1); }

/* Chapter rail: ticks that double as buttons. */
.hero__ticks {
  display: flex;
  gap: 6px;
  margin-top: var(--space-6);
  justify-content: flex-end;
  flex-wrap: wrap;
}
.hero__tick {
  position: relative;
  width: 46px;
  height: 26px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.hero__tick::after {
  content: "";
  position: absolute;
  inset: 12px 0 auto 0;
  height: 2px;
  background-color: rgba(248, 243, 237, 0.25);
  transition: background-color var(--transition), transform var(--transition);
}
.hero__tick:hover::after { background-color: rgba(241, 173, 78, 0.6); }
.hero__tick[aria-current="true"]::after {
  background-color: var(--color-gold);
  transform: scaleY(2);
}

@media (max-width: 1200px) {
  .hero__nav, .hero__ticks { justify-content: flex-start; }
}
@media (max-width: 767px) {
  .hero__tick { width: 34px; }
  .hero__slide.is-active img { animation-duration: 16s; }
}
@media (max-width: 400px) {
  .hero__tick { width: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide.is-active img { animation: none; }
  .js .hero--slider .hero__panel.is-active { animation: none; }
  .hero__slide { transition: none; }
}

/* ==========================================================================
   27. TAP TARGETS IN THE NEW TEMPLATES
   The sitemap, the encyclopedia directory and the article aside are all dense
   lists of small type — fine with a mouse, too small for a thumb. Padding on
   the link rather than the list item keeps the design's rhythm while giving
   each one a finger-sized hit area.
   ========================================================================== */
@media (pointer: coarse) {
  .sitemap-grid a,
  .aside__list a,
  .az a,
  .prose > ul a,
  .prose > ol a,
  .results__count a,
  .breadcrumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Absorb the extra height so the columns keep their designed length. */
  .sitemap-grid ul,
  .aside__list { gap: 0; }

  /* The filter checkboxes are the primary control on every archive. */
  .filters__opt { min-height: 44px; }

  /* Comment metadata: author link, permalink, avatar and reply. */
  .comment-author a,
  .comment-metadata a,
  .comment-reply-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}