/* ============================================================
   Travel Niche — Main Stylesheet
   Mobile-first, CSS custom properties, no dependencies
   Coastal / Arctic aesthetic
   ============================================================ */

/* ── 1. Design Tokens ─────────────────────────────────────── */
:root {
  /* ── Palette: Ionian. Turquoise water, pale sand, Mediterranean blue. ──
     Token NAMES are the scaffold's and must not change (every partial reads
     them). Only the VALUES are this site's. Ratios below are measured. */

  --deep-canal:    #086788;   /* Deep Aegean - dark surface: header, footer, gallery.
                                 White on it 6.35:1, Sea Mist 5.99:1.            */

  /* PRIMARY ACCENT. The brief's Ionian Turquoise #078C9D darkened on the same
     hue to clear AA in BOTH directions at once: white sits ON it at 5.08:1
     (buttons), and it sits ON the three light grounds at 4.96 / 4.79 / 4.52
     (links, icons, borders). The undarkened #078C9D fails both (4.00 / 3.91). */
  --gold:          #067A88;
  --gold-light:    #0A95A6;   /* Gradient end / hover lift                       */
  --gold-dark:     #05616C;   /* Pressed state                                   */
  --gold-text:     #086788;   /* Accent as TEXT: Deep Aegean, 6.20:1 on Ivory    */

  /* Text ON the --gold fill. MEASURED: white on #067A88 is 5.08:1 and passes,
     which is why this is white here and was charcoal in palette 1. */
  --on-accent:          var(--white);

  /* Accent ink drawn ON the dark Deep Aegean surface. Sunlit Gold measures only
     3.03:1 there and may not be inked on it. This lifted gold is 4.52:1 and
     still reads as gold. */
  --accent-on-dark:     #F3D6A1;
  --star-on-dark:       #F3D6A1;
  --accent-halo:        color-mix(in srgb, var(--gold) 40%, transparent);
  --accent-halo-strong: color-mix(in srgb, var(--gold) 55%, transparent);

  /* Derived tints - a palette swap reaches these because they are color-mix,
     never hardcoded rgba(). Do not reintroduce a literal tint. */
  --tint-surface:        color-mix(in srgb, var(--canal-light) 30%, transparent);
  --tint-surface-soft:   color-mix(in srgb, var(--canal-light) 15%, transparent);
  --tint-surface-faint:  color-mix(in srgb, var(--canal-light) 6%,  transparent);
  --tint-surface-strong: color-mix(in srgb, var(--canal-light) 60%, transparent);
  --scrim-dark:          color-mix(in srgb, var(--deep-canal) 55%, transparent);
  --hairline:            color-mix(in srgb, var(--deep-canal) 6%,  transparent);
  --shadow-tint:         color-mix(in srgb, var(--deep-canal) 12%, transparent);
  --shadow-tint-strong:  color-mix(in srgb, var(--deep-canal) 18%, transparent);

  /* Sunlit Gold is a FILL only - "Best for families", ratings, map markers,
     featured badges - always with ink #183238 on it (6.46:1). It is 2.05:1 on
     Ivory, so it may never be a text or a hairline colour on a light ground. */
  --dutch-orange:  #E6A83A;   /* Sunlit Gold - badges, urgency                  */
  --canal-teal:    #086788;   /* Deep Aegean - secondary TEXT accent, 6.20:1    */
  --canal-light:   #F1FAFA;   /* Sea Mist - SURFACE role, alternating bands     */
  --amber-warm:    #F8F1E5;   /* Pale Sand - SURFACE role, cards, callouts, FAQ */

  /* Neutrals */
  --marble-white:  #FFFCF6;   /* Warm Ivory - page ground                       */
  --charcoal:      #183238;   /* Ink - body copy, 13.21:1 on Ivory              */
  --slate:         #2A5862;   /* Secondary text - 7.70 / 7.43 / 7.02            */
  --stone:         #326975;   /* Tertiary text - 6.04 / 5.83 / 5.51             */
  --silver:        #F1FAFA;   /* Light text on the dark footer - 5.99:1         */
  --mist:          #F8F1E5;   /* Warm surface tint                              */
  --white:         #FFFFFF;
  --warm-charcoal: #221F1D;   /* Charcoal with a warm undertone - hero scrim.
                                 Deliberately NOT a palette colour: it is a
                                 photographic scrim, not part of the identity. */

  /* Gradients */
  /* Hero scrim: dark on the LEFT, clearing to fully transparent on the RIGHT.
     The photo already does this - its cliff-and-gorse foreground sits left
     (mean L 96) against the open bay right (L 126) - so the gradient deepens
     the picture's own weight instead of fighting it, and the bay keeps the
     colour that sells the island. */
  --hero-overlay:    linear-gradient(90deg,
                       color-mix(in srgb, var(--warm-charcoal) 92%, transparent) 0%,
                       color-mix(in srgb, var(--warm-charcoal) 80%, transparent) 26%,
                       color-mix(in srgb, var(--warm-charcoal) 52%, transparent) 52%,
                       color-mix(in srgb, var(--warm-charcoal) 22%, transparent) 74%,
                       color-mix(in srgb, var(--warm-charcoal) 0%,  transparent) 92%);
  /* Separate top band. The nav is white and the header has NO background until
     50px of scroll, so with the scrim clearing on the right the nav would
     otherwise sit on bright sky. Scoped to the hero; pages without one are
     untouched. Measured on the built page: 7.61 / 5.64 / 4.93:1 left to right. */
  --hero-topband:    linear-gradient(to bottom,
                       color-mix(in srgb, var(--warm-charcoal) 74%, transparent) 0%,
                       color-mix(in srgb, var(--warm-charcoal) 52%, transparent) 46%,
                       color-mix(in srgb, var(--warm-charcoal) 0%,  transparent) 100%);
  --gold-shimmer:    linear-gradient(135deg, var(--gold), var(--gold-light));
  --ocean-depth:     linear-gradient(135deg, #086788, #067A88);

  /* Typography. DM Serif Display for headings, Inter for body/UI.

     GREEK CAVEAT - DM Serif Display ships latin + latin-ext ONLY; it has no
     Greek subset (checked against the Google Fonts API, 2026-08-29). Inter has
     greek + greek-ext.

     Greek IS on this site - 43 distinct strings: the fact-block "Greek name"
     rows, the 46 map pin names, and the Xigia spelling note. Every one of them
     sits in a <dd>, <span>, <li> or <p>, i.e. in the BODY face, which is Inter
     and renders them correctly. None sits in a heading, which is the only
     place the display serif is used - so the pairing is safe as built. The
     exposure is narrow but real: put a Greek name in an h1-h6 and it falls
     back silently. Georgia is named ahead of the generic serif because it
     carries Greek on Windows and macOS, so the fallback is at least a serif
     rather than whatever the UA picks.

     DM Serif Display has ONE weight (400). Never ask it for 700 - the browser
     will synthesise a faux bold. See the display-weight rule further down. */
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;
  --font-display:  'DM Serif Display', Georgia, 'Times New Roman', serif;
  /* Numerals, prices, rank numbers and controls. Same family as --font-body,
     named separately because the INTENT differs: those elements are on Inter
     because a display serif has no bold and thin strokes drop out at UI sizes,
     not merely because they are body text. Must live HERE, in the script - it
     was hand-added to main.css once and the next apply_tokens.py run silently
     erased it, which killed `font-family` on all nine of those selectors. */
  --font-ui:       'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing (8px grid) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Radii */
  --rounded-sm:   4px;
  --rounded-md:   8px;
  --rounded-lg:   12px;
  --rounded-xl:   16px;
  --rounded-2xl:  24px;
  --rounded-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.04);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
}

/* ── 2. Reset & Base ──────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--marble-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
/* Guide-article hook image: honour its 1200x630 ratio. HTML width/height attrs
   (e.g. <img class="hook-image" width="1200" height="630">) set the rendered
   height literally UNLESS the global rule above carries height:auto — without it
   the image squishes to container-width x 630px in .container-narrow.
   (Reported on milancomodaytrip 2026-07-17.) */
.hook-image { width: 100%; height: auto; border-radius: var(--rounded-lg); margin: 0 0 var(--space-6); }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
address { font-style: normal; }

/* ── 3. Utilities ─────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.container-narrow {
  max-width: 768px;
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.w-full { width: 100%; }

/* ── 4. Buttons ───────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--gold-shimmer);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--rounded-md);
  box-shadow: 0 4px 18px var(--accent-halo);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
}
.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 28px var(--accent-halo-strong);
  filter: brightness(1.05);
}
.btn-primary:active { transform: translateY(0) scale(0.99); }
.btn-primary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: rgba(255,255,255,0.12);
  color: var(--white);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--rounded-md);
  border: 1.5px solid rgba(255,255,255,0.55);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.85);
}
.btn-secondary:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}

/* Ghost button for LIGHT backgrounds. It is used STANDALONE (layouts/404.html),
   NOT as a `.btn-secondary` modifier, so it must carry the whole button box
   itself. With only border-color + color it inherited no display, padding,
   border-width or radius and rendered as bare unstyled text — which is exactly
   how both 404 secondary CTAs shipped on every clone of this scaffold. The 404
   is easy to miss in review because nothing links to it.
   white-space is deliberately `normal`: this button carries the long
   `tourBackLinkText` label, which overflowed the viewport at 320px when nowrap
   stopped it wrapping. (Reported on waiotapu-tickets.com 2026-08-24.) */
.btn-secondary-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: transparent;
  border: 1.5px solid var(--deep-canal);
  border-radius: var(--rounded-md);
  color: var(--deep-canal);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  padding: var(--space-3) var(--space-6);
  text-decoration: none;
  text-align: center;
  white-space: normal;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.btn-secondary-dark:hover {
  background: var(--deep-canal);
  color: var(--white);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 2px solid var(--canal-teal);
  border-radius: var(--rounded-lg);
  background: transparent;
  color: var(--canal-teal);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all var(--transition-normal);
  /* `normal`, NOT `nowrap`: this is the class /404.html actually uses for its
     two secondary CTAs, and one of them carries the long `tourBackLinkText`
     label. The identical fix was written for this exact 320px overflow and
     applied to `.btn-secondary-dark` (see its comment above) — the class the
     404 used BEFORE the same repair moved it here, so the defect outlived its
     own fix. `max-width` is the other half: white-space cannot save a button
     whose longest single word already exceeds the container.
     (waiotapu-tickets.com 2026-08-24; recurred rotoruamaorivillage.com
     2026-08-25 at 328px in a 320px viewport.) */
  white-space: normal;
  max-width: 100%;
  text-decoration: none;
}
.btn-outline:hover {
  background: var(--canal-teal);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.btn-outline:active { transform: translateY(0); }

.btn-sm  { padding: var(--space-2) var(--space-4); font-size: 0.875rem; }
.btn-lg  { padding: var(--space-4) var(--space-8); font-size: 1rem; }

/* ── 5. Section base ──────────────────────────────────────── */
.section {
  padding-block: var(--space-12); /* tightened section rhythm */
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.section-overline {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: var(--space-3);
}
/* Dark sections (gallery, cta-band) need a lighter tint for AA contrast —
   var(--gold-dark) reads too dark on the dark surface, var(--gold-light)
   passes ~7:1. Recompute per-palette if a niche remaps these tokens. */
.gallery-section .section-overline,
.cta-band .section-overline {
  color: var(--accent-on-dark);
}

.section-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--deep-canal);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}

.section-subtitle {
  font-size: 1rem;
  color: var(--slate);
  max-width: 560px;
  margin-inline: auto;
  line-height: 1.65;
}

/* ── 6. Header & Navigation ───────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding-block: var(--space-3);
  transition: background var(--transition-slow), padding var(--transition-slow), box-shadow var(--transition-slow), transform 0.3s ease;
}

.site-header.header-hidden {
  transform: translateY(-100%);
}

.site-header.scrolled {
  /* color-mix on the token (not a hardcoded rgba) so a palette/token swap
     re-colors the header with zero edits */
  /* Opaque token fallback for browsers without color-mix — a fallback cannot
     itself use color-mix, so it must be a plain token rather than a hardcoded
     rgba() that a palette swap would leave navy. The line below re-adds the
     transparency wherever color-mix is supported. */
  background: var(--deep-canal);
  background: color-mix(in srgb, var(--deep-canal) 95%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding-block: var(--space-2);
  box-shadow: var(--shadow-lg);
}

/* Pages without a dark hero (tour pages, guides, legal, 404): the white
   logo/nav would merge with the light body — keep the header solid always.
   Paired with the `site-header--solid` conditional in partials/header.html. */
.site-header--solid {
  /* Opaque token fallback for browsers without color-mix — a fallback cannot
     itself use color-mix, so it must be a plain token rather than a hardcoded
     rgba() that a palette swap would leave navy. The line below re-adds the
     transparency wherever color-mix is supported. */
  background: var(--deep-canal);
  background: color-mix(in srgb, var(--deep-canal) 97%, transparent);
  box-shadow: var(--shadow-md);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}

.logo-icon {
  color: var(--white);
  opacity: 0.95;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.logo-primary {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.04em;
}

.logo-tagline {
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--accent-on-dark);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Desktop nav */
.nav-links {
  display: none;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.nav-link {
  font-size: 1.05rem;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--rounded-md);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.nav-link:hover {
  color: var(--white);
  background: rgba(255,255,255,0.10);
}

.nav-cta { 
  display: none; /* Hidden on mobile */
  margin-left: var(--space-2); 
  font-size: 1rem; /* balance with enlarged .nav-link (1.05rem) */
}

/* Hamburger */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: var(--space-2);
  border-radius: var(--rounded-md);
  margin-left: auto;
  transition: background var(--transition-fast);
}
.hamburger:hover { background: rgba(255,255,255,0.10); }
.hamburger-line {
  display: block;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--transition-normal), opacity var(--transition-normal);
}

/* Mobile menu backdrop */
.mobile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: var(--scrim-dark);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}
.mobile-backdrop.open { opacity: 1; pointer-events: all; }

/* Mobile menu panel */
.mobile-menu {
  position: fixed;
  top: 0; right: 0;
  z-index: 1002;
  width: min(80vw, 320px);
  height: 100dvh;
  background: var(--white);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  overflow-y: auto;
}
.mobile-menu.open { transform: translateX(0); }

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--silver);
}

.mobile-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--rounded-md);
  color: var(--slate);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.mobile-close:hover { background: var(--mist); color: var(--charcoal); }

.mobile-nav-list {
  flex: 1;
  padding: var(--space-4) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mobile-nav-link {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-weight: 500;
  color: var(--charcoal);
  border-radius: var(--rounded-md);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.mobile-nav-link:hover { background: var(--canal-light); color: var(--deep-canal); }

.mobile-menu-footer {
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--silver);
}

/* ── 7. Hero ──────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-overlay::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 168px;
  background: var(--hero-topband);
  pointer-events: none;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
  z-index: 0;
}

/* ── Hero extras ── */
.hero-overline {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  margin-bottom: var(--space-4);
  display: block;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.hero-badge {
  display: inline-block;
  background: var(--dutch-orange);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--rounded-sm);
}

.price-free-cancel {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: var(--space-2);
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding-top: calc(var(--space-20) + 60px); /* clear fixed header */
  padding-bottom: var(--space-20);
}

.hero-text {
  max-width: 680px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: var(--space-5);
  text-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.hero-subtitle {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: rgba(255,255,255,0.90);
  line-height: 1.65;
  margin-bottom: var(--space-8);
  max-width: 560px;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: 380px;
}

/* Price badge */
.hero-price-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--rounded-xl);
  padding: var(--space-4) var(--space-6);
  color: var(--white);
  min-width: 110px;
}
.price-from  { font-size: 0.75rem; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.06em; }
.price-amount { font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1; }
.price-per   { font-size: 0.75rem; opacity: 0.8; }

/* Scroll indicator */
.hero-scroll-indicator {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.65);
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* ── 8. Trust Band ────────────────────────────────────────── */
.trust-band {
  background: var(--white);
  padding-block: var(--space-6);
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 2;
}

.trust-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5) var(--space-8);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.trust-icon { font-size: 1.5rem; line-height: 1; }

.trust-icon-svg {
  color: var(--canal-teal);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--rounded-md);
  background: var(--canal-light);
}

.trust-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.trust-metric {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--deep-canal);
}

.trust-label {
  font-size: 0.75rem;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── 9. How It Works ──────────────────────────────────────── */
.how-it-works { background: var(--marble-white); }

.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.step-card {
  background: var(--white);
  border-radius: var(--rounded-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--hairline);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
  counter-increment: steps;
}
.step-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--rounded-md);
  background: var(--gold-shimmer);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--space-4);
  box-shadow: 0 2px 8px var(--accent-halo);
}

.step-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--deep-canal);
  margin-bottom: var(--space-3);
}

.step-body { color: var(--slate); line-height: 1.65; }

.steps-cta {
  text-align: center;
  margin-top: var(--space-10);
}

/* ── 10. Gallery — full-width horizontal scroll, dark theatre ── */
/* Pattern codified 2026-07 (apachetrailtour.com build) — see
   site-builder CLAUDE.md "Gallery pattern" for the full contract and the
   img width/height-vs-aspect-ratio gotcha this replaced. */
.gallery-section {
  background: var(--deep-canal);
  padding-bottom: var(--space-8);
}
.gallery-section .section-title { color: var(--white); }
.gallery-section .section-subtitle { color: rgba(255,255,255,0.72); }

.gallery-wrapper {
  position: relative;
  margin-top: var(--space-6);
}
.gallery-wrapper--full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.gallery-wrapper::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 14px; width: 60px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, var(--deep-canal) 100%);
  z-index: 2;
}

.gallery-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-2) var(--space-5) var(--space-4);
  padding-left: max(var(--space-5), calc((100vw - 1200px) / 2));
  padding-right: max(var(--space-5), calc((100vw - 1200px) / 2));
  scrollbar-width: thin;
  scrollbar-color: var(--gold) rgba(255,255,255,0.15);
}
.gallery-scroll::-webkit-scrollbar { height: 8px; }
.gallery-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.12); border-radius: var(--rounded-full); }
.gallery-scroll::-webkit-scrollbar-thumb { background: var(--gold); border-radius: var(--rounded-full); }

.gallery-item {
  flex: 0 0 78vw;
  max-width: 480px;
  scroll-snap-align: start;
  border-radius: var(--rounded-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
@media (min-width: 720px)  { .gallery-item { flex-basis: 44vw; } }
@media (min-width: 1080px) { .gallery-item { flex-basis: 29vw; } }
.gallery-item:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}
.gallery-item img {
  width: 100%;
  height: auto; /* MUST be set — see gotcha note below */
  aspect-ratio: 3/2;
  object-fit: cover;
  display: block;
}
/* GOTCHA (found on apachetrailtour.com build): the <img width="800"
   height="533"> HTML attributes are read by browsers as literal pixel
   dimensions (a presentational-hint height), not just an intrinsic-ratio
   hint. Without `height: auto` here, that 533px hint wins over
   `aspect-ratio` once the container is narrower than ~800px (i.e. on
   every gallery card), producing a mismatched near-portrait box. Always
   keep `height: auto` on any <img> that also carries HTML width/height
   attributes AND a CSS aspect-ratio. */

.gallery-caption {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  padding: var(--space-2) var(--space-3);
  background: rgba(255,255,255,0.06);
}

.gallery-arrow {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: var(--rounded-full);
  border: 0;
  cursor: pointer;
  background: var(--white);
  color: var(--deep-canal);
  box-shadow: var(--shadow-md);
  display: none;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.gallery-arrow:hover { background: var(--gold); color: var(--on-accent); }
.gallery-arrow--prev { left: max(var(--space-4), calc((100vw - 1200px) / 2)); }
.gallery-arrow--next { right: max(var(--space-4), calc((100vw - 1200px) / 2)); }
@media (min-width: 1080px) { .gallery-arrow { display: flex; } }

/* ── 11. Booking Widget ───────────────────────────────────── */
.booking-section { background: var(--white); }

.booking-widget-wrapper {
  max-width: 800px;
  margin-inline: auto;
  background: var(--mist);
  border-radius: var(--rounded-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
}

.widget-fallback {
  display: none; /* Hidden when real GYG widget loads */
}

/* Show fallback if widget script hasn't loaded (no gyg elements present) */
.booking-widget-wrapper:not(:has([data-gyg-href] iframe)) .widget-fallback {
  display: block;
}

.widget-fallback-inner {
  text-align: center;
  padding: var(--space-12) var(--space-8);
  background: var(--white);
  border-radius: var(--rounded-xl);
  border: 1px solid var(--silver);
  box-shadow: var(--shadow-md);
}

.widget-fallback-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--rounded-xl);
  background: var(--canal-light);
  color: var(--canal-teal);
  margin: 0 auto var(--space-5);
}

.widget-fallback-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--deep-canal);
  margin-bottom: var(--space-3);
}

.widget-fallback-body {
  color: var(--slate);
  margin-bottom: var(--space-6);
}

.widget-fallback-inner .btn-primary { margin-inline: auto; }

.widget-trust-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}

.widget-trust-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8rem;
  color: var(--stone);
}

.widget-trust-list svg { color: var(--canal-teal); flex-shrink: 0; }

.booking-social-proof {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-5);
  background: var(--tint-surface);
  border-radius: var(--rounded-lg);
  border: 1px solid var(--tint-surface-strong);
}
.social-proof-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.825rem;
  color: var(--slate);
}
.social-proof-item strong {
  color: var(--deep-canal);
}
.social-proof-star {
  color: var(--gold);
}
.social-proof-item svg:not(.social-proof-star) {
  color: var(--canal-teal);
}

/* ── 12. Comparison Table ─────────────────────────────────── */
.comparison-section { background: var(--mist); }

.comparison-wrapper {
  overflow-x: auto;
  border-radius: var(--rounded-xl);
  box-shadow: var(--shadow-lg);
  -webkit-overflow-scrolling: touch;
}

.comparison-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--rounded-xl);
  overflow: hidden;
}

.comparison-table thead {
  background: var(--deep-canal);
  color: var(--white);
}

.comparison-col,
.comparison-label-col {
  padding: var(--space-4) var(--space-5);
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
  position: relative;
}

.comparison-label-col {
  text-align: left;
  width: 30%;
  color: rgba(255,255,255,0.75);
  font-weight: 400;
}

.comparison-col--highlight {
  background: var(--deep-canal);
  color: var(--white);
  border-bottom: 3px solid var(--gold);
}

.comparison-badge {
  /* block + fit-content so the badge stacks on its own line ABOVE the column
     label (inline-block rendered it beside/wrapped with the label) */
  display: block;
  width: fit-content;
  margin-inline: auto;
  background: var(--gold);
  color: var(--on-accent);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: var(--rounded-sm);
  margin-bottom: var(--space-2);
}
.comparison-col--highlight .comparison-badge {
  background: var(--gold);
  color: var(--on-accent);
}

.comparison-table tbody tr {
  border-bottom: 1px solid var(--mist);
  transition: background var(--transition-fast);
}
.comparison-table tbody tr:last-child { border-bottom: none; }
.comparison-table tbody tr:hover { background: var(--tint-surface); }

.comparison-row-label {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--slate);
}

.comparison-cell {
  padding: var(--space-4) var(--space-5);
  text-align: center;
  font-size: 0.875rem;
  color: var(--charcoal);
}

.comparison-cell--highlight {
  background: var(--tint-surface);
  font-weight: 600;
  color: var(--deep-canal);
}

.comparison-cta {
  text-align: center;
  margin-top: var(--space-8);
}

.comparison-cta-row { border-bottom: none !important; }
.comparison-cta-row:hover { background: transparent !important; }
.comparison-cta-cell { padding-top: var(--space-5) !important; padding-bottom: var(--space-6) !important; }
.comparison-btn { width: 100%; max-width: 180px; font-size: 0.8rem; }

/* ── 12b. More Experiences ────────────────────────────────── */
.experiences-section { background: var(--white); }

.experiences-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-6);
}

/* Homepage "Explore More" section only (scoped by #experiences) — balanced
   2-row grid computed from the actual card count (top row gets the extra
   card when odd), instead of the shared auto-fill wrap used on /tours/. */
#experiences .experiences-grid {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  #experiences .experiences-grid { grid-template-columns: repeat(var(--experiences-cols, 3), 1fr); }
}

.experience-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: var(--rounded-xl);
  overflow: hidden;
  text-decoration: none;
  color: var(--charcoal);
  transition: all var(--transition-normal);
  position: relative;
  box-shadow: var(--shadow-sm);
}
.experience-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--canal-teal);
}

.experience-image {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--mist);
}
.experience-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.experience-card:hover .experience-image img {
  transform: scale(1.06);
}

.experience-badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: var(--gold);
  color: var(--on-accent);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--rounded-sm);
  z-index: 1;
}

.experience-content {
  padding: var(--space-5) var(--space-5) var(--space-3);
  flex: 1;
}

.experience-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--deep-canal);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}

.experience-desc {
  font-size: 0.9rem;
  color: var(--slate);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

.experience-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: 0.8rem;
  color: var(--slate);
}

.experience-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--gold);
  font-weight: 600;
}
.experience-review-count {
  color: var(--slate);
  font-weight: 400;
}

.experience-duration {
  color: var(--canal-teal);
  font-weight: 500;
}

.experience-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--mist);
  background: var(--tint-surface-soft);
}

.experience-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--deep-canal);
}
.experience-price-from {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--slate);
  margin-right: 2px;
}

.experience-cta-text {
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--canal-teal);
  transition: color var(--transition-fast);
}
.experience-card:hover .experience-cta-text {
  color: var(--deep-canal);
}

/* ── 13. Reviews ──────────────────────────────────────────── */
.reviews-section { background: var(--canal-light); }

.reviews-aggregate {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.aggregate-stars {
  display: flex;
  gap: 2px;
  color: var(--gold);
}

.aggregate-score {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--deep-canal);
}

.aggregate-count {
  font-size: 0.85rem;
  color: var(--slate);
}

.reviews-disclaimer {
  font-size: 0.8rem;
  color: var(--stone);
  max-width: 560px;
  margin: var(--space-3) auto 0;
  text-align: center;
}

.reviews-scroll-wrapper { overflow: hidden; }

.reviews-scroll {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--space-4) var(--space-5) var(--space-8);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--silver) transparent;
}

.review-card {
  flex-shrink: 0;
  width: min(320px, 85vw);
  scroll-snap-align: start;
  background: var(--white);
  border-radius: var(--rounded-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
.review-card:hover { box-shadow: var(--shadow-xl); transform: translateY(-4px); }

.review-stars {
  display: flex;
  gap: 3px;
  color: var(--gold);
}

.review-text {
  flex: 1;
  font-size: 1rem;
  color: var(--charcoal);
  line-height: 1.65;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8rem;
  color: var(--stone);
  padding-top: var(--space-3);
  border-top: 1px solid var(--mist);
}

.review-name { font-weight: 600; color: var(--charcoal); }
.review-separator { color: var(--silver); }

/* ── 14. FAQ ──────────────────────────────────────────────── */
.faq-section { background: var(--marble-white); }

.faq-list { display: flex; flex-direction: column; }

.faq-item {
  border-bottom: 1px solid var(--silver);
}
.faq-item:first-child { border-top: 1px solid var(--silver); }

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--charcoal);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.faq-question:hover { color: var(--deep-canal); }
.faq-question:focus-visible {
  outline: 2px solid var(--dutch-orange);
  outline-offset: 2px;
  border-radius: var(--rounded-sm);
}

.faq-chevron {
  flex-shrink: 0;
  color: var(--stone);
  transition: transform var(--transition-normal), color var(--transition-fast);
}
.faq-question[aria-expanded="true"] .faq-chevron {
  transform: rotate(180deg);
  color: var(--gold);
}

.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition-slow), padding var(--transition-slow);
}
.faq-answer:not([hidden]) {
  max-height: 500px;
}
.faq-answer[hidden] { display: block !important; max-height: 0; } /* override hidden for animation */

.faq-answer-inner {
  padding-bottom: var(--space-5);
  font-size: 1rem;
  color: var(--slate);
  line-height: 1.7;
}

.faq-contact {
  text-align: center;
  margin-top: var(--space-10);
  font-size: 0.95rem;
  color: var(--slate);
}

.faq-contact-link {
  color: var(--canal-teal);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}
.faq-contact-link:hover { color: var(--deep-canal); }

.faq-answer-inner a {
  color: var(--canal-teal);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}
.faq-answer-inner a:hover { color: var(--deep-canal); }

/* ── 15. CTA Band ─────────────────────────────────────────── */
.cta-band {
  background: var(--ocean-depth);
  padding-block: var(--space-16);
  text-align: center;
}

.cta-band-inner { max-width: 640px; margin-inline: auto; }

.cta-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-5);
}

.cta-body {
  color: rgba(255,255,255,0.85);
  margin-bottom: var(--space-8);
  line-height: 1.65;
}

/* ── 16. Footer ───────────────────────────────────────────── */
.site-footer {
  background: var(--deep-canal);
  color: var(--silver);
  padding-top: var(--space-16);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--white);
  text-decoration: none;
  margin-bottom: var(--space-4);
}

.footer-logo-text {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.footer-brand-desc {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--silver);
  max-width: 280px;
}

.footer-col-title {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-on-dark);
  margin-bottom: var(--space-4);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-link {
  font-size: 0.9375rem;
  color: var(--silver);
  transition: color var(--transition-fast);
}
.footer-link:hover { color: var(--white); }

.footer-address {
  font-size: 0.9375rem;
  color: var(--silver);
  line-height: 1.65;
}

.footer-bottom {
  padding-block: var(--space-6);
}

.footer-bottom .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.footer-disclosure {
  font-size: 0.8rem;
  color: var(--silver);
  max-width: 620px;
}

.footer-copy { font-size: 0.875rem; color: var(--silver); }

.footer-legal {
  display: flex;
  gap: var(--space-5);
}

.footer-legal-link {
  font-size: 0.875rem;
  color: var(--silver);
  transition: color var(--transition-fast);
}
.footer-legal-link:hover { color: var(--white); }

/* ── 17. Sticky CTA (mobile) ──────────────────────────────── */
.sticky-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 900;
  background: var(--white);
  border-top: 1px solid var(--silver);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.1);
  transform: translateY(100%);
  transition: transform var(--transition-normal);
  pointer-events: none;
}
.sticky-cta.visible {
  transform: translateY(0);
  pointer-events: all;
}

.sticky-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  max-width: 480px;
  margin-inline: auto;
}

.sticky-cta-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}
.sticky-price-from   { font-size: 0.75rem; color: var(--stone); }
.sticky-price-amount {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--deep-canal);
}
.sticky-price-per    { font-size: 0.75rem; color: var(--stone); }

.sticky-cta-btn { flex-shrink: 0; }

/* ── 18. Single Page Prose ────────────────────────────────── */
.page-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--deep-canal);
  margin-bottom: var(--space-8);
}

.prose h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--deep-canal);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}
.prose p { color: var(--slate); line-height: 1.75; margin-bottom: var(--space-4); }
.prose ul { list-style: disc; padding-left: var(--space-6); color: var(--slate); }
.prose li { margin-bottom: var(--space-2); line-height: 1.65; }
.prose strong { color: var(--charcoal); }
.prose a { color: var(--canal-teal); text-decoration: underline; text-underline-offset: 2px; }

/* ── 19. Fade-Up Animation ────────────────────────────────── */
/* Scroll-reveal. The hidden state is gated on `.js`, set by an inline script in
   <head> BEFORE first paint (partials/head.html). Without that class nothing is
   ever hidden, so a browser with JS blocked, broken or still loading main.js
   (which is `defer`red) renders the full page instead of a blank one.
   52 elements on a homepage carry .fade-up, so the un-gated version meant
   "no JS = no website". Same principle as the affiliate-CTA static-href rule:
   content must never depend on JS to exist.
   (Reported on rotoruamaoriexperience.com 2026-08-28.) */
.js .fade-up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.js .fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Above-the-fold content is never scroll-revealed: there is nothing to scroll
   it into view, and .hero-title is the LCP element -- gating it on a deferred
   script measured >800ms at opacity:0 after networkidle. */
.js .hero-text.fade-up,
.js .hero-price-badge.fade-up {
  opacity: 1;
  transform: none;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .fade-up { opacity: 1; transform: none; transition: none; }
}

/* Stagger children */
.steps-grid .fade-up:nth-child(2) { transition-delay: 0.1s; }
.steps-grid .fade-up:nth-child(3) { transition-delay: 0.2s; }
.trust-grid .fade-up:nth-child(2) { transition-delay: 0.05s; }
.trust-grid .fade-up:nth-child(3) { transition-delay: 0.10s; }
.trust-grid .fade-up:nth-child(4) { transition-delay: 0.15s; }
.trust-grid .fade-up:nth-child(5) { transition-delay: 0.20s; }

/* ── 20. Accessibility ────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

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

/* ── 21. Responsive — sm (640px) ──────────────────────────── */
@media (min-width: 640px) {
  .hero-actions {
    flex-direction: row;
    max-width: none;
  }

  .trust-grid {
    gap: var(--space-5) var(--space-10);
  }

  .review-card  { width: 340px; }
}

/* ── 22. Responsive — md (768px) ──────────────────────────── */
@media (min-width: 768px) {
  .section { padding-block: 56px; }

  .section-title { font-size: 2.25rem; }

  .steps-grid { grid-template-columns: repeat(var(--steps-cols, 2), 1fr); }

  .footer-grid { grid-template-columns: 1fr 1fr; }

  .footer-bottom .container {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ── 23. Responsive — lg (1024px) ─────────────────────────── */
@media (min-width: 1024px) {
  /* Show desktop nav, hide hamburger */
  .nav-links  { display: flex; }
  .nav-cta    { display: block; }
  .hamburger  { display: none; }

  /* Hide sticky mobile CTA */
  .sticky-cta { display: none; }

  .section { padding-block: 72px; }

  .section-title { font-size: 2.5rem; }

  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* ── 24. Responsive — xl (1280px) ─────────────────────────── */
@media (min-width: 1280px) {
  .container { padding-inline: var(--space-8); }
}

/* ── 25. Highlights Section ───────────────────────────────── */
.highlights-section { background: var(--amber-warm); }

.highlights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  max-width: 960px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .highlights-grid { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
}

.highlights-col {
  background: var(--white);
  border-radius: var(--rounded-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--hairline);
}

.highlights-col-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--deep-canal);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--canal-light);
}

.highlights-col-title svg { color: var(--gold); flex-shrink: 0; }

.highlights-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.highlight-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 1rem;
  color: var(--slate);
  line-height: 1.55;
}

.highlight-check {
  flex-shrink: 0;
  color: var(--canal-teal);
  margin-top: 2px;
}

.highlight-check--gold { color: var(--gold); }

.highlights-cta {
  text-align: center;
  margin-top: var(--space-10);
}

/* ── 26. Review Extras ────────────────────────────────────── */
.review-photos {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.review-photos img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--rounded-md);
  border: 1px solid var(--mist);
}

.review-card--cta {
  /* Lighter than the reviews-section background (--canal-light) so the CTA card
     lifts off the section instead of blending into it. Token-relative wash +
     subtle border survive any palette remap. (Reported on milancomodaytrip 2026-07-17.) */
  background: color-mix(in srgb, var(--white) 62%, var(--canal-light));
  border: 1px solid color-mix(in srgb, var(--canal-teal) 22%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}

.review-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.review-cta-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--deep-canal);
  max-width: 220px;
  line-height: 1.4;
}

/* ── Tour Detail Pages ──────────────────────────────────────── */
.tour-page {
  padding-top: 100px;
  padding-bottom: var(--space-8);
  background: var(--deep-canal);
  min-height: 100vh;
}

/* Guide article — clear the fixed header (first child is the breadcrumb) */
.guide-article {
  padding-top: 100px;
}

.tour-breadcrumb {
  font-size: 0.9rem;
  color: var(--mist);
  margin-bottom: var(--space-4);
}

.tour-breadcrumb a {
  /* gold-light, not dutch-orange: the accent token can be dark (rosewood) and
     vanish against the deep-canal tour-page background */
  color: var(--accent-on-dark);
  text-decoration: none;
}

.tour-breadcrumb a:hover {
  text-decoration: underline;
}

.tour-hero {
  margin-bottom: var(--space-6);
}

.tour-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-3);
  line-height: 1.2;
}

.tour-rating-summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.tour-stars {
  display: flex;
  gap: 2px;
  color: var(--star-on-dark);
}

.tour-rating-text {
  font-size: 0.95rem;
  color: var(--mist);
}

.tour-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  border-radius: var(--rounded-lg);
  overflow: hidden;
}

.tour-gallery-main img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.tour-gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.tour-gallery-grid img {
  width: 100%;
  height: calc(200px - var(--space-3) / 2);
  object-fit: cover;
}

.tour-content-wrapper {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-8);
  align-items: start;
}

.tour-main-content {
  color: var(--white);
}

.tour-section {
  margin-bottom: var(--space-8);
}

.tour-section h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-4);
}

.tour-description {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--mist);
  /* fullDescription is an ARRAY — tour/single.html emits one <p> per
     element. Without this, every paragraph of an enriched tour page
     butts against the next. (mikumidaysafarifromzanzibar 2026-08-15) */
  margin-bottom: var(--space-4);
}
.tour-description:last-child { margin-bottom: 0; }

.tour-highlights,
.tour-includes,
.tour-excludes {
  list-style: none;
  padding: 0;
}

.tour-highlights li,
.tour-includes li,
.tour-excludes li {
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--rounded-md);
  color: var(--mist);
}

.tour-info-content {
  color: var(--mist);
  line-height: 1.7;
}

.tour-sidebar {
  position: sticky;
  top: 100px;
}

.tour-booking-card {
  background: var(--white);
  padding: var(--space-6);
  border-radius: var(--rounded-lg);
  box-shadow: var(--shadow-xl);
  margin-bottom: var(--space-4);
}

.tour-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--mist);
}

.tour-price-label {
  font-size: 0.85rem;
  color: var(--charcoal);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tour-price-amount {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--deep-canal);
  line-height: 1;
  margin-block: var(--space-1);
}

.tour-price-unit {
  font-size: 0.9rem;
  color: var(--charcoal);
}

.tour-detail-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  color: var(--charcoal);
  font-size: 0.95rem;
}

.tour-detail-item svg {
  flex-shrink: 0;
  color: var(--deep-canal);
}

.tour-booking-note {
  font-size: 0.8rem;
  color: var(--charcoal);
  text-align: center;
  margin-top: var(--space-3);
  opacity: 0.7;
}

.tour-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tour-badge {
  background: var(--gold);
  color: var(--on-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--rounded-sm);
}

.tour-back-link {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tour-back-link a {
  /* gold-light for contrast on the dark tour-page background (see breadcrumb) */
  color: var(--accent-on-dark);
  text-decoration: none;
  font-weight: 600;
}

.tour-back-link a:hover {
  text-decoration: underline;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .tour-title {
    font-size: 1.75rem;
  }
  
  .tour-gallery {
    grid-template-columns: 1fr;
  }
  
  .tour-gallery-main img {
    height: 300px;
  }
  
  .tour-content-wrapper {
    grid-template-columns: 1fr;
  }
  
  .tour-sidebar {
    position: static;
  }
}

.review-cta-inner .aggregate-stars { color: var(--gold); }

/* ── Related Tours Section ──────────────────────────────────── */
.related-tours {
  margin-top: var(--space-16);
  padding-top: var(--space-12);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.related-tours-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-6);
  text-align: center;
}

.related-tours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.related-tour-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--rounded-lg);
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  text-decoration: none;
  display: block;
}

.related-tour-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.related-tour-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.related-tour-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
  padding: var(--space-4) var(--space-4) var(--space-2);
  line-height: 1.3;
}

.related-tour-price {
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent-on-dark);
  padding: 0 var(--space-4) var(--space-4);
}

/* Site-specific overrides */
.faq-question:hover { color: var(--canal-teal); }
.hero-overline { letter-spacing: 0.35em; text-transform: uppercase; font-size: 0.8125rem; }
.hero-badge { background: rgba(0,0,0,0.55); color: var(--white); border: 1px solid var(--accent-on-dark); backdrop-filter: blur(4px); }
.btn-secondary { backdrop-filter: blur(6px); background: rgba(255,255,255,0.12); }
.btn-secondary:hover { background: rgba(255,255,255,0.22); }
.comparison-col--highlight { border-color: var(--canal-teal); }

/* Visually mute the last comparison column (a deliberately weaker
   alternative comparison variant). MUST be scoped to
   exclude highlighted cells — otherwise, on any site where
   `highlight_column` points to the last column, this rule fades the
   very header/cells that should stand out. Body cells are rescued by
   `.comparison-cell--highlight { opacity: 1 !important }`, but the
   header has no analogous rescue, producing an inconsistent 55%-faded
   badge + label on top of a fully-opaque column body. */
.comparison-table th:last-child:not(.comparison-col--highlight),
.comparison-table td:last-child:not(.comparison-cta-cell):not(.comparison-cell--highlight) {
  opacity: 0.55;
  font-style: italic;
}
.comparison-table th:last-child:not(.comparison-col--highlight) {
  font-style: normal;
}

/* Neon glow accent on trust band icons */
.trust-icon-svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--canal-teal) 15%, transparent)); }

/* Gold accent for highlight check marks */
.highlight-check--gold { stroke: var(--gold); }

/* ── Footer SEO Links ── */
.footer-seo-links {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: var(--space-8) 0;
}
.footer-seo-title {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-on-dark);
  margin-bottom: var(--space-4);
}
.footer-seo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-seo-link {
  font-size: 0.8125rem;
  color: var(--silver);
  text-decoration: none;
  transition: color var(--transition-fast);
  white-space: nowrap;
}
.footer-seo-link:hover {
  color: var(--canal-light);
  text-decoration: underline;
}

/* ── Guide / Article Pages ─────────────────────────────────── */

/* Breadcrumb */
.breadcrumb {
  background: var(--mist);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--silver);
}
.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
  color: var(--stone);
}
.breadcrumb-list li:not(:last-child)::after {
  content: "›";
  margin-left: var(--space-2);
  color: var(--silver);
}
.breadcrumb-list a {
  color: var(--canal-teal);
  text-decoration: none;
}
.breadcrumb-list a:hover {
  text-decoration: underline;
}
.breadcrumb-list [aria-current="page"] {
  color: var(--slate);
  font-weight: 500;
}

/* Guide Header */
.guide-header {
  padding: var(--space-12) 0 var(--space-8);
  text-align: center;
}
.guide-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--deep-canal);
  margin-bottom: var(--space-3);
  line-height: 1.2;
}
.guide-subtitle {
  font-size: 1.05rem;
  color: var(--slate);
  max-width: 640px;
  margin: 0 auto var(--space-3);
  line-height: 1.6;
}
.guide-meta {
  font-size: 0.85rem;
  color: var(--stone);
}

/* Guide Body */
.guide-body {
  padding-bottom: var(--space-16);
}

/* Prose extensions for article content */
.prose h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--deep-canal);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: 0.92rem;
}
.prose thead {
  background: var(--deep-canal);
  color: var(--white);
}
.prose th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 600;
  font-size: 0.85rem;
}
.prose td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--silver);
  color: var(--slate);
  line-height: 1.5;
}
.prose tbody tr:hover {
  background: var(--tint-surface-soft);
}
.prose ol {
  list-style: decimal;
  padding-left: var(--space-6);
  color: var(--slate);
}
.prose ol li {
  margin-bottom: var(--space-2);
  line-height: 1.65;
}

/* Guide Listing Cards */
.guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}
.guide-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--silver);
  border-radius: var(--rounded-lg);
  padding: var(--space-6);
  text-decoration: none;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.guide-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.guide-card-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--deep-canal);
  margin-bottom: var(--space-2);
}
.guide-card-desc {
  font-size: 0.92rem;
  color: var(--slate);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}
.guide-card-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--canal-teal);
}

/* Responsive table scroll on mobile */
@media (max-width: 640px) {
  .prose table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Editorial section + figure (homepage index.html + kyoto-page spoke/landing pages) ── */
.editorial-section { background: var(--mist); }
.editorial-prose { margin-top: 1.5rem; }
.editorial-figure { margin: 0 0 2rem; }
.editorial-figure a { display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px var(--shadow-tint); transition: transform .25s ease, box-shadow .25s ease; }
.editorial-figure a:hover { transform: translateY(-3px); box-shadow: 0 16px 40px var(--shadow-tint-strong); }
.editorial-figure img { display: block; width: 100%; height: auto; }
.editorial-figure figcaption { margin-top: .75rem; font-size: .85rem; color: var(--slate, #475569); text-align: center; font-style: italic; line-height: 1.5; }
/* ── Tour page: enriched content sections (Norway build) ───── */
.tour-to-bring { list-style: none; padding: 0; }
.tour-to-bring li {
  position: relative; padding: var(--space-3) var(--space-3) var(--space-3) 2.2rem;
  margin-bottom: var(--space-2); background: rgba(255,255,255,0.05);
  border-radius: var(--rounded-md); color: var(--mist);
}
.tour-to-bring li::before {
  content: ""; position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; background: var(--canal-teal);
}
/* Good to know / caveats — amber left-accent to read as "note" */
.tour-good-to-know { list-style: none; padding: 0; }
.tour-good-to-know li {
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2);
  background: var(--tint-surface-faint); border-left: 3px solid var(--accent-on-dark);
  color: var(--mist); line-height: 1.55;
}
/* Not suitable for */
.tour-not-suitable ul { list-style: none; padding: 0; }
.tour-not-suitable li {
  position: relative; padding: var(--space-2) var(--space-3) var(--space-2) 2.2rem;
  margin-bottom: var(--space-2); color: var(--mist);
}
.tour-not-suitable li::before {
  content: "\00d7"; position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%);
  color: var(--accent-on-dark); font-weight: 700; font-size: 1.1rem;
}
/* Traveler reviews */
.tour-reviews-summary { color: var(--mist); font-size: 1.05rem; margin-bottom: var(--space-4); }
.tour-reviews-summary strong { color: var(--white); }
.tour-reviews-list { display: grid; gap: var(--space-4); }
.tour-review {
  margin: 0; padding: var(--space-5); background: rgba(255,255,255,0.05);
  border-radius: var(--rounded-lg); border: 1px solid rgba(255,255,255,0.08);
}
.tour-review-stars { color: #E8C06B; display: flex; gap: 2px; margin-bottom: var(--space-2); }
.tour-review p { color: var(--mist); font-style: italic; line-height: 1.6; margin: 0 0 var(--space-2); }
.tour-review cite { color: rgba(255,255,255,0.7); font-style: normal; font-weight: 600; font-size: 0.9rem; }
/* FAQ accordion */
.tour-faq-list { display: grid; gap: var(--space-2); }
.tour-faq-item {
  background: rgba(255,255,255,0.05); border-radius: var(--rounded-md);
  border: 1px solid rgba(255,255,255,0.08); overflow: hidden;
}
.tour-faq-item summary {
  cursor: pointer; padding: var(--space-4); font-family: var(--font-display);
  font-weight: 600; color: var(--white); list-style: none; position: relative; padding-right: 2.5rem;
}
.tour-faq-item summary::-webkit-details-marker { display: none; }
.tour-faq-item summary::after {
  content: "+"; position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%);
  color: var(--canal-light); font-size: 1.4rem; font-weight: 400; transition: var(--transition-fast);
}
.tour-faq-item[open] summary::after { content: "\2212"; }
.tour-faq-answer { padding: 0 var(--space-4) var(--space-4); }
.tour-faq-answer p { color: var(--mist); line-height: 1.6; margin: 0; }

/* Excludes read as the negative of includes — same card, muted left rule
   and a x marker so the two lists are never confused at a glance. The
   scaffold shipped NO .tour-excludes rule, so these <li>s rendered as bare
   unstyled text beside card-styled siblings.
   (mikumidaysafarifromzanzibar 2026-08-15) */
.tour-excludes li {
  position: relative;
  padding-left: var(--space-8);
  border-left: 3px solid var(--stone);
  color: var(--silver);
}
.tour-excludes li::before {
  content: "\00d7";
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-on-dark);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
}

/* ── Key-takeaways / explore-hub in-body links (HOMEPAGE-CONVERSION-PATTERNS
   §8) ── DEFAULT, not opt-in. The global reset (`a { color: inherit;
   text-decoration: none; }`) makes any link inside .highlights-list invisible
   without an override. Colour + weight carry the affordance at rest,
   underline only on hover, so a 4-8 link list doesn't turn into visual
   noise. --gold-text, not --gold — the latter is the CTA/button colour and
   fails contrast as small body text on the pale section backgrounds. */
#explore .highlight-item a {
  color: var(--gold-text);
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition-fast);
}
#explore .highlight-item a:hover {
  color: var(--gold-dark);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
#explore .highlight-item a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ── Narrative itinerary (HOMEPAGE-CONVERSION-PATTERNS §4) ── DEFAULT, not
   opt-in. Written against existing tokens so a palette swap re-colours it
   with zero edits. Header is CENTRED (matches every other .section-header
   on this page — a left-aligned block is the one thing off the page's
   centre axis). The stops stay LEFT-aligned inside a centred <ol> — a
   sequence on a connector line needs a common left edge. */
.itinerary-header {
  text-align: center;
  margin-inline: auto;
  max-width: 780px;
  margin-bottom: var(--space-6);
}
.itinerary-narrative {
  max-width: 700px;
  margin: 0 auto var(--space-10);
  text-align: center;
  color: var(--slate);
  line-height: 1.7;
  font-size: 1.05rem;
}
.itinerary-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 640px;
  text-align: left;
}
.itinerary-item {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-8);
}
.itinerary-item:last-child { padding-bottom: 0; }
.itinerary-item::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 40px;
  bottom: 0;
  width: 2px;
  background: var(--silver);
}
.itinerary-item:last-child::before { display: none; }
.itinerary-num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--rounded-md);
  background: var(--gold-shimmer);
  color: var(--on-accent);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.itinerary-body {
  padding-top: var(--space-1);
  color: var(--slate);
  line-height: 1.65;
}
.itinerary-body strong {
  color: var(--charcoal);
  font-family: var(--font-display);
}
@media (max-width: 640px) {
  .itinerary-body strong { display: block; margin-bottom: var(--space-1); }
  .itinerary-sep { display: none; }
}
/* ── Guide-page widget top spacing ────────────────────────────────────────
   Both guide widgets (.guide-availability right after the intro paragraph,
   .guide-auto-widget after the required separator section — see
   layouts/guides/single.html) inherit the shared .section padding-block
   (48/56/72px responsive) on top AND bottom by default, so each widget opens
   with as much air above it as a full new section — fighting the "reads as
   immediately following the paragraph above it" placement contract in
   memory/reference_guide_widget_placement.md. Scoped to these two guide-only
   classes; placed after the .section responsive breakpoint rules above so it
   wins by source order without !important (CLAUDE.md rule #42: edit
   site-local CSS at the source, don't fight it with specificity tricks).
   Bottom padding is untouched, so spacing below each widget still scales
   normally with viewport. (Codified 2026-08-21, niagarariverjetboat.com —
   reported as a per-site fix, then generalized: the underlying markup and
   .section rule are scaffold-wide, so every future guide page would have
   shipped with this same oversized gap.) */
.guide-body-intro,
.guide-body-above-auto {
  /* The FACING EDGE. .guide-body carries padding-bottom: var(--space-16) (64px),
     and the two blocks that sit directly above a widget pay it straight into the
     widget's seam. The trailing .guide-body keeps its padding — it still needs
     the gap before the CTA band. (2026-08-21, champagnedaytoursfromparis.com:
     the 2026-08-21 padding-top fix below, shipped alone, removed 24px of a 172px
     stack and the complaint came back within days. Fix the seam, not one term.)

     THE SELECTOR NAME IS LOAD-BEARING. This rule was written as
     `.guide-body-section1` while layouts/guides/single.html has always rendered
     `guide-body-above-auto` — so it selected NOTHING on every clone from the day
     the three-way body split landed, and every guide page shipped 168px of dead
     air above its auto widget against a 110px budget. Nothing caught it: the
     stylesheet reads correctly, hugo builds clean, and _audit_widget_spacing.py
     printed the same dead class name in its own remedy, so an agent following
     the tool's advice re-applied the bug. Re-bound 2026-08-27
     (korouomafrozenwaterfalls.com). If the template's class ever changes again,
     change it HERE in the same commit. */
  padding-bottom: 0;
}

/* Generic widget sections FIRST: .alt-tours-section and .guide-auto-widget are
   both single-class selectors, so they tie on specificity and SOURCE ORDER
   decides. With this rule last, a guide's auto widget silently takes the
   homepage's value instead of the guide's. */
.booking-section,
.alt-tours-section {
  padding-top: var(--space-8);
}

.guide-availability,
.guide-auto-widget {
  padding-top: var(--space-6);
}

/* NOT trimmed on purpose: .booking-widget-wrapper's own padding is the card's
   symmetric inset. Trimming only its top renders the card lopsided.
   Gate: python _audit_widget_spacing.py <site-dir>  (measures getComputedStyle;
   a source grep cannot see a class that was never defined, a specificity tie,
   or a token that computes to 0). */

/* ── Fixed-header clearance ───────────────────────────────────────────────────
   The header is position:fixed and ~60px (mobile) / ~66px (desktop) tall. Any
   page whose first section starts at the very top of <main> has its opening
   line rendered UNDERNEATH it: the default .section padding-block is only 48px
   at mobile. /404.html and /guides/ shipped clipped at <=768px on every clone.
   The recipe was already codified (memory/reference_fixed_header_traps.md,
   Trap 1) but had never been baked into the scaffold.

   MUST stay at the END of this file. .section's padding-block is redefined
   inside later @media blocks; placed earlier, this rule loses on source order
   and the clip returns at exactly the breakpoints the media queries cover — it
   passed at 390px and 1440px while still failing at 768px.
   (Reported on waiotapu-tickets.com 2026-08-24.) */
.clears-header { padding-top: calc(66px + var(--space-8)); }
@media (min-width: 768px) { .clears-header { padding-top: calc(66px + var(--space-10)); } }


/* ── Button labels can never widen the page ───────────────────────────────
   Every button class in this scaffold sets `white-space: nowrap`, and several
   carry per-site labels from hugo.toml (`tourBackLinkText`,
   `toursListBottomCTAButton`, `ctaButton`, `heroCTAPrimary`). A long one blows
   past a 320px viewport and the WHOLE PAGE gains a horizontal scrollbar.

   This was first fixed on `.btn-secondary-dark`, then re-fixed on `.btn-outline`
   when the 404 changed class — and a portfolio sweep on 2026-08-25 found the
   identical defect a third time on `.btn-primary`: waitomocavestour.com's
   /tours/ hub measured 463px inside 320px (a 143px overflow) from its bottom-CTA
   label alone. 20 of 31 sites showed some form of it. Fixing one selector at a
   time is what let it survive twice, so this rule covers the family.

   Desktop appearance is unchanged: `max-width` only bites when the button would
   otherwise overflow, and the wrap is scoped to narrow viewports.
   (rotoruamaorivillage.com 2026-08-25 — see checklist V.) */
.btn-primary, .btn-secondary, .btn-secondary-dark, .btn-outline, .btn-sm, .btn-lg {
  max-width: 100%;
}
@media (max-width: 480px) {
  .btn-primary, .btn-secondary, .btn-secondary-dark, .btn-outline {
    white-space: normal;
  }
  .btn-lg { padding: var(--space-3) var(--space-5); }
}

/* ── Narrow-viewport chrome: nowrap labels wider than the viewport ─────────
   Two sitewide 320px horizontal-scroll bugs, both in SHARED chrome, so both
   fail on every page type at once — home, tours, guides, legal AND /404.html.
   Neither is greppable: the build is green, the markup audit is green, and the
   stylesheet source reads correctly. Only _audit_viewport.py's 320px sweep
   sees them. (Reported on knossospalacetours.com 2026-08-27.)

   1. HEADER LOGO. `.logo` above is `flex-shrink: 0` and `.logo-tagline` is
      never hidden, so the header row is as wide as the site NAME plus a
      0.18em-tracked tagline, whatever the viewport. That makes the bug scale
      with the name: a short two-word name fits inside 320px and a longer
      three-word one does not, so the scaffold ships it LATENT and it surfaces
      only on some clones. `.hamburger` must NOT shrink — it is the tap target.

      This was codified as rule #39 in memory/feedback_new_project_workflow.md
      for the Option-B kyoto scaffold in 2026, and never carried into this
      Option-A base — which is why it resurfaced here.

   2. FOOTER SEO LINKS. `.footer-seo-link` is `white-space: nowrap` so a keyword
      phrase reads as one line. Right at desktop, wrong at 320px: a long phrase
      is wider than the ~280px content box.

      This is the SAME failure family as the `.btn-*` block directly above
      (checklist V, rotoruamaorivillage.com 2026-08-25), whose own comment warns
      that "fixing one selector at a time is what let it survive twice". It did:
      that block never covered `.footer-seo-link`. Extended here rather than
      patched in isolation — when this recurs on a THIRD selector, add it to
      this rule, do not write a fourth block.

   Desktop is unchanged in both cases: `min-width`/`max-width` only bite when the
   element would otherwise overflow, and the wraps are scoped to narrow widths.
   Appended at the END on purpose — these must win over the base rules above. */
.nav-inner       { min-width: 0; }
.logo            { flex-shrink: 1; min-width: 0; }
.logo-text       { min-width: 0; }
.hamburger       { flex-shrink: 0; }
.footer-seo-grid { min-width: 0; }
.footer-seo-link { max-width: 100%; overflow-wrap: anywhere; }

@media (max-width: 480px) {
  .logo-tagline { display: none; }
  .logo-primary {
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .footer-seo-link { white-space: normal; }
}

/* Guides hub — the FACING EDGE above the template-placed auto widget.
   `.guides-listing` is a `.section`, so it carries the responsive
   padding-bottom (72px at desktop) and pays all of it into the seam above
   `alt-tours.html`, measuring 200px against _audit_widget_spacing.py's 180px
   budget on every clone. Same failure family as `.guide-body-above-auto`
   (checklist Y1): fix the seam, not one term of it, and scope it to the
   facing edge so the section keeps its rhythm everywhere else.
   (Codified 2026-08-27, korouomafrozenwaterfalls.com; confirmed on four
   earlier clones during the same-day sweep.) */
.guides-listing { padding-bottom: var(--space-8); }

/* ─────────────────────────────────────────────────────────────────────────
   Site-specific overrides. Appended at the END so cascade order is explicit.
   ───────────────────────────────────────────────────────────────────────── */

/* --gold-text measures 4.72:1 on the page ground but only 4.30:1 on the two
   tinted surface bands, which is large-text-only. Eyebrows are small and
   letter-spaced, so on those bands they take Pine Shade (5.49:1) instead.
   Measured, not assumed. */
.gallery-section .section-overline,
.section--tint .section-overline,
.section--warm .section-overline {
  color: var(--deep-canal);
}
/* On the dark gallery band the ink must come from the accent-on-dark token:
   --gold-text on Pine Shade is 1.28:1. */
.gallery-section .section-overline { color: var(--accent-on-dark); }

/* Alternating section grounds */
.section--tint { background: var(--canal-light); }
.section--warm { background: var(--amber-warm); }

/* ==== ZB COMPONENTS START ==== */
/* Components built for this site: the beach finder, the data cards, the fact
   blocks, the map furniture and the beach/ranking page furniture. */

/* ── shared rhythm ──────────────────────────────────────────────────────── */
.container-narrow { max-width: 760px; }
.section-footnote { margin-top: var(--space-10); text-align: center; }
/* :not([class*="btn-"]) - these rules colour a PLAIN text link in the footnote.
   A .btn-primary also lives in one (the map CTA), and at specificity 0,2,1 the
   band-scoped rule beat .btn-primary's 0,1,0 and painted Deep Aegean text onto
   the turquoise fill. Harmless in palette 1 by luck; unreadable in palette 2. */
.section-footnote a:not([class*="btn-"]) { color: var(--gold-text); font-weight: 600; }
.section--tint .section-footnote a:not([class*="btn-"]),
.section--warm .section-footnote a:not([class*="btn-"]) { color: var(--deep-canal); }

/* ── beach finder (intent chips under the hero) ─────────────────────────── */
.finder { background: var(--deep-canal); padding: var(--space-8) 0; }
.finder-heading {
  font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-on-dark); margin: 0 0 var(--space-5); text-align: center;
}
.finder-chips {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center;
}
.finder-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 10px 16px; border-radius: var(--rounded-full);
  background: var(--tint-surface-soft);
  border: 1px solid var(--accent-on-dark);
  color: var(--silver); font-size: 0.9375rem; font-weight: 600;
  text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast);
}
.finder-chip:hover, .finder-chip:focus-visible {
  background: var(--gold); color: var(--on-accent); border-color: var(--gold);
}
.finder-chip svg { flex-shrink: 0; }

/* ── measured band ──────────────────────────────────────────────────────── */
.measured-band { background: var(--canal-light); padding: var(--space-8) 0; }
.measured-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.measured-item { display: flex; flex-direction: column; gap: 2px; }
.measured-metric {
  font-family: var(--font-display); font-size: 2.25rem; font-weight: 700;
  line-height: 1; color: var(--deep-canal); font-variant-numeric: tabular-nums;
}
.measured-label { font-weight: 600; color: var(--charcoal); font-size: 1rem; }
.measured-note { font-size: 0.875rem; color: var(--slate); line-height: 1.5; }
.measured-sources {
  max-width: 78ch; margin: var(--space-6) 0 var(--space-3);
  font-size: 0.9375rem; color: var(--slate); line-height: 1.65;
}
.measured-band .last-checked { margin-top: var(--space-2); }

/* ── decision cards ─────────────────────────────────────────────────────── */
.decision-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.decision-card a {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: var(--space-6); background: var(--white);
  border: 1px solid var(--hairline); border-radius: var(--rounded-lg);
  text-decoration: none; box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.decision-card a:hover { box-shadow: var(--shadow-md); border-color: var(--gold); }
.decision-q { font-size: 0.9375rem; color: var(--slate); }
.decision-a {
  font-family: var(--font-display); font-size: 1.1875rem; font-weight: 700;
  color: var(--deep-canal);
}
.decision-arrow { margin-left: 6px; color: var(--gold-text); }
.decision-note { font-size: 0.875rem; color: var(--stone); line-height: 1.55; }

/* ── beach cards ────────────────────────────────────────────────────────── */
.beach-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.beach-card-link {
  display: flex; flex-direction: column; height: 100%; gap: var(--space-3);
  padding: var(--space-6); background: var(--white);
  border: 1px solid var(--hairline); border-radius: var(--rounded-lg);
  text-decoration: none; box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.beach-card-link:hover { box-shadow: var(--shadow-lg); border-color: var(--gold); }
.beach-card-title {
  font-family: var(--font-display); font-size: 1.3125rem; font-weight: 700;
  color: var(--deep-canal); margin: 0;
}
.beach-card-traits { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.beach-card-traits span {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 3px 9px; border-radius: var(--rounded-full);
  background: var(--canal-light); color: var(--deep-canal);
}
.beach-card-facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
  margin: 0; padding: var(--space-3) 0;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.beach-card-facts dt {
  font-size: 0.6875rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--stone); margin: 0 0 2px;
}
.beach-card-facts dd {
  margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--charcoal);
}
.beach-card-for { margin: 0; font-size: 0.9375rem; color: var(--slate); line-height: 1.55; }
.beach-card-for span {
  display: block; font-size: 0.6875rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--stone); margin-bottom: 2px;
}
.beach-card-cta {
  margin-top: auto; padding-top: var(--space-3);
  font-weight: 700; color: var(--gold-text); font-size: 0.9375rem;
}

/* ── map ────────────────────────────────────────────────────────────────── */
.map-canvas {
  width: 100%; border-radius: var(--rounded-lg);
  border: 1px solid var(--rule, var(--hairline));
  background: var(--canal-light);
}
/* Heights are set against the island's SHAPE, not by eye. Zakynthos spans
   0.28 degrees of latitude and 0.37 of longitude, so on a wide short container
   fitBounds is limited by latitude and the island renders as a speck with sea
   either side. 720px is the height at which all 46 pins fit at zoom 11. */
.map-canvas--teaser { height: 440px; cursor: pointer; }
.map-canvas--full { height: 720px; margin-bottom: var(--space-8); }
.map-noscript { font-size: 0.9375rem; color: var(--slate); margin-top: var(--space-3); }
.map-controls {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  align-items: center; margin: var(--space-6) 0 var(--space-4);
}
.facet {
  font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
  padding: 7px 14px; border-radius: var(--rounded-full);
  border: 1px solid var(--hairline); background: var(--white); color: var(--charcoal);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.facet:hover { border-color: var(--gold); }
.facet.is-on { background: var(--gold); color: var(--on-accent); border-color: var(--gold); }
.map-count {
  margin-left: auto; font-size: 0.875rem; color: var(--stone);
  font-variant-numeric: tabular-nums;
}
.map-list-heading { font-size: 1.25rem; margin: var(--space-8) 0 var(--space-4); }
.map-list {
  list-style: none; margin: 0 0 var(--space-10); padding: 0;
  display: grid; gap: 1px; background: var(--hairline);
  border: 1px solid var(--hairline); border-radius: var(--rounded-md); overflow: hidden;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.map-list a {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: 10px 14px; background: var(--white); text-decoration: none;
}
.map-list a:hover { background: var(--canal-light); }
.ml-name { font-weight: 600; color: var(--deep-canal); }
.ml-surface { font-size: 0.8125rem; color: var(--stone); }
.ml-access {
  margin-left: auto; font-size: 0.75rem; font-weight: 700; color: var(--gold-text);
  font-variant-numeric: tabular-nums;
}
/* Leaflet popup, themed */
.bm-pop { font-family: var(--font-body); min-width: 190px; }
.bm-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin: 0 0 2px; color: var(--deep-canal); }
.bm-el { font-size: 0.8125rem; color: var(--stone); margin: 0 0 6px; }
.bm-meta { font-size: 0.8125rem; color: var(--slate); margin: 0 0 6px; }
.bm-flags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.bm-flags span {
  font-size: 0.6875rem; font-weight: 600; padding: 2px 7px;
  border-radius: var(--rounded-full); background: var(--canal-light); color: var(--deep-canal);
}
.bm-cta { font-weight: 700; color: var(--gold-text); text-decoration: none; }
.bm-note { font-size: 0.8125rem; color: var(--stone); font-style: italic; }

/* ── areas / types / famous / turtle / plan / directory ─────────────────── */
.area-grid, .plan-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.area-card a, .plan-card a {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: var(--space-5) var(--space-6); background: var(--white);
  border: 1px solid var(--hairline); border-radius: var(--rounded-lg);
  text-decoration: none; box-shadow: var(--shadow-sm);
}
.area-card a:hover, .plan-card a:hover { box-shadow: var(--shadow-md); border-color: var(--gold); }
.area-name, .plan-title {
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 700;
  color: var(--deep-canal); margin: 0;
}
.area-blurb, .plan-body { margin: 0; font-size: 0.9375rem; color: var(--slate); line-height: 1.6; }
.area-count, .plan-cta {
  margin-top: auto; padding-top: var(--space-2);
  font-size: 0.875rem; font-weight: 700; color: var(--gold-text);
}
.plan-soon {
  margin-top: var(--space-6); font-size: 0.9375rem; color: var(--stone);
  text-align: center;
}
.plan-soon span { color: var(--slate); }

.type-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center;
}
.type-link {
  display: inline-block; padding: 10px 18px; border-radius: var(--rounded-full);
  background: var(--white); border: 1px solid var(--hairline);
  color: var(--deep-canal); font-weight: 600; text-decoration: none; font-size: 0.9375rem;
}
.type-link:hover { border-color: var(--gold); background: var(--amber-warm); }
.type-link--page { border-color: var(--gold); }

.famous-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; background: var(--hairline);
  border: 1px solid var(--hairline); border-radius: var(--rounded-lg); overflow: hidden;
}
.famous-item a {
  display: block; padding: var(--space-5) var(--space-6);
  background: var(--white); text-decoration: none;
}
.famous-item a:hover { background: var(--amber-warm); }
.famous-name {
  font-family: var(--font-display); font-size: 1.1875rem; font-weight: 700;
  color: var(--deep-canal); margin: 0 0 4px;
}
.famous-line { margin: 0; color: var(--slate); line-height: 1.6; }

.turtle-list {
  list-style: none; margin: 0 0 var(--space-8); padding: 0;
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.turtle-item {
  padding: var(--space-5); background: var(--white);
  border-left: 3px solid var(--deep-canal); border-radius: var(--rounded-md);
}
.turtle-name { font-size: 1.0625rem; margin: 0 0 4px; }
.turtle-name a, .turtle-item a { text-decoration: none; color: var(--deep-canal); }
.turtle-item a:hover .turtle-name { text-decoration: underline; }
.turtle-rule { margin: 0; font-size: 0.9375rem; color: var(--slate); line-height: 1.6; }
.turtle-note {
  max-width: 70ch; margin: 0 auto; padding: var(--space-5);
  background: var(--white); border-radius: var(--rounded-md);
  color: var(--slate); line-height: 1.7;
}

.directory {
  list-style: none; margin: 0 0 var(--space-6); padding: 0;
  display: grid; gap: 1px; background: var(--hairline);
  border: 1px solid var(--hairline); border-radius: var(--rounded-md); overflow: hidden;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.directory-item a {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: 9px 14px; background: var(--white); text-decoration: none;
}
.directory-item a:hover { background: var(--amber-warm); }
.directory-name { font-weight: 600; color: var(--deep-canal); }
.directory-el { font-size: 0.8125rem; color: var(--stone); }
.directory-badge {
  margin-left: auto; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 2px 7px; border-radius: var(--rounded-full);
  background: var(--gold); color: var(--on-accent);
}
.directory-note {
  max-width: 70ch; margin: 0 auto; font-size: 0.9375rem;
  color: var(--slate); line-height: 1.7;
}

/* ── status box ─────────────────────────────────────────────────────────── */
.status-section { padding-block: var(--space-10); }
.status-box {
  padding: var(--space-8); border-radius: var(--rounded-lg);
  background: var(--amber-warm); border: 1px solid var(--hairline);
  border-left: 4px solid var(--canal-teal);
}
.status-eyebrow {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--canal-teal); margin: 0 0 var(--space-3);
}
.status-title { font-size: 1.75rem; margin: 0 0 var(--space-3); }
.status-headline {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
  color: var(--charcoal); margin: 0 0 var(--space-3); line-height: 1.4;
}
.status-summary { margin: 0 0 var(--space-5); color: var(--slate); line-height: 1.7; }
.status-facts {
  display: grid; gap: var(--space-4); margin: 0 0 var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  padding: var(--space-4) 0; border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.status-facts dt {
  font-size: 0.6875rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--stone); margin-bottom: 2px;
}
.status-facts dd { margin: 0; font-weight: 700; color: var(--charcoal); }
.status-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin: 0; }
.status-secondary { font-weight: 600; color: var(--deep-canal); }

/* ── beach + ranking pages ──────────────────────────────────────────────── */
.beach-header, .ranking-header, .map-header {
  padding: var(--space-10) 0 var(--space-6);
}
.beach-eyebrow {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--canal-teal); margin: 0 0 var(--space-3);
}
.beach-title, .ranking-title, .map-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 2.75rem); line-height: 1.12;
  margin: 0 0 var(--space-3); color: var(--deep-canal); text-wrap: balance;
}
.beach-alias { margin: 0 0 var(--space-3); color: var(--stone); font-size: 1.0625rem; }
.ranking-answer {
  font-size: 1.125rem; line-height: 1.7; color: var(--charcoal);
  margin: 0 0 var(--space-4); max-width: 68ch;
}
.map-intro { font-size: 1.0625rem; color: var(--slate); max-width: 70ch; margin: 0 0 var(--space-3); }

.last-checked {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
  align-items: baseline; font-size: 0.875rem; color: var(--stone); margin: 0;
}
.lc-label {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--canal-teal);
}
.lc-recheck { font-style: italic; }

.answer-box {
  margin: 0 0 var(--space-8); padding: var(--space-6);
  background: var(--amber-warm); border-left: 4px solid var(--gold);
  border-radius: var(--rounded-md);
}
.answer-trigger {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold-text); margin: 0 0 var(--space-2);
}
.answer-text { margin: 0; line-height: 1.7; color: var(--charcoal); }
.answer-link { margin: var(--space-3) 0 0; }
.answer-link a { font-weight: 700; color: var(--deep-canal); }

.beach-verdict {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 600;
  line-height: 1.55; color: var(--deep-canal);
  margin: 0 0 var(--space-8); padding-left: var(--space-5);
  border-left: 3px solid var(--gold);
}

/* Lead image — the photograph under a page H1 (lead-image.html). Wider than an
   in-prose figure on purpose: it belongs to the PAGE, not the text column.
   (Marina, 2026-08-31 — ported from la-jolla-cove.org) */
.lead-image { margin: 0 0 var(--space-10); }
.lead-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--rounded-lg); box-shadow: 0 10px 30px var(--shadow-tint); }
.lead-image figcaption { margin-top: var(--space-3); font-size: 0.85rem; color: var(--slate); font-style: italic; line-height: 1.5; }
@media (max-width: 640px) { .lead-image img { aspect-ratio: 4 / 3; } }

/* In-prose photos. A bare <figure> in a content file has NO styling in this
   scaffold — only .editorial-figure was ever defined — so any photo added to a
   beach or ranking body would render as a raw full-bleed image with an
   unstyled caption. Defined ahead of the photos.
   (Marina, 2026-08-31 — ported from la-jolla-cove.org) */
.prose figure, .beach-prose figure, .ranking-prose figure, .map-prose figure {
  max-width: 820px; margin: var(--space-8) auto;
}
.prose figure img, .beach-prose figure img, .ranking-prose figure img, .map-prose figure img {
  display: block; width: 100%; height: auto;
  border-radius: var(--rounded-lg); box-shadow: 0 10px 30px var(--shadow-tint);
}
.prose figure figcaption, .beach-prose figure figcaption,
.ranking-prose figure figcaption, .map-prose figure figcaption {
  margin-top: var(--space-3); font-size: 0.85rem; color: var(--slate);
  text-align: center; font-style: italic; line-height: 1.5;
}

.fact-block { margin: 0 0 var(--space-10); }
.fact-heading { font-size: 1.25rem; margin: 0 0 var(--space-4); }
.fact-grid {
  display: grid; gap: 1px; margin: 0; background: var(--hairline);
  border: 1px solid var(--hairline); border-radius: var(--rounded-md); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.fact { background: var(--white); padding: var(--space-4) var(--space-5); }
/* Seam-table cells must FILL their grid row ========================
   .map-list / .famous-list / .directory / .fact-grid draw their rules with
   `gap: 1px` over a --hairline ground: the 1px "borders" are the parent
   showing through between white cells. That only holds while every cell is
   the full height of its row. The <a> (or .fact) carries the white
   background, not the <li>, so the moment ONE label in a row wraps to two
   lines the row grows, the short cells do not, and the hairline shows beneath
   them as a pale strip. On this site 7 of the 8 directory rows contain a
   wrapping beach name, so the defect was close to universal.
   Layout only: no colour, spacing or type changes.
   (Marina, 2026-08-31 — ported from la-jolla-cove.org) */
.map-list > li, .famous-item, .directory-item { display: flex; }
.map-list > li > a, .famous-item > a, .directory-item > a { flex: 1 1 auto; }
.fact dt {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--stone); margin-bottom: 3px;
}
.fact dd { margin: 0; font-weight: 600; color: var(--charcoal); }
.fact-unknown { color: var(--stone); font-weight: 400; font-style: italic; }
.fact-source { margin: var(--space-3) 0 0; font-size: 0.8125rem; color: var(--stone); line-height: 1.6; }

.beach-widget { margin: 0 0 var(--space-10); }

.nearby, .elsewhere, .gaps, .sources, .contrarian, .criteria {
  margin: var(--space-10) 0;
}
.nearby h2, .elsewhere h2, .gaps h2, .sources h2, .contrarian h2, .criteria-heading {
  font-size: 1.375rem; margin: 0 0 var(--space-4);
}
.nearby-intro { color: var(--slate); margin: 0 0 var(--space-4); }
.nearby-list, .elsewhere-list, .gaps-list, .sources-list, .criteria-list {
  list-style: none; margin: 0; padding: 0;
}
.nearby-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline);
}
.nearby-name { font-weight: 700; color: var(--deep-canal); }
.nearby-time {
  font-size: 0.75rem; font-weight: 700; padding: 2px 8px;
  border-radius: var(--rounded-full); background: var(--canal-light);
  color: var(--deep-canal); font-variant-numeric: tabular-nums;
}
.nearby-why { flex: 1 1 260px; color: var(--slate); font-size: 0.9375rem; }

.elsewhere-list li, .gaps-list li, .criteria-list li {
  padding: var(--space-3) 0 var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--hairline); position: relative;
  color: var(--slate); line-height: 1.7;
}
.elsewhere-list li::before, .gaps-list li::before, .criteria-list li::before {
  content: ""; position: absolute; left: 0; top: 1.45em;
  width: 7px; height: 7px; background: var(--gold); border-radius: 2px;
}
.elsewhere-list strong, .gaps-list strong { color: var(--charcoal); }
.gaps-list em { color: var(--stone); }
.criteria {
  padding: var(--space-6); background: var(--canal-light); border-radius: var(--rounded-lg);
}
.criteria-list li { border-bottom: none; padding-bottom: var(--space-2); }
.sources-list li {
  padding: var(--space-2) 0; font-size: 0.9375rem; color: var(--slate); line-height: 1.65;
  border-bottom: 1px solid var(--hairline);
}

/* ── ranked list ────────────────────────────────────────────────────────── */
.rank-list { list-style: none; margin: var(--space-8) 0; padding: 0; counter-reset: rank; }
.rank-item {
  display: grid; grid-template-columns: 52px 1fr; gap: var(--space-5);
  padding: var(--space-6) 0; border-bottom: 1px solid var(--hairline);
}
.rank-num {
  font-family: var(--font-display); font-size: 1.75rem; font-weight: 700;
  color: var(--gold); line-height: 1; font-variant-numeric: tabular-nums;
}
.rank-name { font-size: 1.375rem; margin: 0 0 var(--space-2); }
.rank-name a { color: var(--deep-canal); text-decoration: none; }
.rank-name a:hover { text-decoration: underline; }
.rank-traits { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--space-3); }
.rank-traits span {
  font-size: 0.75rem; font-weight: 600; padding: 3px 9px;
  border-radius: var(--rounded-full); background: var(--canal-light); color: var(--deep-canal);
}
.rank-why { margin: 0; color: var(--slate); line-height: 1.75; }
.rank-against {
  margin: var(--space-3) 0 0; color: var(--stone); line-height: 1.7; font-size: 0.9375rem;
}
.rank-against span { font-weight: 700; color: var(--canal-teal); }

.contrarian { padding: var(--space-8); background: var(--amber-warm); border-radius: var(--rounded-lg); }
.contrarian-point { padding: var(--space-4) 0; border-top: 1px solid var(--hairline); }
.contrarian-point:first-of-type { border-top: none; padding-top: 0; }
.contrarian-point h3 {
  font-family: var(--font-body); font-size: 1rem; font-weight: 700;
  color: var(--canal-teal); margin: 0 0 var(--space-2); font-style: italic;
}
.contrarian-point p { margin: 0; color: var(--charcoal); line-height: 1.75; }

/* Map CTA tail block. Two fixes, both scoped — `.section` is site-wide:
     - lighter TOP padding: this closes a page that already ends in small print
       (gaps, sources), so a full --space-12 above it reads as a missing
       section rather than a break.
     - the button's paragraph had NO top margin: the global reset zeroes every
       margin, so `<p><a class="btn-primary">` sat flush against the line above
       it. Margin goes on the wrapper, never on .btn-primary, a shared
       component. (Marina, 2026-08-31 — ported from la-jolla-cove.org) */
.map-cta { padding-block: var(--space-8) var(--space-12); }
.map-cta > .container > p + p { margin-top: var(--space-6); }
.beach-map-cta { text-align: center; }
.beach-map-cta h2 { font-size: 1.5rem; margin: 0 0 var(--space-3); }
.beach-map-cta p { color: var(--slate); }

/* ── prose ──────────────────────────────────────────────────────────────── */
.beach-prose h2, .ranking-prose h2, .map-prose h2 {
  font-size: 1.5rem; margin: var(--space-10) 0 var(--space-4); color: var(--deep-canal);
}
.beach-prose h3, .ranking-prose h3 { font-size: 1.1875rem; margin: var(--space-8) 0 var(--space-3); }
.beach-prose p, .ranking-prose p, .map-prose p { line-height: 1.8; margin: 0 0 var(--space-4); }
.beach-prose table, .ranking-prose table { width: 100%; border-collapse: collapse; margin: var(--space-6) 0; }
.beach-prose th, .beach-prose td, .ranking-prose th, .ranking-prose td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hairline);
}
.beach-prose th, .ranking-prose th {
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--stone); background: var(--canal-light);
}

/* ── breadcrumb ─────────────────────────────────────────────────────────── */
.breadcrumb { padding-top: var(--space-6); }
.breadcrumb-list {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin: 0; padding: 0; font-size: 0.875rem; color: var(--stone);
}
.breadcrumb-list li + li::before { content: "/"; margin-right: var(--space-2); color: var(--hairline); }
.breadcrumb-list a { color: var(--slate); text-decoration: none; }
.breadcrumb-list a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .beach-card-facts { grid-template-columns: repeat(2, 1fr); }
  .rank-item { grid-template-columns: 36px 1fr; gap: var(--space-3); }
  .rank-num { font-size: 1.375rem; }
  /* Narrow viewports are portrait, which suits the island: less height needed. */
  .map-canvas--full { height: 560px; }
  .map-canvas--teaser { height: 340px; }
  .map-count { margin-left: 0; width: 100%; }
  .status-box, .contrarian, .criteria { padding: var(--space-5); }
}
/* ==== ZB COMPONENTS END ==== */


/* ── Type roles for palette 2 (DM Serif Display + Inter) ───────────────────
   DM Serif Display ships ONE weight (400). Every scaffold heading asked for
   600/700, which makes the browser synthesise a faux bold that smears the
   serifs at display sizes. Two corrections, appended after the component rules
   so they win on order rather than with !important:

   1. Headings drop to 400 and let SIZE carry the hierarchy - which is how a
      display serif is meant to work.
   2. Numerals and UI controls move to Inter and KEEP their weights. The brief
      says "Body/UI: Inter", and a high-contrast display serif is the wrong
      tool for a price, a rank number or a button label: at small sizes its
      thin strokes drop out, and it has no bold to fall back on.
   Added 2026-08-29 with the Ionian palette. */

.section-title, .hero-title, .page-title, .cta-title, .guide-title,
.guide-card-title, .beach-card-title, .area-name, .plan-title, .famous-name,
.status-headline, .beach-title, .ranking-title, .map-title, .highlights-col-title,
.step-title, .widget-fallback-title, .bm-name, .decision-a, .beach-verdict,
.logo-primary, .footer-logo-text, .prose h2, .prose h3 {
  font-weight: 400;
}

.btn-outline, .price-amount, .sticky-price-amount, .trust-metric,
.measured-metric, .step-number, .aggregate-score, .rank-num,
.tour-faq-item summary {
  font-family: var(--font-ui);
}

/* The display serif has a larger apparent x-height and tighter default
   leading than Manrope did; pull the big headings in slightly so the two-line
   H1 does not open up. */
.hero-title, .page-title, .beach-title, .ranking-title, .map-title {
  line-height: 1.12;
  letter-spacing: -0.005em;
}


/* ── Availability block on an informational page ───────────────────────────
   Deliberately quieter than the scaffold's booking section: a hairline-framed
   card on the warm surface rather than a full-bleed tinted band. The widget is
   answering a question the reader already has, so it should read as part of the
   page, not as an interruption laid over it. Added 2026-08-29. */
.avail-section {
  padding-block: var(--space-8);
}
.beach-page .avail-section,
.ranking-page .avail-section {
  padding-block: 0;
  margin-block: var(--space-10);
}
.beach-page .avail-section > .container,
.ranking-page .avail-section > .container {
  /* --space-7 does NOT exist in this scale (1,2,3,4,5,6,8,10,12,16,20). Using
     it made the whole `padding` declaration invalid at computed-value time, so
     the box kept its background and border and lost every inset - text sat
     flush against the edge. A var() typo fails exactly this quietly. */
  padding: var(--space-8);
  background: var(--amber-warm);
  border: 1px solid var(--hairline);
  border-radius: var(--rounded-lg);
}
.avail-header { margin-bottom: var(--space-6); }
.avail-overline {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: var(--space-2);
}
.avail-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  line-height: 1.2;
  color: var(--deep-canal);
  margin-bottom: var(--space-3);
  text-wrap: balance;
}
.avail-intro {
  max-width: 68ch;
  color: var(--slate);
  font-size: 1.0625rem;
  line-height: 1.65;
}
/* The availability panel already IS a card: .beach-page/.ranking-page give
   .avail-section > .container an amber ground, hairline and radius. The
   factory's .booking-widget-wrapper then drew a SECOND card inside it — mist
   ground, 24px radius, shadow-lg, 32px padding, 800px cap — so the widget sat
   inset from the heading, intro and disclosure that belong to it. Box in a
   box, on all 8 pages that carry a widget. The class must stay (the
   "widget script never loaded" fallback rule keys off it); only the card
   treatment is stripped, and only here — alt-tours.html reuses the same class
   and keeps its box. (Marina, 2026-08-31 — ported from la-jolla-cove.org) */
.avail-widget { margin-top: var(--space-5); max-width: none; margin-inline: 0; background: none; border-radius: 0; padding: 0; box-shadow: none; }
.avail-disclosure {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--stone);
}