/* ==========================================================================
   SELF-HOSTED FONTS — Manrope + DM Sans (variable, latin + latin-ext)
   Served locally from /fonts to avoid sending visitor IPs to Google's CDN.
   These are variable fonts, so one file per family+subset covers every weight.
   ========================================================================== */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/dmsans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/dmsans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   PROPERTY REGISTRATION FOR FLUID TYPE TOKENS
   Registers custom properties that contain clamp() with vw units.
   Fixes a Chromium/Edge bug where vw inside an unregistered custom property
   resolves to 0, collapsing every clamp() to its minimum value.
   Must appear before :root so registration precedes any consumption.
   ========================================================================== */

@property --text-display {
  syntax: '<length>';
  inherits: true;
  initial-value: 36px;
}

@property --text-5xl {
  syntax: '<length>';
  inherits: true;
  initial-value: 32px;
}

@property --text-4xl {
  syntax: '<length>';
  inherits: true;
  initial-value: 28px;
}

@property --text-3xl {
  syntax: '<length>';
  inherits: true;
  initial-value: 36px;
}

@property --text-2xl {
  syntax: '<length>';
  inherits: true;
  initial-value: 20px;
}

@property --text-xl {
  syntax: '<length>';
  inherits: true;
  initial-value: 18px;
}

@property --text-card-title {
  syntax: '<length>';
  inherits: true;
  initial-value: 21px;
}

@property --pad-page {
  syntax: '<length>';
  inherits: true;
  initial-value: 24px;
}

@property --pad-wide {
  syntax: '<length>';
  inherits: true;
  initial-value: 32px;
}

@property --pad-tight {
  syntax: '<length>';
  inherits: true;
  initial-value: 16px;
}


/* ==========================================================================
   RESET & BASE
   ========================================================================== */

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

html {
  /* Resolve against the content area (excludes the vertical scrollbar) so the page
     never ends up wider than the visible viewport. 100vw would include the scrollbar
     width and force a ~15px horizontal scroll on desktop. The mobile media query below
     re-asserts 100vw, where it's needed to counter Safari's overflow-clip shrink bug. */
  min-width: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

a[target="_blank"] {
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: underline;
}

/* Reinforce bold + forest green + underline in high-specificity content contexts */
.article-main a[target="_blank"],
.itinerary-day__content a[target="_blank"],
.info-pill__text a[target="_blank"],
.callout a[target="_blank"] {
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: underline;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
}


/* ==========================================================================
   CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
  /* ── Primary — Forest Green ─────────────────────────────── */
  --color-accent:        #2F4A3A;
  --color-accent-dark:   #1C2E25;
  --color-accent-mid:    #3D6050;
  --color-accent-light:  #527A67;
  --color-accent-pale:   #A3C2B4;
  --color-accent-tint:   #E8F2ED;

  /* ── Secondary — Gold ───────────────────────────────────── */
  --color-gold:          #C9973A;
  --color-gold-dark:     #A07826;
  --color-gold-mid:      #D4A84A;
  --color-gold-light:    #E8BF6A;
  --color-gold-pale:     #F2D99A;
  --color-gold-wash:     #FDF6E7;

  /* ── Backgrounds & surfaces ─────────────────────────────── */
  --color-bg:            #FAF8F4;
  --color-surface:       #FFFFFF;
  --color-surface-raised:#F5F2ED;
  --color-bone:          #f0ece6;

  /* ── Text ───────────────────────────────────────────────── */
  --color-text:          #1E1B18;
  --color-text-muted:    #6B6560;
  --color-fg2:           #3B3630;
  --color-fg3:           #6B6560;
  --color-fg4:           #9E9890;

  /* ── Borders ────────────────────────────────────────────── */
  --color-border:        #DDD8CF;
  --color-border-strong: #B8B0A4;

  /* ── Nav ────────────────────────────────────────────────── */
  --color-nav:           #FFFFFF;

  /* ── Accordion card palette (unchanged) ─────────────────── */
  --panel-bg:          #FAF7F1;
  --panel-border:      #E4DFCF;
  --panel-border-open: #5B7F5E;
  --panel-header-sep:  #E8E4DA;
  --panel-icon-bg:     #E8E4DA;
  --panel-icon-open:   #5B7F5E;
  --panel-title-open:  #3A5F3D;
  --panel-muted:       #888780;
  --panel-badge-bg:    #EDEAE2;
  --panel-dot-visited: #9FE1CB;
  --panel-dot-unvisit: #D3D1C7;
  --panel-progress-bg: #F0ECE2;

  /* ── Fonts ──────────────────────────────────────────────── */
  --font-serif: 'Manrope', system-ui, sans-serif;
  --font-body:  'DM Sans', system-ui, sans-serif;
  --font-sans:  'DM Sans', system-ui, sans-serif;

  /* ── Type scale ─────────────────────────────────────────── */
  --text-display: clamp(2.25rem, 5vw, 4rem);     /* 36px–64px fluid */
  --text-5xl:     clamp(2rem, 4vw, 3.25rem);     /* 32px–52px fluid */
  --text-4xl:     clamp(1.75rem, 3.5vw, 2.5rem); /* 28px–40px fluid */
  --text-3xl:     clamp(2.25rem, 5vw, 3.5rem);   /* 36px–56px fluid */
  --text-2xl:     clamp(1.25rem, 3vw, 1.75rem);  /* 20px–28px fluid */
  --text-xl:      clamp(1.125rem, 2vw, 1.375rem); /* 18px–22px fluid */
  --text-body:    1.125rem;   /* 18px */

  /* ── Card title tokens ───────────────────────────────────── */
  --text-card-title: clamp(1.3rem, 2vw, 1.75rem);  /* 21–28px: grid card names */

  /* ── Horizontal page padding tokens ─────────────────────── */
  --pad-page:  clamp(1.5rem, 5vw, 4rem);    /* standard: containers, footer, page-nav */
  --pad-wide:  clamp(2rem, 4vw, 4rem);      /* wider: nav bar, guide-hero wrapper */
  --pad-tight: clamp(1rem, 2.5vw, 2rem);   /* tighter: article, sidebar wrappers */
  --text-base:    1rem;       /* 16px */
  --text-sm:      0.875rem;   /* 14px — was 0.8125rem/13px */
  --text-xs:      0.75rem;    /* 12px — was 0.6875rem/11px */

  /* ── Spacing (8px base unit) ────────────────────────────── */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* ── Shadows (warm green-tinted) ────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(26,35,25,0.05);
  --shadow-sm: 0 2px 8px rgba(26,35,25,0.07), 0 1px 2px rgba(26,35,25,0.04);
  --shadow-md: 0 4px 16px rgba(26,35,25,0.10), 0 2px 4px rgba(26,35,25,0.06);
  --shadow-lg: 0 8px 32px rgba(26,35,25,0.12), 0 4px 8px rgba(26,35,25,0.07);
  --shadow-xl: 0 16px 48px rgba(26,35,25,0.15), 0 6px 12px rgba(26,35,25,0.08);

  /* ── Radii ──────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-full: 9999px;
}


/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--color-text);
  font-feature-settings: 'liga' 1, 'kern' 1;
}

/* Italic words inside headings use gold — the key typographic accent */
h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--color-gold);
  font-weight: inherit;
}

h1 {
  font-size: var(--text-5xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

h2 {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

h4 {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.3;
}

p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text);
}

p + p {
  margin-top: var(--space-sm);
}


/* ==========================================================================
   LAYOUT UTILITIES
   ========================================================================== */

.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--pad-page);
}

.container--narrow {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--pad-page);
}

/* Prevent hardcoded <br> tags inside headings from forcing early line breaks on mobile */
@media (max-width: 1024px) {
  h2 br, h3 br {
    display: none;
  }
}

.section {
  padding: var(--space-2xl) 0;
}

.section--sm {
  padding: var(--space-xl) 0;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

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

.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
}

.section-header {
  margin-bottom: var(--space-lg);
}

.section--bone {
  background: var(--color-bone);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.coming-soon-page {
  min-height: calc(100vh - 64px);
  min-height: calc(100svh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.coming-soon__inner {
  text-align: center;
}

.coming-soon__label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.coming-soon__title {
  font-size: var(--text-5xl);
  margin-bottom: var(--space-md);
}

.coming-soon__body {
  color: var(--color-text-muted);
  max-width: 45ch;
  margin: 0 auto;
}

.coming-soon__back {
  display: inline-block;
  margin-top: var(--space-xl);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 1px;
  text-decoration: none;
}

.section-header h2 {
  margin-bottom: var(--space-xs);
}

.section-header p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.7rem 1.6rem;
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

.btn--primary {
  background-color: var(--color-accent);
  color: #ffffff;
  border: 1px solid transparent;
}

.btn--primary:hover {
  background-color: var(--color-accent-dark);
  box-shadow: var(--shadow-md);
}

/* Ghost / outline — green text + border on white nav */
.btn--ghost {
  background-color: transparent;
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
}

.btn--ghost:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
}

/* Nav CTA — tighter padding to fit the 64px header, pushed to far right */
.nav__cta {
  padding: 0.5rem 1.1rem;
  margin-left: auto;
  flex-shrink: 0;
}


/* ==========================================================================
   HEADER & NAV
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  z-index: 200;
  height: 64px;
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease,
              transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header.is-scrolled {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* White background when header is revealed mid-page by scrolling up */
.site-header.is-revealed {
  background: var(--color-nav);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
}

/* Non-hero pages: header is always white when visible (prevents transparent flash on page load) */
body:not(.has-country-hero):not(.has-guide-hero) .site-header {
  background: var(--color-nav);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
}

/* Stay transparent while still over the hero photo */
.has-country-hero:not(.is-past-hero) .site-header.is-revealed {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}


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

/* ── Country hero pages: white text nav over photo ────────────────────────── */
/* Applies while the header is still over the hero (not yet past it) */
.has-country-hero:not(.is-past-hero) .site-header .nav__link,
.has-country-hero:not(.is-past-hero) .site-header .nav__dropdown-trigger {
  color: rgba(255, 255, 255, 0.88);
}

.has-country-hero:not(.is-past-hero) .site-header .nav__link:hover,
.has-country-hero:not(.is-past-hero) .site-header .nav__dropdown-trigger:hover,
.has-country-hero:not(.is-past-hero) .site-header .nav__dropdown-trigger[aria-expanded="true"] {
  color: #fff;
}

.nav__logo .logo--hero { display: none; }

.has-country-hero:not(.is-past-hero) .site-header .btn--ghost {
  color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.55);
}

.has-country-hero:not(.is-past-hero) .site-header .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.9);
}

.has-country-hero:not(.is-past-hero) .site-header .nav__logo .logo--light { display: none; }
.has-country-hero:not(.is-past-hero) .site-header .nav__logo .logo--dark  { display: none; }
.has-country-hero:not(.is-past-hero) .site-header .nav__logo .logo--hero  { display: block; }

/* Disabled nav items: slightly dimmed white so it's clear they're inactive */
.has-country-hero:not(.is-past-hero) .site-header .nav__link--disabled {
  color: rgba(255, 255, 255, 0.42);
}

/* Suppress white background while the header is fading over the hero */
.has-country-hero:not(.is-past-hero) .site-header.is-scrolled {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* Once past the hero, keep header transparent with a subtle border */
.has-country-hero.is-past-hero .site-header.is-scrolled {
  background: transparent;
  border-bottom-color: var(--color-border);
  box-shadow: none;
}

/* But if the header is being revealed mid-page, restore solid white */
.has-country-hero.is-past-hero .site-header.is-revealed {
  background: var(--color-nav);
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-xs);
}


.country-hero__subtitle-group {
  opacity: 1;
}


/* Spacer that takes the header's place in document flow */
.header-spacer {
  height: 64px;
  flex-shrink: 0;
}

/* Full-bleed wrapper inside header — replaces .container */
.nav__inner-full {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--pad-wide);
  box-sizing: border-box;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav {
  display: flex;
  align-items: center;
  height: 64px;
  gap: var(--space-lg);
  position: relative;
}

.nav__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.nav__logo img {
  display: block;
  height: 40px;
  width: auto;
}

/* White nav: always show the green (light) logo */
.nav__logo .logo--dark  { display: none; }
.nav__logo .logo--light { display: block; }

.nav__logo:hover {
  opacity: 0.85;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-left: auto;
}

/* Centre the nav links absolutely so logo sits left and CTA sits right */
.nav__links--centre {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
}

.nav__link {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text);
  transition: color 0.15s ease;
}

.nav__link:hover {
  color: var(--color-accent);
}

.nav__link--disabled {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-border-strong);
  cursor: default;
  position: relative;
}

.nav__link--disabled::after {
  content: 'Coming soon';
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text);
  color: #fff;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.nav__link--disabled:hover::after {
  opacity: 1;
}


/* ==========================================================================
   DROPDOWN
   ========================================================================== */

.nav__item--dropdown {
  position: relative;
}

.nav__dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text);
  transition: color 0.15s ease;
}

.nav__dropdown-trigger:hover,
.nav__dropdown-trigger[aria-expanded="true"] {
  color: var(--color-accent);
}

.nav__chevron {
  width: 11px;
  height: 11px;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.nav__dropdown-trigger[aria-expanded="true"] .nav__chevron {
  transform: rotate(180deg);
}

/* ==========================================================================
   MEGA MENU — Destinations dropdown
   ========================================================================== */

.nav__mega {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(680px, calc(100vw - 3rem));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 2rem 2rem 1.75rem;
  z-index: 201;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.32s ease, transform 0.32s ease, visibility 0s linear 0.32s;
}

.nav__mega.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}

.nav__mega__inner {
  display: block;
}

.nav__mega__regions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
}

/* Region column */
.nav__mega__region-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--color-border);
}

.nav__mega__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Destination row */
.nav__mega__dest {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
}

a.nav__mega__dest {
  cursor: pointer;
  transition: background 0.12s ease;
}

a.nav__mega__dest:hover {
  background: var(--color-bg);
}

a.nav__mega__dest:hover .nav__mega__dest-name {
  color: var(--color-accent);
}

.nav__mega__dest--soon {
  opacity: 0.52;
  cursor: default;
}

.nav__mega__flag {
  width: 20px;
  height: auto;
  border-radius: 2px;
  flex-shrink: 0;
  display: block;
}

.nav__mega__dest-info {
  flex: 1;
  min-width: 0;
}

.nav__mega__dest-name {
  display: block;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.3;
  transition: color 0.12s ease;
}

.nav__mega__soon-pill {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 2px 7px;
  flex-shrink: 0;
  white-space: nowrap;
}


/* ==========================================================================
   MOBILE NAVIGATION
   ========================================================================== */

/* Hamburger button — hidden on desktop, shown on mobile only */
.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.nav__hamburger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}

/* White bars on country hero pages (dark photo behind header) */
.has-country-hero:not(.is-past-hero) .site-header .nav__hamburger .nav__hamburger-bar {
  background: rgba(255, 255, 255, 0.88);
}

/* Hamburger → X */
.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Dark backdrop ── */
.nav__mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 198;
  background: rgba(10, 16, 12, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.nav__mobile-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Drawer ── */
.nav__mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 199;
  background: var(--color-bg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding-top: 0; /* nav__mobile-top provides the header area */
}

.nav__mobile-menu.is-open {
  transform: translateX(0);
}

body.is-menu-open {
  overflow: hidden;
}

/* Logo + close row — sits inside the scroll container */
.nav__mobile-top {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 0.75rem 0 1.25rem;
  background: var(--color-bg);
}

/* Not sticky when destinations accordion is open — scrolls away with content */
body.is-dest-open .nav__mobile-top {
  position: relative;
}

.nav__mobile-top__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav__mobile-top__logo img {
  display: block;
  height: 40px;
  width: auto;
}

.nav__mobile-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.nav__mobile-close:hover {
  background: var(--color-accent-tint);
  color: var(--color-accent);
}

.nav__mobile-inner {
  padding: 1.25rem 0 2.5rem;
}

/* Destinations accordion item wrapper */
.nav__mobile-item--accordion {
  display: block;
}

.nav__mobile-continent {
  margin-bottom: 1.1rem;
}

.nav__mobile-continent-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
  padding-left: 0.4rem;
}

.nav__mobile-dest-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav__mobile-dest {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.5rem;
  border-radius: 6px;
  text-decoration: none;
  min-height: 44px;
}

a.nav__mobile-dest {
  transition: background 0.12s ease;
}

a.nav__mobile-dest:hover {
  background: var(--color-accent-tint);
}

a.nav__mobile-dest:hover .nav__mobile-dest-name {
  color: var(--color-accent);
}

.nav__mobile-dest--soon {
  opacity: 0.52;
  cursor: default;
}

.nav__mobile-dest-flag {
  width: 20px;
  height: auto;
  border-radius: 2px;
  flex-shrink: 0;
  display: block;
}

.nav__mobile-dest-name {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  flex: 1;
  transition: color 0.12s ease;
}

.nav__mobile-soon-pill {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 2px 7px;
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: auto;
}

/* Page links */
.nav__mobile-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__mobile-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  min-height: 44px;
  transition: color 0.15s ease;
}

a.nav__mobile-link:hover {
  color: var(--color-accent);
}

.nav__mobile-link--disabled {
  color: var(--color-border-strong);
  font-weight: 500;
}

/* Destinations accordion toggle — button that looks identical to the other nav links */
.nav__mobile-link--toggle {
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  justify-content: space-between;
  text-align: left;
}

.nav__mobile-link--toggle[aria-expanded="true"] {
  color: var(--color-accent);
}

.nav__mobile-chevron {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
}

.nav__mobile-link--toggle[aria-expanded="true"] .nav__mobile-chevron {
  transform: rotate(180deg);
  color: var(--color-accent);
}

/* Destinations panel — hidden until expanded */
.nav__mobile-dest-panel {
  display: none;
  padding: 1rem 1.25rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.nav__mobile-dest-panel[aria-hidden="false"] {
  display: block;
}

/* CTA button */
.nav__mobile-cta-wrap {
  padding: 1.5rem 1.25rem 0;
}

.nav__mobile-cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.9rem 1.6rem;
  background: var(--color-accent);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 0.2s ease;
}

.nav__mobile-cta:hover {
  background: var(--color-accent-dark);
}

/* Activate on mobile only */
@media (max-width: 1024px) {
  html {
    /* Prevent the off-screen mobile menu (translateX 100%) from adding a horizontal
       scrollbar. Scoped to tablet/mobile so desktop fixed elements use the viewport
       as their containing block (avoids the Safari overflow-clip containing-block bug). */
    overflow-x: clip;
    /* With overflow-x: clip active, re-assert 100vw so Safari can't shrink html below
       the viewport width. Safe here because mobile/tablet use overlay scrollbars (no
       reserved scrollbar gutter), so 100vw matches the content area. */
    min-width: 100vw;
  }

  .nav__hamburger {
    display: flex;
  }

  .nav__mobile-menu,
  .nav__mobile-overlay {
    display: block;
  }

  /* Hide the site-header when the mobile menu is open — nav__mobile-top
     inside the menu drawer handles the logo and close button instead. */
  body.is-menu-open .site-header {
    display: none;
  }
}


/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background-color: #1a1714;
}

.hero--full {
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero--country {
  height: 60vh;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
}

.hero--article {
  height: 520px;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.12) 0%,
    rgba(0,0,0,0.28) 50%,
    rgba(0,0,0,0.72) 100%
  );
}

.hero--guide-full .hero__overlay {
  background:
    linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32)),
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.58) 0%,
      rgba(0, 0, 0, 0) 38%,
      rgba(0, 0, 0, 0) 52%,
      rgba(0, 0, 0, 0.72) 100%
    );
}

.hero__content--center {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--space-md);
}

.hero__content--center h1 {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-bottom: var(--space-sm);
  text-shadow: 0 2px 16px rgba(0,0,0,0.3);
}

.hero__content--center h1 em {
  font-style: italic;
  color: var(--color-gold);
}

.hero__content--center p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: var(--space-lg);
  line-height: 1.65;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

.hero__content--bottom {
  position: relative;
  z-index: 1;
  padding: var(--space-lg) var(--space-md);
  width: 100%;
}

.hero__content--bottom h1 {
  font-family: var(--font-serif);
  font-size: var(--text-5xl);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
  margin-bottom: 0.5rem;
}

.hero__content--bottom h1 em {
  font-style: italic;
  color: var(--color-gold);
}

.hero__content--bottom p {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* Placeholder background for when no real image is present */
.hero__placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #3d5c52 0%, #2a4438 40%, #1a2e25 100%);
}

/* Real hero image — covers the full hero, same as placeholder */
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}




/* ==========================================================================
   ARTICLE LAYOUT
   ========================================================================== */



/* ==========================================================================
   BREADCRUMB
   ========================================================================== */

.breadcrumb {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-text-muted);
  padding: 0 0 0.75rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.breadcrumb a {
  color: var(--color-text-muted);
  transition: color 0.15s ease;
}

.breadcrumb__sep {
  font-size: 1rem;
  font-style: normal;
  color: var(--color-border);
}

.breadcrumb a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}


/* ==========================================================================
   CALLOUT BOX
   ========================================================================== */

.callout {
  border-left: 3px solid var(--color-accent);
  background: var(--color-accent-tint);
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-lg) 0;
  border-radius: 0 4px 4px 0;
}

.callout__title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.4rem;
  display: block;
}

.callout p {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0;
}

.callout p + p {
  margin-top: 0.5rem;
}

/* Affiliate disclosure note — understated, blends into the page */
.article-main p.affiliate-note,
.affiliate-note {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  margin: var(--space-lg) 0 0;
}

.article-main .affiliate-note a,
.affiliate-note a {
  color: var(--color-text-muted);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-main .affiliate-note a:hover,
.affiliate-note a:hover {
  color: var(--color-accent);
}


/* ==========================================================================
   QUICK FACTS
   ========================================================================== */

.quick-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm) var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
}

.quick-facts__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.quick-facts__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.quick-facts__value {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}


/* ==========================================================================
   METADATA ROW
   ========================================================================== */

.meta {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.meta__sep {
  color: var(--color-border);
}


/* ==========================================================================
   FIGURE / CAPTION
   ========================================================================== */

.figure {
  margin: var(--space-lg) 0;
}

.figure img,
.figure .figure__placeholder {
  width: 100%;
  border-radius: 4px;
}

.figure__placeholder {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #c8c0b0 0%, #a09080 100%);
  border-radius: 4px;
}

.figure__caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 0.5rem;
  text-align: center;
  line-height: 1.5;
}


/* ==========================================================================
   PHILOSOPHY STRIP
   ========================================================================== */

.philosophy-strip {
  padding: var(--space-2xl) 0;
  text-align: center;
}

.philosophy-strip h2 {
  margin-bottom: var(--space-md);
}

.philosophy-strip p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 56ch;
  margin: 0 auto;
  line-height: 1.8;
}


/* ==========================================================================
   RESOURCES TEASER STRIP
   ========================================================================== */

.teaser-strip {
  background: var(--color-bone);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-xl) 0;
  text-align: center;
}

.teaser-strip h2 {
  margin-bottom: var(--space-sm);
}

.teaser-strip p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 50ch;
  margin: 0 auto;
  line-height: 1.7;
}

.teaser-strip__badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 0.3rem 0.9rem;
  margin-top: var(--space-md);
}


/* ==========================================================================
   CONTACT FORM
   ========================================================================== */

.contact-form {
  margin-top: var(--space-lg);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: var(--space-md);
}

.form-group label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.form-group input,
.form-group textarea {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.7rem var(--space-sm);
  transition: border-color 0.15s ease;
  width: 100%;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.form-group textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}



/* ==========================================================================
   HOMEPAGE
   ========================================================================== */

/* ── 1. Hero ── */
.hp-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--color-text);
}

.hp-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  opacity: 1;
}

.hp-hero__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,12,10,0.52) 0%, rgba(10,12,10,0.18) 12%, rgba(10,12,10,0.0) 22%);
  z-index: 1;
}

/* Foreground mountain layer — sits above content so text appears behind the mountain */
.hp-hero__photo-fg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 3;
  pointer-events: none;
}

.hp-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.hp-hero__orb--green {
  width: 520px;
  height: 520px;
  background: rgba(42, 102, 68, 0.22);
  top: -100px;
  right: -80px;
}

.hp-hero__orb--gold {
  width: 340px;
  height: 340px;
  background: rgba(192, 144, 32, 0.14);
  bottom: 60px;
  left: 5%;
}

.hp-hero__content {
  position: absolute;
  top: 31%;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  padding: 0 2rem;
}


.hp-hero__kicker {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-accent);
  margin-bottom: 1.25rem;
}

.hp-hero__heading {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 12.5vw, 15rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0 auto;
  white-space: nowrap;
  width: max-content;
}

.hp-hero__sub {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5rem;
}

.hp-hero__ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 0;
  flex-wrap: wrap;
}

.hp-hero__btn {
  font-size: var(--text-sm);
  padding: 0.85rem 2rem;
}


.hp-hero__stats {
  display: flex;
  align-items: center;
  gap: 0;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  max-width: 480px;
}

.hp-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0 2rem;
}

.hp-hero__stat:first-child {
  padding-left: 0;
}

.hp-hero__stat-num {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #ffffff;
  line-height: 1;
}

.hp-hero__stat-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hp-hero__stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
}

/* Scroll indicator — label + bouncing chevron */
.hp-hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255,255,255,0.65);
  z-index: 1;
  transition: color 0.2s;
  animation: heroBounce 1.8s ease-in-out infinite;
}

.hp-hero__scroll:hover { color: rgba(255,255,255,0.95); animation-play-state: paused; }

.hp-hero__scroll svg { display: block; }

.hp-hero__scroll-label {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Marquee text — all screen sizes */
.hp-hero__marquee {
  display: block;
  position: absolute;
  top: 18%;
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}

.hp-hero__marquee-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: hp-marquee 280s linear infinite;
}

.hp-hero__marquee-track span {
  font-family: var(--font-serif);
  font-size: 130pt;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: #ffffff;
  flex-shrink: 0;
}

@keyframes hp-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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


/* ── 2. Section header shared util ── */

.hp-view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  padding-bottom: 0.15rem;
  transition: color 0.22s ease;
}

.hp-view-all-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.hp-view-all-soon {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-fg4);
  margin: 0;
  font-style: italic;
}

.hp-view-all-wrap--light {
  align-items: flex-start;
}

.hp-view-all-wrap--light .hp-view-all-soon {
  color: rgba(240, 230, 204, 0.38);
}

/* Underline that slides in from the left on hover */
.hp-view-all::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.hp-view-all:hover {
  color: var(--color-accent-dark);
}

.hp-view-all:hover::after {
  transform: scaleX(1);
  background: var(--color-accent-dark);
}

/* Arrow nudges right */
.hp-view-all svg {
  transition: transform 0.22s ease;
}

.hp-view-all:hover svg {
  transform: translateX(4px);
}

.hp-view-all--disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}


/* ── 2. Destinations (map) ── */
/* ── Destinations section ── */
.hp-destinations {
  position: relative;
  padding: 0 0 1rem;
  background: var(--color-bg);
  overflow: hidden;
}

/* Ghost watermark */
.hp-dest-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-serif);
  font-size: clamp(8rem, 22vw, 18rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  color: var(--color-text);
  opacity: 0.07;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}

/* Editorial header */
.hp-dest-hd {
  position: relative;
  z-index: 4;
  padding-top: 5rem;
  margin-bottom: 0;
}

.hp-dest-hd__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.hp-dest-hd__eyebrow-line {
  display: block;
  width: 2rem;
  height: 1.5px;
  background: var(--color-accent);
  flex-shrink: 0;
}

.hp-dest-hd__eyebrow-tag {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.hp-dest-hd__title {
  margin: 0 0 1.25rem;
  line-height: 1;
}

.hp-dest-hd__pre {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin-bottom: 0.05em;
}

.hp-dest-hd__word {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 800;
  color: var(--color-accent);
  letter-spacing: -0.03em;
  line-height: 0.95;
}

.hp-dest-hd__sub {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  max-width: 52ch;
  margin: 0;
  padding-bottom: 0.75rem;
}

/* Map frame */
.hp-dest-frame {
  position: relative;
  z-index: 2;
  margin-top: 1.5rem;
}

.hp-dest-glow {
  position: absolute;
  inset: -8% -4%;
  background: radial-gradient(ellipse at 55% 50%, rgba(42, 102, 68, 0.22) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.hp-dest-frame .hp-map-wrap {
  position: relative;
  z-index: 1;
}

/* Map wrapper (shared) */
.hp-map-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hp-map-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}

.map-country {
  transition: fill 0.18s ease;
}

.hp-map-offline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  padding: 2rem;
  background: var(--color-bone);
  border-radius: 4px;
}

/* Bottom bar: stats + legend */
.hp-dest-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 0.875rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.hp-dest-bar__stats {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.hp-dest-bar__stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.hp-dest-bar__num {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
}

.hp-dest-bar__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.hp-dest-bar__div {
  display: block;
  width: 1px;
  height: 24px;
  background: var(--color-border);
  flex-shrink: 0;
}

.hp-dest-bar__legend {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.hp-dest-bar__leg {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.hp-dest-bar__leg svg {
  color: var(--color-accent);
  flex-shrink: 0;
}

.hp-dest-bar__swatch {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.hp-dest-bar__swatch--on {
  background: rgba(42, 102, 68, 0.55);
  border: 1px solid rgba(42, 102, 68, 0.4);
}

.hp-dest-bar__swatch--off {
  background: #e0dbd4;
  border: 1px solid var(--color-border);
}

/* ── Hover tooltip ── */
.hp-map-tip {
  position: absolute;
  background: var(--color-text);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 0.3rem 0.75rem 0.3rem 0.5rem;
  border-radius: 5px;
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.hp-map-tip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hp-map-tip__flag {
  width: 18px;
  height: auto;
  border-radius: 1px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 2px;
}

/* Raise the map frame above the section header when popup is open */
.hp-dest-frame.popup-open {
  z-index: 5;
}

/* ── Click popup — overlaid on the map ── */
/* ── Map popup overlay ───────────────────────────────────────────────────── */
.hp-map-popup {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.hp-map-popup.is-open {
  opacity: 1;
  pointer-events: auto;
}

.hp-map-popup::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 16, 12, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.hp-map-popup.is-open::before {
  opacity: 1;
}

/* ── Modal panel ── */
.hp-map-popup__inner {
  position: relative;
  z-index: 1;
  background: var(--color-accent-dark);
  border-radius: 12px;
  width: 100%;
  max-width: 580px;
  max-height: calc(100% - 1.5rem);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.65), 0 4px 16px rgba(0,0,0,0.35);
  transform: translateY(14px) scale(0.97);
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}

.hp-map-popup.is-open .hp-map-popup__inner {
  transform: translateY(0) scale(1);
}

/* Photo and overlay hidden — solid brand green background used instead */
.hp-map-popup__bg-photo,
.hp-map-popup__bg-overlay {
  display: none;
}

/* ── Close button ── */
.hp-map-popup__close {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.38);
  cursor: pointer;
  transition: color 0.18s ease;
  z-index: 3;
}

.hp-map-popup__close:hover {
  color: rgba(255,255,255,0.85);
}

.hp-map-popup__close:focus {
  outline: none;
}

.hp-map-popup__close:focus-visible {
  outline: 2px solid rgba(255,255,255,0.55);
  outline-offset: 2px;
}

/* ── Header ── */
.hp-map-popup__hd {
  position: relative;
  z-index: 1;
  padding: 1.4rem 1.4rem 1.8rem;
}

.hp-map-popup__hd-top {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-right: 2rem;
  margin-bottom: 0;
}

.hp-map-popup__flag {
  flex-shrink: 0;
  line-height: 0;
}
.hp-map-popup__flag img {
  width: 36px;
  height: auto;
  border-radius: 3px;
  display: block;
}

.hp-map-popup__hd-text {
  flex: 1;
  min-width: 0;
}

.hp-map-popup__title {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 0.28rem;
}

.hp-map-popup__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.66);
  line-height: 1.5;
}

.hp-map-popup__guides-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.72);
  padding: 0 1rem 0.5rem;
  margin: 0;
}

/* ── Guide cards ── */
.hp-map-popup__guides {
  position: relative;
  z-index: 1;
  padding: 0.2rem 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.hp-popup-card {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  text-decoration: none;
}

.hp-popup-card--live {
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.hp-popup-card--live:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.17);
}

.hp-popup-card--soon {
  opacity: 0.70;
  cursor: default;
}

.hp-popup-card__img {
  width: 96px;
  height: 68px;
  border-radius: 5px;
  flex-shrink: 0;
}

.hp-popup-card--soon .hp-popup-card__img {
  filter: saturate(0.55) brightness(0.82);
}

.hp-popup-card__body {
  flex: 1;
  min-width: 0;
}

.hp-popup-card__label {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.42);
  margin-bottom: 0.18rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp-popup-card__title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 0.65rem;
}

.hp-popup-card--soon .hp-popup-card__title {
  color: rgba(255,255,255,0.78);
}

.hp-popup-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem;
}

.hp-popup-card__pill {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.60);
}

.hp-popup-card__pill--live {
  background: rgba(47,74,58,0.75);
  color: #82c89a;
  border: 1px solid rgba(130,200,154,0.28);
}

.hp-popup-card__pill--soon {
  background: rgba(201,151,58,0.16);
  color: #c9973a;
  border: 1px solid rgba(201,151,58,0.28);
}

.hp-popup-card__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.50);
  flex-shrink: 0;
  white-space: nowrap;
  transition: color 0.22s ease;
}

.hp-popup-card__cue::after {
  display: none;
}

.hp-popup-card__cue svg {
  display: inline-block;
  transition: transform 0.22s ease;
}

.hp-popup-card--live:hover .hp-popup-card__cue {
  color: rgba(255,255,255,0.92);
}

.hp-popup-card--live:hover .hp-popup-card__cue::after {
  transform: scaleX(1);
}

.hp-popup-card--live:hover .hp-popup-card__cue svg {
  transform: translateX(3px);
}

.hp-popup-card__cue--soon {
  color: rgba(201, 151, 58, 0.75);
}

/* ── Empty state ── */
.hp-popup-empty {
  padding: 1.5rem 0;
  text-align: center;
}

.hp-popup-empty__line {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  color: #fff;
  margin-bottom: 0.4rem;
}

.hp-popup-empty__sub {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  max-width: 28ch;
  margin: 0 auto;
}

/* ── CTA footer ── */
.hp-map-popup__footer {
  position: relative;
  z-index: 1;
  padding: 0.8rem 1rem 1rem;
}

.hp-map-popup__all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.62rem 1.25rem;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.20);
  border-radius: 7px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.hp-map-popup__all:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.36);
  color: #fff;
}

.hp-map-popup__all:hover svg {
  transform: translateX(3px);
}

.hp-map-popup__all svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform 0.15s;
}

@media (max-width: 768px) {
  /* Fix popup: map container is only ~200px tall on mobile, so switch to fixed viewport overlay */
  .hp-map-popup {
    position: fixed;
    inset: 0;
    z-index: 250;
    padding: 1rem;
    align-items: center;
  }

  .hp-map-popup::before {
    border-radius: 0;
  }

  .hp-map-popup__inner {
    max-width: 100%;
    max-height: min(80vh, 560px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .hp-map-popup__close {
    width: 28px;
    height: 28px;
    top: 1.7rem;
    right: 0.75rem;
  }

  .hp-popup-card { grid-template-columns: 76px 1fr auto; }
  .hp-popup-card__img { width: 76px; height: 54px; }
}


/* ── 3. Popular guides ── */
.hp-popular {
  background: var(--color-bone);
}

/* ── Cinematic image band ── */
.hp-pop-band {
  position: relative;
  overflow: hidden;
  padding: 3.5rem 0 5.5rem;
  z-index: 0;
  /* Subtle diagonal cut — right side higher, left lower — cards overlap below */
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}


.hp-pop-band__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: blur(3px) brightness(0.45);
  transform: scale(1.08);
  z-index: 0;
}

.hp-pop-band__overlay {
  position: absolute;
  inset: 0;
  background: rgba(14, 22, 16, 0.58);
  z-index: 1;
}

.hp-pop-band .container {
  position: relative;
  z-index: 2;
}

/* White heading treatment inside the band */
.hp-pop-band .hp-pop-hd__dot {
  background: rgba(255, 255, 255, 0.55);
}

.hp-pop-band .hp-pop-hd__tag {
  color: rgba(255, 255, 255, 0.65);
}

.hp-pop-band .hp-pop-hd__rule {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.2), transparent);
}

.hp-pop-band .hp-pop-hd__title {
  color: #fff;
}

.hp-pop-band .hp-pop-hd__sub {
  color: rgba(255, 255, 255, 0.82);
}

/* Cards wrapper — negative margin pulls cards up to overlap the angled band bottom */
.hp-pop-cards {
  position: relative;
  z-index: 1;
  margin-top: -5rem;
  padding-bottom: var(--space-2xl);
}

/* Popular guides heading */
.hp-pop-hd {
  padding-top: 0;
  margin-bottom: var(--space-lg);
}

.hp-pop-hd__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.875rem;
}

.hp-pop-hd__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

.hp-pop-hd__tag {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  white-space: nowrap;
}

.hp-pop-hd__rule {
  display: block;
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--color-border), transparent);
  max-width: 12rem;
}

.hp-pop-hd__title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 0.75rem;
}

.hp-pop-hd__sub {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
}

.hp-pop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.hp-pop-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform 0.2s ease;
  will-change: transform;
}

.hp-pop-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.hp-pop-card__img {
  aspect-ratio: 16 / 9;
  position: relative;
  flex-shrink: 0;
}

.hp-pop-card__rank {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 500;
  color: rgba(255,255,255,0.18);
  line-height: 1;
  letter-spacing: -0.04em;
}

.hp-pop-card__body {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hp-pop-card__country {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

.hp-pop-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

.hp-pop-card__excerpt {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 1.25rem;
}

.hp-pop-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-top: auto;
  transition: gap 0.15s;
}

.hp-pop-card:hover .hp-pop-card__cta {
  gap: 0.65rem;
}


/* ── 4. Latest guides ── */

.hp-latest {
  background: var(--color-bg);
  padding: 4rem 0 5rem;
  border-bottom: 1px solid var(--color-border);
}

.hp-latest__hd {
  padding-bottom: 0;
  margin-bottom: 1.75rem;
}


.hp-latest__title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 0.35rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.hp-latest__sub {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
}

/* 3-column grid: large | large | compact stack */
.hp-latest__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}

.hp-latest__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.75rem;
}

/* ── Large cards: scoped hike-card overrides ── */
.hp-latest__layout .hike-card {
  aspect-ratio: 3 / 4;
  min-width: 0;
}

.hp-latest__layout .hike-card__gradient {
  background: linear-gradient(
    to bottom,
    transparent 25%,
    rgba(6, 4, 2, 0.48) 55%,
    rgba(6, 4, 2, 0.94) 100%
  );
}

.hp-latest__layout .hike-card:hover .hike-card__gradient {
  background: linear-gradient(
    to bottom,
    transparent 22%,
    rgba(6, 4, 2, 0.58) 55%,
    rgba(6, 4, 2, 0.97) 100%
  );
}

.hp-latest__layout .hike-card__content {
  padding: 1rem 1.25rem 1.35rem;
}

.hp-latest__layout .hike-card__region {
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0.2rem;
}

.hp-latest__layout .hike-card__name {
  font-size: var(--text-card-title);
  line-height: 1.2;
  margin-bottom: 0.45rem;
}

.hp-latest__layout .hike-card__stats {
  gap: 0.25rem;
  margin-bottom: 0.6rem;
}

.hp-latest__layout .hike-card__stat {
  font-size: 0.72rem;
  padding: 3px 11px;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
}

.hp-latest__layout .hike-card__read-cue {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.58);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  position: relative;
  padding-bottom: 0.15rem;
  transition: color 0.22s ease;
}

.hp-latest__layout .hike-card__read-cue::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.65);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.hp-latest__layout .hike-card__read-arrow {
  display: inline-block;
  transition: transform 0.22s ease;
}

.hp-latest__layout .hike-card:hover .hike-card__read-cue {
  color: rgba(255, 255, 255, 0.92);
}

.hp-latest__layout .hike-card:hover .hike-card__read-cue::after {
  transform: scaleX(1);
}

.hp-latest__layout .hike-card:hover .hike-card__read-arrow {
  transform: translateX(4px);
}

/* ── Compact cards column ── */
.hp-latest__compact-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

/* ── Compact card — hp-lc ── */
.hp-lc {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-height: 0;
  transition: transform 0.22s ease;
  will-change: transform;
  position: relative;
}

a.hp-lc:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.hp-lc--pending {
  cursor: default;
}

.hp-lc__img--placeholder {
  background: linear-gradient(160deg, #c8c3bc 0%, #6b6560 100%);
}

.hp-lc--pending .hp-lc__cat {
  color: var(--color-text-muted);
}

.hp-lc__pending-sub {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-fg4);
  margin: 0.3rem 0 0;
}

.hp-lc--pending .hp-lc__title {
  opacity: 0.75;
}

.hp-lc__soon {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.hp-lc__img {
  width: clamp(60px, 9vw, 116px);
  height: clamp(60px, 9vw, 116px);
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
}

.hp-lc__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

a.hp-lc:hover .hp-lc__img img {
  transform: scale(1.06);
}

.hp-lc__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.hp-lc__cat {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

.hp-lc__title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hp-lc__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.hp-lc__pill {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--color-fg2);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.hp-lc__arrow {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  margin-left: 0.5rem;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

a.hp-lc:hover .hp-lc__arrow {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
  transform: translateX(2px);
}


/* ── 6. Author strip ── */
.hp-author {
  padding: 6rem 0 7rem;
  background: var(--color-bone);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.hp-author__inner {
  display: grid;
  grid-template-columns: 460px 1fr;
  grid-template-areas:
    "photo heading"
    "photo text";
  column-gap: 6rem;
  row-gap: 0;
}

.hp-author__heading {
  grid-area: heading;
  align-self: end;
}

.hp-author__photo-wrap {
  grid-area: photo;
  align-self: center;
  width: 100%;
}

.hp-author__text {
  grid-area: text;
  align-self: start;
}

.hp-author__photo-frame {
  position: relative;
  /* Offset warm panel behind the photo */
}


.hp-author__photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: var(--shadow-xl);
}

.hp-author__caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--color-fg4);
  margin-top: 0.85rem;
  padding-left: 0.1rem;
  letter-spacing: 0.02em;
}

.hp-author__heading {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.hp-author__body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.85;
  color: var(--color-fg2);
  max-width: 640px;
  margin-bottom: 2.5rem;
}

.hp-author__body + .hp-author__body {
  margin-top: -1.25rem;
}

.hp-author__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hp-author__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-accent);
  color: var(--color-accent);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.hp-author__social:hover {
  background: var(--color-accent);
  color: #ffffff;
}

.hp-author__cta {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--color-accent);
  text-decoration: none;
  padding: 0.8rem 2rem;
  border-radius: var(--radius-full);
  transition: background 0.22s ease;
}

.hp-author__cta:hover {
  background: var(--color-accent-dark);
}

.hp-author__cta--disabled {
  background: var(--color-border);
  color: var(--color-text-muted);
  cursor: default;
  pointer-events: none;
}


/* ── Film Archive section ── */
.hp-film {
  background: #1A2319;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.hp-film__head {
  padding: 3.5rem 0 1.75rem;
}

.hp-film__head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.hp-film__head-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.hp-film__title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: #F0E6CC;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
}

.hp-film__sub {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  color: rgba(240, 230, 204, 0.52);
  line-height: 1.55;
  margin: 0;
}

.hp-film__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(240, 230, 204, 0.62);
  text-decoration: none;
  position: relative;
  padding-bottom: 0.15rem;
  white-space: nowrap;
  transition: color 0.22s ease;
  background: none;
  border: none;
  cursor: default;
  padding-left: 0;
  padding-right: 0;
}

.hp-film__cta::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(240, 230, 204, 0.58);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.hp-film__cta:hover {
  color: #F0E6CC;
}

.hp-film__cta:hover::after {
  transform: scaleX(1);
}

.hp-film__cta-arrow {
  display: inline-block;
  transition: transform 0.22s ease;
}

.hp-film__cta:hover .hp-film__cta-arrow {
  transform: translateX(4px);
}

.hp-film__cta[disabled] {
  opacity: 0.35;
  pointer-events: none;
}

/* "Drag to explore" — affordance hint, sits below the subtitle */
.hp-film__hint {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(240, 230, 204, 0.5);
  margin: 1rem 0 0;
  line-height: 1.7;
}

/* Strip outer — position context for all overlay fades */
.hp-film__strip-outer {
  position: relative;
}

/* Right-edge fade: signals there is more to explore */
.hp-film__fade-edge {
  position: absolute;
  top: 0;
  right: 0;
  width: 140px;
  height: 100%;
  background: linear-gradient(to right, rgba(26, 35, 25, 0), #1A2319);
  pointer-events: none;
  z-index: 3;
}

/* Draggable photo strip */
.hp-film__strip-wrap {
  width: 100%;
  overflow: hidden;
  cursor: grab;
  cursor: -webkit-grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  touch-action: pan-y;
}

.hp-film__strip-wrap.is-dragging {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

.hp-film__strip {
  display: flex;
  align-items: stretch;
  height: clamp(280px, 40vh, 460px);
  width: max-content;
  gap: 0;
  will-change: transform;
}

.hp-film__photo {
  height: 100%;
  width: auto;
  min-width: 200px;
  display: block;
  flex-shrink: 0;
  object-fit: cover;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .hp-film__head {
    padding: 3rem 0 2rem;
  }
}

@media (max-width: 768px) {
  .hp-film__head {
    padding: 2.5rem 0 1.75rem;
  }

  .hp-film__head-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .hp-film__hint {
    display: none;
  }

  .hp-film__strip {
    height: clamp(180px, 38vw, 280px);
  }

  .hp-film__fade-edge {
    width: 80px;
  }
}

/* ── Latest Guides: match Popular Guides — 3 equal proportional columns, same card size ── */
@media (max-width: 1280px) {
  .hp-latest__layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hp-latest__layout .hike-card {
    aspect-ratio: 2 / 3;
  }

  .hp-latest__compact-col {
    aspect-ratio: 2 / 3;
  }
}

/* ── Homepage responsive ── */
@media (max-width: 1024px) {
  .hp-hero__heading {
    font-size: clamp(2rem, 9.7vw, 15rem);
  }

  .hp-pop-band {
    padding: 3rem 0 6.5rem;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
  }

  .hp-pop-cards {
    margin-top: -4rem;
  }

  .hp-pop-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .hp-author__inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "photo heading"
      "photo text";
    column-gap: 4rem;
    row-gap: 0;
  }

  .hp-latest__compact-col .hp-lc__pending-sub {
    display: none;
  }
}

@media (max-width: 768px) {
  .hp-hero__marquee {
    top: 22%;
  }

  .hp-hero__stats {
    flex-wrap: wrap;
    gap: 1.5rem;
    border-top: none;
    padding-top: 1.5rem;
  }

  .hp-hero__stat-divider {
    display: none;
  }

  .hp-hero__stat {
    padding: 0;
  }

  .hp-hero__scroll {
    display: none;
  }

  .hp-map-legend {
    gap: 1rem;
  }

  .hp-map-legend__divider {
    display: none;
  }

  .hp-dest-hd {
    padding-top: 2.5rem;
    margin-bottom: 0;
  }

  .hp-dest-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .hp-dest-watermark {
    opacity: 0.02;
  }

  .hp-pop-band {
    padding: 2.5rem 0 4rem;
    clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
  }

  .hp-pop-hd {
    margin-bottom: 0;
  }

  .hp-latest {
    padding: 2.5rem 0;
  }

  .hp-author {
    padding: 2.5rem 0;
  }

  .hp-pop-cards {
    margin-top: -2.25rem;
  }

  .hp-pop-grid {
    grid-template-columns: 1fr;
  }

  /* Latest Guides: two featured cards stacked, matching Popular Guides style.
     align-items: start overrides the base stretch — on iOS Safari, stretch + a
     single-item row collapses aspect-ratio cards to zero height. */
  .hp-latest__layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: start;
  }

  /* Featured cards: explicit width + height so they always render on iOS Safari */
  .hp-latest__layout > .hike-card,
  .hp-latest__layout > .hike-card--upcoming {
    width: 100%;
    aspect-ratio: 2 / 3;
  }

  /* Match Popular Guides text sizing */
  .hp-latest__layout > .hike-card .hike-card__name {
    font-size: 1.75rem;
  }

  .hp-latest__layout > .hike-card .hike-card__stat {
    font-size: 0.8rem;
    padding: 5px 13px;
  }

  .hp-latest__layout > .hike-card .hike-card__read-cue {
    font-size: 0.92rem;
  }

  .hp-latest__layout > .hike-card .hike-card__content {
    padding: 1rem 1.1rem 1.25rem;
  }

  /* Compact column: stacked below the two featured cards */
  .hp-latest__compact-col {
    grid-column: 1 / -1;
    width: 100%;
    flex-direction: column;
    gap: 0.6rem;
    aspect-ratio: unset;
    overflow: visible;
  }

  .hp-lc {
    flex-direction: row;
    align-items: center;
    flex: unset;
  }

  .hp-lc__img {
    width: 80px;
    height: 80px;
  }

  .hp-lc__arrow {
    display: block;
  }


  .hp-author__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "photo"
      "text";
    gap: 1.25rem;
  }

  .hp-author__heading {
    letter-spacing: -0.05em;
    margin-bottom: 0;
  }

  .hp-author__body {
    max-width: 100%;
  }

}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  background: #1A2319;
  color: rgba(255, 255, 255, 0.9);
  padding: var(--space-2xl) 0 0;
}

/* Dedicated footer inner — intentionally NOT .container so no page-level
   container override can affect footer width or padding. */
.footer__inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--pad-page);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.footer__logo {
  display: block;
  margin-bottom: var(--space-sm);
  opacity: 1;
  transition: opacity 0.15s ease;
}

.footer__logo:hover {
  opacity: 0.8;
}

.footer__logo img {
  display: block;
  width: 280px;
  height: auto;
}

.footer__tagline {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
}

.footer__social {
  margin-top: 2rem;
}

.footer__social-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 0.6rem;
}

.footer__social-icons {
  display: flex;
  gap: 0.6rem;
}

.footer__social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 400 !important;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.footer__social-btn:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.footer__heading {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  padding-bottom: 0.75rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: block;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer__links a {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.8);
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color 150ms ease-out, text-decoration-color 150ms ease-out;
}

.footer__links a:hover {
  color: #ffffff;
  text-decoration-line: underline;
  text-decoration-color: rgba(255,255,255,0.4);
}

.footer__links li {
  display: flex;
  align-items: center;
}

.footer__links-muted {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.38);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.footer__soon-pill {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-full);
  padding: 0.15em 0.6em;
  flex-shrink: 0;
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: var(--space-md) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer__bottom p {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.5);
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --text-display: 3.25rem;
    --text-5xl:     2.75rem;
  }

  .hero__content--center h1 { font-size: var(--text-display); }
  .hero__content--bottom h1 { font-size: var(--text-5xl); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }

  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__grid > *:first-child { grid-column: 1 / -1; }

  .nav__links,
  .nav__cta { display: none; }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --text-display: 2.5rem;
    --text-5xl:     2.125rem;
    --text-2xl:     1.375rem;
  }

  /* Reduce container side padding so section h2s at their fixed 36px size
     have enough room to break at natural word boundaries, not a line too early. */
  .container,
  .container--narrow {
    padding: 0 clamp(1rem, 5vw, 4rem);
  }

  .hero--full    { height: 85vh; }
  .hero--country { height: 50vh; }
  .hero--article { height: 300px; }

  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }

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

  .quick-facts { grid-template-columns: 1fr; }

  .site-footer { padding-top: 2.5rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 1rem; }
  .footer__grid > *:first-child { grid-column: 1 / -1; }
  .footer__bottom {
    flex-direction: column;
    gap: var(--space-xs);
    text-align: center;
  }
}


/* ==========================================================================
   GUIDE HERO (article/guide pages)
   ========================================================================== */

/* Outer wrapper — full-bleed for full-screen hero variant */
.hero-guide-wrap {
  max-width: 1600px;
  width: 100%;
  margin: 80px auto 0;
  padding: 0 var(--pad-wide);
  box-sizing: border-box;
}

.hero-guide-wrap--full {
  max-width: none;
  margin: 0;
  padding: 0;
}

.hero--guide {
  position: relative;
  overflow: hidden;
  height: calc(100vh - 80px - 2rem);
  height: calc(100svh - 80px - 2rem);
  min-height: 560px;
  border-radius: 12px;
  width: 100%;
}

.hero--guide-full {
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  border-radius: 0;
}

/* Text anchored with generous breathing room from bottom and left */
.hero__content--guide {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 2rem;
}


.hero__breadcrumb-guide {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.9rem;
}

.hero__breadcrumb-guide a {
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.15s ease;
}

.hero__breadcrumb-guide a:hover {
  color: rgba(255, 255, 255, 0.85);
}

.hero__breadcrumb-guide .hero__breadcrumb-sep {
  color: rgba(255, 255, 255, 0.25);
}

.hero__kicker {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 1rem;
}

.hero__content--guide h1 {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #ffffff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
  margin-bottom: 1rem;
  max-width: 720px;
}

.hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
  max-width: 520px;
  margin-bottom: 1.5rem;
}

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hero__chip {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #ffffff;
  background: rgba(180, 180, 180, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  padding: 0.35rem 0.75rem;
}


/* ==========================================================================
   GUIDE STATS BAR
   ========================================================================== */



/* ==========================================================================
   GUIDE SECTION NAV
   ========================================================================== */

.guide-nav {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 64px;
  z-index: 99;
  transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.guide-nav__list {
  display: flex;
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.guide-nav__list--centre {
  justify-content: center;
}

.guide-nav__list::-webkit-scrollbar {
  display: none;
}

.guide-nav__link {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 1.1rem 1.6rem;
  white-space: nowrap;
  border-bottom: 2.5px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.guide-nav__link:hover {
  color: var(--color-text);
}

.guide-nav__link--active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}


/* ==========================================================================
   ROUTE MAP COMPONENT
   ========================================================================== */

.route-map {
  margin: var(--space-lg) 0;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--color-surface);
}

.route-map__image-wrap {
  width: 100%;
  overflow: hidden;
  background: #eef1f5; /* neutral map background */
}

.route-map__image {
  width: 100%;
  height: auto;
  display: block;
}

/* Route strip — dark background, horizontally scrollable */
.route-map__strip {
  background: var(--color-text);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.route-map__strip::-webkit-scrollbar {
  display: none;
}

.route-map__scroll {
  display: flex;
  align-items: flex-start;
  padding: 1.1rem 1.5rem;
  min-width: max-content;
  gap: 0;
}

/* Individual stop */
.route-map__stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 88px;
  text-align: center;
}

.route-map__day {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.route-map__node {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-text-muted);
  border: 2px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  margin: 2px 0;
}

.route-map__stop--start .route-map__node,
.route-map__stop--finish .route-map__node {
  background: var(--color-accent);
  border-color: var(--color-accent);
  width: 12px;
  height: 12px;
}

.route-map__stop--peak .route-map__node {
  background: var(--color-gold);
  border-color: var(--color-gold);
}

.route-map__town {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: #ffffff;
  line-height: 1.3;
}

.route-map__elevation {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.03em;
}

.route-map__stop--peak .route-map__elevation {
  color: var(--color-gold);
  opacity: 0.9;
}

.route-map__stop--start .route-map__day {
  color: rgba(255, 255, 255, 0.85);
}

.route-map__stop--finish .route-map__day {
  color: var(--color-gold);
}

/* Connector between stops */
.route-map__connector {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 40px;
  padding-top: 26px; /* aligns line with node vertical center */
}

.route-map__line {
  width: 100%;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, 0.25) 0px,
    rgba(255, 255, 255, 0.25) 4px,
    transparent 4px,
    transparent 8px
  );
}

/* Mobile: reduce stop min-width slightly */
@media (max-width: 768px) {
  .route-map__stop {
    min-width: 72px;
  }

  .route-map__connector {
    min-width: 40px;
  }

  .route-map__scroll {
    padding: 1rem 1rem;
  }
}


/* ==========================================================================
   INTERACTIVE ROUTE MAP
   ========================================================================== */

.imap-wrap {
  margin: 1.75rem 0 var(--space-lg);
  border: 1px solid var(--color-border-strong);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(30,27,24,0.13), 0 1px 4px rgba(30,27,24,0.07);
  position: relative;
}

.imap-hint {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 500; /* above tiles/route (200-400), below Leaflet tooltip pane (650) */
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  background: var(--color-accent);
  padding: 3px 14px;
  border-radius: var(--radius-full);
  pointer-events: none;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.imap-hint--mobile { display: none; }

.imap-canvas {
  width: 100%;
  height: 500px;
  display: block;
  background: #e8e4dc;
  isolation: isolate; /* contains Leaflet's z-indexes away from the site nav */
}

/* ── Permanent place labels ── */
.imap-label {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  transition: opacity 0.2s ease;
  pointer-events: none; /* labels don't block map interaction */
}
.imap-label::before { display: none !important; } /* hide default tip */

.imap-label .imap-label__name {
  display: block;
  font-family: var(--font-sans);
  font-size: 15px !important;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(255,255,255,0.9), 0 0 6px rgba(255,255,255,0.9);
}

/* ── Hover popup ── */

.imap-popup .leaflet-popup-content-wrapper {
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 4px 20px rgba(30,27,24,0.2);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.imap-popup .leaflet-popup-content {
  margin: 0;
  width: auto !important;
}
.imap-popup .leaflet-popup-tip-container { display: none; }

.imap-popup__inner {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.6rem 0.85rem;
  background: white;
  min-width: 150px;
}
/* Segment popup: title line + stats line */
.imap-popup__inner--v2 {
  padding: 0.55rem 0.85rem;
  min-width: 0;
}
.imap-popup__inner--v2 .imap-popup__day {
  display: block;
  white-space: nowrap;
  margin-bottom: 0.3rem;
}
.imap-popup__stats-inline {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.imap-popup__stat-pair {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
@media (max-width: 768px) {
  .imap-popup__inner--v2 .imap-popup__day {
    white-space: normal;
  }
  .imap-popup__stats-inline {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }
  .imap-popup__stat-sep { display: none; }
}
.imap-popup__stat-sep {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.imap-popup__day {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.imap-popup__name {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.2;
  white-space: nowrap;
}
.imap-popup__elev {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.1rem;
}

/* Segment hover popup — stats rows */
.imap-popup__stats {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--color-border);
}
.imap-popup__stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}
.imap-popup__stat-lbl {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.imap-popup__stat-val {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text);
  text-align: right;
}

@media (max-width: 768px) {
  .imap-canvas { height: 340px; }
  .imap-hint--desktop { display: none; }
  .imap-hint--mobile  { display: block; }
}

/* ==========================================================================
   ARTICLE TWO-COLUMN LAYOUT
   ========================================================================== */

.article-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem var(--pad-tight) var(--space-md);
}

.article-grid {
  display: grid;
  /* minmax(0, 1fr) prevents the main column from expanding beyond its share
     when content has a wide intrinsic min-width (plain 1fr = minmax(auto,1fr)) */
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 40px;
  /* align-items: stretch so sidebar is as tall as the article,
     giving the sticky ad room to travel the full page. */
  align-items: stretch;
}

/* Article column starts at the top without stretching */
.article-main {
  align-self: start;
  padding-top: 0;
  min-width: 0;
}


.article-main p.article-byline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.article-byline .article-byline__name {
  font-weight: 600;
  font-style: normal;
}

.article-byline .article-byline__updated {
  font-style: normal;
}

/* Drop cap on the first real content paragraph, which follows the byline */
.article-byline + p::first-letter {
  font-family: var(--font-serif);
  font-size: 4.75rem;
  font-weight: 500;
  line-height: 0.8;
  float: left;
  margin-right: 0.07em;
  margin-top: 0.06em;
  color: var(--color-accent);
}


.article-main p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.85;
  color: var(--color-text);
}

.article-main p + p {
  margin-top: 1.25rem;
}

.article-main h2 {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.2;
  margin-top: 3rem;
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}

.article-main h3 {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}

.article-main strong {
  font-weight: 700;
  color: var(--color-text);
}

.article-main blockquote {
  border-left: 3px solid var(--color-accent);
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-lg) 0;
  background: var(--color-bone);
  border-radius: 0 4px 4px 0;
}

.article-main blockquote p {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--color-text-muted);
}


/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.sidebar {
  /* display: block — flex causes height-collapse on children, breaking sticky.
     align-self: stretch (default) so the sidebar is as tall as the article,
     giving the sticky ad room to travel the full page. */
  display: block;
  padding-top: 0;
}

/* About Me scrolls past normally — just needs bottom spacing */
.sidebar__about {
  margin-bottom: var(--space-md);
}

/* Only the ad follows the user down the page */
.sidebar__ad {
  position: sticky;
  top: 108px; /* JS overrides dynamically: nav top + nav height + 16px gap */
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* About Me card */
.sidebar__about {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}

.sidebar__about-header {
  background: var(--color-accent);
  padding: 0.3rem 1.1rem;
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ffffff;
}

.sidebar__about-photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.sidebar__about-body {
  padding: 1rem 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
}

.sidebar__about-kicker {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.2rem;
}

.sidebar__about-name {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
  margin-bottom: 0.3rem;
}

.sidebar__about-credentials {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-accent);
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.sidebar__about-bio {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text-muted);
  margin-bottom: 0.85rem;
}

.sidebar__about-link {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  text-decoration: none;
  align-self: flex-start;
  position: relative;
  transition: color 0.15s ease;
}

.sidebar__about-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar__about-link:hover {
  color: var(--color-accent-dark);
}

.sidebar__about-link:hover::after {
  transform: scaleX(1);
  background: var(--color-accent-dark);
}


.sidebar__ad-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0.4rem var(--space-sm);
  background: var(--color-bone);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

.sidebar__ad-slot {
  aspect-ratio: 5 / 6;
  background: var(--color-accent-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar__ad-slot::after {
  content: '300 × 360';
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
}


/* ==========================================================================
   IN-CONTENT AD SLOTS
   ========================================================================== */

.incontent-ad {
  margin: 1.25rem 0 0;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--color-surface);
}

.incontent-ad + .incontent-ad {
  margin-top: 1.25rem;
}

.incontent-ad__label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.575rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0.35rem 1rem;
  background: var(--color-bone);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

.incontent-ad__slot {
  height: 90px;
  background: var(--color-accent-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}

.incontent-ad__slot::after {
  content: '728 × 90 — Leaderboard';
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
}

/* Narrower "in-article" slot (fits article column on tablet) */
.incontent-ad--rect .incontent-ad__slot {
  height: 250px;
}

.incontent-ad--rect .incontent-ad__slot::after {
  content: '300 × 250 — Medium Rectangle';
}

/* Constrained wrapper for ads placed between full-width sections */
.content-ad-wrap {
  max-width: 772px;
  margin: 2rem auto 0;
  padding: 0 var(--space-md);
}

@media (max-width: 768px) {
  .incontent-ad__slot { height: 50px; }
  .incontent-ad__slot::after { content: '320 × 50 — Mobile Banner'; }
  .incontent-ad--rect .incontent-ad__slot { height: 250px; }
  .incontent-ad--rect .incontent-ad__slot::after { content: '300 × 250 — Medium Rectangle'; }
}

/* ==========================================================================
   RESPONSIVE — GUIDE PAGES
   ========================================================================== */


@media (max-width: 1024px) {
  .hero-guide-wrap { margin-top: 72px; }
  .hero--guide { height: calc(100vh - 72px - 2rem); height: calc(100svh - 72px - 2rem); min-height: 480px; }
  .hero--guide-full { height: 100vh; height: 100svh; }

  .hero__content--guide h1 {
    font-size: var(--text-5xl);
  }

  .article-grid {
    grid-template-columns: 1fr 220px;
    gap: 28px;
  }

  .weather-card { margin-right: calc(220px + 28px); }

  .sidebar__ad {
    top: 128px;
  }
}

@media (max-width: 768px) {
  .hero-guide-wrap { margin-top: 68px; padding: 0 1rem; }
  .hero--guide { height: 85vh; height: 85svh; min-height: 500px; }
  .hero--guide-full { height: 100vh; height: 100svh; }

  .hero__content--guide {
    padding: 1.5rem 1.4rem 1.5rem 1.25rem;
  }

  .hero__content--guide h1 {
    font-size: 2rem;
  }

  .hero--guide-full .hero__content--guide h1 {
    white-space: normal;
    font-size: var(--text-2xl);
  }

  .hero--guide-full .hero__content--guide {
    text-align: center;
    padding: 2rem 1.5rem 3rem;
  }

  .hero__chip {
    font-size: 0.7rem;
    padding: 0.28rem 0.65rem;
  }

  .hero__subtitle {
    font-size: var(--text-sm);
  }

  /* Guide nav: scroll horizontally, never wrap or overflow */
  .guide-nav__inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
  }
  .guide-nav__inner::-webkit-scrollbar { display: none; }

  .guide-nav__link {
    padding: 0.75rem 1rem;
  }

  .article-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .article-layout {
    padding-top: var(--space-lg);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 0.75rem;
  }

  .page-nav {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sidebar__ad {
    position: static;
  }

  /* Ensure article content never escapes its column */
  .article-main {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Content panels: tighter padding on narrow screens */
  .content-panel__header {
    padding: 1.1rem 1rem;
    gap: 0.75rem;
  }

  .content-panel.is-open .content-panel__body {
    padding: 0.75rem 0.5rem 1rem;
  }

  .content-panel__icon-wrap {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  .content-panel__readtime {
    display: none;
  }
}


/* ==========================================================================
   ITINERARY DAYS (inside itinerary accordion)
   ========================================================================== */

.itinerary-days {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.itinerary-day {
  display: block;
  padding: 1.75rem 0;
  border-top: 1px solid var(--color-border);
}

.itinerary-day:first-child {
  border-top: none;
  padding-top: 0;
}

.itinerary-day:last-child,
.itinerary-day:has(+ .itin-day-nav) {
  padding-bottom: 0;
}

.itinerary-day__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  margin-bottom: 0.85rem;
}

.itinerary-day__label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ffffff;
  background: var(--color-accent);
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
}

.itinerary-day__content {
  /* paragraph container */
}

/* specificity (0,2,0) — beats .article-main h3 (0,1,1) which resets font-weight to 400 */
.itinerary-day .itinerary-day__title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.03em;
  line-height: 1.2;
  display: block;
  background: none;
  padding: 0;
  border-radius: 0;
  margin: 0 !important;
}

/* One-line stat strip */
.itinerary-day__stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.35rem;
  margin-bottom: 1.25rem;
}

.itinerary-day__stat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  padding: 0 0.7rem;
  white-space: nowrap;
}

.itinerary-day__stat:first-child { padding-left: 0; }

.itinerary-day__stat svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.itinerary-day__stat-sep {
  width: 1px;
  height: 11px;
  background: var(--color-border);
  flex-shrink: 0;
}

.itinerary-day__content p:not(.itinerary-day__meta) {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--color-text);
  margin: 0;
}

.itinerary-day__content p + p {
  margin-top: 0.85rem;
}

/* Itinerary photo placeholder */
.itinerary-day__photo {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.itinerary-day__photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

/* Placeholder shown before real photo is added */
.itinerary-day__photo-placeholder {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--color-bone);
  border: 1px dashed var(--color-border);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--color-text-muted);
}

.itinerary-day__photo-placeholder svg {
  opacity: 0.35;
}

.itinerary-day__photo-placeholder span {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.5;
}

/* ==========================================================================
   ITINERARY INFO PILLS
   ========================================================================== */

.info-pill {
  padding: 0.7rem 1rem;
  border-radius: 3px;
  margin: 1.25rem auto;
  border-left: 3px solid transparent;
  max-width: 95%;
}

.info-pill__icon {
  display: none;
}

.info-pill__body {
  display: block;
}

.info-pill__title {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.2rem;
}

.info-pill__text {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  margin: 0;
}

/* Variants */
.info-pill--tip {
  background: #fffbf0;
  border-left-color: #e6b800;
}
.info-pill--tip .info-pill__title {
  color: #7a5200;
}
.info-pill--tip .info-pill__text {
  color: #4a3200;
}

.info-pill--watch {
  background: #fdf0ef;
  border-left-color: #d95f52;
}
.info-pill--watch .info-pill__title {
  color: #b03a2e;
}
.info-pill--watch .info-pill__text {
  color: #7a2a22;
}

.info-pill--good {
  background: var(--color-accent-tint);
  border-left-color: var(--color-accent);
}
.info-pill--good .info-pill__title {
  color: var(--color-accent-dark);
}
.info-pill--good .info-pill__text {
  color: #1e3d28;
}

.info-pill--info {
  background: #f0f5ff;
  border-left-color: #3a6fd8;
}
.info-pill--info .info-pill__title {
  color: #2050a8;
}
.info-pill--info .info-pill__text {
  color: #1a3570;
}

/* ==========================================================================
   ITINERARY TAB SYSTEM
   ========================================================================== */

.itin-tabs {
  margin: 0;
}

.itin-tabs__nav {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 1.5rem;
}

.itin-tabs__tab {
  flex: 1;
  padding: 0.6rem 0.5rem;
  background: var(--color-bone);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  transition: color 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.itin-tabs__tab:hover:not(.is-active) {
  background: var(--color-accent-tint);
  color: var(--color-accent);
}

.itin-tabs__tab.is-active {
  background: var(--color-accent);
  color: #ffffff;
}

/* Panels — no wrapper, content sits directly in the accordion body */
.itin-tabs__panels {
  padding: 0;
  margin: 0;
}

.itin-tabs__panel {
  display: none;
  margin: 0;
  padding: 0;
}

.itin-tabs__panel.is-active {
  display: block;
}

.itin-tabs__panel > .itinerary-day:first-child {
  border-top: none;
  padding-top: 0;
}

@media (max-width: 768px) {
  .itin-tabs__nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    margin-bottom: 0.75rem;
  }
  .itinerary-day__stat {
    padding: 0;
  }
  .itinerary-day__stat-sep {
    margin: 0 0.5rem;
  }
  .itinerary-day .itinerary-day__title {
    font-size: 1.6rem;
  }
  .itin-tabs__tab {
    padding: 0.75rem 0.25rem;
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    white-space: normal;
  }
  .itin-tabs__panels {
    padding: 1rem 0;
  }
}

/* ==========================================================================
   CONTENT PANELS (expandable article sections — card treatment)
   ========================================================================== */

.content-panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  margin-top: 1.5rem;
  transition: border-color 0.15s ease;
}

/* Hover: green border */
.content-panel:hover {
  border-color: var(--panel-border-open);
}

/* Open state: thicker green border */
.content-panel.is-open {
  border: 1.5px solid var(--panel-border-open);
}

/* ── Header (native <button> — resets browser defaults) ── */
.content-panel__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.1rem 1.4rem;
  background: none;
  border: none;
  border-radius: 11px;
  text-align: left;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font: inherit;
  color: inherit;
}

/* Open: thin separator between header and body */
.content-panel.is-open .content-panel__header {
  border-bottom: 1px solid var(--panel-header-sep);
}

.content-panel__header:focus-visible {
  outline: 2px solid var(--panel-border-open);
  outline-offset: -2px;
  border-radius: 11px;
  /* Native <button> provides keyboard accessibility — no extra keydown handler needed */
}

/* ── Icon container ── */
.content-panel__icon-wrap {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-icon-bg);
  border-radius: 8px;
  color: var(--panel-icon-open);
  transition: background 0.15s ease, color 0.15s ease;
}

.content-panel__icon-wrap svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.content-panel:hover .content-panel__icon-wrap,
.content-panel.is-open .content-panel__icon-wrap {
  background: var(--panel-icon-open);
  color: #ffffff;
}

/* ── Heading group ── */
.content-panel__heading-group {
  flex: 1;
  min-width: 0;
}

/* .content-panel .content-panel__title gives specificity (0,2,0) to beat
   .article-main h2 (0,1,1) which sets margin-top: 3rem */
.content-panel .content-panel__title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text);
  margin: 0 0 0.2rem;
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}

.content-panel.is-open .content-panel__title {
  color: var(--panel-title-open);
}

.content-panel__subtitle {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--panel-muted);
  line-height: 1.4;
}

/* ── Right side: read-time + chevron ── */
.content-panel__header-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.content-panel__readtime {
  display: none;
}

.content-panel__chevron {
  width: 18px;
  height: 18px;
  color: var(--panel-muted);
  flex-shrink: 0;
  transition: transform 0.3s ease, color 0.15s ease;
}

.content-panel.is-open .content-panel__chevron {
  transform: rotate(180deg);
  color: var(--panel-border-open);
}

/* ── Collapsible body ── */
.content-panel__body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 1.4rem;
}

.content-panel.is-open .content-panel__body {
  overflow: visible;
  padding: 0.75rem 1.4rem 1.4rem;
}

/* Fade no longer needed — body collapses to zero height when closed */
.content-panel__fade { display: none; }

/* "Read more" / "Collapse" toggle */
.content-panel__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-accent);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin-top: 0.65rem;
  transition: color 0.15s ease;
  letter-spacing: 0.01em;
}

.content-panel__toggle:hover {
  color: var(--color-accent-dark);
}


/* ==========================================================================
   PACKING LIST
   ========================================================================== */

/* ── Pack: overall progress bar ── */
.pack-progress {
  display: grid;
  grid-template-areas:
    "info actions"
    "track track";
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-top: 1.5rem;
  margin-bottom: 1.75rem;
}

.pack-progress__info {
  grid-area: info;
  margin-bottom: 0.5rem;
}

.pack-progress__count {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: color 0.2s;
}

.pack-progress__count.all-done {
  color: var(--color-accent);
  font-weight: 500;
}

.pack-progress__actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.pack-progress__action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background: none;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
  line-height: 1.6;
}
.pack-progress__action-btn:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}
.pack-progress__action-btn.is-active:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}

.pack-progress__reset {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background: none;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.pack-progress__reset:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

/* ── Pack: compact mode ── */
.pack-groups.is-compact .pack-group__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.pack-groups.is-compact .pack-item {
  padding: 0.5rem 0.875rem;
  border-bottom: 1px solid var(--color-border);
}
.pack-groups.is-compact .pack-item:nth-child(odd) {
  border-right: 1px solid var(--color-border);
}
.pack-groups.is-compact .pack-item:last-child:nth-child(odd) {
  grid-column: 1;
  border-right: 1px solid var(--color-border);
}
.pack-groups.is-compact .pack-item:last-child,
.pack-groups.is-compact .pack-item:nth-last-child(2):nth-child(odd) {
  border-bottom: none;
}
.pack-groups.is-compact .pack-item__note {
  display: none;
}
.pack-groups.is-compact .pack-item__name {
  font-size: var(--text-sm);
}

.pack-progress__track {
  grid-area: track;
  height: 3px;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}

.pack-progress__fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 2px;
  width: 0%;
  transition: width 0.35s ease;
}

/* ── Pack: category groups ── */
.pack-groups {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.pack-group {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}

.pack-group__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 1.25rem;
  background: var(--color-accent);
  border-bottom: 1px solid var(--color-border);
  transition: background 0.25s;
}

.pack-group.all-done .pack-group__header {
  background: var(--color-accent-tint);
}

.pack-group__name {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ffffff;
  transition: color 0.25s;
}

.pack-group.all-done .pack-group__name {
  color: var(--color-accent-dark);
}

.pack-group__count {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: #ffffff;
  transition: color 0.2s;
}

.pack-group__count.all-done {
  color: var(--color-accent);
}

/* ── Pack: individual items ── */
.pack-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.8rem 1.25rem;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.1s;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.pack-item:last-child {
  border-bottom: none;
}

.pack-item:hover {
  background: #f7f5f1;
}

.pack-item.is-checked {
  background: var(--color-accent-tint);
}

/* Visually hidden real checkbox — 1px not 0px so browser still fires change events */
.pack-item__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Custom checkbox box */
.pack-item__box {
  width: 1.125rem;
  height: 1.125rem;
  border: 1.5px solid var(--color-border);
  border-radius: 3px;
  flex-shrink: 0;
  margin-top: 0.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.pack-item:hover .pack-item__box {
  border-color: var(--color-accent);
}

.pack-item.is-checked .pack-item__box {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* Checkmark SVG */
.pack-item__check {
  width: 10px;
  height: 8px;
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.12s ease, transform 0.15s ease;
}

.pack-item.is-checked .pack-item__check {
  opacity: 1;
  transform: scale(1);
}

/* Item text */
.pack-item__content { flex: 1; min-width: 0; }

.pack-item__name {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.45;
  display: block;
  transition: color 0.15s;
}

.pack-item.is-checked .pack-item__name {
  color: var(--color-text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--color-text-muted);
}

.pack-item__note {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: block;
  margin-top: 0.15rem;
  line-height: 1.4;
  transition: opacity 0.15s;
}

.pack-item.is-checked .pack-item__note {
  opacity: 0.5;
}


/* ==========================================================================
   FAQ SECTION (standalone two-column)
   ========================================================================== */

.faq-section {
  background: var(--color-bone);
  padding: 5rem 0;
}

.faq-section__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pad-tight);
}

.faq-section__hd {
  text-align: center;
  margin-bottom: 3.5rem;
}

.faq-section__title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 0.6rem;
}

.faq-section__sub {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin: 0;
}

/* Expand / collapse all toolbar */
.faq-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: -2rem 0 1.5rem;
}

.faq-toggle-all {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.faq-toggle-all:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.faq-toggle-all__icon {
  width: 0.8rem;
  height: 0.8rem;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.faq-toggle-all.is-expanded .faq-toggle-all__icon {
  transform: rotate(180deg);
}

/* Two-column grid */
.faq-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 4rem;
}

/* Items */
.faq-col .faq-q {
  border-bottom: 1px solid var(--color-border);
}

.faq-col .faq-q:first-child {
  border-top: 1px solid var(--color-border);
}

/* Trigger row */
.faq-q__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.25rem 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.faq-q__text {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.45;
  transition: color 0.15s ease;
}

.faq-q__trigger:hover .faq-q__text,
.faq-q.is-open .faq-q__text {
  color: var(--color-accent);
}

/* Circle icon wrap */
.faq-q__icon-wrap {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.faq-q__trigger:hover .faq-q__icon-wrap,
.faq-q.is-open .faq-q__icon-wrap {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
}

.faq-q__icon {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  color: inherit;
}

.faq-q__icon-v {
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform-origin: 8px 8px;
}

.faq-q.is-open .faq-q__icon-v {
  opacity: 0;
  transform: scaleY(0);
}

/* Answer */
.faq-q__answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-q__answer-inner {
  padding-bottom: 1.25rem;
}

.faq-q__answer-inner p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.75;
  margin: 0;
}

.faq-q__answer-inner p + p { margin-top: 0.75rem; }

.faq-q__answer-inner strong {
  font-weight: 600;
  color: var(--color-text);
}

/* Mobile: single column */
@media (max-width: 768px) {
  .faq-section { padding: 2rem 0 2.5rem; }
  .faq-section__inner { padding: 0 1.25rem; }
  .faq-section__hd { margin-bottom: 1.5rem; }
  .faq-toolbar { justify-content: center; margin: 0 0 1.25rem; }
  .faq-toggle-all { min-height: 44px; padding: 0.6rem 1.2rem; }
  .faq-cols { grid-template-columns: 1fr; gap: 0; }
  .faq-col:nth-child(2) .faq-q:first-child { border-top: none; }
}


/* ==========================================================================
   ITINERARY DAY NAVIGATION (bottom prev/next)
   ========================================================================== */

.itin-day-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  padding-top: 0;
}

.itin-day-nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s ease;
}

.itin-day-nav__btn svg {
  width: 20px;
  height: 20px;
}

.itin-day-nav__btn:hover {
  color: var(--color-accent);
}

.itin-day-nav__btn--next {
  margin-left: auto;
}

/* ==========================================================================
   ELEVATION CHART
   ========================================================================== */

.elev-chart {
  position: relative;
  /* Deep forest-green atmosphere — distinct from the near-black used elsewhere */
  background: linear-gradient(160deg, #0b1e13 0%, #122619 55%, #1a3222 100%);
  border-radius: 12px;
  padding: 1.75rem 1.75rem 1.5rem;
  margin: 0 0 var(--space-md);
  overflow: hidden;
}

/* Mountain-range silhouette watermark — purely decorative */
.elev-chart::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 58%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200' preserveAspectRatio='none'%3E%3Cpath d='M0,200 L0,158 Q55,150 88,122 Q128,82 158,58 Q183,38 204,88 Q224,128 264,110 Q304,90 332,46 Q360,8 383,4 Q410,-2 433,26 Q460,58 493,76 Q526,94 562,82 Q602,68 642,84 Q682,102 722,88 Q765,72 806,82 Q850,95 898,88 Q940,82 972,97 L1000,104 L1000,200 Z' fill='%232a6644'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}

/* Lift all chart content above the watermark */
.elev-chart__header,
.elev-chart__rows {
  position: relative;
  z-index: 1;
}

.elev-chart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  gap: 1rem;
}

.elev-chart__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.01em;
}

/* m / ft pill toggle */
.elev-chart__unit-toggle {
  display: flex;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}

.elev-chart__unit-btn {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.38);
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.elev-chart__unit-btn.is-active {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

/* Individual rows */
.elev-chart__row {
  display: grid;
  grid-template-columns: 170px 1fr 72px;
  align-items: center;
  gap: 1.1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.elev-chart__row:last-child {
  border-bottom: none;
  padding-bottom: 0.1rem;
}

.elev-chart__day-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.elev-chart__day-num {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  line-height: 1;
}

.elev-chart__day-place {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.25;
}

/* Bar track + bar */
.elev-chart__track {
  height: 9px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 5px;
  overflow: hidden;
}

.elev-chart__bar {
  height: 100%;
  border-radius: 5px;
  width: var(--bar-pct);
  transform-origin: left center;
  transform: scaleX(0);
}

/* Animate bars when .is-visible class is added via JS */
.elev-chart.is-visible .elev-chart__bar {
  transform: scaleX(1);
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.elev-chart.is-visible .elev-chart__row:nth-child(1) .elev-chart__bar { transition-delay: 0.05s; }
.elev-chart.is-visible .elev-chart__row:nth-child(2) .elev-chart__bar { transition-delay: 0.18s; }
.elev-chart.is-visible .elev-chart__row:nth-child(3) .elev-chart__bar { transition-delay: 0.30s; }
.elev-chart.is-visible .elev-chart__row:nth-child(4) .elev-chart__bar { transition-delay: 0.40s; }
.elev-chart.is-visible .elev-chart__row:nth-child(5) .elev-chart__bar { transition-delay: 0.50s; }

/* Bar colours — high bars are red/warning; low/dest stand out against the green bg */
.elev-chart__bar--high { background: #c04848; }
.elev-chart__bar--low  { background: #4bac72; } /* brighter green so it reads against the dark-green bg */
.elev-chart__bar--dest { background: var(--color-gold); }

/* Value labels — colour-matched to bar type */
.elev-chart__val {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  line-height: 1;
}

.elev-chart__row--high .elev-chart__val { color: #e08888; }
.elev-chart__row--low  .elev-chart__val { color: #7dd49a; }
.elev-chart__row--dest .elev-chart__val { color: var(--color-gold); }

/* Mobile */
@media (max-width: 768px) {
  .elev-chart {
    padding: 1.25rem 1.25rem 1rem;
  }

  .elev-chart__row {
    grid-template-columns: 1fr 60px;
    grid-template-rows: auto auto;
    gap: 0.35rem 0.75rem;
  }

  .elev-chart__day-wrap { grid-column: 1; grid-row: 1; }
  .elev-chart__val      { grid-column: 2; grid-row: 1; }
  .elev-chart__track    { grid-column: 1 / -1; grid-row: 2; }
}


/* ==========================================================================
   COST TABLE
   ========================================================================== */

.cost-table {
  border-radius: 4px;
  overflow: hidden;
  margin: var(--space-lg) 0 var(--space-sm);
  /* Lifted off the page with a warm shadow rather than a border */
  box-shadow: 0 2px 0 var(--color-border), 0 4px 24px rgba(30, 27, 24, 0.09);
  /* Allow horizontal scroll on narrow viewports rather than overflowing */
  max-width: 100%;
}

/* ── Header ── */
.cost-table__summary {
  background: linear-gradient(135deg, #1a3424 0%, #213d2c 100%);
  padding: 1.5rem 0;
  display: grid;
  grid-template-columns: 1fr 240px;
  align-items: center;
}

.cost-table__summary > div:first-child {
  padding-left: 1.75rem;
}

.cost-table__summary-title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: #ffffff;           /* explicitly white */
  display: block;
  margin-bottom: 0.3rem;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.cost-table__summary-note {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

/* Right group sits in the 240px grid column — perfectly over PEN+USD */
.cost-table__summary > div:last-child {
  text-align: center;
}

.cost-table__total-figure {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 500;
  color: var(--color-gold);
  display: block;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.05;
  white-space: nowrap;
}

.cost-table__total-subtitle {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  display: block;
  text-align: center;
  margin-top: 0.3rem;
}

/* ── Table ── */
.cost-table__table {
  width: 100%;
  table-layout: fixed;   /* gives us real control over column widths */
  border-collapse: collapse;
  background: var(--color-surface);
}

.cost-table__th {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0.85rem 1.5rem;
  text-align: left;
  /* Use border color as bg — clearly distinct from both the bone footer and the white rows */
  background: var(--color-border);
  border-bottom: 1px solid #ccc7c0;
}

/* Explicit column widths — item column fills remaining space */
.cost-table__th--pen  { width: 110px; text-align: center; }
.cost-table__th--curr { width: 130px; text-align: center; }

/* ── Cells ── */
.cost-table__td {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-text);
  padding: 0.85rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  line-height: 1.5;
  vertical-align: middle;
}

.cost-table__td--pen,
.cost-table__td--curr {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  vertical-align: middle;
  text-align: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* ── Total row ── */
.cost-table__total-row td {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-text);
  padding: 1rem 1.5rem;
  border-top: 2px solid var(--color-text);
  border-bottom: none;
  background: var(--color-bone);
  vertical-align: middle;
  white-space: nowrap;    /* keeps total on one line */
}

/* ── Footer: currency picker left, disclaimer right ── */
.cost-table__footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.5rem 1rem;
  background: var(--color-bone);
  border-top: 1px solid var(--color-border);
}

/* Disclaimer — tiny footnote beneath the converter.
   Use two-class selector to beat the .article-main p rule (specificity 0,1,1). */
.cost-table .cost-table__disclaimer {
  font-family: var(--font-sans);
  font-size: 0.75rem; /* 12px */
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.55;
  font-style: italic;
  letter-spacing: 0.01em;
}

/* Custom currency picker */
.curr-picker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.curr-picker__label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.curr-picker__control {
  position: relative;
}

.curr-picker__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.35rem 0.85rem 0.35rem 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  outline: none;
  white-space: nowrap;
  line-height: 1;
}

.curr-picker__trigger:hover,
.curr-picker__trigger:focus-visible {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.curr-picker__trigger[aria-expanded="true"] {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.curr-picker__trigger-code {
  font-weight: 700;
  letter-spacing: 0.04em;
}

.curr-picker__trigger-symbol {
  opacity: 0.75;
  font-size: 0.8em;
}

.curr-picker__chevron {
  flex-shrink: 0;
  opacity: 0.8;
  transition: transform 0.2s ease;
}

.curr-picker__trigger[aria-expanded="true"] .curr-picker__chevron {
  transform: rotate(180deg);
}

.curr-picker__listbox {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 200;
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  min-width: 230px;
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.curr-picker__listbox.is-open {
  display: block;
}

.curr-picker__group-label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text-muted);
  padding: 0.5rem 0.75rem 0.25rem;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.curr-picker__separator {
  height: 1px;
  background: var(--color-border);
  margin: 0.35rem 0.5rem;
  pointer-events: none;
}

.curr-picker__option {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0.55rem 0.75rem;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s ease;
  -webkit-user-select: none;
  user-select: none;
}

.curr-picker__option:hover {
  background: var(--color-accent-tint);
}

.curr-picker__option.is-selected {
  background: var(--color-accent-tint);
}

.curr-picker__option.is-selected .curr-picker__opt-code {
  color: var(--color-accent);
}

.curr-picker__opt-code {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.04em;
  width: 2.8rem;
  flex-shrink: 0;
}

.curr-picker__opt-name {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex: 1;
}

.curr-picker__opt-sym {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: right;
  min-width: 1.5rem;
}

/* Mobile */
@media (max-width: 768px) {
  /* Allow dropdown to escape the table box */
  .cost-table { overflow: visible; }

  .cost-table__summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.875rem;
    grid-template-columns: 1fr 155px;
    /* Round top corners explicitly since overflow:visible no longer clips children */
    border-radius: 4px 4px 0 0;
  }

  /* Reset desktop left indent — parent padding handles spacing on mobile */
  .cost-table__summary > div:first-child { padding-left: 0; }
  .cost-table__summary > div:last-child { text-align: right; align-self: center; }

  .cost-table__total-figure { text-align: right; font-size: 2.25rem; }
  .cost-table__summary-note { display: block; line-height: 1.2; }
  .cost-table__total-subtitle { text-align: right; }

  /* Hide PEN column — single currency column on mobile */
  .cost-table__th--pen,
  .cost-table__td--pen { display: none; }

  /* Table fits natively with one fewer column — no horizontal scroll needed */
  .cost-table__table-wrap { overflow-x: visible; }
  .cost-table__table { min-width: 0; }

  /* Larger description text, tighter header labels */
  .cost-table__td { padding: 0.7rem 0.85rem; font-size: 0.9375rem; }
  .cost-table__th { padding: 0.7rem 0.85rem; font-size: 0.8125rem; }

  .cost-table__th--curr { width: 90px; }

  /* Footer: stack vertically */
  .cost-table__footer {
    flex-direction: column;
    align-items: flex-start;
    border-radius: 0 0 4px 4px;
  }

  /* curr-picker row stretches full footer width and anchors the dropdown */
  .curr-picker { position: relative; width: 100%; }
  .curr-picker__control { position: static; }

  /* Dropdown: full width of the picker row, opens just below the button */
  .curr-picker__listbox {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    bottom: auto;
    width: auto;
    min-width: 0;
    max-height: 260px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HOTEL RECOMMENDATIONS
   ═══════════════════════════════════════════════════════════════ */

.hotel-recs {
  position: relative;
  overflow: hidden;
  margin-top: 2rem;
  background: #3f6850;
  border-radius: 14px;
  padding: 1.5rem 1.5rem 2rem;
}

/* Topographic contour line texture — hiking map motif across the full container */
.hotel-recs__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
}

.hotel-recs__header {
  margin-bottom: 1.1rem;
  position: relative;
  z-index: 1;
}

.hotel-recs__kicker {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  margin-bottom: 0.25rem;
}

.hotel-recs__title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.2rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.hotel-recs p.hotel-recs__sub {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  line-height: 1.5;
}

.hotel-recs__list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  position: relative;
  z-index: 1;
}

/* Whole card is the link */
.hotel-recs__card {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--color-surface);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  overflow: visible;
  text-decoration: none;
  font-weight: 400;   /* override global a[target="_blank"] bold rule */
  text-decoration: none;
  transition: transform 0.2s ease;
  will-change: transform;
}

/* High-specificity exception: beats .article-main a[target="_blank"] reinforcing rule */
a.hotel-recs__card[target="_blank"] {
  text-decoration: none;
  font-weight: 400;
}

.hotel-recs__card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.hotel-recs__thumb-wrap {
  flex-shrink: 0;
  padding: 8px 0 8px 8px;
  overflow: hidden;
  border-radius: 10px 0 0 10px;
}

.hotel-recs__thumb {
  width: 107px;
  height: 82px;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 6px;
  transition: transform 0.35s ease;
}

.hotel-recs__card:hover .hotel-recs__thumb { transform: scale(1.05); }

.hotel-recs__info {
  flex: 1;
  padding: 0.75rem 1rem;
  min-width: 0;
}

.hotel-recs__tier-pill {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  line-height: 1;
  margin-bottom: 0.3rem;
}

.hotel-recs__tier-pill--budget  { background: var(--color-accent-tint); color: var(--color-accent); }
.hotel-recs__tier-pill--mid     { background: #FDF3E3;                  color: #A07826; }
.hotel-recs__tier-pill--luxury  { background: #EEEAE8;                  color: #2C2420; }

.hotel-recs__name {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text);
  display: block;
  line-height: 1.25;
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hotel-recs__info p.hotel-recs__detail {
  font-family: var(--font-sans);
  font-size: 0.875rem; /* 14px */
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

.hotel-recs__arrow {
  flex-shrink: 0;
  margin-right: 1.1rem;
  color: var(--color-border-strong);
  transition: color 0.15s ease, transform 0.15s ease;
}

.hotel-recs__card:hover .hotel-recs__arrow {
  color: var(--color-accent);
  transform: translateX(3px);
}

@media (max-width: 768px) {
  .hotel-recs { padding: 1.25rem 1.25rem 1.75rem; }
  .hotel-recs__thumb { width: 82px; height: 72px; }
  .hotel-recs__name { white-space: normal; }
  .hotel-recs__info p.hotel-recs__detail { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   ALTERNATIVE TRANSPORT ACCORDION
   ═══════════════════════════════════════════════════════════════ */

.alt-transport {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  margin: 1.25rem 0;
  overflow: hidden;
}

.alt-transport__trigger {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.alt-transport__trigger::-webkit-details-marker { display: none; }
.alt-transport__trigger::marker { display: none; }

.alt-transport__meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.alt-transport__type {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gold);
}

.alt-transport__title {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
}

.alt-transport__chevron {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
}

details[open] .alt-transport__chevron {
  transform: rotate(180deg);
}

.alt-transport__body {
  border-top: 1px solid var(--color-border);
  padding: 0.9rem 1.1rem 1rem;
}

/* ═══════════════════════════════════════════════════════════════
   PLANNING TABS
   ═══════════════════════════════════════════════════════════════ */

/* ── Tab nav (pill style) ── */
.plan-tabs__nav {
  display: flex;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 1.75rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0.15rem; /* room for focus rings */
}
.plan-tabs__nav::-webkit-scrollbar { display: none; }

.plan-tabs__btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #888780;
  padding: 0.45rem 1rem;
  background: transparent;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}
.plan-tabs__btn:hover:not(.is-active) {
  background: var(--color-accent-tint);
  color: var(--color-accent);
}
.plan-tabs__btn.is-active {
  background: var(--color-accent);
  color: #ffffff;
}

/* ── Mobile tab dropdown (replaces horizontal scroll nav on ≤768px) ── */
.ptd-wrap {
  display: none; /* desktop: hidden — the regular nav shows */
  position: relative;
  margin-bottom: 1.25rem;
}

.ptd-pill {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  padding: 13px 18px;
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
  transition: none;
}

.ptd-pill__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ptd-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
  flex-shrink: 0;
}
.ptd-pill.is-open .ptd-pill__dot { display: none; }

.ptd-pill__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ptd-pill__count {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg4);
  white-space: nowrap;
}

.ptd-pill__current {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ptd-pill__chevron {
  color: var(--color-accent);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.ptd-pill.is-open .ptd-pill__chevron { transform: rotate(180deg); }

.ptd-panel {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 6px;
  z-index: 20;
  box-shadow: var(--shadow-lg);
}
.ptd-panel.is-open { display: block; }

.ptd-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text);
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}
.ptd-item:hover { background: var(--color-accent-tint); color: var(--color-accent); }
.ptd-item.is-active {
  background: rgba(47, 74, 58, 0.07);
  color: var(--color-accent);
  font-weight: 500;
}

.ptd-item__icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: color 0.15s ease;
}
.ptd-item:hover .ptd-item__icon,
.ptd-item.is-active .ptd-item__icon { color: var(--color-accent); }

@media (max-width: 768px) {
  .plan-tabs__nav { display: none; }
  .ptd-wrap { display: block; }
}

/* ── Tab panels ── */
.plan-tabs__panel { display: none; }
.plan-tabs__panel.is-active { display: block; }

/* ── Tab footer ── */
.plan-tabs__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.75rem;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--color-border);
}

.plan-tabs__footer-count {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-fg4);
  white-space: nowrap;
  min-width: 28px;
}

.plan-tabs__footer-steps {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}

.plan-tabs__footer-step {
  height: 3px;
  flex: 1;
  max-width: 44px;
  border-radius: 2px;
  background: var(--color-border);
  transition: background 0.25s ease;
}

.plan-tabs__footer-step.is-active  { background: var(--color-accent); }
.plan-tabs__footer-step.is-visited { background: rgba(47,74,58,0.3); }

.plan-tabs__footer-next {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.plan-tabs__footer-next:hover { color: var(--color-accent); }
.plan-tabs__footer-next--done { cursor: default; pointer-events: none; }

/* Intro paragraph at the top of each panel */
.plan-tabs__intro {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text);
  line-height: 1.75;
  margin: 0 0 1.75rem;
}

/* ── Season columns (When to Go) ── */
.season-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: var(--space-lg);
}

.timing-intro {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0 0 1.5rem;
}

.season-col {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.season-col--sweet { border-top: 4px solid var(--color-accent); }
.season-col--dry   { border-top: 4px solid #9e9082; }
.season-col--wet   { border-top: 4px solid #c04848; }

.season-col__head {
  padding: 1rem 1.15rem 0.9rem;
  border-bottom: 1px solid var(--color-border);
}
.season-col--sweet .season-col__head { background: #e8f4ee; }
.season-col--dry   .season-col__head { background: var(--color-bone); }
.season-col--wet   .season-col__head { background: #fdf0ef; }

.season-col__badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  margin-bottom: 0.65rem;
}
.season-col--sweet .season-col__badge { background: var(--color-accent); }
.season-col--dry   .season-col__badge { background: #9e9082; }

.season-col--wet   .season-col__badge { background: #c04848; }

.season-col__months {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.2rem;
}
.season-col--sweet .season-col__months { color: #1a4429; }
.season-col--dry   .season-col__months { color: var(--color-fg2); }
.season-col--wet   .season-col__months { color: #7a2020; }

.season-col__period {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.season-col__facts {
  list-style: none;
  padding: 0.9rem 1.15rem;
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.season-col__facts li {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.5;
  padding-left: 0.95rem;
  position: relative;
}
.season-col__facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.47em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.season-col--sweet .season-col__facts li::before { background: var(--color-accent); }
.season-col--dry   .season-col__facts li::before { background: #9e9082; }
.season-col--wet   .season-col__facts li::before { background: #c04848; }

.season-col__verdict {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-style: italic;
  color: var(--color-text-muted);
  margin: 0;
  padding: 0.7rem 1.15rem 0.85rem;
  border-top: 1px solid var(--color-border);
}

@media (max-width: 768px) {
  .season-cols { grid-template-columns: 1fr; }
}

/* ── Season rows v2 (horizontal layout) ── */
.season-rows-v2 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.season-row-v2 {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: start;
  gap: 1.5rem 2rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-md);
  border-left: 4px solid transparent;
}

.season-row-v2--sweet {
  background: #fdf6e3;
  border-left-color: var(--color-gold);
}
.season-row-v2--dry {
  background: #e8f4ee;
  border-left-color: var(--color-accent);
}
.season-row-v2--wet {
  background: #fdf0ef;
  border-left-color: #c04848;
}

.season-row-v2__badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  margin-bottom: 0.6rem;
}
.season-row-v2--sweet .season-row-v2__badge { background: var(--color-gold); }
.season-row-v2--dry   .season-row-v2__badge { background: var(--color-accent); }
.season-row-v2--wet   .season-row-v2__badge { background: #c04848; }

.season-row-v2 .season-row-v2__months {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  padding: 0;
}
.season-row-v2--sweet .season-row-v2__months { color: #7a5800; }
.season-row-v2--dry   .season-row-v2__months { color: #1a4429; }
.season-row-v2--wet   .season-row-v2__months { color: #7a2020; }

.season-row-v2__period {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.2;
  margin: 0.4rem 0 0;
}
.season-row-v2--sweet .season-row-v2__period { color: rgba(122, 88, 0, 0.65); }
.season-row-v2--dry   .season-row-v2__period { color: rgba(26, 68, 41, 0.65); }
.season-row-v2--wet   .season-row-v2__period { color: rgba(192, 72, 72, 0.65); }

.season-row-v2__facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.season-row-v2__facts li {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.5;
  padding-left: 1rem;
  position: relative;
}
.season-row-v2__facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.season-row-v2--sweet .season-row-v2__facts li::before { background: var(--color-gold); }
.season-row-v2--dry   .season-row-v2__facts li::before { background: var(--color-accent); }
.season-row-v2--wet   .season-row-v2__facts li::before { background: #c04848; }

@media (max-width: 1024px) {
  .season-row-v2 {
    grid-template-columns: 180px 1fr;
  }
}

@media (max-width: 768px) {
  .season-row-v2 {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
  }
}

/* ── Safety badges ── */
.safety-intro {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text);
  line-height: 1.75;
  margin: 0 0 1.25rem;
}

.safety-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.safety-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-md);
  border-left: 3px solid transparent;
}
.safety-card--ok {
  background: var(--color-accent-tint);
  border-left-color: var(--color-accent);
}
.safety-card--warn {
  background: #fdf5e0;
  border-left-color: #c09020;
}

.safety-card__icon {
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.safety-card--ok  .safety-card__icon { color: var(--color-accent); }
.safety-card--warn .safety-card__icon { color: #8a6010; }

.safety-card__body { display: flex; flex-direction: column; gap: 0.25rem; }

.safety-card .safety-card__title {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}
.safety-card--ok  .safety-card__title { color: var(--color-accent-dark); }
.safety-card--warn .safety-card__title { color: #6b4a08; }

.safety-card .safety-card__note {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  margin: 0;
}
.safety-card--ok  .safety-card__note { color: #2a5040; }
.safety-card--warn .safety-card__note { color: #7a5208; }
.safety-card--ok  .safety-card__note a { color: var(--color-accent); font-weight: 600; }
.safety-card--warn .safety-card__note a { color: #8a6010; font-weight: 600; }

@media (max-width: 768px) {
  .safety-cards { grid-template-columns: 1fr; }
  .safety-card { padding: 0.85rem 1rem; }
}

/* ── Altitude cards (2 × 2 grid) ── */
.altitude-intro {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0 0 1.25rem;
}

.altitude-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
}

.altitude-card {
  background: var(--color-accent-tint);
  border: 1px solid rgba(47, 74, 58, 0.15);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.35rem 1.35rem;
}

.altitude-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.altitude-card__num {
  width: 2rem;
  height: 2rem;
  background: var(--color-accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  flex-shrink: 0;
}

.altitude-card .altitude-card__title {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-accent-dark);
  margin: 0;
  line-height: 1.3;
}

.altitude-card .altitude-card__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: #2a5040;
  line-height: 1.6;
  margin: 0;
}

/* ── Transport cards ── */
.transport-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.transport-card {
  padding: 1.25rem 1.4rem;
  border-radius: 4px;
  border: 1px solid transparent;
}
.transport-card--fast   { background: #e8f4ee; border-color: rgba(42, 102, 68, 0.2); }
.transport-card--budget { background: #fdf8e8; border-color: rgba(192, 144, 32, 0.2); }
.transport-card--good   { background: var(--color-bone); border-color: var(--color-border); }

.transport-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.35rem;
}

.transport-card__name {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  margin: 0;
}
.transport-card--fast   .transport-card__name { color: #1a4429; }
.transport-card--budget .transport-card__name { color: #5c3d08; }
.transport-card--good   .transport-card__name { color: var(--color-text); }

.transport-card__badge {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
  color: #fff;
  white-space: nowrap;
}
.transport-card--fast   .transport-card__badge { background: var(--color-accent); }
.transport-card--budget .transport-card__badge { background: #a07820; }
.transport-card--good   .transport-card__badge { background: var(--color-text-muted); }

.transport-card__meta {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  margin: 0 0 0.45rem;
}
.transport-card--fast   .transport-card__meta { color: #2a5a3a; }
.transport-card--budget .transport-card__meta { color: #7a5c0a; }
.transport-card--good   .transport-card__meta { color: var(--color-text-muted); }

.transport-card__note {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin: 0;
}
.transport-card--fast   .transport-card__note { color: #2a5a3a; }
.transport-card--budget .transport-card__note { color: #7a5c0a; }
.transport-card--good   .transport-card__note { color: var(--color-text-muted); }

/* ── Getting to Cusco rows ── */
.tc-intro {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0 0 1.25rem;
}

.tc-rows {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.tc-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0 1rem;
  padding: 1.15rem 1.35rem;
  border-radius: var(--radius-md);
  border-left: 4px solid transparent;
  align-items: start;
}
.tc-row--air   { background: #e8f4ee; border-left-color: var(--color-accent); }
.tc-row--bus   { background: #fdf8e8; border-left-color: var(--color-gold); }
.tc-row--south { background: var(--color-bone); border-left-color: var(--color-border-strong); }

.tc-row__icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.tc-row--air   .tc-row__icon-wrap { background: var(--color-accent); color: #fff; }
.tc-row--bus   .tc-row__icon-wrap { background: var(--color-gold); color: #fff; }
.tc-row--south .tc-row__icon-wrap { background: var(--color-text-muted); color: #fff; }

.tc-row__body { display: flex; flex-direction: column; gap: 0.45rem; }

.tc-row__head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.tc-row__name {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.tc-row--air   .tc-row__name { color: #1a4429; }
.tc-row--bus   .tc-row__name { color: #5c3d08; }
.tc-row--south .tc-row__name { color: var(--color-text); }

.tc-row__badge {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-full);
  color: #fff;
  white-space: nowrap;
}
.tc-row__badge--green { background: var(--color-accent); }
.tc-row__badge--gold  { background: var(--color-gold); }
.tc-row__badge--muted { background: var(--color-text-muted); }

.tc-row__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tc-row__pill {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.tc-row--air   .tc-row__pill { background: rgba(47,74,58,0.1); color: #1a4429; }
.tc-row--bus   .tc-row__pill { background: rgba(192,151,58,0.15); color: #5c3d08; }
.tc-row--south .tc-row__pill { background: rgba(107,101,96,0.12); color: var(--color-fg2); }

.tc-row__note {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: inherit;
}
.tc-row--air   .tc-row__note { color: #2a5040; }
.tc-row--bus   .tc-row__note { color: #7a5c0a; }
.tc-row--south .tc-row__note { color: var(--color-text-muted); }

.tc-tip {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 1rem;
  padding: 0.85rem 1.1rem;
  background: var(--color-accent-tint);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.tc-tip__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--color-accent);
}

.tc-tip__text {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-accent-dark);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .season-row { grid-template-columns: 1fr; gap: 0.6rem; }
  .altitude-cards { grid-template-columns: 1fr; }
  .altitude-card { padding: 1rem 1rem 1.1rem; }
  .plan-tabs__btn { padding: 0.4rem 0.8rem; }
  .tc-row { grid-template-columns: 1fr; gap: 0.6rem; padding: 0.85rem 0.5rem 0.85rem 1rem; }
  .tc-row__icon-wrap { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   EMAIL NEWSLETTER STRIP
   ═══════════════════════════════════════════════════════════════ */

.newsletter-strip {
  background: #1a3d28;
  position: relative;
  overflow: hidden;
  padding: 5.5rem 0;
}

/* Decorative background circles for depth */
.newsletter-strip::before,
.newsletter-strip::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.newsletter-strip::before {
  width: 520px;
  height: 520px;
  top: -180px;
  right: -140px;
  background: radial-gradient(circle, rgba(192,144,32,0.12) 0%, transparent 70%);
}
.newsletter-strip::after {
  width: 360px;
  height: 360px;
  bottom: -120px;
  left: -80px;
  background: radial-gradient(circle, rgba(42,102,68,0.5) 0%, transparent 70%);
}

.newsletter__wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--pad-page);
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ── Left column: form content ── */
.newsletter__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(192,144,32,0.18);
  border: 1px solid rgba(192,144,32,0.38);
  color: #e8c060;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.38rem 0.85rem;
  border-radius: 2rem;
  margin-bottom: 1.4rem;
}

.newsletter__heading {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.newsletter__heading em {
  font-style: italic;
  color: #e8c060;
}

.newsletter__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: rgba(255,255,255,0.65);
  line-height: 1.75;
  margin-bottom: 2rem;
}

/* Form row: input + button flush side by side */
.newsletter__form {
  margin-bottom: 1.4rem;
}

.newsletter__row {
  display: flex;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06);
  margin-bottom: 0.85rem;
}

.newsletter__input {
  flex: 1;
  min-width: 0;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,0.94);
  border: none;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text);
  outline: none;
  transition: background 0.15s ease;
}
.newsletter__input::placeholder { color: #a09890; }
.newsletter__input:focus { background: #ffffff; }

.newsletter__btn {
  padding: 1rem 1.5rem;
  background: var(--color-gold);
  color: #ffffff;
  border: none;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, transform 0.1s ease;
}
.newsletter__btn:hover {
  background: var(--color-gold-dark);
}
.newsletter__btn:active {
  transform: scale(0.98);
}
.newsletter__btn--loading {
  opacity: 0.7;
  cursor: wait;
}

.newsletter__msg {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.55;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-top: 0.85rem;
  margin-bottom: 1.4rem;
}
.newsletter__msg--success {
  background: rgba(46, 160, 100, 0.18);
  border: 1px solid rgba(46, 160, 100, 0.4);
  color: #a8f0c0;
}
.newsletter__msg--error {
  background: rgba(220, 80, 60, 0.18);
  border: 1px solid rgba(220, 80, 60, 0.35);
  color: #f5b8b0;
}

.newsletter__fine {
  font-family: var(--font-sans);
  font-size: 0.725rem;
  color: rgba(255,255,255,0.35);
  line-height: 1.55;
  margin: 0;
}

/* Benefit badges row */
.newsletter__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.newsletter__badge {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 0.3rem 0.7rem;
  border-radius: 2rem;
  letter-spacing: 0.02em;
}

/* ── Right column: destination preview cards ── */
.newsletter__aside {
  display: flex;
  flex-direction: column;
}

.newsletter__aside-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
}

.newsletter__destinations {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.newsletter__dest {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09);
  border-left: 3px solid var(--dest-color, #7a9e7e);
  border-radius: 4px;
  padding: 0.7rem 1rem;
  transition: background 0.15s ease;
  cursor: default;
}
.newsletter__dest:hover {
  background: rgba(255,255,255,0.11);
}

.newsletter__dest-flag {
  width: 22px;
  height: auto;
  border-radius: 2px;
  flex-shrink: 0;
  display: block;
}

.newsletter__dest-info {
  flex: 1;
  min-width: 0;
}

.newsletter__dest-name {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.newsletter__dest-country {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  color: rgba(255,255,255,0.38);
  margin-top: 0.1rem;
}

.newsletter__dest-soon {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 500;
  color: rgba(255,255,255,0.38);
  background: rgba(255,255,255,0.08);
  padding: 0.15rem 0.45rem;
  border-radius: 2rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .newsletter__wrap {
    grid-template-columns: 1fr 260px;
    gap: 3rem;
  }
  .newsletter__heading { font-size: 2rem; }
}

@media (max-width: 768px) {
  .newsletter-strip { padding: 2.5rem 0; }
  .newsletter__wrap {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 0 1rem;
  }
  .newsletter__aside-label { display: block; }
  .newsletter__destinations {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.45rem;
  }
  .newsletter__dest {
    flex: 1 1 calc(50% - 0.225rem);
    min-width: 140px;
  }
  .newsletter__dest-soon { display: none; }
  .newsletter__dest:nth-child(n+5) { display: none; }
  .newsletter__row { flex-direction: column; border-radius: 5px; }
  .newsletter__input { border-radius: 5px 5px 0 0; }
  .newsletter__btn {
    border-radius: 0 0 5px 5px;
    padding: 0.9rem;
    text-align: center;
  }
  .newsletter__heading { font-size: 1.75rem; }
}


/* ═══════════════════════════════════════════════════════
   WEATHER WIDGET
   ═══════════════════════════════════════════════════════ */

/* Ensure [hidden] always wins over display:flex/block on weather elements */
.wx-loading[hidden],
.wx-error[hidden],
.wx-body[hidden] { display: none !important; }

.weather-section {
  background: var(--color-bg);
  padding: 2rem 0 5rem;
}

/* Outer wrapper matches article-layout; margin-right reserves the sidebar
   column (260px) + gap (40px) so card width equals article-main exactly */
.weather-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pad-tight);
}

.weather-card {
  margin-right: calc(260px + 40px);
  background: #0d1f14;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 2rem 2rem 1.5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.2);
}

/* ── Header ── */
.weather-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.weather-hd__location {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.weather-hd__name {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.weather-hd__meta {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 0.1rem;
}

.weather-hd__right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.weather-hd__updated {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.35);
}

/* ── C°/F° toggle ── */
.wx-toggle {
  display: flex;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 2px;
  gap: 2px;
}

.wx-toggle__btn {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  background: none;
  border: none;
  border-radius: 3px;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1.5;
}

.wx-toggle__btn--active {
  background: rgba(255,255,255,0.15);
  color: #ffffff;
}

.wx-toggle__btn:hover:not(.wx-toggle__btn--active) {
  color: rgba(255,255,255,0.8);
}

/* ── Loading / Error ── */
.wx-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.4);
}

.wx-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.15);
  border-top-color: rgba(255,255,255,0.5);
  border-radius: 50%;
  animation: wx-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes wx-spin { to { transform: rotate(360deg); } }

.wx-error {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 2rem 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.45);
}

.wx-error a { color: rgba(255,255,255,0.65); text-decoration: underline; }

/* ── Main body: current + stats ── */
.wx-main {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  align-items: stretch;
}

/* ── Current conditions ── */
.wx-current {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 1.5rem;
}

.wx-current__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.wx-current__temp-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wx-current__icon {
  font-size: 4rem;
  line-height: 1;
  flex-shrink: 0;
}

.wx-current__temp {
  font-family: var(--font-serif);
  font-size: 4rem;
  font-weight: 500;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.04em;
}

.wx-current__desc {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.wx-current__condition {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  color: rgba(255,255,255,0.85);
}

.wx-current__feels {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.45);
}

.wx-current__feels strong {
  color: rgba(255,255,255,0.65);
  font-weight: 500;
}

/* ── Stats grid ── */
.wx-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

.wx-stat {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 0.875rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3rem;
}

.wx-stat__icon {
  color: rgba(232,242,237,0.75);
  line-height: 0;
  margin-bottom: 0.15rem;
}

.wx-stat__label {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
}

.wx-stat__value {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  line-height: 1.3;
}

.wx-uv-label {
  font-size: var(--text-xs);
  font-weight: 500;
}

/* ── 5-day forecast ── */
.wx-forecast {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.wx-day {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  transition: background 0.15s;
}

.wx-day--today {
  background: rgba(42,102,68,0.35);
  border-color: rgba(74,153,102,0.4);
}

.wx-day__name {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
}

.wx-day--today .wx-day__name {
  color: #4db380;
}

/* Desktop: today card uses standard card elements; hide mobile wrapper */
.wx-today--mob  { display: none; }

.wx-day__icon {
  font-size: 2.25rem;
  line-height: 1;
}

.wx-day__cond {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.35;
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wx-day__temps {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
}

.wx-day__high { color: #ffffff; }
.wx-day__sep  { color: rgba(255,255,255,0.2); font-weight: 400; }
.wx-day__low  { color: rgba(255,255,255,0.4); }

.wx-day__rain-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
}

.wx-day__rain-track {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}

.wx-day__rain-fill {
  height: 100%;
  background: rgba(147,197,253,0.7);
  border-radius: 2px;
  transition: width 0.4s ease;
}

.wx-day__rain-pct {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  color: rgba(147,197,253,0.7);
  font-weight: 500;
  min-width: 2ch;
  text-align: right;
}

.wx-day__uv {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 500;
  opacity: 0.9;
}

/* ── Attribution ── */
.wx-source {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.2);
  text-align: right;
  margin-top: 0.25rem;
}

.wx-source a {
  color: rgba(255,255,255,0.3);
  text-decoration: underline;
}

/* ── Responsive ── */
@media (max-width: 912px) and (min-width: 769px) {
  .wx-stats  { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }
  .wx-main   { align-items: start; }
}

@media (max-width: 768px) {
  .weather-section { padding: 0.75rem 0 3rem; }
  .weather-wrap    { padding: 0 1rem; }
  .weather-card    { margin-right: 0; padding: 1.25rem 1rem 1rem; border-radius: 10px; }

  .weather-hd {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }

  .wx-main {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .wx-current {
    display: flex;
    align-items: center;
    padding: 1.25rem;
  }

  .wx-current__top {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }

  .wx-current__temp-wrap {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }

  .wx-current__temp { font-size: 3rem; }

  .wx-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .weather-hd__name {
    font-size: var(--text-xl);
  }
  .wx-stat {
    align-items: center;
    text-align: center;
  }
  .wx-stat__label {
    font-size: 0.7rem;
  }
  .wx-stat__value {
    font-size: var(--text-base);
  }
  .wx-uv-label {
    font-size: var(--text-sm);
  }

  .wx-forecast {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    overflow-x: visible;
  }

  .wx-day {
    padding: 0.85rem 0.75rem;
    min-width: 0;
  }

  /* TODAY card — mobile only */
  .wx-today--desk { display: none !important; }
  .wx-today--mob  { display: block; }

  .wx-day--today {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.75rem 1.1rem;
    text-align: left;
  }

  .wx-day--today .wx-day__name {
    font-size: var(--text-sm);
    text-align: center;
    margin-bottom: 0.45rem;
  }

  .wx-today__main {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.5rem;
  }

  .wx-today__icon {
    font-size: 2.75rem;
    line-height: 1;
    flex-shrink: 0;
  }

  .wx-today__right {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }

  .wx-today__high {
    font-family: var(--font-sans);
    font-size: 1.375rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.1;
  }

  .wx-today__cond {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.3;
  }

  .wx-today__low {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
  }

  .wx-today__divider {
    display: none;
  }

  .wx-today__stats {
    display: flex;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 0.65rem;
    margin-top: 0.05rem;
  }

  .wx-today__stat {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0 0.75rem;
  }

  .wx-today__stat:first-child {
    padding-left: 0;
    border-right: 1px solid rgba(255,255,255,0.1);
  }

  .wx-today__stat--right {
    padding-right: 0;
  }

  .wx-today__stat-text {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    white-space: nowrap;
  }

  .wx-today__stat-val {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    line-height: 1.2;
  }

  .wx-today__stat-label {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 500;
    color: rgba(255,255,255,0.35);
  }

  .wx-day__cond { display: none; }
}


/* ==========================================================================
   COUNTRY HERO (country index pages)
   ========================================================================== */

.country-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* Real photo — covers the full hero */
.country-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Hero photos whose focal point sits lower in the frame */
.country-hero__photo--bottom {
  object-position: center bottom;
}

.country-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(20, 18, 15, 0.52) 18%,
    rgba(20, 18, 15, 0.52) 100%
  );
  z-index: 1;
}

.country-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  padding: 2.5rem 0;
}

/* Reverse curve — arches upward into the photo from below */
.country-hero__curve {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  line-height: 0; /* kills phantom gap under inline SVG */
}

.country-hero__curve svg {
  width: 100%;
  height: 90px;
  display: block;
}

.country-hero__kicker {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 1.25rem;
}

.country-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 1.5rem;
}

.country-hero__tagline {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 auto 2rem;
}

.country-hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  flex-wrap: wrap;
}

.country-hero__cta {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.country-hero__cta--primary {
  color: #ffffff;
  background: var(--color-accent);
  border: 1.5px solid var(--color-accent);
  padding: 0.65rem 1.4rem;
}

.country-hero__cta--primary:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  box-shadow: var(--shadow-md);
}

.country-hero__cta-link {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color 0.2s ease, background-size 0.25s ease;
}

.country-hero__cta-link:hover {
  color: rgba(255, 255, 255, 0.95);
  background-image: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95));
  background-size: 100% 1px;
}

.country-hero__cta-link .cta-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.country-hero__cta-link:hover .cta-arrow {
  transform: translateX(3px);
}

/* Region pill — straddles the top edge of the frosted strip */
.country-hero__region-pill {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.7rem 1.8rem;
  border-radius: 50px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.country-hero__region-pill:hover {
  background-color: var(--color-text);
  color: #ffffff;
}

/* Quick-facts bar */
.country-hero__facts {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto 2.5rem;
  row-gap: 1.25rem;
}

.country-hero__fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0 1.75rem;
}

.country-hero__fact-sep {
  width: 1px;
  height: 2rem;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.country-hero__fact-val {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 500;
  color: #ffffff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.country-hero__fact-label {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* Scroll indicator */
.country-hero__scroll {
  position: absolute;
  bottom: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.45);
  z-index: 2;
  transition: color 0.2s ease;
  animation: countryScrollBounce 2.4s ease-in-out infinite;
}

.country-hero__scroll:hover {
  color: rgba(255, 255, 255, 0.85);
}

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

/* Larger CTA button for the full-bleed country hero */
.btn--hero {
  background-color: var(--color-accent);
  color: #ffffff;
  border: 1px solid transparent;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.9rem 2.2rem;
  border-radius: 3px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn--hero:hover {
  background-color: var(--color-accent-dark);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
}

.btn--hero-country {
  background-color: #ffffff;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: 50px;
}

.btn--hero-country:hover {
  background-color: var(--color-text);
  color: #ffffff;
}

.btn--hero-country__flag {
  font-size: 1.1em;
  line-height: 1;
}


/* ==========================================================================
   COUNTRY INTRO + QUICK FACTS
   ========================================================================== */

.country-intro {
  padding: var(--space-2xl) 0;
  background: var(--color-bg);
}

.country-intro__grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-xl);
  align-items: start;
}

.country-intro__text > p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.85;
  color: var(--color-text);
  margin-bottom: 0;
}

.country-intro__text > p + p {
  margin-top: 1.25rem;
}

/* Quick-facts aside card */
.country-facts-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  position: sticky;
  top: 88px; /* clears fixed header + a little breathing room */
}

.country-facts-card__header {
  background: var(--color-text);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.6rem 1.1rem;
}

.country-facts-card__body {
  padding: 0;
}

.country-fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
}

.country-fact:last-child {
  border-bottom: none;
}

.country-fact__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.country-fact__value {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  text-align: right;
}


/* ==========================================================================
   GUIDES SECTION
   ========================================================================== */

.country-guides {
  padding: var(--space-2xl) 0;
}

/* Destinations: parchment — flows seamlessly from the hero curve */
.country-guides--destinations {
  background: var(--color-bg);
  padding-top: var(--space-xl);
}

/* Destinations: parchment — matches When to Go and Hiking Guides */
.country-guides--hiking {
  background: var(--color-bg);
  padding-top: 0;
  padding-bottom: var(--space-lg);
}

@media (max-width: 768px) {
  .country-guides {
    padding: 2.5rem 0;
  }

  .country-guides--destinations {
    padding-top: 2.5rem;
  }
}

/* ── Topographic section divider (saved, not in use) ─────────────────────── */
.topo-divider {
  display: none;
  position: relative;
  width: 100%;
  height: 130px;
  background: linear-gradient(to bottom, var(--color-bg) 0%, var(--color-bone) 100%);
  overflow: hidden;
}

.topo-divider__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .topo-divider {
    height: 80px;
  }
}

/* ── Destinations band: photo + heading, cards overlap from below ─── */
.destinations-band {
  position: relative;
  overflow: hidden;
  padding: 3rem 0 6.5rem;
  z-index: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
}

.destinations-band__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 52%;
  filter: blur(3px) brightness(0.55);
  transform: scale(1.08);
  z-index: 0;
}

.destinations-band__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to left, rgba(14, 22, 16, 1) 0%, transparent 15%),
    rgba(14, 22, 16, 0.55);
  z-index: 1;
}

.destinations-band .container {
  position: relative;
  z-index: 2;
}

.destinations-band .guide-section-hd__title {
  color: #fff;
}

.destinations-band .guide-section-hd__sub {
  color: rgba(255, 255, 255, 0.68);
}

.destinations-cards {
  margin-top: -5rem;
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .destinations-band {
    padding-bottom: 4.5rem;
  }

  .destinations-cards {
    margin-top: -3.5rem;
  }
}

/* "Live Guide" badge pinned to top-left of the featured card */
.guide-card__live-badge {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 3;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--color-accent);
  color: #ffffff;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
}

/* 3-column grid for overnight section (3 cards, no empty slot) */
.hike-cards-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
  .hike-cards-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .hike-cards-grid--3 {
    grid-template-columns: 1fr;
  }
}

/* "What's coming" teaser at the bottom of the guides section */
.guides-coming-teaser {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.guides-coming-teaser strong {
  color: var(--color-accent);
  font-weight: 600;
}



/* ==========================================================================
   HIKE CAROUSEL
   ========================================================================== */

.hike-carousel {
  margin-top: var(--space-lg);
}

/* ── Controls bar: counter left, arrows right ── */
.hike-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.hike-carousel__counter {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  margin: 0;
}

.hike-carousel__pos {
  font-weight: 700;
  color: var(--color-accent);
}

.hike-carousel__btns {
  display: flex;
  gap: 0.4rem;
}

.hike-carousel__btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.hike-carousel__btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
}

/* ── Viewport: clips overflow ── */
.hike-carousel__viewport {
  overflow: hidden;
}

/* ── Track: flex row of all slides including clones ── */
.hike-carousel__track {
  display: flex;
  gap: 20px;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
}

/* ── Each card: fixed width, never shrinks ── */
.hike-carousel__card {
  flex: 0 0 420px;
  min-width: 0;
}

/* ── Dots ── */
.hike-carousel__dots {
  display: flex;
  gap: 6px;
  margin-top: var(--space-md);
  justify-content: center;
}

.hike-carousel__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.hike-carousel__dot.is-active {
  background: var(--color-accent);
  transform: scale(1.3);
}

/* Responsive */
@media (max-width: 1024px) {
  .hike-carousel__card { flex: 0 0 340px; }
}

@media (max-width: 768px) {
  .hike-carousel__card { flex: 0 0 280px; }
  .hike-carousel__track { gap: 14px; }
}

.guide-category {
  margin-bottom: var(--space-2xl);
}

.guide-category:last-child {
  margin-bottom: 0;
}

.guide-category--second {
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--color-border);
}

.guide-category__hd {
  margin-bottom: var(--space-lg);
}

.guide-category__kicker {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

.guide-category__title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.guide-category__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: 56ch;
  margin: 0;
}


/* ==========================================================================
   GUIDE CARDS
   ========================================================================== */

/* ── Featured full-bleed card ── */
.guide-card--featured {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: var(--space-lg);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}

.guide-card--featured:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28);
}

.guide-card--featured .guide-card__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.55s ease;
}

.guide-card--featured:hover .guide-card__img {
  transform: scale(1.03);
}

.guide-card--featured .guide-card__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 15%,
    rgba(8, 6, 4, 0.45) 50%,
    rgba(8, 6, 4, 0.80) 100%
  );
  z-index: 1;
}

.guide-card--featured .guide-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2.5rem 3rem;
  z-index: 2;
}

/* ── Minor (vertical) card ── */
.guide-card--minor {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease;
  will-change: transform;
  display: flex;
  flex-direction: column;
}

.guide-card--minor:hover {
  box-shadow: 0 6px 28px rgba(30, 27, 24, 0.12);
  transform: translateY(-3px);
}

/* Image placeholder */
.guide-card__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #8aaeae 0%, #5a7e7e 100%);
  flex-shrink: 0;
}

.guide-card__img--sm {
  aspect-ratio: 16 / 9;
}

/* Body */
.guide-card__body {
  padding: var(--space-md);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.guide-card__region {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0.5rem;
}

.guide-card__title {
  font-family: var(--font-serif);
  font-size: clamp(1.875rem, 3.125vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-bottom: 0.75rem;
}

.guide-card__excerpt {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.6;
  margin-bottom: 1.25rem;
  max-width: 600px;
}

/* Chips (tags) */
.guide-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.guide-card__chip {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 5px 14px;
  border-radius: 20px;
}

.guide-card__chip--live {
  color: #ffffff;
  background: var(--color-accent);
  border-color: transparent;
}

/* Coming-soon badge */
.guide-card__badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 0.25rem 0.75rem;
  margin-top: auto;
  align-self: flex-start;
}

/* CTA link */
.guide-card__cta {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--color-accent);
  padding: 0.65rem 1.5rem;
  border-radius: 3px;
  transition: background 0.2s ease;
}

.guide-card--featured:hover .guide-card__cta {
  background: var(--color-accent-dark);
}

/* Guide grids */
.guide-grid {
  display: grid;
  gap: var(--space-md);
}

.guide-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.guide-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}


/* ==========================================================================
   CLIMATE WIDGET (Chart.js tabs)
   ========================================================================== */

/* Climate header */
.climate-hd {
  margin-bottom: var(--space-lg);
}

.climate-hd h2 {
  margin-bottom: 0.35rem;
}

.climate-hd__sub {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 480px;
  line-height: 1.6;
}

/* ── Custom bar chart ── */
.ccn-chart {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0;
}

/* Chart header: tabs + toggle in one row */
.ccn-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
  border-radius: 10px 10px 0 0;
  padding-right: 1.25rem;
  background: var(--color-surface);
}

.ccn-header__tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}

.ccn-header__tabs::-webkit-scrollbar { display: none; }

/* Legend sub-bar below the header */
.ccn-subbar {
  display: flex;
  align-items: center;
  padding: 1.5rem 1.5rem 0.75rem;
}

.ccn-legend {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.ccn-leg {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
}

.ccn-leg::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.ccn-leg--best::before  { background: var(--color-accent); }
.ccn-leg--good::before  { background: #7ab87a; }
.ccn-leg--mixed::before { background: var(--color-gold); }
.ccn-leg--poor::before  { background: #c4625a; }

/* C/F toggle — lives inside the chart now */
/* C/F segmented control */
.temp-toggle {
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--color-bone);
  border: 1px solid var(--color-border);
  border-radius: 7px;
  padding: 3px;
  cursor: pointer;
  flex-shrink: 0;
}

.temp-toggle__opt {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}

.temp-toggle__opt.is-active {
  background: var(--color-surface);
  color: var(--color-accent);
  box-shadow: 0 1px 3px rgba(30,27,24,0.1);
}

/* Bars row */
.ccn-bars {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  overflow-x: auto;
  padding: 0.5rem 1.5rem 0.875rem;
  scrollbar-width: none;
}

.ccn-bars::-webkit-scrollbar { display: none; }

.ccn-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 40px;
}

.ccn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  margin-bottom: 5px;
  flex-shrink: 0;
}

.ccn-icon--best  { color: var(--color-accent); }
.ccn-icon--good  { color: #7ab87a; }
.ccn-icon--mixed { color: var(--color-gold); }
.ccn-icon--poor  { color: #c4625a; }

.ccn-track {
  position: relative;
  width: 100%;
  height: 130px;
  display: flex;
  align-items: flex-end;
}

.ccn-bar {
  width: 100%;
  border-radius: 5px 5px 0 0;
  transition: height 0.35s ease;
}

.ccn-bar--best  { background: var(--color-accent); }
.ccn-bar--good  { background: #7ab87a; }
.ccn-bar--mixed { background: var(--color-gold); }
.ccn-bar--poor  { background: #c4625a; }

.ccn-temp-lbl {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
  pointer-events: none;
}

.ccn-month-lbl {
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-align: center;
}

.climate-widget {
  margin-bottom: var(--space-lg);
}

/* ── Climate scrubber (option 4) ── */
.csl-wrap {
  padding: 1.5rem 1.25rem 0;
  -webkit-user-select: none;
  user-select: none;
}

.csl-track-wrap {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
}

.csl-segments {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  gap: 2px;
  pointer-events: none;
}

.csl-seg {
  flex: 1;
  opacity: 0.35;
  transition: opacity 0.2s ease;
}

.csl-seg.is-active {
  opacity: 1;
}

.csl-seg--best  { background: #2F4A3A; }
.csl-seg--good  { background: #7ab87a; }
.csl-seg--mixed { background: #C9973A; }
.csl-seg--poor  { background: #c4625a; }

.csl-range {
  position: absolute;
  left: 0;
  width: 100%;
  appearance: none;
  background: transparent;
  cursor: pointer;
  margin: 0;
  padding: 0;
  height: 44px;
  z-index: 1;
}

.csl-range::-webkit-slider-runnable-track {
  background: transparent;
  height: 44px;
}

.csl-range::-moz-range-track {
  background: transparent;
  height: 28px;
}

.csl-range::-webkit-slider-thumb {
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0,0,0,0.1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  cursor: grab;
  transition: transform 0.15s ease;
  margin-top: -9px;
}

.csl-range::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.12);
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}

.csl-range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0,0,0,0.1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  cursor: grab;
}

.csl-range:focus-visible { outline: none; }

.csl-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(47,74,58,0.22), 0 2px 8px rgba(0,0,0,0.18);
}

.csl-labels {
  display: flex;
  padding: 0.5rem 0 1rem;
}

.csl-label {
  flex: 1;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  transition: color 0.15s ease, font-weight 0.1s ease;
}

.csl-label.is-active {
  color: var(--color-text);
  font-weight: 700;
}

.csl-panel {
  margin: 0 1.25rem 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  border-top: 3px solid transparent;
  background: var(--color-surface-raised);
  transition: border-color 0.25s ease;
}

.csl-panel--best  { border-top-color: #2F4A3A; }
.csl-panel--good  { border-top-color: #7ab87a; }
.csl-panel--mixed { border-top-color: #C9973A; }
.csl-panel--poor  { border-top-color: #c4625a; }

.csl-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.csl-panel__meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.csl-panel__month {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.csl-panel__badge {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
}

.csl-panel__badge--best  { background: #e8f2ed; color: #2F4A3A; }
.csl-panel__badge--good  { background: #eaf5ea; color: #3d7a3d; }
.csl-panel__badge--mixed { background: #fff8e8; color: #8a6200; }
.csl-panel__badge--poor  { background: #fdf0ef; color: #b03a2e; }

.csl-panel__temp {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: -0.02em;
}

.csl-panel__verdict {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* ── Month strip ── */
.ms-strip {
  display: flex;
  gap: 2px;
  padding: 6px 6px 0;
}

.ms-seg {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.2rem 0.4rem;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  height: 68px;
  position: relative;
  transition: transform 0.15s ease;
}

.ms-seg--best  { background: #2F4A3A; --seg-color: #2F4A3A; }
.ms-seg--good  { background: #7ab87a; --seg-color: #7ab87a; }
.ms-seg--mixed { background: #C9973A; --seg-color: #C9973A; }
.ms-seg--poor  { background: #c4625a; --seg-color: #c4625a; }

.ms-seg:hover,
.ms-seg.is-active {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  z-index: 1;
}

.ms-seg.is-active::after {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid var(--seg-color);
}

.ms-seg__temp {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 600;
  line-height: 1;
}

.ms-seg__mon {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
}

.ms-seg--best .ms-seg__temp,
.ms-seg--best .ms-seg__mon,
.ms-seg--poor .ms-seg__temp,
.ms-seg--poor .ms-seg__mon  { color: rgba(255,255,255,0.88); }

.ms-seg--good .ms-seg__temp,
.ms-seg--good .ms-seg__mon,
.ms-seg--mixed .ms-seg__temp,
.ms-seg--mixed .ms-seg__mon { color: rgba(30,27,24,0.8); }

/* ── Month detail panel ── */
.ms-panel {
  margin: 14px 6px 6px;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  border-left: 3px solid transparent;
  background: var(--color-surface-raised);
  transition: border-color 0.2s ease;
}

.ms-panel--best  { border-left-color: #2F4A3A; }
.ms-panel--good  { border-left-color: #7ab87a; }
.ms-panel--mixed { border-left-color: #C9973A; }
.ms-panel--poor  { border-left-color: #c4625a; }

.ms-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.ms-panel__left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.ms-panel__month {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.ms-panel__quality {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.18rem 0.55rem;
  border-radius: 4px;
}

.ms-panel__quality--best  { background: #e8f2ed; color: #2F4A3A; }
.ms-panel__quality--good  { background: #eaf5ea; color: #3d7a3d; }
.ms-panel__quality--mixed { background: #fff8e8; color: #8a6200; }
.ms-panel__quality--poor  { background: #fdf0ef; color: #b03a2e; }

.ms-panel__temp {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-muted);
}

.ms-panel__verdict {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

.climate-tab {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.9rem 1.2rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}

.climate-tab:hover {
  color: var(--color-text);
}

.climate-tab.is-active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  font-weight: 600;
}

/* Mobile region custom picker — hidden on desktop */
.ccn-region-picker {
  display: none;
}

/* Scroll hint — hidden on desktop */
.ccn-scroll-hint {
  display: none;
}

@media (max-width: 768px) {
  /* Hide tab row, show custom picker */
  .ccn-header__tabs {
    display: none;
  }

  .ccn-region-picker {
    display: block;
    position: relative;
    flex: 1;
    min-width: 0;
  }

  .ccn-region-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-accent);
    background: none;
    border: none;
    border-bottom: 2px solid var(--color-accent);
    border-radius: 0;
    padding: 0.9rem 1.2rem;
    margin-bottom: -1px;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    outline: none;
    transition: color 0.15s;
  }

  .ccn-region-trigger:focus-visible {
    color: var(--color-accent-dark);
  }

  .ccn-region-chevron {
    flex-shrink: 0;
    opacity: 0.8;
    transition: transform 0.2s ease;
  }

  .ccn-region-trigger[aria-expanded="true"] {
    color: var(--color-accent-dark);
  }

  .ccn-region-trigger[aria-expanded="true"] .ccn-region-chevron {
    transform: rotate(180deg);
  }

  .ccn-region-listbox {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 1rem;
    z-index: 200;
    list-style: none;
    margin: 0;
    padding: 0.35rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    min-width: 200px;
  }

  .ccn-region-listbox.is-open {
    display: block;
  }

  .ccn-region-option {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text);
    padding: 0.55rem 0.85rem;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.12s ease;
    user-select: none;
    -webkit-user-select: none;
  }

  .ccn-region-option:hover {
    background: var(--color-accent-tint);
  }

  .ccn-region-option.is-selected {
    background: var(--color-accent-tint);
    color: var(--color-accent);
    font-weight: 600;
  }

  .ccn-scroll-hint {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    text-align: center;
    padding: 0.4rem 1rem 0.75rem;
  }
}



/* ==========================================================================
   LIVE WEATHER STRIP (country page — 3 cities)
   ========================================================================== */

.country-wx {
  background: var(--color-bg);
}

.city-wx-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.city-wx-card {
  background: #0d1f14;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  overflow: hidden;
}

.city-wx-card__hd {
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding: 0.75rem 1.1rem;
}

.city-wx-card__city {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.city-wx-card__region {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 0.2rem;
}

.city-wx-card__body {
  padding: 1.25rem 1.1rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.city-wx-card__temp {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 500;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.04em;
  flex-shrink: 0;
}

.city-wx-card__detail {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.city-wx-card__cond {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.3;
}

.city-wx-card__hl {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.03em;
}

.country-wx__note {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-sm);
}

.country-climate {
  padding-top: 3.5rem;
}

@media (max-width: 768px) {
  .country-climate {
    padding: 2.5rem 0;
  }
}


/* ==========================================================================
   RESPONSIVE — COUNTRY PAGES
   ========================================================================== */

@media (max-width: 1024px) {
  .country-hero { height: 100vh; height: 100svh; }

  .country-hero__title { font-size: 4.25rem; }

  .country-intro__grid {
    grid-template-columns: 1fr 260px;
    gap: var(--space-lg);
  }

  .guide-card--featured {
    grid-template-columns: 300px 1fr;
  }

  .guide-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .city-wx-strip {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
  }
}

@media (max-width: 768px) {
  .country-hero {
    height: 100vh;
    height: 100svh;
    min-height: 500px;
  }

  .country-hero__title {
    font-size: 4.5rem;
  }

  .country-hero__tagline {
    line-height: 1.55;
    margin-bottom: 1.5rem;
  }

  .country-hero__fact {
    padding: 0 1.1rem;
  }

  .country-hero__fact-sep {
    height: 1.5rem;
  }

  .country-hero__content {
    padding-bottom: 10vh;
  }

  .country-intro__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .country-facts-card {
    position: static;
  }

  .guide-card--featured {
    aspect-ratio: unset;
  }

  /* The base .guide-card__img rule sets width:100% + aspect-ratio:16/10.
     On Safari, this overrides inset:0 and makes the img element shorter than
     the 2/3 card, cropping the background image incorrectly. Reset here. */
  .guide-card--featured .guide-card__img {
    width: auto;
    aspect-ratio: auto;
    background-position: center center;
    background-size: cover;
  }

  /* Match Popular Guides gradient exactly */
  .guide-card--featured .guide-card__gradient {
    background: linear-gradient(
      to bottom,
      transparent 20%,
      rgba(6, 4, 2, 0.42) 52%,
      rgba(6, 4, 2, 0.96) 100%
    );
  }

  /* Match Popular Guides content padding on mobile */
  .guide-card--featured .guide-card__content {
    padding: 1.25rem 1.35rem 1.5rem;
  }

  .guide-card--featured .guide-card__region {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 0.3rem;
  }

  /* Match Popular Guides title size */
  .guide-card--featured .guide-card__title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
  }

  .guide-card--featured .guide-card__excerpt {
    display: none;
  }

  .guide-card--featured .guide-card__chips {
    gap: 0.35rem;
    margin-bottom: 0;
  }

  /* Match Popular Guides chip/stat pill size */
  .guide-card--featured .guide-card__chip {
    font-size: 0.8rem;
    padding: 5px 13px;
  }

  .guide-card--featured .guide-card__cta {
    display: none;
  }

  .guide-grid--3,
  .guide-grid--4 {
    grid-template-columns: 1fr;
  }

  .climate-chart-wrap {
    height: 220px;
  }

  .city-wx-strip {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .city-wx-card__body {
    padding: 1rem;
  }

  .city-wx-card__temp {
    font-size: 2.5rem;
  }
}

/* ==========================================================================
   HIKE CARDS — redesigned (country pages)
   ========================================================================== */

/* Section wrapper */
.hike-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

/* Section heading — Peru Hiking Guides */
.guide-section-hd {
  margin-bottom: 2.5rem;
}

.guide-section-hd--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.guide-section-hd__title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: 0.6rem;
}

.guide-section-hd__sub {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* Individual category header */
.hike-section__hd {
  padding: 2rem 0 0.6rem;
}

.hike-section__label {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.hike-section__meta {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--color-accent-tint);
  border: 1px solid rgba(47, 74, 58, 0.2);
  border-radius: var(--radius-full);
  padding: 0.25rem 0.75rem;
}

.hike-section--pending .hike-section__label {
  opacity: 0.55;
}

/* Card grid */
.hike-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

/* ── The card itself ── */
.hike-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 2 / 3;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}

.hike-card:not(.hike-card--not-visited):hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.32);
}

/* Full-bleed photo */
.hike-card__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.55s ease;
}

.hike-card:not(.hike-card--not-visited):hover .hike-card__img {
  transform: scale(1.04);
}

/* Gradient — top stays vivid, strong at bottom for readability */
.hike-card__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 25%,
    rgba(8, 6, 4, 0.5) 55%,
    rgba(8, 6, 4, 0.92) 100%
  );
  z-index: 1;
}

/* Status pill — top left */
.hike-card__status-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 11px;
  border-radius: 20px;
}

.hike-card__status-pill--pending {
  background: var(--color-accent);
  color: #ffffff;
}

.hike-card--coming-soon .hike-card__status-pill {
  background: rgba(0, 0, 0, 0.82);
}

.hike-card__status-pill--featured {
  background: var(--color-accent);
  color: #ffffff;
}

/* Content overlay at bottom */
.hike-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 1.5rem 1.75rem;
  z-index: 2;
}

.hike-card__region {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 0.3rem;
}

.hike-card__name {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.hike-card__teaser {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.5;
  margin: 0 0 0.65rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hike-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.hike-card__stat {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 4px 12px;
  border-radius: 20px;
}

/* Rank watermark — shown in popular guides section */
.hike-card__rank {
  position: absolute;
  top: 0.75rem;
  right: 0.875rem;
  z-index: 3;
  font-family: var(--font-sans);
  font-size: 2.75rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.2);
  line-height: 1;
  letter-spacing: -0.04em;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Dark rank on light-background cards (e.g. Most Popular section) */
.hp-pop-grid .hike-card__rank {
  color: rgba(30, 27, 24, 0.18);
}

/* ── Not yet visited (user hasn't done the hike) ── */
.hike-card--not-visited {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* ── Coming soon: visible but non-interactive ── */
.hike-card--upcoming {
  cursor: default;
  pointer-events: none;
}


/* ── On my radar: white overlay instead of opacity so card doesn't bleed into background ── */
.hike-card--radar {
  cursor: default;
  pointer-events: none;
}
.hike-card--radar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.4);
  z-index: 4;
  border-radius: inherit;
}

/* ── Placeholder cards (grid gap-fillers, hidden on mobile) ── */
.hike-card--placeholder {
  background: #d0cec9;
  border: none;
  border-radius: var(--radius-md);
  aspect-ratio: 2 / 3;
  pointer-events: none;
  cursor: default;
}
@media (max-width: 768px) {
  .hike-card--placeholder {
    display: none;
  }
}

/* ── Homepage context overrides ── */
/* Popular grid: 3 wide columns — keep standard 2/3 ratio, looks bold */
.hp-pop-grid .hike-card {
  aspect-ratio: 2 / 3;
}

/* ── Pop grid: scoped card refinements ── */

/* Stronger directional gradient — keeps image vivid up top, readable at bottom */
.hp-pop-grid .hike-card__gradient {
  background: linear-gradient(
    to bottom,
    transparent 20%,
    rgba(6, 4, 2, 0.42) 52%,
    rgba(6, 4, 2, 0.96) 100%
  );
}

.hp-pop-grid .hike-card:hover .hike-card__gradient {
  background: linear-gradient(
    to bottom,
    transparent 20%,
    rgba(6, 4, 2, 0.52) 52%,
    rgba(6, 4, 2, 0.99) 100%
  );
}

/* Featured badge */
.hp-pop-grid .hike-card__status-pill--featured {
  font-size: 0.58rem;
  padding: 3px 9px;
  letter-spacing: 0.1em;
  background: var(--color-accent);
  border-radius: 20px;
}

/* Content area */
.hp-pop-grid .hike-card__content {
  padding: 1.25rem 1.35rem 1.5rem;
}

/* Eyebrow */
.hp-pop-grid .hike-card__region {
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 0.22rem;
}

/* Title */
.hp-pop-grid .hike-card__name {
  font-size: var(--text-card-title);
  line-height: 1.18;
  margin-bottom: 0.5rem;
}

/* Pills */
.hp-pop-grid .hike-card__stats {
  gap: 0.28rem;
  margin-bottom: 0.7rem;
}

.hp-pop-grid .hike-card__stat {
  font-size: 0.7rem;
  padding: 4px 11px;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
}

/* Read guide cue */
.hp-pop-grid .hike-card__read-cue {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  position: relative;
  padding-bottom: 0.15rem;
  transition: color 0.22s ease;
}

.hp-pop-grid .hike-card__read-cue::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.65);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.hp-pop-grid .hike-card__read-arrow {
  display: inline-block;
  transition: transform 0.22s ease;
}

.hp-pop-grid .hike-card:hover .hike-card__read-cue {
  color: rgba(255, 255, 255, 0.92);
}

.hp-pop-grid .hike-card:hover .hike-card__read-cue::after {
  transform: scaleX(1);
}

.hp-pop-grid .hike-card:hover .hike-card__read-arrow {
  transform: translateX(4px);
}

/* Responsive: narrow viewports */
@media (max-width: 1024px) {
  .hp-pop-grid .hike-card__name {
    font-size: 1.375rem;
  }
}

@media (max-width: 768px) {
  .hp-pop-grid .hike-card__stat--secondary {
    display: none;
  }

  .hp-pop-grid .hike-card__content {
    padding: 1rem 1.1rem 1.25rem;
  }

  /* 1. Card title */
  .hp-pop-grid .hike-card__name {
    font-size: 1.75rem;
  }

  /* 2. "Featured Guide" badge */
  .hp-pop-grid .hike-card__status-pill--featured {
    font-size: 0.74rem;
    padding: 5px 14px;
  }

  /* 3. Stat pills + "Read guide" cue */
  .hp-pop-grid .hike-card__stat {
    font-size: 0.8rem;
    padding: 5px 13px;
  }

  .hp-pop-grid .hike-card__read-cue {
    font-size: 0.92rem;
  }

  /* 4. Rank number (01, 02…) */
  .hp-pop-grid .hike-card__rank {
    font-size: 2.9rem;
  }
}

/* (hp-latest-grid hike-card override removed — section redesigned) */

/* ==========================================================================
   RECOMMENDATIONS / MORE FROM PERU SECTION
   ========================================================================== */

.recs-section {
  padding: 5rem 0;
  background: var(--color-bg);
}

.recs-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pad-tight);
}

.recs-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr;
  gap: 1.25rem;
  align-items: stretch;
}

/* Override aspect-ratio so all cards share the grid height */
.recs-grid .hike-card {
  aspect-ratio: unset;
  min-height: 320px;
}

/* ── Featured Peru hub card ── */
.rec-featured {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  position: relative;
  min-height: 320px;
  background-color: var(--color-accent);
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  transition: transform 0.3s cubic-bezier(0.2,0.7,0.2,1);
  will-change: transform;
}

.rec-featured:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(26,35,25,0.28);
}

/* Dark gradient overlay so text stays readable over the photo */
.rec-featured__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(20,38,28,0.9) 0%, rgba(20,38,28,0.68) 55%, rgba(20,38,28,0.45) 100%),
    radial-gradient(ellipse at 110% -15%, rgba(201,151,58,0.18) 0%, transparent 55%);
  pointer-events: none;
}

.rec-featured__body {
  position: relative;
  z-index: 1;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.rec-featured__kicker {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 0.65rem;
}

.rec-featured__title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.rec-featured__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.68);
  line-height: 1.7;
  margin-bottom: 1.25rem;
  max-width: 38ch;
}

.rec-featured__topics {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex: 1;
  align-content: flex-start;
}

.rec-featured__topics li {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 500;
  color: rgba(255,255,255,0.78);
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.16);
  padding: 4px 12px;
  border-radius: var(--radius-full);
}

.rec-featured__cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.3rem;
  margin-top: 1.5rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gold);
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
  position: relative;
}

.rec-featured__cta::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.rec-featured:hover .rec-featured__cta {
  color: #e8b84a;
}

.rec-featured:hover .rec-featured__cta::after {
  transform: scaleX(1);
  background: #e8b84a;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .recs-grid {
    grid-template-columns: 1fr 1fr;
  }
  .rec-featured {
    grid-column: 1 / -1;
    min-height: 260px;
  }
  .recs-grid .hike-card {
    min-height: 280px;
  }
}

@media (max-width: 768px) {
  .recs-section { padding: 2.5rem 0; }
  .recs-section .guide-section-hd { margin-bottom: 1.5rem; }
  .recs-grid {
    grid-template-columns: 1fr;
  }
  .rec-featured { min-height: 300px; }
  .recs-grid .hike-card { min-height: 260px; }
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .hike-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 768px) {
  .guide-section-hd {
    margin-bottom: 1.75rem;
  }

  /* ── Country page: all destination/hike cards uniform height ──
     Add any new country-page card type to this selector. */
  .guide-card--featured,
  .hike-cards-grid .hike-card {
    min-height: 320px;
  }

  .hike-sections {
    gap: var(--space-lg);
  }

  .hike-cards-grid {
    grid-template-columns: 1fr;
  }

  .hike-cards-grid .hike-card {
    aspect-ratio: unset;
  }

  /* Match Popular Guides card styling on mobile */
  .hike-cards-grid .hike-card__content {
    padding: 1rem 1.1rem 1.25rem;
  }

  .hike-cards-grid .hike-card__name {
    font-size: 1.75rem;
  }

  .hike-cards-grid .hike-card__stat {
    font-size: 0.8rem;
    padding: 5px 13px;
  }

  .hike-cards-grid .hike-card__status-pill,
  .hp-latest__layout .hike-card__status-pill {
    font-size: 0.74rem;
    padding: 5px 14px;
  }

}

/* ==========================================================================
   ROUTE PLANNER (interactive city-to-city)
   ========================================================================== */

/* ==========================================================================
   PAGE NAV (sticky in-page jump links)
   ========================================================================== */

.page-nav {
  position: sticky;
  top: 76px;
  z-index: 90;
  max-width: 1200px;
  margin: 2rem auto 0;
  padding: 0 var(--pad-tight);
  transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.has-country-hero .page-nav {
  max-width: 1300px;
  padding: 0 var(--pad-page);
}

.page-nav__inner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: #ffffff;
  border-radius: 50px;
  box-shadow: 0 2px 16px rgba(30, 27, 24, 0.10);
  padding: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-nav__inner::-webkit-scrollbar { display: none; }

.page-nav__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  white-space: nowrap;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.page-nav__item:hover {
  background: var(--color-accent-tint);
  color: var(--color-accent);
}

.page-nav__item.is-active {
  background: var(--color-accent);
  color: #ffffff;
  font-weight: 600;
}

@media (max-width: 768px) {
  .page-nav__item {
    padding: 0.45rem 0.75rem;
    font-size: 0.75rem;
    flex: 0 0 auto;
  }
}

/* ==========================================================================
   MOBILE PAGE NAV (country pages, max-width 767px)
   Replaces the horizontal pill bar with a sticky dropdown on mobile.
   Desktop and tablet (768px+) are completely unaffected.
   ========================================================================== */

@media (max-width: 767px) {
  .page-nav { display: none; }
}

@media (min-width: 768px) {
  .page-nav-mobile { display: none; }
}

.page-nav-mobile {
  position: sticky;
  top: 0;
  z-index: 90;
  padding: 10px var(--pad-page) 0;
  transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.pnm-pill {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  padding: 13px 18px;
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
  transition: none;
}


.pnm-pill__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pnm-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

.pnm-pill.is-open .pnm-pill__dot {
  display: none;
}

.pnm-pill__viewing {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg4);
  white-space: nowrap;
  flex-shrink: 0;
}

.pnm-pill.is-open .pnm-pill__viewing {
  display: none;
}

.pnm-pill__jump-to {
  display: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg4);
  white-space: nowrap;
  flex-shrink: 0;
}

.pnm-pill.is-open .pnm-pill__jump-to {
  display: block;
}

.pnm-pill__divider {
  width: 1px;
  height: 14px;
  background: var(--color-border);
  flex-shrink: 0;
}

.pnm-pill__current {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pnm-pill__chevron {
  color: var(--color-accent);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.pnm-pill.is-open .pnm-pill__chevron {
  transform: rotate(180deg);
}

.pnm-panel {
  display: none;
  position: absolute;
  left: var(--pad-page);
  right: var(--pad-page);
  top: 100%;
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
  margin-top: 6px;
}

.pnm-panel.is-open {
  display: block;
}

.pnm-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text);
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}

.pnm-item__icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.pnm-item.is-active {
  background: rgba(47, 74, 58, 0.07); /* --color-accent at 7% opacity */
  color: var(--color-accent);
  font-weight: 500;
}

.pnm-item.is-active .pnm-item__icon {
  color: var(--color-accent);
}

@media (max-width: 767px) {
  #guides, #destinations, #when-to-go, #visa, #getting-around, #in-cities, #food,
  #itinerary-panel, #difficulty, #cost, #planning, #packing, #weather, #faqs {
    scroll-margin-top: 80px;
  }

  #guides.country-guides--destinations {
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
  }

  .article-layout {
    padding-top: 1rem;
  }
}

.route-planner {
  background: var(--color-bg);
  padding: var(--space-xl) 0 var(--space-lg);
}

/* Header */
.route-planner__hd {
  text-align: center;
  margin-bottom: var(--space-md);
}

.route-planner__kicker {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-accent);
  margin-bottom: 0.6rem;
}

.route-planner__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.route-planner__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--space-lg);
  box-shadow: 0 2px 16px rgba(30, 27, 24, 0.06);
}

/* ── City selector ── */
.route-selector {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
}

.route-selector__panel {
  padding: 1.1rem 1.4rem 1.25rem;
}

.route-selector__panel-hd {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
}

.route-selector__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.route-selector__dot--from { background: var(--color-accent); }
.route-selector__dot--to   { background: var(--color-gold); }

.route-selector__panel-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
}

.route-selector__divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  padding: 0 1.25rem;
}

.route-swap-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.35s;
  flex-shrink: 0;
}

.route-swap-btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  transform: rotate(180deg);
}

.route-reset-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: color 0.18s;
}

.route-reset-btn:hover {
  color: var(--color-text);
}

.route-reset-btn.is-inactive {
  color: var(--color-border);
  pointer-events: none;
  cursor: default;
}

/* City pill grid */
.city-pill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

.city-pill {
  padding: 0.55rem 0.7rem;
  border-radius: 7px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  text-align: left;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
  line-height: 1.3;
  min-height: 44px; /* tap target */
}

.city-pill:hover:not(.is-disabled) {
  background: var(--color-bone);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.city-pill.is-sel-from {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.city-pill.is-sel-to {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #fff;
}

.city-pill.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}

.city-pill--full {
  grid-column: 1 / -1;
}

.city-pill__name {
  display: block;
  font-weight: 500;
}

.city-pill__sub {
  display: block;
  font-size: 0.75rem;
  opacity: 0.65;
  margin-top: 1px;
}

/* ── Results panel ── */
.rp-results {
  background: var(--color-bone);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  min-height: 160px;
}

/* Prompt (before selection) */
.rp-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.75rem 1.5rem;
  text-align: center;
  min-height: 160px;
}

.rp-prompt p {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  opacity: 0.6;
}

/* Content area */
.rp-content {
  padding: 1.1rem 1.4rem 1.25rem;
}

@keyframes rpFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rp-animate {
  animation: rpFadeUp 0.28s ease forwards;
}

/* Route header */
.rp-content__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--color-border);
}

.rp-city {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}

.rp-city--from { color: var(--color-accent); }
.rp-city--to   { color: var(--color-gold); }

.rp-arrow {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* Body wrapper */
.rp-content__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Single option: lock card to 50% width so it matches a two-option layout */
.rp-content__body--split .rp-content__cards {
  grid-template-columns: repeat(2, 1fr);
}

/* Transport option cards */
.rp-content__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0;
}

.rp-option {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Top accent bar per mode */
.rp-option__bar {
  height: 3px;
  flex-shrink: 0;
}

.rp-option--plane .rp-option__bar { background: #4a90d0; }
.rp-option--bus   .rp-option__bar { background: var(--color-gold); }
.rp-option--via   .rp-option__bar { background: var(--color-border); }

.rp-option__body {
  padding: 0.85rem 1rem 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

.rp-option__mode-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}

.rp-option__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rp-option--plane .rp-option__icon { background: rgba(74, 144, 208, 0.12); color: #4a90d0; }
.rp-option--bus   .rp-option__icon { background: rgba(192, 144, 32, 0.12); color: var(--color-gold); }
.rp-option--via   .rp-option__icon { background: var(--color-bone); color: var(--color-text-muted); }

.rp-option__mode-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.rp-option__time {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.1;
  margin-bottom: 0.35rem;
}

.rp-option__price {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-bone);
  padding: 3px 11px;
  border-radius: 20px;
  margin-bottom: 0.55rem;
}

.rp-option__note {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  color: var(--color-gold);
  margin-bottom: 0.5rem;
  line-height: 1.45;
}

/* Airport transfer note — sits in the lower section between detail and badge */
.rp-option__airport-note {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

.rp-option__detail {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.rp-option__badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: 20px;
}

.rp-option__badge--quickest { background: rgba(74, 144, 208, 0.12); border: 1px solid rgba(74, 144, 208, 0.25); color: #4a90d0; }
.rp-option__badge--budget   { background: rgba(192, 144, 32, 0.10); border: 1px solid rgba(192, 144, 32, 0.25); color: var(--color-gold); }
.rp-option__badge--only     { background: var(--color-bone); border: 1px solid var(--color-border); color: var(--color-text-muted); }

/* Lower section — divider between stats and operators/detail */
.rp-option__lower {
  width: 100%;
  border-top: 1px solid var(--color-border);
  padding-top: 0.65rem;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.rp-option__operators-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin: 0;
}

.rp-option__operators {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 0.35rem;
}

/* Via route leg rows */
.rp-option__legs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.rp-option__leg {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.rp-option__leg-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.rp-option__leg-route {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  flex: 1;
}

.rp-option__leg-dur {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.rp-option__leg-then {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  flex-shrink: 0;
}


/* Recommendation */
.rp-content__rec {
  background: var(--color-accent-tint);
  border: 1px solid rgba(47, 74, 58, 0.2);
  border-left: 3px solid var(--color-accent);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
}
.rp-content__rec--warn {
  background: rgba(192, 144, 32, 0.1);
  border: 1px solid rgba(192, 144, 32, 0.25);
  border-left: 3px solid var(--color-gold);
}

.rp-rec__label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 0.3rem;
}
.rp-content__rec--warn .rp-rec__label {
  color: var(--color-gold);
}

.rp-rec__text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.6;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .route-selector {
    grid-template-columns: 1fr;
  }

  .route-selector__divider {
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 1rem 1.75rem;
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .route-planner {
    padding-top: 2.5rem;
  }

  .route-planner__hd h2 {
    font-size: var(--text-xl);
  }

  .route-planner__body {
    padding: 1.25rem 0.75rem;
  }

  .route-selector__divider {
    padding: 0.75rem 1rem;
  }

  .rp-content {
    padding: 0.9rem 0.75rem 1rem;
  }

  .rp-city {
    font-size: var(--text-xl);
  }

  .route-selector__panel {
    padding: 0.9rem 0.75rem 1rem;
  }

  /* Single-option routes: always full-width on mobile */
  .rp-content__body--split .rp-content__cards {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   LOCAL TRANSPORT (in-city getting around)
   ========================================================================== */

.local-transport {
  background: var(--color-bg);
  padding: var(--space-lg) 0 var(--space-lg);
  position: relative;
  overflow: hidden;
}

.lt-bg-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.35;
  z-index: 0;
  mask-image: linear-gradient(to bottom, transparent 0%, black 60%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 60%);
  display: none;
}

.local-transport .container {
  position: relative;
  z-index: 1;
}


/* ── Full-width stacked card list ── */
.lt-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

/* ── Split-panel card ── */
.lt-card {
  display: grid;
  grid-template-columns: 320px 1fr;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* ── Identity panel (left, dark) ── */
.lt-card__identity {
  padding: 2rem 1rem 2rem 1.5rem;
  display: flex;
  flex-direction: column;
}

.lt-card--colectivo .lt-card__identity {
  background: var(--color-accent);
}

.lt-card--taxi .lt-card__identity {
  background: #2A2420;
}

.lt-card__identity-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.lt-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}

.lt-card__name {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}

.lt-card__tag {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.52);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.lt-card__cost {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lt-card__cost-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}


.lt-card__cost-num {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.75rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.lt-card__cost-unit {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.52);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.35rem;
}

.lt-card__badge {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 20px;
}

.lt-card__badge--green {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.lt-card__badge--gold {
  background: rgba(201, 151, 58, 0.22);
  color: var(--color-gold);
  border: 1px solid rgba(201, 151, 58, 0.38);
}

/* ── Detail panel (right, white) ── */
.lt-card__detail {
  background: var(--color-surface);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border: 1px solid var(--color-border);
  border-left: none;
  border-radius: 0 16px 16px 0;
}

.lt-card__desc {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text);
  line-height: 1.75;
}

/* ── Use / avoid strip ── */
.lt-use-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.lt-use-strip__sep {
  width: 1px;
  height: 18px;
  background: var(--color-border-strong);
  margin: 0 0.4rem;
  flex-shrink: 0;
}

.lt-use-strip__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  white-space: nowrap;
  margin-right: 0.25rem;
}

.lt-use-strip__label--for   { color: var(--color-accent); }
.lt-use-strip__label--avoid { color: #B03A2E; }

.lt-use-pill {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  padding: 4px 12px;
  border-radius: 20px;
}

.lt-use-pill--for {
  color: var(--color-accent);
  background: var(--color-accent-tint);
  border: 1px solid rgba(47, 74, 58, 0.2);
}

.lt-use-pill--avoid {
  color: #B03A2E;
  background: #fdf0ef;
  border: 1px solid rgba(176, 58, 46, 0.2);
}

/* ── Quick facts row ── */
.lt-card__facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}

.lt-fact__label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}

.lt-fact__value {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}

/* ── Tip callout ── */
.lt-card__tip {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  border-radius: 7px;
  padding: 0.75rem 0.9rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.55;
  background: var(--color-bone);
  color: var(--color-text-muted);
  align-self: flex-start;
}

.lt-card__tip--watch {
  background: #fdf0ef;
  color: #7a2a24;
}

.lt-card__tip--tip {
  background: #fffbf0;
  color: #7a5a10;
}

.lt-card__tip--good {
  background: var(--color-accent-tint);
  color: var(--color-accent);
}

.lt-card__tip--info {
  background: #f0f5ff;
  color: #2a3d7a;
}

.lt-card__tip svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: currentColor;
}

/* ── Comparison table ── */
.lt-compare {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}

.lt-compare__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--color-border);
}

.lt-compare__row:last-child { border-bottom: none; }

.lt-compare__row--hd {
  background: var(--color-bone);
}

.lt-compare__row--hd span {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  padding: 0.7rem 1.1rem;
}

.lt-compare__row--hd span:nth-child(2) { color: var(--color-accent); }
.lt-compare__row--hd span:nth-child(3) { color: var(--color-gold); }

.lt-compare__label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  padding: 0.85rem 1.1rem;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
}

.lt-compare__val {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: 0.85rem 1.1rem;
  border-right: 1px solid var(--color-border);
}

.lt-compare__val:last-child { border-right: none; }

.lt-compare__val--win {
  color: var(--color-text);
  font-weight: 500;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .lt-card {
    grid-template-columns: 260px 1fr;
  }
}

@media (max-width: 768px) {
  .lt-card {
    grid-template-columns: 1fr;
  }

  .lt-card__identity {
    padding: 1.25rem 1.5rem 0.75rem;
  }

  .lt-card--colectivo .lt-card__identity,
  .lt-card--taxi .lt-card__identity {
    padding-bottom: 1.25rem;
  }

  .lt-card__cost-num {
    font-size: 2.25rem;
  }

  .lt-card__detail {
    border-left: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 16px 16px;
    padding: 1.25rem 1rem;
  }

  .lt-card__facts {
    grid-template-columns: repeat(2, 1fr);
  }

  .lt-compare__row {
    grid-template-columns: 1fr 1fr 1fr;
  }
}


/* ==========================================================================
   VISA CHECKER
   ========================================================================== */

.visa-section {
  background: #1A2319;
  padding: 5rem 0;
}

/* Two-column layout */
.visa-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

/* Left: editorial */
.visa-section__kicker {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-gold);
  margin-bottom: 0.75rem;
}

.visa-section__title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: #F0E6CC;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.visa-section__sub {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: rgba(240, 230, 204, 0.55);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.visa-section__cta {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 500;
  color: #F0E6CC;
  line-height: 1.6;
  margin-bottom: 1.75rem;
}

.visa-context {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.visa-context li {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: rgba(240, 230, 204, 0.45);
  padding-left: 1.25rem;
  position: relative;
  line-height: 1.5;
}

.visa-context li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-gold);
  opacity: 0.5;
}

/* Right: widget column */
.visa-layout__right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.visa-widget {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.5rem;
}

.visa-widget__kicker {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

/* Nationality picker */
.nat-picker {
  position: relative;
  width: 100%;
}

.nat-picker__trigger {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color 0.15s ease;
}

.nat-picker__trigger:hover,
.nat-picker__trigger:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(47, 74, 58, 0.1);
  outline: none;
}

.nat-picker__trigger[aria-expanded="true"] {
  border-color: var(--color-accent);
  color: var(--color-text);
}

.nat-picker__trigger-text {
  flex: 1;
}

.nat-picker__trigger-text.has-value {
  color: var(--color-text);
}

.nat-picker__chevron {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
}

.nat-picker__trigger[aria-expanded="true"] .nat-picker__chevron {
  transform: rotate(180deg);
}

.nat-picker__listbox {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: max-content;
  min-width: 200px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 200;
}

.nat-picker__listbox.is-open {
  display: block;
}

.nat-picker__option {
  padding: 0.55rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
  transition: background 0.1s ease;
}

.nat-picker__option:hover {
  background: var(--color-accent-tint);
}

.nat-picker__option.is-selected {
  background: var(--color-accent-tint);
  color: var(--color-accent);
  font-weight: 500;
}

.nat-picker__option.is-focused {
  background: var(--color-bone);
}

/* Result card */
.visa-result {
  margin-top: 1.25rem;
}

.visa-result__card {
  background: var(--color-surface);
  border-radius: 8px;
  overflow: hidden;
}

.visa-result__strip {
  height: 4px;
}

.visa-result__strip--free     { background: var(--color-accent); }
.visa-result__strip--arrival  { background: #C9973A; }
.visa-result__strip--required { background: #b03a2e; }

.visa-result__body {
  padding: 1.25rem;
}

/* Status block */
.visa-result__status-block {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.visa-result__status-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.visa-result__status-title--free     { color: var(--color-accent); }
.visa-result__status-title--arrival  { color: #8a6200; }
.visa-result__status-title--required { color: #b03a2e; }

.visa-result__status-sub {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Facts row */
.visa-result__facts {
  display: flex;
  gap: 2.5rem;
}

.visa-fact {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.visa-fact__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.visa-fact__val {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}

/* Note */
.visa-result__note {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-border);
}

/* Extension callout */
.visa-ext {
  margin-top: 0.75rem;
  background: var(--color-accent-tint);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 4px 4px 0;
  padding: 0.75rem 1rem;
}

.visa-ext__label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 0.3rem;
}

.visa-ext__text {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.65;
}

/* Disclaimer — lives in the left editorial column */
.visa-disclaimer {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: rgba(240, 230, 204, 0.4);
  line-height: 1.65;
  margin-top: 1.5rem;
}

.visa-disclaimer a {
  color: rgba(240, 230, 204, 0.65);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.visa-widget__footer {
  border-top: 1px solid var(--color-border);
  margin-top: 1.25rem;
  padding-top: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.visa-widget__footer-check {
  color: var(--color-accent);
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .visa-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 768px) {
  .visa-section {
    padding: 2.5rem 0;
  }

  .visa-result__top {
    flex-direction: column;
    gap: 0.75rem;
  }

  .visa-result__stay {
    text-align: left;
  }
}


/* ==========================================================================
   AD UNITS
   ========================================================================== */

.ad-unit {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 1rem 0 1.25rem;
  text-align: center;
}

.ad-unit__label {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  opacity: 0.45;
  margin-bottom: 0.5rem;
}


/* ==========================================================================
   FOOD & DRINK — MENU CARD
   ========================================================================== */

.menu-food {
  background: var(--color-bg);
  padding-top: 6.5rem;
}

/* ── Section heading (sits on parchment, outside card) ── */
.menu-food__hd {
  margin-bottom: 2rem;
}

.menu-food__title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.menu-food__intro {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* ── Card container ── */
.menu-card {
  background: var(--color-accent);
  border-radius: 18px;
  padding: 2rem 3rem 3.5rem;
  box-shadow: 0 6px 28px rgba(26, 35, 25, 0.16), 0 2px 6px rgba(26, 35, 25, 0.08);
}

/* ── Card masthead (gold accent, top of card) ── */
.menu-masthead {
  margin-bottom: 2.5rem;
}

.menu-masthead__label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-gold);
  line-height: 1;
}

/* ── Section dividers ── */
.menu-divider--first {
  margin-top: 0;
}

.menu-divider.menu-divider--food {
  margin-top: 3.5rem;
}

.menu-divider {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 2rem 0 1.25rem;
}

.menu-divider::before,
.menu-divider::after {
  content: '';
  flex: 1;
  border-top: 1.5px solid rgba(250, 248, 244, 0.4);
}

.menu-divider__label {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-bg);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}

/* ── Drinks grid ── */
.menu-drinks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

.menu-drink {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.menu-drink__icon {
  flex-shrink: 0;
  color: var(--color-bg);
  opacity: 0.75;
  width: 56px;
  display: flex;
  justify-content: center;
  padding-top: 2px;
}

.menu-drink__name {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-bg);
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.menu-drink__serve {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
  font-style: italic;
  color: rgba(250, 248, 244, 0.5);
  letter-spacing: 0;
  margin-left: 0.4rem;
}

.menu-drink__desc {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: rgba(250, 248, 244, 0.75);
  line-height: 1.65;
}

/* ── Food list ── */
.menu-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  padding: 1.1rem 0;
  border-bottom: 0.5px solid rgba(250, 248, 244, 0.18);
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.4rem;
}

.menu-item__name {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-bg);
  letter-spacing: -0.01em;
}

.menu-item__region {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-gold);
  white-space: nowrap;
  flex-shrink: 0;
}

.menu-item__desc {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: rgba(250, 248, 244, 0.75);
  line-height: 1.65;
}

/* ── Worth knowing footer ── */
.menu-footer {
  margin-top: 2.75rem;
}

.menu-footer__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.menu-footer__item {
  background: rgba(250, 248, 244, 0.08);
  border-top: 1.5px solid rgba(250, 248, 244, 0.2);
  border-radius: 8px;
  padding: 1.5rem;
}

.menu-footer__num {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.6rem;
}

.menu-footer__item-name {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  font-weight: 700;
  color: rgba(250, 248, 244, 0.95);
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.menu-footer__item-desc {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: rgba(250, 248, 244, 0.62);
  line-height: 1.65;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .menu-food {
    padding-top: var(--space-lg);
  }

  .menu-food__hd {
    margin-bottom: 1.5rem;
  }

  .menu-card {
    padding: 2rem 1.5rem;
    border-radius: 14px;
  }

  .menu-drinks {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .menu-item__region {
    white-space: normal;
  }

  .menu-footer__cols {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}


/* ==========================================================================
   ACCESSIBILITY & GLOBAL UTILITY FIXES
   ========================================================================== */

/* Skip link — visually hidden until focused */
.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;
}

.skip-link {
  position: absolute;
  top: -9999px;
  left: 1rem;
  z-index: 9999;
  padding: 0.6rem 1.2rem;
  background: var(--color-accent);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: 3px;
  text-decoration: none;
  white-space: nowrap;
}
.skip-link:focus {
  top: 1rem;
}

/* Anchor headings: offset for fixed header (64px) + breathing room */
h2[id], h3[id] {
  scroll-margin-top: 80px;
}

/* Prevent 300ms tap delay on interactive elements */
.btn,
.hp-pop-card,
.hike-card,
.nav__link,
.nav__dropdown-trigger,
.page-nav__item,
.guide-nav__item {
  touch-action: manipulation;
}

/* Prevent orphaned words on short headings */
h1, h2, h3, h4 {
  text-wrap: wrap;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Carousels: slow down rather than stop — they're gentle horizontal scrolls,
     not disruptive animations, and stopping them breaks the feature entirely. */
  .hp-hero__marquee-track {
    animation-duration: 560s !important;
    animation-iteration-count: infinite !important;
  }
}


/* ==========================================================================
   PRIVACY POLICY PAGE
   ========================================================================== */

.privacy-hero {
  padding: 5rem 0 3.5rem;
  margin-top: 64px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.privacy-hero__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

.privacy-hero__title {
  font-family: var(--font-serif);
  font-size: var(--text-5xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: 1rem;
  text-align: center;
}

.privacy-hero__meta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  text-align: center;
}

.privacy-body {
  padding: 4rem 0 6rem;
  background: var(--color-bg);
}

.privacy-article {
  max-width: 900px;
  margin: 0 auto;
}

.privacy-article h2 {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-top: 3rem;
  margin-bottom: 0.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.privacy-article h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.privacy-article h3 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-top: 1.75rem;
  margin-bottom: 0.4rem;
}

.privacy-article p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.85;
  color: var(--color-fg2);
  margin-bottom: 1rem;
}

.privacy-article p + p {
  margin-top: 0;
}

.privacy-article ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.privacy-article ul li {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--color-fg2);
  margin-bottom: 0.35rem;
}

.privacy-article a {
  color: var(--color-accent);
  text-decoration: underline;
}

.privacy-article a:hover {
  color: var(--color-accent-dark);
}

/* Highlighted TODO callouts — visible for site owner to fill in */
.privacy-todo {
  background: #fffbf0;
  border-left: 3px solid var(--color-gold);
  border-radius: 2px;
  padding: 0.85rem 1.1rem;
  margin: 1.25rem 0;
}

.privacy-todo p {
  font-size: var(--text-sm);
  color: var(--color-fg2);
  margin: 0;
}

.privacy-todo strong {
  color: var(--color-gold-dark);
  font-weight: 600;
}

@media (max-width: 768px) {
  .privacy-hero {
    padding: 3.5rem 0 2.5rem;
  }

  .privacy-body {
    padding: 2.5rem 0 4rem;
  }
}


/* ==========================================================================
   TERMS OF SERVICE — notice, TOC, risk box
   ========================================================================== */

.terms-notice {
  background: var(--color-surface-raised);
  border-left: 3px solid var(--color-border-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1rem 1.25rem;
  margin-bottom: 2.5rem;
}

.terms-notice p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0;
}

.terms-toc {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem;
  margin-bottom: 3rem;
}

.terms-toc__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

.terms-toc__list {
  list-style: decimal;
  padding-left: 1.25rem;
  margin: 0;
  columns: 2;
  column-gap: 2rem;
}

.terms-toc__list li {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-fg2);
  margin-bottom: 0.3rem;
  break-inside: avoid;
}

.terms-toc__list a {
  color: var(--color-accent);
  text-decoration: none;
}

.terms-toc__list a:hover {
  text-decoration: underline;
  color: var(--color-accent-dark);
}

.terms-risk-box {
  background: #fdf0ef;
  border-left: 3px solid #c0392b;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

.terms-risk-box__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #c0392b;
  margin-bottom: 0.4rem;
}

.terms-risk-box p:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .terms-toc__list {
    columns: 1;
  }
}

/* Legal pages — Related section footer */
.legal-related {
  margin-top: 1rem;
}

.privacy-article .legal-related__heading {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.legal-related__links {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.legal-related__links li {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: 0;
  color: var(--color-fg2);
}

.legal-related__links a {
  color: var(--color-accent);
  text-decoration: underline;
}

.legal-related__links a:hover {
  color: var(--color-accent-dark);
}


/* Affiliate verbatim statement — Amazon Associates required wording */
.affiliate-verbatim {
  background: var(--color-accent-tint);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0 1.5rem;
}

.affiliate-verbatim p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-style: normal;
  line-height: 1.75;
  color: var(--color-text);
  margin: 0;
}


/* ==========================================================================
   COOKIE CONSENT — banner, modal, toggle
   ========================================================================== */

/* ── Banner ── */
.cookie-banner {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  width: 380px;
  max-width: calc(100vw - 3rem);
  z-index: 9000;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  transform: translateY(calc(100% + 2rem));
  transition: transform 300ms cubic-bezier(0.34, 1.3, 0.64, 1);
  will-change: transform;
}

.cookie-banner.is-visible {
  transform: translateY(0);
}

.cookie-banner__inner {
  padding: 1.25rem 1.4rem 1.35rem;
}

.cookie-banner__title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.cookie-banner__body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-fg2);
  line-height: 1.65;
  margin-bottom: 1rem;
}

.cookie-banner__policy-link {
  color: var(--color-accent);
  text-decoration: underline;
}

.cookie-banner__policy-link:hover {
  color: var(--color-accent-dark);
}

.cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── Shared button styles ── */
.cookie-btn {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0.6rem 1rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, color 150ms ease;
  text-decoration: none;
  white-space: nowrap;
}

.cookie-btn--primary {
  background: var(--color-accent);
  color: #fff;
  border: 1.5px solid var(--color-accent);
}

.cookie-btn--primary:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  box-shadow: var(--shadow-sm);
}

.cookie-btn--outline {
  background: transparent;
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
}

.cookie-btn--outline:hover {
  background: var(--color-accent-tint);
}

.cookie-btn--text {
  background: transparent;
  color: var(--color-text-muted);
  border: 1.5px solid transparent;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.cookie-btn--text:hover {
  color: var(--color-text);
}

/* ── Modal backdrop ── */
.cookie-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(30, 27, 24, 0.5);
  z-index: 9100;
  opacity: 0;
  transition: opacity 200ms ease;
}

.cookie-modal-backdrop.is-visible {
  opacity: 1;
}

/* ── Modal ── */
.cookie-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);
  width: 480px;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 3rem);
  max-height: calc(100svh - 3rem);
  overflow-y: auto;
  z-index: 9200;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
}

.cookie-modal.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.cookie-modal__inner {
  padding: 1.5rem 1.75rem 1.75rem;
}

.cookie-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.cookie-modal__title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
  line-height: 1.25;
}

.cookie-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 150ms ease, color 150ms ease;
}

.cookie-modal__close:hover {
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.cookie-modal__intro {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

/* ── Cookie category rows ── */
.cookie-modal__categories {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.cookie-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  background: var(--color-surface);
}

.cookie-category + .cookie-category {
  border-top: 1px solid var(--color-border);
}

.cookie-category__info {
  flex: 1;
  min-width: 0;
}

.cookie-category__name {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 0.2rem;
}

.cookie-category__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
}

/* ── Toggle switch ── */
.cookie-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  flex-shrink: 0;
}

.cookie-toggle--disabled {
  cursor: default;
}

.cookie-toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.cookie-toggle__track {
  position: relative;
  display: block;
  width: 44px;
  height: 24px;
  background: var(--color-border-strong);
  border-radius: 12px;
  transition: background 200ms ease;
  flex-shrink: 0;
}

.cookie-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(26, 35, 25, 0.25);
  transition: transform 200ms ease;
}

/* Checked state via input sibling selector */
.cookie-toggle__input:checked + .cookie-toggle__track {
  background: var(--color-accent);
}

.cookie-toggle__input:checked + .cookie-toggle__track .cookie-toggle__thumb {
  transform: translateX(20px);
}

/* Focus ring on the track when input is focused */
.cookie-toggle__input:focus-visible + .cookie-toggle__track {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Essential toggle is hard-coded on */
.cookie-toggle--on .cookie-toggle__track {
  background: var(--color-accent);
  opacity: 0.65;
}

.cookie-toggle--on .cookie-toggle__thumb {
  transform: translateX(20px);
}

.cookie-toggle__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ── Modal footer ── */
.cookie-modal__footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ── Prevent body scroll when modal open ── */
body.is-cookie-modal-open {
  overflow: hidden;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .cookie-banner {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    width: auto;
    max-width: none;
  }

  .cookie-banner__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-btn {
    width: 100%;
    justify-content: center;
  }

  .cookie-modal__inner {
    padding: 1.25rem 1.25rem 1.5rem;
  }
}


/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */

/* ── Hero ── */
.about-hero {
  background: var(--color-bg);
  padding: 3.5rem 0;
  margin-top: 64px;
  border-bottom: 1px solid var(--color-border);
}

.about-hero__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-areas:
    "heading photo"
    "text    photo";
  gap: 0 5rem;
  align-items: start;
}

.about-hero__heading {
  grid-area: heading;
  font-family: var(--font-serif);
  font-size: clamp(2.75rem, 5vw, 4.5rem);
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 1.75rem;
}

.about-hero__name {
  color: var(--color-accent);
}

.about-hero__text {
  grid-area: text;
}

.about-hero__photo-wrap {
  grid-area: photo;
  align-self: center;
}

.about-hero__body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.85;
  color: var(--color-fg2);
}

.about-hero__body + .about-hero__body {
  margin-top: 1.25rem;
}

.about-hero__photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
}

/* ── Stats bar ── */
.about-stats {
  background: var(--color-surface);
  padding: 2.75rem 0;
  border-bottom: 1px solid var(--color-border);
}

.about-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.about-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 2rem;
}

.about-stats__item + .about-stats__item {
  border-left: 1px solid var(--color-border);
}

.about-stats__num {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
}

.about-stats__label {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  text-align: center;
}

/* ── The Way I Travel ── */
.about-way {
  padding: 5rem 0 6rem;
  border-bottom: 1px solid var(--color-border);
}

.about-way__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 5rem;
  align-items: start;
}

.about-way__sidebar {
  position: sticky;
  top: calc(64px + 3rem);
}

.about-way__title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.about-way__sub {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.about-way__list {
  list-style: none;
}

.about-way__item {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1.5rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--color-border);
  align-items: center;
}

.about-way__item:last-child {
  border-bottom: 1px solid var(--color-border);
}

.about-way__num {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 3.5vw, 3rem);
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
}

.about-way__item-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.about-way__item-desc {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text-muted);
  line-height: 1.75;
}

/* ── Manifesto (dark section) ── */
.about-manifesto {
  background: #1A2319;
  padding: 7rem 0;
}

/* Both cells stretch to the same height (= taller of the two).
   Flex + align-items:center on the right cell then centres the
   comparison block within that shared height — against the left
   text block only, not the section padding. */
.about-manifesto__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: stretch;
}

.about-manifesto__right {
  padding-top: 4.75rem;
}

.about-manifesto__heading {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.75rem;
}

.about-manifesto__body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: rgba(250, 248, 244, 0.65);
  line-height: 1.85;
}

.about-manifesto__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

.about-manifesto__col-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(250, 248, 244, 0.4);
  padding-bottom: 0.75rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid rgba(250, 248, 244, 0.1);
}

.about-manifesto__col-label--yes {
  color: #6BAF8A;
}

.about-manifesto__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.about-manifesto__list li {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.about-manifesto__list--yes li {
  color: rgba(250, 248, 244, 0.95);
  font-weight: 600;
}

.about-manifesto__list--yes li::before {
  content: '✓';
  color: #6BAF8A;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.about-manifesto__list--no li {
  color: rgba(250, 248, 244, 0.4);
}

.about-manifesto__list--no li::before {
  content: '×';
  color: rgba(250, 248, 244, 0.25);
  flex-shrink: 0;
  margin-top: 0.05rem;
}

/* ── Contact ── */
.about-contact {
  padding: 5rem 0 6rem;
}

.about-contact__inner {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 5rem;
  align-items: center;
}

.about-contact__heading {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.about-contact__sub {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

.about-contact__reasons {
  list-style: none;
}

.about-contact__reason {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.4rem 0;
  border-top: 1px solid var(--color-border);
}

.about-contact__reason:last-child {
  border-bottom: 1px solid var(--color-border);
}

.about-contact__reason-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--color-accent-tint);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-contact__reason-title {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

.about-contact__reason-desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Form card */
.about-contact__form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}

.about-contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.about-contact__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.about-contact__field + .about-contact__field {
  margin-top: 0;
}

.about-contact__row + .about-contact__field {
  margin-bottom: 1.25rem;
}

.about-contact__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.about-contact__input {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  width: 100%;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease;
}

.about-contact__input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(47, 74, 58, 0.1);
}

.about-contact__input::placeholder {
  color: var(--color-fg4);
}

.about-contact__textarea {
  min-height: 150px;
  resize: vertical;
}

.about-contact__btn {
  width: 100%;
  margin-top: 1.25rem;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border: none;
  border-radius: var(--radius-sm);
  padding: 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.about-contact__btn:hover {
  background: var(--color-accent-dark);
  box-shadow: var(--shadow-md);
}

/* ── About responsive ── */
@media (max-width: 1024px) {
  .about-hero__inner {
    gap: 3rem;
  }

  .about-way__inner {
    gap: 3rem;
  }

  .about-manifesto__inner {
    gap: 3rem;
  }
}

@media (max-width: 768px) {
  .about-hero {
    padding: 2.5rem 0;
  }

  .about-stats {
    padding: 2.5rem 0;
  }

  .about-way {
    padding: 2.5rem 0;
  }

  .about-contact {
    padding: 2.5rem 0;
  }

  .about-hero__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "photo"
      "text";
    gap: 2rem;
  }

  .about-hero__heading {
    margin-bottom: 0;
  }

  .about-stats__item {
    padding: 0.25rem 1.25rem;
  }

  .about-stats__grid {
    width: 100%;
  }

  .about-way__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .about-way__sidebar {
    position: static;
  }

  .about-way__item {
    grid-template-columns: 3rem 1fr;
    gap: 1rem;
    padding: 2rem 0;
  }

  .about-way__item--alt {
    grid-template-rows: auto auto;
    align-items: center;
  }

  .about-way__item--alt .about-way__item-body {
    display: contents;
  }

  .about-way__item--alt .about-way__item-title {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
    align-self: center;
  }

  .about-way__item--alt .about-way__item-desc {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-top: 0.35rem;
  }

  .about-manifesto {
    padding: 2.5rem 0;
  }

  .about-manifesto__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .about-manifesto__right {
    padding-top: 0;
  }

  .about-manifesto__cols {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .about-contact__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .about-contact__row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .pack-progress {
    display: block;
    margin-bottom: 0.75rem;
  }
  .pack-progress__info {
    margin-bottom: 0.5rem;
  }
  .pack-progress__actions {
    margin-top: 0.75rem;
    margin-bottom: 0;
  }
  .pack-item {
    align-items: center;
  }
  .sidebar__about {
    display: none;
  }
}