/* ==========================================================================
   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: #1c1220;
  --ink-700: #2c1f33;
  --mauve-500: #8a7690;
  --mauve-300: #c9bccf;
  --ivory-100: #f4ead9;
  --ivory-50: #fdfaf5;
  --white: #fdfaf5;

  /* "Purple" system, renamed in spirit only — deep rainforest green, the
     site's dominant identity color (canopy at dusk) */
  --purple-900: #170c22;
  --purple-800: #23122f;
  --purple-700: #341a3f;
  --purple-600: #4a2350;
  --purple-500: #63317a;
  --lilac-400: #b9a3c8;
  --lilac-300: #cdbdd8;
  --lilac-200: #e5dbeb;

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

  /* "Yellow" accent, renamed in spirit only — sunset coral/amber, used for
     departure badges, CTAs, high-visibility moments */
  --yellow-700: #8f3a5c;
  --yellow-600: #b04b76;
  --yellow-500: #c9598b;
  --yellow-300: #dd8fae;

  /* 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(23, 12, 34, 0.12);
  --border-gold: rgba(212, 175, 100, 0.5);
  --border-lilac: rgba(185, 163, 200, 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, 70, 45, 0.24);
  --ink-black: #1a1013;
  --ink-black-soft: #271822;
  /* 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: #e37fa8;
  /* 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);
}

/* Site-wide backdrop for everything BELOW the Hero — background.png, the
   Hero's companion artwork (florals + candlelight framing both edges,
   blurred Houston skyline top/bottom, intentionally darker negative space
   down the center where content sits). This is a fixed, non-scrolling DIV
   (not CSS `background-attachment:fixed` on <body>) specifically to avoid
   the well-documented iOS Safari bug where a fixed background image
   miscalculates against the dynamic toolbar/viewport — same technique the
   Puerto Rico reference itinerary used for its own page-bg. `cover` never
   stretches/distorts the art (it only crops); `center center` keeps the
   image's own darker middle column behind the centered content column on
   every viewport, with the floral edges naturally showing at the sides on
   wider screens. Every section below the Hero is a transparent glass card
   on top of this single layer, so it reads as one continuous backdrop
   rather than a tiled or isolated image. No overlay: the artwork is
   already dark/moody enough for the light text sitting directly on it. */
.page-bg {
  position: fixed;
  inset: 0;
  /* z-index:0, NOT -1: <body> has its own opaque background-color (see the
     Reset block below) as a flash-of-unstyled-content fallback. A negative
     z-index here would paint this layer BEHIND that opaque body
     background — a well-known CSS gotcha — hiding the artwork completely
     rather than just tucking it behind page content. z-index:0 keeps it
     above body's own background while everything else (sections, cards)
     still paints on top of it normally through ordinary DOM/stacking
     order, since nothing else on the page uses a negative z-index. */
  z-index: 0;
  background-color: var(--purple-900);
  background-image: url("../img/background/background.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* 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: #170c22;
  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);
  /* Promotes this fixed bar to its own GPU-composited layer, pinned to
     the viewport independent of the document's own layout/paint tree.
     iOS Safari can otherwise mis-recompute a `left:0;right:0` fixed
     element's size/position after a native UI overlay (the share sheet,
     the keyboard, etc.) interrupts and hands control back to the page —
     this keeps the nav's own box stable across that handoff regardless
     of what the interrupting UI did to the page underneath it. */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.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);
  /* Same GPU-layer pin as .site-nav above — keeps this bar's own box
     stable if iOS mis-recomputes fixed-position layout after the native
     share sheet (or any other native overlay) hands control back. */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
@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 — used only by the splash/loading screen now (the Hero has its
   own separate, already-approved photo layer in styles.css and is not
   touched by this file). Reuses the approved hero.png for the brief
   loading screen rather than inventing a second background image during
   this skeleton phase. .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/hero/hero.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(201, 89, 139, 0.24) 0%, rgba(201, 89, 139, 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(229, 219, 235, 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; }
}

/* ---------------------------------------------------------------------- */
/* 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(253, 250, 245, 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(23, 12, 34, 0.82) 0%, rgba(35, 18, 47, 0.78) 55%, rgba(52, 26, 63, 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(229, 219, 235, 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(229, 219, 235, 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(229, 219, 235, 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(229, 219, 235, 0.75); }
.journey-connection-layover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(229, 219, 235, 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(229, 219, 235, 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(229, 219, 235, 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(229, 219, 235, 0.6); margin-left: 4px; }
.journey-fare-disclaimer { margin-top: 8px; font-size: 12px; font-style: italic; color: rgba(229, 219, 235, 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(229, 219, 235, 0.8); }

.journey-coordination-note {
  margin-top: 24px;
  padding: 14px 18px;
  border-left: 3px solid var(--yellow-500);
  background: rgba(201, 89, 139, 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(229, 219, 235, 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(229, 219, 235, 0.6); border-color: rgba(185, 163, 200, 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(253, 250, 245, 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(253, 250, 245, 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(253, 250, 245, 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(253, 250, 245, 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(253, 250, 245, 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(253, 250, 245, 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: var(--yellow-600); }
.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(253, 250, 245, 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); }

/* ---------------------------------------------------------------------- */
/* The Packing Edit — collapsed-by-default accordion placed right after    */
/* The Style Edit. Same single-card toggle system as Destination           */
/* Requirements (.requirements-* above) — a compact header row that        */
/* expands a grid-template-rows 0fr->1fr panel, so the closed state never  */
/* adds real length to the page. Content can't be finalized until Auntie   */
/* confirms the remaining themes/trip details, so an empty                 */
/* PACKING_EDIT.items renders .packing-edit-empty "Coming Soon" instead of */
/* the real checklist — see renderPackingEdit in app.js. The checklist,    */
/* progress counter, and Reset styling below are built now so the real     */
/* list needs no new CSS once items exist.                                 */
/* ---------------------------------------------------------------------- */
.packing-edit { padding: 8px 0 40px; }
.packing-edit-card { background: rgba(253, 250, 245, 0.82); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow); }

.packing-edit-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) { .packing-edit-toggle { padding: 26px 30px; gap: 20px; } }
.packing-edit-toggle:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }

.packing-edit-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--radius-md);
  background: linear-gradient(155deg, var(--gold-100) 0%, rgba(201, 89, 139, 0.16) 100%);
  color: var(--gold-700);
}
.packing-edit-toggle-icon svg { width: 22px; height: 22px; }

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

.packing-edit-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);
}
.packing-edit-chevron svg { width: 100%; height: 100%; }
.packing-edit-card.is-open .packing-edit-chevron { transform: rotate(180deg); color: var(--purple-600); }

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

.packing-edit-instruction { font-size: 14px; color: var(--text-muted); margin: 0 0 20px; }

/* Coming-soon placeholder — shown while PACKING_EDIT.items is empty. */
.packing-edit-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 20px 8px 12px;
}
.packing-edit-empty .glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  color: var(--gold-700);
  background: linear-gradient(155deg, var(--gold-100) 0%, rgba(201, 89, 139, 0.16) 100%);
}
.packing-edit-empty .glyph svg { width: 20px; height: 20px; }
.packing-edit-empty p { max-width: 46ch; font-size: 14px; line-height: 1.65; color: var(--text-muted); margin: 0; }

/* Real checklist — renders once PACKING_EDIT.items has entries. */
.packing-progress {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--purple-600);
}

.packing-checklist-list { list-style: none; margin: 0 0 22px; padding: 0; }
.packing-item { border-bottom: 1px solid var(--border-soft); }
.packing-item:last-child { border-bottom: none; }
.packing-item-label {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.packing-item-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
}
.packing-item-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border: 1.5px solid var(--border-gold);
  border-radius: 7px;
  color: transparent;
  background: rgba(255, 255, 255, 0.5);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.packing-item-box svg { width: 15px; height: 15px; }
.packing-item-checkbox:checked + .packing-item-box {
  background: var(--purple-600);
  border-color: var(--purple-600);
  color: var(--ivory-50);
}
.packing-item-checkbox:focus-visible + .packing-item-box { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.packing-item-text { font-size: 14.5px; color: var(--ink-900); transition: color 0.2s ease; }
.packing-item.is-checked .packing-item-text {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--border-gold);
}

.packing-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-full);
  background: none;
  color: var(--gold-700);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease;
}
.packing-reset-btn:hover { background: rgba(212, 175, 100, 0.14); }
.packing-reset-btn:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.packing-reset-btn svg { width: 14px; height: 14px; }

/* Closing note — links out to the full Travel Essentials Checklist in
   Your Travel Toolkit (#toolkit) instead of duplicating it here. */
.packing-edit-full-note {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed var(--border-gold);
}
.packing-edit-full-note-question { font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--ink-900); margin: 0 0 4px; }
.packing-edit-full-note-body { font-size: 13px; line-height: 1.6; color: var(--text-muted); margin: 0 0 10px; max-width: 52ch; }
.packing-edit-full-note-link {
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold-700);
  border-bottom: 1px solid var(--border-gold);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.packing-edit-full-note-link:hover { color: var(--purple-600); border-color: var(--purple-600); }

/* ---------------------------------------------------------------------- */
/* 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(23, 12, 34, 0.82) 0%, rgba(35, 18, 47, 0.78) 55%, rgba(52, 26, 63, 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;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
/* Real photo state — object-position is set inline per-person (see
   renderCrewPortrait in app.js / `photoPosition` in content.js) so each
   woman's face sits well inside her frame; this rule only supplies the
   shared fit/sizing behavior. */
.crew-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Stephanie-only correction — her source photo is a full-body shot with
   her face occupying only the top ~30%. object-position alone can't crop
   tighter here (cover already maps the image's full width to the frame,
   leaving no horizontal slack to shift), so this scales the already
   cover-fit image up 2.15x and re-centers it on her face, computed from
   her face's exact position in the source photo (roughly x 420-900,
   y 220-700 of the 1035x1576 original) so the result reads as a natural
   headshot: full face, a little hair, a small hint of shoulder, no body
   or background. Applies only to this one photo via photoClass in
   content.js — every other traveler's photo is untouched. */
.crew-portrait-img--stephanie {
  transform: scale(2.15) translate(-13.8%, 5.6%);
  transform-origin: center;
}

/* The 50s — same technique as Stephanie above: every one of these source
   photos is a full-body or screenshot-cropped shot, so each gets its own
   hand-computed scale+translate (derived from that photo's actual face
   position) via its own photoClass, applied only to that one <img>. */
.crew-portrait-img--michelle { transform: scale(2.25) translate(0%, 9.01%); transform-origin: center; }
.crew-portrait-img--sharone { transform: scale(2.5) translate(-10%, 21.5%); transform-origin: center; }
.crew-portrait-img--renee-d { transform: scale(1.3) translate(3.1%, 0%); transform-origin: center; }
.crew-portrait-img--ava { transform: scale(3.1) translate(1%, 10%); transform-origin: center; }
/* Vicky and Lisa use a different technique entirely: their source photos
   are phone screenshots that already contain a complete circular avatar
   (not a rectangular photo to crop into). vicky-portrait.png /
   lisa-portrait.png (content.js) are pre-cropped extractions of just that
   existing circle — object-fit:contain (not cover) and no transform here
   so the whole circle displays intact, centered, unzoomed. */
.crew-portrait-img--vicky { object-fit: contain; }
.crew-portrait-img--renee-s { transform: scale(1.86) translate(2.3%, 17.1%); transform-origin: center; }
.crew-portrait-img--lisa { object-fit: contain; }

.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 real <img class="crew-portrait-img"> instead of this. */
.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(23, 12, 34, 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(229, 219, 235, 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(35, 18, 47, 0.82) 0%, rgba(52, 26, 63, 0.78) 55%, rgba(74, 35, 80, 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: var(--gold-300);
}
.story-finale-hint { margin-top: 4px; font-size: 12.5px; font-style: italic; color: rgba(229, 219, 235, 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(229, 219, 235, 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(229, 219, 235, 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(229, 219, 235, 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(253, 250, 245, 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, 245, 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(229, 219, 235, 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(253, 250, 245, 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);
}

/* Masonry via native CSS multi-column layout — no build step, no JS
   layout code, and (unlike CSS Grid spans) each card's height falls
   out of its own image's natural aspect ratio instead of a shared
   placeholder shape. Columns fill top-to-bottom then wrap, which is
   the standard/expected reading order for this kind of mosaic. */
.memories-grid {
  columns: 2;
  column-gap: 18px;
}
@media (min-width: 1024px) { .memories-grid { columns: 3; column-gap: 26px; } }

/* Houston skeleton phase: when no photos exist yet, a single "coming soon"
   card (.style-edit-empty, injected by renderMemoriesComingSoon in
   itinerary-app.js) renders inside this multi-column mosaic container —
   span all columns so it never gets sliced across them. */
.memories-grid .style-edit-empty { column-span: all; }

.memories-item {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--radius-md);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
@media (min-width: 1024px) { .memories-item { margin-bottom: 26px; } }

.memories-item-img {
  display: block;
  width: 100%;
  height: auto;
  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; }

@media (max-width: 759px) {
  .memories-grid {
    display: flex;
    align-items: flex-start;
    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%;
    margin-bottom: 0;
    align-self: flex-start;
    height: auto;
    aspect-ratio: auto;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  /* Belt-and-suspenders: the base rules above already render each photo
     at its natural size with no crop, but pin that explicitly here so a
     mobile card can never be pulled back into a fixed frame. */
  .memories-item-img {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    padding: 0 !important;
    object-fit: initial;
    object-position: initial !important;
  }
}

@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(253, 250, 245, 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(23, 12, 34, 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; }