/* ==========================================================================
   HOUSTON — LUXURY NIGHT OUT DESIGN SYSTEM
   Phase 1: At a Glance / Countdown + The Day Itinerary Cards ONLY.

   This file loads AFTER itinerary.css (the Puerto Rico structural
   reference, retuned to the Houston palette) and overrides only the
   classes used by these two sections. Every other section keeps its
   current Puerto Rico–derived styling untouched until it's redesigned in
   a later pass — nothing here is scoped broadly enough to reach them.

   Material language: smoked plum/aubergine glass floating directly over
   background.png (no opaque paper, no torn edges, no paperclips). Gold
   is used the way jewelry is worn — thin borders, tiny labels, restrained
   glow — never as a dominant fill. Typography reuses the Hero's own
   fonts (Playfair Display / Herr Von Muellerhoff / Poppins) so the
   itinerary reads as one continuous Houston voice with the Hero, without
   touching the Hero's own locked CSS.
   ========================================================================== */

:root {
  --luxe-glass-fill: linear-gradient(155deg, rgba(52, 26, 63, 0.55) 0%, rgba(23, 12, 34, 0.62) 100%);
  --luxe-glass-fill-soft: linear-gradient(155deg, rgba(52, 26, 63, 0.42) 0%, rgba(23, 12, 34, 0.5) 100%);
  --luxe-inner-glow: radial-gradient(120% 140% at 50% -12%, rgba(233, 205, 154, 0.14) 0%, rgba(233, 205, 154, 0) 46%);
  --luxe-glass-border: rgba(233, 205, 154, 0.3);
  --luxe-glass-border-strong: rgba(233, 205, 154, 0.55);
  --luxe-blush-border: rgba(231, 155, 192, 0.38);
  --luxe-shadow: 0 26px 60px -26px rgba(8, 4, 12, 0.75), 0 2px 12px -3px rgba(8, 4, 12, 0.45);

  --luxe-ivory: #f6efe4;
  --luxe-ivory-soft: rgba(246, 239, 228, 0.72);
  --luxe-ivory-faint: rgba(246, 239, 228, 0.5);
  --luxe-blush: #e79bc0;
  --luxe-champagne: #e9cd9a;
  --luxe-champagne-soft: rgba(233, 205, 154, 0.78);

  --font-luxe-serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-luxe-script: "Herr Von Muellerhoff", cursive;
  --font-luxe-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ==========================================================================
   COUNTDOWN — its own streamlined moment, a horizontal glass band (not a
   big card), acting as the transition from the Hero into the itinerary.
   ========================================================================== */

.countdown {
  padding: 52px 0 40px;
  background: none;
}
/* Remove the PR dotted-paper texture wash entirely — background.png is the
   texture now. */
.countdown::before { content: none; }

.countdown-band {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  padding: 24px 28px;
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background-image: var(--luxe-inner-glow), linear-gradient(155deg, rgba(52, 26, 63, 0.4) 0%, rgba(23, 12, 34, 0.46) 100%);
  border: 1px solid var(--luxe-glass-border);
  box-shadow: var(--luxe-shadow);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
/* Wide screens: a true horizontal band/pill — eyebrow at left, a hairline
   divider, numbers at right — rather than a tall stacked card. */
@media (min-width: 680px) {
  .countdown-band {
    max-width: 780px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 20px 44px;
    border-radius: 999px;
  }
  .countdown-eyebrow {
    position: relative;
    padding-right: 30px;
    margin-right: 0;
  }
  .countdown-eyebrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 34px;
    background: linear-gradient(180deg, transparent, var(--luxe-glass-border-strong), transparent);
  }
}

.countdown-eyebrow {
  font-family: var(--font-luxe-sans);
  font-weight: 600;
  font-size: clamp(11px, 2.2vw, 13px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--luxe-champagne);
  text-align: center;
}

.countdown-values { gap: 12px; }
@media (min-width: 480px) { .countdown-values { gap: 16px; } }

.countdown-number {
  min-width: 54px;
  padding: 12px 6px 10px;
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(74, 35, 80, 0.5) 0%, rgba(23, 12, 34, 0.62) 100%);
  border: 1px solid var(--luxe-glass-border-strong);
  font-family: var(--font-luxe-serif);
  font-weight: 600;
  font-size: clamp(22px, 4.8vw, 32px);
  color: var(--luxe-ivory);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 20px -12px rgba(8, 4, 12, 0.8);
}
.countdown-label {
  font-family: var(--font-luxe-sans);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--luxe-champagne-soft);
}

.countdown-complete {
  font-family: var(--font-luxe-script);
  color: var(--luxe-blush);
}

/* ==========================================================================
   AT A GLANCE — its own section: an editorial heading, then four matching
   glass tiles, with background.png breathing between the two moments.
   ========================================================================== */

.glance { position: relative; padding: 40px 0 76px; }

.glance-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  margin-bottom: 40px;
}
.glance-eyebrow {
  font-family: var(--font-luxe-sans);
  font-weight: 600;
  font-size: clamp(11px, 2.2vw, 13px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--luxe-champagne);
}
.glance-title-main {
  margin: 0;
  font-family: var(--font-luxe-serif);
  font-weight: 700;
  letter-spacing: 0.01em;
  font-size: clamp(34px, 6.4vw, 52px);
  line-height: 1;
  color: var(--luxe-ivory);
  text-shadow: 0 2px 24px rgba(4, 2, 6, 0.45);
}
.glance-title-script {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-luxe-script);
  font-weight: 400;
  font-size: clamp(20px, 4vw, 28px);
  color: var(--luxe-blush);
}
.glance-title-script::before,
.glance-title-script::after {
  content: "";
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--luxe-champagne-soft), transparent);
}
.glance-title-script::before { background: linear-gradient(270deg, transparent, var(--luxe-champagne-soft), transparent); }

.glance-grid { gap: 16px; }
@media (min-width: 700px) { .glance-grid { gap: 18px; } }

.glance-card {
  background-image: var(--luxe-inner-glow), var(--luxe-glass-fill-soft);
  border: 1px solid var(--luxe-glass-border);
  border-radius: 20px;
  padding: 28px 16px 22px;
  box-shadow: var(--luxe-shadow);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  transform: none;
  transition: transform 0.35s var(--ease-editorial), border-color 0.35s ease, box-shadow 0.35s var(--ease-editorial);
}
.glance-card:hover,
.glance-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--luxe-glass-border-strong);
  box-shadow: var(--luxe-shadow), 0 0 0 1px rgba(233, 205, 154, 0.12);
}
/* Retire the PR paperclip + leaf watermark — no scrapbook motifs. */
.glance-card .luxe-paperclip,
.glance-card .stamp { display: none; }

.glance-card .icon { width: 22px; height: 22px; color: var(--luxe-champagne); }
.glance-card .label {
  font-family: var(--font-luxe-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--luxe-champagne-soft);
}
.glance-card .divider { width: 26px; height: 11px; color: var(--luxe-blush); opacity: 0.85; }
.glance-card .value {
  font-family: var(--font-luxe-serif);
  font-weight: 600;
  font-size: 17px;
  color: var(--luxe-ivory);
  line-height: 1.32;
}

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

/* ==========================================================================
   DAY ITINERARY CARDS — "Luxury Night Out" evening agenda
   ========================================================================== */

.day-list { gap: 28px; }

.day-card {
  clip-path: none;
  border-radius: 26px;
  background-image: var(--luxe-inner-glow), var(--luxe-glass-fill);
  border: 1px solid var(--luxe-glass-border);
  box-shadow: var(--luxe-shadow);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  transition: border-color 0.35s ease;
}
.day-card:focus-within { border-color: var(--luxe-glass-border-strong); }
/* Retire the PR paperclip. */
.day-card .luxe-paperclip { display: none; }

/* Restrained per-card variation (2nd/3rd of every 3) — same system, subtle
   accent shift, never a new hue. */
.day-card:nth-of-type(3n+2) { border-color: var(--luxe-blush-border); }
.day-card:nth-of-type(3n+3) { border-color: var(--luxe-glass-border-strong); }

.day-accordion-header:focus-visible { outline-color: var(--luxe-champagne); outline-offset: -3px; }

.day-weekday {
  font-family: var(--font-luxe-serif);
  font-weight: 700;
  font-size: clamp(32px, 6vw, 46px);
  line-height: 1.02;
  color: var(--luxe-ivory);
}
.day-date {
  font-family: var(--font-luxe-sans);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--luxe-champagne);
}
.day-summary {
  font-family: var(--font-luxe-sans);
  color: var(--luxe-ivory-soft);
  opacity: 1;
}

/* Category pill — glass outline, not a solid fill, so gold/blush still
   reads as a detail rather than a block of color. */
.day-highlight-badge {
  background: rgba(23, 12, 34, 0.38);
  border: 1px solid var(--luxe-glass-border);
  color: var(--luxe-champagne);
  font-family: var(--font-luxe-sans);
  box-shadow: none;
}
.day-highlight-badge svg { color: var(--luxe-champagne); }
.day-card:nth-of-type(3n+2) .day-highlight-badge {
  background: rgba(74, 35, 80, 0.32);
  border-color: var(--luxe-blush-border);
  color: var(--luxe-blush);
}
.day-card:nth-of-type(3n+3) .day-highlight-badge {
  background: rgba(23, 12, 34, 0.38);
  border-color: var(--luxe-glass-border-strong);
  color: var(--luxe-champagne);
}

.day-preview-time { color: var(--luxe-blush); }
.day-preview-title { color: var(--luxe-ivory-soft); }

/* The expand control — smoked plum glass circle, champagne hairline. */
.day-toggle {
  background: linear-gradient(160deg, rgba(52, 26, 63, 0.9) 0%, rgba(23, 12, 34, 0.95) 100%);
  border: 1.5px solid var(--luxe-champagne);
  box-shadow: 0 10px 22px -12px rgba(8, 4, 12, 0.8);
  transition: transform 0.4s var(--ease-editorial), box-shadow 0.3s ease;
}
.day-toggle-bar { background: var(--luxe-champagne); }
.day-accordion-header:hover .day-toggle,
.day-accordion-header:focus-visible .day-toggle {
  box-shadow: 0 0 0 5px rgba(233, 205, 154, 0.12), 0 10px 22px -12px rgba(8, 4, 12, 0.8);
}

.day-panel {
  border-top: 1px solid rgba(233, 205, 154, 0.14);
  margin: 0 22px;
  padding-left: 0;
  padding-right: 0;
  width: auto;
}
@media (min-width: 700px) { .day-panel { margin: 0 42px; } }

/* -- Activity list inside an open day -------------------------------- */
.activity-list::before { border-left-color: var(--luxe-champagne-soft); opacity: 0.35; }
.activity-item { border-top-color: rgba(233, 205, 154, 0.14); }
.activity-item::before {
  background: var(--luxe-blush);
  border-color: rgba(23, 12, 34, 0.85);
  box-shadow: 0 0 0 1.5px var(--luxe-champagne-soft);
}

.activity-title,
.activity-item.is-static .activity-title {
  font-family: var(--font-luxe-serif);
  color: var(--luxe-ivory);
}
.activity-subtitle { color: var(--luxe-ivory-soft); }
.activity-time-preview { background: rgba(74, 35, 80, 0.55); color: var(--luxe-ivory); }

.activity-field-icon { background: rgba(233, 205, 154, 0.12); color: var(--luxe-champagne); }
.activity-field-label { font-family: var(--font-luxe-sans); color: var(--luxe-champagne-soft); }
.activity-field-value { color: var(--luxe-ivory); }
.activity-field-note { color: var(--luxe-ivory-faint); }

.activity-calendar-btn {
  border: 1.5px dashed rgba(233, 205, 154, 0.5);
  background: rgba(23, 12, 34, 0.35);
  color: var(--luxe-champagne);
  box-shadow: none;
}
.activity-calendar-btn:hover { border-color: var(--luxe-champagne); background: rgba(52, 26, 63, 0.5); }
.activity-calendar-btn:focus-visible { outline-color: var(--luxe-champagne); }
.activity-calendar-btn svg { color: var(--luxe-champagne); }
.activity-calendar-btn.is-pending {
  color: var(--luxe-ivory-faint);
  border-color: rgba(233, 205, 154, 0.22);
}
.activity-calendar-btn-sub { color: var(--luxe-ivory-faint); }

.day-open-state .glyph { color: var(--luxe-champagne); }
.day-open-state .msg { font-family: var(--font-luxe-serif); font-style: italic; color: var(--luxe-ivory); }

@media (prefers-reduced-motion: reduce) {
  .day-card,
  .day-toggle,
  .activity-calendar-btn { transition: none; }
  .day-accordion-header:hover .day-toggle,
  .day-accordion-header:focus-visible .day-toggle { box-shadow: 0 10px 22px -12px rgba(8, 4, 12, 0.8); }
}

/* ==========================================================================
   HOME BASE — a feature composition (large glass card, two columns on
   desktop): hotel identity/details on the left, description + highlights
   on the right. Its own "room" in the same venue — more substantial than
   the At a Glance tiles, without becoming another purple rectangle.
   ========================================================================== */

.stay-feature { padding: 28px 0 88px; }
.stay-feature::before { content: none; }

.stay-feature-header { margin-bottom: 44px; }
.stay-feature-header .eyebrow {
  font-family: var(--font-luxe-sans);
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--luxe-champagne);
}
.stay-feature-header .section-heading {
  font-family: var(--font-luxe-serif);
  font-weight: 700;
  font-size: clamp(32px, 5.6vw, 48px);
  color: var(--luxe-ivory);
  text-shadow: 0 2px 22px rgba(4, 2, 6, 0.4);
}
.stay-feature-header .section-intro {
  font-family: var(--font-luxe-sans);
  color: var(--luxe-ivory-soft);
}

.stay-feature-grid {
  clip-path: none;
  transform: none;
  border-radius: 28px;
  background-image: var(--luxe-inner-glow), var(--luxe-glass-fill);
  border: 1px solid var(--luxe-glass-border);
  box-shadow: var(--luxe-shadow);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.stay-feature-image { border-bottom: 1px solid var(--luxe-glass-border-strong); }
.stay-feature-body .luxe-paperclip { display: none; }

.stay-card-eyebrow { font-family: var(--font-luxe-sans); color: var(--luxe-champagne); }
.stay-card-name { font-family: var(--font-luxe-serif); color: var(--luxe-ivory); }
.stay-card-type { color: var(--luxe-champagne); }
.stay-card-location { color: var(--luxe-ivory-soft); }
.stay-card-location svg { color: var(--luxe-champagne); }
a.stay-card-location:hover { color: var(--luxe-blush); }

.stay-card-address,
.stay-card-times { border-top-color: rgba(233, 205, 154, 0.16); }
.stay-card-address-label { color: var(--luxe-champagne-soft); }
.stay-card-address address { color: var(--luxe-ivory-soft); }
.stay-time-label { color: var(--luxe-blush); }
.stay-time-value { font-family: var(--font-luxe-serif); color: var(--luxe-ivory); }
.stay-time-value .is-tbd { color: var(--luxe-ivory-faint); }
.stay-time-note {
  display: block;
  font-family: var(--font-luxe-sans);
  font-size: 11px;
  font-style: italic;
  color: var(--luxe-ivory-faint);
  margin-top: 2px;
}
/* No CTA for a private home (ctaLabel unset) — collapse cleanly rather
   than leaving an empty spaced row. */
.stay-cta-row:empty { display: none; margin-top: 0; }
.stay-time-divider { background: rgba(233, 205, 154, 0.16); }

/* Transparent glass control, thin champagne hairline — never a chunky
   filled button. */
.stay-cta.luxe-btn {
  font-family: var(--font-luxe-sans);
  background: rgba(23, 12, 34, 0.35);
  border: 1px solid var(--luxe-glass-border-strong);
  color: var(--luxe-champagne);
  box-shadow: none;
}
.stay-cta.luxe-btn:hover,
.stay-cta.luxe-btn:focus-visible {
  color: var(--luxe-ivory);
  border-color: var(--luxe-champagne);
  box-shadow: 0 0 0 4px rgba(233, 205, 154, 0.1);
}
.stay-cta.is-pending {
  background: none;
  border: 1px dashed rgba(233, 205, 154, 0.4);
  color: var(--luxe-ivory-faint);
}
.stay-cta.is-pending:hover,
.stay-cta.is-pending:focus-visible { box-shadow: none; color: var(--luxe-ivory-faint); }

.stay-directions { color: var(--luxe-champagne-soft); border-bottom-color: rgba(233, 205, 154, 0.3); }
.stay-directions svg { color: var(--luxe-champagne); }
.stay-directions:hover { color: var(--luxe-blush); border-color: var(--luxe-blush); }

.stay-info { border-left-color: rgba(233, 205, 154, 0.14) !important; }
/* Playfair italic, not script — at this small a size, script reads as
   faint/illegible rather than "special" (script is reserved for the one
   larger moment in each section, e.g. the glance/countdown accents). */
.stay-block-title {
  font-family: var(--font-luxe-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  color: var(--luxe-blush);
}
.stay-block-text { font-family: var(--font-luxe-sans); color: var(--luxe-ivory-soft); }

.stay-highlight {
  background: rgba(233, 205, 154, 0.08);
  border-color: var(--luxe-glass-border);
  color: var(--luxe-ivory);
  font-family: var(--font-luxe-sans);
}
.stay-highlight-icon { color: var(--luxe-champagne); }

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

/* ==========================================================================
   WEATHER — an airier, lighter-touch composition: the heading sits
   directly on background.png (no card), and the single glass tile below
   is the one polished feature — a different "room" from Home Base's
   two-column feature card.
   ========================================================================== */

.weather { padding: 20px 0 88px; }

.weather-header {
  clip-path: none;
  transform: none;
  background: none;
  box-shadow: none;
  padding: 0;
  max-width: 540px;
}
.weather-header .eyebrow { font-family: var(--font-luxe-sans); font-weight: 600; letter-spacing: 0.22em; color: var(--luxe-champagne); }
.weather-header .section-heading {
  font-family: var(--font-luxe-serif);
  font-weight: 700;
  font-size: clamp(28px, 5vw, 40px);
  color: var(--luxe-ivory);
  text-shadow: 0 2px 20px rgba(4, 2, 6, 0.4);
}
.weather-message { font-family: var(--font-luxe-sans); color: var(--luxe-ivory-soft); }
.weather-submessage { font-family: var(--font-luxe-sans); color: var(--luxe-ivory-faint); }
.weather-loading-text { font-family: var(--font-luxe-sans); color: var(--luxe-ivory-faint); }

.weather-single-tile {
  margin: 30px auto 0;
  max-width: 300px;
  padding: 38px 28px 34px;
  border-radius: 24px;
  background-image: var(--luxe-inner-glow), var(--luxe-glass-fill-soft);
  border: 1px solid var(--luxe-glass-border);
  box-shadow: var(--luxe-shadow), 0 0 46px -14px rgba(231, 155, 192, 0.22);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
.weather-single-tile-icon { color: var(--luxe-champagne); opacity: 1; }
.weather-single-tile-label { font-family: var(--font-luxe-serif); font-style: italic; color: var(--luxe-ivory); }

/* The day-by-day grid, "now" card, and post-trip states are dormant while
   singleTileMode is on, but are restyled here too so they inherit the same
   language automatically the moment the trip enters its real forecast
   window — no further CSS changes will be needed then. */
.weather-day-card {
  clip-path: none;
  transform: none;
  border-radius: 22px;
  background-image: var(--luxe-inner-glow), var(--luxe-glass-fill-soft);
  border: 1px solid var(--luxe-glass-border);
  box-shadow: var(--luxe-shadow);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
.weather-day-weekday { font-family: var(--font-luxe-serif); color: var(--luxe-ivory); }
.weather-day-date { color: var(--luxe-blush); }
.weather-day-body { border-top-color: rgba(233, 205, 154, 0.16); }
.weather-day-pending-icon,
.weather-day-icon { color: var(--luxe-champagne); }
.weather-day-pending-label { color: var(--luxe-ivory-soft); }
.weather-day-temps { font-family: var(--font-luxe-serif); color: var(--luxe-ivory); }
.weather-day-low { color: var(--luxe-champagne-soft); }
.weather-day-condition { color: var(--luxe-ivory-soft); }
.weather-day-rain { color: var(--luxe-champagne-soft); }
.weather-day-note { border-top-color: rgba(233, 205, 154, 0.16); color: var(--luxe-ivory-faint); }

.weather-now-icon { color: var(--luxe-champagne); }
.weather-now-temp { font-family: var(--font-luxe-serif); color: var(--luxe-ivory); }
.weather-now-condition { color: var(--luxe-champagne-soft); }
.weather-now-range { color: var(--luxe-ivory-faint); }

.weather-connect {
  clip-path: none;
  transform: none;
  border-radius: 20px;
  background-image: var(--luxe-inner-glow), var(--luxe-glass-fill-soft);
  border: 1px solid var(--luxe-glass-border);
  box-shadow: var(--luxe-shadow);
}
.weather-connect-label { color: var(--luxe-blush); }
.weather-connect-style-name { font-family: var(--font-luxe-serif); color: var(--luxe-ivory); }
.weather-plans-list li { color: var(--luxe-ivory-soft); font-family: var(--font-luxe-sans); }
.weather-plans-time { color: var(--luxe-champagne); }
.weather-connect-link { color: var(--luxe-champagne); }

.weather-post-message { font-family: var(--font-luxe-script); color: var(--luxe-blush); }

/* ==========================================================================
   STYLE EDIT — confirmed look cards, one per event. renderStyleCard()
   (itinerary-app.js) has existed since the structural build, but
   STYLE_EDIT.looks was always empty until now, so this component was never
   actually styled — this is genuinely new CSS for it (same glass-card
   language as the day cards/glance cards above), not a restyle.
   ========================================================================== */

@media (min-width: 700px) {
  .style-edit-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
}

.style-card {
  position: relative;
  border-radius: 24px;
  background-image: var(--luxe-inner-glow), var(--luxe-glass-fill);
  border: 1px solid var(--luxe-glass-border);
  box-shadow: var(--luxe-shadow);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  padding: 30px 26px 28px;
  overflow: hidden;
  transition: border-color 0.35s ease, transform 0.35s var(--ease-editorial);
}
.style-card:hover,
.style-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--luxe-glass-border-strong);
}
@media (prefers-reduced-motion: reduce) {
  .style-card:hover,
  .style-card:focus-within { transform: none; }
}

/* Two restrained per-event accents — the same brown already used for the
   dress-code highlight field, and the palette's existing blush for red,
   rather than introducing a brand-new hue into the system. */
.style-card--brown { border-color: rgba(168, 106, 60, 0.4); }
.style-card--brown:hover,
.style-card--brown:focus-within { border-color: rgba(168, 106, 60, 0.65); }
.style-card--red { border-color: var(--luxe-blush-border); }
.style-card--red:hover,
.style-card--red:focus-within { border-color: var(--luxe-blush); }

.style-card-number {
  position: absolute;
  top: 22px;
  right: 26px;
  font-family: var(--font-luxe-serif);
  font-size: 13px;
  color: var(--luxe-champagne-soft);
  opacity: 0.7;
}

.style-card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  margin-bottom: 20px;
}

.style-card-meta {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.style-card-date {
  font-family: var(--font-luxe-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--luxe-champagne);
}
.style-card-event {
  font-family: var(--font-luxe-sans);
  font-size: 13px;
  color: var(--luxe-ivory-faint);
}
.style-card-event::before {
  content: "•";
  margin: 0 10px;
  color: var(--luxe-champagne-soft);
}

.style-card-name {
  font-family: var(--font-luxe-serif);
  font-weight: 700;
  font-size: clamp(22px, 4vw, 28px);
  color: var(--luxe-ivory);
  margin: 0 0 10px;
}

.style-card-mood {
  font-family: var(--font-luxe-sans);
  color: var(--luxe-ivory-soft);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 18px;
}

.style-card-swatches {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.style-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(246, 239, 228, 0.35);
  box-shadow: 0 2px 6px rgba(8, 4, 12, 0.4);
}

.style-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-luxe-sans);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--luxe-champagne);
  text-decoration: none;
  transition: color 0.25s ease, gap 0.25s ease;
}
/* The un-sized icon is exactly the bug this section fixes — without this,
   ICONS.arrowRight (a raw, unstyled <svg>) renders at its intrinsic size,
   which is the whole page. */
.style-card-cta svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.style-card-cta:hover,
.style-card-cta:focus-visible {
  color: var(--luxe-ivory);
  gap: 12px;
}

/* ==========================================================================
   THE PACKING EDIT — brought onto the same plum-glass system used by the
   day cards / glance cards / style cards above (--luxe-glass-fill,
   --luxe-inner-glow, --luxe-glass-border, --luxe-shadow, the same
   backdrop-filter blur+saturate) rather than the inherited pale ivory
   PR-reference card. Every rule below overrides itinerary.css's
   .packing-edit-* styling for this one component only.
   ========================================================================== */

.packing-edit-card {
  background-color: transparent;
  background-image: var(--luxe-inner-glow), var(--luxe-glass-fill);
  border: 1px solid var(--luxe-glass-border);
  border-radius: 26px;
  box-shadow: var(--luxe-shadow);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  transition: border-color 0.35s ease;
}
.packing-edit-card.is-open,
.packing-edit-card:focus-within { border-color: var(--luxe-glass-border-strong); }

.packing-edit-toggle-icon {
  background: rgba(233, 205, 154, 0.14);
  color: var(--luxe-champagne);
}
.packing-edit-toggle-eyebrow.eyebrow { color: var(--luxe-champagne); }
.packing-edit-toggle-heading { font-family: var(--font-luxe-serif); color: var(--luxe-ivory); }
.packing-edit-chevron { color: var(--luxe-champagne-soft); }
.packing-edit-card.is-open .packing-edit-chevron { color: var(--luxe-champagne); }
.packing-edit-toggle:focus-visible { outline-color: var(--luxe-champagne); }

.packing-edit-instruction { font-family: var(--font-luxe-sans); color: var(--luxe-ivory-soft); }

.packing-progress {
  font-family: var(--font-luxe-sans);
  color: var(--luxe-champagne-soft);
}

/* Compact two-column checklist once there's room for it — eight short
   items never needs to run tall on desktop. */
@media (min-width: 640px) {
  .packing-checklist-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
  }
}

.packing-item { border-bottom: 1px solid rgba(233, 205, 154, 0.16); }
.packing-item-label { padding: 12px 4px; }

/* 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(--luxe-glass-border-strong);
  border-radius: 7px;
  background: rgba(23, 12, 34, 0.25);
  color: transparent;
}
.packing-item-checkbox:checked + .packing-item-box {
  background: var(--luxe-champagne);
  border-color: var(--luxe-champagne);
  color: #170c22;
}
.packing-item-checkbox:focus-visible + .packing-item-box { outline-color: var(--luxe-champagne); }

.packing-item-text-group { display: flex; flex-direction: column; gap: 2px; }
.packing-item-text { font-family: var(--font-luxe-sans); color: var(--luxe-ivory); }
.packing-item-note {
  font-family: var(--font-luxe-sans);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--luxe-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(--luxe-ivory-soft);
  text-decoration: none;
}
.packing-item.is-checked .packing-item-note { opacity: 0.7; }

/* The two event-tied items — a quiet champagne wash and left accent bar,
   not a second card. */
.packing-item--highlight { position: relative; padding-left: 10px; }
.packing-item--highlight::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--luxe-champagne-soft);
}
.packing-item--highlight .packing-item-text { font-weight: 600; }

.packing-reset-btn {
  border-color: var(--luxe-glass-border-strong);
  color: var(--luxe-champagne);
  font-family: var(--font-luxe-sans);
}
.packing-reset-btn:hover { background: rgba(233, 205, 154, 0.12); }
.packing-reset-btn:focus-visible { outline-color: var(--luxe-champagne); }

/* Bottom "full checklist" CTA — a quiet divider inside the same card
   rather than a separate pale sub-box. */
.packing-edit-full-note { border-top: 1px solid rgba(233, 205, 154, 0.22); }
.packing-edit-full-note-question { font-family: var(--font-luxe-serif); color: var(--luxe-ivory); }
.packing-edit-full-note-body { font-family: var(--font-luxe-sans); color: var(--luxe-ivory-soft); }
.packing-edit-full-note-link {
  font-family: var(--font-luxe-sans);
  color: var(--luxe-champagne);
  border-bottom-color: var(--luxe-glass-border-strong);
}
.packing-edit-full-note-link:hover { color: var(--luxe-ivory); border-color: var(--luxe-champagne); }

/* ==========================================================================
   MEET THE CREW — "Mary + 7 Guests · 8 Women Total" was inheriting the
   shared .luxe-script/.luxe-script--secondary handwritten treatment (the
   same classes .story-script also uses) — too casual for this refined
   editorial system. Overridden here, scoped to .crew-subtitle only, so
   .story-script and any other .luxe-script use elsewhere is untouched.
   Swaps it for the same luxe serif used throughout the rest of this
   itinerary, in a champagne italic — smaller and quieter than "Meet the
   Crew" above it, clearly a secondary line in the hierarchy.
   ========================================================================== */
.crew-subtitle {
  font-family: var(--font-luxe-serif);
  font-style: italic;
  color: var(--luxe-champagne);
  text-shadow: none;
}
/* Same collapse pattern as .story-script:empty below — sectionSubtitle is
   now "" (line removed per request), so this closes the gap the empty
   element would otherwise still take in .crew-header's flex gap. */
.crew-subtitle:empty { display: none; }

/* ==========================================================================
   SECTION-INTRODUCTION EYEBROWS — "The Weekend Edit" (Itinerary) and
   "The Celebration" (the future Mary photo moment). Small, targeted
   refinement: replaces the inherited dark torn-paper tag with a quiet
   editorial marker in the Houston language — related to each other, not
   identical, matching each section's own alignment.
   ========================================================================== */

/* -- The Full Itinerary — left-aligned, a single trailing hairline -- */
.itinerary-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-luxe-sans);
  font-weight: 600;
  font-size: clamp(11px, 2.2vw, 13px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--luxe-champagne);
  margin-bottom: 12px;
}
.itinerary-eyebrow::after {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--luxe-champagne-soft), transparent);
}

/* -- Celebrating Mary — centered, flanked by hairlines, a touch of blush -- */
.story-header { max-width: 560px; }
.story-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-luxe-sans);
  font-weight: 600;
  font-size: clamp(11px, 2.2vw, 13px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--luxe-champagne);
}
.story-eyebrow::before,
.story-eyebrow::after {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--luxe-champagne-soft);
}
.story-header .section-heading {
  font-family: var(--font-luxe-serif);
  font-weight: 700;
  color: var(--luxe-ivory);
  text-shadow: 0 2px 22px rgba(4, 2, 6, 0.4);
}
.story-intro {
  font-family: var(--font-luxe-sans);
  color: var(--luxe-ivory-soft);
}
/* No script line or timeline content for this trip (see the STORY_TIMELINE
   comment in itinerary-content.js) — collapse cleanly rather than leaving
   empty gaps where they would have rendered. */
.story-script:empty { display: none; }
.story-timeline:empty { display: none; margin-top: 0; }

/* ==========================================================================
   CELEBRATING MARY — five-photograph editorial spread
   ==========================================================================
   The five real photographs (all supplied at their own true dimensions —
   inspected before writing any of this):
     mary9.jpg  1170x684 (1.71:1 landscape) — dramatic overhead editorial
                shot, direct eye contact, the strongest composition by far.
                FEATURE image (role --feature).
     mary8.jpg  415x414  (~1:1) — full-length red gown, confident pose,
                strong secondary portrait. Role --a (supporting).
     mary3.jpg  414x414  (1:1)  — candid green-dress celebration moment.
                Role --b (medium).
     mary7.jpg  414x414  (1:1)  — beach-club lifestyle moment. Role --c
                (medium/smaller).
     mary1.jpg  414x414  (1:1)  — relaxed boat/ocean candid, the quietest
                image. Role --d (closing accent).
   Each <img> is sized by WIDTH only; height is automatic from that image's
   OWN aspect-ratio (set per role below) — nothing is stretched, cropped to
   a grid cell, or forced square. Mobile and desktop are two different
   layout mechanisms on the same markup: mobile is a staggered, alternating
   flex column (normal document flow, small overlaps via negative margins);
   desktop switches every .celebrating-photo to position:absolute inside a
   fixed-aspect-ratio stage for a true asymmetric magazine spread, with
   z-index ordered so the reading path (feature → a → b → c → d) always
   sits above whichever neighbor it overlaps.
   ========================================================================== */

.celebrating-photos {
  position: relative;
  margin-top: 48px;
}

.celebrating-photo { display: block; margin: 0; }

/* -- Frame treatments — a coordinated family, not identical copies -- */
.celebrating-frame {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 46px -22px rgba(8, 4, 12, 0.7);
}
.celebrating-frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
/* Feature: single champagne border + an offset secondary outline behind
   it (same idea as the "A Note From Mary" photo frame, not identical). */
.celebrating-frame--feature {
  border: 1.5px solid var(--luxe-champagne);
}
.celebrating-frame-offset {
  position: absolute;
  inset: 10px -10px -10px 10px;
  border: 1px solid rgba(233, 205, 154, 0.32);
  border-radius: 14px;
  z-index: -1;
}
/* Supporting/medium images: a single clean champagne hairline. */
.celebrating-frame--single { border: 1px solid var(--luxe-glass-border-strong); }
/* Smaller images: the finest edge, shadow does the work. */
.celebrating-frame--fine { border: 1px solid rgba(233, 205, 154, 0.35); box-shadow: 0 14px 30px -18px rgba(8, 4, 12, 0.6); }

/* The one sparkle in the whole composition. */
.celebrating-sparkle {
  position: absolute;
  top: -8px;
  right: -6px;
  color: var(--luxe-champagne);
  filter: drop-shadow(0 0 5px rgba(233, 205, 154, 0.6));
  z-index: 2;
}

/* ==========================================================================
   MOBILE (default) — staggered vertical editorial collage, alternating
   alignment, intentional overlap, natural aspect ratios via width + each
   image's own ratio (set here, not forced to square/uniform).
   ========================================================================== */
.celebrating-photos {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Desktop-only decorative flourish (positioned in the ≥860px block below) —
   not part of the mobile composition. */
.celebrating-flourish-accent { display: none; }
.celebrating-photo--feature { width: 86vw; max-width: 420px; align-self: center; z-index: 5; }
.celebrating-photo--feature .celebrating-frame img { aspect-ratio: 1170 / 684; }

.celebrating-photo--a { width: 70vw; max-width: 340px; align-self: flex-start; margin-left: 6vw; margin-top: -8vw; z-index: 4; }
.celebrating-photo--a .celebrating-frame img { aspect-ratio: 1 / 1; }

.celebrating-photo--c { width: 50vw; max-width: 230px; align-self: flex-end; margin-right: 6vw; margin-top: -14vw; z-index: 3; }
.celebrating-photo--c .celebrating-frame img { aspect-ratio: 1 / 1; }

.celebrating-photo--b { width: 76vw; max-width: 360px; align-self: center; margin-top: 22px; z-index: 2; }
.celebrating-photo--b .celebrating-frame img { aspect-ratio: 1 / 1; }

.celebrating-photo--d { width: 56vw; max-width: 250px; align-self: flex-end; margin-right: 8vw; margin-top: -10vw; z-index: 1; }
.celebrating-photo--d .celebrating-frame img { aspect-ratio: 1 / 1; }

/* ==========================================================================
   DESKTOP — true asymmetric spread. Every .celebrating-photo becomes
   position:absolute inside a fixed-ratio stage; percentages are relative
   to the stage, so the whole spread scales fluidly with the column width.
   ========================================================================== */
@media (min-width: 860px) {
  .celebrating-photos {
    display: block;
    width: 100%;
    aspect-ratio: 1040 / 660;
  }
  .celebrating-photo {
    position: absolute;
    margin: 0;
  }

  .celebrating-photo--feature { top: 0; left: 0; width: 43%; z-index: 5; }
  .celebrating-photo--feature .celebrating-frame img { aspect-ratio: 1170 / 684; }

  .celebrating-photo--a { top: 8%; left: 51%; width: 25%; z-index: 4; }
  .celebrating-photo--a .celebrating-frame img { aspect-ratio: 1 / 1; }

  /* A small deliberate gap (not an overlap) beneath the feature image —
     reads as intentional spacing rather than the two photos being
     physically stuck together. */
  .celebrating-photo--b { top: 44%; left: 3%; width: 21%; z-index: 2; }
  .celebrating-photo--b .celebrating-frame img { aspect-ratio: 1 / 1; }

  /* Same small gap beneath the red-dress image. */
  .celebrating-photo--c { top: 52%; left: 55%; width: 18%; z-index: 3; }
  .celebrating-photo--c .celebrating-frame img { aspect-ratio: 1 / 1; }

  /* The closing boat image now bridges into the main composition instead
     of floating below it: it sits higher, offset center-right, and
     genuinely overlaps the blue-dress image's lower-left corner (both
     axes) rather than sitting in the empty band between b and c. */
  .celebrating-photo--d { top: 65%; left: 43%; width: 17%; z-index: 1; }
  .celebrating-photo--d .celebrating-frame img { aspect-ratio: 1 / 1; }

  /* One additional, very restrained accent — a short champagne flourish
     (not another sparkle) tucked into the negative space between the four
     upper photos, reinforcing the connection point where d now tucks
     under c. */
  .celebrating-flourish-accent {
    display: block;
    position: absolute;
    top: 40%;
    left: 46%;
    width: 68px;
    height: 20px;
    color: rgba(233, 205, 154, 0.55);
    z-index: 3;
  }
}

/* -- Restrained entrance motion — direction implies where each image sits -- */
.celebrating-photo {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease-editorial), transform 0.9s var(--ease-editorial);
}
.celebrating-photo--a { transform: translate(-10px, 14px); }
.celebrating-photo--c { transform: translate(10px, 14px); }
.celebrating-photo--d { transform: translate(10px, 14px); }
.celebrating-photo--feature { transform: translateY(10px) scale(0.98); }
.celebrating-photos.is-visible .celebrating-photo { opacity: 1; transform: translate(0, 0) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .celebrating-photo { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   HER PEOPLE — friends gallery, eight-photograph editorial cluster
   ==========================================================================
   The eight real photographs (all supplied at their own true dimensions —
   inspected before writing any of this). Four are full-crew shots, four are
   intimate duo moments; that natural split is the hierarchy below rather
   than an arbitrary size choice:
     friend4.jpg   1536x2048 (3:4) — staircase group, dramatic diagonal,
                   the most striking composition. ANCHOR (--staircase).
     friends9.png  1086x1448 (3:4) — boat/ocean duo, vivid color, the only
                   real color break from the black-dress photos. ANCHOR
                   (--boat).
     friend3.jpg   1536x2048 (3:4) — elegant living-room group portrait.
                   MEDIUM (--formal).
     friend6.jpg   1018x1018 (1:1) — brunch table, warm candid, clearest
                   faces of the set. MEDIUM (--brunch).
     friends8.jpeg 480x640   (3:4) — resort duo, blush/palm tones. MEDIUM
                   (--resort).
     friends1.jpg  414x414  (1:1) — poolside group, lower resolution, so
                   kept smallest. ACCENT (--pool).
     friends2.jpg  414x414  (1:1) — glam duo, gold backdrop, lower
                   resolution. ACCENT (--glam).
     friends7.jpeg 480x640  (3:4) — candid laughing duo at a day party.
                   ACCENT (--dayparty).
   Same mechanism as Celebrating Mary (own aspect-ratio per image, mobile =
   normal flow with negative-margin overlap, desktop = position:absolute
   inside a fixed-ratio stage) but a different composition: no single
   dominant hero — two anchors instead, arranged in three loose clusters
   with varied vertical starts, never stacked in rows. Frame language
   coordinates with Celebrating Mary without repeating it: anchors get a
   double-line treatment in blush (not champagne) for a touch of
   differentiation, medium photos share Celebrating Mary's clean champagne
   hairline, and accents use corner brackets instead of a full edge.
   ========================================================================== */

.friends-gallery { padding: 96px 0; }

/* -- Header — left-aligned with a single trailing hairline (like The Full
   Itinerary's eyebrow), rather than Celebrating Mary's centered/flanked
   style: related vocabulary, different room. -- */
.friends-header { max-width: 560px; }
.friends-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-luxe-sans);
  font-weight: 600;
  font-size: clamp(11px, 2.2vw, 13px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--luxe-champagne);
  margin-bottom: 12px;
}
.friends-eyebrow::after {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--luxe-champagne-soft), transparent);
}
.friends-header .section-heading {
  font-family: var(--font-luxe-serif);
  font-weight: 700;
  color: var(--luxe-ivory);
  text-shadow: 0 2px 22px rgba(4, 2, 6, 0.4);
}
.friends-intro {
  margin-top: 14px;
  font-family: var(--font-luxe-sans);
  color: var(--luxe-ivory-soft);
}

.friends-photos {
  position: relative;
  margin-top: 44px;
}

.friends-photo { display: block; margin: 0; }

/* -- Frame treatments — coordinated with Celebrating Mary, not identical -- */
.friends-frame {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 46px -22px rgba(8, 4, 12, 0.7);
}
.friends-frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
/* Anchors: champagne edge + an offset blush outline behind — same idea as
   Celebrating Mary's feature frame, swapped to blush for its own identity. */
.friends-frame--anchor { border: 1.5px solid var(--luxe-champagne); }
.friends-frame-offset {
  position: absolute;
  inset: 9px -9px -9px 9px;
  border: 1px solid var(--luxe-blush-border);
  border-radius: 14px;
  z-index: -1;
}
/* Medium: the same clean champagne hairline used for Celebrating Mary's
   supporting photos. */
.friends-frame--medium { border: 1px solid var(--luxe-glass-border-strong); }
/* Accents: corner brackets instead of a full edge — a new mark in the same
   family, restrained shadow does most of the work. */
.friends-frame--accent { box-shadow: 0 14px 30px -18px rgba(8, 4, 12, 0.6); }
.friends-frame--accent::before,
.friends-frame--accent::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: var(--luxe-champagne-soft);
  border-style: solid;
  z-index: 2;
}
.friends-frame--accent::before {
  top: 6px;
  left: 6px;
  border-width: 1.5px 0 0 1.5px;
}
.friends-frame--accent::after {
  bottom: 6px;
  right: 6px;
  border-width: 0 1.5px 1.5px 0;
}

/* The one sparkle in the whole composition — desktop only (see MOBILE
   below for why it's hidden below 860px). */
.friends-sparkle {
  display: none;
  position: absolute;
  top: -7px;
  right: 10%;
  color: var(--luxe-champagne);
  filter: drop-shadow(0 0 5px rgba(233, 205, 154, 0.6));
  z-index: 6;
}

/* Tiny design element, not a caption — desktop only, tucked into negative
   space, one of the section's 2-3 total micro accents. */
.friends-microcopy {
  display: none;
  position: absolute;
  font-family: var(--font-luxe-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--luxe-ivory-faint);
  white-space: nowrap;
}

/* Mobile-only "swipe" cue under the section intro — see the ≥860px override
   below, which hides it (the desktop spread isn't swipeable). */
.friends-swipe-hint {
  margin-top: 14px;
  font-family: var(--font-luxe-sans);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--luxe-champagne-soft);
}

/* ==========================================================================
   MOBILE (default) — horizontal swipeable photo rail. Replaces an earlier
   staggered vertical collage: on an actual phone that version clipped
   photos at the overlaps and made the section far too tall, and it read
   too much like Celebrating Mary's vertical spread anyway. This is
   deliberately a different photo experience — a touch-scrolled rail, nose
   to tail, nothing overlapping or absolutely positioned. DOM order below IS
   the rail order (see the HTML comment for the rhythm it's built on).
   Desktop (≥860px) completely overrides this block with the asymmetric
   photo-salon spread and does not use any of these rules.
   ========================================================================== */
.friends-photos {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 6vw;
  margin-top: 28px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.friends-photos::-webkit-scrollbar { display: none; }
.friends-flourish-accent { display: none; }

/* Every card shares one peek-friendly width (78vw, capped so it never grows
   huge on a tablet-width phone) — deliberately toward the lower end of the
   78-85% range so that, combined with the container's side padding and the
   gap, a real slice of the next card (not just the gap) is visible at the
   viewport edge. Each photo's own true aspect ratio then decides its
   height, so portrait and square photos both keep their real proportions
   without ever being cropped or forced square. */
.friends-photo {
  flex: 0 0 auto;
  width: min(78vw, 380px);
  scroll-snap-align: center;
  margin: 0;
}

.friends-photo--staircase .friends-frame img { aspect-ratio: 3 / 4; }
.friends-photo--boat .friends-frame img { aspect-ratio: 3 / 4; }
.friends-photo--brunch .friends-frame img { aspect-ratio: 1 / 1; }
.friends-photo--glam .friends-frame img { aspect-ratio: 1 / 1; }
.friends-photo--formal .friends-frame img { aspect-ratio: 3 / 4; }
.friends-photo--dayparty .friends-frame img { aspect-ratio: 3 / 4; }
.friends-photo--pool .friends-frame img { aspect-ratio: 1 / 1; }
.friends-photo--resort .friends-frame img { aspect-ratio: 3 / 4; }

/* ==========================================================================
   DESKTOP — three loose clusters (left / middle / right), each with its own
   vertical start, rather than rows. Two anchors (no single dominant hero),
   three medium, three small — percentages are relative to the fixed-ratio
   stage so the whole cluster scales fluidly with the column width.
   ========================================================================== */
@media (min-width: 860px) {
  .friends-photos {
    display: block;
    width: 100%;
    aspect-ratio: 1100 / 900;
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .friends-photo {
    position: absolute;
    margin: 0;
  }
  .friends-swipe-hint { display: none; }

  /* Cluster A — left: the staircase anchor with the glam duo tucked into
     its lower-right corner (an empty stairwell in the photo, no faces). */
  .friends-photo--staircase { top: 0; left: 0; width: 27%; z-index: 2; }
  .friends-photo--staircase .friends-frame img { aspect-ratio: 3 / 4; }

  .friends-photo--glam { top: 38%; left: 18%; width: 14%; z-index: 5; }
  .friends-photo--glam .friends-frame img { aspect-ratio: 1 / 1; }

  .friends-photo--pool { top: 58%; left: 8%; width: 15%; z-index: 3; }
  .friends-photo--pool .friends-frame img { aspect-ratio: 1 / 1; }

  /* Cluster B — middle: starts lower than cluster A, the brunch photo with
     the day-party duo tucked under its bottom-left (table/glasses in one
     photo, background lawn in the other — no faces in the overlap zone). */
  .friends-photo--brunch { top: 10%; left: 34%; width: 21%; z-index: 2; }
  .friends-photo--brunch .friends-frame img { aspect-ratio: 1 / 1; }

  .friends-photo--dayparty { top: 30%; left: 30%; width: 13%; z-index: 5; }
  .friends-photo--dayparty .friends-frame img { aspect-ratio: 3 / 4; }

  /* Cluster C — right: the boat anchor starts a touch lower than the
     staircase anchor for vertical variety, the formal group tucks under
     its lower-left (bare feet, not faces), and the resort duo bridges
     further down toward the bottom-right. */
  .friends-photo--boat { top: 4%; left: 64%; width: 28%; z-index: 2; }
  .friends-photo--boat .friends-frame img { aspect-ratio: 3 / 4; }

  .friends-photo--formal { top: 42%; left: 54%; width: 19%; z-index: 4; }
  .friends-photo--formal .friends-frame img { aspect-ratio: 3 / 4; }

  .friends-photo--resort { top: 64%; left: 66%; width: 19%; z-index: 5; }
  .friends-photo--resort .friends-frame img { aspect-ratio: 3 / 4; }

  .friends-sparkle { display: block; top: -7px; right: auto; left: 24%; }

  .friends-flourish-accent {
    display: block;
    position: absolute;
    top: 21%;
    left: 29%;
    width: 60px;
    height: 18px;
    color: rgba(233, 205, 154, 0.5);
    z-index: 3;
    transform: rotate(8deg);
  }

  .friends-microcopy {
    display: block;
    top: 75%;
    left: 26%;
    width: 15%;
    text-align: left;
    white-space: normal;
    line-height: 1.6;
  }
}

/* -- Restrained entrance motion — direction implies where each cluster sits -- */
.friends-photo {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease-editorial), transform 0.9s var(--ease-editorial);
}
.friends-photo--brunch,
.friends-photo--formal,
.friends-photo--resort { transform: translate(-10px, 14px); }
.friends-photo--glam,
.friends-photo--dayparty,
.friends-photo--pool { transform: translate(10px, 14px); }
.friends-photo--staircase,
.friends-photo--boat { transform: translateY(10px) scale(0.98); }
.friends-photos.is-visible .friends-photo { opacity: 1; transform: translate(0, 0) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .friends-photo { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   "A NOTE FROM MARY" — editorial headline + restrained champagne jewelry
   details, per the approved reference. Photo, framing, layout, note copy,
   and the signature ("With love, Mary" — .welcome-note-signature-names)
   are all deliberately untouched; only the header (eyebrow + heading) and
   the caption are refined here.
   ========================================================================== */

/* Photo caption removed — the photograph stands on its own. */
.welcome-note-caption:empty { display: none; }

/* A composed, four-layer editorial title treatment — not just a heading
   with a line under it:
     1. eyebrow + proportional side rules
     2. a finer secondary rule broken by a centered sparkle ("crown")
     3. the large "A Note From Mary" headline (+ one small asymmetrical
        accent dot, so it doesn't read as mechanically centered)
     4. a long sweeping champagne flourish with one calligraphic loop and
        a single sparkle at its low point
   Generous but not excessive breathing room between each layer. */
.welcome-note-header { gap: 14px; }

/* -- Layer 1: eyebrow + proportional side rules -- */
.welcome-note-eyebrow-row { display: flex; align-items: center; gap: 14px; }
.welcome-note-eyebrow-line {
  flex: 1 1 34px;
  max-width: 46px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--luxe-champagne-soft));
}
.welcome-note-eyebrow-line:last-child { background: linear-gradient(90deg, var(--luxe-champagne-soft), transparent); }
.welcome-note-header .eyebrow {
  flex: none;
  font-family: var(--font-luxe-sans);
  color: var(--luxe-champagne);
}

/* -- Layer 2: a finer, shorter rule beneath the eyebrow, broken by one
   small centered sparkle — the "crown" above the headline.
   The row has a fixed height and the sparkle is position:absolute, so the
   sparkle can NEVER add layout height or push the headline down, no
   matter what — a plain block/flex-sized sparkle previously depended on
   this CSS loading correctly to stay small, which is what broke. The two
   line spans sit centered as a pair with a gap between them; the sparkle
   is pinned exactly to the row's center, right in that gap. -- */
.welcome-note-crown-row {
  position: relative;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 2px;
}
.welcome-note-crown-line {
  width: 26px;
  height: 1px;
  flex: none;
  background: linear-gradient(90deg, transparent, rgba(233, 205, 154, 0.4));
  opacity: 0.8;
}
.welcome-note-crown-row .welcome-note-crown-line:last-child { background: linear-gradient(90deg, rgba(233, 205, 154, 0.4), transparent); }
.welcome-note-crown-sparkle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  color: var(--luxe-champagne);
  filter: drop-shadow(0 0 4px rgba(233, 205, 154, 0.55));
}

/* -- Layer 3: the headline. "Mary" distinguished only by champagne color
   + a soft glow — same serif family throughout, never script here. -- */
.welcome-note-heading-wrap { position: relative; }
.welcome-note-heading {
  font-family: var(--font-luxe-serif);
  font-weight: 700;
  color: var(--luxe-ivory);
  white-space: normal;
}
/* "A" is champagne too — ::first-letter targets just that leading
   character of the (plain-text) "A Note From " node; "Note From" stays
   ivory via the parent color above, and "Mary" is champagne via
   .welcome-note-heading-accent below. Same serif family throughout. */
.welcome-note-heading::first-letter {
  color: var(--luxe-champagne);
  text-shadow: 0 0 20px rgba(233, 205, 154, 0.4);
}
@media (min-width: 640px) {
  /* One strong editorial line when the column is wide enough for it. */
  .welcome-note-heading { white-space: nowrap; }
}
.welcome-note-heading-accent {
  font-family: inherit;
  font-weight: inherit;
  font-style: normal;
  font-size: 1.05em;
  margin-left: 8px;
  color: var(--luxe-champagne);
  text-shadow: 0 0 20px rgba(233, 205, 154, 0.4);
}
/* One tiny asymmetrical accent — the detail that keeps the composition
   from feeling mechanically centered. */
.welcome-note-accent-dot {
  position: absolute;
  top: -2px;
  right: 14%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--luxe-champagne);
  box-shadow: 0 0 6px rgba(233, 205, 154, 0.6);
}
@media (min-width: 640px) { .welcome-note-accent-dot { top: -4px; right: 8%; } }

/* -- Layer 4: a long sweeping champagne pen-stroke — dip, rise, one
   restrained calligraphic loop, taper — with a single sparkle at its
   low point. Spans most of the headline's own width, not a fixed size. -- */
.welcome-note-flourish {
  display: block;
  width: 78%;
  max-width: 420px;
  height: auto;
  aspect-ratio: 520 / 84;
  margin-top: 6px;
  overflow: visible;
}
.welcome-note-flourish-path {
  color: var(--luxe-champagne-soft);
  opacity: 0.9;
}
.welcome-note-flourish-sparkle {
  color: var(--luxe-champagne);
  filter: drop-shadow(0 0 5px rgba(233, 205, 154, 0.55));
}