/* ==========================================================================
   CASA BELLA, PUERTO RICO — Digital Itinerary
   Design tokens + reusable component system, adapted from the JazzeeXscapes
   Luxe Master Itinerary. Intimate rainforest luxury: deep tropical green
   (dominant) + sunset coral accent + metallic gold (premium detail) + warm
   near-black neutral. Variable NAMES are kept the same as the Master (the
   component CSS below reads them by name) — only the palette VALUES were
   retuned, from Luxe's purple/yellow French Quarter identity to Casa
   Bella's rainforest-at-sunset one.
   ========================================================================== */

:root {
  /* Neutrals — warm sand ivory / near-black forest grounding */
  --ink-900: #16241c;
  --ink-700: #233b2d;
  --mauve-500: #7c8b7a;
  --mauve-300: #bcccb8;
  --ivory-100: #f7f0e2;
  --ivory-50: #fdfaf4;
  --white: #fffdf8;

  /* "Purple" system, renamed in spirit only — deep rainforest green, the
     site's dominant identity color (canopy at dusk) */
  --purple-900: #0e2a20;
  --purple-800: #123626;
  --purple-700: #17432f;
  --purple-600: #1f5539;
  --purple-500: #2c6b48;
  --lilac-400: #a7c2a8;
  --lilac-300: #c3d8c1;
  --lilac-200: #e2ecdd;

  /* Metallic gold — premium borders, icons, highlights, signature moments
     (unchanged from the Master — lantern-glow gold suits both palettes) */
  --gold-700: #8a6a35;
  --gold-600: #a9843f;
  --gold-500: #d4af64;
  --gold-300: #e9cd93;
  --gold-100: #f7ecd4;

  /* "Yellow" accent, renamed in spirit only — sunset coral/amber, used for
     departure badges, CTAs, high-visibility moments */
  --yellow-700: #b1481f;
  --yellow-600: #d35f2c;
  --yellow-500: #f0873f;
  --yellow-300: #f7b98a;

  /* Unused in this build (no dress-code module for this trip) — left
     defined, harmless, in case a future look needs a warm wood/rattan accent */
  --brown-900: #2c1a11;
  --brown-700: #5b3620;
  --brown-500: #a86a3c;
  --brown-300: #d9b48c;

  /* Semantic */
  --bg-body: var(--ivory-100);
  --text-primary: var(--ink-900);
  --text-muted: var(--mauve-500);
  --border-soft: rgba(14, 42, 32, 0.12);
  --border-gold: rgba(212, 175, 100, 0.5);
  --border-lilac: rgba(167, 194, 168, 0.5);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-script: "Yesteryear", cursive;

  --container-max: 1180px;
  --gutter: 24px;
  --bottom-nav-h: 64px;

  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  --shadow-soft: 0 20px 60px -30px rgba(41, 16, 47, 0.45);
  --shadow-card: 0 12px 32px -20px rgba(41, 16, 47, 0.26);

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

@media (min-width: 640px) {
  :root { --gutter: 40px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 56px; }
}

/* ---------------------------------------------------------------------- */
/* Custom Scrollbar — rainforest-green track, warm gold thumb              */
/* Applied via the universal selector so it reaches every scrollable       */
/* surface (the page itself, plus the Save to Phone / Share This Trip /    */
/* Album sheets) automatically — this only restyles a scrollbar an         */
/* element already has from its own overflow rules, it never creates one. */
/* ---------------------------------------------------------------------- */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--gold-500) var(--purple-900);
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: var(--purple-900);
}
*::-webkit-scrollbar-thumb {
  background: var(--gold-500);
  border-radius: var(--radius-full);
  border: 2px solid var(--purple-900);
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--gold-500) 0%, var(--yellow-500) 100%);
}

/* ---------------------------------------------------------------------- */
/* Luxe Scrapbook System — global tokens + reusable primitives             */
/* Layered on top of the token set above, not replacing it. Reused         */
/* everywhere: Fraunces (editorial serif), Yesteryear (handwritten/script  */
/* accent, used sparingly), and the gold/green palette above. The single   */
/* immersive scene image is Assets/img/background.png (a generated mood    */
/* image — never presented as an actual photo of Casa Bella).              */
/* ---------------------------------------------------------------------- */
:root {
  --paper-cream: #f3e9d2;
  --paper-cream-deep: #e6d7ac;
  --paper-line: rgba(90, 110, 60, 0.24);
  --ink-black: #1a1210;
  --ink-black-soft: #271c19;
  /* Renamed in spirit only — warm sunset coral, replacing the Luxe hotpink
     glow (script accents, the countdown's "complete" message, a couple of
     Home Base labels). */
  --luxe-hotpink: #ff8a5c;
  /* Horizontal on purpose (not an angled sweep): at an angle, a wide/short
     headline box can end up showing only a narrow diagonal slice of the
     gradient — which, depending on the box's aspect ratio, can land on the
     dark stop across the whole word instead of sweeping light-to-dark.
     Horizontal + background-size:100% keeps the mapping predictable: the
     full gradient always spans exactly the text's own width. */
  --foil-gold: linear-gradient(90deg, #b0854a 0%, #f7ecd4 20%, #f4c430 42%, #d4af64 58%, #f7ecd4 78%, #b0854a 100%);
  --shadow-paper: 0 16px 34px -16px rgba(20, 8, 14, 0.5), 0 3px 8px -2px rgba(20, 8, 14, 0.3);
  --shadow-paper-lift: 0 26px 50px -18px rgba(20, 8, 14, 0.55), 0 4px 10px -2px rgba(20, 8, 14, 0.32);
  --font-hand: var(--font-script);
}

/* Torn deckle edges — jagged, percentage-based clip-path so they scale
   with any card size. .torn-top jags the top edge only (most scrapbook
   cards in the references); .torn-all jags every edge (postcards, small
   accent notes). */
.torn-top {
  clip-path: polygon(
    0% 4%, 4% 1.4%, 8% 3.6%, 13% 0.6%, 18% 3.2%, 23% 1%, 28% 3.8%, 33% 0.8%,
    38% 3.4%, 43% 1.2%, 48% 3.6%, 53% 0.6%, 58% 3.4%, 63% 1%, 68% 3.8%,
    73% 0.8%, 78% 3.2%, 83% 1.4%, 88% 3.6%, 93% 0.6%, 97% 3%, 100% 1%,
    100% 100%, 0% 100%
  );
}
.torn-all {
  clip-path: polygon(
    0% 3%, 5% 0.5%, 10% 2.8%, 15% 0.8%, 20% 3.2%, 25% 1%, 30% 3.6%, 35% 0.6%,
    40% 3%, 45% 1.2%, 50% 3.4%, 55% 0.8%, 60% 3.2%, 65% 1%, 70% 3.6%, 75% 0.6%,
    80% 3%, 85% 1.4%, 90% 3.4%, 95% 0.8%, 100% 3%,
    99.3% 12%, 100% 22%, 99% 32%, 100% 42%, 99.3% 52%, 100% 62%, 99% 72%, 100% 82%, 99.3% 92%, 100% 97%,
    95% 100%, 90% 97.6%, 85% 99.6%, 80% 97.2%, 75% 99.5%, 70% 97.3%, 65% 99.6%, 60% 97.1%, 55% 99.5%, 50% 97.3%,
    45% 99.6%, 40% 97.1%, 35% 99.5%, 30% 97.3%, 25% 99.6%, 20% 97.1%, 15% 99.5%, 10% 97.3%, 5% 99.6%, 0% 97%,
    0.7% 92%, 0% 82%, 1% 72%, 0% 62%, 0.7% 52%, 0% 42%, 1% 32%, 0% 22%, 0.7% 12%, 0% 8%
  );
}

/* Aged-paper card — the base surface for every scrapbook element (glance
   cards, torn labels sit on top of it, photo mats). Fine grain + a warm
   cream gradient — translucent (see the Glass Card System below) so the
   fixed rainforest backdrop reads faintly through it, never flat white. */
.luxe-paper {
  position: relative;
  background:
    radial-gradient(rgba(120, 90, 40, 0.06) 0.6px, transparent 0.6px) 0 0/3px 3px,
    linear-gradient(155deg, rgba(243, 233, 210, 0.86) 0%, rgba(230, 215, 172, 0.82) 100%);
  box-shadow: var(--shadow-paper);
}

/* ==========================================================================
   PAGE BACKGROUND + GLASS CARD SYSTEM
   One fixed rainforest photo (puerto-rico-background.png) behind the whole
   scrolling experience, from Countdown through the Footer — the Hero keeps
   its own separate photo untouched. Every section below the Hero is
   transparent (see each section's own rule further down) so this single
   image reads as one continuous backdrop; every card floating on top of it
   is translucent + blurred ("glass") rather than a flat opaque block, so
   the forest stays visible around and faintly through the content.
   ========================================================================== */
:root {
  --glass-blur: 18px;
  --glass-border: rgba(212, 175, 100, 0.4);
  --glass-shadow: 0 26px 60px -26px rgba(5, 12, 9, 0.65);
}

.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(8, 18, 14, 0.72) 0%, rgba(8, 18, 14, 0.32) 16%, rgba(8, 18, 14, 0.38) 45%, rgba(8, 18, 14, 0.55) 75%, rgba(6, 14, 11, 0.8) 100%),
    url("../img/puerto-rico-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 60% 22%;
}
@media (min-width: 900px) {
  /* Wide screens crop the tall source image hard on cover; biasing toward
     the misty valley/sunset band (rather than a leaf close-up) keeps the
     visible slice atmospheric instead of a flat dark smear. */
  .page-bg { background-position: 60% 12%; }
}
/* background-attachment:fixed is scoped to desktop/tablet only — .page-bg
   is already position:fixed (never scrolls), so the property is redundant
   there, and on iOS Safari it's a known source of the background
   miscalculating its own size against the dynamic toolbar/viewport,
   rendering as an oversized, blurry, unrecognizable crop. Mobile relies on
   the element's own position:fixed alone, which is stable on iOS. */
@media (min-width: 760px) and (prefers-reduced-motion: no-preference) {
  .page-bg { background-attachment: fixed; }
}
@media (max-width: 759px) {
  /* Lighter overlay so the rainforest artwork actually reads as
     recognizable scenery in the open gaps between sections/cards on
     phones, where the darker desktop gradient above was crushing it into
     an indistinct dark smear. Text contrast is unaffected — every section
     heading/body sits on its own glass card, not bare on this layer. */
  .page-bg {
    background-image:
      linear-gradient(180deg, rgba(8, 18, 14, 0.42) 0%, rgba(8, 18, 14, 0.18) 16%, rgba(8, 18, 14, 0.22) 45%, rgba(8, 18, 14, 0.32) 75%, rgba(6, 14, 11, 0.5) 100%),
      url("../img/puerto-rico-background.png");
  }
}

/* Glass card surfaces — translucent + blurred, refined gold border, soft
   dark shadow. Applied on top of each component's own (now translucent)
   background color further down this file; this rule only adds the blur/
   border/shadow behavior shared by all of them. */
.luxe-paper,
.countdown-card,
.glance-card,
.journey-group,
.stay-feature-grid,
.weather-header,
.weather-single-tile,
.weather-day-card,
.weather-connect,
.day-card,
.style-edit-empty,
.crew-group,
.story-finale,
.album-card,
.requirements-card,
.scavenger-hunt-card,
.toolkit-card {
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}

/* Gold foil headline text — reuses the exact gradient-text-clip technique
   already established for the splash brand sweep, just static rather than
   animated (a foil headline should catch light, not visibly move). */
.luxe-foil-text {
  background-image: var(--foil-gold);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

/* Torn black label — the "NIKKI'S NOLARETTE" / "WEEKEND LINEUP" chips
   throughout the references: a strip of dark paper with a gold hairline,
   never a flat rectangle. */
.luxe-torn-label {
  position: relative;
  display: inline-block;
  background: linear-gradient(155deg, var(--ink-black) 0%, var(--ink-black-soft) 100%);
  border: 1px solid rgba(212, 175, 100, 0.5);
  box-shadow: var(--shadow-paper);
}

/* Postage-stamp treatment — dashed "perforated" border on aged paper. */
.luxe-stamp {
  position: relative;
  background: var(--paper-cream);
  border: 2px dashed rgba(90, 60, 20, 0.42);
  box-shadow: var(--shadow-paper);
}

/* Scrapbook button — dark torn-label body, gold hairline, lifts on hover
   rather than the site's usual flat hover-color-swap, to read as a
   physical object rather than a standard web control. */
.luxe-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  background: linear-gradient(155deg, var(--ink-black) 0%, var(--ink-black-soft) 100%);
  border: 1px solid var(--gold-500);
  color: var(--gold-300);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: var(--shadow-paper);
  transition: transform 0.3s var(--ease-editorial), box-shadow 0.3s var(--ease-editorial), color 0.3s ease;
}
.luxe-btn:hover, .luxe-btn:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-paper-lift); color: var(--gold-100); }
.luxe-btn svg { width: 15px; height: 15px; }

/* Paperclip accent — pinned to a card corner via .luxe-paperclip on the
   card (position:relative) wrapping an inline SVG (see ICONS.paperclip
   in app.js / the inline copy used in static hero markup). */
.luxe-paperclip {
  position: absolute;
  top: -16px;
  left: 20px;
  z-index: 3;
  width: 24px;
  height: 42px;
  color: #b9bdc4;
  filter: drop-shadow(0 3px 4px rgba(20, 8, 14, 0.35));
  transform: rotate(-8deg);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .luxe-btn { transition: color 0.3s ease; }
  .luxe-btn:hover, .luxe-btn:focus-visible { transform: none; }
}

/* ---------------------------------------------------------------------- */
/* Reset                                                                   */
/* ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  /* Dark fallback so there's no cream flash before .page-bg paints (or if
     the image fails to load) — the fixed rainforest photo is the real
     background for everything below the Hero. */
  background: #0e2019;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* iOS Home Screen / standalone launches use a different containing-block
   rule for `position: fixed`: an `overflow` value on <body> (even just
   overflow-x) makes <body> the containing block instead of the viewport,
   so fixed headers/nav scroll away with content. Regular Safari tabs are
   unaffected. Move the overflow containment to <html> only in that mode
   so normal browser behavior is untouched. */
@media (display-mode: standalone) {
  html { overflow-x: hidden; }
  body { overflow-x: visible; }
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-700);
}

.section-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 5vw, 42px);
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

.section-intro {
  max-width: 620px;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease-editorial), transform 0.8s var(--ease-editorial);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Visually-hidden but screen-reader-accessible text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------- */
/* Navigation                                                              */
/* ---------------------------------------------------------------------- */
/* Scroll offset for every in-page anchor destination — clears the fixed
   .site-nav bar (~70-76px tall) so each section's own heading is never
   hidden behind it after a nav click/tap, on any breakpoint. Covers the
   5 primary-nav targets plus #album (linked from the weather widget's
   "Visit the Shared Trip Album" CTA). */
#hero,
#home-base,
#lineup,
#dress-the-part,
#scavenger-hunt,
#album {
  scroll-margin-top: 90px;
}

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: max(18px, env(safe-area-inset-top)) var(--gutter) 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.4s var(--ease-editorial), box-shadow 0.4s var(--ease-editorial), padding 0.4s var(--ease-editorial);
}
.site-nav.is-scrolled {
  background: rgba(253, 251, 248, 0.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--border-soft);
  padding-top: max(12px, env(safe-area-inset-top));
  padding-bottom: 12px;
}

.brand-mark {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  transition: color 0.4s var(--ease-editorial);
  white-space: nowrap;
}
@media (max-width: 350px) {
  .brand-mark { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
.site-nav.is-scrolled .brand-mark { color: var(--ink-900); }

.nav-links {
  display: none;
  align-items: center;
  gap: 30px;
}
@media (min-width: 760px) {
  .nav-links { display: flex; }
}
/* Tablet-width fix: at 760-1023px, five nav links plus both utility
   buttons no longer fit at the wider desktop spacing/type-size — Share
   This Trip was overflowing off the right edge of the viewport,
   invisible and unclickable. Tighten spacing only in this range; 1024px+
   (the primary desktop target) is unchanged. */
@media (min-width: 760px) and (max-width: 1023px) {
  .nav-links { gap: 10px; }
  .nav-links a { font-size: 11px; letter-spacing: 0.06em; }
  .stp-trigger--nav,
  .share-trigger--nav { padding: 6px 9px; font-size: 10px; letter-spacing: 0.06em; }
}
.nav-links a {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 253, 250, 0.88);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.35s var(--ease-editorial), border-color 0.35s var(--ease-editorial);
}
.site-nav.is-scrolled .nav-links a { color: var(--ink-700); }
.nav-links a:hover,
.nav-links a.is-active {
  color: var(--purple-500);
  border-color: var(--purple-500);
}
.site-nav:not(.is-scrolled) .nav-links a:hover,
.site-nav:not(.is-scrolled) .nav-links a.is-active {
  color: var(--yellow-500);
  border-color: var(--yellow-500);
}

/* Save to Phone — nav trigger buttons */
.stp-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
}
.stp-trigger-icon { display: inline-flex; width: 14px; height: 14px; }
.stp-trigger-icon svg { width: 100%; height: 100%; }

.stp-trigger:focus-visible,
.share-trigger:focus-visible {
  outline: 2px solid var(--yellow-500);
  outline-offset: 3px;
  border-radius: var(--radius-full);
}
.site-nav.is-scrolled .stp-trigger:focus-visible,
.site-nav.is-scrolled .share-trigger:focus-visible {
  outline-color: var(--gold-600);
}

.stp-trigger--nav {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 253, 250, 0.4);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 253, 250, 0.92);
  transition: color 0.35s var(--ease-editorial), border-color 0.35s var(--ease-editorial), background-color 0.35s var(--ease-editorial);
}
.stp-trigger--nav:hover { border-color: var(--yellow-500); color: var(--yellow-500); }
.site-nav.is-scrolled .stp-trigger--nav { border-color: var(--border-gold); color: var(--gold-700); }
.site-nav.is-scrolled .stp-trigger--nav:hover { background: var(--gold-100); border-color: var(--gold-600); }

.stp-trigger--mobile-top {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--white);
  transition: color 0.35s var(--ease-editorial);
}
.stp-trigger--mobile-top .stp-trigger-icon { width: 19px; height: 19px; }
.site-nav.is-scrolled .stp-trigger--mobile-top { color: var(--ink-900); }
.stp-trigger--mobile-top:hover { color: var(--yellow-500); }
.site-nav.is-scrolled .stp-trigger--mobile-top:hover { color: var(--gold-700); }
@media (min-width: 760px) {
  .stp-trigger--mobile-top { display: none; }
}

.stp-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  right: -6px;
  z-index: 5;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  width: max-content;
  max-width: 172px;
  padding: 9px 13px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--purple-900) 0%, var(--purple-700) 100%);
  border: 1px solid rgba(212, 175, 100, 0.45);
  box-shadow: var(--shadow-soft);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ivory-100);
  text-align: left;
  white-space: normal;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.45s var(--ease-editorial), transform 0.45s var(--ease-editorial);
}
.stp-tooltip::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 18px;
  width: 10px;
  height: 10px;
  background: var(--purple-900);
  border-left: 1px solid rgba(212, 175, 100, 0.45);
  border-top: 1px solid rgba(212, 175, 100, 0.45);
  transform: rotate(45deg);
}
.stp-tooltip-arrow { color: var(--yellow-500); flex: none; }
.stp-tooltip.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .stp-tooltip { transition: opacity 0.3s ease; transform: none; }
}

/* Share This Trip — nav trigger buttons (same visual language) */
.share-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
}
.share-trigger-icon { display: inline-flex; width: 14px; height: 14px; }
.share-trigger-icon svg { width: 100%; height: 100%; }

.share-trigger--nav {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 253, 250, 0.4);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 253, 250, 0.92);
  transition: color 0.35s var(--ease-editorial), border-color 0.35s var(--ease-editorial), background-color 0.35s var(--ease-editorial);
}
.share-trigger--nav:hover { border-color: var(--yellow-500); color: var(--yellow-500); }
.site-nav.is-scrolled .share-trigger--nav { border-color: var(--border-gold); color: var(--gold-700); }
.site-nav.is-scrolled .share-trigger--nav:hover { background: var(--gold-100); border-color: var(--gold-600); }

.share-trigger--mobile-top {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--white);
  transition: color 0.35s var(--ease-editorial);
}
.share-trigger--mobile-top .share-trigger-icon { width: 19px; height: 19px; }
.site-nav.is-scrolled .share-trigger--mobile-top { color: var(--ink-900); }
.share-trigger--mobile-top:hover { color: var(--yellow-500); }
.site-nav.is-scrolled .share-trigger--mobile-top:hover { color: var(--gold-700); }
@media (min-width: 760px) {
  .share-trigger--mobile-top { display: none; }
}

/* One-time discovery tooltip for the mobile icon-only Share trigger —
   same visual language and behavior as .stp-tooltip, staggered to appear
   after the Save tooltip finishes (see share-trip.js) so the two never
   overlap on a narrow phone screen. */
.share-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  right: -6px;
  z-index: 5;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  width: max-content;
  max-width: 172px;
  padding: 9px 13px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--purple-900) 0%, var(--purple-700) 100%);
  border: 1px solid rgba(212, 175, 100, 0.45);
  box-shadow: var(--shadow-soft);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ivory-100);
  text-align: left;
  white-space: normal;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.45s var(--ease-editorial), transform 0.45s var(--ease-editorial);
}
.share-tooltip::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 18px;
  width: 10px;
  height: 10px;
  background: var(--purple-900);
  border-left: 1px solid rgba(212, 175, 100, 0.45);
  border-top: 1px solid rgba(212, 175, 100, 0.45);
  transform: rotate(45deg);
}
.share-tooltip-arrow { color: var(--yellow-500); flex: none; }
.share-tooltip.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .share-tooltip { transition: opacity 0.3s ease; transform: none; }
}

/* Fixed bottom navigation — mobile / small tablet only */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  background: rgba(253, 251, 248, 0.97);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid var(--border-gold);
  box-shadow: 0 -10px 30px -14px rgba(41, 16, 47, 0.32);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 760px) {
  .bottom-nav { display: none; }
}

/* Five items, one row, always — flex:1 divides the width evenly, min-width:0
   lets each item shrink below its content's natural width (the default
   flex min-width:auto is exactly what would force wrapping/overflow with
   five full two-word labels on a narrow phone), and the label rules below
   size/space text down just enough to fit without ever wrapping. */
.bottom-nav-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--bottom-nav-h);
  padding: 8px 1px 7px;
  color: var(--mauve-500);
}
.bottom-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: none;
  transition: background-color 0.3s var(--ease-editorial), color 0.3s var(--ease-editorial);
}
.bottom-nav-icon svg { width: 16px; height: 16px; }
.bottom-nav-label {
  max-width: 100%;
  font-size: clamp(7.5px, 2.6vw, 9.5px);
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  transition: color 0.3s var(--ease-editorial);
}
@media (max-width: 360px) {
  .bottom-nav-label { font-size: 7.5px; }
}
.bottom-nav-item.is-active .bottom-nav-icon { background: var(--lilac-200); color: var(--purple-600); }
.bottom-nav-item.is-active .bottom-nav-label { color: var(--purple-700); font-weight: 700; }
.bottom-nav-item:focus-visible { outline: 2px solid var(--yellow-500); outline-offset: -2px; border-radius: 10px; }

/* ---------------------------------------------------------------------- */
/* Luxe Opening — cinematic splash sequence                               */
/* Shares the NOLA environment image with the Luxe Hero below (via the    */
/* .luxe-scene* / .luxe-eyebrow / .luxe-headline / .luxe-script / .luxe-  */
/* dates base classes, reused with different positioning per context) so */
/* the exit transition reads as one continuous world, not two screens.   */
/* Session-once / skip / readiness-gating lifecycle is owned by          */
/* splash.js; this file only defines the visual states it toggles via    */
/* .is-leaving / .is-hidden.                                             */
/* ---------------------------------------------------------------------- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ivory-100);
  overflow: hidden;
  padding:
    max(32px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(32px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
  /* Deep rainforest-green base — matches .hero's own gradient exactly so
     the final dissolve (splash.is-leaving) never shows a color jump. Sits
     beneath the blurred scene photo/scrim/glow layers, visible only as a
     fallback before the photo fades in (or if it fails to load). */
  background: linear-gradient(160deg, var(--purple-900) 0%, var(--purple-800) 38%, var(--purple-700) 68%, var(--purple-600) 100%);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.splash::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.35;
  background-image: radial-gradient(rgba(233, 205, 147, 0.3) 0.7px, transparent 0.7px);
  background-size: 22px 22px;
  pointer-events: none;
}
.splash.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.splash[hidden] { display: none; }

/* Scene — the shared immersive background (background.png, a generated
   rainforest-villa-at-sunset mood image, never presented as a real photo
   of Casa Bella). .luxe-scene is the layer that gets the exit
   "zoom-through"; .luxe-scene-photo underneath carries its own
   independent continuous drift so the two transforms never fight. */
.luxe-scene { position: absolute; inset: 0; z-index: 0; }
.luxe-scene-photo {
  position: absolute;
  inset: -4%;
  background-repeat: no-repeat;
  background-image: url("../img/background.png");
  background-size: cover;
}
.splash .luxe-scene-photo {
  background-position: 45% 32%;
  opacity: 0;
  animation:
    luxe-scene-fade-in 1.1s var(--ease-editorial) 0s 1 backwards,
    luxe-scene-drift 48s ease-in-out 0s infinite alternate;
}
@keyframes luxe-scene-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes luxe-scene-drift { from { transform: scale(1); } to { transform: scale(1.07); } }

.luxe-scene-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(65% 55% at 50% 42%, rgba(15, 6, 20, 0.28) 0%, rgba(15, 6, 20, 0.5) 65%, rgba(10, 4, 14, 0.82) 100%),
    linear-gradient(180deg, rgba(20, 8, 26, 0.55) 0%, rgba(20, 8, 26, 0.15) 30%, rgba(20, 8, 26, 0.35) 60%, rgba(10, 4, 14, 0.75) 100%);
}
.luxe-scene-grain {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255, 255, 255, 0.5) 0.6px, transparent 0.6px);
  background-size: 3px 3px;
  pointer-events: none;
}

.luxe-glints { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.luxe-glint {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(244, 196, 48, 0.95) 0%, rgba(244, 196, 48, 0.35) 45%, rgba(244, 196, 48, 0) 75%);
  animation: luxe-glint-twinkle 7s ease-in-out infinite;
}
@keyframes luxe-glint-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50% { opacity: 0.6; transform: scale(1); }
}

/* Typography hierarchy — shared by the opening and the hero; each context
   supplies its own sizing/position, defined alongside .splash / .luxe-hero. */
.splash-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; max-width: 480px; }

/* Torn black label wrapping the eyebrow (see hero-header.png /
   itinerary.png — "NIKKI'S NOLARETTE" is never bare text, always a strip
   of dark torn paper). */
.luxe-eyebrow-label {
  padding: 9px 18px;
  transform: rotate(-1.2deg);
}
.luxe-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-300);
}
/* Headline — gold foil, not flat gold. */
.luxe-headline {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.02;
  background-image: var(--foil-gold);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* text-shadow, not filter:drop-shadow — a filter forces a new
     compositing pass that (in at least one tested engine) rasterizes
     transparent gradient-clipped text as solid black before the shadow is
     applied, silently killing the gold fill. text-shadow paints beneath
     the glyphs without touching the fill, so it's the safe pairing with
     background-clip:text. */
  text-shadow: 0 2px 4px rgba(8, 4, 10, 0.55), 0 10px 26px rgba(8, 4, 10, 0.35);
}
.luxe-script { font-family: var(--font-script); line-height: 1; }
.luxe-script--signature {
  margin: 4px 0 0;
  color: #ffb37a;
}

/* Torn black card wrapping the dates + secondary script (see the "SEPTEMBER
   4-6, 2026 / Laissez les bons temps rouler" card in hero-header.png). */
.luxe-meta-label {
  padding: 14px 22px;
  transform: rotate(0.8deg);
}
.luxe-dates {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--yellow-300);
}
@keyframes luxe-rise-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.luxe-script--secondary { display: block; color: var(--gold-100); text-shadow: 0 0 10px rgba(233, 205, 147, 0.25); }

/* ---------------------------------------------------------------------- */
/* Opening monogram — thin gold ring "sketches in" around the crowned JaX */
/* wordmark (the same mark used site-wide, see the app icon), then a      */
/* short brand tagline settles in beneath it. Sits over a heavily         */
/* blurred, darkened crop of the hero photo (reusing .luxe-scene-photo's  */
/* cover/no-repeat/background.png base) plus a soft coral glow — kept     */
/* subdued behind the .splash-glow layer so neither competes with type.   */
/* ---------------------------------------------------------------------- */
.splash-scene-photo {
  filter: blur(34px) brightness(0.42) saturate(90%);
  transform: scale(1.18);
  background-position: 45% 35%;
  opacity: 0;
  animation: splash-scene-fade-in 0.8s var(--ease-editorial) 0s 1 forwards;
}
@keyframes splash-scene-fade-in { from { opacity: 0; } to { opacity: 1; } }

.splash-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(42% 36% at 50% 46%, rgba(240, 135, 63, 0.24) 0%, rgba(240, 135, 63, 0) 70%);
  opacity: 0;
  animation: splash-fade-in 0.9s ease 0.1s 1 forwards;
  pointer-events: none;
}
@keyframes splash-fade-in { from { opacity: 0; } to { opacity: 1; } }

.splash-monogram { position: relative; width: 132px; height: 132px; margin: 0 auto; }
.splash-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.splash-ring-track, .splash-ring-draw { fill: none; stroke-width: 1.5; }
.splash-ring-track { stroke: rgba(212, 175, 100, 0.22); }
.splash-ring-draw {
  stroke: var(--gold-500);
  stroke-linecap: round;
  stroke-dasharray: 490;
  stroke-dashoffset: 490;
  animation: splash-ring-draw 0.85s var(--ease-editorial) 0.15s 1 forwards;
}
@keyframes splash-ring-draw { to { stroke-dashoffset: 0; } }

.splash-mark {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 0;
  animation: splash-rise-fade 0.5s var(--ease-editorial) 0.65s 1 forwards;
}
.splash-crown { width: 26px; height: 14px; color: var(--gold-500); }
.splash-crown path { fill: currentColor; }
.splash-mark-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 30px;
  line-height: 1;
  background-image: var(--foil-gold);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@keyframes splash-rise-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.splash-tagline {
  margin: 28px 0 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 3.2vw, 18px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-100);
  opacity: 0;
  animation: splash-rise-fade 0.5s var(--ease-editorial) 0.85s 1 forwards;
}
.splash-subline {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-300);
  opacity: 0;
  animation: splash-rise-fade 0.5s var(--ease-editorial) 1s 1 forwards;
}
.splash-x { color: var(--yellow-500); margin: 0 2px; }
.splash-meta {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(226, 236, 221, 0.62);
  opacity: 0;
  animation: splash-rise-fade 0.5s var(--ease-editorial) 1s 1 forwards;
}
.splash-dot { color: var(--yellow-500); margin: 0 2px; }

.splash-rule {
  display: block;
  width: 64px;
  height: 1px;
  margin: 26px auto 0;
  overflow: hidden;
  background: rgba(212, 175, 100, 0.18);
}
.splash-rule-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left;
  animation: splash-rule-fill 0.5s var(--ease-editorial) 1.2s 1 forwards;
}
@keyframes splash-rule-fill { to { transform: scaleX(1); } }

.splash-skip {
  position: absolute;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(28px, env(safe-area-inset-bottom));
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid rgba(233, 205, 147, 0.35);
  border-radius: 999px;
  padding: 9px 16px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-300);
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.3s ease, border-color 0.2s ease, background 0.2s ease;
  animation: luxe-rise-fade 0.6s ease-out 0.4s 1 backwards;
}
.splash-skip:hover, .splash-skip:focus-visible { border-color: var(--gold-300); background: rgba(233, 205, 147, 0.08); }
.splash-skip:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 2px; }
.splash-skip-arrow { display: inline-block; transition: transform 0.2s ease; }
.splash-skip:hover .splash-skip-arrow, .splash-skip:focus-visible .splash-skip-arrow { transform: translateX(3px); }

/* Exit choreography — triggered by splash.js before final .is-hidden.
   Targets wrapper layers only (never an element with its own infinite
   animation), so the exit transition never fights a running animation. */
.splash.is-leaving .luxe-scene {
  transition: transform 0.85s var(--ease-editorial), opacity 0.85s var(--ease-editorial);
  transform: scale(1.16);
  opacity: 0.12;
}
.splash.is-leaving .luxe-scene-scrim { transition: opacity 0.6s ease; opacity: 0; }
.splash.is-leaving .splash-glow { transition: opacity 0.5s ease; opacity: 0; }
.splash.is-leaving .splash-content,
.splash.is-leaving .splash-skip {
  transition: opacity 0.45s ease, transform 0.45s var(--ease-editorial);
  opacity: 0;
  transform: translateY(-8px);
}

@media (prefers-reduced-motion: reduce) {
  .splash { transition: opacity 0.3s ease, visibility 0.3s ease; }
  .splash-scene-photo { animation: splash-scene-fade-in 0.3s ease 0s 1 forwards; }
  .splash-glow,
  .splash-mark,
  .splash-tagline,
  .splash-subline,
  .splash-meta {
    animation: splash-fade-in 0.3s ease 0s 1 forwards;
  }
  .splash-ring-draw { stroke-dashoffset: 0; animation: none; }
  .splash-rule-fill { transform: scaleX(1); animation: none; }
}

/* ---------------------------------------------------------------------- */
/* Hero — full-bleed immersive photography, centered copy                 */
/* No collage photo card (no single traveler to feature for a group trip) */
/* — just the shared scene, torn labels, a foil headline, a large gold    */
/* leaf accent, a wax-seal badge (city/state), and a postage stamp.       */
/* Reveal is gated behind .is-revealed — see setupLuxeHeroReveal() in     */
/* app.js.                                                                 */
/* ---------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  color: var(--white);
  overflow: hidden;
  background: linear-gradient(160deg, var(--purple-900) 0%, var(--purple-800) 38%, var(--purple-700) 68%, var(--purple-600) 100%);
}

.hero .luxe-scene-photo {
  background-position: 45% 32%;
  transform-origin: center;
  /* Dedicated keyframe (not the shared luxe-scene-drift the splash screen
     uses) so the hero's cinematic zoom can be tuned — duration, end scale —
     without touching the splash's own drift. */
  animation: hero-ken-burns 22s ease-in-out 0s infinite alternate;
}
@keyframes hero-ken-burns {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}
@media (min-width: 760px) {
  .hero .luxe-scene-photo { background-position: 42% 30%; }
}
@media (min-width: 1200px) {
  .hero .luxe-scene-photo { background-position: 40% 28%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .luxe-scene-photo { animation: none; }
}

.hero .luxe-scene-grain { opacity: 0.28; }

.hero .luxe-glint--1 { top: 18%; left: 10%; width: 6px; height: 6px; animation-delay: 0s; animation-duration: 6.5s; }
.hero .luxe-glint--2 { top: 26%; left: 40%; width: 5px; height: 5px; animation-delay: 2.2s; animation-duration: 7.8s; }
@media (prefers-reduced-motion: reduce) { .hero .luxe-glints { display: none; } }

.luxe-hero-stage {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 128px var(--gutter) 64px;
}

.luxe-hero-copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-shadow: 0 1px 2px rgba(8, 4, 10, 0.85), 0 2px 10px rgba(8, 4, 10, 0.6), 0 6px 26px rgba(8, 4, 10, 0.45);
  opacity: 0;
  transform: translateY(18px);
}
.hero .luxe-headline { font-size: clamp(48px, 11vw, 96px); margin-top: 12px; }
.hero .luxe-script--signature {
  font-size: clamp(38px, 8.6vw, 68px);
  margin-top: 4px;
  text-shadow:
    0 0 6px rgba(255, 180, 225, 0.9),
    0 0 16px rgba(255, 120, 210, 0.75),
    0 0 34px rgba(190, 100, 255, 0.55),
    0 0 60px rgba(150, 70, 220, 0.35);
}
.hero .luxe-meta-label { margin-top: 20px; }
.hero .luxe-script--secondary { margin-top: 6px; font-size: clamp(15px, 2.4vw, 18px); }

/* Large gold leaf accent, bottom-right — the site's signature motif,
   replacing the Master's fleur-de-lis (a Louisiana/NOLA symbol). */
.luxe-hero-fleur {
  position: absolute;
  z-index: 1;
  bottom: 6%;
  right: 4%;
  width: 64px;
  height: 64px;
  color: var(--gold-500);
  filter: drop-shadow(0 6px 14px rgba(8, 4, 10, 0.55));
  opacity: 0.9;
  pointer-events: none;
}
.luxe-hero-fleur svg { width: 100%; height: 100%; }

/* Wax-seal badge — city/state rendered from TRIP.destination (see
   renderHero() in app.js), never hardcoded, so a future Luxe itinerary in
   a different city needs no CSS/markup change here. */
.luxe-hero-seal {
  position: absolute;
  z-index: 3;
  left: 5%;
  bottom: 6%;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: radial-gradient(circle, rgba(41, 16, 47, 0.88) 0%, rgba(41, 16, 47, 0.7) 75%, rgba(41, 16, 47, 0.4) 100%);
  border: 1.5px solid var(--gold-500);
  box-shadow: 0 6px 16px rgba(8, 4, 10, 0.5);
  text-align: center;
  padding: 8px;
}
.luxe-hero-seal-city { font-size: 8px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-300); line-height: 1.15; }
.luxe-hero-seal svg { width: 18px; height: 18px; color: var(--gold-500); }
.luxe-hero-seal-state { font-size: 7px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-100); }

/* Postage-stamp accent, tucked beside the seal. */
.luxe-hero-postmark {
  position: absolute;
  z-index: 3;
  left: calc(5% + 100px);
  bottom: 7%;
  width: 58px;
  height: 70px;
  display: none;
  align-items: center;
  justify-content: center;
  transform: rotate(-6deg);
}
.luxe-hero-postmark svg { width: 22px; height: 22px; color: var(--ink-black); opacity: 0.55; }

.hero.is-revealed .luxe-hero-copy {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.9s var(--ease-editorial) 0.05s, transform 0.9s var(--ease-editorial) 0.05s;
}
@media (prefers-reduced-motion: reduce) {
  .luxe-hero-copy { transition: opacity 0.3s ease !important; transform: none !important; }
}

@media (min-width: 760px) {
  .luxe-hero-postmark { display: flex; }
}

.hero-scroll-cue {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255, 253, 250, 0.75);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.hero-scroll-cue .line {
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0));
  animation: cue-pulse 2.2s ease-in-out infinite;
}
@keyframes cue-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

.hero-transition {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  line-height: 0;
  z-index: 3;
}
.hero-transition svg { width: 100%; height: 60px; display: block; }
.hero-transition path { fill: #0e2019; }

/* ---------------------------------------------------------------------- */
/* Trip Countdown + "Nolarette at a Glance" — countdown.png                */
/* A dark, textured scrapbook surface (not a cream page) carrying the      */
/* hero's night straight through — one large torn paper card holds the     */
/* live countdown AND the "NOLARETTE / AT A GLANCE" title together (as     */
/* countdown.png does), with the four info cards as their own smaller      */
/* torn cards in .glance directly below, on the same unbroken dark ground. */
/* Typography correction from the previous pass: script is now a small,   */
/* deliberate accent ("AT A GLANCE" only) — every functional heading and   */
/* label (the countdown eyebrow, "NOLARETTE", and all four card labels)    */
/* is bold, large, and set in Fraunces/Inter, never script.                */
/* ---------------------------------------------------------------------- */
.countdown {
  position: relative;
  overflow: hidden;
  padding: 64px 0 32px;
  background: radial-gradient(120% 70% at 20% 0%, rgba(244, 196, 48, 0.12) 0%, rgba(244, 196, 48, 0) 55%);
}
.countdown::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: radial-gradient(rgba(233, 205, 147, 0.35) 0.7px, transparent 0.7px);
  background-size: 22px 22px;
  pointer-events: none;
}


.countdown-card {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  transform: rotate(-0.5deg);
}

.countdown-inner { display: contents; }

.countdown-eyebrow {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(15px, 2.6vw, 19px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-black);
}

.countdown-values {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 16px;
  justify-content: center;
}
.countdown-values[hidden] { display: none; }

.countdown-unit { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 64px; }
.countdown-number {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 12px 8px;
  border-radius: 10px;
  background: linear-gradient(155deg, var(--ink-black) 0%, var(--purple-900) 100%);
  border: 1.5px solid var(--gold-500);
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 42px);
  font-weight: 600;
  line-height: 1;
  color: var(--ivory-50);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 10px 20px -8px rgba(20, 8, 14, 0.6);
}
.countdown-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-700);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .countdown-values { gap: clamp(8px, 2.6vw, 12px); }
  .countdown-unit { min-width: 0; gap: 5px; }
  .countdown-number { min-width: 50px; font-size: clamp(21px, 6.6vw, 28px); padding: 10px 4px; }
  .countdown-label { font-size: clamp(8px, 2.1vw, 10px); letter-spacing: 0.08em; }
}

.countdown-complete { font-family: var(--font-script); font-size: clamp(26px, 4.6vw, 32px); color: var(--luxe-hotpink); }

/* "NOLARETTE" — massive bold display headline, and "AT A GLANCE" — the
   one deliberate script accent, flanked by fleur-de-lis. */
.countdown-title {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.countdown-title-main {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  font-size: clamp(46px, 11vw, 92px);
  line-height: 0.94;
  color: var(--ink-black);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 3px 0 rgba(41, 16, 47, 0.12);
}
.countdown-title-script {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-script);
  font-size: clamp(30px, 6.6vw, 52px);
  color: var(--luxe-hotpink);
}
.countdown-title-script svg { width: 22px; height: 22px; color: var(--gold-500); flex: none; }

/* ---------------------------------------------------------------------- */
/* The Nolarette at a Glance — same dark ground as Countdown, no seam.    */
/* Cards are torn-top aged paper, pinned with a paperclip, topped by a    */
/* bold (never script) tracked label and a small gold heart divider.      */
/* ---------------------------------------------------------------------- */
.glance { position: relative; padding: 12px 0 76px; }

.glance-header { display: none; }

.glance-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
@media (min-width: 700px) { .glance-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

.glance-card {
  position: relative;
  background: linear-gradient(155deg, rgba(255, 253, 248, 0.85) 0%, rgba(230, 215, 172, 0.8) 130%);
  border: 1px solid var(--paper-line);
  padding: 30px 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  box-shadow: var(--shadow-paper);
  transition: transform 0.3s var(--ease-editorial), box-shadow 0.3s var(--ease-editorial);
}
.glance-card:nth-child(odd) { transform: rotate(-0.8deg); }
.glance-card:nth-child(even) { transform: rotate(0.7deg); }
.glance-card:hover, .glance-card:focus-within { transform: rotate(0deg) translateY(-3px); box-shadow: var(--shadow-paper-lift); }
.glance-card .icon { width: 26px; height: 26px; color: var(--purple-600); }
.glance-card .label {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--purple-700);
}
.glance-card .divider { width: 30px; height: 12px; color: var(--gold-500); }
.glance-card .value { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--ink-black); line-height: 1.32; }
.glance-card .stamp {
  position: absolute;
  right: 10px;
  bottom: 8px;
  width: 34px;
  height: 34px;
  color: var(--purple-700);
  opacity: 0.14;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .glance-card { transition: box-shadow 0.3s ease; }
  .glance-card:hover, .glance-card:focus-within { transform: inherit; }
}

/* ---------------------------------------------------------------------- */
/* The Journey — restored from the JazzeeXscapes Master (Jania's 46th      */
/* Birthday Escape)'s Journey component. A static, point-in-time display   */
/* of a single tentative group flight option — NOT live flight/fare        */
/* tracking, and never a requirement (hostExplanation says so). Sits on    */
/* the plain page ground; the flight card itself is the dark, richly-      */
/* detailed surface.                                                       */
/* ---------------------------------------------------------------------- */
.journey { padding: 8px 0 88px; }
.journey-header { text-align: center; max-width: 560px; margin: 0 auto 44px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.journey-header .eyebrow { color: var(--gold-300); }
.journey-header .section-heading { color: var(--ivory-50); }

.journey-groups { display: flex; flex-direction: column; gap: 32px; }

.journey-group {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(14, 42, 32, 0.82) 0%, rgba(18, 54, 38, 0.78) 55%, rgba(23, 67, 47, 0.74) 130%);
  border: 1px solid rgba(212, 175, 100, 0.35);
  border-radius: var(--radius-lg);
  padding: 32px 22px 30px;
  box-shadow: 0 30px 70px -30px rgba(6, 14, 11, 0.65);
}
@media (min-width: 700px) { .journey-group { padding: 48px 48px 44px; } }
.journey-group::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(212, 175, 100, 0.22);
  border-radius: calc(var(--radius-lg) - 6px);
  pointer-events: none;
}

.journey-group-header { position: relative; max-width: 60ch; margin-bottom: 30px; }
.journey-host-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-300);
  background: rgba(212, 175, 100, 0.16);
  border: 1px solid rgba(212, 175, 100, 0.4);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 14px;
}
.journey-host-explanation { font-size: 14.5px; line-height: 1.7; color: rgba(226, 236, 221, 0.82); }

.journey-legs { position: relative; display: flex; flex-direction: column; gap: 26px; }
@media (min-width: 760px) {
  .journey-legs { flex-direction: row; gap: 28px; }
  .journey-legs .journey-leg { flex: 1; min-width: 0; }
}

.journey-leg { position: relative; padding-top: 22px; border-top: 1px solid rgba(212, 175, 100, 0.25); }
.journey-legs .journey-leg:first-child { padding-top: 0; border-top: none; }
@media (min-width: 760px) {
  .journey-legs .journey-leg { padding-top: 0; border-top: none; }
  .journey-legs .journey-leg:not(:first-child) { padding-left: 28px; border-left: 1px solid rgba(212, 175, 100, 0.25); }
}

.journey-leg-top { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.journey-leg-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-300); }
.journey-leg-route-label { font-family: var(--font-display); font-size: 17px; font-style: italic; color: var(--white); }
.journey-leg-arrow { color: var(--gold-300); font-style: normal; }
.journey-leg-date { font-size: 12.5px; letter-spacing: 0.04em; color: rgba(226, 236, 221, 0.65); }

.journey-route { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.journey-route-point { display: flex; flex-direction: column; gap: 3px; flex: none; }
.journey-route-point--arrival { text-align: right; align-items: flex-end; }
.journey-airport-code { font-family: var(--font-display); font-size: clamp(20px, 4vw, 28px); font-weight: 500; letter-spacing: 0.02em; color: var(--white); }
.journey-route-time { font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(226, 236, 221, 0.75); white-space: nowrap; }

.journey-route-line { position: relative; flex: 1; height: 16px; min-width: 32px; }
.journey-route-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(212, 175, 100, 0.15) 0%, rgba(212, 175, 100, 0.65) 50%, rgba(212, 175, 100, 0.15) 100%);
  transform: translateY(-50%);
}
.journey-route-dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7e6 0%, var(--gold-300) 55%, rgba(233, 205, 147, 0) 80%);
  box-shadow: 0 0 7px 1px rgba(233, 205, 147, 0.6);
  animation: journey-dot-travel 5s ease-in-out infinite;
}
@keyframes journey-dot-travel {
  0%   { left: 0%;   opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-route-dot { animation: none; left: 50%; opacity: 0.85; }
}

.journey-connections { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 14px; }
.journey-connection {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: rgba(212, 175, 100, 0.12);
  border: 1px solid rgba(212, 175, 100, 0.3);
}
.journey-connection-airport { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--gold-300); text-transform: uppercase; }
.journey-connection-layover { position: relative; padding-left: 11px; font-size: 11px; color: rgba(226, 236, 221, 0.75); }
.journey-connection-layover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(226, 236, 221, 0.45);
  transform: translateY(-50%);
}

.journey-leg-details { display: flex; flex-wrap: wrap; gap: 16px 26px; }
.journey-detail { display: flex; flex-direction: column; gap: 3px; }
.journey-detail-label { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(226, 236, 221, 0.5); }
.journey-detail-value { font-size: 13.5px; color: var(--white); }

.journey-fare { margin-top: 32px; padding-top: 26px; border-top: 1px solid rgba(212, 175, 100, 0.25); }
.journey-fare-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(226, 236, 221, 0.55); margin-bottom: 6px; }
.journey-fare-amount { font-family: var(--font-display); font-size: clamp(24px, 4vw, 30px); color: var(--gold-300); }
.journey-fare-type { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(226, 236, 221, 0.6); margin-left: 4px; }
.journey-fare-disclaimer { margin-top: 8px; font-size: 12px; font-style: italic; color: rgba(226, 236, 221, 0.55); max-width: 46ch; }

.journey-guidance {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding-top: 26px;
  border-top: 1px solid rgba(212, 175, 100, 0.25);
}
@media (min-width: 640px) { .journey-guidance { grid-template-columns: repeat(2, 1fr); gap: 26px; } }
.journey-guidance-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-300); margin-bottom: 6px; }
.journey-guidance-item p { font-size: 13.5px; line-height: 1.6; color: rgba(226, 236, 221, 0.8); }

.journey-coordination-note {
  margin-top: 24px;
  padding: 14px 18px;
  border-left: 3px solid var(--yellow-500);
  background: rgba(240, 135, 63, 0.08);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.journey-coordination-note p { font-size: 12.5px; line-height: 1.6; font-style: italic; color: rgba(226, 236, 221, 0.85); max-width: 62ch; }

.journey-cta-row { margin-top: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.journey-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: var(--radius-full);
  background: var(--gold-300);
  color: var(--purple-900);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.3s var(--ease-editorial);
}
.journey-cta svg { width: 14px; height: 14px; }
a.journey-cta:hover { background: var(--gold-100); }
.journey-cta.is-pending { background: none; border: 1px solid rgba(212, 175, 100, 0.4); color: var(--gold-300); }
.journey-pending-pill { color: rgba(226, 236, 221, 0.6); border-color: rgba(167, 194, 168, 0.3); }

/* ---------------------------------------------------------------------- */
/* Home Base — Luxe hotel-folio / room-key scrapbook (hotel.png). One      */
/* torn paper folio (the whole .stay-feature-grid) holds both halves —    */
/* #stayCard and #stayInfo keep their existing IDs/render targets, just   */
/* restyled as columns inside the folio instead of two separate cards.    */
/* ---------------------------------------------------------------------- */
.stay-feature { position: relative; overflow: hidden; padding: 16px 0 96px; }
.stay-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image: radial-gradient(rgba(233, 205, 147, 0.3) 0.7px, transparent 0.7px);
  background-size: 22px 22px;
  pointer-events: none;
}
.stay-feature-header { position: relative; z-index: 1; max-width: 640px; margin: 0 auto 48px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.stay-feature-header .eyebrow { color: var(--gold-300); }
.stay-feature-header .section-heading { color: var(--ivory-50); }
.stay-feature-header .section-intro { text-align: center; color: var(--lilac-300); font-size: 15.5px; }

/* Outer folio — torn-paper background/shadow/clip-path only now; the grid
   layout moved to .stay-feature-body so .stay-feature-image can bleed
   full-width across the top, above the padded two-column content, while
   still being clipped by the same torn top edge as the rest of the card. */
.stay-feature-grid {
  position: relative;
  z-index: 1;
  background: linear-gradient(155deg, rgba(255, 253, 248, 0.85) 0%, rgba(230, 215, 172, 0.8) 130%);
  box-shadow: var(--shadow-paper-lift);
  transform: rotate(-0.3deg);
  overflow: hidden;
  clip-path: polygon(
    0% 2.5%, 5% 0.4%, 10% 2.4%, 15% 0.6%, 20% 2.8%, 25% 0.8%, 30% 3%, 35% 0.5%,
    40% 2.6%, 45% 1%, 50% 2.8%, 55% 0.6%, 60% 2.6%, 65% 0.8%, 70% 3%, 75% 0.5%,
    80% 2.4%, 85% 1.2%, 90% 2.8%, 95% 0.6%, 100% 2.4%,
    100% 97.6%, 95% 99.4%, 90% 97.2%, 85% 99.6%, 80% 97.4%, 75% 99.5%, 70% 97%,
    65% 99.4%, 60% 97.2%, 55% 99.6%, 50% 97.2%, 45% 99.4%, 40% 97%, 35% 99.5%,
    30% 97.4%, 25% 99.6%, 20% 97.2%, 15% 99.4%, 10% 97%, 5% 99.5%, 0% 97.6%
  );
}

/* The traveler's own selected villa photo — natural proportions preserved
   (no forced aspect-ratio, no object-fit crop), a thin champagne-gold line
   and restrained shadow separating it from the card body instead of a
   dark overlay, since this is meant to showcase the real property. */
.stay-feature-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  object-position: 50% 42%;
  border-bottom: 2px solid rgba(212, 175, 100, 0.55);
  box-shadow: 0 14px 30px -18px rgba(20, 8, 14, 0.45);
}
.stay-feature-image[hidden] { display: none; }

.stay-feature-body {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 34px 22px;
}
@media (min-width: 700px) { .stay-feature-body { padding: 48px 44px; } }
@media (min-width: 960px) {
  .stay-feature-body { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
}

.stay-card { position: relative; display: flex; flex-direction: column; }
.stay-card-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--purple-600); }
.stay-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3.6vw, 30px);
  line-height: 1.18;
  color: var(--ink-black);
  margin-top: 8px;
}
.stay-card-type {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-700);
}
.stay-card-location { display: inline-flex; align-items: flex-start; gap: 6px; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--purple-700); }
.stay-card-location svg { width: 15px; height: 15px; color: var(--purple-600); flex-shrink: 0; margin-top: 1px; }
a.stay-card-location:hover { color: var(--luxe-hotpink); }

.stay-card-address { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--paper-line); }
.stay-card-address-label { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--purple-600); margin-bottom: 4px; }
.stay-card-address address { font-style: normal; font-size: 14px; line-height: 1.6; color: var(--ink-black); opacity: 0.85; }

.stay-card-times { display: flex; align-items: center; gap: 26px; margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--paper-line); }
.stay-time { display: flex; flex-direction: column; gap: 4px; }
.stay-time-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--luxe-hotpink); }
.stay-time-value { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink-black); }
.stay-time-value .is-tbd { color: var(--mauve-500); font-style: italic; font-weight: 400; font-size: 16px; }
.stay-time-divider { width: 1px; height: 32px; background: var(--paper-line); }

.stay-cta-row { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.stay-cta.luxe-btn { text-decoration: none; }
.stay-cta.is-pending { background: none; border: 1px solid var(--border-gold); color: var(--gold-700); box-shadow: none; }

.stay-directions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--purple-700);
  border-bottom: 1px solid var(--border-lilac);
  padding-bottom: 2px;
  transition: color 0.3s var(--ease-editorial), border-color 0.3s var(--ease-editorial);
}
.stay-directions svg { width: 14px; height: 14px; color: var(--purple-600); flex: none; }
.stay-directions:hover { color: var(--luxe-hotpink); border-color: var(--luxe-hotpink); }

.stay-info { display: flex; flex-direction: column; gap: 26px; margin-top: 30px; }
@media (min-width: 960px) { .stay-info { margin-top: 0; padding-left: 44px; border-left: 1px dashed var(--paper-line); } }
.stay-block-number { display: none; }
.stay-block-title { font-family: var(--font-script); font-size: 24px; font-weight: 400; color: var(--luxe-hotpink); margin-bottom: 8px; }
.stay-block-text { font-size: 14.5px; line-height: 1.7; color: var(--ink-black); opacity: 0.85; max-width: 50ch; }

.stay-highlights { display: flex; flex-wrap: wrap; gap: 8px; }
.stay-highlight {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-gold);
  background: rgba(212, 175, 100, 0.08);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-black);
}
.stay-highlight-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--purple-600); flex-shrink: 0; }
.stay-highlight-icon svg { width: 100%; height: 100%; }

/* ---------------------------------------------------------------------- */
/* Destination Weather — Luxe weather journal (weather.png). Same dark     */
/* ground; .weather-header becomes the torn header card, day cards get    */
/* colored ribbon day-tags. trip-weather.js and its state machine/class    */
/* names are unchanged — this is presentation only.                       */
/* ---------------------------------------------------------------------- */
.weather { position: relative; overflow: hidden; padding: 16px 0 96px; }
.weather-panel { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.weather-header {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 640px;
  margin: 0 auto 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: linear-gradient(155deg, rgba(255, 253, 248, 0.85) 0%, rgba(230, 215, 172, 0.8) 130%);
  box-shadow: var(--shadow-paper-lift);
  padding: 30px 24px 26px;
  transform: rotate(-0.3deg);
  clip-path: polygon(
    0% 3%, 6% 0.6%, 12% 2.8%, 18% 0.8%, 24% 3.2%, 30% 1%, 36% 3.4%, 42% 0.8%,
    48% 3%, 54% 1%, 60% 3.2%, 66% 0.8%, 72% 3.4%, 78% 1%, 84% 3%, 90% 1.2%,
    100% 3%,
    100% 97%, 90% 99.4%, 84% 97.2%, 78% 99.5%, 72% 97%, 66% 99.4%, 60% 97.2%,
    54% 99.5%, 48% 97%, 42% 99.4%, 36% 97.2%, 30% 99.5%, 24% 97%, 18% 99.4%,
    12% 97.2%, 6% 99.5%, 0% 97%
  );
}
.weather-header .eyebrow { font-weight: 800; letter-spacing: 0.12em; color: var(--purple-600); }
.weather-header .section-heading { font-weight: 700; color: var(--ink-black); }
.weather-message { font-size: 14.5px; line-height: 1.6; color: var(--ink-black); opacity: 0.75; max-width: 46ch; margin-top: 4px; }
.weather-submessage { font-size: 13px; line-height: 1.6; color: var(--ink-black); opacity: 0.55; max-width: 46ch; }
.weather-loading-text { font-size: 13.5px; color: var(--ink-black); opacity: 0.6; font-style: italic; margin-top: 8px; }

.weather-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 560px) { .weather-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

/* One polished tile — used while TRIP_WEATHER.singleTileMode is true (see
   renderSingleTile in trip-weather.js) instead of a full day-by-day grid. */
.weather-single-tile {
  position: relative;
  z-index: 1;
  max-width: 340px;
  margin: 8px auto 0;
  padding: 40px 28px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  background: linear-gradient(155deg, rgba(255, 253, 248, 0.85) 0%, rgba(230, 215, 172, 0.8) 130%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-paper);
}
.weather-single-tile-icon { width: 44px; height: 44px; color: var(--gold-600); opacity: 0.85; }
.weather-single-tile-icon svg { width: 100%; height: 100%; }
.weather-single-tile-label { font-family: var(--font-display); font-size: 18px; font-style: italic; color: var(--ink-black); }

.weather-day-card {
  position: relative;
  background: linear-gradient(155deg, rgba(255, 253, 248, 0.85) 0%, rgba(230, 215, 172, 0.8) 130%);
  padding: 0 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  box-shadow: var(--shadow-paper);
  transform: rotate(-0.6deg);
  /* Straight top (protects the weekday ribbon, which sits flush against
     it) — torn bottom only, a gentler deviation suited to a compact card. */
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 96%, 92% 99%, 84% 96.5%, 76% 99.2%, 68% 96%, 60% 99%,
    52% 96.5%, 44% 99.2%, 36% 96%, 28% 99%, 20% 96.5%, 12% 99.2%, 4% 96%, 0% 98%
  );
}
.weather-grid .weather-day-card:nth-child(even) { transform: rotate(0.6deg); }
.weather-day-weekday {
  display: block;
  width: calc(100% + 40px);
  margin: 0 -20px 14px;
  padding: 9px 0;
  background: linear-gradient(155deg, var(--ink-black) 0%, var(--purple-900) 100%);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ivory-50);
}
.weather-day-date { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--luxe-hotpink); margin-bottom: 10px; }

.weather-day-body { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px dashed var(--paper-line); width: 100%; }
.weather-day-body--pending { padding-top: 16px; gap: 8px; }
.weather-day-pending-icon { width: 30px; height: 30px; color: var(--gold-600); opacity: 0.8; }
.weather-day-pending-icon svg { width: 100%; height: 100%; }
.weather-day-pending-label { font-size: 12.5px; font-weight: 600; color: var(--purple-700); }

.weather-day-icon { width: 36px; height: 36px; color: var(--gold-700); }
.weather-day-icon svg { width: 100%; height: 100%; }
.weather-day-temps { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--ink-black); display: flex; gap: 7px; align-items: baseline; }
.weather-day-low { color: var(--purple-600); font-size: 16px; font-weight: 600; }
.weather-day-condition { font-size: 12.5px; font-weight: 600; color: var(--ink-black); opacity: 0.75; }
.weather-day-rain { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--purple-600); margin-top: 2px; }
.weather-day-rain svg { width: 12px; height: 12px; }
.weather-day-note { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--paper-line); font-size: 12px; font-style: italic; color: var(--ink-black); opacity: 0.65; }

/* "Today" mode — a compact "right now" panel above the three day cards */
.weather-now { display: flex; align-items: center; gap: 16px; margin-top: 18px; justify-content: center; }
.weather-now-icon { width: 46px; height: 46px; color: var(--gold-700); flex: none; }
.weather-now-icon svg { width: 100%; height: 100%; }
.weather-now-info { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.weather-now-temp { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 5vw, 40px); line-height: 1; color: var(--ink-black); }
.weather-now-condition { font-size: 13.5px; font-weight: 600; color: var(--purple-700); }
.weather-now-range { font-size: 12px; color: var(--ink-black); opacity: 0.65; }

.weather-connect { position: relative; z-index: 1; max-width: 460px; margin: 24px auto 0; padding: 20px 22px; text-align: center; background: linear-gradient(155deg, rgba(255, 253, 248, 0.85) 0%, rgba(230, 215, 172, 0.8) 130%); box-shadow: var(--shadow-paper); }
.weather-connect-label { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--luxe-hotpink); margin-bottom: 8px; }
.weather-connect-style-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink-black); display: block; margin-bottom: 8px; }
.weather-plans-list { display: flex; flex-direction: column; gap: 6px; margin: 0 auto 8px; max-width: 340px; }
.weather-plans-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink-black); }
.weather-plans-time { font-variant-numeric: tabular-nums; color: var(--purple-600); font-size: 12.5px; white-space: nowrap; font-weight: 700; }
.weather-connect-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple-700);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease-editorial);
}
.weather-connect-link svg { width: 12px; height: 12px; transition: transform 0.3s var(--ease-editorial); }
.weather-connect-link:hover, .weather-connect-link:focus-visible { border-bottom-color: currentColor; }
.weather-connect-link:hover svg, .weather-connect-link:focus-visible svg { transform: translateX(3px); }
.weather-connect-link:focus-visible { outline: 2px solid var(--yellow-500); outline-offset: 3px; }

.weather-post-message { font-family: var(--font-script); font-size: 22px; color: var(--luxe-hotpink); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .weather-day-card, .stay-feature-grid, .weather-header { transition: none; }
}

/* ---------------------------------------------------------------------- */
/* The Weekend Lineup — Luxe scrapbook day planner (lineup.png). Same dark */
/* ground continuing seamlessly from Weather; each day is its own torn    */
/* cream card. The DAY remains the accordion unit exactly as before       */
/* (toggleDay/setupDayAccordions in app.js are untouched) — activities    */
/* are always fully visible once a day opens. New: a closed-state         */
/* "time + activity" preview list, a colored day-tag ribbon that cycles   */
/* by position (reusable past 3 days), and a CSS-only connecting          */
/* timeline that scales to any number of activities — no fixed counts     */
/* assumed anywhere in this file.                                         */
/* ---------------------------------------------------------------------- */
.itinerary { position: relative; overflow: hidden; padding: 16px 0 96px; }
.itinerary-header { position: relative; z-index: 1; margin-bottom: 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.itinerary-header .luxe-eyebrow-label { margin-bottom: 6px; }
/* Solid gold, not the foil gradient-clip text — that technique needs a
   pale card behind it (as on the hero/countdown cards) to keep its dark
   gradient stops legible; directly on this dark purple section background
   the same gradient reads as low-contrast and hard to read. */
.itinerary-header .section-heading { font-size: clamp(34px, 6.4vw, 54px); color: var(--gold-300); }
.itinerary-dates {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-top: 4px;
}
.itinerary-header .section-intro { color: var(--lilac-300); font-size: 15px; margin-top: 10px; max-width: 52ch; }

.day-list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 40px; }

/* Each day is a torn cream card — the ribbon color cycles by position
   (1st/2nd/3rd-of-every-3), so a future itinerary with more or fewer days
   still gets a coherent, repeating color rhythm rather than running out
   of colors or needing per-day hardcoding. */
.day-card {
  position: relative;
  background: linear-gradient(155deg, rgba(255, 253, 248, 0.85) 0%, rgba(230, 215, 172, 0.8) 130%);
  box-shadow: var(--shadow-paper-lift);
  scroll-margin-top: 90px;
  /* Fixed PIXEL depths, not percentages — this card's height changes
     dramatically when the accordion opens (from a short summary to a full
     activity list), and a percentage-based tear would scale with it,
     turning a subtle few-pixel deckle edge into a huge jagged bite out of
     the header content once the panel is tall. calc() keeps the tear a
     constant ~6-9px regardless of how tall the card gets. */
  clip-path: polygon(
    0% 6px, 4% 1px, 8% 5px, 12% 1px, 16% 6px, 20% 2px, 24% 7px, 28% 1px,
    32% 5px, 36% 2px, 40% 6px, 44% 1px, 48% 5px, 52% 2px, 56% 6px, 60% 1px,
    64% 5px, 68% 2px, 72% 6px, 76% 1px, 80% 5px, 84% 2px, 88% 6px, 92% 1px,
    96% 5px, 100% 2px,
    100% calc(100% - 2px), 96% calc(100% - 6px), 92% calc(100% - 1px), 88% calc(100% - 5px),
    84% calc(100% - 2px), 80% calc(100% - 6px), 76% calc(100% - 1px), 72% calc(100% - 5px),
    68% calc(100% - 2px), 64% calc(100% - 6px), 60% calc(100% - 1px), 56% calc(100% - 5px),
    52% calc(100% - 2px), 48% calc(100% - 6px), 44% calc(100% - 1px), 40% calc(100% - 5px),
    36% calc(100% - 2px), 32% calc(100% - 6px), 28% calc(100% - 1px), 24% calc(100% - 5px),
    20% calc(100% - 2px), 16% calc(100% - 6px), 12% calc(100% - 1px), 8% calc(100% - 5px),
    4% calc(100% - 2px), 0% calc(100% - 6px)
  );
}
.day-card .luxe-paperclip { top: 10px; left: 24px; }
@media (min-width: 700px) { .day-card .luxe-paperclip { left: 36px; } }

/* --- Day-level accordion header: the tappable, always-visible summary --- */
.day-accordion-header {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 34px 22px 22px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 700px) { .day-accordion-header { padding: 40px 42px 26px; } }
.day-accordion-header:focus-visible { outline: 2px solid var(--purple-600); outline-offset: -3px; }

.day-header-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.day-weekday {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 5.4vw, 40px);
  line-height: 1.05;
  color: var(--ink-black);
}
.day-date { font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple-600); }
.day-summary { margin-top: 6px; font-size: 14px; color: var(--ink-black); opacity: 0.68; max-width: 46ch; }

/* Colored day-tag ribbon — cycles purple / green / gold every 3 days. */
.day-highlight-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory-50);
  background: var(--purple-700);
  padding: 7px 16px 7px 13px;
  margin-bottom: 12px;
  align-self: flex-start;
  box-shadow: 0 8px 16px -8px rgba(20, 8, 14, 0.5);
}
.day-highlight-badge svg { width: 13px; height: 13px; }
.day-card:nth-of-type(3n+2) .day-highlight-badge { background: #2f5233; }
.day-card:nth-of-type(3n+3) .day-highlight-badge { background: var(--gold-700); color: var(--ink-black); }

/* Closed-state preview — "time + activity" scan list, hidden once the
   day opens (the full panel repeats it with complete detail). */
.day-preview-list { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; }
.day-card.is-open .day-preview-list { display: none; }
.day-preview-list li { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.day-preview-time { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--luxe-hotpink); min-width: 5.5em; }
.day-preview-title { color: var(--ink-black); opacity: 0.85; }

/* The +/close control — obvious, ≥44px tap target. Rotates 45deg on open
   so the "+" reads as a "close" cue. */
.day-toggle {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--ink-black) 0%, var(--purple-900) 100%);
  border: 1.5px solid var(--gold-500);
  box-shadow: var(--shadow-paper);
  transition: transform 0.4s var(--ease-editorial);
}
@media (min-width: 700px) { .day-toggle { width: 48px; height: 48px; } }
.day-toggle-bar { position: absolute; top: 50%; left: 50%; background: var(--gold-300); border-radius: 2px; transform: translate(-50%, -50%); }
.day-toggle-bar--h { width: 16px; height: 2.5px; }
.day-toggle-bar--v { width: 2.5px; height: 16px; }
.day-card.is-open .day-toggle { transform: rotate(45deg); }

/* Height animates via the grid 0fr -> 1fr trick — no JS measuring needed */
.day-panel-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease-editorial); }
.day-card.is-open .day-panel-wrap { grid-template-rows: 1fr; }
.day-panel-inner { overflow: hidden; }
.day-panel { position: relative; z-index: 1; padding: 0 22px 34px; }
@media (min-width: 700px) { .day-panel { padding: 0 42px 44px; } }

/* Connecting timeline — a dotted gold line + a colored dot per activity,
   built entirely from CSS positioning (no per-item JS math), so it scales
   to any number of activities in any future itinerary. */
.activity-list { position: relative; display: flex; flex-direction: column; padding-left: 22px; margin-top: 10px; }
.activity-list::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 0;
  border-left: 2px dotted var(--gold-600);
  opacity: 0.6;
}

/* --- Activity cards: always fully visible once the day is open --- */
.activity-item { position: relative; padding: 18px 2px; border-top: 1px dashed var(--paper-line); }
.activity-item:first-child { border-top: none; padding-top: 4px; }
.activity-item::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 24px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--luxe-hotpink);
  border: 2px solid var(--paper-cream);
  box-shadow: 0 0 0 1.5px var(--gold-600);
}
.activity-item:first-child::before { top: 8px; }
.activity-item.is-static { padding: 14px 2px 18px; }
.activity-item.is-static:first-child { padding-top: 4px; }
.activity-item.is-static .activity-title { font-size: 16px; font-weight: 700; color: var(--ink-black); }

.activity-header { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.activity-header-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.activity-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink-black); }
.activity-subtitle { font-size: 13.5px; color: var(--ink-black); opacity: 0.65; line-height: 1.45; }

.activity-header-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding-top: 2px; }
.activity-time-preview {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ivory-50);
  background: var(--purple-700);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* --- Departure badge: the one thing the crew cannot miss --- */
.activity-departure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 10px 2px 14px;
  padding: 12px 16px;
  background: linear-gradient(120deg, var(--yellow-500) 0%, var(--gold-500) 100%);
  box-shadow: var(--shadow-paper);
}
.activity-departure-icon { display: inline-flex; align-self: center; width: 18px; height: 18px; color: var(--ink-900); flex: none; }
.activity-departure-icon svg { width: 100%; height: 100%; }
.activity-departure-label { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(24, 16, 28, 0.72); }
.activity-departure-time { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--ink-900); line-height: 1; }
.activity-departure-note {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--ink-900);
  padding: 3px 9px;
  border-radius: var(--radius-full);
  margin-left: auto;
}

/* --- Instruction-notice chips (BYOB, No Glass Bottles) --- */
.activity-notices { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 2px 14px; }
.activity-notice-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px 6px 10px;
  border-radius: var(--radius-full);
  background: rgba(122, 58, 140, 0.08);
  border: 1px solid var(--border-gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple-700);
}
.activity-notice-chip svg { width: 13px; height: 13px; flex: none; color: var(--gold-700); }

/* --- CTA button (Order Your Matching PJs) --- */
.activity-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 4px 2px 16px; }
.activity-cta-btn.activity-cta-btn { /* specificity nudge over .luxe-btn's base color */
  background: linear-gradient(120deg, var(--yellow-500) 0%, var(--gold-500) 100%);
  color: var(--ink-900);
  border: none;
}
.activity-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: var(--shadow-paper);
  transition: transform 0.25s var(--ease-editorial), box-shadow 0.25s var(--ease-editorial);
}
.activity-cta-btn svg { width: 15px; height: 15px; }
.activity-cta-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-paper-lift); }
.activity-cta-btn:focus-visible { outline: 2px solid var(--purple-600); outline-offset: 3px; }
.activity-cta-note { font-size: 12px; font-style: italic; color: var(--ink-black); opacity: 0.6; }

.activity-fields { display: flex; flex-direction: column; gap: 14px; margin: 10px 0 16px; }
.activity-field { display: flex; gap: 10px; align-items: flex-start; }
.activity-field-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(122, 58, 140, 0.1);
  color: var(--purple-600);
  margin-top: 1px;
}
.activity-field-icon svg { width: 13px; height: 13px; }
.activity-field-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.activity-field-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple-600); }
.activity-field-value { font-size: 14px; font-weight: 600; color: var(--ink-black); line-height: 1.45; }
.activity-field-value a { color: var(--luxe-hotpink); text-decoration: underline; text-underline-offset: 2px; }
.activity-field-note { margin-top: 4px; font-size: 13px; font-weight: 400; line-height: 1.55; color: var(--ink-black); opacity: 0.7; max-width: 48ch; }
.activity-included-list { list-style: disc; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; font-weight: 400; }

.activity-field-swatches { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.activity-field-swatch { width: 17px; height: 17px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 1px 3px rgba(0, 0, 0, 0.35); }

/* Dress code always gets the spotlight treatment — easy to spot per
   Phase 3. Brown Girl Magic stacks its own warm accent on top, used only
   for that one Friday-dinner activity. */
.activity-field--dresscode {
  padding: 12px 14px;
  background: rgba(212, 175, 100, 0.1);
  border: 1px solid var(--border-gold);
}
.activity-field--dresscode .activity-field-icon { background: rgba(212, 175, 100, 0.22); color: var(--gold-700); }
.activity-field--brown.activity-field--dresscode { background: rgba(168, 106, 60, 0.12); border-color: rgba(168, 106, 60, 0.4); }
.activity-field--brown .activity-field-icon { background: rgba(168, 106, 60, 0.24); color: var(--brown-700); }
.activity-field--brown .activity-field-label { color: var(--brown-700); }
.activity-field--brown .activity-field-value { color: var(--brown-900); }

/* Add to Calendar — a dashed-edge "ticket" button, obviously interactive. */
.activity-calendar-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 6px;
  border: 1.5px dashed var(--gold-600);
  background: var(--paper-cream);
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--purple-700);
  box-shadow: var(--shadow-paper);
  transition: transform 0.25s var(--ease-editorial), box-shadow 0.25s var(--ease-editorial);
}
.activity-calendar-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-paper-lift); }
.activity-calendar-btn:focus-visible { outline: 2px solid var(--purple-600); outline-offset: 2px; }
.activity-calendar-btn svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--gold-700); }

/* Pending state — restored from the Master. Shown whenever an activity
   doesn't yet have a finalized time; stays visible (never hidden) so the
   action is never simply missing, just clearly inactive until scheduling
   is confirmed. */
.activity-calendar-btn.is-pending {
  cursor: default;
  align-items: center;
  text-align: left;
  color: var(--mauve-500);
  border-color: var(--border-lilac);
  box-shadow: none;
}
.activity-calendar-btn.is-pending:hover { transform: none; box-shadow: none; }
.activity-calendar-btn-text { display: flex; flex-direction: column; gap: 1px; }
.activity-calendar-btn-sub {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  font-style: italic;
  color: var(--mauve-300);
}

.pill-tbd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--purple-600);
  border: 1px solid var(--border-lilac);
  padding: 4px 10px 4px 8px;
  border-radius: var(--radius-full);
}
.pill-tbd svg { width: 11px; height: 11px; }

/* Open / TBD day placeholder */
.day-open-state { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 8px 0 4px; }
.day-open-state .glyph { width: 34px; height: 34px; color: var(--purple-400); }
.day-open-state .msg { font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--purple-600); }

/* Gentle stagger as activities appear inside an opened day — restrained,
   matches the Countdown section's animation language. Gated behind
   .is-settling (added/restarted by toggleDay() in app.js each time a day
   opens) rather than a plain animation, since a day panel's contents
   exist in the DOM from page load — an unconditional animation would
   play once, invisibly, behind the collapsed (0fr/inert) panel, and never
   be seen. This way it plays every time a traveler opens that day. */
.activity-list .activity-item.is-settling { animation: activity-settle 0.5s var(--ease-editorial) both; }
.activity-list .activity-item:nth-child(1).is-settling { animation-delay: 0.02s; }
.activity-list .activity-item:nth-child(2).is-settling { animation-delay: 0.08s; }
.activity-list .activity-item:nth-child(3).is-settling { animation-delay: 0.14s; }
.activity-list .activity-item:nth-child(4).is-settling { animation-delay: 0.2s; }
.activity-list .activity-item:nth-child(n+5).is-settling { animation-delay: 0.24s; }
@keyframes activity-settle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .activity-list .activity-item.is-settling { animation: none; }
}

/* ---------------------------------------------------------------------- */
/* The Style Edit — "Dress the Part". Reuses the Master's card system;     */
/* wardrobe planning hasn't started, so an empty `looks` array renders the */
/* .style-edit-empty "Coming Soon" placeholder below instead of a blank    */
/* grid — see renderStyleEdit in app.js.                                   */
/* ---------------------------------------------------------------------- */
.style-edit { padding: 8px 0 88px; }
.style-edit-header { max-width: 620px; margin: 0 auto 48px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.style-edit-header .eyebrow { color: var(--gold-300); }
.style-edit-header .section-heading { color: var(--ivory-50); }
.style-edit-header .section-intro { text-align: center; color: var(--lilac-300); font-size: 15px; }
.style-edit-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }

.style-edit-empty {
  max-width: 560px;
  margin: 0 auto;
  border: 1px dashed var(--border-gold);
  border-radius: var(--radius-lg);
  padding: 52px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: rgba(255, 253, 248, 0.72);
}
.style-edit-empty .glyph { width: 30px; height: 30px; color: var(--gold-600); }
.style-edit-empty .headline { font-family: var(--font-display); font-style: italic; font-size: 19px; color: var(--ink-900); }
.style-edit-empty p { max-width: 44ch; font-size: 13.5px; color: var(--text-muted); }

/* ---------------------------------------------------------------------- */
/* Meet the Crew — two circles (The 40s / The 50s), each with a founder     */
/* (Bestie / Auntie) in a larger portrait-shaped placeholder, and the rest  */
/* of the group in smaller circular ones. Every placeholder — featured or  */
/* not — already has the exact size/shape/border a real photo will use;    */
/* see renderCrewPortrait in app.js, which swaps in a real background-     */
/* image once `photo` is set on that person, no CSS changes needed.        */
/* ---------------------------------------------------------------------- */
.crew { padding: 8px 0 88px; }
.crew-header { max-width: 560px; margin: 0 auto 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.crew-header .eyebrow { color: var(--gold-300); }
.crew-header .section-heading { color: var(--ivory-50); }
.crew-subtitle { margin: 0; font-size: clamp(20px, 3.2vw, 25px); }
.crew-header .section-intro { text-align: center; color: var(--lilac-300); font-size: 15px; margin-top: 4px; }

/* The two groups share one visual family (same card treatment, same gap
   rhythm) so they read as one connected crew section rather than two
   unrelated cards — reinforced at desktop by sitting side by side in a
   single row, joined by the shared header above them. */
.crew-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 900px;
  margin: 0 auto;
}
@media (min-width: 760px) { .crew-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; align-items: start; } }

.crew-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  padding: 32px 22px 30px;
  background: linear-gradient(165deg, rgba(14, 42, 32, 0.82) 0%, rgba(18, 54, 38, 0.78) 55%, rgba(23, 67, 47, 0.74) 130%);
  border: 1px solid rgba(212, 175, 100, 0.35);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}
@media (min-width: 760px) { .crew-group { padding: 38px 28px 34px; } }

.crew-group-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 3.4vw, 27px);
  color: var(--ivory-50);
}

/* --- Portraits: one shared placeholder system for both shapes --- */
.crew-portrait {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.crew-portrait--featured {
  width: min(168px, 44vw);
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
}
.crew-portrait--small {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  box-shadow: var(--shadow-card);
}
@media (min-width: 760px) {
  .crew-portrait--featured { width: 180px; }
  .crew-portrait--small { width: 72px; height: 72px; }
}

/* Placeholder state — a warm champagne-glass tint (never a stock face,
   silhouette, or reused group photo) holding the person's own initials.
   Disappears automatically the moment `photo` is set: renderCrewPortrait
   then renders a plain background-image div instead of this one. */
.crew-portrait--placeholder {
  background-image: none;
  background: linear-gradient(155deg, rgba(212, 175, 100, 0.3) 0%, rgba(212, 175, 100, 0.12) 100%);
  border: 1.5px solid rgba(212, 175, 100, 0.5);
}
.crew-portrait-initials {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--gold-100);
  line-height: 1;
}
.crew-portrait--featured .crew-portrait-initials { font-size: clamp(34px, 7vw, 42px); }
.crew-portrait--small .crew-portrait-initials { font-size: 18px; }
@media (min-width: 760px) { .crew-portrait--small .crew-portrait-initials { font-size: 20px; } }

.crew-portrait-icon {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(14, 42, 32, 0.55);
  color: rgba(233, 205, 147, 0.85);
}
.crew-portrait-icon svg { width: 13px; height: 13px; }

/* --- Featured founder (Tiffany / Michelle) --- */
.crew-featured-block { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.crew-role-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-300);
  background: rgba(212, 175, 100, 0.16);
  border: 1px solid rgba(212, 175, 100, 0.4);
  padding: 5px 13px;
  border-radius: var(--radius-full);
}
.crew-role-pill svg { width: 10px; height: 10px; }
.crew-featured-name { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--ivory-50); }

/* --- The rest of the group, in a compact, evenly-balanced grid — three
   columns keeps a 5-person group (The 40s) and a 6-person group (The 50s)
   at the same two-row height, so the two cards stay visually balanced
   despite the different headcounts. --- */
.crew-group-members {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 10px;
  justify-items: center;
  padding-top: 6px;
  border-top: 1px solid rgba(212, 175, 100, 0.22);
}
.crew-member { display: flex; flex-direction: column; align-items: center; gap: 7px; max-width: 84px; }
.crew-member-name { font-size: 11.5px; font-weight: 600; line-height: 1.3; color: rgba(226, 236, 221, 0.85); }

.crew-closing {
  margin-top: 8px;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--lilac-300);
}
.crew-closing:empty { display: none; }

/* ---------------------------------------------------------------------- */
/* The Timeline — THE SIGNATURE FEATURE. A warm introduction followed by a */
/* mobile-friendly, chronological photo timeline: one real group photo     */
/* per year, in order. Photos are never cropped — each renders at its      */
/* true aspect ratio (the <img> width/height attributes reserve the        */
/* right box, see renderStoryPhoto in app.js), so every face stays fully   */
/* visible on any screen. Sits on the same dark "night" ground the         */
/* Countdown/Home Base/Weather/Lineup sections share.                      */
/* ---------------------------------------------------------------------- */
.story {
  position: relative;
  overflow: hidden;
  padding: 100px 0 88px;
}
.story-header {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.story-header .luxe-eyebrow-label { margin-bottom: 2px; }
.story-header .section-heading { color: var(--gold-300); font-size: clamp(32px, 6vw, 50px); }
.story-script { margin-top: 0; font-size: clamp(20px, 3.6vw, 26px); color: var(--gold-100); }
.story-intro {
  margin-top: 10px;
  max-width: 56ch;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--lilac-300);
}

.story-timeline { position: relative; z-index: 1; margin-top: 48px; display: flex; flex-direction: column; gap: 52px; }
.story-timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 20px;
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(212, 175, 100, 0) 0%,
    rgba(212, 175, 100, 0.55) 8%,
    rgba(212, 175, 100, 0.55) 92%,
    rgba(212, 175, 100, 0) 100%
  );
}
@media (min-width: 820px) {
  .story-timeline::before { left: 50%; transform: translateX(-0.5px); }
}

.story-entry { position: relative; display: flex; flex-direction: column; gap: 18px; padding-left: 48px; }
@media (min-width: 820px) {
  .story-entry {
    flex-direction: row;
    align-items: center;
    gap: 56px;
    padding-left: 0;
  }
  .story-entry:nth-of-type(even) { flex-direction: row-reverse; }
}

.story-node {
  position: absolute;
  top: 6px;
  left: 20px;
  transform: translateX(-50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--ivory-50);
  border: 2px solid var(--gold-500);
  z-index: 2;
}
@media (min-width: 820px) {
  .story-node { left: 50%; top: 50%; transform: translate(-50%, -50%); }
}
.story-node.is-finale { background: var(--gold-500); border-color: var(--yellow-500); }

.story-photo { position: relative; }
@media (min-width: 820px) { .story-photo { flex: 1 1 0; max-width: 440px; } }

.story-photo-btn {
  display: block;
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(212, 175, 100, 0.35);
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: none;
  box-shadow: var(--shadow-paper);
}
@media (min-width: 820px) { .story-photo-btn { max-width: none; } }
.story-photo-btn img { display: block; width: 100%; height: auto; }
.story-photo-btn:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }

.story-info { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
@media (min-width: 820px) { .story-info { flex: 1 1 0; max-width: 320px; } }
.story-year {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(36px, 5vw, 52px);
  line-height: 1;
  color: var(--gold-300);
}
.story-destination {
  margin-top: 4px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--ivory-50);
}

/* Finale entry (2026 — Puerto Rico, this year, no photo yet) */
.story-entry--finale { padding-left: 48px; }
@media (min-width: 820px) {
  .story-entry--finale { flex-direction: column; align-items: center; padding-left: 0; margin-top: 8px; }
}
.story-finale {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 32px 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(18, 54, 38, 0.82) 0%, rgba(23, 67, 47, 0.78) 55%, rgba(31, 85, 57, 0.74) 130%);
  border: 1px solid rgba(212, 175, 100, 0.4);
  box-shadow: 0 30px 70px -30px rgba(6, 14, 11, 0.6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.story-finale-photo-slot {
  width: 88px;
  height: 88px;
  margin-bottom: 6px;
  border-radius: 50%;
  border: 1.5px dashed rgba(212, 175, 100, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(212, 175, 100, 0.6);
}
.story-finale-photo-slot .plus { font-size: 26px; font-weight: 300; line-height: 1; }
.story-finale-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.story-finale-eyebrow svg { width: 13px; height: 13px; }
.story-finale-year {
  margin-top: 4px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 46px;
  line-height: 1;
  color: var(--gold-300);
}
.story-finale-destination { font-size: 15px; font-weight: 600; letter-spacing: 0.04em; color: var(--ivory-50); }
.story-finale-note {
  margin-top: 8px;
  font-family: var(--font-script);
  font-size: 22px;
  color: #ffb37a;
}
.story-finale-hint { margin-top: 4px; font-size: 12.5px; font-style: italic; color: rgba(226, 236, 221, 0.7); max-width: 32ch; }

/* ---------------------------------------------------------------------- */
/* A Note from Bestie & Auntie — editorial welcome note                    */
/* DOM order matches the required mobile reading order (header, photo,    */
/* caption+photo bundled as one "media" block, quote, message, signature) */
/* — the desktop two-column layout below is pure CSS (grid-template-areas)*/
/* so source/reading order never has to change between breakpoints.       */
/* ---------------------------------------------------------------------- */
.welcome-note { padding: 8px 0 88px; }

.welcome-note-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "media"
    "quote"
    "message"
    "signature";
  row-gap: 28px;
}
@media (min-width: 1024px) {
  .welcome-note-grid {
    grid-template-columns: minmax(300px, 0.85fr) 1.15fr;
    grid-template-areas:
      "media header"
      "media quote"
      "media message"
      "media signature";
    column-gap: 72px;
    row-gap: 22px;
    align-items: start;
  }
}

.welcome-note-header { grid-area: header; display: flex; flex-direction: column; gap: 10px; }
.welcome-note-header .eyebrow { color: var(--gold-300); }
.welcome-note-heading {
  color: var(--ivory-50);
  font-size: clamp(30px, 5.4vw, 46px);
}
.welcome-note-heading-accent {
  display: inline-block;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 1.3em;
  line-height: 1;
  margin-left: 2px;
  color: var(--gold-300);
  text-shadow: 0 0 16px rgba(233, 205, 147, 0.4);
}

.welcome-note-media { grid-area: media; }
.welcome-note-photo-frame {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
}
@media (min-width: 1024px) { .welcome-note-photo-frame { margin: 0; } }
/* Subtle offset paper layer behind the photo — thin gold outline, rotated
   a couple of degrees, echoing the Trip Memories album's own frame motif. */
.welcome-note-photo-frame::before {
  content: "";
  position: absolute;
  inset: -14px -10px 14px -16px;
  background: rgba(247, 236, 212, 0.08);
  border: 1px solid rgba(212, 175, 100, 0.35);
  border-radius: var(--radius-lg);
  transform: rotate(-2.2deg);
  z-index: 0;
}
.welcome-note-photo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  /* Matches the real photo's own native ratio exactly (1086x1448), so
     object-fit:cover needs zero cropping — both Tiffany and Michelle,
     faces included, are fully visible edge to edge. */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
  border: 1.5px solid var(--gold-500);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.welcome-note-caption {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  text-align: center;
  font-family: var(--font-script);
  font-size: 22px;
  color: var(--gold-100);
  text-shadow: 0 0 10px rgba(233, 205, 147, 0.25);
}
@media (min-width: 1024px) { .welcome-note-caption { text-align: left; } }

.welcome-note-quote-block { grid-area: quote; position: relative; padding-left: 34px; max-width: 52ch; }
.welcome-note-quote-mark {
  position: absolute;
  left: -6px;
  top: -22px;
  font-family: var(--font-display);
  font-size: 68px;
  line-height: 1;
  color: var(--gold-500);
  opacity: 0.4;
}
.welcome-note-quote {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2.3vw, 21px);
  color: var(--ivory-50);
}

.welcome-note-message { grid-area: message; display: flex; flex-direction: column; gap: 14px; max-width: 58ch; }
.welcome-note-message p { font-family: var(--font-body); font-size: 15px; line-height: 1.75; color: rgba(226, 236, 221, 0.85); }

.welcome-note-signature-block { grid-area: signature; }
.welcome-note-closing { font-family: var(--font-display); font-style: italic; font-size: 15px; color: rgba(226, 236, 221, 0.7); margin: 0 0 4px; }
.welcome-note-signature-names { font-family: var(--font-script); font-size: 28px; line-height: 1.15; color: var(--gold-300); margin: 0; }
.welcome-note-signature-roles { margin: 4px 0 0; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(226, 236, 221, 0.55); }

/* Two-beat reveal: the photo fades up first, the text column follows a
   short beat later — both are triggered by the same scroll-into-view
   moment (see setupReveal() in app.js, shared with every other .reveal
   element site-wide), the stagger is purely a transition-delay. */
.welcome-note-header.reveal,
.welcome-note-quote-block.reveal,
.welcome-note-message.reveal,
.welcome-note-signature-block.reveal {
  transition-delay: 0.15s;
}

/* ---------------------------------------------------------------------- */
/* Lightbox — tap any Our Story photo to view it larger                   */
/* ---------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(10, 20, 16, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease-editorial), visibility 0.35s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 84vh; border-radius: 10px; box-shadow: var(--shadow-soft); }
.lightbox-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 100, 0.5);
  background: rgba(255, 255, 255, 0.06);
  color: var(--gold-300);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .lightbox { transition: opacity 0.2s ease; }
}

/* ---------------------------------------------------------------------- */
/* Shared Trip Album                                                       */
/* ---------------------------------------------------------------------- */
.album { padding: 24px 0 90px; }
.album-card {
  position: relative;
  overflow: hidden;
  max-width: 620px;
  margin: 0 auto;
  background: linear-gradient(150deg, rgba(251, 250, 244, 0.85) 0%, rgba(247, 236, 212, 0.8) 145%);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  padding: 44px 26px 40px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
@media (min-width: 640px) { .album-card { padding: 60px 56px 52px; } }

.album-motif { position: relative; width: 92px; height: 66px; margin-bottom: 6px; }
.album-frame { position: absolute; inset: 0; border: 1.5px solid var(--gold-500); border-radius: 8px; background: rgba(255, 253, 250, 0.55); }
.album-frame--1 { transform: rotate(-9deg) translate(-15px, 3px); opacity: 0.5; }
.album-frame--2 { transform: rotate(6deg) translate(11px, -3px); opacity: 0.7; }
.album-frame--3 { transform: rotate(-2deg); opacity: 1; box-shadow: var(--shadow-card); }
.album-glint {
  position: absolute;
  top: -3px;
  right: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7e6 0%, var(--gold-500) 60%, rgba(212, 175, 100, 0) 80%);
  opacity: 0;
  animation: album-glint-twinkle 5.5s ease-in-out infinite;
}
@keyframes album-glint-twinkle { 0%, 100% { opacity: 0; transform: scale(0.7); } 50% { opacity: 0.85; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .album-glint { animation: none; opacity: 0.5; } }

.album-card .eyebrow { color: var(--gold-700); }
.album-card .section-heading { max-width: 20ch; }
.album-description { max-width: 46ch; font-size: 15px; line-height: 1.7; color: var(--text-muted); }

.album-cta-row { margin-top: 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.album-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--purple-600);
  color: var(--white);
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.3s var(--ease-editorial), transform 0.3s var(--ease-editorial);
}
.album-cta:hover { background: var(--purple-500); }
.album-cta:focus-visible { outline: 2px solid var(--yellow-500); outline-offset: 3px; }
.album-cta-arrow { display: inline-block; transition: transform 0.25s var(--ease-editorial); }
.album-cta:hover .album-cta-arrow { transform: translateX(3px); }
.album-supporting-text { font-size: 12px; font-style: italic; color: var(--text-muted); }

.album-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(20, 8, 24, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease-editorial), visibility 0.35s;
}
.album-overlay.is-open { opacity: 1; visibility: visible; }
@media (min-width: 640px) { .album-overlay { align-items: center; padding: 24px; } }

.album-sheet {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--ivory-50);
  border-radius: 22px 22px 0 0;
  padding: 14px 26px 30px;
  box-shadow: 0 -20px 60px -20px rgba(20, 8, 24, 0.5);
  transform: translateY(24px);
  transition: transform 0.4s var(--ease-editorial);
}
.album-overlay.is-open .album-sheet { transform: translateY(0); }
.album-sheet:focus { outline: none; }
@media (min-width: 640px) {
  .album-sheet { border-radius: var(--radius-lg); padding: 32px 34px 34px; max-height: 84vh; }
}

.album-handle { display: block; width: 40px; height: 4px; border-radius: var(--radius-full); background: var(--lilac-300); margin: 4px auto 18px; }
@media (min-width: 640px) { .album-handle { display: none; } }

.album-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--lilac-200);
  border: none;
  color: var(--purple-700);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s var(--ease-editorial);
}
.album-close:hover { background: var(--lilac-300); }
.album-close:focus-visible { outline: 2px solid var(--yellow-500); outline-offset: 2px; }
.album-close svg { width: 15px; height: 15px; }

.album-modal-header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 0 8px; }
.album-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--purple-900);
  color: var(--gold-300);
  margin-bottom: 4px;
}
.album-modal-icon svg { width: 20px; height: 20px; }
.album-modal-title { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--ink-900); }
.album-modal-body { margin-top: 14px; font-size: 14px; line-height: 1.65; color: var(--text-muted); text-align: center; }
.album-modal-note { margin-top: 10px; font-size: 12.5px; font-style: italic; text-align: center; color: var(--mauve-500); }

.album-modal-dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 24px;
  padding: 14px 20px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--purple-600);
  color: var(--white);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.3s var(--ease-editorial);
}
.album-modal-dismiss:hover { background: var(--purple-500); }
.album-modal-dismiss:focus-visible { outline: 2px solid var(--yellow-500); outline-offset: 2px; }

/* ---------------------------------------------------------------------- */
/* Destination Requirements — restored from the JazzeeXscapes Master. The  */
/* whole section is ONE collapsed-by-default card — same grid 0fr->1fr     */
/* height-animation technique as the day-accordion, just a single toggle   */
/* rather than a list of independently-openable pieces.                    */
/* ---------------------------------------------------------------------- */
.requirements { padding: 64px 0; }

.requirements-card { background: rgba(255, 253, 248, 0.82); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow); }

.requirements-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 700px) { .requirements-toggle { padding: 26px 30px; gap: 20px; } }
.requirements-toggle:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }

.requirements-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--radius-md);
  background: rgba(212, 175, 100, 0.18);
  color: var(--gold-700);
}
.requirements-toggle-icon svg { width: 22px; height: 22px; }

.requirements-toggle-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.requirements-toggle-heading { font-family: var(--font-display); font-size: clamp(18px, 3vw, 21px); font-weight: 500; color: var(--ink-900); }
.requirements-toggle-subtitle { font-size: 13.5px; color: var(--text-muted); }

.requirements-chevron {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--lilac-400);
  transition: transform 0.35s var(--ease-editorial), color 0.35s var(--ease-editorial);
}
.requirements-chevron svg { width: 100%; height: 100%; }
.requirements-card.is-open .requirements-chevron { transform: rotate(180deg); color: var(--purple-600); }

.requirements-panel-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease-editorial); }
.requirements-card.is-open .requirements-panel-wrap { grid-template-rows: 1fr; }
.requirements-panel-inner { overflow: hidden; }
.requirements-panel { padding: 4px 22px 26px; }
@media (min-width: 700px) { .requirements-panel { padding: 4px 30px 32px; } }

.requirements-panel-header { text-align: center; max-width: 620px; margin: 0 auto 28px; display: flex; flex-direction: column; gap: 10px; }
.requirements-panel-header .section-intro { margin: 0 auto; color: var(--text-muted); font-size: 15px; }

.requirements-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 20px; }
@media (min-width: 700px) { .requirements-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }

.requirements-item { background: rgba(253, 250, 244, 0.72); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.requirements-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--lilac-200);
  color: var(--purple-600);
  margin-bottom: 4px;
}
.requirements-item-icon svg { width: 20px; height: 20px; }
.requirements-item-title { font-family: var(--font-display); font-size: 17px; font-weight: 500; color: var(--ink-900); }
.requirements-item-body { font-size: 14px; line-height: 1.6; color: var(--text-muted); }

.requirements-visitax:empty { display: none; }
.requirements-visitax {
  position: relative;
  background: linear-gradient(135deg, var(--gold-100) 0%, var(--ivory-100) 100%);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 30px 24px 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}
@media (min-width: 700px) { .requirements-visitax { flex-direction: row; align-items: center; padding: 30px 34px; gap: 24px; } }
.requirements-visitax-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-700);
  background: var(--white);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  position: absolute;
  top: -12px;
  left: 24px;
}
.requirements-visitax-badge svg { width: 10px; height: 10px; }
.requirements-visitax-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--gold-700);
  flex: none;
}
.requirements-visitax-icon svg { width: 24px; height: 24px; }
.requirements-visitax-text { flex: 1 1 auto; }
.requirements-visitax-title { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--ink-900); margin-bottom: 6px; }
.requirements-visitax-body { font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.requirements-visitax-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--gold-700);
  color: var(--white);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  flex: none;
  transition: background-color 0.3s var(--ease-editorial);
}
.requirements-visitax-cta:hover { background: var(--gold-600); }
.requirements-visitax-cta:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }
.requirements-visitax-cta svg { width: 14px; height: 14px; }

.requirements-lower { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 22px; }
@media (min-width: 700px) { .requirements-lower { grid-template-columns: 1.1fr 1fr; align-items: stretch; } }

.requirements-checklist { background: rgba(226, 236, 221, 0.55); border-radius: var(--radius-lg); padding: 26px 24px; }
.requirements-checklist-title { font-family: var(--font-display); font-size: 17px; font-weight: 500; color: var(--ink-900); margin-bottom: 14px; }
.requirements-checklist-list { display: flex; flex-direction: column; gap: 11px; }
.requirements-checklist-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-900); }
.requirements-checklist-list svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--purple-600); }

.requirements-official {
  background: rgba(255, 253, 248, 0.55);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.requirements-official-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--lilac-200);
  color: var(--purple-600);
}
.requirements-official-icon svg { width: 20px; height: 20px; }
.requirements-official-title { font-family: var(--font-display); font-size: 17px; font-weight: 500; color: var(--ink-900); }
.requirements-official-body { font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.requirements-official-cta {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: var(--radius-full);
  background: var(--purple-600);
  color: var(--white);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.3s var(--ease-editorial);
}
.requirements-official-cta:hover { background: var(--purple-500); }
.requirements-official-cta:focus-visible { outline: 2px solid var(--yellow-500); outline-offset: 3px; }
.requirements-official-cta svg { width: 14px; height: 14px; }

.requirements-disclaimer { max-width: 62ch; margin: 0 auto; text-align: center; font-size: 12px; font-style: italic; line-height: 1.6; color: var(--text-muted); }

/* ---------------------------------------------------------------------- */
/* The Challenge — reserved for a future JaX Travel Scavenger Hunt. No     */
/* hunt exists yet, so the CTA renders an honest "Coming Soon" pending     */
/* state (see Assets/js/scavenger-hunt.js) instead of a live/placeholder   */
/* link.                                                                   */
/* ---------------------------------------------------------------------- */
.scavenger-hunt { padding: 8px 0 64px; }
.scavenger-hunt-card {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  background: linear-gradient(150deg, rgba(251, 250, 244, 0.85) 0%, rgba(247, 236, 212, 0.8) 145%);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  padding: 44px 26px 40px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
@media (min-width: 640px) { .scavenger-hunt-card { padding: 52px 56px 48px; } }
.scavenger-hunt-icon { font-size: 30px; line-height: 1; margin-bottom: 4px; }
.scavenger-hunt-card .eyebrow { color: var(--gold-700); }
.scavenger-hunt-title { max-width: 20ch; }
.scavenger-hunt-copy { max-width: 40ch; }
.scavenger-hunt-copy p { font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.scavenger-hunt-copy p + p { margin-top: 6px; }
.scavenger-hunt-cta-row { margin-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.scavenger-hunt-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 30px;
  border-radius: var(--radius-full);
  background: var(--purple-600);
  color: var(--white);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.3s var(--ease-editorial);
}
a.scavenger-hunt-cta:hover { background: var(--purple-500); }
.scavenger-hunt-cta:focus-visible { outline: 2px solid var(--yellow-500); outline-offset: 3px; }
.scavenger-hunt-cta-arrow { display: inline-block; transition: transform 0.25s var(--ease-editorial); }
.scavenger-hunt-cta:hover .scavenger-hunt-cta-arrow { transform: translateX(3px); }
.scavenger-hunt-cta.is-pending { background: none; border: 1px solid var(--border-gold); color: var(--gold-700); }
.scavenger-hunt-pending-pill { align-self: center; }

/* ---------------------------------------------------------------------- */
/* Our Memories — editorial photo gallery (placeholder images)             */
/* Desktop: an asymmetric collage via CSS grid spans + auto-flow dense.    */
/* Mobile: the same items become a horizontal snap-scroll strip — see the  */
/* max-width:759px override below, which cancels every span and lets flex */
/* take over instead.                                                      */
/* ---------------------------------------------------------------------- */
.memories-gallery { padding: 8px 0 88px; }
.memories-header { margin-bottom: 32px; display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.memories-header .eyebrow { color: var(--gold-300); }
.memories-header .section-heading { color: var(--ivory-50); }
.memories-subtitle { font-family: var(--font-body); font-size: 15px; color: var(--lilac-300); }
.memories-instruction {
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(233, 205, 147, 0.55);
}

.memories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 130px;
  grid-auto-flow: row dense;
  gap: 18px;
}
@media (min-width: 1024px) { .memories-grid { grid-auto-rows: 150px; gap: 26px; } }

.memories-item {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.memories-item-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-editorial);
}
.memories-item:hover .memories-item-img,
.memories-item:focus-visible .memories-item-img { transform: scale(1.04); }

.memories-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 20, 16, 0) 55%, rgba(10, 20, 16, 0.72) 100%);
  opacity: 0.7;
  transition: opacity 0.35s ease;
}
.memories-item:hover .memories-item-overlay,
.memories-item:focus-visible .memories-item-overlay { opacity: 0.88; }

.memories-item-caption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ivory-50);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  /* Never scales with the image on hover — see .memories-item-img above,
     which is the only child transform-animated. */
}

.memories-item:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 3px; }

/* Shapes — asymmetric editorial spans on a 4-column desktop grid. Total
   area (4+2+1+2+2+1 = 12 cells) tiles a clean 4x3 block with dense
   packing, so six photos fill the collage with no gaps. */
.memories-item--landscape-hero { grid-column: span 2; grid-row: span 2; }
.memories-item--portrait { grid-column: span 1; grid-row: span 2; }
.memories-item--square { grid-column: span 1; grid-row: span 1; }
.memories-item--landscape { grid-column: span 2; grid-row: span 1; }

@media (max-width: 759px) {
  .memories-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .memories-grid::-webkit-scrollbar { display: none; }
  .memories-item {
    flex: 0 0 78%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    aspect-ratio: 4 / 5;
    height: auto;
  }
  /* Cancel every desktop grid span so each item is a plain flex slide. */
  .memories-item--landscape-hero,
  .memories-item--portrait,
  .memories-item--square,
  .memories-item--landscape {
    grid-column: unset;
    grid-row: unset;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memories-item-img { transition: none; }
  .memories-item:hover .memories-item-img,
  .memories-item:focus-visible .memories-item-img { transform: none; }
  .memories-grid { scroll-behavior: auto; }
}

/* Our Memories lightbox — separate from Our Story's #lightbox: adds
   prev/next controls and a caption. */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 450;
  background: rgba(8, 16, 13, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(24px, env(safe-area-inset-top))
    max(64px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(64px, env(safe-area-inset-left));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}
.gallery-lightbox.is-open { opacity: 1; visibility: visible; }

.gallery-lightbox-stage {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  touch-action: pan-y;
}
.gallery-lightbox-stage img { max-width: 100%; max-height: 78vh; border-radius: 10px; box-shadow: var(--shadow-soft); object-fit: contain; }
.gallery-lightbox-caption {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-300);
}

.gallery-lightbox-close,
.gallery-lightbox-nav {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 100, 0.5);
  background: rgba(255, 255, 255, 0.06);
  color: var(--gold-300);
  cursor: pointer;
  z-index: 2;
}
.gallery-lightbox-close:focus-visible,
.gallery-lightbox-nav:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }

.gallery-lightbox-close {
  top: max(22px, env(safe-area-inset-top));
  right: max(22px, env(safe-area-inset-right));
  width: 42px;
  height: 42px;
  font-size: 22px;
  line-height: 1;
}

.gallery-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-lightbox-nav svg { width: 20px; height: 20px; }
.gallery-lightbox-prev { left: max(16px, env(safe-area-inset-left)); }
.gallery-lightbox-next { right: max(16px, env(safe-area-inset-right)); }
@media (max-width: 640px) {
  .gallery-lightbox { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .gallery-lightbox-nav { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-lightbox { transition: opacity 0.15s ease; }
}

/* ---------------------------------------------------------------------- */
/* Travel Toolkit                                                          */
/* ---------------------------------------------------------------------- */
.toolkit { padding: 8px 0 88px; }
.toolkit-header { margin-bottom: 36px; display: flex; flex-direction: column; gap: 12px; }
.toolkit-header .eyebrow { color: var(--gold-300); }
.toolkit-header .section-heading { color: var(--ivory-50); }
.toolkit-header .section-intro { color: var(--lilac-300); font-size: 15px; }

.toolkit-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .toolkit-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; } }

.toolkit-card {
  position: relative;
  background: rgba(255, 253, 248, 0.82);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-card);
}

.toolkit-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-700);
  background: var(--gold-100);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 4px;
}
.toolkit-badge svg { width: 10px; height: 10px; }

.toolkit-card.is-featured { border: 1px solid var(--border-gold); box-shadow: var(--shadow-soft); }
@media (min-width: 760px) { .toolkit-card.is-featured { padding: 32px 28px; } }

.toolkit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--lilac-200);
  color: var(--purple-600);
}
.toolkit-icon svg { width: 20px; height: 20px; }
.toolkit-card.is-featured .toolkit-icon { background: rgba(212, 175, 100, 0.18); color: var(--gold-700); }

.toolkit-title { font-family: var(--font-display); font-size: 19px; font-weight: 500; color: var(--ink-900); margin-top: 6px; }
.toolkit-description { font-size: 14px; line-height: 1.55; color: var(--text-muted); }

.toolkit-cta {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--purple-600);
  transition: gap 0.3s var(--ease-editorial), color 0.3s var(--ease-editorial);
}
.toolkit-cta svg { width: 13px; height: 13px; transition: transform 0.3s var(--ease-editorial); }
.toolkit-cta:hover { gap: 11px; color: var(--purple-500); }
.toolkit-card.is-featured .toolkit-cta { color: var(--gold-700); }
.toolkit-card.is-featured .toolkit-cta:hover { color: var(--gold-600); }

.toolkit-cta.is-pending { color: var(--mauve-300); cursor: default; pointer-events: none; }
.toolkit-pending-pill { margin-top: 2px; align-self: flex-start; }

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */
.site-footer {
  padding: 22px var(--gutter) 26px;
  background: rgba(14, 42, 32, 0.7);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border-top: 1px solid var(--glass-border);
  color: rgba(231, 219, 238, 0.65);
}
@media (max-width: 759px) {
  .site-footer { padding-bottom: calc(26px + var(--bottom-nav-h) + env(safe-area-inset-bottom)); }
}
.footer-line {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.footer-line .dot { color: rgba(231, 219, 238, 0.3); }
.footer-line .brand-link { color: var(--gold-300); font-weight: 600; }
.footer-line .brand-link[href] { cursor: pointer; }
.footer-line .brand-link:not([href]) { cursor: default; }
.footer-social { display: inline-flex; align-items: center; gap: 12px; margin-left: 2px; }
.footer-social a, .footer-social span { display: inline-flex; color: rgba(231, 219, 238, 0.55); transition: color 0.3s var(--ease-editorial); }
.footer-social a:hover { color: var(--gold-300); }
.footer-social svg { width: 15px; height: 15px; }

@media (max-width: 380px) { .footer-line { font-size: 11.5px; } }

/* ---------------------------------------------------------------------- */
/* Save to Phone                                                           */
/* ---------------------------------------------------------------------- */
.stp-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(20, 8, 24, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease-editorial), visibility 0.35s;
}
.stp-overlay.is-open { opacity: 1; visibility: visible; }
@media (min-width: 640px) { .stp-overlay { align-items: center; padding: 24px; } }

.stp-sheet {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--ivory-50);
  border-radius: 22px 22px 0 0;
  padding: 14px 26px 30px;
  box-shadow: 0 -20px 60px -20px rgba(20, 8, 24, 0.5);
  transform: translateY(24px);
  transition: transform 0.4s var(--ease-editorial);
}
.stp-overlay.is-open .stp-sheet { transform: translateY(0); }
.stp-sheet:focus { outline: none; }
@media (min-width: 640px) {
  .stp-sheet { border-radius: var(--radius-lg); padding: 32px 34px 34px; max-height: 84vh; }
}

.stp-handle { display: block; width: 40px; height: 4px; border-radius: var(--radius-full); background: var(--lilac-300); margin: 4px auto 18px; }
@media (min-width: 640px) { .stp-handle { display: none; } }

.stp-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--lilac-200);
  border: none;
  color: var(--purple-700);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s var(--ease-editorial);
}
.stp-close:hover { background: var(--lilac-300); }
.stp-close:focus-visible { outline: 2px solid var(--yellow-500); outline-offset: 2px; }
.stp-close svg { width: 15px; height: 15px; }

.stp-header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 0 8px; }
.stp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--purple-900);
  color: var(--gold-300);
  margin-bottom: 4px;
}
.stp-icon svg { width: 20px; height: 20px; }
.stp-title { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--ink-900); }
.stp-intro { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--text-muted); text-align: center; max-width: 34ch; }

.stp-tabs { display: flex; gap: 8px; margin-top: 24px; padding: 4px; background: var(--ivory-100); border-radius: var(--radius-full); }
.stp-tab {
  flex: 1;
  padding: 9px 12px;
  border-radius: var(--radius-full);
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  transition: background-color 0.3s var(--ease-editorial), color 0.3s var(--ease-editorial);
}
.stp-tab.is-active { background: var(--white); color: var(--purple-700); box-shadow: var(--shadow-card); }
.stp-tab:focus-visible { outline: 2px solid var(--yellow-500); outline-offset: 2px; }

.stp-panels { margin-top: 20px; }
.stp-steps { display: flex; flex-direction: column; gap: 16px; }
.stp-step { display: flex; align-items: flex-start; gap: 12px; }
.stp-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--lilac-200);
  color: var(--purple-600);
}
.stp-step-icon svg { width: 15px; height: 15px; }
.stp-step-text { font-size: 14px; line-height: 1.5; color: var(--ink-900); padding-top: 5px; }

/* ---------------------------------------------------------------------- */
/* Share This Trip                                                         */
/* ---------------------------------------------------------------------- */
.share-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(20, 8, 24, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease-editorial), visibility 0.35s;
}
.share-overlay.is-open { opacity: 1; visibility: visible; }
@media (min-width: 640px) { .share-overlay { align-items: center; padding: 24px; } }

.share-sheet {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--ivory-50);
  border-radius: 22px 22px 0 0;
  padding: 14px 26px 30px;
  box-shadow: 0 -20px 60px -20px rgba(20, 8, 24, 0.5);
  transform: translateY(24px);
  transition: transform 0.4s var(--ease-editorial);
}
.share-overlay.is-open .share-sheet { transform: translateY(0); }
.share-sheet:focus { outline: none; }
@media (min-width: 640px) {
  .share-sheet { border-radius: var(--radius-lg); padding: 32px 34px 34px; max-height: 84vh; }
}

.share-handle { display: block; width: 40px; height: 4px; border-radius: var(--radius-full); background: var(--lilac-300); margin: 4px auto 18px; }
@media (min-width: 640px) { .share-handle { display: none; } }

.share-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--lilac-200);
  border: none;
  color: var(--purple-700);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s var(--ease-editorial);
}
.share-close:hover { background: var(--lilac-300); }
.share-close:focus-visible { outline: 2px solid var(--yellow-500); outline-offset: 2px; }
.share-close svg { width: 15px; height: 15px; }

.share-header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 0 8px; }
.share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--purple-900);
  color: var(--gold-300);
  margin-bottom: 4px;
}
.share-icon svg { width: 20px; height: 20px; }
.share-title { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--ink-900); }
.share-intro { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--text-muted); text-align: center; max-width: 34ch; }

.share-copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 24px;
  padding: 14px 20px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--purple-600);
  color: var(--white);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.3s var(--ease-editorial);
}
.share-copy-btn:hover { background: var(--purple-500); }
.share-copy-btn:focus-visible { outline: 2px solid var(--yellow-500); outline-offset: 2px; }
.share-copy-icon { display: inline-flex; width: 15px; height: 15px; }
.share-copy-icon svg { width: 100%; height: 100%; }

.share-status {
  margin-top: 12px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--purple-600);
  opacity: 0;
  transition: opacity 0.3s var(--ease-editorial);
}
.share-status.is-visible { opacity: 1; }