/* ═══════════════════════════════════════════════════════════════════
   WILDBOSSES · FOUNDATION
   Self-hosted faces and one committed palette.

   PALETTE — "light through leaves"
   The Mara at the end of the long rains. Three colours doing three
   jobs, and the split is the whole system:

     white  reads      the ground under the photographs
     green  frames     nav, footer, the film rail, every label
     gold   acts       every button, badge and live state

   The ground is warm white because the product is photography. A
   saturated wall behind a safari photograph makes the photograph
   negotiate with it — gold grass, red earth and blue sky all lose.
   Green is worth more as the frame than as the field: it holds the
   page at top and bottom and lets the middle carry the pictures.

   ONE palette, not two faces. There is no theme switch — it asked a
   visitor to have an opinion about something they came here to
   ignore, and it halved the care that could go into either face.
   What survives is a surface level, not a preference: .wb-inverse
   repoints the semantic tokens to the dark set, so a band can go
   deep green without a second palette existing anywhere.

   Yellow is never type on the light ground. At text size on anything
   pale it is unreadable at any weight, so it is spent only where it
   can be loud on purpose — fills, badges, the claw.
   ═══════════════════════════════════════════════════════════════════ */

@font-face { font-family:'Anton'; src:url('/fonts/anton-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Geist'; src:url('/fonts/geist-sans-latin-300-normal.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'Geist'; src:url('/fonts/geist-sans-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Geist'; src:url('/fonts/geist-sans-latin-500-normal.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Geist'; src:url('/fonts/geist-sans-latin-600-normal.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Geist'; src:url('/fonts/geist-sans-latin-700-normal.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Geist'; src:url('/fonts/geist-sans-latin-800-normal.woff2') format('woff2'); font-weight:800; font-display:swap; }
@font-face { font-family:'Geist'; src:url('/fonts/geist-sans-latin-900-normal.woff2') format('woff2'); font-weight:900; font-display:swap; }
@font-face { font-family:'Geist Mono'; src:url('/fonts/geist-mono-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Geist Mono'; src:url('/fonts/geist-mono-latin-500-normal.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Geist Mono'; src:url('/fonts/geist-mono-latin-600-normal.woff2') format('woff2'); font-weight:600; font-display:swap; }

:root {
  --display:'Anton','Geist',system-ui,sans-serif;
  --body:'Geist',system-ui,-apple-system,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,monospace;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:30px;
  --ease:cubic-bezier(.2,.75,.3,1);
  --max:1280px;

  color-scheme: light;

  /* ── the palette ──────────────────────────────────────────
     Fixed values. Everything below points at these; no rule
     anywhere redefines them. Contrast is noted against the
     ground each colour is actually allowed to sit on. */
  --forest:#073B29;      /* the frame — nav, footer, rail */
  --forest-deep:#04281B;
  --canopy:#04150F;      /* deepest — the film stage and the claw */
  --wild:#12A05A;        /* brand green — fills */
  --wild-ink:#0B6B3C;    /* brand green at type size, on white  6.3:1 */
  --shoot:#6FD943;       /* new growth — interaction, on green  7.0:1 */
  --sun:#F7BE18;         /* six o'clock gold — the primary fill      */
  --citrine:#FFE04D;     /* bright pollen — type on green       9.6:1 */
  --pollen:#FFF9E3;      /* warm white — headline weight on dark     */
  --leaf-white:#EAF7E4;  /* the reading white, on green        11.4:1 */

  --on-sun:#04241A;      /* deep green is the only safe type on yellow 9.7:1 */
  --void:#04150F;        /* the intro's black, greened */
  --ember:#C43A17;       /* destructive / failure only, on white 5.6:1 */

  /* ── semantic · the light ground ──────────────────────── */
  --ground:#F5FAF1;      /* the page ground, and it stays the page ground
                            inside .wb-inverse too, for anything that needs
                            the light page colour while standing in a dark
                            band */
  --bg:var(--ground);    /* warm white with a green whisper — not paper,
                            and deliberately not the cream everyone ships */
  --bg-deep:#E9F2E4;     /* the recessed band */
  --ink:#06251A;                              /* 15.9:1 */
  --ink-2:#46614F;                            /*  7.2:1 */
  --ink-3:#5E7A66;                            /*  4.9:1 */
  --gold:#8A5D00;        /* gold at type size must be this dark  5.1:1 */
  --gold-soft:#A87400;
  --label:var(--wild-ink);   /* green does the words */
  --focus:var(--wild-ink);   /* the focus ring, dark enough for the light ground */
  --on-gold:var(--on-sun);

  --line:rgba(6,37,26,.12); --line-2:rgba(6,37,26,.06);
  --glass:rgba(255,255,255,.82);
  --glass-2:rgba(255,255,255,.58);
  --glass-edge:rgba(255,255,255,.96);
  --glass-blur:saturate(168%) blur(22px);

  --shadow-card:0 2px 6px rgba(6,40,26,.05), 0 12px 32px -12px rgba(6,40,26,.17);
  --shadow-lift:0 4px 12px rgba(6,40,26,.08), 0 28px 60px -20px rgba(6,40,26,.26);
  --glow-sun:0 6px 22px rgba(247,190,24,.40);
  --glow-shoot:0 6px 22px rgba(18,160,90,.30);

  --grad-sun:linear-gradient(135deg,var(--sun) 0%,var(--citrine) 100%);
  --grad-canopy:linear-gradient(150deg,#0A3A28 0%,#04150F 55%,#072A1D 100%);

  /* ambient light fields — kept to the margins so the middle reads */
  --mesh-sun:rgba(255,214,64,.30);
  --mesh-leaf:rgba(18,160,90,.16);
  --mesh-shoot:rgba(111,217,67,.15);
}

/* ── the dark band ────────────────────────────────────────
   Not a theme. A surface level: repoint the semantic tokens and
   everything inside inherits the dark set without a single rule
   being duplicated. Used by the nav, the footer and the rail. */
.wb-inverse,
.wb-nav,
.wb-foot,
.wb-hero,
.wb-rail-top,
.wb-rail {
  color-scheme: dark;
  --bg:var(--forest); --bg-deep:var(--forest-deep);
  --ink:var(--leaf-white);
  --ink-2:#A9CBB2;                            /*  7.1:1 */
  --ink-3:#96BCA1;                            /*  6.0:1 */
  --gold:var(--citrine);
  --gold-soft:#FFE887;
  --label:var(--citrine);    /* on green, yellow is finally safe as type */
  --focus:var(--shoot);      /* lime is 1.7:1 on white and 7:1 here — surface decides */

  --line:rgba(234,247,228,.15); --line-2:rgba(234,247,228,.075);
  --glass:rgba(16,79,54,.72);
  --glass-2:rgba(16,79,54,.46);
  --glass-edge:rgba(180,255,205,.20);

  --shadow-card:0 8px 28px -8px rgba(0,18,10,.55);
  --shadow-lift:0 18px 50px -12px rgba(0,18,10,.72);
  --glow-shoot:0 6px 24px rgba(111,217,67,.26);

  background:var(--bg);
  color:var(--ink);
}

/* ── aliases ──────────────────────────────────────────────
   wb-page.css and list-tour.html were written against an older
   naming scheme. Those names outlived their definitions when the
   previous stylesheets were removed, which left the booking form
   drawing unstyled type off dead variables. Mapped, not renamed —
   a rename means touching 48 call sites for no benefit. */
:root, .wb-inverse {
  --fg:var(--ink);
  --muted:var(--ink-2);
  --glass-border:var(--line);
  --bone:var(--ink);
  --dust:var(--ink-2);
}

*,*::before,*::after { box-sizing:border-box; }

/* ── the sideways-scroll guard ────────────────────────────
   A single box wider than the viewport does not just overflow itself, it
   widens the whole document: the sticky nav then paints only the real
   viewport while the content scrolls out from under it, and the site looks
   broken rather than merely clipped. That is exactly what the trip hero was
   doing at 700px on every phone.

   `clip` and not `hidden`. `overflow-x:hidden` on html or body silently
   turns the element into a scroll container, which kills `position:sticky`
   on the nav. `clip` cuts the overflow without creating one. Older engines
   that never shipped `clip` fall back to `hidden` on body alone, where the
   sticky chain survives.

   This is a net, not the fix. Anything caught here is still a bug. */
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
body { overflow-x:clip; }
@supports not (overflow-x: clip) { body { overflow-x:hidden } }

@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

/* the nav is sticky, so anything jumped to must clear it */
html { scroll-padding-top: 84px; }

body {
  margin:0; min-height:100vh;
  background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  transition:background-color .5s var(--ease), color .5s var(--ease);
}

/* Long destination names and single-word trip titles are the two things
   that break a display face. Let headings wrap on sense rather than on
   whatever fits, and let long words break instead of pushing the box wide. */
/* `overflow-wrap:break-word` here was a mistake: it lets a display face
   snap a word in half ("alrea / dy") the moment a container is too narrow,
   which hides the real bug behind an uglier one. Headings should overflow
   visibly so the width problem is obvious and gets fixed. Only genuinely
   unbreakable strings — a URL, a long slug — get to break. */
h1,h2,h3 { text-wrap:balance; overflow-wrap:normal; word-break:normal; }
p { text-wrap:pretty; }

/* ── the signature: light through the canopy ──────────────
   Three fields, not a scatter. Sun coming over the ridge along the
   top edge, leaf mass banked down both sides, new growth low and
   central. The middle of the page stays clear because that is where
   the reading happens — the colour lives at the margins and the type
   sits in the calm.

   An earlier pass scattered small radial spots over this to suggest
   dapple. At the scale a fixed full-bleed layer actually renders,
   they came out as soft blobs that read as lens smudges, so they are
   gone. One drifting field, done properly, is the whole effect. */
body::before {
  content:''; position:fixed; inset:-20%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 76% 30% at 50% -6%,  var(--mesh-sun),   transparent 72%),
    radial-gradient(ellipse 36% 52% at -4% 38%,  var(--mesh-leaf),  transparent 68%),
    radial-gradient(ellipse 34% 48% at 104% 46%, var(--mesh-leaf),  transparent 68%),
    radial-gradient(ellipse 60% 34% at 50% 106%, var(--mesh-shoot), transparent 72%);
  animation:wbMesh 38s ease-in-out infinite alternate;
}
@keyframes wbMesh {
  from{ transform:translate3d(-1.2%,-.8%,0) scale(1) }
  to  { transform:translate3d(1.6%,1.2%,0) scale(1.05) }
}
@media (prefers-reduced-motion: reduce){ body::before{ animation:none } }

img,video,svg { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
::selection { background:var(--sun); color:var(--on-sun); }
:focus-visible { outline:2px solid var(--focus); outline-offset:3px; border-radius:4px; }

/* ── glass primitive ─────────────────────────────────────── */
.glass {
  background:var(--glass);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--line);
  border-top-color:var(--glass-edge);
  box-shadow:var(--shadow-card);
}
/* Blur is expensive and some engines drop it. Without it the panel is a
   flat wash, so fall back to an opaque fill that still separates. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background:var(--bg-deep); }
}

.wb-only-sr { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0 }
.wb-num { font-family:var(--mono); font-variant-numeric:tabular-nums }

/* the intro is always black, whatever the hour */
.wb-no-intro .wb-intro { display:none !important }