/* ===========================================================
   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; }
/* 2026-07-23: real logo artwork now in use (mixtape-logo.png /
   mixtape-logo-dark.png), see .logo-img below. The .logo-wordmark text
   fallback below is kept in the codebase (unused in the shared header/
   footer markup as of this date) in case the image ever needs pulling. It
   was the standing choice before this point because the original raster
   logo file was only 432x47px and read fuzzy once displayed larger on a
   normal or high-DPI screen — the new artwork is high enough resolution
   that this no longer applies. */
.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);
}
/* Real logo artwork (2026-07-23): background-removed PNG of the "Mixtape
   Travels" retro wordmark, swapped in for the plain-text .logo-wordmark
   across the shared header and footer. Two colour variants exist because
   the source art's "TRAVELS" letters are solid near-black with no light
   fill behind them -- fine on the header's light background, unreadable
   on the footer's dark navy, so mixtape-logo-dark.png recolours just that
   near-black text to a light cream (the "Mixtape" script wordmark's own
   black drop-shadow was left alone in both versions, since it already
   reads fine against navy). */
.logo-img { display: inline-flex; align-items: center; }
/* v2 logo art (2026-07-23) is a wide horizontal lockup (~4.7:1) rather than
   the taller v1 crop. Sized large per Tim's explicit request (at least 2x
   the original wordmark-equivalent size) -- header/footer rows grow to fit
   it rather than the logo being squeezed down to the old text-logo height. */
.logo-image { display: block; height: 65px; width: auto; }
footer.site .logo-image { height: 46px; }
.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; min-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: 52px 0; }
section.alt { background: var(--sand); }
.section-head { max-width: 640px; margin-bottom: 32px; }
.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: 16px;
}
.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); }
}

/* ---------- Sources & References page — a plain, dense citation index,
   deliberately unstyled-fancy since its whole job is being scannable and
   checkable, not decorative. ---------- */
.sources-list {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  border-top: 1px solid var(--line);
}
.sources-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}
.sources-list li a:first-child { font-weight: 600; color: var(--navy); }
.sources-cited { font-size: 0.85rem; color: var(--sand-deep); }
.sources-cited a { color: var(--teal); }

/* ---------- 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); }

/* Full-page mini-map (route detail pages) -- same schematic NZ locator SVG
   as the hub tile's .route-map, just bigger and with a caption. Deliberately
   NOT a to-scale map (same spirit as the site's other decorative SVGs, e.g.
   the homepage hero's route squiggle) -- a stylized locator, not a claim of
   geographic precision. */
article.longform .route-map-large {
  height: 280px;
  background: var(--navy-deep);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
article.longform .route-map-large svg { width: 46%; }
.route-map-caption {
  text-align: center;
  font-size: 0.78rem;
  color: var(--sand-deep);
  margin: 0 0 26px;
}

/* ---------- Agree/Disagree vote widget (2026-07-23) ----------
   Deliberately framed as agreement with the piece's specific verdict, not a
   generic like/dislike -- a plain thumbs-up/down would punish this site's
   most honest, contrarian calls (e.g. "skip X, do Y") every time someone
   who loves X clicks dislike. See Content_Architecture.md's community-
   feedback section for the full reasoning. Counts come from the Worker's
   /api/votes (KV-backed); until VOTES_KV is bound, both counts just read 0,
   which is an honest empty state, not a broken one. */
.vote-widget {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 28px 0 10px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.vote-widget .vote-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy);
}
.vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px 16px;
  border-radius: 100px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.vote-btn .vote-count { font-weight: 800; }
.vote-btn.vote-agree:hover { border-color: var(--teal); color: var(--teal); }
.vote-btn.vote-disagree:hover { border-color: var(--coral); color: var(--coral); }
.vote-widget.voted .vote-btn { cursor: default; }
.vote-widget.voted .vote-btn.vote-agree { border-color: var(--teal); color: var(--teal); }
.vote-widget.voted .vote-btn.vote-disagree { border-color: var(--coral); color: var(--coral); }
.vote-widget .vote-status { font-size: 0.78rem; color: var(--sand-deep); width: 100%; margin-top: 2px; }

/* Compact variant used on the routes.html hub tiles, inside .route-body */
.vote-widget.vote-widget-compact {
  margin: 14px 0 0;
  padding-top: 12px;
  gap: 8px;
}
.vote-widget-compact .vote-label { font-size: 0.78rem; }
.vote-widget-compact .vote-btn { padding: 5px 11px; font-size: 0.78rem; }

/* ---------- 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-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  text-transform: lowercase;
  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; }

/* "Show all" expander -- only appears when the Travel Mixer's real result
   count is above the 2-item cap, so the widget stays compact by default
   instead of filling the page with every match. */
.mixer-show-all {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px 0 4px;
  background: none;
  border: none;
  border-top: 1px dashed var(--line);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--navy);
  text-decoration: underline;
  text-align: left;
  cursor: pointer;
}
.mixer-results.lcd .mixer-show-all { color: #8effc1; border-top-color: rgba(142,255,193,0.15); }

/* ---------- Create Your Mixtape v2 generator (Travel Mixer v2) ----------
   Reuses .mixer-row/.mixer-field/.filter-pill/.mixer-results/.capture from
   the existing homepage mixer widget and email capture section, so the new
   generator stays visually consistent rather than introducing a parallel
   style system. Only genuinely new pieces below: the standalone panel
   wrapper (no boombox image on this dedicated page) and text/date input
   styling to match the existing select styling. ---------- */
.mixer-v2-panel {
  background: var(--paper);
  border-radius: 16px;
  padding: 30px 28px 26px;
  box-shadow: 0 18px 36px rgba(0,0,0,0.14);
  max-width: 860px;
  margin: 0 auto;
}
.mixer-field input[type="date"],
.mixer-field input[type="text"],
.mixer-field input[type="email"] {
  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-v2-step-label {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 100px;
  padding: 4px 12px;
  margin-bottom: 12px;
}
.match-count-line { font-size: 0.85rem; color: var(--sand-deep); margin: 10px 0 0; }
.match-card-tags { margin-top: 3px; }
.match-card-tags span {
  font-size: 0.72rem;
  color: var(--teal);
  margin-right: 8px;
}
@media (max-width: 860px) {
  .mixer-field input[type="date"] { font-size: 1rem; }
}

@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; }
}

/* ---------- Create Your Travel Mix widget (2026-07-22 redesign) ----------
   Rebuilt as a Skyscanner/Kayak/Booking-style search widget: mobile-first
   (full width, stacked fields), sitting in the left half of the page at
   desktop widths (a two-column layout, second column reserved for a short
   supporting panel rather than left empty). Skinned as a retro analog
   mixing-console fascia (brushed-panel gradient, backlit toggle buttons,
   a chunky "play" button) to fit the site's existing retro/fluro Mixtape
   visual language (see .track-num, .mixtape-result-hero) rather than
   inventing an unrelated new style. Deliberately new classes (.retro-mixer,
   .mixer-widget-*) instead of overriding .mixer-v2-panel/.mixer-field,
   which Step 2 (email capture) below still uses unchanged. ---------- */
.mixer-hero { padding: 34px 0 10px; }
.mixer-widget-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: stretch;
}
@media (min-width: 900px) {
  .mixer-widget-layout { grid-template-columns: minmax(0, 560px) 1fr; }
}
.mixer-widget-col { min-width: 0; }

.retro-mixer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #1c2b3a 0%, #14212c 55%, #0d171f 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 24px 22px 26px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.06);
}
.retro-mixer::before {
  /* faint brushed-metal texture */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(100deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px);
  pointer-events: none;
}
.retro-mixer::after {
  /* top VU-meter strip, purely decorative */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--fluro-pink), var(--fluro-yellow), var(--fluro-cyan), var(--fluro-purple), var(--fluro-pink));
}
.mixer-screw {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6b6b6b, #101010);
  z-index: 1;
}
.mixer-screw.tl { top: 11px; left: 11px; }
.mixer-screw.tr { top: 11px; right: 11px; }
.mixer-screw.bl { bottom: 11px; left: 11px; }
.mixer-screw.br { bottom: 11px; right: 11px; }

.mixer-widget-head { position: relative; margin-bottom: 18px; }
.mixer-widget-eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sand-deep);
  margin-bottom: 6px;
}
.mixer-widget-head h1 {
  font-family: var(--display);
  text-transform: none;
  font-size: clamp(1.5rem, 4vw, 1.9rem);
  color: #fff;
  margin: 0;
  line-height: 1.25;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.25);
}

.mixer-field-group { position: relative; margin-bottom: 14px; }
.mixer-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.mixer-field-group label,
.mixer-field-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal-light);
  margin-bottom: 6px;
}
.mixer-field-group select,
.mixer-field-group input[type="text"],
.mixer-field-group input[type="email"] {
  width: 100%;
  min-height: 48px;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
  forced-color-adjust: none;
  background-color: #0d171f;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 14px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.35);
}
.mixer-field-group select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%237fd8cf' d='M5 7l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 34px;
}
.mixer-field-group input[type="text"]::placeholder,
.mixer-field-group input[type="email"]::placeholder { color: rgba(255,255,255,0.45); }
.mixer-field-group select:focus,
.mixer-field-group input[type="text"]:focus,
.mixer-field-group input[type="email"]:focus { outline: 2px solid var(--pink); outline-offset: 1px; }
/* color-scheme:dark above already makes Chromium/Firefox render the native
   open-dropdown popup with a dark background and light text by default --
   the popup list (the options, not the closed box) is largely outside
   author CSS control either way, so this just nudges it in the same
   direction rather than fighting it with a light-popup assumption. */
.mixer-field-group select option {
  color: #fff;
  background-color: #14212c;
}

/* Fixed 5-column grid (rather than natural flex-wrap) so the 10 interest
   pills always lay out as exactly 2 rows, never an awkward 1-item 3rd row
   caused by a couple of longer labels ("Road Trips", "Activities") tipping
   the wrap point -- Tim flagged this after the flex-wrap version left one
   pill dangling on its own line. Tightened font-size/padding so all 10
   labels fit their column at the widget's ~560px desktop width; nowrap +
   ellipsis is a safety net for any narrower viewport rather than letting a
   label force a 3rd row. */
.retro-pills { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px 8px; margin-bottom: 0; }
.retro-pills .filter-pill {
  background: #0d171f;
  border: 1px solid rgba(255,255,255,0.14);
  color: #cfe8e4;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 8px 8px 8px 20px;
  border-radius: 6px;
  position: relative;
  min-height: 36px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.retro-pills .filter-pill::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3a4a54;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.6);
}
.retro-pills .filter-pill.active {
  border-color: var(--pink);
  color: #fff;
  background: #1c2b3a;
}
.retro-pills .filter-pill.active::before {
  background: var(--pink);
  box-shadow: 0 0 6px var(--pink), 0 0 2px var(--pink);
}
/* On very narrow phones, 5 columns leaves too little room per label even
   with ellipsis -- drop to 3 columns there so labels stay readable. Still
   fewer rows (4, not the ideal 2) than the old flex-wrap's unpredictable
   count, and the desktop/tablet widget (where Tim reviewed this) keeps the
   full 5-column, 2-row layout. */
@media (max-width: 420px) {
  .retro-pills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.mixer-play-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  min-height: 52px;
  border-radius: 10px;
  background: linear-gradient(120deg, var(--pink), var(--orange));
  font-family: var(--display);
  text-transform: none;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(255,46,136,0.35);
}
.mixer-play-btn:active { transform: translateY(1px); }
.retro-mixer .fine {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  text-align: center;
  margin: 10px 0 0;
}

.mixer-widget-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
}
.mixer-side-panel { max-width: 320px; text-align: center; }
.mixer-side-panel svg { width: 100%; max-width: 220px; height: auto; margin: 0 auto 14px; display: block; }
.mixer-side-panel p { color: var(--ink); font-size: 0.95rem; margin: 0; }

@media (max-width: 899px) {
  .mixer-widget-side { display: none; }
}
@media (max-width: 480px) {
  .mixer-field-row { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Generated Mixtape result — restructured 2026-07-22 at Tim's
   request: activities/interests as the primary content (equal weight, not
   buried under specific days), a Suggested Route block when one backbone
   route matched, and a compact day-by-day-at-a-glance grid to summarize
   rather than a full per-day narrative read. Reuses the site's existing
   gradient/eyebrow/card language (.eyebrow, fluro gradient, .track-num
   styling) rather than inventing a new visual system. ---------- */
.mixtape-result-hero {
  background: linear-gradient(115deg, var(--fluro-purple) 0%, var(--fluro-pink) 50%, var(--fluro-orange) 100%);
  border-radius: 14px;
  padding: 28px 26px 24px;
  margin-bottom: 22px;
}
.mixtape-result-hero .eyebrow { margin-bottom: 12px; }
.mixtape-result-hero h2 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: lowercase;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.18);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: 0 0 10px;
}
.mixtape-result-hero p { color: var(--sand); opacity: 0.95; margin: 0; max-width: 62ch; }

.mixtape-result-route {
  background: var(--navy);
  border-left: 6px solid var(--coral);
  border-radius: 8px;
  padding: 18px 22px;
  margin-bottom: 22px;
}
.mixtape-result-route .eyebrow { background: var(--fluro-yellow); }
.mixtape-result-route h4 {
  font-family: var(--serif);
  color: #fff;
  font-size: 1.15rem;
  margin: 0 0 4px;
}
.mixtape-result-route h4 a { color: #fff; text-decoration: underline; text-decoration-color: var(--cyan); }
.mixtape-result-route p { color: var(--sand-deep); margin: 0; font-size: 0.88rem; }

/* Small real-map locator shown under the Suggested Route block, reusing
   the exact same island artwork/highlight language as each route's own
   dedicated page (see .route-map-large). */
.mixtape-result-map {
  background: var(--navy-deep);
  border-radius: 14px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.mixtape-result-map svg { width: 40%; }
.mixtape-result-map-caption {
  text-align: center;
  font-size: 0.78rem;
  color: var(--sand-deep);
  margin: 0 0 22px;
}

.mixtape-result-section-label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navy);
  margin: 26px 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--line);
}
.mixtape-result-section-label:first-of-type { margin-top: 0; }

.mixtape-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.mixtape-result-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  background: #fff;
  transition: transform 0.15s, box-shadow 0.15s;
}
.mixtape-result-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(20,41,59,0.1); }
.mixtape-result-card .tag-pill {
  display: inline-block;
  background: var(--sand-deep);
  color: var(--navy);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: 8px;
}
.mixtape-result-card h5 { font-family: var(--sans); font-size: 0.95rem; font-weight: 700; margin: 0 0 6px; }
.mixtape-result-card h5 a { color: var(--navy); }
.mixtape-result-card h5 a:hover { color: var(--coral); }
.mixtape-result-card p { font-size: 0.82rem; color: var(--ink); opacity: 0.85; margin: 0; }

.day-glance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.day-glance-cell {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
}
.day-glance-cell .day-glance-num {
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--fluro-pink);
  -webkit-text-stroke: 0.6px var(--fluro-cyan);
  font-weight: 400;
  display: block;
  margin-bottom: 4px;
}
.day-glance-cell p { font-size: 0.8rem; color: var(--navy); margin: 0; }

.mixtape-result-closing {
  font-style: italic;
  color: var(--sand-deep);
  font-size: 0.9rem;
  margin: 22px 0 0;
}

@media (max-width: 600px) {
  .mixtape-result-grid { grid-template-columns: minmax(0, 1fr); }
  .day-glance-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* ---------- 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; }
  .logo-image { height: 46px; }
  /* 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; }
}

/* Mixer result panel */
.mixer-v2-panel .mixer-results-list {
  max-height: 360px;
  overflow-y: auto;
  margin-bottom: 16px;
}