/* ─── GLOBAL RESET ───────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* Hide scrollbar (cosmetic — scroll still works) */
html { scrollbar-width: none; }
::-webkit-scrollbar { display: none; }

button,
a,
input,
select,
textarea,
[role="button"],
[role="option"] {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid rgba(130, 91, 64, 0.4);
  outline-offset: 2px;
}

html { scroll-behavior: smooth; }

img { display: block; max-width: 100%; height: auto; }
a   { text-decoration: none; color: inherit; }

/* ─── DESIGN TOKENS ──────────────────────────────────────────────────────── */
:root {
  --cream:        #f5f3ee;
  --terracotta:   #c65d3b;
  --coral:        #c9623e;
  --green-dark:   rgba(61, 80, 63, 0.92);
  /* The flat green the palm artwork was drawn on, now that RSVP carries the
     colour without the pattern. */
  --green-deep:   #4e5f4f;
  /* A lighter relative of --green-deep, so accommodation reads as its own
     block without leaving the palette. */
  --green-sage:   #617662;
  /* The suggestions ground, and the papel picado that hangs under it. */
  --sand:         #efece4;
  --brown-dark:   #4d3120;
  --brown-mid:    #825b40;
  --brown-btn:    #d87953;
  --polaroid-bg:  #edece4;
  --form-bg:      #f9f8f5;
  --input-bg:     #f7f6f2;
  --input-border: #c4b9b0;
  --white:        #ffffff;
}

body {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  color: var(--brown-mid);
  background: var(--cream);
  overflow-x: clip;
}

/* ─── TYPOGRAPHY HELPERS ─────────────────────────────────────────────────── */
.display       { font-family: 'Gravitas One', cursive; }
.ui-label      { font-family: 'Mooli', sans-serif; }
.mono          { font-family: Menlo, 'Courier New', monospace; }

/* ─── SECTION LAYOUT ─────────────────────────────────────────────────────── */
section { position: relative; }

/* ─── CONTENT MAX-WIDTH ──────────────────────────────────────────────────── */
/* Backgrounds stay full-width; only text & cards are capped at 480px        */
#countdown > *,
#location > *,
#dresscode > *,
#accommodation > *,
#transport > *,
#faq > *,
#rsvp > *,
footer > * {
  max-width: 480px;
  box-sizing: border-box;
}

/* Items that should stretch to full available width within the 480px cap */
#faq-list,
.hotel-slider,
.rsvp-heading-group,
.accommodation-intro,
.faq-heading,
.faq-label,
.transport-body,
.transport-note,
.location-heading-group,
.dresscode-heading-group,
.dresscode-body,
.countdown-heading-group {
  width: 100%;
}

/* ─── FADE-UP SCROLL REVEAL ─────────────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fade-up.visible { opacity: 1; transform: none; }
.fade-up.d1 { transition-delay: 0.10s; }
.fade-up.d2 { transition-delay: 0.22s; }
.fade-up.d3 { transition-delay: 0.38s; }
.fade-up.d4 { transition-delay: 0.55s; }
.fade-up.d5 { transition-delay: 0.70s; }

/* ─── SITE NAV ───────────────────────────────────────────────────────────── */
#site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  transition: background 0.35s, backdrop-filter 0.35s, box-shadow 0.35s;
}
#site-nav.scrolled {
  pointer-events: auto;
  background: rgba(245, 243, 238, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(77, 49, 32, 0.08);
}

.nav-logo {
  font-family: 'Gravitas One', cursive;
  font-size: 15px;
  color: var(--brown-dark);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
  white-space: nowrap;
}
#site-nav.scrolled .nav-logo {
  opacity: 1;
  pointer-events: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}
#site-nav.scrolled .nav-links {
  opacity: 1;
  pointer-events: auto;
}
.nav-links a {
  font-family: 'Mooli', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brown-dark);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--terracotta); }

.nav-rsvp-pill {
  border: 1.5px solid var(--terracotta) !important;
  color: var(--terracotta) !important;
  border-radius: 999px;
  padding: 6px 16px !important;
  transition: background 0.2s, color 0.2s !important;
}
.nav-rsvp-pill:hover {
  background: var(--terracotta) !important;
  color: #fff !important;
}

/* Burger */
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}
#site-nav.scrolled .nav-burger {
  opacity: 1;
  pointer-events: auto;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--brown-dark);
  border-radius: 1px;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.18s ease;
  transform-origin: center;
}
/* Bars first slide together, then cross — and reverse on close. */
#site-nav.open .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#site-nav.open .nav-burger span:nth-child(2) { opacity: 0; transition-duration: 0.12s; }
#site-nav.open .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile overlay */
/* The panel stays laid out and is gated with visibility, so both the open and
   the close can actually play — a display toggle skips the transition. */
#nav-mobile {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: var(--cream);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.3s ease,
              transform 0.3s ease,
              visibility 0s linear 0.3s;
}
#nav-mobile.open {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s;
}
/* Logo + links drift up one after another on open, and leave together.
   Keyframes rather than transitions: the links already own their `transition`
   for the hover colour (the RSVP pill's is even !important), so a transition
   here would be overridden. */
@keyframes nav-item-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes nav-item-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(6px); }
}
#nav-mobile .nav-mobile-logo,
#nav-mobile a {
  animation: nav-item-out 0.2s ease both;
}
#nav-mobile.open .nav-mobile-logo,
#nav-mobile.open a {
  animation: nav-item-in 0.44s cubic-bezier(0.22, 1, 0.36, 1) var(--nav-stagger, 0s) both;
}
#nav-mobile.open > *:nth-child(2) { --nav-stagger: 0.05s; }
#nav-mobile.open > *:nth-child(3) { --nav-stagger: 0.08s; }
#nav-mobile.open > *:nth-child(4) { --nav-stagger: 0.11s; }
#nav-mobile.open > *:nth-child(5) { --nav-stagger: 0.14s; }
#nav-mobile.open > *:nth-child(6) { --nav-stagger: 0.17s; }
#nav-mobile.open > *:nth-child(7) { --nav-stagger: 0.20s; }
#nav-mobile.open > *:nth-child(8) { --nav-stagger: 0.23s; }
#nav-mobile.open > *:nth-child(9) { --nav-stagger: 0.26s; }
#nav-mobile.open > *:nth-child(10) { --nav-stagger: 0.29s; }
.nav-mobile-logo {
  font-family: 'Gravitas One', cursive;
  font-size: 24px;
  color: var(--brown-dark);
  margin-bottom: 8px;
}
#nav-mobile a {
  font-family: 'Mooli', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brown-dark);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}
#nav-mobile a:hover { color: var(--terracotta); }
#nav-mobile .nav-rsvp-pill {
  border: 1.5px solid var(--terracotta);
  color: var(--terracotta) !important;
  border-radius: 999px;
  padding: 10px 32px;
  margin-top: 8px;
}
#nav-mobile .nav-rsvp-pill:hover {
  background: var(--terracotta) !important;
  color: #fff !important;
}
.nav-mobile-close {
  position: absolute;
  top: 20px; right: 20px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--brown-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: background 0.2s, opacity 0.2s ease;
}
#nav-mobile.open .nav-mobile-close {
  opacity: 1;
  transition: background 0.2s, opacity 0.35s ease 0.12s;
}
.nav-mobile-close:hover { background: rgba(130, 91, 64, 0.1); }

@media (prefers-reduced-motion: reduce) {
  #nav-mobile,
  #nav-mobile.open,
  #nav-mobile .nav-mobile-logo,
  #nav-mobile.open .nav-mobile-logo,
  #nav-mobile a,
  #nav-mobile.open a,
  #nav-mobile .nav-mobile-close,
  #nav-mobile.open .nav-mobile-close,
  .nav-burger span {
    transition-duration: 0.01s;
    transition-delay: 0s;
  }
  #nav-mobile { transform: none; }
  #nav-mobile .nav-mobile-logo,
  #nav-mobile a,
  #nav-mobile.open .nav-mobile-logo,
  #nav-mobile.open a {
    animation-duration: 0.01s;
    animation-delay: 0s;
  }
}

@media (max-width: 699px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 1. HERO */
/* ─────────────────────────────────────────────────────────────────────────── */
#hero {
  height: 100vh;        /* fallback: reliable across all browsers and iframe contexts */
  /* iOS reports 100vh as the viewport with the browser chrome hidden, so the
     bottom of the hero — the RSVP button — sat under Safari's toolbar. svh is
     the viewport with the chrome showing, so the button always clears it. */
  height: 100svh;
  /* Floor for very small screens. Kept under the ~553px an iPhone SE leaves
     visible with Safari's chrome showing, so it never overrides svh there
     and push the button back under the toolbar. */
  min-height: 540px;
  background: #ede5d6; /* warm sand — matches illustration sky while hero-day.jpg loads */
  position: relative;
  text-align: center;
  overflow: hidden;
}

/* Background layers — divs fill the hero reliably without any img height:auto issues */
#hero-day-layer,
#hero-night-layer {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
}

#hero-day-layer   { background-image: url('assets/hero-day.png'); }
#hero-night-layer { background-image: url('assets/hero-night.png'); }

#hero.hero-day   #hero-day-layer   { opacity: 1; }
#hero.hero-night #hero-night-layer { opacity: 1; }

/* Hero background video — plays after envelope, sits above image layers */
#hero-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
}
/* Visible while playing (no day/night class set) */
#hero:not(.hero-day):not(.hero-night) #hero-video { opacity: 1; }
/* Faded out when user manually picks a mode, or video has ended */
#hero-video.faded { opacity: 0; }

/* Subtle gradient overlay at bottom — sits above video so it darkens both images & video */
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(77, 49, 32, 0) 0%,
    rgba(77, 49, 32, 0.05) 75%,
    rgba(77, 49, 32, 0.55) 100%
  );
  z-index: 2;
}

#hero > *:not(#hero-day-layer):not(#hero-night-layer):not(#hero-video) {
  z-index: 3;
}

/* Top-right controls stack */
.hero-top-right-stack {
  position: absolute;
  top: 20px; right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 10;
}

/* ── Language selector ── */
.lang-selector { position: relative; }

.lang-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 38px;                       /* matches toggle height */
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  border-radius: 999px;
  padding: 0 10px 0 14px;
  cursor: pointer;
  transition: background 0.2s;
}
.lang-pill:hover { background: rgba(255, 255, 255, 0.75); }

.lang-active-pill {
  display: flex;
  align-items: center;
}
.lang-code {
  font-family: 'Mooli', sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #3f3830;
}
.lang-chevron {
  color: #3f3830;
  transition: transform 0.25s;
}
.lang-selector.open .lang-chevron { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  background: var(--form-bg);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(77, 49, 32, 0.15);
  overflow: hidden;
  display: none;
  flex-direction: column;
  min-width: 72px;
}
.lang-selector.open .lang-menu { display: flex; }

.lang-option {
  font-family: 'Mooli', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--brown-dark);
  background: none;
  border: none;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}
.lang-option:hover,
.lang-option.active { background: rgba(198, 93, 59, 0.08); color: var(--terracotta); }

/* ── Day / Night Toggle ── */
.sunset-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  border-radius: 999px;
  padding: 4px;
}

.sunset-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(63, 56, 48, 0.55);
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.sunset-btn[aria-pressed="true"] {
  background: #ffffff;
  color: var(--terracotta);
}
.sunset-btn:hover:not([aria-pressed="true"]) {
  background: rgba(255, 255, 255, 0.4);
  color: #3f3830;
}

/* Night mode — keep toggle readable on dark background */
#hero.hero-night .sunset-toggle {
  background: rgba(255, 255, 255, 0.25);
}
#hero.hero-night .sunset-btn {
  color: rgba(255, 255, 255, 0.6);
}
#hero.hero-night .sunset-btn[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.9);
  color: var(--terracotta);
}
#hero.hero-night .lang-pill {
  background: rgba(255, 255, 255, 0.25);
}
#hero.hero-night .lang-code,
#hero.hero-night .lang-chevron {
  color: rgba(255, 255, 255, 0.9);
}

/* ── Hero center content ── */
.hero-center-group {
  position: absolute;
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26.25px;
  text-align: center;
  white-space: nowrap;
  z-index: 2;
}

.hero-date {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 1.875px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  transition: color 1.4s ease;
}

.hero-names {
  font-family: 'Gravitas One', cursive;
  font-size: clamp(17px, 4.5vw, 26px);
  color: #ffffff;
  font-weight: 400;
  letter-spacing: 3.375px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  line-height: 21.563px;
  transition: color 1.4s ease;
}
.hero-names .amp {
  font-size: clamp(18px, 4.8vw, 28px);  /* amp is slightly larger than names per Figma */
  color: var(--terracotta);
  letter-spacing: 3.75px;
  line-height: 21.563px;
}

/* Day mode — darken text for readability on bright image */
#hero.hero-day .hero-names,
#hero.hero-day .hero-date,
#hero.hero-day .hero-location {
  color: var(--brown-dark);
  text-shadow: none;
}
#hero.hero-day .hero-names .amp {
  color: var(--terracotta);
}

.hero-location {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 1.875px;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.7);
  transition: color 1.4s ease;
}

/* RSVP CTA at the bottom of the hero.
   It used to be a bare label that switched between brown and white, because
   neither colour holds on both hero images — and on first load the video is
   playing over them, so neither rule applies at all. A filled pill is legible
   on any of the three, which is why this carries a surface. Metrics and type
   come from .maps-btn, like the section CTAs. */
.hero-cta {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
/* Same frosted glass as the language pill and the day/night toggle above it,
   including their night override — which is also why it holds on first load,
   when the hero carries neither mode class and the video is playing over it. */
.hero-cta-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 999px;
  padding: 12px 24px;
  white-space: nowrap;
  transition: background 0.2s;
}
.hero-cta:hover .hero-cta-pill { background: rgba(255, 255, 255, 0.75); }
#hero.hero-night .hero-cta-pill { background: rgba(255, 255, 255, 0.25); }
#hero.hero-night .hero-cta:hover .hero-cta-pill { background: rgba(255, 255, 255, 0.4); }
#hero.hero-night .hero-cta-label { color: rgba(255, 255, 255, 0.9); }
.hero-cta-label {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #3f3830;              /* .lang-code's ink */
  /* the tracking is on the last letter too, so take it back to centre the text */
  margin-right: -0.25em;
}
.hero-cta-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  color: rgba(255, 255, 255, 0.8);
  animation: bounce-arrow 2.2s ease-in-out infinite;
}
.hero-cta:hover .hero-cta-arrow { color: #fff; }
@keyframes bounce-arrow {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cta-arrow { animation: none; }
}

/* Sound button — fixed bottom-right */
.sound-btn {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--terracotta);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 800;
  transition: background 0.2s, transform 0.15s;
}
.sound-btn:hover {
  background: var(--brown-btn);
  transform: scale(1.06);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 2. COUNTDOWN  (inside #story-track sticky area) */
/* ─────────────────────────────────────────────────────────────────────────── */
#story-track {
  position: relative;
}
#story-sticky {
  position: relative;
  /* Was min-height: 100vh, from a sticky scroll effect that no longer exists.
     With #our-story no longer stretching, it would only add a bare strip under
     the section on a tall screen. */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#countdown {
  background: url('assets/countdown.png') center center / cover no-repeat;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  padding: 40px 31px 46px;
  text-align: center;
}

.countdown-inner {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11.875px;
}

.cd-label {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #6c4b34;
}

.countdown-heading {
  font-family: 'Gravitas One', cursive;
  font-size: 20px;
  color: #65452f;
  font-weight: 400;
  letter-spacing: 0.5625px;
  text-shadow: 0px 0.625px 1.25px rgba(54, 77, 99, 0.1);
}

.countdown-line {
  width: 40px;
  height: 0.625px;
  background: rgba(88, 93, 101, 0.25);
  margin: 0 auto;
}

.countdown-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 27px;
  padding: 10px 42px;
}
.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.countdown-number {
  font-family: 'Gravitas One', cursive;
  font-size: clamp(26px, 7vw, 30px);
  color: var(--terracotta);
  line-height: 1;
  letter-spacing: 1.2px;
}
.countdown-label {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #6a4a32;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 3. OUR STORY */
/* ─────────────────────────────────────────────────────────────────────────── */
#our-story {
  /* Sized by its content, not stretched: the gap above and below the carousel
     is the padding below and nothing else. */
  flex: 0 0 auto;
  background: url('assets/Our story.png') center center / cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 0;
  overflow: hidden;
  position: relative;
}

.story-cards-wrap {
  width: 100%;
  /* Horizontal scroll container: the row drifts on its own and the reader can
     also swipe/scroll it by hand. overflow-y must be hidden rather than visible,
     or the browser turns this into a vertical scroller too. */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}
.story-cards-wrap::-webkit-scrollbar { display: none; }
.story-cards-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 64px;
  /* Extra vertical room over the original 8px/24px: the cards are rotated and
     grow on hover, and overflow-y: hidden above would otherwise clip them. */
  padding: 24px calc(50% - 140px) 36px;
  align-items: flex-start;
  width: max-content;
}

/* Story polaroid card */
.story-card {
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  height: 349px;
  background: var(--polaroid-bg);
  border-radius: 3px;
  padding: 12px;
  box-shadow: 0 4px 11.75px rgba(0,0,0,0.25);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.story-card:nth-child(odd)  { transform: rotate(-4deg); }
.story-card:nth-child(even) { transform: rotate(3deg); }
.story-card:hover { transform: rotate(0) scale(1.04); }

.story-card-img {
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: 2px;
}
.story-card-caption {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  width: 100%;
}
.story-card-location {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #64432e;
  line-height: normal;
}
.story-card-text {
  font-family: 'Gravitas One', cursive;
  font-size: 15px;
  color: #cc6642;
  font-weight: 400;
  line-height: normal;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 4. LOCATION */
/* ─────────────────────────────────────────────────────────────────────────── */
#location {
  background: var(--terracotta);
  padding: 40px 24px;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
  position: relative;
  overflow: hidden;
}

.location-heading-group { }
.location-label {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--polaroid-bg);
  margin-bottom: 12px;
}
.location-heading {
  font-family: 'Gravitas One', cursive;
  font-size: clamp(16px, 4.8vw, 20px);
  font-weight: 400;
  color: var(--polaroid-bg);
  letter-spacing: 0.5625px;
  white-space: nowrap;
}

.location-polaroid {
  display: flex;
  flex-direction: column;
  background: rgba(251, 248, 241, 0.92);
  border-radius: 3px;
  padding: 12px;
  box-shadow: 0 4px 11.75px rgba(0,0,0,0.25);
  width: 280px;
  height: 349px;
  margin: 0;
  gap: 12px;
}
.location-polaroid img {
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: cover;
  object-position: center top;
  border-radius: 2px;
  display: block;
}
.location-polaroid-caption {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.location-polaroid-sub {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #64432e;
  line-height: normal;
}
.location-polaroid-name {
  font-family: 'Gravitas One', cursive;
  font-size: 17px;
  color: #cc6642;
  font-weight: 400;
  line-height: normal;
}

.maps-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  color: #714d36;
  border-radius: 999px;
  padding: 12px 24px;
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.05px;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  border: none;
  cursor: pointer;
}
/* The pin is a stroked SVG with its own hard-coded colour, and an <img> is its
   own document, so page CSS cannot reach inside it. Masking the same file and
   painting currentColor through it keeps the icon on the label's colour. */
.maps-btn-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url('assets/mapicon.svg') center / contain no-repeat;
          mask: url('assets/mapicon.svg') center / contain no-repeat;
}
.maps-btn:hover {
  background: #fff;
  color: #714d36;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 5. PROGRAM */
/* ─────────────────────────────────────────────────────────────────────────── */
#program {
  background: var(--cream);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
  overflow: hidden;
}

/* ── Hummingbirds in the margins ─────────────────────────────────────────── */
/* #program is position:relative and overflow:hidden. Every bird is placed at a
   non-negative offset and sized so its box fits inside the section, so none is
   clipped at an edge. Behind the timeline, and never in the way of a tap. */
.program-birds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.program-birds span {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
/* Irregular on purpose: alternating sides, uneven vertical spacing, mixed sizes
   and a flip on some, so the five do not read as a row. The tops are chosen to
   fall between the timeline's wide rows — the venue lines and the day headers
   leave the least room, so nothing sits beside those. The few px of side inset
   absorbs the rotation, which otherwise pushes a corner past the edge. */
.program-birds span:nth-child(1) {
  top: 15%; left: 20px;  width: 74px; aspect-ratio: 1.042;
  background-image: url('assets/itin-bird-1.webp');
  transform: scaleX(-1) rotate(6deg);
}
.program-birds span:nth-child(2) {
  top: 30%; right: 20px; width: 66px; aspect-ratio: 1.240;
  background-image: url('assets/itin-bird-2.webp');
  transform: scaleX(-1) rotate(5deg);
}
.program-birds span:nth-child(3) {
  top: 46%; left: 20px;  width: 62px; aspect-ratio: 1.265;
  background-image: url('assets/itin-bird-3.webp');
  transform: rotate(4deg);
}
.program-birds span:nth-child(4) {
  top: 60%; right: 20px; width: 78px; aspect-ratio: 1.245;
  background-image: url('assets/itin-bird-4.webp');
  transform: scaleX(-1) rotate(4deg);
}
.program-birds span:nth-child(5) {
  top: 78%; left: 20px;  width: 56px; aspect-ratio: 0.928;
  background-image: url('assets/itin-bird-5.webp');
  transform: scaleX(-1) rotate(-8deg);
}
/* On the narrowest screens there is barely a margin to sit in, so they shrink —
   still inset from the edge, still fully inside. */
@media (max-width: 374px) {
  /* Less room here, so a smaller inset as well as smaller birds. */
  .program-birds span:nth-child(1) { width: 52px; left: 10px; }
  .program-birds span:nth-child(2) { width: 46px; right: 10px; }
  .program-birds span:nth-child(3) { width: 44px; left: 10px; }
  .program-birds span:nth-child(4) { width: 54px; right: 10px; }
  .program-birds span:nth-child(5) { width: 40px; left: 10px; }
}

.program-flags {
  width: 100%;
  height: 59px;
  background: url('assets/flags.svg') repeat-x left top;
  background-size: auto 59px;
  display: block;
  flex-shrink: 0;
}

.program-inner {
  width: 100%;
  max-width: 500px;
  padding: 56px 24px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.program-label {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--terracotta);
}
.program-heading {
  font-family: 'Gravitas One', cursive;
  font-size: clamp(20px, 5.6vw, 24.5px);
  line-height: 40px;
  color: #d3704b;
  font-weight: 400;
  letter-spacing: 0.9px;
  text-align: center;
}
.program-date {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: bold;
  font-size: 13px;
  color: #d77650;
  letter-spacing: 3.5px;
}

/* Centered timeline */
.program-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: 380px;
}
.program-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}
.program-day-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.program-day-header {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(14px, 4.4vw, 18px);
  letter-spacing: 1px;
  color: #d77650;
  text-align: center;
  margin-right: -1px; /* offset the trailing letter-space so the line optically centres */
}
.program-day-venue {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 2px;
  color: #6a4731;
  text-align: center;
  margin-right: -2px;
}
.program-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}
.program-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.program-icon {
  /* Applied to the height, so every icon reads at the same size down the
     timeline whatever its shape; a square box would letterbox a wide
     illustration to half height. */
  height: 90.3168px;
  width: auto;
  max-width: 100%;
  display: block;
  flex-shrink: 0;
}
/* Three icons are held off the shared 90.3168px: the disco ball leads the row,
   the palapa runs 1.2x, and the rings sit under. Tied to the filenames —
   rename an asset and its rule stops applying. */
.program-icon[src*="itin-dancing"] {
  height: 161.28px;
}
.program-icon[src*="itin-arrival"] {
  height: 108.38px;
}
.program-icon[src*="itin-rings"] {
  height: 40.32px;
}
/* ── Twinkles around the disco ball ──────────────────────────────────────── */
.program-icon-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.program-twinkles {
  position: absolute;
  /* reaches past the icon so the sparkles sit around the ball, not only on it */
  inset: -8% -34%;
  pointer-events: none;
}
.program-twinkles span {
  position: absolute;
  width: var(--tw-size, 9px);
  aspect-ratio: 1;
  background: #d8a94f;
  /* four-point sparkle */
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%,
                     50% 100%, 42% 58%, 0% 50%, 42% 42%);
  opacity: 0;
}
/* Scattered rather than evenly spaced, so the group reads as a glint and not
   as a pattern. The odd delays keep them from pulsing in unison. */
.program-twinkles span:nth-child(1) { top:  2%; left:  8%; --tw-size: 12px; --tw-delay: 0.00s; }
.program-twinkles span:nth-child(2) { top: 16%; left: 82%; --tw-size:  9px; --tw-delay: 0.35s; }
.program-twinkles span:nth-child(3) { top: 38%; left:  0%; --tw-size:  8px; --tw-delay: 0.62s; }
.program-twinkles span:nth-child(4) { top: 66%; left: 90%; --tw-size: 11px; --tw-delay: 0.18s; }
.program-twinkles span:nth-child(5) { top: 84%; left: 16%; --tw-size:  9px; --tw-delay: 0.78s; }
.program-twinkles span:nth-child(6) { top: 92%; left: 62%; --tw-size:  7px; --tw-delay: 0.46s; }
.program-twinkles span:nth-child(7) { top: 10%; left: 44%; --tw-size:  7px; --tw-delay: 0.94s; }
.program-twinkles span:nth-child(8) { top: 54%; left: 96%; --tw-size:  6px; --tw-delay: 1.15s; }
.program-twinkles span:nth-child(9) { top: 72%; left:  4%; --tw-size:  7px; --tw-delay: 1.02s; }

.program-twinkles.twinkling span {
  animation: twinkle 3.2s ease-out var(--tw-delay, 0s) 1 both;
}
/* Quick to arrive, slow to leave. */
@keyframes twinkle {
  0%   { opacity: 0;    transform: scale(0.2)  rotate(-20deg); }
  14%  { opacity: 1;    transform: scale(1)    rotate(0deg); }
  34%  { opacity: 0.85; transform: scale(0.88) rotate(8deg); }
  100% { opacity: 0;    transform: scale(0.3)  rotate(28deg); }
}
@media (prefers-reduced-motion: reduce) {
  .program-twinkles { display: none; }
}

.program-time-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.program-time {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  color: #6a4731;
  text-align: center;
  margin-right: -1px;
}
.program-event {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 2px;
  text-transform: none;
  color: #6a4731;
  text-align: center;
  margin-right: -2px;
}
.program-divider {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(88, 93, 101, 0.35);
  /* The bar this replaces stood 20px tall. Keeping that footprint leaves the
     timeline's vertical rhythm exactly where it was. */
  margin: 8px 0;
}
.program-note {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 3.4vw, 14px);
  letter-spacing: 2px;
  color: #a07850;
  text-align: center;
  margin-right: -2px;
}
#program-date {
  display: none;
}

.program-bottom-img {
  width: 100%;
  /* Tiles sideways instead of stretching, so the cacti keep their proportions
     however wide the page gets. The art repeats as drawn, so its two ends meet
     at each repeat rather than being mirrored into each other. */
  height: 200px;
  background: url('assets/program-cactus.webp') repeat-x left bottom;
  background-size: auto 200px;
  display: block;
  flex-shrink: 0;
  margin-top: 8px;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 6. DRESSCODE */
/* ─────────────────────────────────────────────────────────────────────────── */
#dresscode {
  background: var(--cream);
  padding: 64px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.dresscode-heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.dresscode-label {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #6a4731;
  margin-right: -1px; /* offset the trailing letter-space so the line optically centres */
}
.dresscode-heading {
  font-family: 'Gravitas One', cursive;
  font-size: clamp(20px, 5.6vw, 24.5px);
  line-height: 40px;
  color: #d3704b;
  font-weight: 400;
  letter-spacing: 0.9px;
}

#dresscode-cards {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
  max-width: 380px;
}

.dresscode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.dresscode-card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.dresscode-card-day {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(14px, 4.4vw, 18px);
  letter-spacing: 1px;
  color: #d77650;
  text-align: center;
  margin-right: -1px;
}
.dresscode-card-label {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 2px;
  color: #6a4731;
  text-align: center;
  text-transform: none;
  margin-right: -2px;
}

.dresscode-illustration {
  width: 100%;
}
.dresscode-illustration img {
  width: 100%;
  height: auto;
  display: block;
}

.dresscode-card-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.dresscode-body {
  width: 100%;
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #6a4731;
  text-align: center;
  letter-spacing: normal;
  white-space: pre-wrap;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 7. ACCOMMODATION */
/* ─────────────────────────────────────────────────────────────────────────── */
#accommodation {
  background: var(--green-sage);
  padding: 40px 24px;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19.375px;
  position: relative;
}
#accommodation::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(61, 80, 63, 0.62);
  pointer-events: none;
  z-index: 0;
}
#accommodation > * {
  position: relative;
  z-index: 1;
}

.accommodation-heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.accommodation-label {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #fff;
}
.accommodation-heading {
  font-family: 'Gravitas One', cursive;
  font-size: 20px;
  color: #fff;
  font-weight: 400;
  letter-spacing: 0.5625px;
}

.accommodation-intro {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.3125px;
  max-width: 480px;
  /* Mirrors .hotel-card's 24px padding (these are border-box), so the intro
     starts and ends on the same measure as the text inside the cards below
     rather than running out to the card's outer edge. */
  padding: 0 24px;
}

/* ── Hotel slider ─────────────────────────────────────────────────────────── */
/* The cards sit in a row the reader swipes rather than a column they scroll
   past. A card is the scroller's width less two peeks, so the neighbours show
   at either side and the row reads as more than one card without a hint. */
.hotel-slider {
  --hotel-peek: 20px;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  /* 19.375px section gap + 12.625px = 32px between the intro and the first
     card. The heading above keeps the design's tighter gap. */
  margin-top: 12.625px;
}
.hotel-scroller {
  width: 100%;
  overflow-x: auto;
  /* hidden rather than visible, or the browser makes this a vertical scroller too */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hotel-scroller::-webkit-scrollbar { display: none; }
/* The row takes focus so it can be scrolled from the keyboard; say so when it has it. */
.hotel-scroller:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 24px;
}
.hotel-track {
  display: flex;
  flex-direction: row;
  gap: 16px;
  /* Exactly one peek each side, so the first and last card land centred on
     their own snap point rather than against the scroller's edge. */
  padding: 0 var(--hotel-peek);
  width: max-content;
  /* Each card as tall as its own content. Stretching them to the tallest left
     a white void in the two without an illustration, which reads as a missing
     image rather than as space; tops aligned means the card's top edge holds
     still as the row moves. */
  align-items: flex-start;
}
.hotel-dots {
  display: flex;
  gap: 8px;
}
.hotel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.hotel-dot.is-active {
  background: #fff;
  transform: scale(1.25);
}
.hotel-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Hotel card */
.hotel-card {
  background: #fff;
  border-radius: 24px;
  padding: 24px;
  text-align: left;
  box-shadow: 0 0.625px 0.625px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(1.25px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* One card per screen, less the peek either side. box-sizing is border-box
     globally, so the 24px padding is inside this. */
  flex: 0 0 calc(100vw - 48px - var(--hotel-peek) * 2);
  max-width: calc(480px - var(--hotel-peek) * 2);
  scroll-snap-align: center;
}
.hotel-img {
  height: 112px;
  width: auto;
  max-width: 100%;
  display: block;
  align-self: center;
}
.hotel-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hotel-name {
  font-family: 'Gravitas One', cursive;
  font-size: 18px;
  color: #d97c55;
  font-weight: 400;
  line-height: normal;
}
.hotel-location-row {
  display: flex;
  align-items: center;
  gap: 2.5px;
}
.hotel-location-row img {
  flex-shrink: 0;
  display: inline-block;
  filter: invert(35%) sepia(30%) saturate(600%) hue-rotate(350deg) brightness(80%);
}
.hotel-location {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: bold;
  font-size: 13px;
  color: #7c563c;
  letter-spacing: 0.05px;
}
.hotel-desc {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  /* The same brown the dress-code and Recommendations paragraphs use, so the
     body copy on a hotel card reads like body copy everywhere else. It was a
     shade lighter and looked washed out beside the location line above it. */
  color: #6a4731;
  letter-spacing: 0.05px;
}
.hotel-discount {
  display: flex;
  align-items: center;
  /* Wider than it was: the label now ends in a colon, so the code needs room
     to read as the thing after it rather than as part of the sentence. */
  gap: 6px;
  flex-wrap: wrap;
}
.hotel-discount-prefix {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  color: #0f1c00;
  letter-spacing: 0.05px;
}
.hotel-code {
  font-family: Menlo, 'Courier New', monospace;
  background: rgba(80, 97, 81, 0.15);
  color: #506151;
  /* 14px, a shade above the 13px label beside it. This is the one string on
     the card a guest has to read and retype, and it was set at 8.75px —
     smaller than anything else on the page. Padding and corner grew with it. */
  font-size: 14px;
  letter-spacing: 0.3px;
  padding: 3px 8px;
  border-radius: 4px;
}
/* Metrics and type from .rsvp-cta — 12px/24px on a 999px pill — so every
   filled CTA on the page is the same button. align-self keeps it to its own
   width instead of stretching across the card. */
.hotel-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #d77852;
  color: #fff;
  border-radius: 999px;
  padding: 12px 24px;
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.05px;
  white-space: nowrap;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  align-self: flex-start;
}
/* 14px to sit with the label's 13px, matching the icon in .suggestion-btn. */
.hotel-btn img {
  width: 14px;
  height: 14px;
  filter: brightness(0) invert(1);
}
.hotel-btn:hover { background: var(--terracotta); }

/* ─────────────────────────────────────────────────────────────────────────── */
/* 8. TRANSPORT */
/* ─────────────────────────────────────────────────────────────────────────── */
#transport {
  background: var(--cream);
  padding: 64px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.transport-heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* The heading sits 24px above the first paragraph. The section's flex `gap`
     is uniform at 32px, so the 8px difference is taken back here; everything
     below the heading keeps the 32px rhythm. */
  margin-bottom: -8px;
}
.transport-label {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #6a4731;
  margin-right: -1px; /* offset the trailing letter-space so the line optically centres */
}
.transport-heading {
  font-family: 'Gravitas One', cursive;
  font-size: clamp(20px, 5.6vw, 24.5px);
  line-height: 40px;
  color: #d3704b;
  font-weight: 400;
  letter-spacing: 0.9px;
}

/* All three paragraphs share one treatment in the design. The #transport > *
   cap higher up is an id selector, so these have to be scoped to outrank it. */
#transport > .transport-body,
#transport > .transport-note {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #6a4731;
  text-align: center;
  letter-spacing: normal;
  width: 100%;
  max-width: 380px;
}

.transport-illustration {
  /* The car is near square where the old illustration was wide and low, so a
     narrower width keeps it in proportion with the section. */
  width: 160px;
  max-width: 100%;
  height: auto;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 8b. SUGGESTIONS                                                             */
/* Mirrors the transport section's heading and body treatment. It follows       */
/* transport, which is also cream, so a slightly deeper tone keeps the two      */
/* from reading as one long block.                                             */
/* ─────────────────────────────────────────────────────────────────────────── */
#suggestions {
  background: var(--sand);
  padding: 64px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
#suggestions > * {
  max-width: 480px;
  box-sizing: border-box;
  width: 100%;
}

.suggestions-heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* 24px under the heading, as the transport section uses. */
  margin-bottom: -8px;
}
.suggestions-label {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #6a4731;
  margin-right: -1px;
}
.suggestions-heading {
  font-family: 'Gravitas One', cursive;
  font-size: clamp(20px, 5.6vw, 24.5px);
  line-height: 40px;
  color: #d3704b;
  font-weight: 400;
  letter-spacing: 0.9px;
}
.suggestions-intro {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #6a4731;
  /* Same 24px inset the cards sit on, so the text shares their measure. */
  padding: 0 24px;
}

#suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* No inset: these sit on the same 480px measure as every other card on the
     page, and the intro above is inset to line up with their text. */
}

.suggestion-card {
  background: #fff;
  border-radius: 24px;
  padding: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.suggestion-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Optional per-card illustration, on the shared 90.3168px the cocktail hour
   icon uses. The card stretches its children by default, so this opts out to
   keep its own proportions, and centres over the left-aligned text. */
.suggestion-img {
  height: 90.3168px;
  width: auto;
  max-width: 100%;
  display: block;
  align-self: center;
}

.suggestion-title {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 20px;
  color: #4d3120;
}
.suggestion-desc {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #6a4731;
  margin: 0;
}
.suggestion-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.suggestion-btn-icon {
  flex-shrink: 0;
  /* the bookmark reads a touch high against the cap line */
  margin-top: 0.5px;
}

/* Metrics and type from .rsvp-cta — 12px/24px on a 999px pill — keeping the
   outlined finish this section uses rather than the filled one. */
.suggestion-btn {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 5px;
  padding: 12px 24px;
  background: none;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid #b5a295;
  box-shadow: 0 0 0 0.25px #b5a295;
  color: #714d36;
  text-decoration: none;
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.05px;
  transition: background 0.2s, color 0.2s;
}
/* Must follow .suggestion-btn: same specificity, so source order decides.
   The two that save a list are filled, in .rsvp-cta's terracotta; the one
   that opens a dialog keeps the outline. */
.suggestion-btn-save {
  background: #d77852;
  color: #fff;
  /* Transparent rather than none: the 1px stays in the box, so this sits at
     the same height as the outlined button beside it. */
  border-color: transparent;
  box-shadow: none;
}
/* Outlined buttons only. A bare .suggestion-btn:hover outranks
   .suggestion-btn-save on specificity, so hovering the filled button replaced
   its terracotta with near-white while the label stayed white — it washed out
   to almost nothing. The filled one has no hover of its own by choice. */
.suggestion-btn:not(.suggestion-btn-save):hover { background: #f7f6f2; }

/* ─────────────────────────────────────────────────────────────────────────── */
/* 9. GIFTS */
/* ─────────────────────────────────────────────────────────────────────────── */
#gifts {
  background: var(--coral);
  padding: 0;
  text-align: center;
  position: relative;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The flags hang from the section above, so they carry its colour. The SVG
   has its own fill baked in and page CSS cannot reach inside it, so the file
   is used as a mask and --sand is painted through it — the same trick as
   .maps-btn-icon. */
.gifts-deco {
  width: 100%;
  height: 59px;
  background-color: var(--sand);
  -webkit-mask: url('assets/flagswhite.svg') repeat-x left top / auto 59px;
          mask: url('assets/flagswhite.svg') repeat-x left top / auto 59px;
  display: block;
  flex-shrink: 0;
}

/* Spacing follows #suggestions: the same 64px/24px padding and 32px rhythm.
   #gifts itself keeps padding: 0 so the flags stay flush to the section's
   top edge, so the padding lives here instead. */
.gifts-inner {
  width: 100%;
  /* 528 = the 480px cap plus the two 24px gutters every section uses, so the
     cards inside land on the same measure as the other sections'. */
  max-width: 528px;
  padding: 64px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.gifts-inner > * {
  width: 100%;
}

.gifts-heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* 24px under the heading, as #suggestions and transport use. */
  margin-bottom: -8px;
}
.gifts-label {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #fff;
}
.gifts-heading {
  font-family: 'Gravitas One', cursive;
  font-size: 20px;
  color: #fff;
  font-weight: 400;
  letter-spacing: 0.5625px;
}

/* The intro sits on the coral, above the cards. */
.gifts-intro {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.05px;
  width: 100%;
  /* Same 24px inset the cards sit on, so the text shares their measure. */
  padding: 0 24px;
  box-sizing: border-box;
}
/* Payment switch — the same shape as .sunset-toggle in the hero: a pill track
   with the selected segment filled. Sitting on white, it takes --sand for the
   track where the hero's takes translucent white. */
.gifts-pay {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  /* On top of .gifts-card's 15px, so the switch reads as its own block under
     the paragraph rather than the next line of it. 24px total, the card's
     own padding. */
  margin-top: 9px;
}
.gifts-pay-switch {
  display: flex;
  gap: 0;
  background: var(--sand);
  border-radius: 999px;
  padding: 4px;
}
.gifts-pay-tab {
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 8px 18px;
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #835c41;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.gifts-pay-tab[aria-selected="true"] {
  background: #fff;
  color: var(--terracotta);
}
.gifts-pay-tab:hover:not([aria-selected="true"]) {
  color: #4d3120;
}
/* Keyboard focus only — a mouse click leaves no ring. */
.gifts-pay-tab:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}
.gifts-pay-panel {
  /* Full width rather than shrink-to-fit, so a percentage inside resolves
     against the card and not against the panel's own text. Centred either
     way, so the details read the same. */
  width: 100%;
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #6a4731;
  text-align: center;
  margin: 0;
}
.gifts-pay-panel[hidden] { display: none; }
.gifts-bank-name {
  display: block;
  font-weight: 700;
}
/* Space between the details, not inside them: a taller line-height would also
   open up the wrap in the IBAN line on a narrow card. */
.gifts-bank-line {
  display: block;
  margin-top: 6px;
}
/* 700 on what a guest copies across, leaving the label that introduces it in
   the panel's own weight. nowrap because a bold value runs the IBAN line close
   to the card's inner width, and a break belongs after the label rather than
   inside the account number. */
.gifts-bank-value {
  font-weight: 700;
  white-space: nowrap;
}
/* Sits above the link inside the panel, in the panel's own body colour, so
   the terracotta link stays the one thing the eye lands on. */
.gifts-pay-note {
  display: block;
  /* The same 20px .gifts-pay puts between the switch and the panel, so the
     three rows sit on one rhythm. */
  margin-bottom: 20px;
}
/* Metrics and type from .rsvp-cta, like every other filled CTA. It wraps
   where the others don't: the label is a sentence rather than two words,
   and the card is narrower than the button would be on one line. */
.gifts-pay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #d77852;
  color: #fff;
  border-radius: 999px;
  padding: 12px 24px;
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.05px;
  line-height: 15px;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  /* Wrap a line early rather than run the pill to the card's text edge: the
     Spanish label is long enough to do that at 390px. */
  max-width: calc(100% - 16px);
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.gifts-pay-btn:hover { background: var(--terracotta); }

@media (prefers-reduced-motion: reduce) {
  .faq-item { transition: none; }
  .faq-body { transition: none; }
  .faq-chevron { transition: none; }
  .gifts-pay-tab { transition: none; }
}

#gifts-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gifts-card {
  background: #fff;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 0.625px 0.625px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(1.25px);
  -webkit-backdrop-filter: blur(1.25px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
}

/* 1.2x the 120px of .faq-planner-img, the phone in the info & contact section. */
.gifts-img {
  height: 144px;
  width: auto;
  max-width: 100%;
  display: block;
}
/* Same type as .suggestions-intro and every other body paragraph. */
/* Explicit rather than leaning on the UA's <strong>, which is `bolder` in the
   HTML spec and would resolve against this 500 rather than landing on 700. */
.gifts-body strong { font-weight: 700; }
.gifts-body {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #6a4731;              /* .suggestions-intro's ink */
  text-align: center;
  letter-spacing: 0.05px;
  width: 100%;
  /* data-i18n writes textContent, so <br> cannot survive a language switch —
     the address carries its own newlines and this renders them. */
  white-space: pre-line;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 10. FAQ */
/* ─────────────────────────────────────────────────────────────────────────── */
#faq {
  background: var(--cream);
  /* 24px sides, as every other section uses, so the rows keep lining up with
     the RSVP card below at every viewport and not just above the 480px cap. */
  padding: 40px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19.375px;
}

.faq-heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.faq-label {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--terracotta);
}
.faq-heading {
  font-family: 'Gravitas One', cursive;
  font-size: 22px;
  color: #d3704b;
  font-weight: 400;
  letter-spacing: 0.5625px;
}

/* ── Wedding planner, between the FAQ heading and the questions ──────────── */
.faq-planner {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 32px above and below the illustration, matching the transport section. */
  gap: 32px;
  width: 100%;
  /* Same 24px inset the FAQ rows sit on, so the text shares their measure. */
  padding: 0 24px;
  text-align: center;
}
.faq-planner-img {
  height: 120px;
  width: auto;
  max-width: 100%;
  display: block;
}
.faq-planner-text {
  /* The paragraph treatment used across the site. */
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #6a4731;
  margin: 0;
}
.faq-planner-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* row gap, then the space either side of the bullet */
  gap: 4px 14px;
}
.faq-planner-sep {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
  color: var(--terracotta);
  opacity: 0.55;
}

.faq-planner-link {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: var(--terracotta);
  text-decoration: none;
  /* The address is long enough to outrun a narrow column, so let it break. */
  overflow-wrap: anywhere;
}
.faq-planner-link:hover { text-decoration: underline; }

#faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  text-align: left;
}

.faq-item {
  /* Border widths snap to whole pixels, so anything under 2px draws the same 1px
     hairline. A box-shadow ring does paint at sub-pixel width, so the spread
     below is the knob for weights in between: 0.25px measures ~1.25x the bare
     hairline, 0.5px ~1.45x. */
  border: 1px solid #b5a295;
  box-shadow: 0 0 0 0.25px #b5a295;
  /* A pill while it is one line of question; the cards' 24px once opened, where
     a 999px radius would be clamped to half the grown box and swallow the
     question's first word.
     The swap is instant on the way open and delayed on the way closed, so it
     never happens mid-movement: easing the radius while the box grew meant a
     ~700px value being clamped to half the current height every frame, and the
     corners morphed through a blob before settling. */
  border-radius: 999px;
  transition: border-radius 0s linear 0.3s;
  overflow: hidden;
  padding: 4px 0;
  width: 100%;
}
.faq-item.open {
  border-radius: 24px;
  transition: border-radius 0s;
}

.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 8px;
}
.faq-q {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #714d36;
  flex: 1;
  letter-spacing: 0.05px;
  line-height: 18px;
}
.faq-chevron {
  flex-shrink: 0;
  /* Same duration and curve as the body, so the arrow and the panel settle
     together rather than the arrow arriving first. */
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  color: #714d36;
  display: inline-flex;
}
.faq-item.open .faq-chevron { transform: rotate(180deg); }

/* Height comes from a max-height the script measures on click. A 0fr/1fr grid
   row is tidier in principle, but `fr` rows in a content-height container fall
   back to the item's minimum size, and the answers stayed half-open. Reverted
   rather than left half-working. */
.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.faq-a {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: var(--brown-mid);
  padding: 4px 16px 14px;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 11. RSVP */
/* ─────────────────────────────────────────────────────────────────────────── */
#rsvp {
  background: var(--green-deep);
  padding: 64px 24px;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.rsvp-heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.rsvp-label {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 2.1px;
  text-transform: uppercase;
  color: #fff;
}
.rsvp-heading {
  font-family: 'Gravitas One', cursive;
  font-size: 20px;
  color: #fff;
  font-weight: 400;
  letter-spacing: 0.5625px;
}
.rsvp-deadline-text {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #fff;
  text-align: center;
}
.rsvp-deadline {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #fff;
}

/* Matched to .faq-planner-img, the phone in the info & contact section, by
   area rather than height: the phone is landscape and this is portrait, so at
   a shared 120px the envelope covered a third less of the page. 148px puts
   the two illustrations within a percent of each other. */
.rsvp-illustration {
  height: 148px;
  width: auto;
  max-width: 100%;
  display: block;
}

/* Same button as .maps-btn — metrics, type and flat finish — on the
   terracotta the section's dark background needs. */
.rsvp-cta {
  display: inline-flex;
  align-items: center;
  /* The button answers the deadline line above it, so it sits 16px under it
     rather than at the section's 32px rhythm. */
  margin-top: -16px;
  gap: 5px;
  background: #d77852;
  color: #fff;
  border-radius: 999px;
  padding: 12px 24px;
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.05px;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  border: none;
  cursor: pointer;
}

/* ── Modals (RSVP form, activities) ──────────────────────────────────────── */
/* Laid out at all times and gated with visibility, so the open and the close
   both animate; a display toggle would skip the transition. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s ease, visibility 0s;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 14, 6, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.modal-panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  /* Taller than the viewport on small phones, so the panel scrolls rather
     than pushing the close button off screen. */
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--form-bg);
  border-radius: 24px;
  /* Top padding clears the close button, which is 32px tall at top: 16px. */
  padding: 56px 24px 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.25s ease;
}
.modal.open .modal-panel {
  transform: none;
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}
.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--brown-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s;
}
.modal-close:hover { background: rgba(130, 91, 64, 0.1); }
.modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  margin-bottom: 16px;
}
.modal-label {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 2.1px;
  text-transform: uppercase;
  color: #6a4731;
  margin-right: -2.1px; /* offset the trailing letter-space so the line optically centres */
}
.modal-body {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #6a4731;
  text-align: center;
  margin: 0;
}

/* ── Activities panel ─────────────────────────────────────────────────────── */
/* The intro paragraphs keep the panel's centred setting; the lists below are
   left-aligned, because centred bullets have no edge for the eye to come back
   to. */
.activities-intro {
  margin: 0 0 14px;
}
.activities-intro:last-of-type {
  margin-bottom: 2px;
}
.activities-place {
  font-family: 'Gravitas One', cursive;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.4px;
  color: #d3704b;
  /* Left, lining up with the bullets beneath it, so each place reads as the
     head of its own list rather than a caption floating over one. */
  text-align: left;
  margin: 24px 0 12px;
}
/* "about 1 hour away" — an aside under the place, not part of its name. */
.activities-note {
  display: block;
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: normal;
  color: #766f67;
  margin-top: 4px;
}
.activities-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.activities-list li {
  position: relative;
  padding-left: 16px;
  line-height: 18px;
}
/* Drawn rather than a list marker, so the dot takes the page's terracotta and
   sits on the first line however many lines the item runs to. */
.activities-list li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d3704b;
}
.modal-title {
  font-family: 'Gravitas One', cursive;
  font-size: 20px;
  color: #d3704b;
  font-weight: 400;
  letter-spacing: 0.5625px;
}

@media (prefers-reduced-motion: reduce) {
  .modal,
  .modal.open,
  .modal-panel,
  .modal.open .modal-panel {
    transition-duration: 0.01s;
    transition-delay: 0s;
  }
  .modal-panel { transform: none; }
}

/* The card used to be the form's own surface in the section. That surface is
   now the modal panel, so this is just the form's wrapper. */
#rsvp-card {
  width: 100%;
  text-align: left;
}

.rsvp-field-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 17.5px;
}
.rsvp-field-label {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.05px;
  color: #0f1c00;
}

.rsvp-input,
.rsvp-textarea {
  background: #f7f6f2;
  /* Same treatment as .faq-item: border widths snap to whole pixels, so the
     weight in between comes from a sub-pixel shadow ring. */
  border: 1px solid #766f67;
  box-shadow: 0 0 0 0.25px #766f67;
  border-radius: 8px;
  padding: 12px;
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  color: var(--brown-dark);
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.rsvp-input::placeholder,
.rsvp-textarea::placeholder {
  color: #766f67;
}
.rsvp-input:focus,
.rsvp-textarea:focus {
  border-color: var(--terracotta);
  box-shadow: 0 0 0 0.25px var(--terracotta);
  outline: none;
}
.rsvp-textarea {
  min-height: 96px;
  resize: vertical;
}


/* Pick rows — one control pattern for every choice on the form: attending or
   not, which days, and the shuttle. The native input is still the control and
   keeps its place in the tab order; it is moved out of sight rather than
   hidden with display:none, which would also take it from screen readers, and
   the sibling span is what gets drawn. So the checked state needs no
   JavaScript and no :has(), which nothing else in this stylesheet relies on. */
.rsvp-pick {
  display: block;
  cursor: pointer;
}
.rsvp-pick input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.rsvp-pick-face {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f7f6f2;
  /* Same ring as .rsvp-input, so the rows sit in the form rather than on it. */
  border: 1px solid #766f67;
  box-shadow: 0 0 0 0.25px #766f67;
  border-radius: 16.25px;
  padding: 12px 16px;
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  color: var(--brown-dark);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s;
}
/* The tick box. A pseudo-element rather than more markup: every row needs
   exactly one and it carries no text of its own. */
.rsvp-pick-face::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1px solid #766f67;
  border-radius: 4px;
  background: #fff no-repeat center;
  background-size: 11px 11px;
  transition: border-color 0.2s;
}
/* A yes/no pair sits on one line, each half taking the same width whichever
   answer is longer. min-width:0 lets them shrink below their text, or a long
   answer would push the pair wider than the card. */
.rsvp-pick-row {
  display: flex;
  gap: 12px;
}
.rsvp-pick-row .rsvp-pick {
  flex: 1 1 0;
  min-width: 0;
  /* Flex, not block, so the face below stretches to the taller of the two —
     otherwise the one-word answer sits shorter than the one that wraps. */
  display: flex;
}
.rsvp-pick-row .rsvp-pick-face {
  flex: 1;
}
/* No tick box on a yes/no: there are only two answers side by side, and the
   filled one is unmistakable. The label then has the row to itself and centres
   in it. */
.rsvp-pick-row .rsvp-pick-face {
  justify-content: center;
  text-align: center;
  padding-left: 12px;
  padding-right: 12px;
}
.rsvp-pick-row .rsvp-pick-face::before {
  display: none;
}
.rsvp-pick-label {
  /* Takes the slack so a note, where there is one, sits against the far edge. */
  flex: 1;
}
.rsvp-pick-note {
  font-style: italic;
  color: #766f67;
  text-align: right;
  flex-shrink: 0;
  transition: color 0.2s;
}
/* Chosen: white, terracotta lettering, a soft terracotta edge — the same
   treatment as the selected tab on the gifts card, rather than a solid fill. */
.rsvp-pick input:checked + .rsvp-pick-face {
  background: #fff;
  border-color: #e8beb1;
  box-shadow: 0 0 0 0.25px #e8beb1;
  color: var(--terracotta);
}
.rsvp-pick input:checked + .rsvp-pick-face::before {
  border-color: var(--terracotta);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3 4.8 8.9 9.8 3.4' fill='none' stroke='%23c65d3b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.rsvp-pick input:checked + .rsvp-pick-face .rsvp-pick-note {
  color: rgba(198, 93, 59, 0.72);
}
/* Only for keyboard users: a tap should not leave a ring behind. */
.rsvp-pick input:focus-visible + .rsvp-pick-face {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

/* Submit button */
#rsvp-submit {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  width: 100%;
  background: #d77852;
  color: #fff;
  border: none;
  border-radius: 16.25px;
  padding: 12px;
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 8px;
}
#rsvp-submit:hover { background: #d77852; }
#rsvp-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.rsvp-success {
  text-align: center;
  padding: 32px 0;
}
/* Sized off the artwork rather than a shared box: the band is a scene five
   figures wide and needs the width to be read at all, where the heart is an
   emblem and would look absurd at the same size. They never appear together. */
.rsvp-success-img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
.rsvp-success-img.is-band  { width: 240px; }
.rsvp-success-img.is-heart { width: 101px; }
.rsvp-success-text {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 18px;
  color: var(--brown-dark);
  margin-top: 12px;
}
/* Housekeeping under the thank-you rather than part of it, so it reads as a
   footnote and does not compete with the line the guest came here for. */
.rsvp-success-note {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: var(--brown-mid);
  margin: 10px auto 0;
  max-width: 34ch;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 12. ENVELOPE OVERLAY */
/* ─────────────────────────────────────────────────────────────────────────── */
#envelope-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #1c0e06;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.9s ease;
}

#envelope-overlay.dissolving {
  opacity: 0;
  pointer-events: none;
}

#envelope-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

#envelope-tap-hint {
  position: absolute;
  bottom: 14%;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: opacity 0.3s ease;
}

#envelope-tap-hint.hidden {
  opacity: 0;
  pointer-events: none;
}

.envelope-hint-text {
  font-family: 'Mooli', sans-serif;
  font-size: 12px;
  letter-spacing: 2.4px;
  text-transform: capitalize;
  color: rgba(255, 255, 255, 0.85);
  animation: hint-pulse 2s ease-in-out infinite;
}

@keyframes hint-pulse {
  0%, 100% { opacity: 0.85; }
  50%       { opacity: 0.4;  }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 13. FOOTER */
/* ─────────────────────────────────────────────────────────────────────────── */
footer#footer {
  background: url('assets/Footer.png') center center / cover no-repeat;
  padding: 39px 24px 40px;
  text-align: center;
}

.footer-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  margin: 0 auto;
}

.footer-names {
  font-family: 'Gravitas One', cursive;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.footer-name {
  font-size: 17px;
  color: #4d3120;
  letter-spacing: 3.375px;
  text-transform: uppercase;
}
.footer-amp {
  font-size: 18.75px;
  color: #be5333;
  letter-spacing: 3.75px;
}
.footer-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 1.875px;
  text-transform: uppercase;
  color: #4d3120;
  line-height: normal;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* MOBILE BREAKPOINTS */
/* ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 599px) {
  .hero-center-group { white-space: normal; padding: 0 24px; }
  /* Four units have to clear a 320px viewport, so the grid's 42px side padding
     comes down on mobile; the gap between units is what stays legible. */
  .countdown-grid    { gap: 20px; padding: 10px 12px; }
  .story-cards-track { gap: 32px; padding: 24px calc(50% - 140px) 36px; }
  .modal-panel       { padding: 56px 18px 24px; }
  /* location polaroid keeps fixed 180px width per design */

}