@font-face {
  font-family: "Restoe Bumi";
  src: url("/assets/fonts/restoe-bumi.30b1e876fe25.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Adam & Tory — Wedding Website
   Design system extracted from the mockups:
   navy + warm gold on ivory, blush florals, glassmorphism cards,
   elegant serif + script typography.
   ========================================================================== */

:root {
  /* Color */
  --navy: #23457a;
  --navy-deep: #172c4f;
  --teal: #4e8d80;
  --gold: #b08d3e;
  --gold-text: #5b450e;
  --gold-text-home: #a36300;
  --gold-soft: #c9a35c;
  --gold-pale: #e6d3a8;
  --ivory: #fbf7ee;
  --cream: #f6ecdd;
  --blush: #f2cdd3;
  --sage: #a3b78e;
  --ink: #2c3547;

  /* Surfaces */
  --glass: rgba(255, 253, 248, 0.72);
  --glass-strong: rgba(255, 253, 248, 0.9);
  --shadow-soft: 0 10px 34px rgba(35, 69, 122, 0.12);
  --shadow-lift: 0 16px 44px rgba(35, 69, 122, 0.18);

  /* Shape & spacing */
  --radius: 18px;
  --radius-sm: 10px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  /* Type */
  --font-script: "Great Vibes", cursive;
  --font-title: "Restoe Bumi", var(--font-script);
  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-body: "EB Garamond", Garamond, Georgia, serif;
}

/* ---------- Reset & base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.075rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Invitation-aware public/private presentation ---------- */

.invitation-state-pending [data-invitation-private],
.invitation-state-public [data-invitation-private],
.invitation-state-pending [data-invitation-public],
.invitation-state-private [data-invitation-public],
.invitation-state-pending [data-add-calendar],
.invitation-state-public [data-add-calendar] {
  display: none !important;
}

.private-action-placeholder {
  cursor: default;
  pointer-events: none;
}

.invitation-private-faq {
  display: grid;
  gap: var(--space-2);
}

.invitation-state-public .teaser {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
}

.invitation-state-public .teaser p,
.invitation-state-public .teaser-link {
  grid-column: 2;
}

.invitation-state-public .teaser-link {
  justify-self: start;
  margin-left: 0;
}

img, svg { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-body);
  color: var(--navy);
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  font-weight: 600;
}

p { margin: 0 0 var(--space-2); }

a { color: var(--navy); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 200;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

.container {
  width: min(1160px, 100% - 2.5rem);
  margin-inline: auto;
}

/* ---------- Typographic utilities ---------- */

.script {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--navy);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.page-title {
  font-family: var(--font-title);
  font-size: clamp(3.7rem, 9cqw, 6.2rem);
  font-weight: 600;
  font-synthesis: weight;
  -webkit-text-stroke: 0.1px currentColor;
  text-align: center;
  margin-bottom: var(--space-1);
}

.page-sub {
  text-align: center;
  font-style: italic;
  color: var(--navy);
  font-size: 1.15rem;
  max-width: 34rem;
  margin-inline: auto;
}

/* Ornamental divider — line ✦ line */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: var(--space-2) auto;
  color: var(--gold);
}
.divider::before, .divider::after {
  content: "";
  height: 1px;
  width: clamp(48px, 12cqw, 120px);
  background: linear-gradient(90deg, transparent, var(--gold-soft));
}
.divider::after { background: linear-gradient(270deg, transparent, var(--gold-soft)); }
.divider .star { font-size: 0.9rem; letter-spacing: 0.4em; }

.img-divider--intro { margin: 0.6rem auto 1rem; }
.section--no-top-padding { padding-top: 0; }
.section--compact-top { padding-top: var(--space-4); }
.layout-stack { display: grid; gap: var(--space-4); }
.flush { margin: 0; }
.return-home-action { margin-top: var(--space-3); }
.hero-ctas--flush { margin: 0; }
.divider--start { justify-content: flex-start; margin-left: 0; }

.event-title {
  font-size: clamp(1.7rem, 4cqw, 2.2rem);
  letter-spacing: 0.06em;
}

.event-summary-eyebrow { margin-bottom: 0; }
.event-summary-title {
  margin-bottom: 0.1rem;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.event-summary-date {
  margin: 0 0 0.15rem;
  color: var(--gold-pale);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.faq-question { margin: 0; }
.faq-contact { margin-top: var(--space-4); text-align: center; }
.faq-contact__prompt { margin-bottom: var(--space-1); }
.faq-contact__eyebrow { margin-bottom: var(--space-2); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-3);
  align-items: start;
}
.card-grid--stretch { align-items: stretch; }
.section-header--flush { margin-bottom: 0; }
#travel.section-header--flush { scroll-margin-top: 90px; }
.venue-overview-title { font-size: 1.7rem; letter-spacing: 0.04em; }
.section-title--travel { font-size: clamp(1.9rem, 4.5cqw, 2.6rem); }
.section-title--local { font-size: clamp(1.7rem, 4cqw, 2.3rem); }
.venue-card-title { font-size: 1.4rem; letter-spacing: 0.05em; }
.room-note { margin-top: var(--space-2); font-size: 0.95rem; }
.room-details { font-size: 0.95rem; }
.room-terms { margin-bottom: 0; font-size: 0.9rem; }
.hotel-list { display: grid; gap: var(--space-2); }
.hotel-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: 1rem 1.1rem;
  background: rgba(251, 247, 238, 0.68);
}
.hotel-option__title { margin-bottom: 0.1rem; font-size: 1.1rem; }
.hotel-option__detail { margin: 0; font-size: 0.95rem; }
.hotel-option__link { margin-left: auto; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.btn .arrow { transition: transform 0.25s ease; }
.btn:hover .arrow { transform: translateX(4px); }

.btn-navy {
  background: linear-gradient(180deg, var(--navy), var(--navy-deep));
  color: #fdf9ef;
  border-color: var(--gold-soft);
  box-shadow: 0 0 0 3px rgba(201, 163, 92, 0.18), var(--shadow-soft);
}
.btn-navy:hover { transform: translateY(-2px); box-shadow: 0 0 0 3px rgba(201, 163, 92, 0.3), var(--shadow-lift); }

.btn-gold {
  background: linear-gradient(180deg, #caa459, #ab8433);
  color: #fffaf0;
  box-shadow: var(--shadow-soft);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.btn-outline {
  background: var(--glass-strong);
  color: var(--navy);
  border-color: var(--gold-soft);
}
.btn-outline:hover { transform: translateY(-2px); background: #fff; box-shadow: var(--shadow-soft); }

.btn-quiet {
  background: transparent;
  color: var(--navy);
  border-color: rgba(35, 69, 122, 0.35);
}
.btn-quiet:hover { border-color: var(--navy); background: rgba(255, 255, 255, 0.6); }

/* ---------- Header / navigation ---------- */

html {
  scroll-padding-top: 6.5rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 247, 238, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(176, 141, 62, 0.18);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.7rem 0;
}

.monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #2d5290, var(--navy-deep) 72%);
  border: 2px solid var(--gold-soft);
  box-shadow: 0 4px 14px rgba(23, 44, 79, 0.35);
  color: var(--gold-pale);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  flex-shrink: 0;
}
.monogram svg { width: 34px; height: 34px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2.4cqw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  padding: 0.4rem 0.1rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.nav-links a:hover { color: var(--gold); }
.nav-links a[aria-current="page"] {
  color: var(--navy);
  border-bottom-color: var(--gold);
}

.nav-cta { flex-shrink: 0; }
.nav-cta .btn { padding: 0.65rem 1.2rem; font-size: 0.82rem; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--gold);
  margin: 6px 0;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Scenic hero ---------- */

.scene {
  position: relative;
  isolation: isolate;
  background: var(--ivory);
  overflow: hidden;
}
.scene-art::before,
.scene-art::after {
  content: "";
  position: absolute;
  width: clamp(160px, 24cqw, 320px);
  aspect-ratio: 1;
  background: url("/assets/top-left-floral.d94e3ac6ad21.webp") no-repeat top left / contain;
  z-index: 3;
  pointer-events: none;
}
.scene-art::before { top: 0; left: 0; }
.scene-art::after { top: 0; right: 0; background-image: url("/assets/top-right-floral-v2.c2b9163cebe7.webp"); background-position: top right; }

.scene-art {
  position: relative;
  z-index: 0;
}
.scene-art img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 calc(100% - var(--img-fade, 18) * 1%), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 calc(100% - var(--img-fade, 18) * 1%), transparent 100%);
}


/* ---------- Home hero specifics ---------- */

.hero-names {
  font-family: var(--font-title);
  font-size: clamp(4rem, 11cqw, 7.5rem);
  color: var(--navy);
  margin: var(--space-2) 0 0;
  font-weight: 600;
  font-synthesis: weight;
  -webkit-text-stroke: 0.1px currentColor;
}

.hero-tagline {
  font-family: var(--font-display);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  font-size: clamp(0.85rem, 2.4cqw, 1.15rem);
  margin: var(--space-1) 0 var(--space-3);
}

.hero-dates {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: clamp(1.2rem, 5cqw, 3rem);
  margin-bottom: var(--space-3);
}
.hero-date { text-align: center; }
.hero-date .day {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.5cqw, 3rem);
  letter-spacing: 0.14em;
  color: var(--navy);
  font-weight: 600;
}
.hero-date .label {
  font-family: var(--font-display);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  font-size: 0.95rem;
}
.hero-dates .sep {
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold-soft), transparent);
}

.hero-venue {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  font-size: clamp(1rem, 2.8cqw, 1.35rem);
  margin-bottom: 0.2rem;
}
.hero-venue-sub {
  font-family: var(--font-display);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: var(--space-3);
}

/* Countdown */
.countdown {
  display: inline-flex;
  align-items: stretch;
  gap: clamp(0.8rem, 3cqw, 1.8rem);
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 163, 92, 0.35);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.1rem clamp(1.2rem, 4cqw, 2.4rem);
  margin-bottom: var(--space-3);
}
.count-unit { text-align: center; min-width: 3.2rem; }
.count-unit .num {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5cqw, 2.7rem);
  font-weight: 600;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.count-unit .unit {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.countdown .sep {
  flex: 0 0 1px;
  min-width: 1px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold-soft), transparent);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Teaser bar (registry strip) */
.teaser {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-align: left;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 163, 92, 0.3);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: var(--space-2) var(--space-3);
}
.teaser-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fdf6e7;
  border: 1px solid var(--gold-pale);
  display: grid;
  place-items: center;
  color: var(--gold);
  flex-shrink: 0;
}
.teaser p { margin: 0; }
.teaser strong { color: var(--navy); font-family: var(--font-display); font-size: 1.1rem; }
.teaser-link {
  margin-left: auto;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.88rem;
  text-decoration: none;
  color: var(--navy);
}
.teaser-link:hover { color: var(--gold); }

/* ---------- Sections & cards ---------- */

.section { padding: var(--space-5) 0; }
.section-header { text-align: center; margin-bottom: var(--space-4); }

.card {
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 163, 92, 0.28);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: var(--space-3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
a.card { text-decoration: none; display: block; color: inherit; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card--static:hover { transform: none; box-shadow: var(--shadow-soft); }


.icon-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-soft);
  display: grid;
  place-items: center;
  color: var(--gold);
  margin-bottom: var(--space-2);
  background: rgba(255, 252, 244, 0.8);
}

.meta {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  margin-bottom: 0.7rem;
}
.meta svg { flex-shrink: 0; margin-top: 0.28rem; color: var(--gold); }

.tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--navy);
  border: 1px solid rgba(35, 69, 122, 0.4);
  border-radius: 999px;
  padding: 0.28rem 0.9rem;
  margin-bottom: var(--space-1);
}
.tag--gold { color: var(--gold); border-color: rgba(176, 141, 62, 0.5); background: #fdf6e7; }

/* Event feature rows */
.event-card {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-3);
  overflow: hidden;
  padding: 0;
}
.event-media {
  min-height: 260px;
  border-radius: var(--radius) 0 0 var(--radius);
  position: relative;
  overflow: hidden;
}
.event-media-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media--holud .event-media-image { object-position: 68% center; }
.media--wedding .event-media-image { object-position: center; }
.event-media .media-label {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;
  padding: 1.8rem 1rem 0.6rem;
  font-family: var(--font-script);
  font-size: 2rem;
  color: #fffaf0;
  background: linear-gradient(180deg, transparent, rgba(22, 18, 14, 0.45));
  text-shadow: 0 2px 10px rgba(60, 40, 0, 0.55);
}
.media--holud {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 246, 214, 0.9), transparent 45%),
    radial-gradient(circle at 75% 70%, rgba(255, 214, 128, 0.65), transparent 55%),
    linear-gradient(160deg, #e9b84d, #c68a2e 60%, #a86f1f);
}
.media--wedding {
  background:
    radial-gradient(circle at 65% 20%, rgba(255, 251, 240, 0.85), transparent 50%),
    radial-gradient(circle at 25% 80%, rgba(214, 226, 255, 0.5), transparent 55%),
    linear-gradient(160deg, #dfe7f4, #9fb4d8 55%, #5f7bab);
}
.media--holud::after,
.media--wedding::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 250, 235, 0.55);
  border-radius: calc(var(--radius) - 6px);
  z-index: 1;
}
.event-body { padding: var(--space-3) var(--space-3) var(--space-3) 0; }

.event-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin: var(--space-2) 0;
}

.dress-code {
  border-left: 1px solid rgba(201, 163, 92, 0.4);
  padding-left: var(--space-3);
}

/* ---------- Info strips / detail rows ---------- */

.fact-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-3);
}
.fact {
  flex: 1 1 140px;
  border-left: 1px solid rgba(201, 163, 92, 0.4);
  padding-left: var(--space-2);
}
.fact .fact-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.74rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-text);
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.fact .fact-value { font-family: var(--font-display); font-size: 1.1rem; color: var(--navy); font-weight: 600; }

/* Map card */
.map-card { padding: 0; overflow: hidden; }
.map-caption { padding: var(--space-2) var(--space-3); text-align: center; }

/* ---------- FAQ accordion ---------- */

.accordion { display: grid; gap: var(--space-2); max-width: 800px; margin-inline: auto; }

.acc-item {
  background: var(--glass);
  border: 1px solid rgba(201, 163, 92, 0.3);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 1.1rem 1.3rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy);
}
.acc-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-soft);
  color: var(--gold);
  display: grid;
  place-items: center;
  position: relative;
}
.acc-icon::before, .acc-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.3s ease;
}
.acc-icon::before { width: 12px; height: 1.5px; }
.acc-icon::after { width: 1.5px; height: 12px; }
.acc-item[data-open="true"] .acc-icon::after { transform: scaleY(0); }
.acc-chevron { margin-left: auto; color: var(--gold); transition: transform 0.3s ease; flex-shrink: 0; }
.acc-item[data-open="true"] .acc-chevron { transform: rotate(180deg); }

.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.acc-item[data-open="true"] .acc-panel { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-panel p { padding: 0 1.3rem 1.2rem 4rem; margin: 0; }

/* ---------- Forms ---------- */

.form-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-3);
  align-items: start;
}

.field { margin-bottom: var(--space-3); }
.field label,
.field .group-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--navy);
  margin-bottom: 0.45rem;
}
.req { color: var(--gold); }
.hint { font-size: 0.92rem; color: #6b7280; margin-top: -0.2rem; margin-bottom: 0.5rem; }

input[type="text"],
input[type="email"],
select,
textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.02rem;
  color: var(--ink);
  background: #fffdf8;
  border: 1px solid rgba(176, 141, 62, 0.45);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input::placeholder, textarea::placeholder { color: #9aa1ad; font-style: italic; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(35, 69, 122, 0.12);
}
textarea { resize: vertical; min-height: 120px; }

.field-error {
  display: none;
  color: #a63d3d;
  font-size: 0.9rem;
  margin-top: 0.35rem;
}
.field.invalid .field-error { display: block; }
.field.invalid input, .field.invalid select { border-color: #b96a6a; }
.field.invalid .choice { border-color: #b96a6a; }

/* Radio pills */
.choice-row { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid rgba(176, 141, 62, 0.45);
  border-radius: var(--radius-sm);
  background: #fffdf8;
  padding: 0.7rem 1.1rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice .dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-soft);
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}
.choice input:checked + .dot { border-color: var(--navy); }
.choice input:checked + .dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--navy);
}
.choice:has(input:checked) {
  border-color: var(--navy);
  background: #f3f0e6;
  box-shadow: 0 0 0 3px rgba(35, 69, 122, 0.08);
}
.choice input:focus-visible ~ .dot { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Yes / No segmented toggle */
.segment {
  display: inline-flex;
  border: 1px solid rgba(176, 141, 62, 0.5);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fffdf8;
}
.segment label {
  position: relative;
  padding: 0.7rem 2.2rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy);
  margin: 0;
}
.segment input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segment label:has(input:checked) {
  background: linear-gradient(180deg, var(--navy), var(--navy-deep));
  color: #fdf9ef;
}
.segment label:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: -2px; }

.char-count { text-align: right; font-size: 0.85rem; color: #9aa1ad; margin-top: 0.3rem; }

/* Submission error banner */
#rsvp-error {
  display: block;
  color: #8f3131;
  background: #fbecec;
  border: 1px solid #dba8a8;
  border-radius: var(--radius-sm);
  padding: 0.8rem 1.1rem;
  margin: 0 0 var(--space-3);
}
#rsvp-error[hidden] { display: none; }

/* Success state */
.form-success {
  display: none;
  text-align: center;
  padding: var(--space-5) var(--space-3);
}
.form-success.visible { display: block; }
.form-success .icon-badge { margin-inline: auto; width: 72px; height: 72px; }

/* Side card on RSVP */
.side-card {
  border: 1px solid var(--gold-pale);
  border-radius: var(--radius);
  background: var(--glass-strong);
  box-shadow: var(--shadow-soft);
  padding: var(--space-3);
  text-align: center;
  position: relative;
}
.side-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(201, 163, 92, 0.4);
  border-radius: calc(var(--radius) - 8px);
  pointer-events: none;
}
.side-card h3 { margin-bottom: 0.2rem; }
.side-card .script { font-size: 2rem; display: block; }
.side-item {
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(201, 163, 92, 0.3);
}
.side-item:last-child { border-bottom: none; }
.side-item .icon-badge { width: 44px; height: 44px; margin: 0 auto var(--space-1); }

/* ---------- Footer ---------- */

.site-footer {
  margin-top: var(--space-5);
  background: linear-gradient(180deg, var(--cream), #efe2ce);
  border-top: 1px solid rgba(176, 141, 62, 0.25);
  text-align: center;
  padding: var(--space-4) 0 var(--space-3);
}

/* ---------- Reveal animation ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.reveal--settled { transition: none; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .card { transition: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 920px) {
  .event-card { grid-template-columns: 1fr; }
  .event-media { border-radius: var(--radius) var(--radius) 0 0; min-height: 200px; }
  .event-body { padding: 0 var(--space-3) var(--space-3); }
  .form-shell { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav-bar { position: relative; justify-content: center; }
  .monogram { margin-inline: auto; }
  .nav-toggle { display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
  .nav-cta { display: none; }
  .nav-links {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: center;
    gap: 0;
    background: rgba(251, 247, 238, 0.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(176, 141, 62, 0.25);
    box-shadow: var(--shadow-soft);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }
  .nav-open .nav-links { max-height: 480px; }
  .nav-links li { width: 100%; text-align: center; }
  .nav-links a { display: block; padding: 0.9rem 0; border-bottom: none; }
  .nav-links a[aria-current="page"] { color: var(--gold); }
  .nav-links .nav-cta-mobile { padding: 0.9rem 0 1.2rem; }
  .nav-links .nav-cta-mobile .btn { padding: 0.65rem 1.4rem; font-size: 0.8rem; }

  .scene-art::before, .scene-art::after { width: 110px; opacity: 0.9; }
  .event-columns { grid-template-columns: 1fr; }
  .dress-code { border-left: none; border-top: 1px solid rgba(201, 163, 92, 0.4); padding: var(--space-2) 0 0; }
  .teaser { flex-wrap: wrap; }
  .teaser-link { margin-left: 68px; }
  .countdown { width: 100%; justify-content: space-between; }
  .acc-panel p { padding-left: 1.3rem; }
  .section { padding: var(--space-4) 0; }
}

@media (min-width: 761px) {
  .nav-links .nav-cta-mobile { display: none; }
}

/* ==========================================================================
   v3 — invitation hero helpers, trio strip, navy footer
   ========================================================================== */

/* Invitation wording */


/* Trio icon strip (Venue / Travel / RSVP) */
@media (max-width: 760px) {
}

/* Navy torn-edge footer */
.site-footer {
  position: relative;
  margin-top: calc(var(--space-5) + 40px);
  background: linear-gradient(180deg, #1b3560 0%, #12233f 100%);
  border-top: none;
  color: var(--gold-pale);
  text-align: center;
  padding: var(--space-4) 0 var(--space-3);
}
.site-footer .footer-mono { color: var(--gold-pale); }
.site-footer .footer-mono .amp { color: var(--gold-soft); }
.site-footer .footer-meta { color: var(--gold-soft); }
.site-footer .footer-links a { color: var(--gold-pale); }
.site-footer .footer-links a:hover { color: #ffffff; }
.site-footer .footer-note { color: rgba(230, 211, 168, 0.75); }

/* Image dividers (couple's assets) — rescued from retired v4 layout */
.img-divider { display: block; margin: 0 auto; width: clamp(120px, calc(var(--vwc) * 22), 520px); height: auto; }
.img-divider--sm { width: clamp(80px, calc(var(--vwc) * 14), 360px); }

/* ==========================================================================
   v5 — Mockup-faithful home hero: full-viewport scene, overlaid content
   ========================================================================== */

.scene--home { min-height: 0; }

.hero-eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--navy);
  font-size: clamp(0.72rem, 1.7cqw, 0.98rem);
  margin: var(--space-2) 0 0;
}

.hero-divider {
  display: block;
  width: clamp(190px, 30cqw, 430px);
  height: auto;
  margin: 0.9rem auto;
}


/* slightly tighter tagline so the long invitation line sits gracefully */
.scene--home .hero-tagline { letter-spacing: 0.34em; line-height: 1.9; margin-bottom: 0; }


/* ---------- Evening theme (Venue) — warm golden hour, still light ---------- */
body.theme-evening { background: #f7e6cf; }
body.theme-evening .scene { background: #f7e6cf; }
body.theme-evening .site-header {
  background: rgba(249, 236, 215, 0.85);
  border-bottom-color: rgba(171, 113, 30, 0.25);
}
body.theme-evening .acc-item,
body.theme-evening .card,
body.theme-evening .teaser { background: rgba(255, 250, 240, 0.78); }
body.theme-evening .trio-sep::after { background: #f7e6cf; }

/* ---------- Shared dark styling (RSVP dusk + FAQ night) ---------- */
body.theme-dark { color: #e9e1d4; }

body.theme-dark h1, body.theme-dark h2, body.theme-dark h3, body.theme-dark h4 { color: #f4ecdc; }
body.theme-dark .page-title, body.theme-dark .script { color: #f4ecdc; }
body.theme-dark .page-title { text-shadow: 0 2px 22px rgba(8, 6, 18, 0.6); }
body.theme-dark .page-sub { color: #ead9b8; text-shadow: 0 1px 14px rgba(8, 6, 18, 0.6); }
body.theme-dark a { color: #ead9b8; }

/* corners off on darker pages */
body.theme-dark .scene-art::before,
body.theme-dark .scene-art::after { display: none; }

/* nav */
body.theme-dark .site-header { border-bottom-color: rgba(201, 163, 92, 0.3); }
body.theme-dark .nav-links a { color: #ead9b8; }
body.theme-dark .nav-links a:hover { color: #f6d488; }
body.theme-dark .nav-links a[aria-current="page"] { color: #f4ecdc; border-bottom-color: var(--gold-soft); }
@media (max-width: 760px) {
  body.theme-dusk .nav-links { background: rgba(38, 30, 56, 0.97); }
  body.theme-night .nav-links { background: rgba(10, 17, 32, 0.97); }
}

/* buttons */
body.theme-dark .btn-outline {
  background: rgba(18, 16, 30, 0.45);
  color: #ead9b8;
  border-color: var(--gold-soft);
}
body.theme-dark .btn-outline:hover { background: rgba(18, 16, 30, 0.7); }
body.theme-dark .btn-quiet { color: #ead9b8; border-color: rgba(234, 217, 184, 0.4); }
body.theme-dark .btn-quiet:hover { background: rgba(18, 16, 30, 0.4); border-color: #ead9b8; }

/* glass surfaces */
body.theme-dark .card,
body.theme-dark .teaser,
body.theme-dark .acc-item,
body.theme-dark .side-card,
body.theme-dark .countdown {
  background: rgba(20, 18, 34, 0.55);
  border-color: rgba(201, 163, 92, 0.35);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  color: #e9e1d4;
}
body.theme-dark .teaser-icon,
body.theme-dark .icon-badge { background: rgba(28, 25, 44, 0.7); border-color: rgba(201, 163, 92, 0.5); }
body.theme-dark .teaser strong { color: #f4ecdc; }
body.theme-dark .teaser-link { color: #ead9b8; }
body.theme-dark .teaser-link:hover { color: #f6d488; }
body.theme-dark .count-unit .num { color: #f4ecdc; }
body.theme-dark .acc-trigger { color: #f4ecdc; }
body.theme-dark .acc-panel p { color: #ded5c6; }
body.theme-dark .tag { color: #ead9b8; border-color: rgba(234, 217, 184, 0.45); }
body.theme-dark .tag--gold { background: rgba(201, 163, 92, 0.15); color: #f6d488; border-color: rgba(201, 163, 92, 0.5); }
body.theme-dark .fact .fact-value { color: #f4ecdc; }
body.theme-dark .meta svg { color: var(--gold-soft); }

/* forms */
body.theme-dark .field label,
body.theme-dark .field .group-label { color: #f4ecdc; }
body.theme-dark .hint { color: #b3aabf; }
body.theme-dark .char-count { color: #a99fb8; }
body.theme-dark input[type="text"],
body.theme-dark input[type="email"],
body.theme-dark select,
body.theme-dark textarea {
  background: rgba(14, 12, 26, 0.6);
  color: #f0e8db;
  border-color: rgba(201, 163, 92, 0.5);
}
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder { color: #8f86a0; }
body.theme-dark input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus {
  border-color: var(--gold-soft);
  box-shadow: 0 0 0 3px rgba(201, 163, 92, 0.2);
}
body.theme-dark .choice,
body.theme-dark .segment { background: rgba(14, 12, 26, 0.6); border-color: rgba(201, 163, 92, 0.5); }
body.theme-dark .choice { color: #ead9b8; }
body.theme-dark .choice:has(input:checked) { background: rgba(201, 163, 92, 0.18); border-color: var(--gold-soft); }
body.theme-dark .choice input:checked + .dot { border-color: var(--gold-soft); }
body.theme-dark .choice input:checked + .dot::after { background: var(--gold-soft); }
body.theme-dark .segment label { color: #ead9b8; }
body.theme-dark .segment label:has(input:checked) { background: linear-gradient(180deg, #caa459, #ab8433); color: #241d10; }
body.theme-dark #rsvp-error { background: rgba(120, 40, 40, 0.35); border-color: rgba(210, 130, 130, 0.5); color: #f2c8c8; }
body.theme-dark .side-card::before { border-color: rgba(201, 163, 92, 0.45); }

/* ---------- Dusk theme (RSVP) ---------- */
body.theme-dusk { background: #322843; }
body.theme-dusk .scene { background: #322843; }
body.theme-dusk .site-header { background: rgba(44, 34, 62, 0.82); }

/* ---------- Night theme (FAQ) ---------- */
body.theme-night { background: #0d1626; }
body.theme-night .scene { background: #0d1626; }
body.theme-night .site-header { background: rgba(9, 15, 29, 0.82); }

/* ==========================================================================
   v7 — Split hero: airy text block above, uncropped painting below
   ========================================================================== */

.scene-copy {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: clamp(2.5rem, 6vh, 5rem) 0 clamp(1.6rem, 4vh, 3rem);
}

/* generous rhythm for the home invitation block */
.hero-copy .hero-eyebrow { margin: 1.2rem 0 1rem; }
.hero-copy .hero-names { margin: 0 0 1rem; }
.hero-copy .hero-tagline { margin: 0 0 1.4rem; }
.hero-copy .hero-divider { margin: 1.6rem auto 2.4rem; }
.hero-copy .hero-dates { gap: clamp(2rem, 7cqw, 4.5rem); margin-bottom: 2.4rem; }
.hero-copy .hero-venue { margin-bottom: 0.35rem; }
.hero-copy .countdown { margin-bottom: 2rem; }
.hero-copy .hero-ctas { margin-bottom: 0; }

/* overlay riding on the water at the bottom of the painting */
.hero-art-overlay .teaser { width: 100%; }

@media (max-width: 760px) {
  .scene-copy { padding-top: 2rem; }
}

/* ==========================================================================
   v8 — Home hero: text composited onto the painting
   Sky zone: invitation block · Water zone: countdown + CTAs
   ========================================================================== */

.hero-stage { position: relative; }
.hero-sky, .hero-water {
  position: relative;
  z-index: 3;
  text-align: center;
}

/* Mobile / narrow: stacked (text on cream above, image, actions below) */
@media (max-width: 899.98px) {
  .hero-sky { padding: 2.2rem 1.25rem 1.8rem; }
  .hero-water {
    padding: 1.6rem 1.25rem 2.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
  }
  .hero-water .countdown { margin-bottom: 0; }
  .hero-water .hero-ctas { margin-bottom: 0; }
}

/* Desktop: composited onto the painting */
@media (min-width: 900px) {
  .hero-sky {
    position: absolute;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
    width: min(780px, 62%);
    text-shadow: 0 1px 12px rgba(253, 249, 240, 0.9);
  }
  .hero-water {
    position: absolute;
    bottom: 4.5%;
    left: 50%;
    transform: translateX(-50%);
    width: min(700px, 64%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2cqw;
  }

  /* typography scales with the painting so the block always fits the sky */
  .hero-sky .hero-eyebrow  { font-size: clamp(10px, 1.05cqw, 16px); margin: 0 0 0.5cqw; }
  .hero-sky .hero-names    { font-size: clamp(40px, 6cqw, 94px); margin: 0 0 0.4cqw; }
  .hero-sky .hero-tagline  { font-size: clamp(10px, 1.25cqw, 19px); letter-spacing: 0.34em; margin: 0 0 0.9cqw; }
  .hero-sky .hero-divider  { width: clamp(180px, 23cqw, 360px); margin: 0.9cqw auto 1.5cqw; }
  .hero-sky .hero-dates    { gap: clamp(1.5rem, 4.5cqw, 4rem); margin-bottom: 1.1cqw; }
  .hero-sky .hero-date .day   { font-size: clamp(20px, 3cqw, 46px); }
  .hero-sky .hero-date .label { font-size: clamp(9px, 0.95cqw, 14px); }
  .hero-sky .hero-venue     { font-size: clamp(11px, 1.45cqw, 21px); margin-bottom: 0.3cqw; }
  .hero-sky .hero-venue-sub { font-size: clamp(9px, 1.05cqw, 15px); margin: 0; }

  .hero-water .countdown {
    margin: 0;
    padding: clamp(0.7rem, 1cqw, 1.1rem) clamp(1.2rem, 2.2cqw, 2.4rem);
    gap: clamp(0.8rem, 2.2cqw, 1.8rem);
  }
  .hero-water .count-unit .num { font-size: clamp(20px, 2.3cqw, 38px); }
  .hero-water .count-unit { min-width: 2.6rem; }
  .hero-water .hero-ctas { margin: 0; gap: clamp(0.8rem, 1.4cqw, 1.4rem); }
  .hero-water .btn { padding: clamp(0.65rem, 0.9cqw, 0.95rem) clamp(1.2rem, 1.8cqw, 1.9rem); font-size: clamp(11px, 0.9cqw, 15px); }
}

/* teaser strip below the painting */
.teaser-strip { width: min(860px, 100% - 2.5rem); margin: var(--space-4) auto; }

/* ==========================================================================
   v9 — Airier sky text, countdown under the bridge, photo row (two-column)
   ========================================================================== */

/* Sky block: higher and more open line spacing */
@media (min-width: 900px) {
  .hero-sky { top: 2%; width: min(820px, 64%); }
  .hero-sky .hero-eyebrow  { margin: 0 0 1.1cqw; }
  .hero-sky .hero-names    { margin: 0 0 1cqw; }
  .hero-sky .hero-tagline  { margin: 0 0 1.6cqw; }
  .hero-sky .hero-divider  { margin: 1.2cqw auto 2cqw; }
  .hero-sky .hero-dates    { margin-bottom: 1.8cqw; }
  .hero-sky .hero-date .day { margin-bottom: 0.3cqw; }
  .hero-sky .hero-venue    { margin-bottom: 0.55cqw; }

  /* Countdown rides just under the bridge; buttons moved to the photo row */
  .hero-water {
    top: 55.5%;
    bottom: auto;
    width: min(560px, 46%);
  }
}

/* ---------- Photo row: lilies | tilted photo | welcome + buttons ---------- */
.photo-row {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: clamp(-12rem, -13cqw, -3rem);
}
.photo-row .edge {
  flex: 0 0 clamp(84px, 15cqw, 300px);
  min-width: 0;
  align-self: flex-start;
  pointer-events: none;
}
.photo-row .edge img { width: 100%; height: auto; display: block; }
.photo-row .center {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4cqw, 4.5rem);
  padding: clamp(1rem, 3cqw, 3rem) clamp(0.5rem, 2cqw, 2rem);
}
.photo-tilt {
  width: clamp(230px, 27cqw, 480px);
  height: auto;
  transform: rotate(-8deg);
}
.welcome-col { max-width: 32rem; text-align: center; }
.welcome-col .welcome-text {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 2.3cqw, 1.95rem);
  line-height: 1.55;
  color: #043b9f;
  margin: 0;
}
.welcome-col .welcome-accent {
  display: block;
  width: clamp(110px, 13cqw, 210px);
  height: auto;
  margin: clamp(0.9rem, 1.6cqw, 1.5rem) auto;
}
.welcome-col .hero-ctas { margin: 0; justify-content: center; }

@media (max-width: 760px) {
  .photo-row { margin-top: -2rem; }
  .photo-row .edge { flex-basis: 64px; }
  .photo-tilt { width: min(300px, 78cqw); }
}
@media (max-width: 480px) {
  .photo-row .edge { display: none; }
}

/* Home composition controls */
:root {
  --sky-top: 2;        /* % from top of painting */
  --sky-width: 64;     /* % of painting width */
  --names-size: 6;     /* canvas-width units */
  --water-top: 55.5;   /* % from top of painting */
  --row-overlap: 13;   /* canvas-width units pulled up onto the water */
  --photo-w: 27;       /* canvas-width units */
  --photo-rot: -8;     /* deg */
}
@media (min-width: 900px) {
  .hero-sky { top: calc(var(--sky-top) * 1%); width: min(820px, calc(var(--sky-width) * 1%)); }
  .hero-sky .hero-names { font-size: clamp(40px, calc(var(--names-size) * 1cqw), 94px); }
  .hero-water { top: calc(var(--water-top) * 1%); }
}
.photo-row { margin-top: clamp(-12rem, calc(var(--row-overlap) * -1cqw), -2rem); }
.photo-tilt { width: clamp(230px, calc(var(--photo-w) * 1cqw), 480px); transform: rotate(calc(var(--photo-rot) * 1deg)); }

/* ==========================================================================
   v11 — Buttons under the bridge, countdown joins the photo column,
   giant edge frames bleeding offscreen, skyline bottom fade
   ========================================================================== */
:root {
  --row-overlap: 16;   /* raised: photo row pulls higher onto the water */
  --img-fade: 18;      /* % of skyline height that fades out at the bottom */
  --frame-w: 37.5;     /* edge frame width (cqw) ≈ 2.5x previous */
  --frame-off: 30;     /* % of the frame pushed offscreen */
}

/* Edge frames: huge, vertically centered, bleeding off both sides */
.photo-row { overflow: hidden; }
.photo-row .edge {
  position: absolute;
  top: 50%;
  flex: none;
  width: calc(var(--frame-w) * 1cqw);
  z-index: 1;
}
.photo-row .edge:first-child { left: 0; transform: translate(calc(var(--frame-off) * -1%), -50%); }
.photo-row .edge:last-child  { right: 0; transform: translate(calc(var(--frame-off) * 1%), -50%); }
.photo-row .center { position: relative; z-index: 2; }

/* Left column: photo with the countdown beneath it */
.photo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.2rem, 2cqw, 2rem);
  min-width: 0;
}
.photo-col .countdown { margin: 0; }

@media (max-width: 480px) {
  .photo-row .edge { display: none; }
}

/* ==========================================================================
   v12 — Buttons lower, frames sized to the row (no cropping), deeper fade
   ========================================================================== */
:root {
  --water-top: 58.5;   /* buttons a touch lower under the bridge */
  --img-fade: 32;      /* fade now extends well above the photo-row overlap */
  --frame-h: 100;      /* frames sized by row height -> never cropped */
}
.photo-row .edge {
  width: auto;
  height: calc(var(--frame-h) * 1%);
}
.photo-row .edge img { height: 100%; width: auto; }

/* ==========================================================================
   v13 — Seam elimination polish
   ========================================================================== */
:root {
  --frame-h: 94;   /* frames slightly inside the row so mandalas never clip */
}
/* tighter vertical padding: less dead space under the countdown */
.photo-row .center { padding-top: clamp(0.5rem, 1.5cqw, 1.5rem); padding-bottom: clamp(0.5rem, 1.5cqw, 1.5rem); }
.teaser-strip { margin-top: var(--space-3); }

/* ==========================================================================
   v14 — Big frames sized independently of the row, shadow clearance,
   whole photo section (and fade) raised
   ========================================================================== */
:root {
  --row-overlap: 19;   /* photo/blossom section pulled higher onto the water */
  --img-fade: 38;      /* skyline fade rises with it */
  --frame-size: 46;    /* frame height in cqw — frames now set the section scale */
}
/* Frames own their size; the row grows to fit them (nothing clips) */
.photo-row { min-height: min(calc(var(--frame-size) * 1cqw + 3rem), 920px); }
.photo-row .edge { height: min(calc(var(--frame-size) * 1cqw), 860px); }
/* breathing room so the photo's drop shadow never touches the clip edge */
.photo-row .center { padding-top: clamp(1.5rem, 2.5cqw, 2.5rem); padding-bottom: clamp(2rem, 3cqw, 3rem); }

/* ==========================================================================
   v15 — Airy sky text with bold framing lines, bigger frames,
   cropped skyline (section rides higher), fade preserved at the crop
   ========================================================================== */
:root {
  --frame-size: 50;    /* frames a touch bigger */
  --water-top: 68.8;   /* buttons re-anchored under the bridge after the crop */
}

/* bold framing lines around the names, at all sizes */
.hero-eyebrow, .hero-tagline { font-weight: 700; }

@media (min-width: 900px) {
  .hero-sky .hero-eyebrow { margin: 0 0 2.2cqw; }
  .hero-sky .hero-names   { margin: 0 0 2.1cqw; }
  .hero-sky .hero-tagline { margin: 0 0 1.8cqw; }
}

/* ==========================================================================
   v17 — Sky text lower-in, frames over the photo, bigger photo,
   pulsing RSVP, real logo, painted footer band with floral corners
   ========================================================================== */
:root {
  --sky-top: 3.5;      /* more whitespace before "Together with their families" */
  --frame-size: 60;    /* +20% */
  --photo-w: 35;       /* +30% */
  --water-top: 73.1;   /* re-anchored after the extra 5% crop */
}

/* frames layer over the photo (like the save-the-date), never block clicks */
.photo-row .edge { z-index: 3; pointer-events: none; }

/* pulsing RSVP button */
.btn-pulse { animation: rsvp-pulse 2.4s ease-in-out infinite; }
@keyframes rsvp-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 163, 92, 0.55); transform: translateY(0); }
  50%      { box-shadow: 0 0 0 12px rgba(201, 163, 92, 0);  transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) { .btn-pulse { animation: none; } }

/* real logo in the nav */
.monogram {
  background: none;
  border: none;
  box-shadow: none;
  width: 62px;
  height: 62px;
}
.monogram img { width: 100%; height: 100%; display: block; }

/* painted footer band */
.site-footer {
  background: none;
  border-top: none;
  padding: 0;
  margin-top: var(--space-5);
  position: relative;
  overflow: hidden;
  line-height: 0;
}
.footer-band { width: 100%; height: auto; display: block; }

/* ==========================================================================
   v18 — Real whitespace above the sky text (9% ≈ 85px), footer simplified
   ========================================================================== */
:root { --sky-top: 9; }

/* ==========================================================================
   v19 — Bigger hero buttons; teaser and footer pulled up
   ========================================================================== */
@media (min-width: 900px) {
  .hero-water .btn {
    padding: clamp(0.9rem, 1.2cqw, 1.35rem) clamp(1.7rem, 2.6cqw, 3rem);
    font-size: clamp(13px, 1.15cqw, 18px);
  }
}
/* photo row hugs its content; frames may breathe past the edges */
.photo-row { overflow: visible; min-height: 0; }
.teaser-strip { margin: 0.5rem auto 0; }
.site-footer { margin-top: var(--space-3); }

/* ==========================================================================
   v20 — New day skyline: sky text up halfway, smaller date pair,
   gentler crop, photo section back down
   ========================================================================== */
:root {
  --sky-top: 4.5;      /* halfway back up */
  --water-top: 67;     /* buttons re-anchored under the new image's bridge */
  --row-overlap: 12;   /* photo section (and everything after) sits lower */
}
@media (min-width: 900px) {
  .hero-sky .hero-date .day   { font-size: clamp(16px, 2.2cqw, 34px); }
  .hero-sky .hero-date .label { font-size: clamp(8px, 0.8cqw, 12px); }
  .hero-sky .hero-dates       { gap: clamp(1.2rem, 3.5cqw, 3rem); }
}

/* ==========================================================================
   v21 — Design canvas capped at 1440px for big monitors
   The page color continues beside the canvas on every theme, so the cap
   is invisible — the composition just stops growing.
   ========================================================================== */
body {
  max-width: 1440px;
  margin-inline: auto;
}
/* the area beside the canvas matches each page's theme */
html { background: var(--ivory); }
html:has(body.theme-evening) { background: #f7e6cf; }
html:has(body.theme-dusk)    { background: #322843; }
html:has(body.theme-night)   { background: #0d1626; }

/* ==========================================================================
   v22 — Canvas capped at 1800px with soft edge fades on everything
   Container-relative sizing below keeps the whole composition fluid until
   this cap, then prevents viewport units from continuing to enlarge it.
   ========================================================================== */
body {
  max-width: 1800px;
  container-type: inline-size;
}

/* per-theme page color, used by the edge fades */
body { --page-bg: var(--ivory); }
body.theme-evening { --page-bg: #f7e6cf; }
body.theme-dusk    { --page-bg: #322843; }
body.theme-night   { --page-bg: #0d1626; }

/* soft fade to background at both canvas edges, over all elements */
@media (min-width: 1024px) {
  body { position: relative; }
  body::before, body::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(48px, 5cqw, 120px);
    z-index: 300;
    pointer-events: none;
  }
  body::before { left: 0;  background: linear-gradient(90deg,  var(--page-bg), transparent); }
  body::after  { right: 0; background: linear-gradient(270deg, var(--page-bg), transparent); }
}

/* raise pixel ceilings so the composition keeps scaling up to the canvas cap
   (identical below ~1440px — only the maximums moved) */
@media (min-width: 900px) {
  .hero-sky { width: min(1140px, calc(var(--sky-width) * 1%)); }
  .hero-sky .hero-eyebrow  { font-size: clamp(10px, 1.05cqw, 22px); }
  .hero-sky .hero-names    { font-size: clamp(40px, calc(var(--names-size) * 1cqw), 130px); }
  .hero-sky .hero-tagline  { font-size: clamp(10px, 1.25cqw, 26px); }
  .hero-sky .hero-divider  { width: clamp(180px, 23cqw, 500px); }
  .hero-sky .hero-date .day   { font-size: clamp(16px, 2.2cqw, 46px); }
  .hero-sky .hero-date .label { font-size: clamp(8px, 0.8cqw, 16px); }
  .hero-sky .hero-venue     { font-size: clamp(11px, 1.45cqw, 29px); }
  .hero-sky .hero-venue-sub { font-size: clamp(9px, 1.05cqw, 20px); }
  .hero-water .btn {
    padding: clamp(0.9rem, 1.2cqw, 1.7rem) clamp(1.7rem, 2.6cqw, 3.8rem);
    font-size: clamp(13px, 1.15cqw, 24px);
  }
}
.photo-tilt { width: clamp(230px, calc(var(--photo-w) * 1cqw), 660px); }
.photo-row .edge { height: min(calc(var(--frame-size) * 1cqw), 1160px); }
.photo-row { margin-top: clamp(-16rem, calc(var(--row-overlap) * -1cqw), -2rem); }
.welcome-col { max-width: 40rem; }
.welcome-col .welcome-text { font-size: clamp(1.25rem, 2.3cqw, 2.5rem); }

/* ==========================================================================
   v23 — Big-screen fades fixed, button overflow, bold venue lines,
   photo-row shrink behavior, corners below nav, mobile balance
   ========================================================================== */

/* --- 1&2: edge fades ONLY beyond the 1800px canvas, and wide enough to
       blanket the frames that overhang past the body edge --- */
body::before, body::after { content: none; }
@media (min-width: 1801px) {
  body { position: relative; }
  body::before, body::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 300px;             /* 240px solid over the overhang + 60px fade inward */
    z-index: 300;
    pointer-events: none;
  }
  body::before { left: -240px;  background: linear-gradient(90deg,  var(--page-bg) 0 240px, transparent); }
  body::after  { right: -240px; background: linear-gradient(270deg, var(--page-bg) 0 240px, transparent); }
}

/* --- 3: buttons never stack; growth reined in --- */
@media (min-width: 900px) {
  .hero-water { width: min(780px, 62%); }
  .hero-water .hero-ctas { flex-wrap: nowrap; }
  .hero-water .btn {
    white-space: nowrap;
    font-size: clamp(13px, 1.1cqw, 20px);
    padding: clamp(0.9rem, 1.1cqw, 1.4rem) clamp(1.6rem, 2.4cqw, 3rem);
  }
}

/* --- 4&5: venue line tighter + bold; labels bold --- */
.hero-venue { font-weight: 700; letter-spacing: 0.08em; }
.hero-venue-sub, .hero-date .label { font-weight: 700; }

/* --- 6: columns shrink; only slight overlap under the frames --- */
.photo-row .center { padding-inline: clamp(2rem, 15cqw, 300px); }
.photo-tilt { width: clamp(160px, calc(var(--photo-w) * 1cqw), 660px); }
.welcome-col { min-width: 260px; }

/* --- 7: mid widths — less upward pull so the photo never reaches the buttons --- */
@media (min-width: 900px) and (max-width: 1249px) {
  .photo-row { margin-top: -6cqw; }
}

/* --- 8: corner blossoms live at the top of the page content (below the
       nav bar), scroll away normally --- */
.scene-art::before, .scene-art::after { content: none; }
.scene::before, .scene::after {
  content: "";
  position: absolute;
  top: 0;
  width: clamp(160px, 24cqw, 320px);
  aspect-ratio: 1;
  background: url("/assets/top-left-floral.d94e3ac6ad21.webp") no-repeat top left / contain;
  z-index: 4;
  pointer-events: none;
}
.scene::before { left: 0; }
.scene::after {
  right: 0;
  background-image: url("/assets/top-right-floral-v2.c2b9163cebe7.webp");
  background-position: top right;
}
body.theme-dark .scene::before, body.theme-dark .scene::after { display: none; }
@media (max-width: 760px) { .scene::before, .scene::after { width: 110px; opacity: 0.9; } }

/* --- 9: narrow screens — title breathes, buttons ride up onto the water --- */
@media (max-width: 899.98px) {
  .hero-sky { padding-top: 3rem; }
  .hero-water {
    position: relative;
    z-index: 4;
    margin-top: -18cqw;
    padding-top: 0;
  }
  .photo-row .edge { height: 46cqw; }
}

/* ==========================================================================
   v24 — Stack later, buttons anchored (not flow-shoved), fade uncut,
   sky text overlaps skyline top on small screens
   ========================================================================== */

/* --- 1: photo + welcome column shrink instead of stacking at 1512 --- */
.photo-row .center { padding-inline: clamp(1.5rem, 12cqw, 260px); }
.welcome-col { flex: 1 1 300px; }

/* --- 2 & 3: small screens — buttons OVERLAY the water (absolute, like
       desktop) instead of negative-margin flow tricks. No section
       shortening, so the skyline's bottom fade is never clipped again. --- */
@media (max-width: 899.98px) {
  .hero-water {
    position: absolute;
    top: auto;
    bottom: 5cqw;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
    width: min(540px, calc(100% - 2rem));
    display: flex;
    justify-content: center;
    z-index: 4;
  }
  .photo-row { margin-top: 2.5rem; }

  /* --- 4: invitation text drops down to overlap the skyline's top ~10% --- */
  .hero-sky { padding-top: 3rem; margin-bottom: -7cqw; }
}

/* ==========================================================================
   v25 — Sky spacing capped past the canvas, real overlap on small screens,
   tidy teaser stacking
   ========================================================================== */

/* --- 1: canvas-relative margins have fixed ceilings so wide monitors don't stretch
       the block apart after the canvas itself has stopped growing --- */
@media (min-width: 900px) {
  .hero-sky .hero-eyebrow  { margin: 0 0 min(2.2cqw, 44px); }
  .hero-sky .hero-names    { margin: 0 0 min(2.1cqw, 42px); }
  .hero-sky .hero-tagline  { margin: 0 0 min(1.8cqw, 36px); }
  .hero-sky .hero-divider  { margin: min(1.2cqw, 24px) auto min(2cqw, 40px); }
  .hero-sky .hero-dates    { margin-bottom: min(1.8cqw, 36px); }
  .hero-sky .hero-date .day { margin-bottom: min(0.3cqw, 6px); }
  .hero-sky .hero-venue    { margin-bottom: min(0.55cqw, 11px); }
  .hero-water { gap: min(1.2cqw, 24px); }
}

/* --- 2: small screens — the text block truly sinks into the skyline.
       (-7cqw landed entirely inside the image's invisible 12% top fade,
        so it read as no overlap. -16cqw reaches the visible sky.) --- */
@media (max-width: 899.98px) {
  .hero-sky { margin-bottom: -16cqw; }
}

/* --- 3: teaser stacks cleanly when narrow --- */
@media (max-width: 600px) {
  .teaser {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.8rem;
  }
  .teaser-link { margin: 0; }

  .invitation-state-public .teaser {
    grid-template-columns: minmax(0, 1fr);
    align-items: flex-start;
    text-align: left;
  }

  .invitation-state-public .teaser-icon,
  .invitation-state-public .teaser p,
  .invitation-state-public .teaser-link {
    grid-column: 1;
  }

  .invitation-state-public .teaser-link {
    align-self: flex-start;
  }
}

/* ==========================================================================
   v26 — Narrowest screens: title block sinks much deeper into the skyline
   ========================================================================== */
@media (max-width: 620px) {
  .hero-sky { margin-bottom: -26cqw; }
}

/* ==========================================================================
   v27 — Sub-page hero composition (Events): title in the sky,
   content overlapping the bottom quarter of the skyline
   ========================================================================== */
.overlap-hero {
  position: relative;
  z-index: 5;
  margin-top: clamp(-350px, -17cqw, -60px);   /* ≈ bottom 25% of the painting */
}
@media (max-width: 899.98px) {
  .overlap-hero { margin-top: -10cqw; }
}

/* ==========================================================================
   v28 — Events title lower in the sky; page-transition layering fix
   ========================================================================== */

/* Events (and future sub-pages): short title block sits deeper in the sky */
@media (min-width: 900px) {
  .hero-sky--page { top: 20%; }
}


/* ==========================================================================
   v32 — Venue & RSVP titles overlay their skylines; FAQ dips slightly;
   sub-page subtitles larger and bold
   ========================================================================== */
.page-sub {
  font-size: clamp(1.2rem, 1.7cqw, 1.7rem);
  font-weight: 600;
}
/* venue's evening photo has a taller hotel — anchor its title a bit higher */
@media (min-width: 900px) {
  body.theme-evening .hero-sky--page { top: 14%; }
}
/* FAQ: title block eases a little onto the night image's faded top */
.scene-copy--dip { margin-bottom: -6cqw; position: relative; z-index: 3; }

/* ==========================================================================
   v33 — Unified title anchor, unbold subtitles, skyline slide-up transition
   ========================================================================== */

/* subtitles: larger stays, bold goes */
.page-sub { font-weight: 500; }

/* one shared title anchor for all sub-pages (venue override retired) */
@media (min-width: 900px) {
  .hero-sky--page { top: 7%; }
  body.theme-evening .hero-sky--page { top: 7%; }
}


/* ==========================================================================
   v34 — Per-painting transition pairing + corners promoted to real layers
   Same painting between pages  -> pure slide (no cross-fade)
   Different painting           -> pure cross-fade (no movement)
   ========================================================================== */

/* corners are real elements now, so they can ride above the moving skyline */
.scene::before, .scene::after { content: none; }
.corner-art {
  position: absolute;
  top: 0;
  width: clamp(160px, 24cqw, 320px);
  height: auto;
  z-index: 4;
  pointer-events: none;
}
.corner-art--left  { left: 0; }
.corner-art--right { right: 0; }
body.theme-dark .corner-art { display: none; }
@media (max-width: 760px) { .corner-art { width: 110px; opacity: 0.9; } }

/* same-painting pair (home <-> events): motion only, zero cross-fade */


/* ==========================================================================
   v35 — Transition physics corrected:
   pure slide (no zoom), no ghost overlays, edge bars ease in
   ========================================================================== */

/* ==========================================================================
   v39 — Cherry blossom corners 20% smaller
   ========================================================================== */
.corner-art { width: clamp(128px, 19.2cqw, 256px); }
@media (max-width: 760px) { .corner-art { width: 88px; } }

/* ==========================================================================
   v42 — Venue page background matched to the banner's top pixels (#b8babf)
   ========================================================================== */
body.theme-evening { background: #b8babf; --page-bg: #b8babf; }
html:has(body.theme-evening) { background: #b8babf; }
body.theme-evening .scene { background: #b8babf; }
body.theme-evening .site-header {
  background: rgba(184, 186, 191, 0.85);
  border-bottom-color: rgba(90, 95, 105, 0.25);
}

/* ==========================================================================
   v43 — RSVP page background matched to the banner's top pixels (#b695a8)
   (+ minimal legibility: nav/loose text darken on the lighter mauve;
    dark glass cards and their contents unchanged)
   ========================================================================== */
body.theme-dusk { background: #b695a8; --page-bg: #b695a8; color: #3c2334; }
html:has(body.theme-dusk) { background: #b695a8; }
body.theme-dusk .scene { background: #b695a8; }
body.theme-dusk .site-header {
  background: rgba(182, 149, 168, 0.85);
  border-bottom-color: rgba(90, 55, 75, 0.3);
}
body.theme-dusk .nav-links a { color: #43254a; }
body.theme-dusk .nav-links a:hover { color: #7a4a2a; }
body.theme-dusk .nav-links a[aria-current="page"] { color: #2f1a35; border-bottom-color: var(--gold); }
body.theme-dusk .btn-outline { background: rgba(255, 250, 244, 0.55); color: #43254a; }
@media (max-width: 760px) {
  body.theme-dusk .nav-links { background: rgba(182, 149, 168, 0.97); }
}

/* ==========================================================================
   v44 — Review fixes: map embed styling (was unstyled phantom markup)
   ========================================================================== */
.map-embed {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  min-height: 260px;
  border: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}


/* ==========================================================================
   v50 — Stable raised artwork for Venue and RSVP
   The title and artwork share one grid layer. The artwork stays in normal
   flow at natural width/height, so resizing cannot trigger offset jumps.
   ========================================================================== */
.scene--raised-art {
  display: grid;
}
.scene--raised-art > .scene-copy,
.scene--raised-art > .scene-art {
  grid-area: 1 / 1;
}
.scene--raised-art > .scene-art {
  align-self: start;
  margin: 0;
}
.scene--raised-art > .scene-copy {
  align-self: start;
  margin: 0;
  padding: clamp(1rem, 2.4cqw, 2.5rem) 1rem 0;
  z-index: 3;
  pointer-events: none;
}

/* ==========================================================================
   v51 — Stable centered Venue/RSVP title blocks; Venue artwork lowered
   Keep the responsive image in normal flow. No transforms, breakpoint jumps,
   or viewport-dependent negative offsets.
   ========================================================================== */
.scene--raised-art > .scene-copy {
  margin-inline: auto;
  text-align: center;
}

.scene--raised-art > .scene-copy .page-title,
.scene--raised-art > .scene-copy .page-sub {
  margin-inline: auto;
  text-align: center;
}

body.theme-evening .scene--raised-art > .scene-art {
  padding-top: clamp(1.5rem, 3cqw, 3.75rem);
}

/* ==========================================================================
   v52 — Venue/RSVP skylines descend continuously as the viewport narrows
   The artwork remains in normal flow. Inverse fluid padding creates a smooth
   downward drift on narrower windows without transforms or breakpoint jumps.
   ========================================================================== */
body.theme-evening .scene--raised-art > .scene-art {
  padding-top: clamp(3.5rem, calc(8.5rem - 4cqw), 6.25rem);
}

body.theme-dusk .scene--raised-art > .scene-art {
  padding-top: clamp(0rem, calc(8rem - 7cqw), 7rem);
}

/* ===========================================================================
   v57 — Restoe Bumi titles: true regular weight and clearly larger scale
   Use the font's native 400-weight outlines only. No browser-synthesized bold
   and no artificial stroke. Sizes are intentionally increased substantially.
   ========================================================================== */
.page-title {
  font-weight: 400;
  font-synthesis: none;
  -webkit-text-stroke: 0;
  text-stroke: 0;
  font-size: clamp(4.8rem, 11cqw, 7.8rem);
}

.hero-names {
  font-weight: 400;
  font-synthesis: none;
  -webkit-text-stroke: 0;
  text-stroke: 0;
  font-size: clamp(5rem, 13cqw, 9.5rem);
}

/* ========================================================================== 
   v58 — Clear Restoe Bumi hierarchy
   Moderate synthetic weight, oversized couple name, restrained page titles.
   The higher-specificity home selector ensures desktop hero rules cannot
   override the intended Adam & Tory size.
   ========================================================================== */
.page-title,
.scene-copy .page-title {
  font-weight: 600;
  font-synthesis: weight;
  -webkit-text-stroke: 0.06px currentColor;
  text-stroke: 0.06px currentColor;
  font-size: clamp(3.25rem, 7cqw, 5rem);
  line-height: 0.96;
}

.hero-names,
.hero-sky .hero-names {
  font-weight: 600;
  font-synthesis: weight;
  -webkit-text-stroke: 0.06px currentColor;
  text-stroke: 0.06px currentColor;
  font-size: clamp(5.2rem, 9cqw, 10.5rem);
  line-height: 0.92;
}

/* ========================================================================== 
   v59 — Softer Restoe Bumi weight; slightly larger subpage titles
   ========================================================================== */
.page-title,
.scene-copy .page-title {
  font-weight: 500;
  font-synthesis: weight;
  -webkit-text-stroke: 0;
  text-stroke: 0;
  font-size: clamp(3.65rem, 7.6cqw, 5.6rem);
}

.hero-names,
.hero-sky .hero-names {
  font-weight: 500;
  font-synthesis: weight;
  -webkit-text-stroke: 0;
  text-stroke: 0;
}

/* ==========================================================================
   v61 — Apple Maps route card
   ========================================================================== */
.map-embed {
  background: linear-gradient(145deg, rgba(251, 247, 238, 0.95), rgba(224, 231, 220, 0.9));
}
.map-route-label {
  margin: 0;
  color: var(--navy);
}
.map-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--space-2);
}
.map-actions .btn {
  min-width: 10.5rem;
  justify-content: center;
}
@media (max-width: 520px) {
  .map-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .map-actions .btn {
    width: 100%;
  }
}


/* ==========================================================================
   v62 — Reliable illustrated airport route map
   Public maps.apple.com pages cannot be embedded as iframes. Use a branded
   static route illustration and keep Apple/Google buttons for live directions.
   ========================================================================== */
.map-illustration {
  min-height: 0;
  object-fit: cover;
  background: #fbf7ee;
}
.map-note {
  margin: 0.35rem auto 0;
  max-width: 38rem;
  color: #6b6259;
  font-size: 0.88rem;
  line-height: 1.45;
}


/* ==========================================================================
   v64 — Holud dress-code modal
   Responsive two-family inspiration layout based on the supplied mockups.
   ========================================================================== */
.event-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.event-action-row .btn { justify-content: center; }

body.dress-modal-open { overflow: hidden; }

.dress-modal[hidden] { display: none; }
.dress-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: clamp(0.45rem, 2cqw, 1.5rem);
  background: rgba(12, 20, 29, 0.76);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity 180ms ease;
}
.dress-modal.is-open { opacity: 1; }

.dress-modal__panel {
  --dress-bg: #f5ebe0;
  position: relative;
  width: min(1120px, calc(100cqw - 1rem));
  max-height: calc(100dvh - 1rem);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(183, 127, 46, 0.72);
  border-radius: clamp(16px, 2cqw, 26px);
  background: var(--dress-bg);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.38), inset 0 0 0 5px rgba(255, 249, 239, 0.62);
  color: var(--navy);
  transform: translateY(14px) scale(0.985);
  transition: transform 220ms ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(176, 141, 62, 0.5) transparent;
}
.dress-modal.is-open .dress-modal__panel { transform: none; }

.dress-modal__panel::before {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(199, 151, 75, 0.42);
  border-radius: calc(clamp(16px, 2cqw, 26px) - 7px);
}

.dress-modal__content {
  position: relative;
  z-index: 2;
  padding: clamp(2.4rem, 5cqw, 4.7rem) clamp(0.8rem, 5cqw, 4.4rem) clamp(1.35rem, 3cqw, 2.4rem);
}

.dress-modal__accent {
  position: absolute;
  z-index: 1;
  width: clamp(110px, 19cqw, 245px);
  height: auto;
  pointer-events: none;
  user-select: none;
}
.dress-modal__accent--top-left { top: 3px; left: 3px; }
.dress-modal__accent--top-right { top: 3px; right: 3px; }
.dress-modal__accent--bottom-left { bottom: 3px; left: 3px; }
.dress-modal__accent--bottom-right { right: 3px; bottom: 3px; }

.dress-modal__close {
  position: sticky;
  top: 0.75rem;
  float: right;
  z-index: 6;
  display: grid;
  place-items: center;
  width: clamp(42px, 4cqw, 54px);
  height: clamp(42px, 4cqw, 54px);
  margin: 0.75rem 0.75rem -4rem 0;
  border: 1.5px solid rgba(176, 116, 32, 0.78);
  border-radius: 50%;
  background: rgba(255, 247, 235, 0.94);
  color: #b47324;
  box-shadow: 0 8px 20px rgba(91, 55, 18, 0.18);
  cursor: pointer;
  font: 300 clamp(2rem, 3cqw, 2.7rem)/1 var(--font-body);
}
.dress-modal__close:hover { background: #fff9ef; transform: scale(1.03); }

.dress-modal__header {
  max-width: 850px;
  margin: 0 auto clamp(1rem, 2cqw, 1.7rem);
  text-align: center;
}
.dress-modal__header h2 {
  margin: 0;
  color: #16467f;
  font-family: var(--font-title);
  font-size: clamp(3rem, 7cqw, 6rem);
  font-weight: 500;
  line-height: 0.92;
}
.dress-modal__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: min(260px, 42%);
  margin: 0.55rem auto 0.4rem;
  color: #c8862d;
}
.dress-modal__ornament::before,
.dress-modal__ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c8862d);
}
.dress-modal__ornament::after { background: linear-gradient(90deg, #c8862d, transparent); }
.dress-modal__ornament span { font-size: 0.85rem; }
.dress-modal__eyebrow {
  margin: 0 0 0.55rem;
  color: #bd7828;
  font-family: var(--font-display);
  font-size: clamp(0.67rem, 1.35cqw, 1rem);
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}
.dress-modal__intro {
  margin: 0;
  color: #234e82;
  font-size: clamp(0.95rem, 1.7cqw, 1.28rem);
  font-style: italic;
  line-height: 1.4;
}

.dress-modal__sides {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.55rem, 3cqw, 2.5rem);
}
.dress-side {
  position: relative;
  min-width: 0;
  text-align: center;
}
.dress-side + .dress-side {
  border-left: 1px solid rgba(191, 129, 43, 0.58);
  padding-left: clamp(0.55rem, 3cqw, 2.5rem);
}
.dress-side + .dress-side::before {
  content: "✤";
  position: absolute;
  top: 53%;
  left: 0;
  z-index: 2;
  transform: translate(-50%, -50%);
  padding: 0.35rem 0;
  background: var(--dress-bg);
  color: #c98529;
  font-size: clamp(1rem, 2.2cqw, 1.7rem);
}
.dress-side h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  margin: 0 0 0.3rem;
  color: #c47c28;
  font-family: var(--font-display);
  font-size: clamp(0.68rem, 1.5cqw, 1rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dress-side h3::before,
.dress-side h3::after {
  content: "";
  width: clamp(18px, 4cqw, 54px);
  height: 1px;
  background: currentColor;
  opacity: 0.75;
}
.dress-side h3 b { font-weight: 500; }
.dress-side h3 b::before { content: "— "; }
.dress-side--groom h3,
.dress-side--groom .dress-side__labels,
.dress-side--groom .dress-side__palette-title { color: #65745b; }

.dress-side__people {
  width: 100%;
  max-height: 500px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.dress-side__labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.15rem;
  margin-top: -0.2rem;
  color: #c47c28;
  font-family: var(--font-display);
  font-size: clamp(0.52rem, 1.1cqw, 0.78rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dress-side__palette-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin: clamp(0.8rem, 1.7cqw, 1.25rem) 0 0.15rem;
  color: #c47c28;
  font-family: var(--font-display);
  font-size: clamp(0.62rem, 1.25cqw, 0.9rem);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.dress-side__palette-title::before,
.dress-side__palette-title::after {
  content: "";
  width: clamp(18px, 5cqw, 62px);
  height: 1px;
  background: currentColor;
  opacity: 0.65;
}
.dress-side__palette {
  width: min(100%, 530px);
  margin: 0 auto;
  mix-blend-mode: multiply;
}
.dress-modal__note {
  position: relative;
  z-index: 2;
  margin: clamp(1rem, 2.5cqw, 1.8rem) auto 0;
  color: #234e82;
  text-align: center;
  font-size: clamp(0.85rem, 1.5cqw, 1.08rem);
  font-style: italic;
  line-height: 1.35;
}
.dress-modal__note-star { margin-inline: 0.55rem; color: #c98529; font-style: normal; }

@media (max-width: 700px) {
  .dress-modal { padding: 0.35rem; }
  .dress-modal__panel {
    width: calc(100cqw - 0.7rem);
    max-height: calc(100dvh - 0.7rem);
    border-radius: 16px;
  }
  .dress-modal__content { padding: 2.8rem 0.45rem 1rem; }
  .dress-modal__accent { width: clamp(70px, 23cqw, 120px); }
  .dress-modal__close {
    top: 0.45rem;
    width: 40px;
    height: 40px;
    margin: 0.45rem 0.45rem -3rem 0;
    font-size: 2rem;
  }
  .dress-modal__header { margin-bottom: 0.8rem; padding-inline: 1.8rem; }
  .dress-modal__header h2 { font-size: clamp(2.55rem, 12cqw, 4.2rem); }
  .dress-modal__ornament { margin-top: 0.35rem; }
  .dress-modal__eyebrow { letter-spacing: 0.12em; }
  .dress-modal__intro { font-size: clamp(0.75rem, 3cqw, 0.98rem); }
  .dress-modal__sides { gap: 0.28rem; }
  .dress-side + .dress-side { padding-left: 0.28rem; }
  .dress-side h3 { gap: 0.2rem 0.3rem; letter-spacing: 0.02em; }
  .dress-side h3::before,
  .dress-side h3::after { width: 10px; }
  .dress-side__people { max-height: none; }
  .dress-side__labels { font-size: clamp(0.42rem, 1.8cqw, 0.62rem); }
  .dress-side__palette-title { gap: 0.25rem; letter-spacing: 0.02em; }
  .dress-side__palette-title::before,
  .dress-side__palette-title::after { width: 10px; }
  .dress-modal__note { padding-inline: 0.65rem; }
}

@media (max-width: 440px) {
  .event-action-row { display: grid; grid-template-columns: 1fr; }
  .event-action-row .btn { width: 100%; }
  .dress-modal__header { padding-inline: 1rem; }
  .dress-modal__eyebrow { font-size: 0.58rem; }
  .dress-modal__intro { font-size: 0.74rem; }
  .dress-side h3 { font-size: 0.49rem; }
  .dress-side__palette-title { font-size: 0.47rem; }
  .dress-modal__note { font-size: 0.72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dress-modal,
  .dress-modal__panel { transition: none; }
}

/* ========================================================================== 
   v65 — Dress-code modal alignment refinements
   Tight transparent corner art and compact palettes above each outfit group.
   ========================================================================== */
.dress-modal__accent {
  width: clamp(112px, 18cqw, 232px);
}
.dress-modal__accent--top-left {
  top: 0;
  left: 0;
}
.dress-modal__accent--top-right {
  top: 0;
  right: 0;
}
.dress-modal__accent--bottom-left {
  bottom: 0;
  left: 0;
}
.dress-modal__accent--bottom-right {
  right: 0;
  bottom: 0;
}

.dress-side__palette-title {
  margin: 0.35rem 0 0.2rem;
}
.dress-side__palette {
  display: block;
  width: min(58%, 280px);
  margin: 0 auto clamp(0.35rem, 1cqw, 0.75rem);
  mix-blend-mode: multiply;
}
.dress-side__people {
  display: block;
}

@media (max-width: 700px) {
  .dress-modal__accent { width: clamp(76px, 22cqw, 118px); }
  .dress-side__palette-title { margin-top: 0.2rem; }
  .dress-side__palette {
    width: min(86%, 170px);
    margin-bottom: 0.25rem;
  }
}

/* ========================================================================== 
   v66 — Viewport-fitting Holud modal
   The composition always fits inside the visible viewport with no scrolling.
   Corner florals sit above the decorative/content layers and use darken blend.
   ========================================================================== */
.dress-modal {
  padding: clamp(0.25rem, 1vmin, 0.9rem);
}

.dress-modal__panel {
  width: min(1120px, calc(100cqw - 0.6rem));
  max-width: 1120px;
  max-height: min(900px, calc(100dvh - 0.6rem));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dress-modal__content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.75rem, 4.2dvh, 3.7rem) clamp(0.65rem, 4cqw, 3.8rem) clamp(0.55rem, 1.7dvh, 1.4rem);
}

.dress-modal__accent {
  z-index: 20;
  mix-blend-mode: darken;
  pointer-events: none;
}

/* Keep the close control usable above the decorative corner artwork. */
.dress-modal__close {
  position: absolute;
  top: clamp(0.45rem, 1.4vmin, 0.85rem);
  right: clamp(0.45rem, 1.4vmin, 0.85rem);
  z-index: 30;
  margin: 0;
}

.dress-modal__header {
  flex: 0 0 auto;
  margin-bottom: clamp(0.35rem, 1.2dvh, 1rem);
}

.dress-modal__header h2 {
  font-size: clamp(2.35rem, min(6cqw, 7dvh), 5.5rem);
}

.dress-modal__ornament {
  margin-top: clamp(0.18rem, 0.7dvh, 0.5rem);
  margin-bottom: clamp(0.15rem, 0.55dvh, 0.4rem);
}

.dress-modal__eyebrow {
  margin-bottom: clamp(0.2rem, 0.7dvh, 0.5rem);
  font-size: clamp(0.58rem, min(1.15cqw, 1.45dvh), 0.92rem);
}

.dress-modal__intro {
  font-size: clamp(0.72rem, min(1.45cqw, 1.75dvh), 1.15rem);
  line-height: 1.28;
}

.dress-modal__sides {
  flex: 1 1 auto;
  min-height: 0;
  align-items: start;
  gap: clamp(0.35rem, 2cqw, 1.8rem);
}

.dress-side {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  align-content: start;
  min-height: 0;
}

.dress-side + .dress-side {
  padding-left: clamp(0.35rem, 2cqw, 1.8rem);
}

.dress-side h3 {
  margin-bottom: clamp(0.08rem, 0.4dvh, 0.3rem);
  font-size: clamp(0.55rem, min(1.25cqw, 1.4dvh), 0.92rem);
}

.dress-side__palette-title {
  margin: clamp(0.08rem, 0.35dvh, 0.25rem) 0 clamp(0.05rem, 0.25dvh, 0.18rem);
  font-size: clamp(0.48rem, min(1.05cqw, 1.2dvh), 0.78rem);
}

.dress-side__palette {
  width: min(48%, 230px);
  max-height: clamp(24px, 4.8dvh, 48px);
  object-fit: contain;
  margin-bottom: clamp(0.1rem, 0.45dvh, 0.35rem);
}

.dress-side__people {
  width: 100%;
  height: auto;
  max-height: min(43dvh, 430px);
  object-fit: contain;
  align-self: end;
}

.dress-side__labels {
  margin-top: -0.1rem;
  font-size: clamp(0.42rem, min(0.95cqw, 1.05dvh), 0.72rem);
}

.dress-modal__note {
  flex: 0 0 auto;
  margin-top: clamp(0.2rem, 0.8dvh, 0.75rem);
  font-size: clamp(0.68rem, min(1.25cqw, 1.45dvh), 1rem);
  line-height: 1.22;
}

@media (max-width: 700px) {
  .dress-modal__panel {
    width: calc(100cqw - 0.45rem);
    max-height: calc(100dvh - 0.45rem);
  }

  .dress-modal__content {
    padding: clamp(2.25rem, 5.2dvh, 2.8rem) 0.32rem clamp(0.4rem, 1dvh, 0.65rem);
  }

  .dress-modal__header {
    padding-inline: clamp(1.25rem, 6cqw, 2.2rem);
    margin-bottom: clamp(0.3rem, 0.8dvh, 0.6rem);
  }

  .dress-modal__header h2 {
    font-size: clamp(2.25rem, min(11cqw, 6.8dvh), 3.8rem);
  }

  .dress-modal__ornament {
    width: min(180px, 42%);
  }

  .dress-modal__eyebrow {
    font-size: clamp(0.48rem, min(2.25cqw, 1.15dvh), 0.68rem);
  }

  .dress-modal__intro {
    font-size: clamp(0.64rem, min(2.6cqw, 1.45dvh), 0.86rem);
  }

  .dress-modal__sides {
    gap: 0.18rem;
  }

  .dress-side + .dress-side {
    padding-left: 0.18rem;
  }

  .dress-side h3 {
    font-size: clamp(0.42rem, min(1.95cqw, 0.95dvh), 0.58rem);
  }

  .dress-side__palette-title {
    font-size: clamp(0.38rem, min(1.75cqw, 0.85dvh), 0.52rem);
  }

  .dress-side__palette {
    width: min(66%, 125px);
    max-height: clamp(18px, 3.8dvh, 32px);
    margin-bottom: 0.08rem;
  }

  .dress-side__people {
    max-height: min(38dvh, 340px);
  }

  .dress-side__labels {
    font-size: clamp(0.34rem, min(1.55cqw, 0.75dvh), 0.48rem);
  }

  .dress-modal__note {
    margin-top: clamp(0.12rem, 0.45dvh, 0.35rem);
    padding-inline: 1.2rem;
    font-size: clamp(0.58rem, min(2.2cqw, 1.1dvh), 0.76rem);
  }

  .dress-modal__accent {
    width: clamp(72px, min(22cqw, 14dvh), 112px);
  }

  .dress-modal__close {
    width: clamp(34px, 9cqw, 40px);
    height: clamp(34px, 9cqw, 40px);
    font-size: clamp(1.7rem, 7cqw, 2rem);
  }
}

@media (max-height: 650px) {
  .dress-modal__content {
    padding-top: 1.45rem;
    padding-bottom: 0.3rem;
  }
  .dress-modal__header h2 { font-size: clamp(2rem, 7dvh, 3.3rem); }
  .dress-modal__header { margin-bottom: 0.25rem; }
  .dress-modal__intro { font-size: clamp(0.62rem, 1.5dvh, 0.85rem); }
  .dress-side__people { max-height: 37dvh; }
  .dress-modal__note { margin-top: 0.1rem; }
}


/* ==========================================================================
   v67 — Outfit layer and palette order
   Outfit artwork is the lowest content layer; palettes follow the figures.
   ========================================================================== */
.dress-side {
  isolation: isolate;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
}

.dress-side__people {
  position: relative;
  z-index: 0;
}

.dress-side > :not(.dress-side__people) {
  position: relative;
  z-index: 2;
}

.dress-side__labels {
  margin-top: -0.1rem;
}

.dress-side__palette-title {
  margin: clamp(0.18rem, 0.65dvh, 0.55rem) 0 clamp(0.05rem, 0.25dvh, 0.18rem);
}

.dress-side__palette {
  margin: 0 auto;
}

@media (max-width: 700px) {
  .dress-side__palette-title {
    margin-top: clamp(0.08rem, 0.35dvh, 0.22rem);
  }
}


/* ==========================================================================
   v68 — Simplified Holud outfit labels and larger closing guidance
   ========================================================================== */
.dress-side {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.dress-modal__note {
  font-size: clamp(0.78rem, min(1.4cqw, 1.65dvh), 1.1rem);
}

@media (max-width: 700px) {
  .dress-modal__note {
    font-size: clamp(0.66rem, min(2.45cqw, 1.3dvh), 0.86rem);
  }
}

/* ========================================================================== 
   v69 — Holud modal border cleanup and stronger side headings
   ========================================================================== */
.dress-modal__panel::before {
  display: none;
}

.dress-side h3,
.dress-side h3 span,
.dress-side h3 b {
  font-weight: 700;
}

/* ========================================================================== 
   v70 — Sangeet & Wedding dress-code modal
   Reuses the Holud modal shell, controls, floral accents, and viewport fit.
   ========================================================================== */
.dress-modal--wedding .dress-modal__panel {
  width: min(1080px, calc(100cqw - 0.6rem));
  max-width: 1080px;
}

.wedding-dress-modal__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: clamp(2.1rem, 4.4dvh, 3.7rem) clamp(1rem, 5cqw, 4.4rem) clamp(0.55rem, 1.4dvh, 1.15rem);
}

.wedding-dress-modal__header {
  flex: 0 0 auto;
  max-width: 900px;
  margin-bottom: clamp(0.2rem, 0.7dvh, 0.6rem);
}

.wedding-dress-modal__header h2 {
  font-size: clamp(2.4rem, min(6cqw, 7dvh), 5.35rem);
  white-space: nowrap;
}

.wedding-dress-modal__showcase {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  justify-items: center;
  flex: 1 1 auto;
  min-height: 0;
}

.wedding-dress-modal__people {
  position: relative;
  z-index: 0;
  display: block;
  width: min(86%, 900px);
  height: 100%;
  min-height: 0;
  max-height: min(48dvh, 500px);
  object-fit: contain;
  object-position: center bottom;
  mix-blend-mode: multiply;
}

.wedding-dress-modal__palette-title {
  position: relative;
  z-index: 2;
  width: min(500px, 62%);
  margin: clamp(0.08rem, 0.35dvh, 0.28rem) 0 clamp(0.02rem, 0.15dvh, 0.12rem);
  color: #c47c28;
  font-weight: 500;
}

.wedding-dress-modal__palette {
  position: relative;
  z-index: 2;
  display: block;
  width: min(47%, 430px);
  max-height: clamp(26px, 5.2dvh, 52px);
  object-fit: contain;
  mix-blend-mode: multiply;
}

.wedding-dress-modal__note {
  flex: 0 0 auto;
  width: min(820px, 88%);
  margin-top: clamp(0.2rem, 0.7dvh, 0.65rem);
}

@media (max-width: 700px) {
  .dress-modal--wedding .dress-modal__panel {
    width: calc(100cqw - 0.45rem);
  }

  .wedding-dress-modal__content {
    padding: clamp(2.15rem, 5dvh, 2.65rem) 0.35rem clamp(0.35rem, 0.8dvh, 0.55rem);
  }

  .wedding-dress-modal__header {
    padding-inline: clamp(1.4rem, 6cqw, 2.4rem);
    margin-bottom: clamp(0.15rem, 0.45dvh, 0.35rem);
  }

  .wedding-dress-modal__header h2 {
    font-size: clamp(1.75rem, min(8.4cqw, 5.8dvh), 3rem);
    white-space: normal;
    line-height: 0.96;
  }

  .wedding-dress-modal__header .dress-modal__eyebrow {
    font-size: clamp(0.46rem, min(2.2cqw, 1.05dvh), 0.66rem);
  }

  .wedding-dress-modal__header .dress-modal__intro {
    font-size: clamp(0.61rem, min(2.55cqw, 1.35dvh), 0.83rem);
    line-height: 1.24;
  }

  .wedding-dress-modal__desktop-break { display: none; }

  .wedding-dress-modal__people {
    width: min(94%, 700px);
    max-height: min(46dvh, 420px);
  }

  .wedding-dress-modal__palette-title {
    width: min(260px, 58%);
    font-size: clamp(0.42rem, min(1.9cqw, 0.9dvh), 0.58rem);
  }

  .wedding-dress-modal__palette {
    width: min(59%, 235px);
    max-height: clamp(22px, 4.3dvh, 38px);
  }

  .wedding-dress-modal__note {
    width: 92%;
    font-size: clamp(0.57rem, min(2.25cqw, 1.12dvh), 0.76rem);
  }
}

@media (max-height: 650px) {
  .wedding-dress-modal__content {
    padding-top: 1.35rem;
    padding-bottom: 0.25rem;
  }

  .wedding-dress-modal__header h2 {
    font-size: clamp(1.8rem, 6.6dvh, 3.1rem);
  }

  .wedding-dress-modal__people {
    max-height: 41dvh;
  }

  .wedding-dress-modal__palette {
    max-height: 4dvh;
  }
}


/* v72 — Wedding modal copy and palette position refinements */
.wedding-dress-modal__palette-title {
  transform: translateY(-0.38rem);
  margin-bottom: -0.24rem;
}
.wedding-dress-modal__palette {
  transform: translateY(-0.38rem);
}
@media (max-width: 700px) {
  .wedding-dress-modal__palette-title,
  .wedding-dress-modal__palette {
    transform: translateY(-0.22rem);
  }
}

/* ========================================================================== 
   v73 — Modal divider and palette-label spacing refinements
   Lower the title ornament slightly, and lift palette headings away from the
   swatch artwork without moving the swatches themselves.
   ========================================================================== */
.dress-modal__header .dress-modal__ornament {
  margin-top: clamp(0.45rem, 1.15dvh, 0.8rem);
}

/* Holud palette headings */
.dress-side__palette-title {
  transform: translateY(-0.24rem);
  margin-bottom: 0.16rem;
}

/* Wedding heading moves farther up while its palette stays in place. */
.wedding-dress-modal__palette-title {
  transform: translateY(-1.05rem);
  margin-bottom: 0.04rem;
}
.wedding-dress-modal__palette {
  transform: translateY(-0.38rem);
}

@media (max-width: 700px) {
  .dress-modal__header .dress-modal__ornament {
    margin-top: clamp(0.42rem, 0.95dvh, 0.62rem);
  }

  .dress-side__palette-title {
    transform: translateY(-0.17rem);
    margin-bottom: 0.11rem;
  }

  .wedding-dress-modal__palette-title {
    transform: translateY(-0.42rem);
    margin-bottom: -0.04rem;
  }
  .wedding-dress-modal__palette {
    transform: translateY(-0.22rem);
  }
}


/* ==========================================================================
   v74 — Wedding card structure mirrors Holud
   Stack Ceremony and Reception in the left column; keep dress code and both
   actions in the right column so button placement matches the Holud card.
   ========================================================================== */
.wedding-schedule {
  display: grid;
  gap: var(--space-2);
}
.wedding-schedule__item + .wedding-schedule__item {
  border-top: 1px solid rgba(201, 163, 92, 0.28);
  padding-top: var(--space-2);
}
.wedding-schedule__item p:last-child {
  margin-bottom: 0;
}



/* ==========================================================================
   v75 — Larger top-corner floral accents
   Fixed pixel sizing for consistent presence across viewport widths.
   ========================================================================== */
.corner-art {
  width: 333px;
}

@media (max-width: 760px) {
  .corner-art {
    width: 145px;
  }
}


/* ==========================================================================
   v76 — Responsive top-corner floral size tiers
   Fixed pixel sizes at four viewport ranges.
   ========================================================================== */
.corner-art {
  width: 333px;
}

@media (max-width: 600px) {
  .corner-art {
    width: 200px;
  }
}

@media (min-width: 601px) and (max-width: 899px) {
  .corner-art {
    width: 250px;
  }
}

@media (min-width: 1600px) {
  .corner-art {
    width: 450px;
  }
}

/* ==========================================================================
   v77 — Authenticated invitation-group RSVP flow
   Scoped additions preserve the existing dusk page and shared form language.
   ========================================================================== */
.rsvp-app { min-width: 0; }

.rsvp-app [hidden] { display: none !important; }

.rsvp-state {
  padding: clamp(1.6rem, 5cqw, var(--space-5));
  text-align: center;
}

.rsvp-state > .icon-badge {
  width: 66px;
  height: 66px;
  margin: 0 auto var(--space-2);
}

.rsvp-form-heading {
  text-align: center;
  margin-bottom: var(--space-3);
}

.rsvp-form-heading h2,
.rsvp-state h2 {
  font-size: clamp(1.75rem, 4cqw, 2.35rem);
}

.rsvp-members {
  display: grid;
  gap: var(--space-3);
}

.rsvp-member-card,
.rsvp-children,
.rsvp-review-card {
  border: 1px solid rgba(201, 163, 92, 0.34);
  border-radius: var(--radius-sm);
  padding: clamp(1rem, 3cqw, 1.5rem);
  background: rgba(255, 253, 248, 0.52);
}

.rsvp-member-name,
.rsvp-children h3,
.rsvp-review-card h3 {
  font-size: clamp(1.5rem, 3cqw, 1.72rem);
  margin-bottom: var(--space-2);
}

.rsvp-child-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0 var(--space-2);
}

@media (min-width: 601px) {
  .rsvp-child-counts {
    grid-template-rows: auto auto;
  }

  .rsvp-child-counts > .field {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    align-items: start;
  }
}

.rsvp-attendance-field {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-2);
  min-width: 0;
}

.rsvp-segment {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

.rsvp-segment label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  line-height: 1.15;
  text-align: center;
}

.rsvp-meal-field[hidden] { display: none; }

.rsvp-children,
.rsvp-custom-question-field,
.rsvp-message-field,
.rsvp-email-field { margin-top: var(--space-3); }

.rsvp-children[hidden] { display: none; }

.rsvp-children .hint { margin-bottom: var(--space-2); }

.rsvp-actions {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
}

.rsvp-actions--row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.rsvp-text-button {
  border: 0;
  padding: 0.35rem;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.rsvp-text-button:hover { color: var(--gold-soft); }

.rsvp-device-action {
  display: grid;
  justify-items: center;
  gap: 0.1rem;
}

.rsvp-device-note {
  max-width: 32rem;
  margin: 0;
  text-align: center;
}

.rsvp-text-button:focus-visible,
.rsvp-error-summary a:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
}

.rsvp-error-summary {
  border: 1px solid #dba8a8;
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
  margin-bottom: var(--space-3);
  background: #fbecec;
  color: #8f3131;
  text-align: left;
}

.rsvp-error-summary h3 {
  color: inherit;
  font-size: 1.08rem;
  margin-bottom: 0.45rem;
}

.rsvp-error-summary ul {
  margin: 0;
  padding-left: 1.2rem;
}

.rsvp-error-summary a { color: inherit; }

.rsvp-error-summary .btn { margin-top: 0.55rem; }

.rsvp-attendance-field.invalid .segment,
.rsvp-meal-field.invalid select,
.rsvp-email-field.invalid input,
[aria-invalid="true"] {
  border-color: #d78686;
  box-shadow: 0 0 0 2px rgba(215, 134, 134, 0.18);
}

.rsvp-review-content {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  text-align: left;
  overflow-wrap: anywhere;
}

.rsvp-review-line { margin: 0.25rem 0; }

.rsvp-closed-note {
  border-left: 3px solid var(--gold-soft);
  padding: 0.65rem 0.9rem;
  margin: 0;
}

body.theme-dark .rsvp-member-card,
body.theme-dark .rsvp-children,
body.theme-dark .rsvp-review-card {
  background: rgba(14, 12, 26, 0.4);
  border-color: rgba(201, 163, 92, 0.38);
}

body.theme-dark .rsvp-error-summary {
  background: rgba(120, 40, 40, 0.35);
  border-color: rgba(210, 130, 130, 0.5);
  color: #f2c8c8;
}

body.theme-dark .rsvp-error-summary h3 { color: #f2c8c8; }

@media (max-width: 600px) {
  .rsvp-child-counts { grid-template-columns: 1fr; }

  .rsvp-segment label { padding-inline: 0.65rem; }

  .rsvp-actions--row {
    display: grid;
    justify-items: stretch;
  }

  .rsvp-actions--row .btn { width: 100%; }
}

/* ==========================================================================
   v80 — RSVP invitation-card and form-control polish
   Keeps the established dusk-and-gold visual language while improving the
   hierarchy and responsive behavior of the authenticated RSVP form.
   ========================================================================== */
.rsvp-member-card {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius-sm) + 0.4rem);
  padding: clamp(1.2rem, 3.5cqw, 1.8rem);
  background:
    radial-gradient(circle at 100% 0%, rgba(201, 163, 92, 0.14), transparent 38%),
    linear-gradient(145deg, rgba(255, 253, 248, 0.76), rgba(250, 243, 229, 0.5));
  border-color: rgba(201, 163, 92, 0.5);
  box-shadow:
    0 16px 36px rgba(34, 24, 48, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.rsvp-member-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(1rem, 6cqw, 3rem);
  right: clamp(1rem, 6cqw, 3rem);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}

.rsvp-member-name {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--navy);
  letter-spacing: 0.035em;
}

.rsvp-member-name::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 163, 92, 0.62), transparent);
}

.rsvp-app select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 3.15rem;
  border-radius: 0.8rem;
  padding-right: 3rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b38b3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.05rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

.rsvp-app select:hover {
  border-color: rgba(176, 141, 62, 0.78);
}

.rsvp-app textarea {
  field-sizing: content;
  min-height: 6.25rem;
  overflow-wrap: anywhere;
}

.rsvp-app textarea::placeholder {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.rsvp-wrapping-input {
  position: relative;
}

.rsvp-wrapping-input input {
  min-height: 3.15rem;
}

.rsvp-wrapping-placeholder {
  position: absolute;
  inset: 0.8rem 1rem;
  color: #9aa1ad;
  font-style: italic;
  line-height: 1.4;
  overflow-wrap: anywhere;
  pointer-events: none;
}

.rsvp-wrapping-input input:not(:placeholder-shown) + .rsvp-wrapping-placeholder {
  display: none;
}

.rsvp-device-action {
  width: 100%;
  gap: 0;
  padding-bottom: calc(0.75rem + 10px);
}

.rsvp-device-action .rsvp-text-button {
  padding: 0.25rem 0.35rem 0.05rem;
}

.rsvp-device-note {
  width: min(32rem, calc(100% - clamp(6rem, 28cqw, 8rem)));
  max-width: none;
  margin-top: -0.12rem;
  line-height: 1.25;
}

body.theme-dark .rsvp-member-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(201, 163, 92, 0.17), transparent 38%),
    linear-gradient(145deg, rgba(28, 23, 46, 0.82), rgba(12, 11, 24, 0.62));
  border-color: rgba(201, 163, 92, 0.52);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 240, 205, 0.08);
}

body.theme-dark .rsvp-member-name {
  color: #f4ecdc;
}

body.theme-dark .rsvp-app select {
  background-color: rgba(14, 12, 26, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 240, 205, 0.08);
}

body.theme-dark .rsvp-wrapping-placeholder {
  color: #8f86a0;
}

@media (max-width: 600px) {
  .rsvp-member-card {
    padding: 1.2rem 1rem;
  }

  .rsvp-message-field textarea {
    min-height: 7.25rem;
  }

  .rsvp-wrapping-input input {
    min-height: 5.2rem;
    padding-block: 0.85rem;
  }
}

/* ==========================================================================
   v88 — Supplied floral corners on the outer RSVP panel
   The adult and Children cards remain clean while the enclosing panel carries
   Adam's gold floral artwork, rotated into each corner.
   ========================================================================== */
#rsvp-form {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#rsvp-success {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#rsvp-form > *,
#rsvp-success > * {
  position: relative;
  z-index: 1;
}

body.theme-dark #rsvp-form {
  background:
    radial-gradient(circle at 0% 0%, rgba(201, 163, 92, 0.1), transparent 24rem),
    radial-gradient(circle at 100% 100%, rgba(201, 163, 92, 0.08), transparent 24rem),
    rgba(20, 18, 34, 0.55);
}

#rsvp-form > .rsvp-panel-corner,
#rsvp-success > .rsvp-panel-corner {
  position: absolute;
  z-index: 2;
  width: clamp(6.84rem, 20.52cqw, 11.54rem);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  mix-blend-mode: normal;
  opacity: 0.6;
  pointer-events: none;
}

.rsvp-panel-corner--top-left,
.rsvp-panel-corner--top-right {
  aspect-ratio: 764 / 989;
  top: 0.7rem;
  background-image: url("/assets/rsvp-floral-corner-top.214cc700f73f.png");
}

.rsvp-panel-corner--bottom-left,
.rsvp-panel-corner--bottom-right {
  aspect-ratio: 876 / 1023;
  bottom: 0.7rem;
  background-image: url("/assets/rsvp-floral-corner-bottom.2a8b1fb6d682.png");
}

.rsvp-panel-corner--top-left,
.rsvp-panel-corner--bottom-left { left: 0.7rem; }

.rsvp-panel-corner--top-right,
.rsvp-panel-corner--bottom-right {
  right: 0.7rem;
  transform: scaleX(-1);
}

@media (max-width: 600px) {
  #rsvp-form > .rsvp-panel-corner,
  #rsvp-success > .rsvp-panel-corner {
    width: clamp(5.99rem, 29.07cqw, 8.12rem);
  }
}

@media (max-width: 530px) {
  #rsvp-form .rsvp-form-heading > .eyebrow {
    padding-top: 2.75rem;
  }
}

/* Keep Venue/RSVP intro dividers identical to the Events intro divider.
   Events constrains its desktop title block to min(1140px, 64%), then lets
   the divider use its intrinsic width within that block. Mirror that layout
   instead of approximating it with viewport units. */
@media (min-width: 900px) {
  .scene--raised-art > .scene-copy {
    width: min(1140px, 64%);
    padding-inline: 0;
  }

  .scene--raised-art .img-divider--sm {
    width: auto;
  }
}

@media (max-width: 899.98px) {
  .scene--raised-art > .scene-copy {
    width: 100%;
    padding-inline: 1.25rem;
  }

  .scene--raised-art .img-divider--sm {
    width: auto;
  }
}

/* Programmatic RSVP heading focus is retained for assistive technology, but
   these non-interactive headings should not look like selected controls. */
.rsvp-app h2[tabindex="-1"]:focus,
.rsvp-app h2[tabindex="-1"]:focus-visible {
  outline: none;
}

/* Give the couple's names a little more air without moving the surrounding
   home composition substantially. */
.hero-sky .hero-names {
  margin-block: clamp(1.25rem, 2.4cqw, 2.75rem);
}

/* Keep the extracted intro-divider spacing equivalent to the former inline
   style. This rule must follow the shared .img-divider margin declaration. */
.img-divider.img-divider--intro {
  margin: 0.6rem auto 1rem;
}

/* Preserve Main's floral-frame scale and position. Keep the welcome sentence,
   divider, and countdown centered as one group, including when the countdown
   is wider than its flex column at intermediate desktop widths. */
.welcome-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.welcome-col .welcome-text {
  width: 100%;
}

.welcome-col .countdown {
  flex: none;
  width: max-content;
  margin-inline: 0;
}

.welcome-col .countdown--private-message {
  width: min(100%, 28rem);
  min-height: 6rem;
  justify-content: center;
  align-items: center;
  padding-inline: 1.5rem;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.35cqw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}

@media (min-width: 900px) {
  .welcome-col {
    transform: translateX(clamp(-2.25rem, -2.5cqw, -1.25rem));
  }
}

/* The fixed mobile tier is intentionally reduced only on very narrow phones. */
@media (max-width: 429.98px) {
  .corner-art {
    width: 170px;
  }
}

/* Text uses a deeper gold than decorative rules so the palette retains its
   character while meeting WCAG AA contrast on ivory and glass surfaces. */
.eyebrow,
.tag--gold {
  color: var(--gold-text);
}

/* The home painting and countdown support the lightest AA-compliant gold,
   keeping their appearance much closer to the production palette. */
.scene--home .hero-tagline,
.scene--home .hero-date .label,
.scene--home .hero-venue-sub,
.count-unit .unit {
  color: var(--gold-text-home);
}

body.theme-dark .eyebrow,
body.theme-dark .count-unit .unit {
  color: #ead9b8;
}

body.theme-dusk .scene--raised-art > .scene-copy .page-title,
body.theme-dusk .scene--raised-art > .scene-copy .page-sub {
  color: #fffaf2;
}

body.theme-dusk .scene--raised-art > .scene-copy .page-sub {
  font-weight: 700;
}

#rsvp-success .rsvp-actions--row {
  padding-bottom: 2rem;
}

.rsvp-success-device {
  margin-top: var(--space-3);
  padding: 1.1rem clamp(1rem, 3cqw, 1.5rem);
  text-align: center;
}

.rsvp-success-device .rsvp-device-action {
  padding-bottom: 0;
}

@media (max-width: 600px) {
  #rsvp-success > .rsvp-panel-corner {
    width: clamp(4rem, 20cqw, 5.5rem);
  }

  #rsvp-success .rsvp-actions--row {
    justify-items: center;
  }

  #rsvp-success .rsvp-actions--row .btn {
    width: min(100%, 9.5rem);
    padding-inline: 0.65rem;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    white-space: nowrap;
  }
}

/* ==========================================================================
   Responsive home and Venue composition refinements
   Stack the photo/note before their columns become cramped, retain substantial
   floral framing, and move wrapping hero actions below the skyline.
   ========================================================================== */
@media (max-width: 1299.98px) {
  .photo-row {
    margin-top: clamp(1.5rem, 3cqw, 2.5rem);
  }

  .photo-row .center {
    flex-direction: column;
    gap: clamp(1.25rem, 3cqw, 2.25rem);
    padding: clamp(2rem, 4cqw, 3.25rem) clamp(2rem, 8cqw, 6rem);
  }

  .photo-col {
    width: 100%;
  }

  .photo-tilt {
    width: clamp(260px, 42cqw, 500px);
  }

  .welcome-col {
    flex: none;
    width: min(100%, 28rem);
    max-width: 28rem;
    min-width: 0;
    transform: none;
  }

  .photo-row .edge {
    height: clamp(30rem, 78cqw, 53rem);
  }
}

/* The 900–1299px home layout stacks the photo and note, but the buttons remain
   over the skyline. Pull the stacked row upward on a continuous scale so the
   button-to-photo spacing matches both adjacent compositions. */
@media (min-width: 900px) and (max-width: 1299.98px) {
  .scene--home + .photo-row {
    margin-top: calc(9rem - 24.5cqw);
  }
}

@media (max-width: 899.98px) {
  .welcome-col {
    width: min(calc(100% - 2rem), 22rem);
    max-width: 22rem;
  }

  .welcome-col .welcome-text {
    max-width: 18rem;
  }
}

@media (max-width: 430px) {
  .scene--home .hero-water {
    position: relative;
    inset: auto;
    width: min(100% - 2rem, 17rem);
    margin: 1rem auto 0;
    padding: 0 0 1.5rem;
    transform: none;
  }

  .scene--home .hero-water .hero-ctas {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .scene--home .hero-water .btn {
    width: 100%;
  }

  .welcome-col .countdown > .sep:nth-last-child(2),
  .welcome-col .countdown > .count-unit:last-child {
    display: none;
  }

  body.theme-evening .scene--raised-art > .scene-art {
    padding-top: 8.25rem;
  }
}

@media (max-width: 350px) {
  .welcome-col .countdown {
    gap: 0.5rem;
    padding-inline: 0.75rem;
  }

  .welcome-col .count-unit {
    min-width: 2.5rem;
  }

  .welcome-col .count-unit .num {
    font-size: 1.6rem;
  }
}

/* Keep the complete home invitation hierarchy continuous across the 900px
   composition change. Earlier desktop and mobile tiers used unrelated minimums,
   causing several lines to shrink and then jump larger as the viewport narrowed. */
.scene--home .hero-sky .hero-eyebrow {
  font-size: clamp(0.75rem, 1.1cqw, 1.3125rem);
  letter-spacing: clamp(0.08em, 0.45cqw, 0.35em);
}

.scene--home .hero-sky .hero-names {
  font-size: clamp(4rem, 9cqw, 10.5rem);
}

.scene--home .hero-sky .hero-tagline {
  font-size: clamp(0.875rem, 1.285cqw, 1.6rem);
}

.scene--home .hero-sky .hero-date .day {
  font-size: clamp(1.625rem, 2.2cqw, 2.875rem);
}

.scene--home .hero-sky .hero-date .label {
  font-size: clamp(0.8rem, 1cqw, 1.1875rem);
}

.scene--home .hero-sky .hero-venue {
  font-size: clamp(0.95rem, 1.38cqw, 1.725rem);
}

.scene--home .hero-sky .hero-venue-sub {
  font-size: clamp(0.78rem, 1.1cqw, 1.3125rem);
}

/* Start lowering the skyline before the desktop composition becomes cramped.
   The image, its overlaid actions, and the section's reserved space move by the
   same amount, so the artwork progresses smoothly into the stacked layout at
   900px instead of making one abrupt jump there. */
@media (min-width: 900px) and (max-width: 1153.32px) {
  .scene--home .hero-stage {
    --home-skyline-shift: clamp(0px, calc(1492.82px - 129.44cqw), 327.9px);
    margin-bottom: var(--home-skyline-shift);
  }

  body.invitation-state-public .scene--home .hero-stage {
    --home-skyline-shift: clamp(0px, calc(1314.8px - 114cqw), 288.8px);
  }

  .scene--home .scene-art {
    transform: translateY(var(--home-skyline-shift));
  }

  .scene--home .hero-water {
    transform: translate(-50%, var(--home-skyline-shift));
  }
}

/* Keep the narrow composition moving in the same direction. The earlier
   620px tier increased the overlap from -16cqw to -26cqw, which pulled the
   skyline back upward before it descended again at smaller widths. */
@media (max-width: 620px) {
  .scene--home .hero-sky {
    margin-bottom: -16cqw;
  }
}

/* Give the Events skyline the same continuous descent without sharing rules
   with the independently tuned Venue, RSVP, or FAQ artwork. */
@media (min-width: 900px) and (max-width: 1153.32px) {
  .page-events main > .scene .hero-stage {
    --events-skyline-shift: clamp(0px, calc(678.34px - 58.82cqw), 149px);
    margin-bottom: var(--events-skyline-shift);
  }

  .page-events main > .scene .scene-art {
    transform: translateY(var(--events-skyline-shift));
  }
}

@media (max-width: 620px) {
  .page-events .hero-sky--page {
    margin-bottom: -16cqw;
  }
}

/* ==========================================================================
   Responsive floral, outfit-modal, and Venue spacing refinements
   ========================================================================== */

/* Keep the home framing anchored at the same horizontal position. Below 500px
   its height scales linearly with the viewport instead of sliding outward. */
.photo-row .edge {
  display: block;
}

@media (max-width: 500px) {
  .photo-row .edge {
    height: clamp(16rem, calc(100cqw - 20px), 30rem);
  }

  .photo-tilt {
    width: clamp(13rem, 66cqw, 16rem);
  }

  .welcome-col .welcome-text {
    font-size: clamp(1rem, 4.4cqw, 1.25rem);
    width: min(9em, calc(100cqw - 3rem));
    max-width: none;
    margin-inline: auto;
  }
}

/* The top cherry-blossom corners remain visible but scale down gently on the
   narrowest screens so they do not crowd the page title. */
@media (max-width: 429.98px) {
  .corner-art {
    width: clamp(138px, 38cqw, 160px);
  }
}

/* Reduce the modal's fixed top reserve as its contents scale down. */
.dress-modal__content,
.wedding-dress-modal__content {
  padding-top: clamp(1.4rem, 2.7dvh, 2.25rem);
}

/* Give both Holud columns an equal artwork row so the groom and bride images,
   palette headings, and palette strips stay level despite different source
   image aspect ratios. */
.dress-side__people {
  width: 100%;
  height: min(43dvh, 47cqw, 430px);
  max-height: none;
  object-position: center bottom;
}

.dress-modal__note {
  display: grid;
  grid-template-columns: max-content max-content max-content;
  align-items: center;
  justify-content: center;
  column-gap: clamp(0.3rem, 0.75cqw, 0.65rem);
  width: max-content;
  max-width: min(45rem, calc(100% - clamp(7rem, 19cqw, 14rem)));
  padding-inline: 0;
}

.dress-modal__note-star {
  display: grid;
  place-items: center;
  margin: 0;
  line-height: 1;
}

.dress-modal__note-copy {
  min-width: 0;
  white-space: nowrap;
}

.dress-modal__note-break {
  display: none;
}

@media (min-width: 701px) {
  .wedding-dress-modal__note {
    font-size: clamp(0.78rem, min(1.35cqw, 1.55dvh), 0.98rem);
  }
}

@media (max-width: 700px) {
  .dress-modal__note-break {
    display: block;
  }

  .dress-modal__accent--bottom-left,
  .dress-modal__accent--bottom-right {
    width: clamp(52px, 15cqw, 104px);
  }
}

@media (max-width: 440px) {
  .dress-modal__note {
    font-size: clamp(0.5rem, 2.4cqw, 0.64rem);
  }
}

/* The fixed grid gap is useful between cards but excessive after a decorative
   Venue section divider. Pull only those divider headers closer to the card
   that immediately follows. */
body.theme-evening .section-header--flush {
  margin-bottom: -1.5rem;
}

@media (max-width: 700px) {
  .dress-modal__content,
  .wedding-dress-modal__content {
    padding-top: clamp(1.65rem, 3.4dvh, 2rem);
  }
}

@media (max-height: 650px) {
  .dress-modal__content,
  .wedding-dress-modal__content {
    padding-top: 1.15rem;
  }
}

/* ===========================================================================
   Venue intro: stable subtitle wrapping and continuous skyline descent
   ========================================================================== */

/* Keep the Venue subtitle on one line until the composition actually becomes
   narrow. Its intrinsic width may exceed the shared 64% title column, so let
   this page-specific line size itself without changing the other page intros. */
@media (min-width: 550px) {
  .page-venue .scene--raised-art > .scene-copy .page-sub {
    width: max-content;
    max-width: calc(100cqw - 2.5rem);
    white-space: nowrap;
  }
}

/* Lower the Venue artwork on the same 1090px-to-900px interval used by the
   Home and Events compositions. Padding keeps the image in normal flow and
   reserves exactly the space it occupies, avoiding overlap and breakpoint
   snap-back. */
@media (min-width: 900px) and (max-width: 1089.98px) {
  body.page-venue .scene--raised-art > .scene-art {
    --venue-skyline-shift: clamp(0px, calc(129.08px - 11.84cqw), 22.5px);
    padding-top: calc(
      clamp(3.5rem, calc(8.5rem - 4cqw), 6.25rem) + var(--venue-skyline-shift)
    );
  }
}

@media (max-width: 899.98px) {
  body.page-venue .scene--raised-art > .scene-art {
    padding-top: 122.5px;
  }
}

/* Below 550px the subtitle becomes a balanced two-line block. Add one line's
   matching artwork clearance at that same breakpoint so the text and skyline
   remain synchronized. */
@media (max-width: 549.98px) {
  .page-venue .scene--raised-art > .scene-copy .page-sub {
    width: min(23rem, 100%);
    max-width: 100%;
    white-space: normal;
    text-wrap: balance;
  }

  body.page-venue .scene--raised-art > .scene-art {
    padding-top: 192px;
  }
}