/* ===========================================================
   MIXTAPE — confirmed brand name (NZ territory site)
   Editorial-but-funky design: bold colour, type and now real
   photography. This reverses the site's original no-stock-photo
   rule, at Tim's explicit direction — photography is now used
   throughout as placeholder imagery, sourced from Unsplash
   (Unsplash License — free for commercial use). Every placeholder
   photo is captioned honestly (photographer credit + "placeholder,
   not the literal place" where relevant) so nothing implies a
   verified visit that hasn't happened — that honesty rule doesn't
   go away just because photography came back. Real photography,
   once Tim & Lucy actually shoot it, should replace these in place
   and is the natural visual marker of the Personally Vetted tier.
   The brand name doubles as the content-format name: regional
   curated collections (e.g. "The West Coast NZ Mixtape") are
   Mixtape's signature product — see .theme-grid and .tracklist.
   Palette punched up from the original muted navy/sand/beige
   editorial system to something with more energy — navy stays
   as the anchor for trust/data content, everything else got
   louder. Old beige tones retired entirely.
   =========================================================== */

:root {
  --navy: #14293b;
  --navy-deep: #0c1a27;
  --teal: #0eafa0;
  --teal-light: #4fe0cf;
  --sand: #ffe066;
  --sand-deep: #ffcc33;
  --coral: #ff5c72;
  --pink: #ff2e88;
  --purple: #7c3aed;
  --cyan: #00d9c4;
  --orange: #ff7a1a;
  --marine: #14669e;
  --ink: #1c2b2a;
  --paper: #fffdf5;
  --line: rgba(20, 41, 59, 0.12);
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  --display: "Bungee", "Fraunces", cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 17px;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--navy);
  line-height: 1.15;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: -0.01em; }
h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  text-transform: lowercase;
}
h3 { font-size: 1.3rem; }

p { margin: 0 0 1.1em; }

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--coral); }

/* Eyebrow tags — rolled out sitewide as the West Coast Mixtape page's fluro
   sticker badge (was previously a .retro-only prototype, now the default look). */
.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--navy-deep);
  background: var(--fluro-yellow);
  padding: 5px 10px;
  border-radius: 3px;
  transform: rotate(-1.5deg);
  margin: 0 0 10px;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- Header ---------- */
header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 248, 242, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* padding-top/bottom only (not the "padding: 18px 0" shorthand) — that
     shorthand also sets left/right to 0, which wiped out .wrap's 28px
     horizontal padding on this element specifically. Invisible on desktop
     (.wrap's max-width centers the box with room to spare) but on mobile,
     where the box fills the full screen width, it left the logo and
     hamburger sitting flush against the screen edges. */
  padding-top: 18px;
  padding-bottom: 18px;
}

.logo {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--navy);
  letter-spacing: 0.01em;
}
.logo strong { color: var(--coral); font-weight: 500; }
/* Real text, not the old raster logo file — that source image was only
   432x47px, so once it was displayed larger it read as fuzzy/soft on any
   normal or high-DPI screen. Text renders crisp at any size/resolution. */
.logo-wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: 0.2em;
  color: var(--navy);
  text-decoration: none;
  text-transform: uppercase;
}
.logo-play {
  /* A pure CSS triangle (border-trick), not the Unicode ▶ character —
     that glyph gets rendered with each platform's own emoji-style "play
     button" presentation on some devices (confirmed on iPhone 13 Pro:
     a glossy rounded play icon instead of a flat triangle), which isn't
     under our control and doesn't match the brand mark. This shape
     always renders identically everywhere. */
  display: inline-block;
  width: 0;
  height: 0;
  margin: 0 0.06em;
  border-top: 0.5em solid transparent;
  border-bottom: 0.5em solid transparent;
  border-left: 0.72em solid var(--coral);
  vertical-align: middle;
  transform: translateY(-0.05em);
}
.logo .tag {
  display: block;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-top: 2px;
}

/* gap/font-size tightened from 28px/0.92rem when "Nature Focus" made this a
   7-item nav (was 6) — the wider set no longer fit on one line within
   .wrap's 1120px max-width at normal desktop widths (confirmed via a live
   render: labels wrapped to two lines and the CTA got squeezed). Verified
   this smaller sizing keeps everything on one line at both a wide desktop
   viewport and near the 860px hamburger breakpoint. */
nav.primary { display: flex; gap: 16px; align-items: center; }
nav.primary a {
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 500;
}
nav.primary a.cta {
  background: var(--coral);
  color: #fff;
  padding: 9px 16px;
  border-radius: 100px;
}
nav.primary a.cta:hover { background: var(--navy); color: #fff; }
/* "Activities" is a mobile-only nav entry (Tim's call — desktop nav is
   already at its practical limit at 7 items after the Nature Focus
   overflow fix; Activities lives in the footer for desktop users and in
   the hamburger dropdown for mobile, not the primary desktop bar).
   Hidden by default; the 1100px media query below turns it back on. */
nav.primary a.mobile-only { display: none; }

/* Mobile menu toggle — CSS-only (checkbox hack), no JS needed since most
   pages have no shared script file. Hidden entirely on desktop; becomes a
   real hamburger button + dropdown at the same breakpoint nav links used
   to just disappear at (see the max-width:860px block near the bottom). */
.nav-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle-btn {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 60;
}
.nav-toggle-btn:active { background: var(--line); }
.nav-toggle-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle-input:checked ~ .nav-toggle-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle-input:checked ~ .nav-toggle-btn span:nth-child(2) { opacity: 0; }
.nav-toggle-input:checked ~ .nav-toggle-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero — rebuilt on the Figma "Jadoo" template's composition:
   light background, copy left, photo contained in a soft blob shape right,
   floating stat chips over the photo (their cutout-photo-plus-info-card
   pattern) rather than the old full-bleed dark-overlay photo. No cutout
   travel-model photography exists for Mixtape, so the blob holds an
   honestly-captioned landscape placeholder instead. ---------- */
.hero {
  position: relative;
  /* Real NZ summer landscape as a backdrop (aerial coastline, Rod Long /
     Unsplash — see credit below), not just a flat cream fill. The gradient
     overlay is heaviest over the copy column (left) so the navy headline/body
     text keeps full contrast, and eases off toward the photo/art column
     (right) so the image itself still reads clearly there. */
  background-color: var(--paper);
  background-image:
    linear-gradient(100deg, rgba(255,253,245,0.97) 0%, rgba(255,253,245,0.94) 32%, rgba(255,253,245,0.8) 55%, rgba(255,253,245,0.6) 100%),
    url('https://images.unsplash.com/photo-1508971607899-a238a095d417?auto=format&fit=crop&w=2400&q=70');
  background-size: cover;
  background-position: center 60%;
  overflow: hidden;
  padding: 68px 0 60px;
  border-top: 8px solid;
  border-image: linear-gradient(90deg, var(--fluro-purple) 0%, var(--fluro-pink) 33%, var(--fluro-orange) 66%, var(--fluro-yellow) 100%) 1;
}

.hero-bg-credit {
  position: relative;
  z-index: 1;
  text-align: right;
  margin: 24px 0 0;
  opacity: 0.8;
}
@media (max-width: 860px) {
  /* Stacked layout means there's no "left copy / right photo" split left to
     fade toward, so a flatter wash reads better than the diagonal gradient
     tuned for the two-column desktop layout. Kept noticeably more
     transparent than the first pass (was 0.95/0.9, nearly hid the photo
     entirely on mobile) — the dedicated .hero-mobile-photo band below
     handles the "clearly visible photo" job up top, so this wash's only
     job is to keep the stacked text readable, not to hide the image. */
  .hero {
    background-image:
      linear-gradient(180deg, rgba(255,253,245,0.6) 0%, rgba(255,253,245,0.5) 100%),
      url('https://images.unsplash.com/photo-1508971607899-a238a095d417?auto=format&fit=crop&w=2400&q=70');
  }
}

/* A second, undimmed copy of the same background photo, shown only on
   mobile as a clear photo band above the hero copy — on a narrow single-
   column layout there's very little exposed background between the
   stacked elements for the section-wide wash to show through, so the
   ask was for a dedicated, clearly-visible copy rather than relying on
   that wash alone. Fades into the cream background at its base so it
   reads as a lead-in rather than a hard-edged banner. */
.hero-mobile-photo { display: none; }
@media (max-width: 860px) {
  .hero-mobile-photo {
    display: block;
    position: relative;
    height: 200px;
    margin: 0 0 22px;
    overflow: hidden;
  }
  .hero-mobile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .hero-mobile-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,253,245,0) 55%, rgba(255,253,245,0.98) 100%);
  }
}

.hero-photo-blob {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  height: 760px;
  background: linear-gradient(160deg, var(--sand) 0%, var(--sand-deep) 100%);
}
.hero-photo-blob img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
}
.hero-photo-blob::before {
  content: "";
  position: absolute;
  inset: -18% -22%;
  background: radial-gradient(circle at 30% 25%, rgba(255,224,102,0.55), rgba(255,224,102,0) 65%);
  z-index: -1;
}

.hero-chip {
  position: absolute;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(20,41,59,0.16);
  padding: 12px 16px;
  font-size: 0.8rem;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-chip strong { display: block; font-family: var(--serif); font-size: 0.95rem; }
.hero-chip span { color: var(--teal); font-size: 0.72rem; }
.hero-chip.chip-top { top: -18px; left: -18px; }
.hero-chip.chip-bottom { bottom: -16px; right: -14px; }
@media (max-width: 860px) {
  .hero-chip { display: none; }
}

.photo-credit {
  font-size: 0.7rem;
  color: var(--teal);
  margin-top: 10px;
  display: block;
}
.photo-credit.overlay {
  color: rgba(255,255,255,0.7);
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  margin-top: 0;
}

/* ---------- Photo band (journal / mixtape headers, route cards) ---------- */
.photo-band {
  position: relative;
  height: 260px;
  border-radius: 16px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  margin-bottom: 26px;
}
.photo-band .placeholder-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--pink);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border-radius: 3px;
}

.route-photo {
  height: 160px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.route-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,41,59,0.05) 0%, rgba(20,41,59,0.55) 100%);
}
.route-photo svg { position: relative; z-index: 1; width: 70%; opacity: 0.95; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 40px;
  align-items: start;
}

/* z-index:0 here (not just position:relative) matters: it makes .hero-copy
   its own stacking context, so the route SVG's z-index:-1 only reaches
   behind THIS column's text — without it, the negative z-index escapes all
   the way behind .hero's own background and becomes fully invisible. */
.hero-copy { position: relative; z-index: 0; }
.hero-route-bg {
  position: absolute;
  top: -60px;
  left: -80px;
  width: 680px;
  max-width: none;
  height: auto;
  opacity: 0.25;
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 860px) {
  .hero-route-bg { display: none; }
}

.hero-locale {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  color: var(--navy-deep);
  background: var(--fluro-yellow);
  padding: 5px 12px;
  border-radius: 3px;
  transform: rotate(-1.5deg);
  margin: 0 0 14px;
}
.hero h1 {
  color: var(--navy);
  font-family: var(--display);
  font-weight: 400;
  text-transform: lowercase;
  font-size: clamp(1.6rem, 3.6vw, 2.8rem);
  line-height: 1.28;
}
@media (max-width: 640px) {
  .hero h1 br { display: none; }
}
.hero h1 .accent { position: relative; white-space: nowrap; }
.hero h1 .accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 3px;
  background: var(--coral);
  border-radius: 2px;
}
.hero .lede {
  font-size: 1.15rem;
  color: var(--ink);
  max-width: 46ch;
}

.hero-art { position: relative; }
.hero-playlist { margin-bottom: 14px; }
.hero-playlist-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #e9e9e5;
  border-radius: 14px;
  padding: 12px 16px;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hero-playlist-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(20, 41, 59, 0.12);
}
.hero-playlist-art {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(20, 41, 59, 0.18);
}
.hero-playlist-info { min-width: 0; }
.hero-playlist-eyebrow {
  display: block;
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  color: var(--teal);
  margin-bottom: 3px;
}
.hero-playlist-info strong {
  display: block;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-playlist-meta {
  display: block;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink);
  opacity: 0.72;
  margin-top: 2px;
}
.hero-visual { position: relative; height: 760px; }
@media (max-width: 860px) {
  .hero-visual { height: auto; }
  /* .hero-photo-blob has its own hardcoded height (760px) independent of
     .hero-visual, so it needs its own override — without this the hero
     photo still renders full desktop height on phones, dwarfing everything
     else on the first screen. */
  .hero-photo-blob { height: 320px; }
}
.hero-visual::before {
  content: "";
  position: absolute;
  inset: -6% -10%;
  background: radial-gradient(circle at 40% 35%, rgba(255,224,102,0.16), rgba(255,224,102,0) 70%);
  border-radius: 50%;
  z-index: -1;
}

.btn-row { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
}
.btn-primary { background: var(--coral); color: #fff; }
.btn-primary:hover { background: #c05f3d; color: #fff; transform: translateY(-1px); }
.btn-ghost { border-color: var(--navy); color: var(--navy); }
.btn-ghost:hover { border-color: var(--coral); color: var(--coral); }
/* Hero sits on a light background now (see .hero), so the ghost button needs
   navy/coral, not the old sand-on-navy pairing from the dark-hero version. */

/* ---------- Section framing ---------- */
section { padding: 76px 0; }
section.alt { background: var(--sand); }
.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

hr.rule {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* ---------- Value props / cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px 26px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(20,41,59,0.1); }
.card .num {
  font-family: var(--serif);
  color: var(--teal-light);
  font-size: 2rem;
  display: block;
  margin-bottom: 10px;
}

/* ---------- Photo-led card variant (Favourites) ---------- */
.card.photo-card { padding: 0; overflow: hidden; }
.card.photo-card .card-photo {
  height: 150px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.card.photo-card .card-photo .num {
  position: absolute;
  bottom: 10px;
  left: 14px;
  color: #fff;
  margin: 0;
  font-size: 1.6rem;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.card.photo-card .card-body { padding: 20px 22px 24px; }
.card.photo-card .stat-row {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--teal);
  font-weight: 600;
}

/* ---------- Homepage rebuild, structurally informed by the Figma
   Community "Jadoo" travel-landing template (viewed via browser
   screenshots — API/MCP access was never available for this
   Community-published file, see PROJECT_LOG). Layout rhythm and
   component shapes are adapted; content is 100% real. Two things
   from that template were deliberately NOT carried over: a fake
   testimonial carousel (we have no real customers yet — faking
   quotes breaks the whole honesty premise) and a "trusted by"
   partner-logo strip using real company logos (Mixtape has no such
   partnerships — that would be a false-affiliation claim, not just
   a style choice). Both are replaced with honest equivalents below. */

/* ---------- Feature row ("Why Mixtape" — from "We Offer Best Services") ---------- */
.features-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.feature-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 26px 22px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(20,41,59,0.08); }
.feature-card.highlight { background: var(--navy); border-color: var(--navy); }
.feature-card.highlight h3, .feature-card.highlight p { color: var(--sand); }
.feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-card.highlight .feature-icon { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.feature-card h3 { font-size: 1.05rem; margin: 0 0 6px; }
.feature-card p { font-size: 0.88rem; color: var(--teal); margin: 0; }
.feature-card.highlight p { color: var(--sand-deep); }

/* ---------- Steps section ("How the Travel Mixer works" — from "Book in 3 Easy Steps") ---------- */
.steps-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 50px;
  align-items: center;
}
.step-item { display: flex; gap: 16px; margin-bottom: 26px; }
.step-item:last-child { margin-bottom: 0; }
.step-num {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  font-family: var(--serif);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-item:nth-child(2) .step-num { background: var(--purple); }
.step-item:nth-child(3) .step-num { background: var(--teal); }
.step-item h3 { font-size: 1.05rem; margin: 2px 0 6px; }
.step-item p { margin: 0; font-size: 0.92rem; }
.steps-preview {
  background: var(--navy);
  border-radius: 10px;
  padding: 22px;
  color: var(--sand);
}
.steps-preview .mixer-hit {
  display: block;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 10px;
  color: #fff;
}
.steps-preview .mixer-hit:last-child { margin-bottom: 0; }
.steps-preview .mixer-hit small { display: block; color: var(--cyan); font-size: 0.75rem; margin-top: 4px; }
.steps-preview .eyebrow { color: var(--sand-deep); }

/* ---------- Trust panel (honest replacement for a testimonial carousel) ---------- */
.trust-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}
.trust-panel .listing-entry { margin-bottom: 0; }
.trust-note {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  color: var(--teal);
  border-top: 1px dashed var(--line);
  padding-top: 14px;
}

/* ---------- Subscribe band (pill treatment, from the template's email-capture band) ---------- */
.capture.pill { border-radius: 100px; padding: 20px 20px 20px 44px; }
.capture.pill form { max-width: 420px; }
@media (max-width: 760px) {
  .capture.pill { border-radius: 20px; padding: 30px 26px; }
}

/* ---------- Footer, multi-column ---------- */
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
}
.footer-grid h4 {
  color: #fff;
  font-family: var(--sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 14px;
}
.footer-grid nav { display: flex; flex-direction: column; gap: 10px; }
.footer-bottom {
  border-top: 1px solid rgba(255,224,102,0.15);
  margin-top: 34px;
  padding-top: 18px;
  font-size: 0.78rem;
  opacity: 0.75;
}

@media (max-width: 900px) {
  .features-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-section { grid-template-columns: minmax(0, 1fr); }
  .trust-panel { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- Hero decorative accents (floating icons over photo) ---------- */
.hero-decal {
  position: absolute;
  opacity: 0.9;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
  pointer-events: none;
}
.hero-decal-fern { width: 40px; height: 40px; bottom: 18%; right: 16%; }
.hero-decal-mountain { width: 52px; height: 52px; top: 54%; right: -2%; }
@media (max-width: 860px) {
  .hero-decal { display: none; }
}

/* ---------- Route / island cards (map-led, not photo-led) ---------- */
.route-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.route-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(20,41,59,0.1); }
.route-map {
  height: 160px;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
}
.route-map svg { width: 70%; opacity: 0.85; }
.route-body { padding: 22px 24px 26px; }
.route-body .eyebrow { display: block; margin-bottom: 8px; }
.route-body ul { padding-left: 18px; margin: 14px 0 0; color: var(--navy); font-size: 0.92rem; }
.route-body li { margin-bottom: 4px; }

/* ---------- Honesty banner ---------- */
.honesty {
  background: var(--navy);
  color: var(--sand);
  padding: 60px 0;
}
.honesty h2 { color: #fff; }
.honesty p { color: var(--sand-deep); max-width: 60ch; }

/* ---------- Skip That, Do This — the site's flagship content format,
   given its own homepage section rather than being buried at equal weight
   with route cards. Bigger, photo-led cards; the format's own hub page
   (skip-that-do-this.html) is where the full, growing list lives. ---------- */
.skip-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
}
.skip-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background-size: cover;
  background-position: center;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 20px 40px rgba(20,41,59,0.18);
  transition: transform 0.2s ease;
}
.skip-card:hover { transform: translateY(-4px); }
.skip-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,41,59,0.05) 0%, rgba(12,26,39,0.88) 100%);
  z-index: 0;
}
.skip-card > * { position: relative; z-index: 1; }
.skip-card .theme-tag {
  align-self: flex-start;
  background: var(--fluro-yellow);
  color: var(--navy-deep);
  font-weight: 800;
}
.skip-card h3 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: lowercase;
  font-size: 1.7rem;
  color: #fff;
  margin: 12px 0 6px;
}
.skip-card p { color: var(--sand-deep); margin: 0; max-width: 42ch; }
@media (max-width: 700px) {
  .skip-grid { grid-template-columns: minmax(0, 1fr); }
}
/* 3-column variant of the same tile component, reused for the Activities
   hub (13 tiles reads better at 3-across than 2-across before wrapping
   down at narrower widths). */
.skip-grid.cols-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) {
  .skip-grid.cols-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .skip-grid.cols-3 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Journal list / article ---------- */
.journal-item {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.journal-item .tag-pill {
  align-self: start;
  background: var(--sand-deep);
  color: var(--navy);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 3px;
  text-align: center;
}

article.longform { max-width: 700px; margin: 0 auto; }
article.longform h1 { margin-bottom: 0.2em; }
article.longform .meta { color: var(--teal); font-size: 0.85rem; margin-bottom: 2em; }
article.longform h3 { margin-top: 1.6em; }
article.longform blockquote {
  border-left: 3px solid var(--coral);
  margin: 1.8em 0;
  padding: 0.2em 0 0.2em 20px;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--navy);
}
article.longform .callout {
  background: linear-gradient(135deg, var(--fluro-purple), var(--navy-deep));
  border: 2px solid var(--fluro-cyan);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 1.8em 0;
  color: #fff;
}
article.longform .callout p { color: #fff; }
article.longform .callout .eyebrow { display:block; margin-bottom: 10px; }
article.longform .callout a:not(.btn) { color: var(--fluro-cyan); }

/* ---------- Email capture ---------- */
.capture {
  background: var(--coral);
  color: #fff;
  border-radius: 6px;
  padding: 44px 40px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 30px;
  align-items: center;
}
.capture h2 { color: #fff; }
.capture form { display: flex; gap: 10px; }
.capture input[type="email"] {
  flex: 1;
  padding: 13px 18px;
  border-radius: 100px;
  border: none;
  font-size: 0.95rem;
}
.capture button {
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 13px 22px;
  border-radius: 100px;
  font-weight: 600;
  cursor: pointer;
}
.capture button:hover { background: var(--navy-deep); }
.capture .fine { font-size: 0.8rem; opacity: 0.85; margin-top: 8px; }

/* ---------- Footer ---------- */
footer.site {
  background: var(--navy-deep);
  color: var(--sand-deep);
  padding: 46px 0 30px;
  font-size: 0.88rem;
}
footer.site .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
footer.site a { color: var(--sand); }
footer.site nav { display: flex; gap: 18px; flex-wrap: wrap; }
footer.site .logo-wordmark { font-size: 1.1rem; color: #fff; }

/* ---------- Verification tier badges & data panel ---------- */
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border-radius: 3px;
}
.tier-badge.vetted { background: #e4efe0; color: #3a6b2f; }
.tier-badge.vetted::before { content: "●"; color: #4f9c3f; }
.tier-badge.cross { background: #eef2f6; color: #3a5570; }
.tier-badge.cross::before { content: "●"; color: #7a93ab; }

.data-panel {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  background: var(--sand);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 14px 0;
  font-size: 0.88rem;
}
.data-panel .stat { color: var(--navy); }
.data-panel .stat strong { font-family: var(--serif); font-size: 1.05rem; margin-right: 4px; }
.data-panel .stat span { color: var(--teal); font-size: 0.78rem; display: block; }
.data-panel a { font-size: 0.82rem; }

.listing-entry {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 18px;
  background: #fff;
}
.listing-entry .head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- Theme tags (interest-based discovery) ---------- */
.theme-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--teal-light);
  color: var(--teal);
  margin: 0 6px 6px 0;
}
.theme-row { margin: 10px 0 18px; }

.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.theme-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  transition: border-color 0.15s, transform 0.15s;
}
.theme-card:hover { border-color: var(--coral); transform: translateY(-2px); }
.theme-card .theme-icon {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--coral);
  display: block;
  margin-bottom: 8px;
}
.theme-card h3 { font-size: 1.05rem; margin-bottom: 4px; }
.theme-card p { font-size: 0.85rem; color: var(--teal); margin: 0; }

/* ---------- Mixtape tracklist format — fluro/retro treatment, rolled out
   sitewide (was previously a Mixtape-only .retro prototype; see the "Retro
   Mixtape brand mode" note further down for the full history). .page-intro
   is the same treatment reused as the top band on non-tracklist pages
   (About, How We Vet, journal articles) so the look is consistent
   everywhere without every page needing to fake being a Mixtape. ---------- */
.mixtape-intro, .page-intro {
  background: linear-gradient(115deg, var(--fluro-purple) 0%, var(--fluro-pink) 50%, var(--fluro-orange) 100%);
  color: var(--sand);
  padding: 70px 0 46px;
}
.mixtape-intro h1, .page-intro h1 { font-family: var(--display); font-weight: 400; color: #fff; text-shadow: 3px 3px 0 rgba(0,0,0,0.18); text-transform: lowercase; font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
.mixtape-intro .lede, .page-intro .lede { color: #fff; opacity: 0.92; max-width: 56ch; font-size: 1.1rem; }
.page-intro .meta { color: #fff; opacity: 0.85; }
.page-intro .theme-row { margin-top: 12px; }

.tracklist { max-width: 760px; margin: 0 auto; }
.track {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.track:last-child { border-bottom: none; }
.track-num {
  font-family: var(--display);
  font-size: 1.8rem;
  color: var(--fluro-pink);
  -webkit-text-stroke: 1px var(--fluro-cyan);
  font-weight: 400;
  text-align: center;
  padding-top: 2px;
}
.track h3 { margin-bottom: 6px; }
.track p { margin-bottom: 10px; }

@media (max-width: 860px) {
  .track { grid-template-columns: 36px minmax(0, 1fr); }
  .track-num { font-size: 1.3rem; }
}

/* ---------- Travel Mixer widget (hero) — Tim supplied a real illustrated
   stereo-mixer graphic (Travel-Stereo-Mixer.png), replacing the earlier
   CSS-drawn boombox chrome (handle/knobs/speakers/EQ bars, all removed).
   The image is decorative art showing the "Travel Mixer" concept; the real
   working controls (island + interest selects + button) live in the panel
   directly below it. Still just two native <select> elements + a button —
   nothing here fakes interactivity the image itself doesn't actually have. ---------- */
.mixer-widget.boombox {
  border-radius: 22px;
  overflow: hidden;
  margin-top: 46px;
  background: var(--paper);
  box-shadow: 0 24px 46px rgba(0,0,0,0.28);
}
.mixer-image { display: block; width: 100%; height: auto; }
.boombox-panel {
  background: var(--paper);
  padding: 20px 20px 16px;
}
.boombox-panel h3 { font-size: 1.02rem; margin: 2px 0 16px; color: var(--navy); }

.mixer-widget .eyebrow { color: var(--teal); }
.mixer-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.mixer-field { flex: 1; min-width: 150px; }
.mixer-field label {
  display: block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal);
  margin-bottom: 6px;
}
.mixer-field select {
  width: 100%;
  min-height: 48px;
  padding: 13px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink);
}
.mixer-widget .btn-primary {
  border: none;
  cursor: pointer;
  font-family: var(--sans);
}
.mixer-results {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: none;
}
.mixer-results.show { display: block; }
.mixer-results.lcd {
  background: #0d1a12;
  border-radius: 8px;
  padding: 4px 14px 2px;
  border-top: none;
  margin-top: 14px;
}
.mixer-results.lcd.show { padding: 12px 14px; }
.mixer-results.lcd a.mixer-hit { color: #8effc1; border-bottom-color: rgba(142,255,193,0.15); }
.mixer-results.lcd a.mixer-hit small { color: #4fe0cf; }
.mixer-results.lcd .mixer-empty { color: #8effc1; }

.mixer-results a.mixer-hit {
  display: block;
  padding: 10px 0;
  color: var(--navy);
  font-weight: 600;
  border-bottom: 1px dashed var(--line);
}
.mixer-results a.mixer-hit:last-child { border-bottom: none; }
.mixer-results a.mixer-hit small {
  display: block;
  font-weight: 400;
  color: var(--teal);
  font-size: 0.78rem;
  margin-top: 2px;
}
.mixer-empty { font-size: 0.9rem; color: var(--ink); }
.mixer-empty a { font-weight: 600; }

@media (max-width: 860px) {
  .mixer-row { flex-direction: column; align-items: stretch; }
  /* iOS Safari auto-zooms the whole page on focus if a form control's
     font-size is under 16px — the select was 0.9rem (~15px), just under
     that line. Bumped to prevent the jarring zoom-in when picking an
     island/theme on the Mixer, a core interaction on mobile. */
  .mixer-field select { font-size: 1rem; }
}

/* ---------- Retro Mixtape brand mode (fluro 80s/90s) ----------
   Originally prototyped as a .retro opt-in modifier scoped to the Mixtape
   tracklist pages only, on the reasoning that the trust/data pages (About,
   How We Vet, journal reviews) needed a calmer editorial system to carry
   their credibility weight. Tim confirmed the look and asked for it site-
   wide, so as of the homepage/full-site rollout these rules are folded
   directly into the base classes above (.eyebrow, h1/h2, .mixtape-intro,
   .track-num, .callout, .soundtrack) rather than gated behind .retro. The
   fluro variables below are still the single source of truth for the
   palette. */
:root {
  --fluro-pink: #ff2e88;
  --fluro-cyan: #00e5d4;
  --fluro-yellow: #ffd400;
  --fluro-purple: #6a1b9a;
  --fluro-orange: #ff6a00;
}

/* ---------- Mixtape soundtrack (Spotify embed) ---------- */
.soundtrack {
  max-width: 760px;
  margin: 10px auto 50px;
  background: linear-gradient(135deg, var(--fluro-purple), var(--navy-deep));
  border: 2px solid var(--fluro-cyan);
  border-radius: 6px;
  padding: 30px 30px 26px;
  color: var(--sand);
}
.soundtrack h3 { color: #fff; margin-bottom: 6px; }
.soundtrack p { color: var(--sand-deep); font-size: 0.92rem; max-width: 56ch; }
.soundtrack iframe {
  width: 100%;
  border-radius: 8px;
  margin-top: 14px;
  border: none;
}

.draft-flag {
  background: #fff4e2;
  border: 1px dashed #c98a2f;
  color: #7a4f13;
  font-size: 0.85rem;
  padding: 10px 16px;
  border-radius: 4px;
  margin: 0 0 30px;
}

/* ===========================================================
   Flow/layout borrowed from arrival.com.au: announcement strip,
   a scalloped "stamp" persona card, a horizontal poster carousel
   with tag filtering, and a playlist teaser row. Structure and
   component shapes are adapted; nothing here fabricates data —
   no fake prices, no fake availability, no partner logos. Real
   content only, same as the rest of the site.
   =========================================================== */

/* ---------- Announcement strip ---------- */
.announce-bar {
  background: var(--navy-deep);
  color: var(--sand);
  font-size: 0.8rem;
  padding: 9px 0;
  text-align: center;
}
.announce-bar .wrap { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }
.announce-bar strong { color: #fff; letter-spacing: 0.03em; }
.announce-bar strong .locale { color: var(--cyan); }
.announce-bar a { color: var(--cyan); font-weight: 600; }
.announce-bar a:hover { color: var(--sand); }

/* ---------- Stamp / persona card ---------- */
.stamp-section { background: var(--navy); position: relative; }
.stamp-card {
  position: relative;
  background: var(--navy);
  padding: 46px 0;
}
.stamp-card::before, .stamp-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 16px;
  background: radial-gradient(circle at 10px 8px, var(--paper) 8px, transparent 8.5px) repeat-x;
  background-size: 20px 16px;
}
.stamp-card::before { top: -8px; }
.stamp-card::after { bottom: -8px; transform: rotate(180deg); }
.stamp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.polaroid-stack { position: relative; height: 260px; }
.polaroid {
  position: absolute;
  background: #fff;
  padding: 10px 10px 34px;
  border-radius: 3px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.35);
  width: 230px;
}
.polaroid img { width: 100%; height: 150px; object-fit: cover; display: block; }
.polaroid.p1 { top: 0; left: 10%; transform: rotate(-6deg); z-index: 1; }
.polaroid.p2 { top: 40px; left: 32%; transform: rotate(4deg); z-index: 2; }
.stamp-copy .eyebrow { color: var(--cyan); }
.stamp-copy h2 { color: #fff; margin-bottom: 12px; }
.stamp-copy p { color: var(--sand-deep); max-width: 46ch; }
.stamp-copy .btn-primary { margin-top: 8px; }

@media (max-width: 860px) {
  .stamp-grid { grid-template-columns: minmax(0, 1fr); }
  .polaroid-stack { height: 220px; margin-bottom: 10px; }
}
@media (max-width: 480px) {
  /* On narrow phones the wrap's content width (~319px on a 375px screen)
     is narrower than the two 230px-wide polaroids' combined offset
     positions, so the second one runs past the edge — shrink both and
     pull the second one in so they stay inside the visible column. */
  .polaroid { width: 150px; }
  .polaroid img { height: 100px; }
  .polaroid.p2 { left: 24%; }
  .polaroid-stack { height: 170px; }
}

/* ---------- Poster carousel (Browse the Mix) ---------- */
.filter-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.filter-pill {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 100px;
  cursor: pointer;
}
.filter-pill.active { background: var(--navy); color: #fff; border-color: var(--navy); }

.carousel-wrap { position: relative; }
.poster-carousel {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  scrollbar-width: none;
}
.poster-carousel::-webkit-scrollbar { display: none; }
.poster-card {
  flex: none;
  width: 240px;
  height: 300px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  scroll-snap-align: start;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
}
.poster-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,41,59,0.15) 0%, rgba(12,26,39,0.82) 100%);
  z-index: 0;
}
.poster-card > * { position: relative; z-index: 1; }
.poster-card .tier-badge { align-self: flex-start; }
.poster-card h3 {
  font-family: var(--display);
  font-size: 1.5rem;
  color: #fff;
  line-height: 1.05;
  text-transform: lowercase;
  margin: 0;
}
.poster-card .poster-meta { font-size: 0.78rem; color: var(--sand-deep); font-weight: 600; }
.poster-card:hover h3 { text-decoration: underline; }

.carousel-nav {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}
.carousel-nav button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  font-size: 1rem;
}
.carousel-nav button:hover { background: var(--navy); color: #fff; }

/* ---------- Playlist teaser row ---------- */
.playlist-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.playlist-tile {
  flex: 1;
  min-width: 220px;
  background: var(--navy);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  gap: 14px;
  align-items: center;
  color: #fff;
}
.playlist-tile .playlist-art {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.playlist-tile.soon .playlist-art { background: rgba(255,255,255,0.08); }
.playlist-tile h4 { margin: 0 0 4px; font-family: var(--serif); font-size: 1rem; color: #fff; }
.playlist-tile p { margin: 0; font-size: 0.8rem; color: var(--sand-deep); }
.playlist-tile.soon { opacity: 0.6; }
.playlist-tile .status {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 9px;
  border-radius: 100px;
  background: var(--cyan);
  color: var(--navy-deep);
  flex: none;
}
.playlist-tile.soon .status { background: rgba(255,255,255,0.12); color: var(--sand-deep); }

@media (max-width: 860px) {
  .hero-grid, .grid-3, .grid-2, .capture { grid-template-columns: minmax(0, 1fr); }
  .journal-item { grid-template-columns: minmax(0, 1fr); }
  .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile-style header (hamburger dropdown) now switches at 1100px, not 860px
   like the rest of the layout above. Reason: adding "Nature Focus" made this
   a 7-item nav, and even after tightening gap/font-size below, a live render
   test showed it still wrapped to two lines per item in the 860-1100px band
   (confirmed at 897px width) — too wide for the mobile treatment's own
   breakpoint to help, too narrow for the desktop nav to fit on one line.
   Extending the hamburger's range up to 1100px covers that dead zone with
   the same, already-tested mobile nav pattern instead of a fragile
   in-between CSS hack. */
@media (max-width: 1100px) {
  /* Real mobile nav: a hamburger button toggles a dropdown containing
     every link (previously these just vanished at this breakpoint with
     no way to reach them — Routes, Skip That Do This, Travel Mixer and
     How We Vet were all unreachable on mobile). Styled as an inset
     floating card (margin from the screen edges, rounded corners) rather
     than an edge-to-edge bar, both for a more app-like feel and so the
     menu itself doesn't read as cramped against the sides of the screen. */
  .logo-wordmark { font-size: 1.15rem; letter-spacing: 0.12em; }
  /* Tighter sticky-header padding on mobile — 6px + the 44px hamburger
     target + 6px = 56px total bar height, the standard baseline for a
     mobile sticky nav on a content/travel site (was ~80px with the
     desktop 18px padding, taller than it needs to be on a small screen). */
  .nav-row { padding-top: 6px; padding-bottom: 6px; }
  .nav-toggle-btn { display: flex; }
  nav.primary {
    position: absolute;
    top: calc(100% + 10px);
    left: 16px;
    right: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 16px 30px rgba(20,41,59,0.18);
    padding: 6px 24px 20px;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.25s ease;
  }
  .nav-toggle-input:checked ~ nav.primary {
    /* Bumped from 440px to 520px, then 520px to 600px: each new nav item
       (Nature Focus, then the mobile-only Activities entry) adds roughly
       one more ~64-80px row versus the previous count — bump again if
       another item gets added to the mobile dropdown. */
    max-height: 600px;
    visibility: visible;
  }
  nav.primary a:not(.cta) {
    display: block;
    padding: 16px 2px;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
    -webkit-tap-highlight-color: transparent;
  }
  nav.primary a.mobile-only { display: block; }
  nav.primary a.cta { margin: 16px 0 6px; text-align: center; }
}