/* =========================================================================
   ZAWADI SAFARIS — Design System
   "Nightfall on the savanna" — warm ink, burnished brass, Maasai clay.
   Display: Fraunces  ·  Body: Hanken Grotesk
   ========================================================================= */

/* ---------- Self-hosted fonts ----------
   Fraunces + Hanken Grotesk, latin & latin-ext woff2 subsets.
   Both are variable fonts, so one file covers the whole weight range.
   Self-hosted deliberately: the site must work with no network.        */
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/fraunces-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  /* Colour — drawn from the logo: gold leaf, near-black brown, white.
     Light surfaces carry the site; dark is reserved for photography,
     the footer and the header once it lifts off the hero.              */
  --paper:      #FFFFFF;   /* base background                           */
  --paper-warm: #FBF8F3;   /* alternating warm section                  */
  --paper-2:    #F4EFE6;   /* deeper sand panel                         */
  --ink:        #1A1410;   /* body text + dark surfaces, from the mark  */
  --ink-soft:   #241C16;   /* raised surface on dark                    */
  --ink-line:   rgba(26,20,16,.12);  /* hairline on light               */
  --line-dark:  rgba(255,255,255,.16); /* hairline on dark              */
  --parchment:  #F7F2E9;   /* text on dark surfaces                     */
  --parchment-2:#EDE4D5;
  --brass:      #B8862F;   /* logo gold, darkened to hold on white      */
  --brass-lit:  #D9A845;   /* brighter gold for hover//glow             */
  --brass-pale: #F0E2C2;   /* gold tint for fills                       */
  --gold-grad:  linear-gradient(135deg, #E3C176 0%, #C0912F 46%, #8C5E1D 100%);
  --ember:      #9C4526;   /* secondary accent — clay red               */
  --sage:       #6E7355;
  --muted:      #6E6255;   /* muted body text on light                  */
  --muted-dark: #6E6255;
  --muted-light:#A79C8C;   /* muted text on dark                        */

  /* Elevation */
  --shadow-s: 0 1px 2px rgba(26,20,16,.05), 0 6px 16px -8px rgba(26,20,16,.10);
  --shadow-m: 0 2px 4px rgba(26,20,16,.05), 0 20px 44px -20px rgba(26,20,16,.20);

  /* Type */
  --display: "Fraunces", Georgia, serif;
  --body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  /* Scale (fluid) */
  --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.15rem);
  --step-1:  clamp(1.35rem, 1.20rem + 0.75vw, 1.85rem);
  --step-2:  clamp(1.90rem, 1.55rem + 1.75vw, 3.10rem);
  --step-3:  clamp(2.70rem, 2.00rem + 3.50vw, 5.20rem);
  --step-4:  clamp(3.40rem, 2.20rem + 6.00vw, 7.50rem);

  /* Layout */
  --pad:     clamp(1.25rem, 5vw, 6.5rem);
  --maxw:    1280px;
  --radius:  2px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 380;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--brass); color: var(--ink); }

/* ---------- Type primitives ---------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 340; line-height: 1.02; letter-spacing: -0.015em; }
.display { font-family: var(--display); }
.eyebrow {
  font-family: var(--body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
}
.eyebrow::before {
  content: "";
  width: 2.2rem; height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.eyebrow.center::before { display: none; }
/* inherits the surrounding surface — the dark photo sections re-assert
   --parchment on it themselves */
.lead { font-size: var(--step-1); line-height: 1.4; color: inherit; font-weight: 300; font-family: var(--display); }
.muted { color: var(--muted); }

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(4.5rem, 11vh, 9rem); }
.section--tight { padding-block: clamp(3rem, 7vh, 5rem); }
.on-light { background: var(--paper-2); color: var(--ink); }
.on-soft  { background: var(--paper-warm); }
.center { text-align: center; }
.stack > * + * { margin-top: 1.1rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-family: var(--body); font-weight: 600; font-size: var(--step--1);
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 1.05em 2em;
  border-radius: var(--radius);
  transition: transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  will-change: transform;
}
.btn svg { width: 1.1em; height: 1.1em; transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--brass { background: var(--gold-grad); color: #FFFDF8; box-shadow: var(--shadow-s); }
.btn--brass:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); filter: brightness(1.06); }
/* ghost defaults to the light page; dark surfaces opt back out below */
.btn--ghost { border: 1px solid rgba(26,20,16,.28); color: var(--ink); }
.btn--ghost:hover { border-color: var(--brass); color: var(--brass); }
.hero .btn--ghost, .dhero .btn--ghost, .pagehero .btn--ghost, .ctaband .btn--ghost, .footer .btn--ghost {
  border-color: var(--line-dark); color: var(--parchment);
}
.hero .btn--ghost:hover, .dhero .btn--ghost:hover, .pagehero .btn--ghost:hover,
.ctaband .btn--ghost:hover, .footer .btn--ghost:hover { border-color: var(--brass-lit); color: var(--brass-lit); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 600; font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brass); position: relative;
}
.link-arrow svg { width: 1em; height: 1em; transition: transform .35s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }

/* =========================================================================
   HEADER / NAV
   ========================================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
/* before the header lifts onto white it floats over a photograph, so it carries
   its own scrim — the nav was competing with the canopy behind it */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,17,13,.62), rgba(20,17,13,0));
  transition: opacity .5s var(--ease);
}
.site-header.scrolled::before { opacity: 0; }
.site-header.scrolled {
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom-color: var(--ink-line);
  box-shadow: 0 1px 24px -12px rgba(26,20,16,.35);
}
/* over the hero photograph the nav is light; once it lifts onto white it inverts */
.site-header.scrolled .brand__word { color: var(--ink); }
.site-header.scrolled .brand__word small { color: var(--muted); }
.site-header.scrolled .nav__links a { color: var(--ink); }
.site-header.scrolled .nav__links a[aria-current="page"] { color: var(--brass); }
.site-header.scrolled .nav__toggle span { background: var(--ink); }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 84px;
}
.brand { display: inline-flex; align-items: center; gap: 0.7rem; }
.brand__mark { width: 34px; height: 34px; }
.brand__word {
  font-family: var(--display); font-size: 1.35rem; letter-spacing: 0.02em;
  line-height: 1; color: var(--parchment);
}
.brand__word b { font-weight: 500; color: var(--brass); }
.brand__word small { display:block; font-family: var(--body); font-size: 0.5rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted-light); margin-top: 4px; white-space: nowrap; }
/* the tracked-out tagline is wider than the wordmark and collided with the nav */
@media (max-width: 1380px){ .brand__word small { display: none; } }
.brand { flex: none; }
/* the header needs more room than the body grid: lockup + seven links + CTA
   overflowed the 1280 wrap and collided on wide screens */
.site-header .wrap { max-width: 1460px; }
.nav__menu { margin-left: auto; }

.nav__menu { display: flex; align-items: center; gap: clamp(1.2rem, 2.2vw, 2.2rem); }
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 1.7vw, 1.9rem); list-style: none; }
.nav__links a {
  font-size: var(--step--1); font-weight: 500; letter-spacing: 0.02em;
  color: var(--parchment); position: relative; padding-block: 0.4rem;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--brass); transition: width .35s var(--ease);
}
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { width: 100%; }
.nav__links a[aria-current="page"] { color: var(--brass); }
.nav__cta { margin-left: 0.5rem; }

.nav__toggle { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 6px; }
.nav__toggle span { display:block; height: 1.5px; width: 26px; background: var(--parchment); transition: transform .4s var(--ease), opacity .3s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav__toggle { display: flex; z-index: 110; }
  .nav__menu {
    position: fixed; inset: 0; z-index: 105;
    background: var(--paper);
    display: flex; flex-direction: column; justify-content: center;
    padding: var(--pad);
    transform: translateX(100%); transition: transform .55s var(--ease);
  }
  .nav__menu.open { transform: translateX(0); }
  .nav__links { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .nav__links a { font-family: var(--display); font-size: var(--step-2); font-weight: 340; letter-spacing: -0.01em; color: var(--ink); }
  .nav__toggle[aria-expanded="true"] span { background: var(--ink); }
  .nav__cta { margin: 1.5rem 0 0; }
}

/* =========================================================================
   HERO — the signature dusk-savanna scene
   ========================================================================= */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: clamp(3rem, 9vh, 7rem);
  overflow: hidden;
  background: linear-gradient(180deg, #241A10 0%, #3A2411 34%, #6E3A17 60%, #A85B22 78%, #C97A2C 100%);
}
.hero--page { min-height: 74svh; }
.hero__scene { position: absolute; inset: 0; z-index: 0; }
/* Scene SVGs carry a viewBox but no width/height, so without this they size
   to their own 1200x380 ratio and cut off mid-container. */
.hero__scene svg,
.pagehero__scene svg,
.dhero__scene svg,
.ctaband__scene svg { width: 100%; height: 100%; }
.hero__sun {
  position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%);
  width: clamp(140px, 22vw, 300px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #FBE3A6 0%, #F3C25E 42%, #E79A34 70%, rgba(231,154,52,0) 72%);
  filter: blur(2px); z-index: 0;
  animation: sunrise 2.4s var(--ease) both;
}
@keyframes sunrise { from { transform: translate(-50%, 40px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.hero__veil { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,17,13,.55) 0%, rgba(20,17,13,0) 30%, rgba(20,17,13,.15) 62%, rgba(20,17,13,.85) 100%); }
.hero__inner { position: relative; z-index: 3; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); width: 100%; }
.hero__title {
  font-size: var(--step-4); font-weight: 300; line-height: 0.96; max-width: 15ch;
  text-shadow: 0 2px 40px rgba(20,17,13,.5);
}
.hero__title em { font-style: italic; color: var(--brass-lit); font-weight: 340; }
.hero__sub { max-width: 46ch; margin-top: 1.6rem; color: var(--parchment); font-size: var(--step-1); font-weight: 300; font-family: var(--display); }
.hero__actions { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 1rem; }

/* page hero (interior pages) */
.pagehero { position: relative; padding-top: 160px; padding-bottom: clamp(3rem,7vh,5.5rem); overflow: hidden;
  background: linear-gradient(180deg, #1A140D 0%, #2A1D11 55%, #4A2E16 100%); }
.pagehero__scene { position: absolute; inset: auto 0 0 0; height: 46%; z-index: 0; opacity: .9; }
.pagehero__inner { position: relative; z-index: 2; }
.pagehero__title { font-size: var(--step-3); font-weight: 300; max-width: 18ch; }
.pagehero__crumbs { font-size: var(--step--1); letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; margin-bottom: 1.3rem; }
.pagehero__crumbs a:hover { color: var(--brass); }

/* scroll cue */
.scrollcue { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); z-index: 3;
  font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.scrollcue::after { content:""; width:1px; height: 46px; background: linear-gradient(var(--brass), transparent); animation: cue 2s var(--ease) infinite; }
@keyframes cue { 0%{transform:scaleY(0);transform-origin:top;} 50%{transform:scaleY(1);transform-origin:top;} 51%{transform-origin:bottom;} 100%{transform:scaleY(0);transform-origin:bottom;} }

/* =========================================================================
   STAT STRIP
   ========================================================================= */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ink-line); border-block: 1px solid var(--ink-line); }
.stats__item { background: var(--paper); padding: clamp(1.8rem,4vw,3rem) clamp(1rem,3vw,2rem); text-align: center; }
.stats__num { font-family: var(--display); font-size: var(--step-2); color: var(--brass); font-weight: 340; line-height: 1; }
.stats__label { font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 0.7rem; }
@media (max-width: 720px){ .stats { grid-template-columns: repeat(2, 1fr); } }

/* =========================================================================
   SECTION HEADER
   ========================================================================= */
.shead { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; margin-bottom: clamp(2.5rem,5vw,4rem); }
.shead__title { font-size: var(--step-3); font-weight: 300; max-width: 16ch; margin-top: 1rem; }
.shead p { max-width: 42ch; }
@media (max-width: 760px){ .shead { grid-template-columns: 1fr; } .shead__aside { display:none; } }

/* =========================================================================
   INTRO SPLIT
   ========================================================================= */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.split--rev { grid-template-columns: 0.95fr 1.05fr; }
@media (max-width: 860px){ .split, .split--rev { grid-template-columns: 1fr; } }
.figure {
  position: relative; aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden;
  background: var(--photo, linear-gradient(160deg,#3A2411,#6E3A17 55%,#A85B22));
  background-size: cover; background-position: center;
}
.figure--wide { aspect-ratio: 16/11; }
.figure__scene { position: absolute; inset: 0; }
.figure__scene svg { width: 100%; height: 100%; object-fit: cover; }
/* solid tint rather than backdrop-filter: the blur painted an opaque block in
   software rendering and it is the flakiest property here across browsers */
.figure__tag { position: absolute; left: 1.2rem; bottom: 1.2rem; z-index: 2;
  font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--parchment);
  background: rgba(20,17,13,.72); padding: 0.55em 1em; border-radius: 100px;
  box-shadow: 0 2px 14px rgba(20,17,13,.3); }

/* =========================================================================
   DESTINATION CARDS
   ========================================================================= */
.dest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.2vw, 1.8rem); }
.dest-grid--feature { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px){ .dest-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .dest-grid, .dest-grid--feature { grid-template-columns: 1fr; } }

.card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(360px, 46vw, 520px); padding: clamp(1.4rem,2.5vw,2rem);
  border-radius: var(--radius); overflow: hidden; isolation: isolate;
  background: var(--card-bg, linear-gradient(160deg,#2A1D11,#5A3417 60%,#8A4E20));
  color: var(--parchment);
}
/* transform is driven by main.js (scroll drift + hover lean), so it is only
   given a transition here — no competing :hover rule */
.card__photo { z-index: -2; transform: scale(1.07);
  transition: transform .9s var(--ease); }
.card__scene { position: absolute; inset: 0; z-index: -2; }
.card__scene svg { width: 100%; height: 100%; }
/* the photographs run bright (green plains, snow, blue sky), so the scrim has
   to start earlier and finish darker than it did over the old flat gradients */
.card__grad { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(20,17,13,0) 18%, rgba(20,17,13,.30) 45%, rgba(20,17,13,.72) 72%, rgba(20,17,13,.95) 100%),
    linear-gradient(180deg, rgba(20,17,13,.18), rgba(20,17,13,.18)); }
.card__no { font-family: var(--display); font-size: var(--step--1); color: var(--brass-lit); letter-spacing: 0.1em;
  text-shadow: 0 1px 12px rgba(20,17,13,.8); }
.card__title { text-shadow: 0 2px 18px rgba(20,17,13,.5); }
.card__title { font-size: var(--step-2); font-weight: 340; line-height: 1; margin-top: 0.3rem; }
.card__meta { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.9rem; font-size: var(--step--1); color: var(--parchment); opacity: .85; }
.card__meta span { border: 1px solid rgba(236,227,210,.25); padding: 0.25em 0.8em; border-radius: 100px; }
.card__cta { margin-top: 1.1rem; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.card:hover .card__cta, .card:focus-within .card__cta { opacity: 1; transform: translateY(0); }
.card::after { content:""; position:absolute; inset:0; z-index: 3; border: 1px solid transparent; border-radius: var(--radius); transition: border-color .4s var(--ease); pointer-events: none; }
.card:hover::after { border-color: var(--brass); }
.card__link { position: absolute; inset: 0; z-index: 4; }
.card--tall { min-height: clamp(440px, 60vw, 640px); }

/* =========================================================================
   ACTIVITIES LIST (editorial rows)
   ========================================================================= */
.acts { border-top: 1px solid var(--ink-line); }

.act {
  display: grid; grid-template-columns: 4rem 1.1fr 1.4fr auto; align-items: center; gap: clamp(1rem,3vw,2.5rem);
  padding-block: clamp(1.6rem,3.4vw,2.6rem); border-bottom: 1px solid var(--ink-line);
  transition: padding-inline .5s var(--ease), background .5s var(--ease);
}

.act:hover { background: var(--paper-warm); padding-inline: 1.5rem; }
.on-soft .act:hover { background: #fff; }
.act__no { font-family: var(--display); font-size: var(--step-1); color: var(--brass); }
.act__name { font-family: var(--display); font-size: var(--step-1); font-weight: 340; line-height: 1.05; }
.act__desc { color: var(--muted); font-size: var(--step-0); }

.act__meta { font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
@media (max-width: 820px){
  .act { grid-template-columns: 2.5rem 1fr; gap: 0.4rem 1rem; }
  .act__desc, .act__meta { grid-column: 2; }
  .act:hover { padding-inline: 0; }
}

/* =========================================================================
   ITINERARY CARDS
   ========================================================================= */
.itins { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2.2vw,1.6rem); }
@media (max-width: 960px){ .itins { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .itins { grid-template-columns: 1fr; } }
.itin {
  background: var(--paper); border: 1px solid var(--ink-line); border-radius: var(--radius);
  padding: clamp(1.6rem,3vw,2.2rem); display: flex; flex-direction: column;
  box-shadow: var(--shadow-s);
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.itin:hover { transform: translateY(-6px); border-color: var(--brass); box-shadow: var(--shadow-m); }
.itin__days { font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); }
.itin__title { font-family: var(--display); font-size: var(--step-1); font-weight: 340; margin: 0.6rem 0 0.4rem; line-height: 1.1; }
.itin__route { color: var(--muted); font-size: var(--step--1); margin-bottom: 1.2rem; }

.itin__list { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1.6rem; }
.itin__list li { position: relative; padding-left: 1.5rem; font-size: var(--step-0); }
.itin__list li::before { content:""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; border-radius: 50%; background: var(--brass); }
.itin__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 1.2rem; border-top: 1px solid var(--ink-line); }

.itin__price { font-family: var(--display); font-size: var(--step-1); color: var(--ink); }
.itin__price small { font-family: var(--body); font-size: var(--step--1); color: var(--muted); letter-spacing: 0.04em; }

/* =========================================================================
   BLOG
   ========================================================================= */
.posts { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.4rem,3vw,2.4rem); }
@media (max-width: 900px){ .posts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .posts { grid-template-columns: 1fr; } }
.post { display: flex; flex-direction: column; }
.post__img { aspect-ratio: 3/2; border-radius: var(--radius); overflow: hidden; position: relative;
  background: var(--photo, linear-gradient(150deg,#2A1D11,#6E3A17)); background-size: cover; background-position: center; }
.post__img .card__scene { z-index: 0; }
.post__cat { font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); margin: 1.1rem 0 0.5rem; }
.post__title { font-family: var(--display); font-size: var(--step-1); font-weight: 340; line-height: 1.12; transition: color .3s; }
.post:hover .post__title { color: var(--brass); }
.post__excerpt { color: var(--muted); margin-top: 0.7rem; font-size: var(--step-0); }

.post__date { font-size: var(--step--1); color: var(--muted); margin-top: 1rem; letter-spacing: 0.06em; }
.post--lead { grid-column: span 2; }
.post--lead .post__img { aspect-ratio: 16/9; }
.post--lead .post__title { font-size: var(--step-2); }
@media (max-width: 900px){ .post--lead { grid-column: span 2; } }
@media (max-width: 600px){ .post--lead { grid-column: span 1; } }

/* =========================================================================
   DESTINATION DETAIL PAGE
   ========================================================================= */
.dhero { position: relative; min-height: 88svh; display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: clamp(3rem,8vh,6rem); overflow: hidden;
  background: var(--photo, linear-gradient(180deg,#1E140C,#3A2411 40%,#7A4318 78%,#B26A26)); background-size: cover; background-position: center; }
.dhero__scene { position: absolute; inset: 0; z-index: 0; }
.dhero__veil { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,17,13,.65) 0%, rgba(20,17,13,0) 35%, rgba(20,17,13,.9) 100%); }
/* width:100% is required: .dhero is a flex column, and the auto inline margins
   on .wrap would otherwise cancel stretch and shrink-wrap the content. */
.dhero__inner { position: relative; z-index: 2; width: 100%; }
.dhero__crumbs { font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.3rem; }
.dhero__crumbs a:hover { color: var(--brass); }
.dhero__title { font-size: var(--step-4); font-weight: 300; line-height: 0.94; }
.dhero__title em { font-style: italic; color: var(--brass-lit); font-weight: 340; }
.dhero__meta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }
.dhero__meta span { border: 1px solid rgba(236,227,210,.3); padding: 0.45em 1.1em; border-radius: 100px;
  font-size: var(--step--1); letter-spacing: 0.06em; backdrop-filter: blur(4px); }

.factbar { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid var(--ink-line); }
.factbar__i { padding: clamp(1.4rem,3vw,2.2rem) clamp(1rem,3vw,2rem); border-left: 1px solid var(--ink-line); }
.factbar__i:first-child { border-left: none; }
.factbar__k { font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.factbar__v { font-family: var(--display); font-size: var(--step-1); color: var(--brass); margin-top: 0.5rem; }
@media (max-width: 720px){ .factbar { grid-template-columns: 1fr 1fr; } .factbar__i:nth-child(3){ border-left: none; } .factbar__i:nth-child(odd){ border-left:none; } .factbar__i { border-top: 1px solid var(--ink-line); } }

.prose { max-width: 62ch; }
.prose p + p { margin-top: 1.3rem; }
.prose h3 { font-size: var(--step-2); font-weight: 300; margin: 2.5rem 0 1rem; }

.highlights { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; }
@media (max-width: 620px){ .highlights { grid-template-columns: 1fr; } }
.highlights li { display: flex; gap: 0.9rem; padding-block: 0.9rem; border-top: 1px solid var(--ink-line); }

.highlights svg { flex: none; width: 1.3rem; height: 1.3rem; color: var(--brass); margin-top: 0.25rem; }
.highlights b { font-family: var(--display); font-weight: 400; display: block; font-size: var(--step-0); }
.highlights span { color: var(--muted); font-size: var(--step--1); }


/* season / best-time bars */
.months { display: grid; grid-template-columns: repeat(12,1fr); gap: 4px; margin-top: 1.5rem; }
.month { text-align: center; padding: 0.9rem 0.2rem; border-radius: var(--radius); background: var(--paper-2); font-size: var(--step--1); }
.month.good { background: var(--gold-grad); color: #FFFDF8; font-weight: 600; }
.month.mid { background: var(--paper-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--ink-line); }

/* =========================================================================
   CTA BAND
   ========================================================================= */
.ctaband { position: relative; overflow: hidden;
  background: linear-gradient(150deg, #241A10, #5A3417 55%, #8A4E20); text-align: center; }
.ctaband__scene { position: absolute; inset: auto 0 0 0; height: 55%; opacity: .5; z-index: 0; }
.ctaband .wrap { position: relative; z-index: 2; }
.ctaband__title { font-size: var(--step-3); font-weight: 300; max-width: 20ch; margin: 0 auto 1.2rem; }

/* =========================================================================
   FORMS
   ========================================================================= */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.form .full { grid-column: 1 / -1; }
@media (max-width: 640px){ .form { grid-template-columns: 1fr; } }
.field label { display: block; font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--paper); border: 1px solid rgba(26,20,16,.18); color: var(--ink);
  padding: 0.95em 1.1em; border-radius: var(--radius); font: inherit; transition: border-color .3s, box-shadow .3s;
}
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 3px rgba(184,134,47,.16); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brass); }
.field textarea { min-height: 140px; resize: vertical; }
.form__note { font-size: var(--step--1); color: var(--muted); }


/* validation + submission states */
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: var(--ember); }
.field__err { margin-top: 0.5rem; font-size: var(--step--1); color: var(--ember); line-height: 1.4; }
.field:not(.field--invalid) .field__err { display: none; }
.form__result:empty { display: none; }
.form__result--ok  { color: var(--brass); }
.form__result--err { color: var(--ember); }

.btn[disabled] { opacity: 0.72; cursor: default; transform: none; }

.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem,6vw,5rem); align-items: start; }
@media (max-width: 860px){ .contact-grid { grid-template-columns: 1fr; } }
.contact-line { display: flex; gap: 1rem; padding-block: 1.3rem; border-top: 1px solid var(--ink-line); }
.contact-line svg { width: 1.4rem; height: 1.4rem; color: var(--brass); flex: none; margin-top: 0.2rem; }
.contact-line b { font-family: var(--display); font-weight: 400; display:block; }
.contact-line span { color: var(--muted); font-size: var(--step-0); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer {
  --muted: var(--muted-light);
  --ink-line: var(--line-dark);
  background: var(--ink); color: var(--parchment);
  padding-top: clamp(3.5rem,7vw,6rem);
  border-top: 3px solid transparent;
  border-image: var(--gold-grad) 1;
}
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: clamp(3rem,6vw,5rem); }
@media (max-width: 860px){ .footer__top { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; } }
@media (max-width: 520px){ .footer__top { grid-template-columns: 1fr; } }
.footer__brand .brand__word { font-size: 1.5rem; }
.footer__blurb { color: var(--muted); margin-top: 1.2rem; max-width: 34ch; }
.footer h4 { font-family: var(--body); font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); font-weight: 600; margin-bottom: 1.2rem; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.footer ul a { color: var(--muted); font-size: var(--step-0); transition: color .3s; }
.footer ul a:hover { color: var(--parchment); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding-block: 1.8rem; border-top: 1px solid var(--ink-line); font-size: var(--step--1); color: var(--muted); }
.footer__socials { display: flex; gap: 1.2rem; }
.footer__socials a:hover { color: var(--brass); }

/* =========================================================================
   REVEAL ANIMATION
   ========================================================================= */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"]{ transition-delay: .08s; }
.reveal[data-d="2"]{ transition-delay: .16s; }
.reveal[data-d="3"]{ transition-delay: .24s; }
.reveal[data-d="4"]{ transition-delay: .32s; }

/* =========================================================================
   PHOTOGRAPHY
   Real photographs sit underneath the existing veils and gradients.

   The image itself is set as background-image in the element's style
   attribute, NOT through a custom property. A relative url() inside a custom
   property is resolved against the stylesheet that consumes the var(), not
   the page that declares it, so --photo:url('assets/…') resolved to
   assets/css/assets/… and 404'd. Declaring background-image inline resolves
   against the document, which is what the paths are written for.
   ========================================================================= */
.hero__photo,
.pagehero__photo,
.dhero__photo,
.figure__photo,
.card__photo,
.ctaband__photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* z-index is set per layer, never in the shared rule: .card__photo has to stay
   at -2 so .card__grad (-1) and the card's copy paint over it */
.hero__photo,
.pagehero__photo,
.dhero__photo,
.figure__photo,
.ctaband__photo { z-index: 0; }
.card__photo { z-index: -2; }
/* Oversized so the parallax never drags an edge into view. Kept modest: every
   extra percent here is extra `cover` zoom, which crops the sky off the sides. */
.hero__photo { inset: -7% 0; background-position: center 42%; }

.pagehero__photo { opacity: .72; }
.pagehero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,17,13,.72) 0%, rgba(20,17,13,.42) 48%, rgba(20,17,13,.9) 100%);
}
.ctaband__photo { opacity: .3; }
.ctaband::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,17,13,.6), rgba(20,17,13,.78));
}
/* A photograph carries its own sky and detail, so the copy needs a heavier
   scrim than the flat gradient the silhouette scenes sat on. */
.hero--photo .hero__veil {
  background: linear-gradient(180deg, rgba(20,17,13,.6) 0%, rgba(20,17,13,.2) 30%, rgba(20,17,13,.5) 62%, rgba(20,17,13,.94) 100%);
}
.dhero--photo .dhero__veil {
  background: linear-gradient(180deg, rgba(20,17,13,.72) 0%, rgba(20,17,13,.28) 34%, rgba(20,17,13,.95) 100%);
}
.figure__photo { transform: scale(1.07); transition: transform .9s var(--ease); }

/* =========================================================================
   MOTION — pointer tilt on the card grids (positions set by main.js)
   ========================================================================= */
/* No transform-style: preserve-3d — .card sets overflow:hidden, which flattens
   it anyway, and giving the children their own transforms disturbed the
   photo/scrim/content stacking order. */
.card, .itin, .post {
  transition: transform .6s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .card, .itin, .post, .card__photo, .figure__photo { transform: none !important; }
}

/* journal thumbnails */
.post__img img { display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease); }
.post:hover .post__img img { transform: scale(1.05); }

/* =========================================================================
   BRAND LOCKUP
   ========================================================================= */
img.brand__mark { width: 44px; height: 44px; object-fit: contain; }
@media (max-width: 480px){ img.brand__mark { width: 36px; height: 36px; } }
.footer__logo { display: block; width: 180px; max-width: 62%; height: auto; }

/* =========================================================================
   LIGHT-THEME POLISH
   Gold is used sparingly — as rules, gradients on small fills and the section
   eyebrows — so the photography stays the loudest thing on a white page.
   ========================================================================= */
.shead__title, .hero__title, .pagehero__title, .dhero__title, .ctaband__title { letter-spacing: -0.02em; }

/* Sections that sit on a photograph keep the light type they had when the whole
   page was dark — body text is now near-black, so they have to opt out. */
.hero, .pagehero, .dhero, .ctaband, .card {
  color: var(--parchment);
  --muted: var(--muted-light);
}
.hero .lead, .pagehero .lead, .dhero .lead, .ctaband .lead { color: var(--parchment); }

/* a hairline of gold under every section header */
.shead { padding-bottom: 1.6rem; border-bottom: 1px solid var(--ink-line); position: relative; }
.shead::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 84px; height: 2px;
  background: var(--gold-grad);
}
.on-soft .shead, .on-light .shead { border-color: rgba(26,20,16,.12); }

/* the stat strip reads as a band of gold numerals */
.stats { border-block: 1px solid var(--ink-line); }
.stats__num {
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--brass);
}
.stats__label { color: var(--muted); }

/* figures and cards lift off white */
.figure { box-shadow: var(--shadow-m); }
.card { box-shadow: var(--shadow-s); }
.card:hover { box-shadow: var(--shadow-m); }
.post__img { box-shadow: var(--shadow-s); }

/* the pull quote carries its own quotation marks in the copy, so it gets a gold
   rule above it rather than a glyph that collided with the eyebrow */
blockquote.lead { position: relative; padding-top: 2.2rem; }
blockquote.lead::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 60px; height: 2px; background: var(--gold-grad);
}

/* footer wordmark + gold link hover */
.footer h4 { color: var(--brass-lit); }
.footer ul a:hover { color: var(--brass-lit); }
.footer__socials a:hover { color: var(--brass-lit); }

/* selection + focus ring in brand gold */
::selection { background: var(--brass); color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brass); outline-offset: 3px;
}

/* small utilities */
.mt-s { margin-top: 1rem; } .mt-m { margin-top: 2rem; } .mt-l { margin-top: 3.5rem; }
.maxch { max-width: 60ch; }
.tag-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tag { border: 1px solid var(--ink-line); padding: 0.4em 1em; border-radius: 100px; font-size: var(--step--1); color: var(--muted); }