/* ==========================================================================
   NEGRIL LUXE — visual system for everything BELOW the Hero.
   Loads AFTER styles.css and overrides only the classes used by sections
   below the Hero. Nothing in this file targets .hero or .hero-* selectors
   — the approved/locked Hero (including .site-nav's base, un-scrolled
   state, which is part of the over-the-photo Hero experience) is
   structurally unreachable from here. Do not add Hero selectors to this
   file; if a future change needs to touch the Hero, it belongs in
   styles.css's own Hero section instead, with explicit sign-off.

   Material language, inspired by (not copied from) the Houston reference
   itinerary's glass system: translucent deep-plum/aubergine surfaces
   floating over TRIP.siteBackground's artwork, thin champagne-gold
   borders, restrained inner highlights, occasional soft orchid/rose glow.
   Colors are pulled from this trip's own approved Hero (the NEGRIL word's
   rose/plum gradient) and background.png's sunset palette — not Houston's.
   ========================================================================== */

:root {
  /* Core glass surface — a two-stop plum/aubergine gradient with enough
     opacity (≥0.5) to stay fully readable even where backdrop-filter isn't
     supported (see the @supports block below); blur/saturate there is a
     progressive enhancement, not a readability dependency. */
  --lux-glass-fill: linear-gradient(160deg, rgba(66, 49, 36, 0.62) 0%, rgba(25, 19, 14, 0.74) 100%);
  --lux-glass-fill-soft: linear-gradient(160deg, rgba(66, 49, 36, 0.46) 0%, rgba(25, 19, 14, 0.56) 100%);
  --lux-glass-fill-strong: linear-gradient(160deg, rgba(66, 49, 36, 0.78) 0%, rgba(25, 19, 14, 0.88) 100%);
  --lux-inner-glow: radial-gradient(120% 140% at 50% -10%, rgba(226, 205, 162, 0.13) 0%, rgba(226, 205, 162, 0) 46%);
  --lux-glass-border: rgba(226, 205, 162, 0.28);
  --lux-glass-border-strong: rgba(226, 205, 162, 0.52);
  --lux-orchid-border: rgba(185, 157, 134, 0.38);
  --lux-shadow: 0 24px 56px -24px rgba(12, 9, 6, 0.72), 0 2px 10px -2px rgba(12, 9, 6, 0.42);
  --lux-shadow-soft: 0 16px 36px -20px rgba(12, 9, 6, 0.6);
  --lux-glow-orchid: 0 0 46px -16px rgba(185, 157, 134, 0.32);
  --lux-glow-champagne: 0 0 40px -16px rgba(226, 205, 162, 0.3);

  /* Text/accent palette — ivory for primary text, champagne for labels and
     fine accents, orchid/blush reserved for occasional highlights so the
     Hero's dramatic pink/plum gradient stays special rather than repeated
     everywhere (per the brief). */
  --lux-ivory: #f7f0e6;
  --lux-ivory-soft: rgba(247, 240, 230, 0.78);
  --lux-ivory-faint: rgba(247, 240, 230, 0.55);
  --lux-champagne: var(--gold-300);
  --lux-champagne-strong: var(--gold-500);
  --lux-champagne-soft: rgba(226, 205, 162, 0.8);
  --lux-orchid: #b99d86;
  --lux-blush: #d9bf9a;
  --lux-deep: #19130e;

  /* Reserved exclusively for the itinerary's Main Event / celebration-day
     card (see .day-card.is-celebration below) — sophisticated rose glass,
     not the everyday plum glass every other card uses. Built from the
     same rose/orchid family as the Hero's own NEGRIL gradient (blush at
     top, deepening toward plum) so it reads as "special" without
     introducing a new, disconnected color. Deliberately shifted LIGHTER
     than the surrounding dark-plum cards (not just tinted) — the
     hierarchy that makes this card read as "the celebration moment" at a
     glance comes from occupying a visibly brighter value range than its
     neighbors, not from extra decoration. Alphas kept low enough (and
     backdrop-filter saturation raised, see --lux-celebration-blur) that
     TRIP.siteBackground's Negril artwork stays softly visible through the
     card rather than being hidden behind a solid tint — true glass, not
     an opaque panel. The gradient still deepens slightly toward its base
     so text lower in the card keeps contrast, but the base itself is now
     a warm rose-plum rather than the near-black plum every regular card
     uses — even the darkest part of this card stays lighter than a
     regular card's lightest part. */
  --lux-celebration-glass-fill: linear-gradient(160deg, rgba(190, 158, 124, 0.34) 0%, rgba(146, 114, 88, 0.48) 45%, rgba(96, 72, 54, 0.62) 100%);
  --lux-celebration-inner-glow: radial-gradient(130% 150% at 50% -14%, rgba(255, 238, 208, 0.40) 0%, rgba(255, 214, 200, 0) 52%);
  /* Brighter and slightly warmer than the standard glass border, plus a
     thin inset "inner border" hairline (see .day-card.is-celebration's
     box-shadow) so the frame reads as two fine lines of light rather than
     one thicker one — presence from luminosity, not weight. */
  --lux-celebration-border: rgba(240, 214, 168, 0.8);
  --lux-celebration-border-inner: rgba(255, 235, 205, 0.32);
  /* Two-layer halo: a closer rose/orchid glow (lifts the card off the
     page) plus a wider, fainter champagne wash (the "warmth" without
     tipping into neon) — both restrained via negative spread and tight
     alpha, same technique as every other glow in this file. */
  --lux-celebration-glow: 0 0 60px -10px rgba(198, 168, 144, 0.5), 0 0 120px -30px rgba(226, 205, 162, 0.32);
  /* A touch less blur than the standard --lux-blur (so the site
     background reads as perceptible scenery, not a smooth color wash)
     and more saturation (so the scenery that does show through picks up
     the rose cast instead of washing it out). Progressive enhancement
     only — the fill above is already readable without it, same as every
     other glass surface in this file. */
  --lux-celebration-blur: blur(13px) saturate(180%);

  --lux-radius: var(--radius-lg);
  --lux-blur: blur(20px) saturate(150%);
}

/* ROOT-CAUSE FIX: body is a normal (non-positioned, non-stacking-context)
   box, so per CSS painting order its own background paints in the
   "in-flow descendants" step — AFTER (in front of) any negative-z-index
   positioned sibling, including .site-background at z-index: -1. An
   earlier pass gave body an OPAQUE --lux-deep fill to replace the old
   ivory --bg-body, not realizing that fill itself would paint over the
   fixed background layer for the entire document height, at every scroll
   position — which is exactly why the artwork was invisible. body must
   stay transparent for .site-background to ever be visible; the fallback
   color for the brief window before the image loads (or if it fails)
   now lives on .site-background itself instead, entirely behind the
   image layer, where an opaque fill is actually safe. */
body { background: transparent; }
/* The fallback color moved here from body (see above) — this box sits
   fully behind .site-background-image/-overlay within the same element,
   so an opaque fill here is safe: it can never paint in front of the
   artwork, only behind it while the image is still loading. */
.site-background { background-color: var(--lux-deep); }

/* ---------------------------------------------------------------------- */
/* Shared glass surface — applied to every card/panel container below the */
/* Hero. Grouped so the same six properties aren't repeated per section;  */
/* per-component rules further down only add what's specific to them     */
/* (radius, padding, unique glow). backdrop-filter sits in its own        */
/* @supports block so the base rule alone is already a fully readable,    */
/* richly-tinted dark surface with no dependency on blur support.         */
/* ---------------------------------------------------------------------- */
.glance-card,
.weather-card,
.day-card,
.requirements-card,
.stay-card,
.toolkit-card,
.album-card,
.scavenger-hunt-card,
.style-card,
.stp-sheet,
.share-sheet,
.album-sheet,
.packing-edit-card {
  background-image: var(--lux-inner-glow), var(--lux-glass-fill);
  background-color: transparent;
  border: 1px solid var(--lux-glass-border);
  box-shadow: var(--lux-shadow);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glance-card,
  .weather-card,
  .day-card,
  .requirements-card,
  .stay-card,
  .toolkit-card,
  .album-card,
  .scavenger-hunt-card,
  .style-card,
  .stp-sheet,
  .share-sheet,
  .album-sheet,
  .packing-edit-card {
    backdrop-filter: var(--lux-blur);
    -webkit-backdrop-filter: var(--lux-blur);
  }
}

/* Shared section-header utility classes (.eyebrow/.section-heading/
   .section-intro) are used across nearly every section below the Hero —
   confirmed via markup search that none appear inside .hero, so a single
   global override here is safe and replaces what would otherwise be
   dozens of repeated per-section rules. */
.eyebrow { color: var(--lux-champagne); }
.section-heading { color: var(--lux-ivory); }
.section-intro { color: var(--lux-ivory-faint); }

/* ---------------------------------------------------------------------- */
/* Fixed Navigation — visual only. .site-nav's BASE (un-scrolled) state   */
/* is part of the over-the-Hero-photo experience and is intentionally     */
/* left untouched; only .is-scrolled (shown once the traveler has moved   */
/* past the Hero) gets the Negril Luxe treatment. Structure, z-index,       */
/* fixed positioning, safe-area padding, and setupBottomNavRecovery()'s   */
/* own geometry logic are all unchanged — colors/background only.        */
/* ---------------------------------------------------------------------- */
.site-nav.is-scrolled {
  background: var(--lux-glass-fill-strong);
  box-shadow: 0 1px 0 var(--lux-glass-border), var(--lux-shadow-soft);
}
.site-nav.is-scrolled .brand-mark { color: var(--lux-ivory); }
.site-nav.is-scrolled .nav-links a { color: var(--lux-ivory-soft); }
.site-nav.is-scrolled .nav-links a:hover,
.site-nav.is-scrolled .nav-links a.is-active {
  color: var(--lux-champagne);
  border-color: var(--lux-champagne);
}

.bottom-nav {
  background: var(--lux-glass-fill-strong);
  border-top: 1px solid var(--lux-glass-border);
  box-shadow: 0 -10px 30px -14px rgba(12, 9, 6, 0.5);
}
.bottom-nav-item { color: var(--lux-ivory-faint); }
.bottom-nav-item.is-active .bottom-nav-icon {
  background: rgba(226, 205, 162, 0.16);
  color: var(--lux-champagne);
}
.bottom-nav-item.is-active .bottom-nav-label {
  color: var(--lux-champagne);
}

/* ---------------------------------------------------------------------- */
/* Trip Countdown — CORRECTED to the same translucent Negril Luxe glass      */
/* system every other card/panel in this file uses (--lux-glass-fill +    */
/* --lux-inner-glow + --lux-glass-border + --lux-blur — the identical   */
/* recipe behind .glance-card/.day-card/.requirements-card/etc., see the   */
/* shared grouped selector near the top of this file), not a one-off       */
/* treatment invented for this section. Two earlier attempts both missed   */
/* this: the first (background: none) dropped the bar entirely, showing    */
/* the numbers with no container; the fix for that mistakenly restored     */
/* styles.css's pre-Negril-Luxe OPAQUE gradient instead of this file's own   */
/* translucent glass tokens. This is the actual correct middle ground —    */
/* a genuine glass bar the Negril scenery stays visible through, exactly     */
/* like every other section, at the same opacity/blur used everywhere      */
/* else so it reads as belonging to the same environment. Functionality/   */
/* date logic untouched — app.js's setupCountdown() is not modified by     */
/* this phase; this is presentation only.                                 */
/* ---------------------------------------------------------------------- */
.countdown {
  background-image: var(--lux-inner-glow), var(--lux-glass-fill);
  border-top: 1px solid var(--lux-glass-border);
  border-bottom: 1px solid var(--lux-glass-border);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .countdown {
    backdrop-filter: var(--lux-blur);
    -webkit-backdrop-filter: var(--lux-blur);
  }
}
.countdown::before {
  background: radial-gradient(60% 140% at 50% 0%, rgba(185, 157, 134, 0.14) 0%, rgba(185, 157, 134, 0) 60%);
}
.countdown-eyebrow { color: var(--lux-champagne); }
.countdown-number {
  color: var(--lux-ivory);
  text-shadow: 0 2px 10px rgba(12, 9, 6, 0.5);
}
.countdown-label { color: var(--lux-champagne-soft); }
.countdown-complete { color: var(--lux-blush); }

/* ---------------------------------------------------------------------- */
/* Trip at a Glance                                                        */
/* ---------------------------------------------------------------------- */
.glance { background: none; }
.glance-card { border-radius: var(--lux-radius); }
.glance-card .icon { color: var(--lux-champagne); }
.glance-card .label { color: var(--lux-ivory-faint); }
.glance-card .value { color: var(--lux-ivory); }

/* ---------------------------------------------------------------------- */
/* Smart Trip Weather — presentation only; state machine/fetch logic in   */
/* trip-weather.js is untouched.                                          */
/* ---------------------------------------------------------------------- */
.weather { background: none; }
.weather-eyebrow { color: var(--lux-champagne); }
.weather-headline { color: var(--lux-ivory); }
.weather-message { color: var(--lux-ivory-soft); }
.weather-submessage { color: var(--lux-ivory-faint); }
.weather-loading-text { color: var(--lux-ivory-faint); }
.weather-post-message { color: var(--lux-ivory-soft); }
.weather-icon-badge { background: rgba(226, 205, 162, 0.14); color: var(--lux-champagne); }
.weather-day {
  background: rgba(66, 49, 36, 0.4);
  border: 1px solid var(--lux-glass-border);
}
.weather-day-date { color: var(--lux-champagne-soft); }
.weather-day-icon { color: var(--lux-orchid); }
.weather-day-temps { color: var(--lux-ivory); }
.weather-day-low { color: var(--lux-ivory-faint); }
.weather-day-condition { color: var(--lux-ivory-soft); }
.weather-day-rain { color: var(--lux-blush); }
.weather-day--soon { opacity: 0.6; }
.weather-day-soon-label { color: var(--lux-ivory-faint); }
.weather-now-icon { color: var(--lux-orchid); }
.weather-now-temp { color: var(--lux-ivory); }
.weather-now-condition { color: var(--lux-ivory-soft); }
.weather-now-range { color: var(--lux-ivory-faint); }
.weather-connect-label { color: var(--lux-champagne); }
.weather-connect-style-name { color: var(--lux-ivory); }
.weather-connect-link { color: var(--lux-champagne); }
.weather-plans-list { color: var(--lux-ivory-soft); }
.weather-plans-time { color: var(--lux-ivory-faint); }

/* ---------------------------------------------------------------------- */
/* The Journey — flight cards were already a dark aubergine gradient, so  */
/* this only refines the glass polish and reskins the route line/plane    */
/* to champagne/rose/plum tones. The airplane animation itself (keyframes,*/
/* timing, calc()-based inset math) is completely untouched — only        */
/* currentColor and the track's gradient stops change.                   */
/* ---------------------------------------------------------------------- */
.journey { background: none; }
.journey-header .eyebrow { color: var(--lux-champagne); }
.journey-header .section-heading { color: var(--lux-ivory); }
.journey-group {
  background-image: var(--lux-inner-glow), var(--lux-glass-fill);
  border: 1px solid var(--lux-glass-border);
  box-shadow: var(--lux-shadow);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .journey-group {
    backdrop-filter: var(--lux-blur);
    -webkit-backdrop-filter: var(--lux-blur);
  }
}
.journey-host-badge { background: rgba(185, 157, 134, 0.18); color: var(--lux-champagne); }
.journey-host-explanation { color: var(--lux-ivory-soft); }
.journey-leg-eyebrow { color: var(--lux-champagne); }
.journey-leg-route-label { color: var(--lux-ivory); }
.journey-leg-arrow { color: var(--lux-orchid); }
.journey-leg-date { color: var(--lux-ivory-faint); }
.journey-airport-code { color: var(--lux-ivory); }
.journey-route-time { color: var(--lux-ivory-faint); }
.journey-route-track {
  background: linear-gradient(90deg, rgba(185, 157, 134, 0.12) 0%, rgba(226, 205, 162, 0.6) 50%, rgba(185, 157, 134, 0.12) 100%);
}
.journey-route-plane { color: var(--lux-champagne); }
.journey-connection { background: rgba(185, 157, 134, 0.14); border-color: var(--lux-orchid-border); }
.journey-connection-airport { color: var(--lux-ivory); }
.journey-connection-layover { color: var(--lux-ivory-faint); background: rgba(247, 240, 230, 0.12); }
.journey-detail-label { color: var(--lux-champagne-soft); }
.journey-detail-value { color: var(--lux-ivory); }
.journey-fare-label { color: var(--lux-champagne-soft); }
.journey-fare-amount { color: var(--lux-ivory); }
.journey-fare-type { color: var(--lux-ivory-faint); }
.journey-fare-disclaimer { color: var(--lux-ivory-faint); }
.journey-guidance-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--lux-champagne);
}
.journey-guidance p { color: var(--lux-ivory-soft); }
/* Recommended Arrival/Departure "Coming Soon" state — same polished-
   placeholder language as the rest of the Master (Stay, Toolkit, the
   booking CTA below), so it reads as intentional rather than empty. */
.journey-guidance-item.is-pending p { color: var(--lux-ivory-faint); font-style: italic; }
.journey-guidance-pending-pill { margin: 0; }
.journey-cta { background: var(--lux-champagne); color: var(--lux-deep); }
a.journey-cta:hover { background: var(--lux-champagne-strong); }
/* Dark-glass contrast for every "Coming Soon" pill across the page (Stay,
   Toolkit, and Journey's own booking-link CTA already used this class;
   its light-theme colors were never updated when those cards went dark
   in the Negril Luxe pass — fixed here for all of them at once). */
.pill-tbd { color: var(--lux-champagne); border-color: var(--lux-glass-border-strong); }

/* ---------------------------------------------------------------------- */
/* Destination Requirements — enabled with verified Negril/Indonesia data   */
/* (see DESTINATION_REQUIREMENTS in content.js). Behavior/accordion       */
/* accessibility (aria-expanded, inert) is untouched.                     */
/* ---------------------------------------------------------------------- */
.requirements { background: none; }
.requirements-card { border-radius: var(--lux-radius); }
.requirements-toggle-heading { color: var(--lux-ivory); }
.requirements-toggle-subtitle { color: var(--lux-ivory-faint); }
.requirements-toggle-icon { background: rgba(226, 205, 162, 0.16); color: var(--lux-champagne); }
.requirements-chevron { color: var(--lux-champagne); }
.requirements-heading { color: var(--lux-ivory); }
.requirements-intro { color: var(--lux-ivory-faint); }
.requirements-item { background: rgba(66, 49, 36, 0.36); border: 1px solid var(--lux-glass-border); }
.requirements-item-icon { background: rgba(226, 205, 162, 0.14); color: var(--lux-champagne); }
.requirements-item-title { color: var(--lux-ivory); }
.requirements-item-body { color: var(--lux-ivory-faint); }
.requirements-item-cta { background: rgba(226, 205, 162, 0.16); color: var(--lux-champagne); }
.requirements-item-cta:hover { background: rgba(226, 205, 162, 0.26); }
/* Compact verification note — champagne-on-glass, matching every other
   small badge/pill in this file, deliberately not red/alarm-colored. */
.requirements-verified { background: rgba(226, 205, 162, 0.14); color: var(--lux-champagne-soft); }
.requirements-verified svg { color: var(--lux-champagne); }
.requirements-visitax {
  background: linear-gradient(135deg, rgba(185, 157, 134, 0.2) 0%, rgba(66, 49, 36, 0.5) 100%);
  border: 1px solid var(--lux-orchid-border);
}
.requirements-visitax-badge { background: rgba(226, 205, 162, 0.18); color: var(--lux-champagne); }
.requirements-visitax-icon { background: rgba(247, 240, 230, 0.1); color: var(--lux-champagne); }
.requirements-visitax-title { color: var(--lux-ivory); }
.requirements-visitax-body { color: var(--lux-ivory-soft); }
.requirements-visitax-cta { background: var(--lux-champagne-strong); color: var(--lux-deep); }
.requirements-visitax-cta:hover { background: var(--lux-champagne); }
.requirements-checklist { background: rgba(185, 157, 134, 0.14); }
.requirements-checklist-title { color: var(--lux-ivory); }
/* REGRESSION FIX (contrast): setting color here alone never reached the
   actual <li> text — styles.css's own .requirements-checklist-list li
   rule (element-qualified, so a more specific selector) was winning the
   cascade regardless of file load order, leaving "Before You Fly"'s text
   at its original dark espresso-brown against this now-dark translucent
   card. Matching that same selector's specificity here is what actually
   overrides it. The checkmark icon had no override at all (still
   styles.css's mid-tone plum), effectively invisible against this
   background — champagne fixes that too. Wording/logic/structure
   untouched — colors only. */
.requirements-checklist-list { color: var(--lux-ivory-soft); }
.requirements-checklist-list li { color: var(--lux-ivory-soft); }
.requirements-checklist-list svg { color: var(--lux-champagne); }
.requirements-official { background: rgba(66, 49, 36, 0.36); border: 1px solid var(--lux-glass-border); }
.requirements-official-icon { background: rgba(226, 205, 162, 0.14); color: var(--lux-champagne); }
.requirements-official-title { color: var(--lux-ivory); }
.requirements-official-body { color: var(--lux-ivory-faint); }
.requirements-official-cta { background: var(--lux-orchid); color: var(--lux-ivory); }
.requirements-official-cta:hover { background: #a68a74; }
.requirements-disclaimer { color: var(--lux-ivory-faint); }

/* ---------------------------------------------------------------------- */
/* The Stay — this section kept its OWN pre-existing opaque aubergine     */
/* gradient fill (from styles.css) through the first Negril Luxe pass —     */
/* every other section's full-bleed background was set to `none`, but    */
/* this one was mistakenly assumed to need no change since it was        */
/* "already dark." An opaque section fill blocks the site background     */
/* just as much regardless of its own color, so it's released here like  */
/* every other section; the "Featured Resort" card is inverted to glass  */
/* as before. Data/architecture untouched.                                */
/* ---------------------------------------------------------------------- */
.stay-feature { background: none; }
.stay-feature-header .eyebrow { color: var(--lux-champagne); }
.stay-feature-header .section-heading { color: var(--lux-ivory); }
.stay-feature-header .section-intro { color: var(--lux-ivory-soft); }
.stay-card { border-radius: var(--lux-radius); }
.stay-card-eyebrow { color: var(--lux-champagne); }
.stay-card-name { color: var(--lux-ivory); }
.stay-card-location { color: var(--lux-ivory-faint); }
.stay-time-label { color: var(--lux-champagne-soft); }
.stay-time-value { color: var(--lux-ivory); }
.stay-time-divider { background: var(--lux-glass-border); }
.stay-cta { background: var(--lux-orchid); color: var(--lux-ivory); }
a.stay-cta:hover { background: #a68a74; }
.stay-block-number { color: var(--lux-champagne); }
.stay-block-title { color: var(--lux-ivory); }
.stay-block-text { color: var(--lux-ivory-soft); }
.stay-highlight { color: var(--lux-ivory-soft); }
.stay-highlight-icon { background: rgba(226, 205, 162, 0.14); color: var(--lux-champagne); }
.stay-goodtoknow-list { color: var(--lux-ivory-soft); }

/* ---------------------------------------------------------------------- */
/* Itinerary — accordion mechanics, aria-expanded, inert, and Add to      */
/* Calendar are entirely untouched by this file (JS-driven, no selectors  */
/* here interfere). Default day-cards are inverted to glass; the birthday */
/* day (already its own aubergine treatment) gets a restrained orchid     */
/* glow rather than anything gaudy, per the brief.                       */
/* ---------------------------------------------------------------------- */
.itinerary { background: none; }
.itinerary-header .eyebrow { color: var(--lux-champagne); }
.itinerary-header .section-heading { color: var(--lux-ivory); }
.itinerary-header .section-intro { color: var(--lux-ivory-faint); }
.day-card { border-radius: var(--lux-radius); }
.day-tag { background: rgba(226, 205, 162, 0.16); color: var(--lux-champagne-strong); }
.day-date { color: var(--lux-ivory-faint); }
.day-title { color: var(--lux-ivory); }
.day-summary { color: var(--lux-ivory-soft); }
.day-chevron { color: var(--lux-champagne); }
.activity-title { color: var(--lux-ivory); }
.activity-subtitle { color: var(--lux-ivory-faint); }
.activity-time-preview { color: var(--lux-champagne-soft); }
.activity-chevron { color: var(--lux-champagne); }
.activity-field-icon { background: rgba(226, 205, 162, 0.14); color: var(--lux-champagne); }
.activity-field-label { color: var(--lux-champagne-soft); }
.activity-field-value { color: var(--lux-ivory-soft); }
.activity-item { border-top-color: var(--lux-glass-border); }
.activity-calendar-btn { color: var(--lux-champagne); }
.activity-calendar-btn:hover { background: rgba(226, 205, 162, 0.14); }
.activity-calendar-btn-sub { color: var(--lux-ivory-faint); }
.day-open-state {
  background-image: var(--lux-inner-glow), var(--lux-glass-fill-soft);
  color: var(--lux-ivory-faint);
}
.day-open-state .glyph { color: var(--lux-champagne); }
/* Main Event / celebration day — the ONE itinerary card that departs from
   the standard dark-plum glass every other day-card uses. Whichever day
   matches TRIP.celebration.date gets this class (see isCelebrationDay in
   app.js) — never hard-coded to a specific day, date, or celebration
   type, so the same rose-glass treatment applies automatically whether
   the designated Main Event is a birthday, a bachelorette main event, an
   anniversary dinner, a wedding celebration, or any other milestone a
   future trip designates. Sophisticated rose/orchid glass, not a bright-
   pink accent: the fill still deepens to plum at its base (same tonal
   logic as every other glass surface), just built from the rose end of
   the palette instead of the plum end, with a visibly stronger champagne
   border and a restrained outer glow so it reads as elevated rather than
   loud. */
.day-card.is-celebration {
  background-image: var(--lux-celebration-inner-glow), var(--lux-celebration-glass-fill);
  border: 1px solid var(--lux-celebration-border);
  /* Order: drop shadow (depth) → two-layer halo (lift off the page) →
     inset champagne hairline (the "inner border" — a second fine line of
     light just inside the outer one) → inset top-edge glow (a soft catch
     of light along the upper perimeter, not the whole frame). */
  box-shadow:
    var(--lux-shadow),
    var(--lux-celebration-glow),
    inset 0 0 0 1px var(--lux-celebration-border-inner),
    inset 0 42px 64px -46px rgba(255, 226, 204, 0.38);
}
/* Overrides the shared .day-card backdrop-filter (set in the grouped
   @supports block near the top of this file) with the celebration card's
   own lighter-blur/higher-saturation recipe. Same @supports gate, so
   browsers without backdrop-filter support just keep the base fill above
   — already readable on its own. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .day-card.is-celebration {
    backdrop-filter: var(--lux-celebration-blur);
    -webkit-backdrop-filter: var(--lux-celebration-blur);
  }
}
/* Optional Day badge enhancement (per brief) — a touch brighter than a
   regular day-tag's flat champagne-on-glass, via a thin champagne border
   rather than a size change, so it stays exactly as compact. */
.day-card.is-celebration .day-tag {
  background: rgba(226, 205, 162, 0.3);
  border: 1px solid rgba(226, 205, 162, 0.4);
  color: var(--lux-champagne-strong);
}
.day-card.is-celebration .day-date { color: var(--lux-ivory-soft); }
.day-card.is-celebration .day-title { color: var(--lux-ivory); }
.day-card.is-celebration .day-summary { color: var(--lux-ivory-soft); }
.day-card.is-celebration .day-chevron { color: var(--lux-champagne); }
.day-card.is-celebration .activity-item { border-top-color: rgba(226, 205, 162, 0.22); }
.day-card.is-celebration .activity-title { color: var(--lux-ivory); }
.day-card.is-celebration .activity-subtitle { color: var(--lux-ivory-soft); }
.day-card.is-celebration .activity-time-preview { color: var(--lux-champagne); }
.day-card.is-celebration .activity-chevron { color: var(--lux-champagne); }
.day-card.is-celebration .activity-field-icon { background: rgba(226, 205, 162, 0.2); color: var(--lux-champagne); }
.day-card.is-celebration .activity-field-label { color: var(--lux-champagne-soft); }
.day-card.is-celebration .activity-field-value { color: var(--lux-ivory-soft); }
.day-card.is-celebration .activity-field-value a { color: var(--lux-champagne); }
.day-card.is-celebration .activity-calendar-btn { color: var(--lux-champagne); }
.day-card.is-celebration .activity-calendar-btn:hover { background: rgba(226, 205, 162, 0.18); }
.day-card.is-celebration .activity-calendar-btn-sub { color: var(--lux-ivory-faint); }
.day-card.is-celebration .dresscode-block { color: var(--lux-ivory-soft); }
/* "✦ THE MAIN EVENT" — the one visual cue that immediately marks this
   card as different while it's still collapsed. Base tracking (0.18em,
   from styles.css) is kept as-is — already elegant/wide; strengthening
   here is a touch more size/weight, a soft glow, and a fine champagne
   rule trailing off the label (an editorial flourish, not a size jump)
   so it reads like a special-event designation rather than metadata. */
.celebration-badge {
  color: var(--lux-champagne);
  font-size: 12px;
  text-shadow: 0 0 16px rgba(226, 205, 162, 0.45);
}
/* Hidden below the site's existing 700px breakpoint: at narrow widths the
   label itself wraps to two lines (limited header width, shared with the
   chevron via justify-content: space-between), which leaves the fixed-
   width divider floating oddly between the wrapped lines rather than
   trailing the text. Full label + flourish only where there's room for
   both on one line. */
@media (min-width: 700px) {
  .celebration-badge::after {
    content: "";
    display: block;
    width: 34px;
    height: 1px;
    background: linear-gradient(90deg, var(--lux-champagne-strong) 0%, rgba(226, 205, 162, 0) 100%);
  }
}
.dresscode-block { color: var(--lux-ivory-soft); }

/* ---------------------------------------------------------------------- */
/* The Style Edit — editorial section, given slightly richer glass tones  */
/* per the brief's allowance. Data/functionality untouched.               */
/* ---------------------------------------------------------------------- */
.style-edit { background: none; }
.style-edit-header .eyebrow { color: var(--lux-champagne); }
.style-edit-header .section-heading { color: var(--lux-ivory); }
.style-edit-header .section-intro { color: var(--lux-ivory-faint); }
.style-card { border-radius: var(--lux-radius); }
.style-card--neutral,
.style-card--soft {
  background: var(--lux-glass-fill-soft);
}
.style-card--signature {
  background-image: var(--lux-inner-glow), linear-gradient(165deg, rgba(185, 157, 134, 0.28) 0%, rgba(25, 19, 14, 0.7) 100%);
  box-shadow: var(--lux-shadow), var(--lux-glow-orchid);
}
.style-card-number { color: var(--lux-champagne-soft); }
.style-card-date { color: var(--lux-champagne); }
.style-card-event { color: var(--lux-ivory-faint); }
.style-card-name { color: var(--lux-ivory); }
.style-card-mood { color: var(--lux-ivory-soft); }
.style-card-cta { color: var(--lux-champagne); }

/* ---------------------------------------------------------------------- */
/* The Packing Edit — brought onto the same plum-glass system used by the */
/* day cards / glance cards / style cards above (.packing-edit-card is    */
/* already in the shared glass-surface grouped selector near the top of   */
/* this file) rather than a separate visual system. Every rule below      */
/* overrides styles.css's .packing-edit-* styling for this one component  */
/* only — same pattern as every other Negril Luxe section in this file.     */
/* ---------------------------------------------------------------------- */
.packing-edit-card { border-radius: var(--lux-radius); }
.packing-edit-card.is-open,
.packing-edit-card:focus-within { border-color: var(--lux-glass-border-strong); }
.packing-edit-toggle-icon { background: rgba(226, 205, 162, 0.16); color: var(--lux-champagne); }
.packing-edit-toggle-eyebrow.eyebrow { color: var(--lux-champagne); }
.packing-edit-toggle-heading { color: var(--lux-ivory); }
.packing-edit-chevron { color: var(--lux-champagne-soft); }
.packing-edit-card.is-open .packing-edit-chevron { color: var(--lux-champagne); }
.packing-edit-toggle:focus-visible { outline-color: var(--lux-champagne); }
.packing-edit-instruction { color: var(--lux-ivory-faint); }
.packing-edit-empty .glyph { background: rgba(226, 205, 162, 0.16); color: var(--lux-champagne); }
.packing-edit-empty p { color: var(--lux-ivory-faint); }

.packing-progress { color: var(--lux-champagne-soft); }
.packing-item { border-bottom: 1px solid var(--lux-glass-border); }
/* Refined custom checkbox — thin champagne ring at rest, filled champagne
   with a dark check once ticked. No plain browser checkbox anywhere. */
.packing-item-box {
  border: 1.5px solid var(--lux-glass-border-strong);
  background: rgba(25, 19, 14, 0.3);
  color: transparent;
}
.packing-item-checkbox:checked + .packing-item-box {
  background: var(--lux-champagne);
  border-color: var(--lux-champagne);
  color: var(--lux-deep);
}
.packing-item-checkbox:focus-visible + .packing-item-box { outline-color: var(--lux-champagne); }
.packing-item-text { color: var(--lux-ivory); }
.packing-item-note { color: var(--lux-ivory-faint); }
/* Dimmed, not struck through — stays legible and editorial rather than
   reading like a task-manager "done" state. */
.packing-item.is-checked .packing-item-text {
  color: var(--lux-ivory-soft);
  text-decoration: none;
}
.packing-item.is-checked .packing-item-note { opacity: 0.7; }
.packing-item--highlight::before { background: var(--lux-champagne-soft); }
.packing-reset-btn { border-color: var(--lux-glass-border-strong); color: var(--lux-champagne); }
.packing-reset-btn:hover { background: rgba(226, 205, 162, 0.14); }
.packing-reset-btn:focus-visible { outline-color: var(--lux-champagne); }
.packing-edit-full-note { border-top: 1px dashed var(--lux-glass-border-strong); }
.packing-edit-full-note-question { color: var(--lux-ivory); }
.packing-edit-full-note-body { color: var(--lux-ivory-faint); }
.packing-edit-full-note-link { color: var(--lux-champagne); border-bottom-color: var(--lux-glass-border-strong); }
.packing-edit-full-note-link:hover { color: var(--lux-ivory); border-color: var(--lux-champagne); }

/* ---------------------------------------------------------------------- */
/* A Note From — brought onto the same warm ivory/champagne text language  */
/* used throughout Negril Luxe. The photo frame/placeholder, quote mark, and */
/* signature script keep the same structure/positioning from styles.css — */
/* only color changes here, consistent with every other section.          */
/* ---------------------------------------------------------------------- */
.welcome-note-header .eyebrow { color: var(--lux-champagne); }
.welcome-note-eyebrow-line { background: linear-gradient(90deg, transparent, var(--lux-glass-border-strong)); }
.welcome-note-eyebrow-line:last-child { background: linear-gradient(90deg, var(--lux-glass-border-strong), transparent); }
.welcome-note-crown-line { background: linear-gradient(90deg, transparent, rgba(226, 205, 162, 0.4)); }
.welcome-note-crown-row .welcome-note-crown-line:last-child { background: linear-gradient(90deg, rgba(226, 205, 162, 0.4), transparent); }
.welcome-note-crown-sparkle { color: var(--lux-champagne); }
.welcome-note-heading { color: var(--lux-ivory); }
.welcome-note-heading-accent { color: var(--lux-champagne); text-shadow: 0 0 16px rgba(226, 205, 162, 0.4); }
.welcome-note-accent-dot { background: var(--lux-champagne); }
.welcome-note-flourish-path { color: var(--lux-glass-border-strong); }
.welcome-note-flourish-sparkle { color: var(--lux-champagne); }
.welcome-note-photo-frame::before { background: rgba(226, 205, 162, 0.08); border-color: var(--lux-glass-border-strong); }
.welcome-note-photo { border-color: var(--lux-champagne); }
.welcome-note-photo-placeholder {
  border-color: var(--lux-champagne);
  background: var(--lux-glass-fill-soft);
  color: var(--lux-champagne-soft);
}
.welcome-note-caption { color: var(--lux-champagne); }
.welcome-note-quote-mark { color: var(--lux-champagne); }
.welcome-note-quote { color: var(--lux-ivory); }
.welcome-note-message p { color: var(--lux-ivory-soft); }
.welcome-note-closing { color: var(--lux-ivory-faint); }
.welcome-note-signature-names { color: var(--lux-champagne); }
.welcome-note-signature-roles { color: var(--lux-ivory-faint); }

/* ---------------------------------------------------------------------- */
/* The Travel Crew — Jania's featured frame/ornate treatment and the      */
/* supporting crew frames are left completely untouched (photo frames     */
/* were already dark aubergine and are explicitly preserved per the       */
/* brief); only the surrounding section background and the text labels   */
/* beneath each photo are updated so they read against the new           */
/* environment instead of the old ivory page.                            */
/* ---------------------------------------------------------------------- */
.crew { background: none; }
.crew-header .eyebrow { color: var(--lux-champagne); }
.crew-header .section-heading { color: var(--lux-ivory); }
.crew-header .section-intro { color: var(--lux-ivory-faint); }
.crew-featured-name { color: var(--lux-ivory); }
.crew-name { color: var(--lux-ivory); }
.crew-role { color: var(--lux-champagne-soft); }
.crew-closing { color: var(--lux-ivory-faint); }

/* ---------------------------------------------------------------------- */
/* Birthday Passport — timeline/lightbox interactions untouched.          */
/* ---------------------------------------------------------------------- */
.passport { background: none; }
.passport-header .eyebrow { color: var(--lux-champagne); }
.passport-header .section-heading { color: var(--lux-ivory); }
.passport-header .section-intro { color: var(--lux-ivory-faint); }
.passport-hint { color: var(--lux-champagne-soft); }
.timeline { background: none; }
.timeline-age { color: var(--lux-champagne); }
.timeline-year { color: var(--lux-ivory); }
.timeline-destination { color: var(--lux-ivory-soft); }
.timeline-node { background: var(--lux-champagne); box-shadow: 0 0 0 4px rgba(25, 19, 14, 0.6); }
.timeline-node.is-finale { background: var(--lux-orchid); }
.timeline-finale {
  box-shadow: var(--lux-shadow), var(--lux-glow-orchid);
}
.timeline-finale-eyebrow { color: var(--lux-champagne); }
.timeline-finale-year { color: var(--lux-ivory); }
.timeline-finale-meta { color: var(--lux-ivory-soft); }
.timeline-finale-note { color: var(--lux-ivory-faint); }
.passport-empty { background: var(--lux-glass-fill-soft); color: var(--lux-ivory-faint); }
.passport-empty .glyph { color: var(--lux-champagne); }

/* ---------------------------------------------------------------------- */
/* The Curated Gallery — the mosaic tiles/lightbox already read fine on    */
/* their own (photos, once supplied, will do the visual work), so this is */
/* only the text/placeholder recoloring every other Negril Luxe section     */
/* gets — no new visual system, per the brief.                            */
/* ---------------------------------------------------------------------- */
.curated-gallery { background: none; }
.gallery-supporting-line { color: var(--lux-ivory-soft); }
.gallery-instruction { color: var(--lux-champagne-soft); }
.gallery-item-overlay { background: linear-gradient(180deg, rgba(25, 19, 14, 0) 55%, rgba(25, 19, 14, 0.8) 100%); }
.gallery-item--pending {
  background: var(--lux-glass-fill-soft);
  border-color: var(--lux-glass-border-strong);
}
.gallery-item-pending-icon { color: var(--lux-champagne); }
.gallery-item-pending-label { color: var(--lux-ivory-faint); }
.gallery-lightbox-caption { color: var(--lux-champagne); }
.gallery-lightbox-close,
.gallery-lightbox-nav { border-color: var(--lux-glass-border-strong); color: var(--lux-champagne); }

/* ---------------------------------------------------------------------- */
/* Shared Trip Album / Trip Memories — external-link architecture         */
/* untouched; visual only.                                                */
/* ---------------------------------------------------------------------- */
.album { background: none; }
.album-card { border-radius: var(--lux-radius); }
.album-frame { background: rgba(226, 205, 162, 0.14); }
.album-glint { background: radial-gradient(circle, var(--lux-ivory) 0%, var(--lux-champagne) 60%, rgba(226, 205, 162, 0) 80%); }
.album-card .eyebrow { color: var(--lux-champagne); }
.album-card .section-heading { color: var(--lux-ivory); }
.album-description { color: var(--lux-ivory-soft); }
.album-cta { background: var(--lux-orchid); color: var(--lux-ivory); }
.album-cta:hover { background: #a68a74; }
.album-supporting-text { color: var(--lux-ivory-faint); }
.album-sheet { border-radius: var(--lux-radius); }
.album-handle { background: var(--lux-glass-border-strong); }
.album-close { background: rgba(226, 205, 162, 0.14); color: var(--lux-ivory); }
.album-close:hover { background: rgba(226, 205, 162, 0.24); }
.album-modal-icon { background: rgba(226, 205, 162, 0.14); color: var(--lux-champagne); }
.album-modal-title { color: var(--lux-ivory); }
.album-modal-body { color: var(--lux-ivory-soft); }
.album-modal-note { color: var(--lux-ivory-faint); }

/* ---------------------------------------------------------------------- */
/* JaX Travel Scavenger Hunt (Challenge) — restyles only the teaser/      */
/* doorway card on THIS page. The standalone Challenge application is a   */
/* separate deployed site and is not touched by this file.               */
/* ---------------------------------------------------------------------- */
.scavenger-hunt { background: none; }
.scavenger-hunt-card { border-radius: var(--lux-radius); }
.scavenger-hunt-icon { filter: drop-shadow(0 2px 8px rgba(226, 205, 162, 0.35)); }
.scavenger-hunt-card .eyebrow { color: var(--lux-champagne); }
.scavenger-hunt-title { color: var(--lux-ivory); }
.scavenger-hunt-copy { color: var(--lux-ivory-soft); }
.scavenger-hunt-cta { background: var(--lux-orchid); color: var(--lux-ivory); }
.scavenger-hunt-cta:hover { background: #a68a74; }

/* ---------------------------------------------------------------------- */
/* Travel Toolkit / Resources                                             */
/* ---------------------------------------------------------------------- */
.toolkit { background: none; }
.toolkit-header .eyebrow { color: var(--lux-champagne); }
.toolkit-header .section-heading { color: var(--lux-ivory); }
.toolkit-header .section-intro { color: var(--lux-ivory-faint); }
.toolkit-card { border-radius: var(--lux-radius); }
.toolkit-badge { background: rgba(226, 205, 162, 0.16); color: var(--lux-champagne-strong); }
.toolkit-icon { background: rgba(226, 205, 162, 0.14); color: var(--lux-champagne); }
.toolkit-title { color: var(--lux-ivory); }
.toolkit-description { color: var(--lux-ivory-faint); }
.toolkit-cta { color: var(--lux-champagne); }

/* ---------------------------------------------------------------------- */
/* Packages CTA — showroom-only closing note (see styles.css for the      */
/* structural/foundation rules and PAGE_IDENTITY.packagesCta in           */
/* content.js for what makes it appear at all). Same translucent glass    */
/* recipe as every other Negril Luxe card, with the champagne-filled pill   */
/* button treatment already used for this system's other primary/        */
/* featured actions (e.g. Destination Requirements' Negril Tourist Levy     */
/* CTA) — reused, not reinvented, since this is the itinerary's own       */
/* final call to action.                                                  */
/* ---------------------------------------------------------------------- */
.packages-cta { background: none; }
.packages-cta-card {
  background-image: var(--lux-inner-glow), var(--lux-glass-fill);
  background-color: transparent;
  border: 1px solid var(--lux-glass-border);
  box-shadow: var(--lux-shadow);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .packages-cta-card {
    backdrop-filter: var(--lux-blur);
    -webkit-backdrop-filter: var(--lux-blur);
  }
}
.packages-cta-card .eyebrow { color: var(--lux-champagne); }
.packages-cta-card .section-heading { color: var(--lux-ivory); }
.packages-cta-copy { color: var(--lux-ivory-soft); }
.packages-cta-button { background: var(--lux-champagne-strong); color: var(--lux-deep); }
.packages-cta-button:hover { background: var(--lux-champagne); }
.packages-cta-button:focus-visible { outline-color: var(--lux-champagne); }

/* ---------------------------------------------------------------------- */
/* Footer — was already dark aubergine; refined for consistency with the  */
/* rest of the system. Copyright year (JS-computed), links, and social    */
/* icons/hrefs are entirely untouched.                                    */
/* ---------------------------------------------------------------------- */
.site-footer {
  background: var(--lux-deep);
  border-top: 1px solid var(--lux-glass-border);
}
.footer-line { color: var(--lux-ivory-faint); }
.brand-link { color: var(--lux-champagne); }
.footer-social a { color: var(--lux-ivory-soft); }
.footer-social a:hover { color: var(--lux-champagne); }

/* ---------------------------------------------------------------------- */
/* Save to Phone / Share modals — functionality (focus trap, native       */
/* share, copy fallback, discovery tooltips, safe-area padding) is        */
/* entirely JS-driven and untouched; visual glass treatment only.         */
/* ---------------------------------------------------------------------- */
.stp-sheet,
.share-sheet { border-radius: var(--lux-radius); }
.stp-handle,
.share-handle { background: var(--lux-glass-border-strong); }
.stp-close,
.share-close { background: rgba(226, 205, 162, 0.14); color: var(--lux-ivory); }
.stp-close:hover,
.share-close:hover { background: rgba(226, 205, 162, 0.24); }
.stp-icon,
.share-icon { color: var(--lux-champagne); }
.stp-title,
.share-title { color: var(--lux-ivory); }
.stp-intro,
.share-intro { color: var(--lux-ivory-soft); }
.stp-tab { color: var(--lux-ivory-faint); }
.stp-tab.is-active,
.stp-tab[aria-selected="true"] { color: var(--lux-champagne); border-color: var(--lux-champagne); }
.stp-step-text { color: var(--lux-ivory-soft); }
.stp-step-icon { color: var(--lux-champagne); }
.share-copy-btn { background: rgba(226, 205, 162, 0.14); color: var(--lux-ivory); border: 1px solid var(--lux-glass-border); }
.share-copy-btn:hover { background: rgba(226, 205, 162, 0.22); }
.share-status { color: var(--lux-champagne); }

/* ---------------------------------------------------------------------- */
/* Loading / Entry Screen — the structural component (monogram, layout,   */
/* choreography, Enter control) lives in styles.css, migrated verbatim    */
/* from the approved Houston opening screen. This is the ONLY Negril-       */
/* specific touch: deepening the base toward this trip's own darkest      */
/* plum, and retinting the centered glow from neutral gold/plum to the    */
/* restrained orchid/rose warmth called for in the Negril brief — no photo, */
/* no background-negril.jpg, kept deliberately quiet and cinematic.         */
/* ---------------------------------------------------------------------- */
.splash {
  background:
    radial-gradient(120% 90% at 15% 8%, rgba(226, 205, 162, 0.16) 0%, rgba(226, 205, 162, 0) 55%),
    radial-gradient(130% 100% at 85% 100%, rgba(185, 157, 134, 0.32) 0%, rgba(50, 38, 28, 0) 60%),
    linear-gradient(160deg, var(--aubergine-900) 0%, #2a2018 45%, var(--lux-deep) 100%);
}
.splash-glow {
  background: radial-gradient(42% 36% at 50% 42%, rgba(185, 157, 134, 0.26) 0%, rgba(185, 157, 134, 0) 70%);
}

/* ==========================================================================
   NEGRIL ADDITIONS — status language, tentative activity, dinner guests.
   These are the only components that do not exist in the source template;
   they reuse its glass tokens so they read as part of the same system.
   ========================================================================== */

/* Status pills: confirmed / planned / tentative / pending. Understated —
   champagne and cocoa tones only, differentiated by fill vs. outline. */
.status-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin: 6px 0 2px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid var(--lux-glass-border-strong);
  color: var(--lux-champagne);
}
.status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.status-pill--confirmed {
  background: rgba(226, 205, 162, 0.2);
  color: var(--lux-ivory);
  border-color: rgba(226, 205, 162, 0.7);
}
.status-pill--planned { background: transparent; }
.status-pill--tentative { background: transparent; border-style: dashed; color: var(--lux-champagne-soft); }
.status-pill--pending { background: transparent; border-style: dotted; color: var(--lux-ivory-faint); }
.activity-header-text .status-pill { display: flex; width: max-content; }

/* Descriptive placeholder text, e.g. "[Pickup time pending]". */
.is-pending-note {
  font-style: italic;
  color: var(--lux-champagne-soft);
  overflow-wrap: anywhere;
}

/* Tentative activity (catamaran) */
.tentative { padding: 24px 0 8px; }
.tentative-card {
  border-radius: var(--lux-radius);
  padding: clamp(24px, 4vw, 40px);
  background-image: var(--lux-inner-glow), var(--lux-glass-fill-soft);
  background-color: transparent;
  border: 1px dashed var(--lux-glass-border-strong);
  box-shadow: var(--lux-shadow-soft);
  color: var(--lux-ivory-soft);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .tentative-card { backdrop-filter: var(--lux-blur); -webkit-backdrop-filter: var(--lux-blur); }
}
.tentative-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.tentative-top .status-pill { margin: 0; }
.tentative-title { margin: 4px 0 10px; }
.tentative-intro { max-width: 60ch; line-height: 1.65; color: var(--lux-ivory-soft); }
.tentative-desired { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--lux-glass-border); }
.tentative-desired-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lux-champagne);
}
.tentative-desired p { margin: 0; font-family: var(--font-display); font-size: 19px; line-height: 1.5; color: var(--lux-ivory); }
.tentative-desired p.tentative-desired-note { margin-top: 6px; font-family: var(--font-body); font-size: 13px; font-style: italic; color: var(--lux-ivory-faint); }
.tentative-details {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.tentative-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--lux-glass-border);
  background: rgba(20, 14, 9, 0.28);
}
.tentative-detail-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lux-champagne); }
.tentative-detail-value { font-size: 13.5px; line-height: 1.45; }

/* ---------------------------------------------------------------------- */
/* Unified crew: honoree pair (equal prominence) + balanced centered grid */
/* ---------------------------------------------------------------------- */
.crew-featured--group {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 28px 10px;
}
.crew-featured--group::before { width: 100%; max-width: 720px; height: 380px; }
.crew-featured--group .crew-featured-frame { width: 118px; max-width: none; }
.crew-featured--group { flex-wrap: wrap; justify-content: center; }
.crew-featured--group .crew-featured-card { min-width: 0; }
.crew-featured--group .crew-featured-name { font-size: 21px; }
.crew-featured--group .crew-featured-badge { padding: 5px 9px; gap: 4px; }
.crew-featured--group .crew-featured-badge-text { font-size: 9px; letter-spacing: 0.06em; white-space: nowrap; }
.crew-featured--group .crew-featured-crown { width: 42px; height: 42px; }
.crew-featured-crown { color: var(--lux-champagne); }
.crew-featured-frame-outer { box-shadow: 0 0 0 1px rgba(226, 205, 162, 0.7), 0 0 46px 6px rgba(226, 205, 162, 0.28), 0 18px 40px -16px rgba(8, 5, 3, 0.7); }
@media (min-width: 700px) {
  .crew-featured--group { gap: 36px 30px; flex-wrap: wrap; }
  .crew-featured--group .crew-featured-frame { width: 156px; }
  .crew-featured--group .crew-featured-name { font-size: 28px; }
  .crew-featured--group .crew-featured-badge { padding: 5px 11px; }
  .crew-featured--group .crew-featured-badge-text { font-size: 10px; letter-spacing: 0.08em; }
  .crew-featured--group .crew-featured-crown { width: 54px; height: 54px; }
}
/* Supporting crew: centered flex-wrap, three across, any count stays balanced */
.crew-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px 14px;
  max-width: 360px;
}
.crew-grid > .crew-card { width: calc((100% - 28px) / 3); }
@media (min-width: 700px) {
  .crew-grid { gap: 32px 32px; max-width: 700px; }
  .crew-grid > .crew-card { width: calc((100% - 64px) / 3); }
}

/* Featured frames hold a placeholder silhouette until photos arrive — center it. */
.crew-featured-frame { display: flex; align-items: center; justify-content: center; }
.crew-featured-frame .crew-placeholder { width: 40%; color: rgba(226, 205, 162, 0.6); }

.crew-featured-badge-text { color: var(--lux-champagne); }
.crew-featured-badge { border-color: rgba(226, 205, 162, 0.6); background: linear-gradient(135deg, rgba(226, 205, 162, 0.12), rgba(226, 205, 162, 0.22)); }
.crew-featured-badge-sparkle { color: var(--lux-champagne); }


/* Requirement status badges — compact inline icon + label, readable on the
   brown glass. Icons are explicitly sized (they inherit no size from the
   card), colors come from the champagne/cream tokens. */
.requirements-flag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  max-width: 100%;
  margin: 0;
  padding: 3px 11px 3px 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--lux-glass-border-strong);
  background: rgba(226, 205, 162, 0.14);
  color: var(--lux-ivory);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}
.requirements-flag svg { flex: none; width: 14px; height: 14px; color: var(--lux-champagne); }
.requirements-flag > span { min-width: 0; }
.requirements-flag--clear { background: rgba(226, 205, 162, 0.2); }
.requirements-flag--conditional { background: transparent; border-style: dashed; }
.requirements-flag--recommended { background: transparent; border-style: dotted; color: var(--lux-champagne); }
.requirements-item { gap: 10px; }
.requirements-item .requirements-item-cta { margin-top: 4px; margin-right: 8px; }

@media (min-width: 1000px) {
  .crew-featured--group { gap: 40px 56px; }
  .crew-featured--group .crew-featured-frame { width: 214px; }
  .crew-featured--group .crew-featured-name { font-size: 28px; }
  .crew-featured--group .crew-featured-badge { padding: 6px 16px; }
  .crew-featured--group .crew-featured-badge-text { font-size: 11.5px; letter-spacing: 0.14em; }
}

/* Journey: local-time note + airport transfers card */
.journey-time-note { margin: 10px 4px 0; font-size: 12.5px; font-style: italic; text-align: center; color: var(--lux-ivory-faint); }
.journey-transfers {
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--lux-glass-border);
  background: rgba(20, 14, 9, 0.26);
}
.journey-transfers-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.journey-transfers-top .status-pill { margin: 0; }
.journey-transfers-heading { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 20px; color: var(--lux-ivory); }
.journey-transfers-provider { margin: 10px 0 0; font-size: 14px; color: var(--lux-ivory); }
.journey-transfers-provider span { margin-right: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lux-champagne); }
.journey-transfers-summary, .journey-transfers-note { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--lux-ivory-soft); }
.journey-transfers-note { color: var(--lux-ivory-faint); }
.journey-transfers-pending { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.journey-transfer-pending { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--lux-glass-border); font-size: 13px; line-height: 1.45; }
.journey-transfer-pending-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lux-champagne); }

/* Memories timeline: heading + caption beside each photo */
.timeline-destination { color: var(--lux-ivory); font-size: clamp(22px, 3vw, 28px); line-height: 1.2; }
.timeline-caption { margin: 8px 0 0; max-width: 34ch; font-size: 15px; line-height: 1.6; color: var(--lux-ivory-soft); }
.timeline-finale-year { font-size: clamp(34px, 5vw, 48px); }

/* Stay card: tier, tap-to-call phone, policy note */
.stay-card-tier { align-self: flex-start; margin: 2px 0 4px; padding: 2px 10px; border-radius: var(--radius-full); border: 1px solid var(--lux-glass-border-strong); background: rgba(226, 205, 162, 0.14); font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lux-champagne); }
.stay-card-phone { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; padding: 8px 0; min-height: 40px; font-size: 14px; color: var(--lux-ivory); text-decoration: underline; text-decoration-color: rgba(226, 205, 162, 0.5); text-underline-offset: 3px; }
.stay-card-phone svg { flex: none; width: 16px; height: 16px; color: var(--lux-champagne); }
.stay-card-phone:hover { color: var(--lux-champagne); }
.stay-policy-note { margin: 10px 0 0; font-size: 12px; font-style: italic; color: var(--lux-ivory-faint); }

/* A Note From: the supplied portrait is a full square (portrait + logo +
   wording) — show all of it, uncropped, at its own proportions. */
.welcome-note-photo-frame { max-width: 480px; }
.welcome-note-photo { aspect-ratio: 1 / 1; height: auto; object-fit: contain; background: #fff; }
.welcome-note-message p { line-height: 1.75; }
.welcome-note-message p strong { color: var(--lux-ivory); font-weight: 700; }
.welcome-note-signature-names strong { font-weight: 700; }
.welcome-note-signature-roles { color: var(--lux-champagne-soft); }

/* Note: OPEN presentation (no outer card, border, shadow or blur) — the page
   background shows continuously. A soft, borderless vertical scrim that fades
   in and out keeps the text readable without any visible edge. */
.welcome-note {
  background: linear-gradient(180deg,
    rgba(22, 15, 10, 0) 0%,
    rgba(22, 15, 10, 0.5) 16%,
    rgba(22, 15, 10, 0.55) 50%,
    rgba(22, 15, 10, 0.5) 84%,
    rgba(22, 15, 10, 0) 100%);
}
.welcome-note-message p,
.welcome-note-quote { text-shadow: 0 1px 10px rgba(12, 8, 5, 0.55); }

/* ---------------------------------------------------------------------- */
/* Add to Calendar — clearly visible on the brown glass (desktop + mobile),
   including inside expanded cards and the celebration-day card. Active:
   champagne outline + text. Pending: dashed outline, readable cream text,
   plus a line saying exactly what is missing. */
/* ---------------------------------------------------------------------- */
.activity-calendar { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 16px; }
.tentative-calendar { margin-top: 22px; }
.activity-calendar-btn,
.day-card.is-celebration .activity-calendar-btn {
  color: var(--lux-champagne);
  border: 1px solid rgba(226, 205, 162, 0.7);
  background: rgba(226, 205, 162, 0.1);
  max-width: 100%;
}
.activity-calendar-btn:hover,
.day-card.is-celebration .activity-calendar-btn:hover { background: rgba(226, 205, 162, 0.2); }
.activity-calendar-btn svg { color: var(--lux-champagne); }
.activity-calendar-btn.is-pending,
.day-card.is-celebration .activity-calendar-btn.is-pending,
.activity-calendar-btn:disabled {
  color: var(--lux-ivory);
  border: 1px dashed rgba(226, 205, 162, 0.6);
  background: rgba(20, 14, 9, 0.25);
  opacity: 1;
  cursor: not-allowed;
}
.activity-calendar-btn.is-pending:hover,
.day-card.is-celebration .activity-calendar-btn.is-pending:hover { background: rgba(20, 14, 9, 0.25); }
.activity-calendar-btn-sub,
.day-card.is-celebration .activity-calendar-btn-sub { color: var(--lux-champagne); font-weight: 600; letter-spacing: 0.1em; }
.activity-calendar-why { margin: 0; font-size: 12.5px; line-height: 1.5; font-style: italic; color: var(--lux-ivory-soft); overflow-wrap: anywhere; }