/* ─── DESIGN TOKENS ─────────────────────────────────────────────────────── */
:root {
  --burgundy:       #8B1A1A;
  --burgundy-dark:  #6E1414;
  --cream:          #F2EDE4;
  --cream-dark:     #EAE3D8;
  --blush:          #F5EDE8;
  --white:          #FFFFFF;
  --ink:            #2A1A0E;
  --ink-muted:      #6B5040;
  --border:         #D8CEBF;
  --border-light:   rgba(255,255,255,0.18);

  --font-display: 'Ibarra Real Nova', Georgia, serif;
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Georama', 'Montserrat', sans-serif;
  --font-ui:      'Playfair Display', Georgia, serif; /* section headings */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-silk: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ─── RESET & BASE ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

/* Hide scrollbar across all browsers while keeping scroll functionality */
html, body {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar { display: none; } /* Chrome/Safari/WebKit */

body {
  font-family: var(--font-serif);
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ─── FADE-UP ANIMATION ──────────────────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up.d1 { transition-delay: 0.12s; }
.fade-up.d2 { transition-delay: 0.24s; }
.fade-up.d3 { transition-delay: 0.38s; }
.fade-up.d4 { transition-delay: 0.52s; }

/* ─── LABEL SHARED STYLE ─────────────────────────────────────────────────── */
.label-light {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* ─── ENVELOPE OVERLAY ───────────────────────────────────────────────────── */
#envelope-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: #1a0a06;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: opacity 1.2s var(--ease-silk);
}
#envelope-overlay.dissolving { opacity: 0; pointer-events: none; }

#envelope-video {
  width: 100%; height: 100%;
  object-fit: cover;
}

#envelope-tap-hint {
  position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
  transition: opacity 0.4s;
}
#envelope-tap-hint.hidden { opacity: 0; }

.envelope-hint-text {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 1;   }
}

/* ─── NAV ────────────────────────────────────────────────────────────────── */
#site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.5rem;
  height: 56px;
  background: rgba(242,237,228,0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  pointer-events: none;
}
#site-nav.scrolled {
  opacity: 1; transform: translateY(0); pointer-events: all;
}
/* When the mobile menu is open, keep the bar visible & above the overlay so
   the burger (now an X) stays clickable; drop the bar's own background. */
#site-nav.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
  z-index: 300;
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.nav-logo {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  color: var(--burgundy);
  cursor: pointer;
  letter-spacing: 0.04em;
}

.nav-links {
  display: flex; align-items: center; gap: 1.5rem;
}
.nav-links a {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--burgundy); }
.nav-rsvp-pill {
  background: var(--burgundy);
  color: var(--white) !important;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  transition: background 0.2s !important;
}
.nav-rsvp-pill:hover { background: var(--burgundy-dark) !important; }

.nav-burger {
  display: none; flex-direction: column; gap: 4px;
  width: 20px; padding: 2px 0;
}
.nav-burger span {
  display: block; width: 100%; height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.4s var(--ease-out), opacity 0.25s ease;
}
/* Burger → cross: top/bottom bars rotate to meet, middle fades out */
#site-nav.open .nav-burger span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
#site-nav.open .nav-burger span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
#site-nav.open .nav-burger span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* Mobile nav overlay — fades + slides in */
#nav-mobile {
  position: fixed; inset: 0; z-index: 200;
  background: var(--cream);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2rem;
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
#nav-mobile.open { opacity: 1; transform: translateY(0); pointer-events: all; }

/* Menu items rise + fade in, staggered, once the overlay opens */
#nav-mobile .nav-mobile-logo,
#nav-mobile a {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
#nav-mobile.open .nav-mobile-logo,
#nav-mobile.open a {
  opacity: 1;
  transform: translateY(0);
}
#nav-mobile.open .nav-mobile-logo { transition-delay: 0.10s; }
#nav-mobile.open a:nth-of-type(1) { transition-delay: 0.16s; }
#nav-mobile.open a:nth-of-type(2) { transition-delay: 0.21s; }
#nav-mobile.open a:nth-of-type(3) { transition-delay: 0.26s; }
#nav-mobile.open a:nth-of-type(4) { transition-delay: 0.31s; }
#nav-mobile.open a:nth-of-type(5) { transition-delay: 0.36s; }
#nav-mobile.open a:nth-of-type(6) { transition-delay: 0.41s; }
#nav-mobile.open a:nth-of-type(7) { transition-delay: 0.46s; }

/* The burger itself now morphs into the X, so hide the separate close button */
.nav-mobile-close {
  display: none;
  position: absolute; top: 1.25rem; right: 1.5rem;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  color: var(--ink);
}
.nav-mobile-logo {
  font-family: var(--font-ui);
  font-size: 1.4rem; font-weight: 700;
  color: var(--burgundy);
  margin-bottom: 0.5rem;
}
#nav-mobile a {
  font-family: var(--font-sans);
  font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); cursor: pointer;
}
#nav-mobile .nav-rsvp-pill {
  background: var(--burgundy);
  color: var(--white) !important;
  padding: 0.55rem 2rem;
  border-radius: 999px;
  margin-top: 0.5rem;
}

/* ─── LANGUAGE SELECTOR ─────────────────────────────────────────────────── */
.lang-selector {
  position: relative;
  z-index: 10;
}
.lang-pill {
  display: flex; align-items: center; gap: 0.35rem;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
}
.lang-code {
  font-family: var(--font-sans);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink);
}
.lang-chevron { transition: transform 0.25s; color: var(--ink); }
.lang-selector.open .lang-chevron { transform: rotate(180deg); }

.lang-menu {
  position: absolute; top: calc(100% + 0.5rem); right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  display: none;
}
.lang-selector.open .lang-menu { display: block; }
.lang-option {
  display: block; width: 100%;
  padding: 0.55rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink); text-align: left;
  transition: background 0.15s;
}
.lang-option:hover { background: var(--cream); }
.lang-option.active { color: var(--burgundy); font-weight: 600; }

/* ─── SOUND BUTTON ───────────────────────────────────────────────────────── */
.sound-btn {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50;
  width: 44px; height: 44px;
  background: #f1d5d5;
  backdrop-filter: blur(4px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  transition: background 0.2s, transform 0.2s;
}
.sound-btn:hover { background: #e8c2c2; transform: scale(1.08); }
.sound-btn .sound-icon path,
.sound-btn .sound-icon line,
.sound-btn .sound-icon polyline { stroke: #751e1a; }
.sound-btn .sound-icon [fill="white"] { fill: #751e1a; stroke: #751e1a; }

/* ─── 1. HERO ────────────────────────────────────────────────────────────── */
#hero {
  position: relative;
  min-height: 100svh;
  background: #f0e8e0; /* fallback while images load */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
}

/* ── Background image layers ── */
#hero-day-layer,
#hero-night-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  /* transition added by JS after first paint so initial reveal is instant */
}

.hero-transitions #hero-day-layer,
.hero-transitions #hero-night-layer {
  transition: opacity 0.5s ease;
}

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

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

/* Hero transition video — sits above the bg layers, below the content */
#hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
}
#hero-video.visible { opacity: 1; }

/* All hero content sits above layers */
#hero > *:not(#hero-day-layer):not(#hero-night-layer):not(.hero-top-right-stack):not(.hero-cta):not(.hero-center-group):not(#hero-video) {
  position: relative; z-index: 2;
}

/* ── Top-right controls stack (language + toggle) ── */
.hero-top-right-stack {
  position: absolute !important;
  top: 1.25rem; right: 1.25rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

/* ── Hero CTA (bottom) ── */
.hero-cta {
  position: absolute !important;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 2;
}

/* Language selector inside hero — just relative within the stack */
.hero-top-right-stack .lang-selector {
  position: relative;
  top: auto; right: auto;
}

/* ── 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-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: #751e1a;
}
.sunset-btn:hover:not([aria-pressed="true"]) {
  background: rgba(255,255,255,0.4);
  color: #3f3830;
}

/* Night mode — lighten toggle & lang pill for dark bg */
#hero.hero-night .sunset-toggle {
  background: rgba(255,255,255,0.2);
}
#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: #751e1a;
}
#hero.hero-night .lang-pill {
  background: rgba(255,255,255,0.2);
}
#hero.hero-night .lang-code,
#hero.hero-night .lang-chevron { color: rgba(255,255,255,0.9); }

/* Night mode — text colour */
#hero.hero-night .hero-date,
#hero.hero-night .hero-location,
#hero.hero-night .hero-names,
#hero.hero-night .hero-names .hero-amp {
  color: rgba(255,255,255,0.92);
}
#hero.hero-night .hero-cta-label { color: rgba(255,255,255,0.85); }

/* Day mode explicit colour */
#hero.hero-day .hero-date,
#hero.hero-day .hero-location,
#hero.hero-day .hero-names,
#hero.hero-day .hero-names .hero-amp {
  color: #751e1a;
}
#hero.hero-day .hero-cta-label { color: #f3f2ec; }

/* Smooth text colour transition */
.hero-date, .hero-location, .hero-names { transition: color 1.2s ease; }


/* Group positioned in the upper third (Figma: centre ~32.6% from top) */
.hero-center-group {
  position: absolute;
  top: 33%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 100%;
  padding: 0 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 7vw, 26px);   /* Figma 26.25px at 375w */
}

.hero-date {
  font-family: 'Georama', sans-serif;
  font-size: clamp(8px, 2.4vw, 11px);   /* Figma 9px */
  font-weight: 400;
  letter-spacing: 0.208em;
  text-transform: uppercase;
  color: #751e1a;
  margin-bottom: 0;
}

.hero-names {
  font-family: 'Ibarra Real Nova', Georgia, serif;
  font-size: clamp(15px, 4.6vw, 24px);   /* Figma 17.3px */
  font-weight: 400;
  color: #751e1a;
  line-height: 1.25;
  letter-spacing: 0.195em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 1.8vw, 8px);   /* Figma 7px */
}
.hero-names .hero-amp {
  font-size: clamp(16px, 5vw, 26px);   /* Figma 18.75px */
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.2em;
}

.hero-location {
  font-family: 'Georama', sans-serif;
  font-size: clamp(8px, 2.4vw, 11px);   /* Figma 9px */
  font-weight: 400;
  letter-spacing: 0.208em;
  text-transform: uppercase;
  color: #751e1a;
  margin-top: 0;
}

/* .hero-cta positioning defined above in the z-index block */
.hero-cta-label {
  font-family: 'Georama', sans-serif;
  font-size: clamp(0.55rem, 2.2vw, 0.68rem);
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #f3f2ec;
  margin-bottom: 0.5rem;
}
#hero-scroll-btn {
  background: none;
  border: none;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
  cursor: pointer;
  animation: bounce 2.2s ease-in-out infinite;
}
#hero-scroll-btn img {
  display: block;
  width: 12.5px;
  height: 12.5px;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}

/* ─── 2. COUNTDOWN ───────────────────────────────────────────────────────── */
#countdown {
  background: url('assets/background2.png') center / cover no-repeat;
  padding: 40px 30px 46px;
  text-align: center;
  position: relative;
}

.countdown-inner {
  position: relative;
  max-width: 375px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* "COUNTDOWN" label — override shared .label-light for this section */
#countdown .label-light {
  font-family: 'Georama', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #3b393b;
  opacity: 1;
  margin-bottom: 0;
}

.countdown-heading {
  font-family: 'Ibarra Real Nova', Georgia, serif;
  font-size: clamp(20px, 6.4vw, 24px);
  font-weight: 400;
  color: #3b393b;
  line-height: normal;
  margin-bottom: 0;
}

/* Numbers row — soft edge fade to match Figma mask */
.countdown-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 7.2vw, 27px);
  padding: 10px clamp(24px, 11.2vw, 42px);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* The big numbers */
.countdown-number {
  font-family: 'Georama', sans-serif;
  font-size: clamp(24px, 7.9vw, 30px);
  font-weight: 900;
  color: #751e1a;
  letter-spacing: 1.2px;
  line-height: 30px;
}

/* DAYS / HOURS / MINUTES labels */
.countdown-label {
  font-family: 'Gudea', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #220200;
}

/* ─── 3. OUR STORY ───────────────────────────────────────────────────────── */
#story-track {
  background: var(--burgundy);
  position: relative;
}

#our-story {
  position: relative;
  padding: 64px 0 48px;
  overflow: hidden;
  /* Dark base so text stays readable even before bg loads */
  background: rgb(101,5,0);
}

/* background.png as visible texture on top of dark base */
#our-story::before {
  content: '';
  position: absolute; inset: 0;
  background: url('assets/background.png') center / cover no-repeat;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

/* All children above the texture */
#our-story > * { position: relative; z-index: 1; }

.story-heading-group {
  text-align: center;
  padding: 0 32px;
  margin-bottom: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* "HOW IT ALL STARTED" */
.story-label {
  font-family: 'Gudea', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  opacity: 1;
  margin-bottom: 0;
}

/* "Our story" */
#our-story h2 {
  font-family: 'Ibarra Real Nova', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.5625px;
  color: var(--white);
  line-height: normal;
}

.story-cards-wrap {
  position: relative;
  width: 100%;
}

/* Polaroid cards */
.polaroid {
  flex-shrink: 0;
  width: 280px;
  background: var(--white);
  padding: 12px;
  filter: drop-shadow(0px 4px 11.75px rgba(0,0,0,0.25));
  border-radius: 3px;
  transform: rotate(0deg);
  transition: transform 0.3s;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* First card tilted like Figma */
.polaroid:first-child  { transform: rotate(-4deg); }
.polaroid:nth-child(3) { transform: rotate(2deg); }
.polaroid:nth-child(4) { transform: rotate(-1.5deg); }

.polaroid:hover { transform: rotate(0deg) scale(1.03) !important; z-index: 2; }

/* Photo — fixed aspect ratio 256:268 */
.polaroid-img-wrap,
.polaroid > img {
  width: 100%;
  aspect-ratio: 256 / 268;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.polaroid > img {
  border-radius: 1px;
}

/* Text block — right aligned, bottom */
.polaroid-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  text-align: right;
  padding: 0;
}

/* Location: Gudea, #3b393b, 10px */
.polaroid-location {
  font-family: 'Gudea', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1.63px;
  color: #3b393b;
  line-height: normal;
}

/* Caption: Georama Black, #751e1a, 18px, tight line-height */
.polaroid-title {
  font-family: 'Georama', sans-serif;
  font-size: 18px;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.04px;
  line-height: 1.3;
  color: #751e1a;
}

/* ─── 4. LOCATION ────────────────────────────────────────────────────────── */
#location {
  background: #f1d5d5;
  padding: 64px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

/* Heading group */
.location-heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
}

/* "LOCATION" label */
.location-label {
  font-family: 'Gudea', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #3b393b;
  opacity: 1;
  margin-bottom: 0;
}

/* "Here we will celebrate" */
.location-heading {
  font-family: 'Ibarra Real Nova', Georgia, serif;
  font-size: clamp(20px, 6.4vw, 24px);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.5625px;
  line-height: 25px;
  color: #751e1a;
}

/* Card — white, specific shadow */
.location-card {
  position: relative;
  width: 271px;
  background: #ffffff;
  border-radius: 5px;
  box-shadow:
    0px 22.8px 45.7px -11px rgba(0,0,0,0.35),
    0px 7.3px 14.6px -7.3px rgba(0,0,0,0.2);
  /* overflow visible so stamp can bleed out */
  overflow: visible;
  margin-bottom: 0;
}

/* Photo */
.location-img-wrap {
  margin: 11px 15px 0;
  border-radius: 2px;
  overflow: hidden;
}
.location-img-wrap img {
  width: 100%;
  aspect-ratio: 241 / 252;
  object-fit: cover;
  display: block;
}

/* Text block below image — right-aligned */
.location-venue-row {
  padding: 8px 15px 12px 46px;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* "LONDON, ENGLAND" sub */
.location-venue-sub {
  font-family: 'Gudea', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 2.46px;
  text-transform: uppercase;
  color: #3b393b;
  line-height: normal;
}

/* "St. Paul's Cathedral" */
.location-venue-name {
  font-family: 'Georama', sans-serif;
  font-size: 18px;
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0.06px;
  line-height: 1.12;
  color: #751e1a;
}

/* Stamp — bottom-left, overflows the card */
.location-stamp {
  position: absolute;
  width: 93px;
  height: auto;
  bottom: -22px;
  left: -28px;
  pointer-events: none;
}

/* Coordinates */
.location-coords {
  font-family: 'Georama', sans-serif;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1.75px;
  text-transform: uppercase;
  color: #761f1b;
  line-height: 1;
  margin-bottom: 0;
}

/* Google Maps button */
.maps-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--white);
  border: none;
  border-radius: 47px;
  padding: 8px 12px;
  font-family: 'Gudea', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.05px;
  color: #3b393b;
  transition: background 0.2s;
}
.maps-btn:hover { background: var(--cream); }

/* ─── 5. PROGRAM ─────────────────────────────────────────────────────────── */
#program {
  background: var(--white);
  padding: 64px 32px;
  text-align: center;
  position: relative;
}

.program-inner {
  position: relative;
  width: 311px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

/* Crown — 74px wide, centered */
.program-crown {
  display: block;
  width: 74px;
  height: auto;
  flex-shrink: 0;
}

/* Heading group */
.program-heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* "Our Special Day" — Gudea, capitalize */
.program-label {
  font-family: 'Gudea', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2.4px;
  text-transform: capitalize;
  color: #3b393b;
  opacity: 1;
  margin-bottom: 0;
}

/* "Order of the day" */
.program-heading {
  font-family: 'Ibarra Real Nova', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.5625px;
  line-height: 30px;
  color: #3b393b;
  margin-bottom: 0;
}

/* Content block: heading group + timeline */
.program-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

/* Timeline container */
#program-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
  width: 100%;
}

/* Date stamp */
.program-date {
  font-family: 'Georama', sans-serif;
  font-size: 12px;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 3.5px;
  text-transform: capitalize;
  color: #751e1a;
  line-height: 12.5px;
}

/* Time */
.program-time {
  font-family: 'Georama', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6875px;
  line-height: 17.5px;
  color: #3b393b;
}

/* Event name */
.program-event {
  font-family: 'Georama', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 12.5px;
  color: #3b393b;
  text-transform: capitalize;
}

/* Divider — thin vertical line */
.program-divider {
  width: 0.625px;
  height: 12.5px;
  background: rgba(88,93,101,0.35);
  border-radius: 34px;
  margin: 0 auto;
}

/* Guard — right side, rotated */
.program-guard {
  position: absolute;
  top: 31.1%;
  right: 0;
  width: 54px;
  height: auto;
  transform: rotate(8deg);
  pointer-events: none;
}

/* Heart-UK — left side, lower, rotated */
.program-heart {
  position: absolute;
  top: 71%;
  left: -5px;
  width: 56px;
  height: auto;
  transform: rotate(-15deg);
  pointer-events: none;
}

/* ─── 6. DRESSCODE ───────────────────────────────────────────────────────── */
#dresscode {
  position: relative;
  padding: 64px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* background3.png full cover */
#dresscode::before {
  content: '';
  position: absolute; inset: 0;
  background: url('assets/background3.png') center / cover no-repeat;
  pointer-events: none;
  z-index: 0;
}
#dresscode > * { position: relative; z-index: 1; }

/* Heading group */
.dresscode-heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  margin-bottom: 0;
}

/* "What to wear" — Gudea, mixed case */
.dresscode-label {
  font-family: 'Gudea', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2.4px;
  text-transform: none;
  color: #3b393b;
  opacity: 1;
  margin-bottom: 0;
}

/* "Dresscode" — Ibarra Real Nova, red */
.dresscode-heading {
  font-family: 'Ibarra Real Nova', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.5625px;
  line-height: 30px;
  color: #751e1a;
  margin-bottom: 0;
}

/* Illustration: 245 × 152 px */
.dresscode-illustration {
  width: 245px;
  height: 152px;
  flex-shrink: 0;
  margin: 0;
}
.dresscode-illustration img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* "Black tie" — Georama Black, red, 14px */
.dresscode-tagline {
  font-family: 'Georama', sans-serif;
  font-size: 14px;
  font-weight: 900;
  color: #751e1a;
  line-height: 17.188px;
  margin-bottom: 0;
}

/* Body — Georama Regular, #3b393b, 12px */
.dresscode-body {
  font-family: 'Georama', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 17.188px;
  letter-spacing: 1px;
  color: #3b393b;
  text-align: center;
  width: 100%;
  max-width: 420px;
  margin: 0;
}

/* ─── 7. ACCOMMODATION ───────────────────────────────────────────────────── */
#accommodation {
  position: relative;
  padding: 64px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;   /* centred on all screen widths */
  gap: 24px;
  /* Dark burgundy base so text stays readable even before bg loads */
  background: rgb(101,5,0);
}

/* background5.png on top of dark base — full opacity */
#accommodation::before {
  content: '';
  position: absolute; inset: 0;
  background: url('assets/background5.png') center / cover no-repeat;
  opacity: 1;         /* let the texture show clearly */
  pointer-events: none;
  z-index: 0;
}
#accommodation > * { position: relative; z-index: 1; }

/* Heading group */
.accommodation-heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  margin-bottom: 0;
}

/* "Where to rest" */
.accommodation-label {
  font-family: 'Gudea', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2.4px;
  text-transform: none;
  color: rgba(255,255,255,0.9);
  opacity: 1;
  margin-bottom: 0;
}

/* "Accomodation" */
.accommodation-heading {
  font-family: 'Ibarra Real Nova', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.5625px;
  color: var(--white);
  line-height: normal;
}

/* Intro text */
.accommodation-intro {
  font-family: 'Georama', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.6;
  color: var(--white);
  width: 100%;
  max-width: 420px;
  text-align: center;
  white-space: pre-line;
  margin: 0;
}

/* Hotel cards list */
#accommodation-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 420px;
}

/* Hotel card */
.hotel-card {
  background: var(--white);
  backdrop-filter: blur(1.25px);
  border-radius: 18px;
  padding: 24px;
  text-align: left;
  box-shadow: 0px 0.625px 0.625px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Info block */
.hotel-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Hotel name: Georama Black, #751e1a, 20px */
.hotel-name {
  font-family: 'Georama', sans-serif;
  font-size: 20px;
  font-weight: 900;
  color: #751e1a;
  line-height: normal;
}

/* Location row */
.hotel-location {
  display: flex;
  align-items: center;
  gap: 2.5px;
  font-family: 'Georama', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 17.344px;
  color: #050018;
}
.hotel-location-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* Description */
.hotel-desc {
  font-family: 'Georama', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: normal;
  color: #050018;
}

/* Discount code row */
.hotel-code {
  display: flex;
  align-items: center;
  gap: 2.5px;
  font-family: 'Georama', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 17.344px;
  color: #3b393b;
  flex-wrap: wrap;
}
.hotel-code code {
  display: inline-flex;
  align-items: center;
  background: #3b393b;
  color: #fffcf8;
  font-family: 'Menlo', 'Courier New', monospace;
  font-size: 10px;
  font-weight: 400;
  padding: 4px 8px;
  border-radius: 2.5px;
  letter-spacing: 0;
  line-height: 12.5px;
  white-space: nowrap;
}

/* "View hotel" button: blush bg, Gudea, 14px */
.hotel-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 5px;
  background: #f1d5d5;
  border: none;
  border-radius: 17px;
  padding: 8px 12px;
  font-family: 'Gudea', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.05px;
  line-height: 17.344px;
  color: #3b393b;
  transition: background 0.2s;
  text-decoration: none;
  cursor: pointer;
}
.hotel-btn:hover { background: #e8c2c2; }
.hotel-btn-icon { width: 16px; height: 16px; flex-shrink: 0; }

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

/* Bus illustration — 100 × 64 px */
.transport-illustration {
  display: block;
  width: 100px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Heading group */
.transport-heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 0;
}

/* "Getting there" — Gudea, capitalize */
.transport-label {
  font-family: 'Gudea', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2.4px;
  text-transform: capitalize;
  color: #3b393b;
  opacity: 1;
  margin-bottom: 0;
}

/* "Transport" — Ibarra Real Nova, red */
.transport-heading {
  font-family: 'Ibarra Real Nova', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  font-style: normal;
  color: #751e1a;
  line-height: normal;
  margin-bottom: 0;
}

/* Body paragraphs — both identical styling */
.transport-body,
.transport-note {
  font-family: 'Georama', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: normal;
  color: #3b393b;
  text-align: center;
  font-style: normal;
  width: 100%;
  max-width: 420px;
  margin: 0;
}

/* ─── 9. GIFTS ───────────────────────────────────────────────────────────── */
#gifts {
  background: #f1d5d5;
  padding: 20px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

/* Teapots row — tiles horizontally so it continues on wider screens */
.gifts-teapots {
  display: block;
  width: 100%;
  height: 30px;
  background: url('assets/teapots.png') repeat-x center / auto 30px;
  flex-shrink: 0;
  margin: 0;
}

/* No inner wrapper needed — section is flex */
.gifts-inner { width: 100%; display: contents; }

/* Heading group */
.gifts-heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 0;
}

/* "A thoughtful gesture" — Georama Regular, lowercase */
.gifts-label {
  font-family: 'Georama', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2.4px;
  text-transform: none;
  color: #3b393b;
  opacity: 1;
  margin-bottom: 0;
}

/* "Gifts" — Ibarra Real Nova, red, NOT italic */
.gifts-heading {
  font-family: 'Ibarra Real Nova', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  font-style: normal;
  color: #751e1a;
  line-height: normal;
  margin-bottom: 0;
}

/* White card */
.gifts-card {
  background: var(--white);
  backdrop-filter: blur(1.25px);
  border-radius: 18px;
  padding: 24px;
  text-align: left;
  box-shadow: 0px 0.625px 0.625px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
  max-width: 420px;
}

/* Message text */
.gifts-message {
  font-family: 'Georama', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 17.344px;
  color: #3b393b;
  width: 100%;
  margin: 0;
}

/* Accordion list container */
#gifts-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* Accordion items (gifts + faq) */
.accordion-item {
  border: 0.625px solid #3b393b;
  border-radius: 12px;
  overflow: hidden;
}
.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  background: rgba(255,255,255,0.6);
  font-family: 'Georama', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 17.344px;
  color: #3b393b;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.accordion-trigger:hover { background: rgba(255,255,255,0.85); }

.faq-chevron {
  width: 16px; height: 16px;
  transition: transform 0.3s var(--ease-out);
  flex-shrink: 0;
}
.accordion-item.open .faq-chevron { transform: rotate(180deg); }

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease-silk);
}
.accordion-body p {
  padding: 0 16px 12px;
  font-family: 'Georama', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 17.344px;
  color: #3b393b;
  white-space: pre-line;
}

/* ─── 10. FAQ ────────────────────────────────────────────────────────────── */
#faq {
  background: var(--white);
  padding: 64px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Heading group */
.faq-heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: center;
  margin-bottom: 0;
}

/* "Frequently asked" — Gudea, capitalize */
.faq-label {
  font-family: 'Gudea', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2.4px;
  text-transform: capitalize;
  color: #3b393b;
  opacity: 1;
  margin-bottom: 0;
}

/* "Some important info" — Ibarra Real Nova, red */
.faq-heading {
  font-family: 'Ibarra Real Nova', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  font-style: normal;
  color: #751e1a;
  line-height: normal;
  margin-bottom: 0;
}

/* FAQ list — same max-width as the RSVP card */
#faq-list {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ─── 11. RSVP ───────────────────────────────────────────────────────────── */
#rsvp {
  position: relative;
  padding: 64px 32px 80px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  /* background6.png at 100% opacity */
  background: url('assets/background6.png') center / cover no-repeat;
}

/* Header group */
.rsvp-header-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 0;
  position: relative;
}

/* Label + "RSVP" heading — 12px apart */
.rsvp-heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* "we would love you to be there" — Gudea, capitalize */
.rsvp-label {
  font-family: 'Gudea', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2.4px;
  text-transform: capitalize;
  color: rgba(255,255,255,0.9);
  opacity: 1;
  margin-bottom: 0;
}

/* "RSVP" — Ibarra Real Nova, white */
.rsvp-heading {
  font-family: 'Ibarra Real Nova', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.5625px;
  color: var(--white);
  line-height: normal;
}

/* Deadline text */
.rsvp-deadline-text {
  font-family: 'Georama', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 17.344px;
  color: var(--white);
  text-align: center;
  margin-top: 0;
}
.rsvp-deadline { color: var(--white); font-weight: 400; }

/* Form card — #f9f8f5, 18px radius */
#rsvp-card {
  background: #f9f8f5;
  border: 0.625px solid #f9f8f5;
  backdrop-filter: blur(1.25px);
  border-radius: 18px;
  padding: 24px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  text-align: left;
  box-shadow: 0px 0.625px 0.625px rgba(0,0,0,0.05);
}

/* Form fields — 17.5px gap */
.rsvp-field-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 17.5px;
}

/* Field labels — Georama, #3b393b, 10px, 1px tracking */
.rsvp-field-label {
  font-family: 'Georama', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #3b393b;
  margin-bottom: 0;
}

/* Inputs — #f7f6f2 bg, dark-red border */
.rsvp-input, .rsvp-textarea {
  border: 0.625px solid #530b07;
  border-radius: 8px;
  padding: 12px;
  font-family: 'Georama', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #3b393b;
  background: #f7f6f2;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}
.rsvp-input::placeholder, .rsvp-textarea::placeholder {
  color: #530b07;
}
.rsvp-input:focus, .rsvp-textarea:focus {
  border-color: #751e1a;
}
.rsvp-textarea { min-height: 50px; resize: vertical; }

/* Radio buttons */
.rsvp-radio-row {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.rsvp-radio-option {
  display: flex; align-items: center; gap: 5px;
  font-family: 'Georama', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #3b393b;
  cursor: pointer;
}
.rsvp-radio-option input { accent-color: #530b07; }

/* Companions desc */
.rsvp-companions-desc {
  font-family: 'Georama', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: normal;
  color: #3b393b;
  margin-bottom: 0;
}

/* Companion add buttons — #f7f6f2, dark border, 23px radius */
/* Empty companion containers shouldn't add extra flex gaps */
#companion-counter:empty,
#companion-list:empty { display: none; }

.rsvp-add-btns { display: flex; gap: 7.5px; margin-top: 0; }
.rsvp-add-btn {
  background: #f7f6f2;
  border: 0.625px solid #3b393b;
  border-radius: 23px;
  padding: 8px 12px;
  font-family: 'Georama', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #3b393b;
  transition: background 0.15s;
}
.rsvp-add-btn:hover { background: #ede9e3; }

/* Checkbox row */
.rsvp-checkbox-row {
  display: flex; align-items: center; gap: 7.5px;
  font-family: 'Georama', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #3b393b;
  cursor: pointer;
}
.rsvp-checkbox-row input { accent-color: #530b07; }

/* Companion cards */
.companion-card {
  background: #f7f6f2;
  border: 0.625px solid #3b393b;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.companion-card-header {
  display: flex; align-items: center; justify-content: space-between;
}
.companion-card-label {
  display: flex; align-items: center; gap: 5px;
  font-family: 'Georama', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #3b393b;
}
.companion-icon { width: 16px; height: 16px; }
.trash-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background 0.15s;
}
.trash-btn:hover { background: rgba(59,57,59,0.1); }

/* Submit button — #f1d5d5 blush, 16.25px radius */
#rsvp-submit {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%;
  background: #f1d5d5;
  color: #3b393b;
  padding: 12px;
  border-radius: 16.25px;
  font-family: 'Georama', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: none;
  transition: background 0.2s;
  margin-top: 0;
}
#rsvp-submit img { width: 12px; height: 12px; filter: brightness(0) saturate(100%); }
#rsvp-submit:hover { background: #e8c2c2; }
#rsvp-submit:disabled { opacity: 0.6; pointer-events: none; }

/* RSVP success state */
.rsvp-success {
  text-align: center;
  padding: 2rem 1rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.rsvp-success-icon { width: 56px; height: 56px; }
.rsvp-success-title {
  font-family: 'Ibarra Real Nova', Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  color: #3b393b;
  max-width: 260px;
  line-height: 1.4;
}
.rsvp-success-body {
  font-family: 'Georama', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 17.344px;
  color: #3b393b;
  max-width: 260px;
}

/* ─── 12. FOOTER ─────────────────────────────────────────────────────────── */
#footer {
  position: relative;
  background: url('assets/background7.png') center / cover no-repeat;
  padding: 38px 32px;
  min-height: 150px;
  overflow: hidden;
}

/* Big Ben — absolute on the left (native #670803 line art) */
.footer-bigben {
  position: absolute;
  left: 32px;
  top: 10px;
  width: 36px;
  height: auto;
  flex-shrink: 0;
}

/* Centered content (names + meta) */
.footer-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13.125px;
}
.footer-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13.125px;
}

/* Names row — Ibarra Real Nova */
.footer-names {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: center;
}
.footer-name {
  font-family: 'Ibarra Real Nova', Georgia, serif;
  font-size: 17.3px;
  font-weight: 400;
  letter-spacing: 3.375px;
  text-transform: uppercase;
  line-height: 21.563px;
  color: #670803;
}
.footer-amp {
  font-family: 'Ibarra Real Nova', Georgia, serif;
  font-size: 18.75px;
  font-weight: 400;
  letter-spacing: 3.75px;
  line-height: 21.563px;
  color: #3b393b;
  margin: 0;
}

/* Date + location — Georama */
.footer-meta {
  font-family: 'Georama', sans-serif;
  font-size: 7.125px;
  font-weight: 400;
  letter-spacing: 1.875px;
  line-height: 10px;
  text-transform: capitalize;
  text-align: center;
  color: #3b393b;
  margin-top: 0;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }

  .countdown-grid { gap: 2rem; }

  .location-card { max-width: 90%; }
}

@media (min-width: 601px) {
  .nav-burger { display: none; }
}