:root {
  --green: #3f6f53;
  --green-deep: #173a2b;
  --green-dark: #0d2b23;
  --blue: #b9e7ff;
  --blue-bright: #d7f3fb;
  --ivory: #f5f0e8;
  --paper: #fbf8f1;
  --ink: #20312a;
  --muted: #6d746f;
  --midnight: #07161c;
  --line: rgba(32,49,42,.18);
  --shadow: 0 22px 70px rgba(8,25,20,.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Inter", sans-serif;
  font-weight: 300;
  line-height: 1.65;
}
body.menu-open { overflow: hidden; }

h1,h2,h3,.ring-phrase {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
}
h1,h2,h3,p { margin-top: 0; }
h2 {
  font-size: clamp(2.6rem, 5vw, 5rem);
  line-height: .95;
  margin-bottom: 1.4rem;
}
p { font-size: 1rem; }
a { color: inherit; }

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 76px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 0 3vw;
  color: white;
  background: rgba(7,22,28,.58);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.monogram {
  text-decoration: none;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.7rem;
  letter-spacing: .06em;
}
.monogram .amp { font-size: 1rem; margin: 0 .18rem; color: var(--blue); }
.main-nav {
  display: flex;
  justify-content: center;
  gap: 1.8rem;
}
.main-nav a, .lang-switch {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .19em;
  text-decoration: none;
  font-weight: 500;
}
.main-nav a { opacity: .86; transition: opacity .25s ease; }
.main-nav a:hover { opacity: 1; }
.lang-switch {
  color: white;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-toggle { display: none; }

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: white;
  text-align: center;
  background:
    radial-gradient(circle at 50% 18%, rgba(57,112,126,.24), transparent 34%),
    linear-gradient(180deg, #07161c 0%, #0b2425 56%, #163b2d 100%);
}
.hero::after {
  content:"";
  position:absolute; inset:auto 0 0;
  height: 28vh;
  background: linear-gradient(180deg, transparent, rgba(4,15,17,.66));
  pointer-events:none;
}
.hero-content {
  position: relative;
  z-index: 4;
  max-width: 980px;
  padding: 9rem 1.5rem 6rem;
}
.eyebrow {
  font-size: .74rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 1.25rem;
}
.hero h1 {
  font-size: clamp(4rem, 10vw, 8.6rem);
  line-height: .74;
  letter-spacing: .02em;
  margin: 1.5rem 0 2.2rem;
}
.hero h1 .name-placeholder { display:block; }
.hero-amp {
  display:block;
  color: var(--blue);
  font-size: .48em;
  line-height: 1.15;
  margin: .12em 0 .1em;
  font-style: italic;
}
.ring-phrase {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-style: italic;
  margin-bottom: .2rem;
}
.ring-translation { color: rgba(255,255,255,.68); font-style: italic; }
.hero-actions { display:flex; gap:1rem; justify-content:center; margin-top:2.7rem; flex-wrap:wrap; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 185px;
  padding: 1rem 1.4rem;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.38);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  font-weight: 500;
  transition: transform .25s ease, filter .25s ease;
  cursor: pointer;
}
.button:hover { transform: translateY(-2px); filter: brightness(1.05); }
.button-green { background: var(--green); color: white; }
.button-blue { background: var(--blue); color: #17323b; }

.glowworms { position:absolute; inset:0; z-index:2; pointer-events:none; }
.glowworms i {
  position:absolute;
  left: var(--x); top: var(--y);
  width: calc(7px * var(--s));
  height: calc(7px * var(--s));
  border-radius:50%;
  background:#bff2ff;
  box-shadow: 0 0 8px #7be2ff, 0 0 20px #39c4ff, 0 0 42px rgba(57,196,255,.55);
  animation: pulse var(--d) ease-in-out infinite alternate;
}
.glowworms i::before {
  content:"";
  position:absolute;
  top: 8px;
  left: 50%;
  width: 1px;
  height: calc(70px * var(--s));
  transform: translateX(-50%);
  background: linear-gradient(rgba(139,222,255,.55), transparent);
}
@keyframes pulse { from { opacity:.35; transform:scale(.8); } to { opacity:1; transform:scale(1.2); } }

.hero-vines { position:absolute; inset:0 0 auto; height: 250px; z-index:1; opacity:.23; }
.hero-vines svg { width:100%; height:100%; }
.hero-vines path { fill:none; stroke:#7ca184; stroke-width:2; vector-effect:non-scaling-stroke; }

.scroll-cue {
  position:absolute; bottom:1.7rem; left:50%; transform:translateX(-50%); z-index:5;
  width:24px; height:42px; border:1px solid rgba(255,255,255,.35); border-radius:20px;
}
.scroll-cue span {
  position:absolute; top:8px; left:50%; width:4px; height:4px; margin-left:-2px;
  border-radius:50%; background:white; animation:scrollDot 1.8s infinite;
}
@keyframes scrollDot { 0%{transform:translateY(0);opacity:1} 75%{transform:translateY(16px);opacity:.1} 100%{opacity:0} }

.paper-section { position:relative; background:var(--paper); overflow:hidden; }
.section-inner { width:min(1180px, 90vw); margin:0 auto; padding:8.5rem 0; }
.section-inner.narrow { width:min(760px, 86vw); text-align:center; }
.lead { max-width: 760px; font-family:"Cormorant Garamond",serif; font-size:clamp(1.35rem,2.5vw,2rem); line-height:1.35; color:#44554c; }
.accent-blue { color:#91bfd1; }
.accent-green { color:var(--green); }
.script-line { margin-top:2.4rem; font-family:"Cormorant Garamond",serif; font-size:2rem; font-style:italic; color:var(--green); }

.welcome { min-height: 72vh; display:grid; place-items:center; }
.welcome .section-inner { position:relative; z-index:2; }
.botanical { position:absolute; bottom:-30px; width:230px; opacity:.55; }
.botanical-left { left:0; }
.botanical-right { right:0; }
.botanical svg { width:100%; height:auto; }
.botanical path { fill:none; stroke:var(--green); stroke-width:2.4; stroke-linecap:round; }

.dark-section { background:var(--midnight); color:white; }
.story-grid {
  width:min(1220px, 90vw); margin:auto; padding:8rem 0;
  display:grid; grid-template-columns: .85fr 1.15fr; align-items:center; gap:6vw;
}
.story-copy p:not(.eyebrow) { color:rgba(255,255,255,.72); }
.story-quote {
  border-left:1px solid rgba(198,227,238,.68);
  padding-left:1.4rem; margin-top:2rem; display:flex; flex-direction:column;
  font-family:"Cormorant Garamond",serif;
}
.story-quote span { font-size:2rem; font-style:italic; }
.story-quote small { color:rgba(255,255,255,.55); }
.engagement-photo { margin:0; position:relative; }
.engagement-photo::before {
  content:""; position:absolute; inset:-18px; border:1px solid rgba(198,227,238,.34); z-index:0;
}
.engagement-photo img {
  position:relative; z-index:1; width:100%; display:block; max-height:720px; object-fit:cover;
  box-shadow:0 30px 90px rgba(0,0,0,.42);
}

.wedding { position:relative; }
.winter-vines { position:absolute; bottom:0; left:0; right:0; opacity:.22; }
.winter-vines svg { width:100%; height:auto; }
.winter-vines path { fill:none; stroke:#64776d; stroke-width:2; }
.info-cards { display:grid; grid-template-columns:repeat(3,1fr); margin-top:4rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.info-card { padding:2.5rem 2rem; border-right:1px solid var(--line); }
.info-card:last-child { border-right:0; }
.info-card h3 { font-size:2rem; margin:.4rem 0 .7rem; }
.card-number { font-size:.7rem; letter-spacing:.2em; color:var(--blue); font-weight:600; }

.split-section { display:grid; grid-template-columns:1fr 1fr; }
.split-panel { min-height:580px; padding:8rem 8vw; color:white; display:flex; flex-direction:column; justify-content:center; }
.green-panel { background:var(--green-deep); }
.blue-panel { background:#a9cedd; }
.split-panel h2 { max-width:540px; }
.split-panel p { max-width:540px; color:rgba(255,255,255,.78); }
.text-link { margin-top:1.2rem; text-transform:uppercase; letter-spacing:.15em; font-size:.74rem; text-decoration:none; font-weight:500; }

.mini-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); margin-top:4rem; }
.mini-grid div { padding:2rem 1rem; border-right:1px solid var(--line); }
.mini-grid div:last-child { border-right:0; }
.mini-grid span { display:block; color:var(--blue); font-size:.72rem; letter-spacing:.2em; margin-bottom:.5rem; }
.mini-grid strong { font-family:"Cormorant Garamond",serif; font-size:1.4rem; font-weight:500; }

.countdown-section {
  position:relative; overflow:hidden; color:white; text-align:center;
  min-height:62vh; display:grid; place-items:center;
  background:
    radial-gradient(circle at 50% 35%, rgba(58,143,166,.26), transparent 34%),
    linear-gradient(180deg,#07161c,#0c2a29);
}
.countdown-inner { position:relative; z-index:2; padding:6rem 1.5rem; }
.countdown { display:flex; justify-content:center; gap:clamp(1.5rem,6vw,5rem); margin:2.4rem 0; }
.countdown div { min-width:90px; }
.countdown strong { display:block; font-family:"Cormorant Garamond",serif; font-size:clamp(3rem,8vw,6rem); font-weight:400; line-height:.9; }
.countdown span { text-transform:uppercase; letter-spacing:.2em; font-size:.65rem; opacity:.65; }
.glow-dots { position:absolute; inset:0; background-image:
 radial-gradient(circle at 10% 30%, #8adfff 0 2px, transparent 3px),
 radial-gradient(circle at 23% 18%, #8adfff 0 1.5px, transparent 3px),
 radial-gradient(circle at 77% 26%, #8adfff 0 2px, transparent 3px),
 radial-gradient(circle at 88% 42%, #8adfff 0 1.5px, transparent 3px),
 radial-gradient(circle at 64% 14%, #8adfff 0 1.5px, transparent 3px);
 filter:drop-shadow(0 0 9px #59cbff); opacity:.75;
}

.rsvp-form { display:grid; gap:1.25rem; text-align:left; margin-top:3rem; }
.rsvp-form label, .rsvp-form fieldset { display:grid; gap:.45rem; }
.rsvp-form span, .rsvp-form legend { font-size:.74rem; text-transform:uppercase; letter-spacing:.13em; font-weight:500; color:#506159; }
.rsvp-form input, .rsvp-form textarea {
  width:100%; border:0; border-bottom:1px solid #aab4ae; background:transparent;
  padding:.8rem .2rem; border-radius:0; font:inherit; color:var(--ink); outline:none;
}
.rsvp-form input:focus, .rsvp-form textarea:focus { border-color:var(--green); }
.rsvp-form fieldset { border:0; margin:0; padding:0; }
.radio { display:flex !important; align-items:center; gap:.5rem; }
.radio input { width:auto; }
.submit-button { border:0; margin-top:1rem; }
.hidden { display:none; }

.dark-green-section { background:var(--green-dark); color:white; }
.dark-green-section .section-inner { width:min(920px, 88vw); }
.faq-list details { border-top:1px solid rgba(255,255,255,.16); }
.faq-list details:last-child { border-bottom:1px solid rgba(255,255,255,.16); }
.faq-list summary { cursor:pointer; padding:1.25rem 0; list-style:none; font-family:"Cormorant Garamond",serif; font-size:1.5rem; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list p { color:rgba(255,255,255,.68); max-width:720px; padding-bottom:1rem; }

.site-footer {
  min-height:300px; padding:5rem 7vw; background:#071c17; color:white;
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;
}
.site-footer .ring-phrase { margin:0 0 .5rem; }
.footer-date, .small-note { font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; color:rgba(255,255,255,.55); }

.reveal { opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
}



/* --- Cinematic section transitions --- */
@media (min-width: 981px) {
  html {
    scroll-snap-type: y proximity;
  }

  main > section {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }
}

main > section {
  position: relative;
  isolation: isolate;
}

main > section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: opacity .9s cubic-bezier(.22,.61,.36,1);
}

/* soft atmospheric wash used while a section becomes active */
main > section.section-entering::before {
  opacity: .15;
  background:
    radial-gradient(circle at 50% 22%, rgba(198,227,238,.34), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 45%);
}

main > section > * {
  transition:
    transform 1s cubic-bezier(.22,.61,.36,1),
    opacity .85s cubic-bezier(.22,.61,.36,1),
    filter 1s cubic-bezier(.22,.61,.36,1);
}

main > section.section-prep > * {
  opacity: .35;
  transform: translateY(46px) scale(.985);
  filter: blur(2px);
}

main > section.section-active > * {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* neighbouring sections recede slightly, giving a page-to-page feel */
main > section.section-past > * {
  opacity: .78;
  transform: translateY(-18px) scale(.992);
  filter: blur(.4px);
}

main > section.section-next > * {
  opacity: .78;
  transform: translateY(18px) scale(.992);
  filter: blur(.4px);
}

/* hero exits more cinematically */
.hero .hero-content,
.hero .hero-vines,
.hero .glowworms {
  transition:
    opacity 1s cubic-bezier(.22,.61,.36,1),
    transform 1.1s cubic-bezier(.22,.61,.36,1),
    filter 1.1s cubic-bezier(.22,.61,.36,1);
}

.hero.section-past .hero-content {
  opacity: 0;
  transform: translateY(-70px) scale(.97);
  filter: blur(4px);
}

.hero.section-past .glowworms {
  opacity: .18;
  transform: translateY(-30px) scale(1.03);
}

.hero.section-past .hero-vines {
  opacity: .08;
}

/* dark sections brighten in like entering the cave */
.dark-section.section-prep,
.countdown-section.section-prep,
.dark-green-section.section-prep {
  box-shadow: inset 0 0 0 9999px rgba(0,0,0,.16);
}

.dark-section.section-active,
.countdown-section.section-active,
.dark-green-section.section-active {
  box-shadow: inset 0 0 0 9999px rgba(0,0,0,0);
  transition: box-shadow 1s ease;
}

/* subtle vertical wipe at boundaries */
.section-wipe {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 100vh;
  z-index: 999;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(7,22,28,0) 0%,
    rgba(7,22,28,.28) 48%,
    rgba(7,22,28,0) 100%
  );
  opacity: 0;
  transform: translateY(100%);
}

.section-wipe.play {
  animation: sectionWipe .85s cubic-bezier(.22,.61,.36,1);
}

@keyframes sectionWipe {
  0%   { opacity: 0; transform: translateY(65%); }
  45%  { opacity: .55; }
  100% { opacity: 0; transform: translateY(-65%); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none !important; }

  main > section > *,
  .hero .hero-content,
  .hero .hero-vines,
  .hero .glowworms {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .section-wipe {
    display: none !important;
  }
}

@media (max-width: 980px) {
  .site-header { grid-template-columns:auto auto auto; justify-content:space-between; }
  .menu-toggle {
    display:flex; flex-direction:column; gap:6px; border:0; background:none; cursor:pointer; padding:12px;
  }
  .menu-toggle span { width:22px; height:1px; background:white; }
  .main-nav {
    position:fixed; inset:76px 0 0; display:flex; flex-direction:column; justify-content:flex-start;
    align-items:center; gap:1.6rem; padding:4rem 1rem; background:rgba(7,22,28,.98);
    transform:translateY(-120%); transition:transform .35s ease;
  }
  .menu-open .main-nav { transform:none; }
  .story-grid { grid-template-columns:1fr; gap:3rem; }
  .info-cards { grid-template-columns:1fr; }
  .info-card { border-right:0; border-bottom:1px solid var(--line); }
  .info-card:last-child { border-bottom:0; }
  .split-section { grid-template-columns:1fr; }
  .split-panel { min-height:460px; }
  .mini-grid { grid-template-columns:1fr 1fr; }
  .mini-grid div:nth-child(2) { border-right:0; }
  .mini-grid div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
}

@media (max-width: 640px) {
  .site-header { height:68px; padding:0 1rem; }
  .main-nav { inset:68px 0 0; }
  .hero-content { padding-top:7.5rem; }
  .hero h1 { font-size:clamp(3.2rem,18vw,5.8rem); }
  .hero-actions { flex-direction:column; align-items:center; }
  .button { width:min(300px,88vw); }
  .section-inner { padding:6rem 0; }
  .botanical { width:150px; opacity:.24; }
  .story-grid { padding:6rem 0; }
  .split-panel { padding:6rem 7vw; }
  .mini-grid { grid-template-columns:1fr; }
  .mini-grid div { border-right:0; border-bottom:1px solid var(--line); }
  .countdown { gap:1rem; }
  .countdown div { min-width:70px; }
  .site-footer { flex-direction:column; align-items:flex-start; min-height:250px; }
}


/* --- Phrase transition overlay --- */
.transition-phrase-overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(76,147,166,.16), transparent 35%),
    rgba(7,22,28,.22);
  backdrop-filter: blur(2px);
}

.transition-phrase-overlay.show {
  visibility: visible;
  animation: phraseOverlay 1.45s cubic-bezier(.22,.61,.36,1);
}

.transition-phrase-overlay .transition-phrase {
  margin: 0;
  padding: 0 1.5rem;
  text-align: center;
  color: #f7f3ea;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.2rem, 6vw, 5.5rem);
  line-height: 1;
  font-style: italic;
  font-weight: 400;
  letter-spacing: .01em;
  text-shadow:
    0 0 20px rgba(114,216,255,.18),
    0 4px 30px rgba(0,0,0,.28);
  opacity: 0;
  transform: translateY(18px) scale(.985);
}

.transition-phrase-overlay.show .transition-phrase {
  animation: phraseText 1.45s cubic-bezier(.22,.61,.36,1);
}

@keyframes phraseOverlay {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes phraseText {
  0%   { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(5px); }
  26%  { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  66%  { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-14px) scale(1.01); filter: blur(4px); }
}


/* =========================================================
   v2 — Click-through page navigation
   ========================================================= */

html,
body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: #07161c;
}

.site-shell,
main {
  height: 100%;
}

main {
  position: relative;
  overflow: hidden;
}

/* Each major section is now a page rather than part of a long document. */
main > section {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(6%, 0, 0) scale(.992);
  filter: blur(1.5px);
  transition:
    opacity .8s cubic-bezier(.22,.61,.36,1),
    transform .95s cubic-bezier(.22,.61,.36,1),
    filter .85s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear .95s;
  z-index: 1;
}

main > section.page-active {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0);
  transition-delay: 0s;
  z-index: 3;
}

main > section.page-exit-left {
  visibility: visible;
  opacity: 0;
  transform: translate3d(-6%,0,0) scale(.992);
  filter: blur(1.5px);
  z-index: 2;
}

main > section.page-exit-right {
  visibility: visible;
  opacity: 0;
  transform: translate3d(6%,0,0) scale(.992);
  filter: blur(1.5px);
  z-index: 2;
}

main > section.page-from-left {
  transform: translate3d(-6%,0,0) scale(.992);
}

main > section.page-from-right {
  transform: translate3d(6%,0,0) scale(.992);
}

/* Prevent the old scroll-transition classes from affecting pages. */
main > section.section-prep > *,
main > section.section-past > *,
main > section.section-next > *,
main > section.section-active > * {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Give content breathing room above the bottom controls. */
main > section > :last-child {
  margin-bottom: 92px;
}

.hero {
  overflow: hidden !important;
}

.hero .hero-content,
.hero .hero-vines,
.hero .glowworms {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Fixed page controls */
.page-controls {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 1100;
  width: min(920px, calc(100% - 34px));
  min-height: 58px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(7,22,28,.72);
  color: white;
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
}

.page-control {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: white;
  font: inherit;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px 12px;
  opacity: .9;
  transition: opacity .2s ease, transform .2s ease;
}

.page-control:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.page-control:disabled {
  opacity: .22;
  cursor: default;
  transform: none;
}

.back-control {
  justify-self: start;
}

.next-control {
  justify-self: end;
}

.control-arrow {
  color: var(--blue-bright);
  font-size: 1rem;
}

.page-progress {
  display: grid;
  grid-template-columns: auto 48px auto;
  align-items: center;
  gap: 9px;
  font-size: .66rem;
  letter-spacing: .16em;
  color: rgba(255,255,255,.66);
}

.progress-line {
  height: 1px;
  background: linear-gradient(90deg, rgba(198,227,238,.30), rgba(215,243,251,.95));
}

/* Phrase transition becomes the visual bridge between pages. */
.transition-phrase-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(68,143,167,.22), transparent 32%),
    linear-gradient(180deg, rgba(7,22,28,.84), rgba(7,30,30,.92));
  backdrop-filter: blur(7px);
}

.transition-phrase-overlay.show {
  visibility: visible;
  animation: clickPhraseOverlay 1.55s cubic-bezier(.22,.61,.36,1) both;
}

.transition-phrase-overlay .transition-phrase {
  margin: 0;
  padding: 0 24px;
  text-align: center;
  color: #f8f4ec;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.4rem, 7vw, 6.3rem);
  line-height: .95;
  font-style: italic;
  font-weight: 400;
  letter-spacing: .01em;
  opacity: 0;
  transform: translateY(16px) scale(.985);
  text-shadow: 0 0 28px rgba(114,216,255,.16);
}

.transition-phrase-overlay.show .transition-phrase {
  animation: clickPhraseText 1.55s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes clickPhraseOverlay {
  0% { opacity: 0; }
  18% { opacity: 1; }
  72% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes clickPhraseText {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(.985);
    filter: blur(7px);
  }
  25% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  68% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-15px) scale(1.012);
    filter: blur(5px);
  }
}

@media (max-width: 700px) {
  .page-controls {
    bottom: 10px;
    width: calc(100% - 20px);
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
  }

  .page-control {
    padding: 8px 6px;
    font-size: .62rem;
    letter-spacing: .1em;
  }

  .page-progress {
    grid-template-columns: auto 24px auto;
    gap: 5px;
  }

  .next-control [data-nav-label="next"] {
    max-width: 88px;
    line-height: 1.15;
    text-align: right;
  }

  main > section > :last-child {
    margin-bottom: 84px;
  }
}

@media (prefers-reduced-motion: reduce) {
  main > section,
  main > section.page-active,
  main > section.page-exit-left,
  main > section.page-exit-right {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }

  .transition-phrase-overlay.show,
  .transition-phrase-overlay.show .transition-phrase {
    animation-duration: .01ms !important;
  }
}


/* v2.1 — icy blue palette refinement */
:root {
  --ice-blue: #b9e7ff;
  --ice-blue-light: #e2f4f8;
  --ice-blue-glow: #d7f3fb;
  --ice-blue-mid: #91bfd1;
}

.accent-blue {
  color: var(--ice-blue-mid);
}

.blue-panel {
  background:
    linear-gradient(145deg, #b8d9e5 0%, #9fc8d8 100%);
  color: #17323b;
}

.blue-panel p {
  color: rgba(23,50,59,.76);
}

.blue-panel .eyebrow,
.blue-panel .text-link {
  color: #17323b;
}

.button-blue {
  background: var(--ice-blue);
  color: #17323b;
  border-color: rgba(255,255,255,.58);
}

.glowworms i {
  background: #e9fbff;
  box-shadow:
    0 0 8px #d7f3fb,
    0 0 20px #a9e6f5,
    0 0 42px rgba(169,230,245,.58);
}

.glowworms i::before {
  background: linear-gradient(rgba(215,243,251,.68), transparent);
}

.control-arrow {
  color: var(--ice-blue-glow);
}

.transition-phrase-overlay {
  background:
    radial-gradient(circle at 50% 42%, rgba(198,227,238,.20), transparent 32%),
    linear-gradient(180deg, rgba(7,22,28,.84), rgba(7,30,30,.92));
}

.transition-phrase-overlay .transition-phrase {
  text-shadow:
    0 0 24px rgba(215,243,251,.22),
    0 4px 30px rgba(0,0,0,.28);
}


/* v2.2 — darker black cave hero */
.hero {
  background:
    radial-gradient(circle at 50% 22%, rgba(198,227,238,.055), transparent 27%),
    radial-gradient(circle at 72% 62%, rgba(145,191,209,.035), transparent 24%),
    linear-gradient(180deg, #020304 0%, #050607 48%, #090b0c 100%) !important;
  color: #f8f4ec;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 28%, rgba(0,0,0,.20) 68%, rgba(0,0,0,.48) 100%);
  z-index: 0;
}

.hero .hero-content,
.hero .hero-vines,
.hero .glowworms {
  position: relative;
  z-index: 1;
}

.hero .hero-vines {
  opacity: .20;
}

.hero .hero-vines path {
  stroke: rgba(198,227,238,.32);
}

.hero .eyebrow,
.hero .hero-date,
.hero .hero-location {
  color: rgba(248,244,236,.74);
}

.hero h1,
.hero .couple-names {
  color: #fbf8f1;
  text-shadow: 0 4px 30px rgba(0,0,0,.65);
}

/* Keep the glowworms luminous against the nearly-black cave. */
.hero .glowworms i {
  background: #f1fcff;
  box-shadow:
    0 0 7px #e2f4f8,
    0 0 19px #b9e7ff,
    0 0 40px rgba(169,230,245,.52);
}


/* =========================================================
   v2.3 — RAL 6009-inspired green system
   RAL colours are physical paint standards, so on-screen RGB/HEX
   is necessarily an approximation. The design now uses RAL 6009
   Tannengrün / Fir Green as the visual green reference.
   ========================================================= */
:root {
  --ral-6009: #27352a;
  --ral-6009-deep: #1d2921;
  --ral-6009-dark: #141d17;
  --ral-6009-soft: #445347;
  --ral-6009-muted: #657267;

  /* Existing site tokens now derive from the RAL 6009 family. */
  --green: var(--ral-6009);
  --green-deep: var(--ral-6009-deep);
  --green-dark: var(--ral-6009-dark);
}

/* Green decorative drawing and botanical details */
.botanical-line,
.botanical-art path,
.botanical-art line,
.botanical-art circle,
.winter-vine path,
.winter-vine line,
.winter-vine circle {
  stroke: var(--ral-6009) !important;
}

/* Green text accents */
.accent-green,
.eyebrow.green,
.green-text {
  color: var(--ral-6009) !important;
}

/* Primary green surfaces */
.green-panel,
.dark-green-section,
.site-footer {
  background-color: var(--ral-6009-deep);
}

/* Green buttons */
.button-green,
.btn-green,
.button.primary {
  background: var(--ral-6009);
  border-color: var(--ral-6009);
}

/* Keep lighter decorative greens tied to the same family. */
.green-soft,
.muted-green {
  color: var(--ral-6009-soft);
}

/*
  Important: the opening cave remains deliberately black.
  RAL 6009 begins with the wedding/decorative visual language after
  the cave rather than tinting the first page green.
*/
.hero {
  background:
    radial-gradient(circle at 50% 22%, rgba(198,227,238,.055), transparent 27%),
    radial-gradient(circle at 72% 62%, rgba(145,191,209,.035), transparent 24%),
    linear-gradient(180deg, #020304 0%, #050607 48%, #090b0c 100%) !important;
}

.hero{background:linear-gradient(180deg,#000 0%,#020303 48%,#060708 100%)!important}
.cave-ceiling{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}.cave-shadow{position:absolute;background:#000;opacity:.97}
.cave-shadow-left{left:-8%;top:-5%;width:48%;height:42%;border-radius:0 0 64% 34%;transform:rotate(-4deg)}.cave-shadow-right{right:-10%;top:-7%;width:48%;height:39%;border-radius:0 0 28% 68%;transform:rotate(5deg)}.cave-shadow-center{left:27%;top:-11%;width:48%;height:25%;border-radius:0 0 50% 50%}
.glow-strands{position:absolute;inset:0;opacity:.92}.glow-strand{position:absolute;top:-2%;width:1px;transform-origin:top;background:linear-gradient(rgba(226,244,248,.03),rgba(198,227,238,.3) 45%,rgba(241,252,255,.95));box-shadow:0 0 7px rgba(169,230,245,.18);animation:strandDrift 5.8s ease-in-out infinite alternate}
.glow-strand:after{content:"";position:absolute;left:50%;bottom:-2px;width:4px;height:4px;transform:translateX(-50%);border-radius:50%;background:#f2fdff;box-shadow:0 0 6px #e2f4f8,0 0 15px #b9e7ff,0 0 27px rgba(169,230,245,.72)}.s1{left:6%;height:22%;animation-delay:-0.73s}.s2{left:11%;height:34%;animation-delay:-1.46s}.s3{left:17%;height:19%;animation-delay:-2.19s}.s4{left:22%;height:43%;animation-delay:-2.92s}.s5{left:28%;height:27%;animation-delay:-3.65s}.s6{left:34%;height:37%;animation-delay:-4.38s}.s7{left:39%;height:18%;animation-delay:-0.41s}.s8{left:44%;height:31%;animation-delay:-1.14s}.s9{left:50%;height:24%;animation-delay:-1.87s}.s10{left:56%;height:40%;animation-delay:-2.60s}.s11{left:61%;height:20%;animation-delay:-3.33s}.s12{left:66%;height:34%;animation-delay:-4.06s}.s13{left:71%;height:25%;animation-delay:-0.09s}.s14{left:77%;height:44%;animation-delay:-0.82s}.s15{left:82%;height:30%;animation-delay:-1.55s}.s16{left:87%;height:20%;animation-delay:-2.28s}.s17{left:92%;height:36%;animation-delay:-3.01s}.s18{left:96%;height:25%;animation-delay:-3.74s}
.cave-stars{position:absolute;inset:0}.cave-star{position:absolute;border-radius:50%;background:#f0fcff;box-shadow:0 0 6px #e2f4f8,0 0 15px rgba(198,227,238,.8),0 0 27px rgba(169,230,245,.42);opacity:.4;animation:caveTwinkle 4s ease-in-out infinite alternate}.star-1{left:69%;top:30%;width:3px;height:3px;animation-delay:3.23s}.star-2{left:49%;top:22%;width:3px;height:3px;animation-delay:0.70s}.star-3{left:93%;top:49%;width:3px;height:3px;animation-delay:2.16s}.star-4{left:38%;top:11%;width:3px;height:3px;animation-delay:3.67s}.star-5{left:34%;top:28%;width:3px;height:3px;animation-delay:3.26s}.star-6{left:56%;top:20%;width:3px;height:3px;animation-delay:3.44s}.star-7{left:43%;top:44%;width:3px;height:3px;animation-delay:3.39s}.star-8{left:95%;top:29%;width:3px;height:3px;animation-delay:0.55s}.star-9{left:73%;top:7%;width:3px;height:3px;animation-delay:0.56s}.star-10{left:28%;top:13%;width:3px;height:3px;animation-delay:3.53s}.star-11{left:71%;top:39%;width:3px;height:3px;animation-delay:3.21s}.star-12{left:90%;top:17%;width:3px;height:3px;animation-delay:1.32s}.star-13{left:18%;top:60%;width:3px;height:3px;animation-delay:2.86s}.star-14{left:11%;top:23%;width:3px;height:3px;animation-delay:1.64s}.star-15{left:67%;top:58%;width:3px;height:3px;animation-delay:1.90s}.star-16{left:79%;top:13%;width:3px;height:3px;animation-delay:2.73s}.star-17{left:55%;top:56%;width:3px;height:3px;animation-delay:2.02s}.star-18{left:46%;top:5%;width:3px;height:3px;animation-delay:1.73s}.star-19{left:76%;top:7%;width:3px;height:3px;animation-delay:3.59s}.star-20{left:97%;top:26%;width:3px;height:3px;animation-delay:0.20s}.star-21{left:64%;top:27%;width:3px;height:3px;animation-delay:2.32s}.star-22{left:3%;top:59%;width:3px;height:3px;animation-delay:1.62s}.star-23{left:17%;top:39%;width:3px;height:3px;animation-delay:0.86s}.star-24{left:34%;top:37%;width:3px;height:3px;animation-delay:3.83s}.star-25{left:10%;top:21%;width:3px;height:3px;animation-delay:0.26s}.star-26{left:38%;top:16%;width:3px;height:3px;animation-delay:2.99s}.star-27{left:74%;top:38%;width:3px;height:3px;animation-delay:2.21s}.star-28{left:19%;top:20%;width:3px;height:3px;animation-delay:2.63s}.star-29{left:47%;top:24%;width:3px;height:3px;animation-delay:0.68s}.star-30{left:15%;top:62%;width:3px;height:3px;animation-delay:2.30s}.star-31{left:37%;top:25%;width:3px;height:3px;animation-delay:0.04s}.star-32{left:47%;top:5%;width:3px;height:3px;animation-delay:1.87s}.star-33{left:37%;top:34%;width:3px;height:3px;animation-delay:2.53s}.star-34{left:96%;top:16%;width:3px;height:3px;animation-delay:1.24s}.star-35{left:12%;top:51%;width:3px;height:3px;animation-delay:3.95s}.star-36{left:65%;top:5%;width:3px;height:3px;animation-delay:2.48s}.star-37{left:70%;top:47%;width:3px;height:3px;animation-delay:0.55s}.star-38{left:65%;top:50%;width:3px;height:3px;animation-delay:3.81s}.star-39{left:78%;top:56%;width:3px;height:3px;animation-delay:1.57s}.star-40{left:28%;top:20%;width:3px;height:3px;animation-delay:3.84s}
.hero .hero-content{z-index:4!important}.hero .glowworms{z-index:2!important}.hero .hero-vines{z-index:1!important;opacity:.08!important}
@keyframes caveTwinkle{from{opacity:.18;transform:scale(.72)}to{opacity:.96;transform:scale(1.18)}}@keyframes strandDrift{from{transform:rotate(-.45deg);opacity:.66}to{transform:rotate(.45deg);opacity:1}}


/* v2.6 — icy blue Welcome + Wedding pages */
#welcome,
#wedding {
  background:
    radial-gradient(circle at 18% 15%, rgba(255,255,255,.72), transparent 28%),
    radial-gradient(circle at 82% 76%, rgba(255,255,255,.30), transparent 34%),
    linear-gradient(145deg, #e7f5f9 0%, #cfe8f1 48%, #bddce8 100%) !important;
  color: #1d2921;
}

#welcome::before,
#wedding::before {
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.24), transparent 34%) !important;
}

/* Keep typography readable and elegant against the pale ice background. */
#welcome h1,
#welcome h2,
#welcome h3,
#wedding h1,
#wedding h2,
#wedding h3 {
  color: var(--ral-6009, #27352a);
}

#welcome p,
#wedding p {
  color: #33433a;
}

#welcome .eyebrow,
#wedding .eyebrow {
  color: var(--ral-6009-soft, #445347);
}

/* Botanical linework remains RAL 6009 against the ice blue. */
#welcome svg path,
#welcome svg line,
#welcome svg circle,
#wedding svg path,
#wedding svg line,
#wedding svg circle {
  stroke: var(--ral-6009, #27352a);
}

/* Cards on the Wedding page get a frosted-paper treatment. */
#wedding .detail-card,
#wedding .wedding-card,
#wedding .info-card {
  background: rgba(251,248,241,.58);
  border-color: rgba(39,53,42,.16);
  backdrop-filter: blur(8px);
}

/* Welcome page message sequence */
.welcome-inner {
  text-align: center;
}

.welcome-sequence {
  position: relative;
  width: min(780px, 100%);
  min-height: 16rem;
  margin: 0 auto;
  display: grid;
  place-items: center;
}

.welcome-message {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.welcome-message-1,
.welcome-message-2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.8rem, 6vw, 5.6rem);
  font-weight: 400;
  line-height: 1;
  color: var(--ral-6009, #27352a);
}

.welcome-message-3 {
  max-width: 720px;
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  line-height: 1.85;
  color: #33433a;
}

/* Animation is triggered by JS only when the Welcome page becomes active. */
#welcome.welcome-playing .welcome-message-1 {
  animation: welcomeFadeOne 8.4s ease-in-out forwards;
}

#welcome.welcome-playing .welcome-message-2 {
  animation: welcomeFadeTwo 8.4s ease-in-out forwards;
}

#welcome.welcome-playing .welcome-message-3 {
  animation: welcomeFadeThree 8.4s ease-in-out forwards;
}

#welcome.welcome-complete .welcome-message-1,
#welcome.welcome-complete .welcome-message-2 {
  opacity: 0;
}

#welcome.welcome-complete .welcome-message-3 {
  opacity: 1;
  pointer-events: auto;
}

@keyframes welcomeFadeOne {
  0%, 3% { opacity: 0; }
  10%, 22% { opacity: 1; }
  31%, 100% { opacity: 0; }
}

@keyframes welcomeFadeTwo {
  0%, 31% { opacity: 0; }
  40%, 53% { opacity: 1; }
  63%, 100% { opacity: 0; }
}

@keyframes welcomeFadeThree {
  0%, 64% { opacity: 0; }
  76%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #welcome .welcome-message-1,
  #welcome .welcome-message-2 {
    display: none;
  }

  #welcome .welcome-message-3 {
    opacity: 1;
  }
}


/* Pōhutukawa botanical details on Welcome page */
#welcome { overflow: hidden; }

.pohutukawa-welcome {
  position: absolute;
  z-index: 1;
  width: clamp(170px, 22vw, 330px);
  opacity: .52;
  pointer-events: none;
}

.pohutukawa-welcome svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.pohutukawa-left {
  left: -2.5rem;
  bottom: -3.5rem;
  transform: rotate(-8deg);
}

.pohutukawa-right {
  right: -3rem;
  top: -2.5rem;
  transform: scaleX(-1) rotate(-10deg);
  opacity: .38;
}

.pohu-branch,
.pohu-leaf {
  fill: none;
  stroke: var(--ral-6009, #27352a) !important;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pohu-flower circle {
  fill: rgba(255,255,255,.22);
  stroke: #7faec0 !important;
  stroke-width: 1.7;
}

.pohu-flower path {
  fill: none;
  stroke: #7faec0 !important;
  stroke-width: 1.45;
  stroke-linecap: round;
}

#welcome .welcome-inner {
  position: relative;
  z-index: 3;
}

@media (max-width: 700px) {
  .pohutukawa-welcome { width: 185px; opacity: .32; }
  .pohutukawa-left { left: -5rem; bottom: -2rem; }
  .pohutukawa-right { right: -5rem; top: -1rem; opacity: .25; }
}


/* v2.9 Exact wedding icy blue: #B9E7FF */
:root {
  --ice-blue: #b9e7ff;
}

#welcome,
#wedding {
  background:
    radial-gradient(circle at 18% 15%, rgba(255,255,255,.34), transparent 28%),
    radial-gradient(circle at 82% 76%, rgba(255,255,255,.16), transparent 34%),
    #b9e7ff !important;
}


/* v3.0 Wedding detail hover / focus pop-ups */
.wedding-hover-cards {
  position: relative;
  overflow: visible;
}

.hover-info-card {
  position: relative;
  cursor: default;
  overflow: visible;
  z-index: 1;
}

.hover-info-card h3 {
  display: inline-block;
  cursor: pointer;
  border-bottom: 1px solid rgba(39, 53, 42, .28);
  padding-bottom: .15rem;
  transition: opacity .25s ease, border-color .25s ease;
}

.hover-info-card:hover,
.hover-info-card:focus,
.hover-info-card:focus-within {
  z-index: 20;
  outline: none;
}

.hover-info-card:hover h3,
.hover-info-card:focus h3,
.hover-info-card:focus-within h3 {
  border-color: rgba(39, 53, 42, .7);
}

.hover-info-popup {
  position: absolute;
  left: 50%;
  top: calc(100% - .15rem);
  width: min(340px, 82vw);
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(39, 53, 42, .16);
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 18px 46px rgba(20, 29, 23, .18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--ral-6009-deep, #1d2921);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
  pointer-events: none;
  text-align: left;
}

.hover-info-popup p {
  margin: 0;
  line-height: 1.55;
}

.hover-info-card:hover .hover-info-popup,
.hover-info-card:focus .hover-info-popup,
.hover-info-card:focus-within .hover-info-popup {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

/* Keep edge pop-ups within the viewport on wider screens. */
.hover-info-card:first-child .hover-info-popup {
  left: 0;
  transform: translate(0, 8px);
}
.hover-info-card:first-child:hover .hover-info-popup,
.hover-info-card:first-child:focus .hover-info-popup,
.hover-info-card:first-child:focus-within .hover-info-popup {
  transform: translate(0, 0);
}

.hover-info-card:last-child .hover-info-popup {
  left: auto;
  right: 0;
  transform: translate(0, 8px);
}
.hover-info-card:last-child:hover .hover-info-popup,
.hover-info-card:last-child:focus .hover-info-popup,
.hover-info-card:last-child:focus-within .hover-info-popup {
  transform: translate(0, 0);
}

@media (max-width: 760px) {
  .hover-info-card {
    cursor: pointer;
  }

  .hover-info-popup {
    position: absolute;
    left: 50% !important;
    right: auto !important;
    top: calc(100% + .25rem);
    width: min(88vw, 360px);
    transform: translate(-50%, 8px) !important;
  }

  .hover-info-card:hover .hover-info-popup,
  .hover-info-card:focus .hover-info-popup,
  .hover-info-card:focus-within .hover-info-popup {
    transform: translate(-50%, 0) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hover-info-popup {
    transition: none;
  }
}


/* v3.1 Post-RSVP party sequence */
.party-promise {
  background:
    radial-gradient(circle at 20% 18%, rgba(185,231,255,.13), transparent 30%),
    radial-gradient(circle at 78% 74%, rgba(185,231,255,.08), transparent 34%),
    #101512;
  color: #f7f2e8;
}

.party-promise-inner {
  min-height: 100%;
  display: grid;
  place-items: center;
  position: relative;
  text-align: center;
  padding: clamp(2rem, 6vw, 6rem);
}

.party-message {
  grid-area: 1 / 1;
  width: min(920px, 88vw);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.party-message p {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.25rem, 5.4vw, 5.5rem);
  line-height: 1.03;
  font-weight: 500;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.party-message-2 p {
  color: #b9e7ff;
}

.party-message-3 p {
  font-style: italic;
}

.party-playing .party-message {
  visibility: visible;
}

.party-playing .party-message-1 {
  animation: partyFadeOne 10.8s ease-in-out both;
}

.party-playing .party-message-2 {
  animation: partyFadeTwo 10.8s ease-in-out both;
}

.party-playing .party-message-3 {
  animation: partyFadeThree 10.8s ease-in-out both;
}

.party-complete .party-message-3 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@keyframes partyFadeOne {
  0% { opacity: 0; }
  8%, 25% { opacity: 1; }
  32%, 100% { opacity: 0; }
}

@keyframes partyFadeTwo {
  0%, 31% { opacity: 0; }
  40%, 58% { opacity: 1; }
  66%, 100% { opacity: 0; }
}

@keyframes partyFadeThree {
  0%, 65% { opacity: 0; }
  75%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .party-playing .party-message {
    animation: none !important;
    opacity: 0;
    visibility: hidden;
  }

  .party-playing .party-message-3,
  .party-complete .party-message-3 {
    opacity: 1;
    visibility: visible;
  }
}


/* v3.2 Wedding card placement and centered detail pop-ups */
#wedding .section-inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Push Date, Location and Dress further down the Wedding page. */
#wedding .info-cards {
  margin-top: auto;
  padding-top: clamp(3rem, 10vh, 8rem);
  padding-bottom: clamp(2.5rem, 7vh, 5rem);
}

/* Pop-up information appears in the visual centre of the page. */
#wedding .hover-info-popup,
#wedding .hover-info-card:first-child .hover-info-popup,
#wedding .hover-info-card:last-child .hover-info-popup {
  position: fixed;
  left: 50%;
  right: auto;
  top: 50%;
  width: min(520px, 86vw);
  max-height: 70vh;
  overflow-y: auto;
  transform: translate(-50%, calc(-50% + 10px));
  z-index: 100;
}

#wedding .hover-info-card:hover .hover-info-popup,
#wedding .hover-info-card:focus .hover-info-popup,
#wedding .hover-info-card:focus-within .hover-info-popup,
#wedding .hover-info-card:first-child:hover .hover-info-popup,
#wedding .hover-info-card:first-child:focus .hover-info-popup,
#wedding .hover-info-card:first-child:focus-within .hover-info-popup,
#wedding .hover-info-card:last-child:hover .hover-info-popup,
#wedding .hover-info-card:last-child:focus .hover-info-popup,
#wedding .hover-info-card:last-child:focus-within .hover-info-popup {
  transform: translate(-50%, -50%);
}

@media (max-width: 760px) {
  #wedding .info-cards {
    margin-top: auto;
    padding-top: 2.5rem;
    padding-bottom: 4.5rem;
  }

  #wedding .hover-info-popup,
  #wedding .hover-info-card:first-child .hover-info-popup,
  #wedding .hover-info-card:last-child .hover-info-popup {
    position: fixed;
    left: 50% !important;
    right: auto !important;
    top: 50%;
    width: min(88vw, 420px);
    transform: translate(-50%, calc(-50% + 10px)) !important;
  }

  #wedding .hover-info-card:hover .hover-info-popup,
  #wedding .hover-info-card:focus .hover-info-popup,
  #wedding .hover-info-card:focus-within .hover-info-popup {
    transform: translate(-50%, -50%) !important;
  }
}


/* v3.3 Wedding Date / Location / Dress palette */
#wedding .info-card {
  background: var(--ral-6009, #27352a) !important;
  border-color: rgba(185, 231, 255, .28) !important;
  color: #b9e7ff !important;
}

#wedding .info-card .card-number,
#wedding .info-card h3 {
  color: #b9e7ff !important;
}

#wedding .info-card h3 {
  border-bottom-color: rgba(185, 231, 255, .38);
}

#wedding .info-card:hover h3,
#wedding .info-card:focus h3,
#wedding .info-card:focus-within h3 {
  border-bottom-color: #b9e7ff;
}


/* v3.4 Slightly more sparkle for the opening glowworms */
#home .glowworm,
#home .glow-dot,
#home [class*="glowworm"] .light,
#home [class*="glowworm"] .glow {
  filter: drop-shadow(0 0 5px rgba(185, 231, 255, .9))
          drop-shadow(0 0 11px rgba(185, 231, 255, .5));
}

#home .glowworm:nth-child(3n),
#home .glow-dot:nth-child(3n) {
  animation-duration: 2.8s;
}

#home .glowworm:nth-child(3n + 1),
#home .glow-dot:nth-child(3n + 1) {
  animation-duration: 3.7s;
}

#home .glowworm:nth-child(3n + 2),
#home .glow-dot:nth-child(3n + 2) {
  animation-duration: 4.5s;
}

/* Add a restrained shimmer to the hanging glowworm strands. */
#home .glow-strand,
#home [class*="strand"] {
  animation-name: heroGlowSparkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

#home .glow-strand:nth-child(odd),
#home [class*="strand"]:nth-child(odd) {
  animation-duration: 3.6s;
}

#home .glow-strand:nth-child(even),
#home [class*="strand"]:nth-child(even) {
  animation-duration: 4.4s;
}

@keyframes heroGlowSparkle {
  0%, 100% { filter: brightness(.92); opacity: .88; }
  45% { filter: brightness(1.08); opacity: .96; }
  52% { filter: brightness(1.28); opacity: 1; }
  60% { filter: brightness(1.02); opacity: .94; }
}

@media (prefers-reduced-motion: reduce) {
  #home .glow-strand,
  #home [class*="strand"] {
    animation: none !important;
  }
}


/* v3.5 Smoother phrase-to-page reveal */
main > section {
  transition:
    opacity 1.28s cubic-bezier(.22,.61,.36,1),
    transform 1.28s cubic-bezier(.22,.61,.36,1),
    filter 1.12s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 1.28s;
}

main > section.page-active {
  transition-delay: 0s;
}

main > section.page-exit-left {
  transform: translate3d(-3%,0,0) scale(.996);
  filter: blur(2px);
}

main > section.page-exit-right {
  transform: translate3d(3%,0,0) scale(.996);
  filter: blur(2px);
}

main > section.page-from-left {
  transform: translate3d(-3%,0,0) scale(.996);
  filter: blur(2px);
}

main > section.page-from-right {
  transform: translate3d(3%,0,0) scale(.996);
  filter: blur(2px);
}

/* Hold the phrase gently, then dissolve it more gradually over the arriving page. */
.transition-phrase-overlay.show {
  animation: smoothPhraseOverlay 2.05s cubic-bezier(.22,.61,.36,1) both !important;
}

.transition-phrase-overlay.show .transition-phrase {
  animation: smoothPhraseText 2.05s cubic-bezier(.22,.61,.36,1) both !important;
}

@keyframes smoothPhraseOverlay {
  0%   { opacity: 0; }
  14%  { opacity: 1; }
  58%  { opacity: 1; }
  78%  { opacity: .72; }
  100% { opacity: 0; }
}

@keyframes smoothPhraseText {
  0%   { opacity: 0; transform: translateY(10px) scale(.992); filter: blur(4px); }
  18%  { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  58%  { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  78%  { opacity: .55; transform: translateY(-2px) scale(1.002); filter: blur(1px); }
  100% { opacity: 0; transform: translateY(-5px) scale(1.004); filter: blur(1.5px); }
}


/* v3.6 Hold forward navigation until animated message sequences finish */
#pageNext:disabled {
  opacity: .28;
  cursor: default;
  pointer-events: none;
}


/* v3.7 Wedding information-card instruction */
#wedding .wedding-card-instruction {
  margin: auto 0 0;
  padding-top: clamp(2.25rem, 7vh, 5rem);
  text-align: center;
  font-size: clamp(.76rem, 1vw, .9rem);
  line-height: 1.45;
  letter-spacing: .08em;
  color: var(--ral-6009-soft, #445347);
  opacity: .82;
}

#wedding .wedding-card-instruction + .info-cards {
  margin-top: .9rem;
  padding-top: 0;
}

@media (max-width: 760px) {
  #wedding .wedding-card-instruction {
    padding: 2rem 1rem 0;
    font-size: .76rem;
  }
}


/* v3.9 RSVP page icy-blue background */
#rsvp {
  background:
    radial-gradient(circle at 18% 16%, rgba(226, 244, 248, .72), transparent 34%),
    radial-gradient(circle at 82% 78%, rgba(215, 243, 251, .58), transparent 38%),
    linear-gradient(145deg, #b9e7ff 0%, #d7f3fb 52%, #b9e7ff 100%);
}

#rsvp::before {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.10),
    rgba(185,231,255,.05)
  );
}


/* v4.0 Slightly more radiant intro glowworms */
#home .glowworm,
#home .glow-dot,
#home [class*="glowworm"] .light,
#home [class*="glowworm"] .glow {
  filter:
    drop-shadow(0 0 4px rgba(226, 244, 248, 1))
    drop-shadow(0 0 9px rgba(185, 231, 255, .92))
    drop-shadow(0 0 18px rgba(185, 231, 255, .58))
    drop-shadow(0 0 30px rgba(145, 191, 209, .28));
}

#home .glow-strand,
#home [class*="strand"] {
  filter:
    brightness(1.08)
    drop-shadow(0 0 5px rgba(185, 231, 255, .42));
}

@keyframes heroGlowSparkle {
  0%, 100% {
    filter: brightness(1.00) drop-shadow(0 0 4px rgba(185,231,255,.30));
    opacity: .90;
  }
  45% {
    filter: brightness(1.14) drop-shadow(0 0 7px rgba(185,231,255,.48));
    opacity: .98;
  }
  52% {
    filter: brightness(1.38) drop-shadow(0 0 11px rgba(185,231,255,.66));
    opacity: 1;
  }
  60% {
    filter: brightness(1.10) drop-shadow(0 0 6px rgba(185,231,255,.40));
    opacity: .96;
  }
}


/* v4.3 Our Story photo sequence */
#story .story-photo-carousel {
  position: relative;
  width: min(100%, 620px);
  margin: 0 auto;
  align-self: center;
}

#story .story-photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  min-height: 420px;
  max-height: 72vh;
  overflow: hidden;
  border-radius: 2px;
  background: #081013;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .26),
    0 0 0 1px rgba(185, 231, 255, .10);
}

#story .story-photo-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.018);
  transition:
    opacity 1.15s cubic-bezier(.22,.61,.36,1),
    transform 5.8s ease-out;
  will-change: opacity, transform;
}

#story .story-photo-slide.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

/* Slightly favour the upper half for portraits, while wide images remain naturally centred. */
#story .story-photo-slide:nth-child(5),
#story .story-photo-slide:nth-child(6),
#story .story-photo-slide:nth-child(7),
#story .story-photo-slide:nth-child(10) {
  object-position: center 38%;
}

#story .story-photo-progress {
  width: min(180px, 42%);
  height: 1px;
  margin: 16px auto 0;
  overflow: hidden;
  background: rgba(185, 231, 255, .20);
}

#story .story-photo-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: #b9e7ff;
  transform-origin: left center;
  animation: storyPhotoProgress 5.2s linear infinite;
}

@keyframes storyPhotoProgress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (max-width: 900px) {
  #story .story-photo-carousel {
    width: min(86vw, 520px);
  }

  #story .story-photo-frame {
    min-height: 360px;
    max-height: 58vh;
  }
}

@media (max-width: 600px) {
  #story .story-photo-carousel {
    width: min(88vw, 430px);
  }

  #story .story-photo-frame {
    aspect-ratio: 4 / 5;
    min-height: 320px;
    max-height: 52vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  #story .story-photo-slide {
    transition: none;
    transform: none;
  }

  #story .story-photo-progress span {
    animation: none;
    transform: scaleX(1);
  }
}


/* v4.4 Clean photo-based intro background */
#home {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #02070a !important;
}

/* Remove the original illustrated/generated cave background layers from view. */
#home .cave-ceiling,
#home .cave-silhouette,
#home .glow-strand,
#home [class*="strand"],
#home .glowworm,
#home .glow-dot,
#home .late-glowworms,
#home .home-darkening-layer {
  display: none !important;
}

/* Base photo: visible immediately, with a little 'light pollution' so many dim glowworms are lost. */
#home::before {
  content: "";
  position: absolute;
  inset: -2%;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(8, 17, 23, .24), rgba(8, 17, 23, .24)),
    url("assets/cave-intro-photo.jpg") center center / cover no-repeat;
  filter: brightness(.58) contrast(1.16) saturate(1.06);
  transform: scale(1.025);
}

/* Gradually darkens the environment, simulating light pollution disappearing. */
#home .intro-photo-reveal {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 48% 42%, rgba(16, 29, 36, .12) 0 24%, rgba(2, 7, 11, .34) 58%, rgba(0, 2, 4, .64) 100%),
    linear-gradient(180deg, rgba(5, 13, 18, .10), rgba(0, 3, 6, .50));
  opacity: .18;
  animation: introCaveDarken 6.5s cubic-bezier(.22,.61,.36,1) .35s forwards;
}

/* Brighter, higher-contrast copy of the same photo fades in under the darkening layer.
   This reveals more of the glowworms already present in the photograph. */
#home::after {
  content: "";
  position: absolute;
  inset: -2%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    url("assets/cave-intro-photo.jpg") center center / cover no-repeat;
  filter:
    brightness(.90)
    contrast(1.42)
    saturate(1.34)
    drop-shadow(0 0 4px rgba(185,231,255,.18));
  mix-blend-mode: screen;
  transform: scale(1.025);
  animation: introRealGlowwormsReveal 6.5s cubic-bezier(.22,.61,.36,1) .35s forwards;
}

/* A small number of additional star-like points emerge subtly as the cave gets darker. */
#home .intro-star-glowworms {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}

#home .intro-star-glowworm {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  opacity: 0;
  background: #e2f4f8;
  box-shadow:
    0 0 3px rgba(226,244,248,.96),
    0 0 8px rgba(185,231,255,.72),
    0 0 15px rgba(145,191,209,.32);
  animation:
    introStarAppear 2.8s ease-in-out var(--delay) forwards,
    introStarTwinkle var(--twinkle) ease-in-out calc(var(--delay) + 2.8s) infinite;
}

#home .hero-content,
#home .hero-inner,
#home > .section-inner {
  position: relative;
  z-index: 5;
}

@keyframes introCaveDarken {
  0%   { opacity: .18; }
  40%  { opacity: .38; }
  72%  { opacity: .62; }
  100% { opacity: .82; }
}

@keyframes introRealGlowwormsReveal {
  0%   { opacity: .04; filter: brightness(.72) contrast(1.24) saturate(1.12); }
  34%  { opacity: .18; }
  68%  { opacity: .48; }
  100% { opacity: .72; filter: brightness(.98) contrast(1.46) saturate(1.38); }
}

@keyframes introStarAppear {
  0%   { opacity: 0; transform: scale(.6); filter: blur(1.5px); }
  65%  { opacity: .10; }
  88%  { opacity: .62; transform: scale(.96); filter: blur(.2px); }
  100% { opacity: .78; transform: scale(1); filter: blur(0); }
}

@keyframes introStarTwinkle {
  0%, 100% { opacity: .56; transform: scale(.94); }
  48%      { opacity: .88; transform: scale(1.12); }
  62%      { opacity: .68; transform: scale(1.01); }
}

@media (prefers-reduced-motion: reduce) {
  #home .intro-photo-reveal {
    animation: none;
    opacity: .66;
  }

  #home::after {
    animation: none;
    opacity: .58;
  }

  #home .intro-star-glowworm {
    animation: none;
    opacity: .58;
  }
}


/* v4.5 Our Story carousel order and subtler icy-blue timing indicator */
#story .story-photo-progress {
  width: min(128px, 30%);
  height: 1px;
  margin-top: 14px;
  background: rgba(185, 231, 255, .10);
  opacity: .72;
}

#story .story-photo-progress span {
  background: rgba(185, 231, 255, .62);
  box-shadow: 0 0 7px rgba(185, 231, 255, .18);
}


/* v4.6 True crossfade between pages: outgoing fades out, incoming fades in */
main > section {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 1.05s cubic-bezier(.22,.61,.36,1),
    transform 1.05s cubic-bezier(.22,.61,.36,1),
    filter .95s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 1.05s;
}

main > section.page-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0);
  transition:
    opacity 1.05s cubic-bezier(.22,.61,.36,1),
    transform 1.05s cubic-bezier(.22,.61,.36,1),
    filter .95s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 0s;
}

/* Incoming page begins slightly softened and transparent, then resolves into place. */
main > section.page-from-right,
main > section.page-from-left {
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  filter: blur(2px);
}

main > section.page-from-right {
  transform: translate3d(2%,0,0) scale(.997);
}

main > section.page-from-left {
  transform: translate3d(-2%,0,0) scale(.997);
}

/* Outgoing page remains visible long enough to overlap with the incoming fade. */
main > section.page-exit-left,
main > section.page-exit-right {
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  filter: blur(2px);
}

main > section.page-exit-left {
  transform: translate3d(-2%,0,0) scale(.997);
}

main > section.page-exit-right {
  transform: translate3d(2%,0,0) scale(.997);
}

@media (prefers-reduced-motion: reduce) {
  main > section,
  main > section.page-active,
  main > section.page-from-right,
  main > section.page-from-left,
  main > section.page-exit-left,
  main > section.page-exit-right {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}


/* v4.7 Slower, softer incoming page fade */
main > section.page-active {
  transition:
    opacity 1.75s cubic-bezier(.22,.61,.36,1),
    transform 1.55s cubic-bezier(.22,.61,.36,1),
    filter 1.45s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 0s;
}

/* Keep the incoming page understated at the beginning of the reveal. */
main > section.page-from-right,
main > section.page-from-left {
  opacity: 0;
  filter: blur(2.5px);
}


/* v4.8 Corrected page reveal timing
   The incoming fade now starts only after the phrase overlay begins clearing. */
main > section {
  transition:
    opacity 1.15s cubic-bezier(.4,0,.2,1),
    transform 1.05s cubic-bezier(.22,.61,.36,1),
    filter 1.05s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 1.15s;
}

main > section.page-active {
  transition:
    opacity 2.0s cubic-bezier(.16,1,.3,1),
    transform 1.45s cubic-bezier(.16,1,.3,1),
    filter 1.55s cubic-bezier(.16,1,.3,1),
    visibility 0s linear 0s;
}

main > section.page-from-right,
main > section.page-from-left {
  opacity: 0;
  visibility: visible;
  filter: blur(1.5px);
}

main > section.page-from-right {
  transform: translate3d(1.1%,0,0) scale(.998);
}

main > section.page-from-left {
  transform: translate3d(-1.1%,0,0) scale(.998);
}


/* =========================================================
   v4.9 Authoritative page transition system
   Sequential fade-out -> optional phrase -> fade-in
   ========================================================= */

main > section {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* Stable resting state for the visible page. */
main > section.page-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  filter: none !important;
}

/* Explicit hidden resting state after a page has faded away. */
main > section.page-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Outgoing page. */
main > section.page-transition-out {
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transform: none !important;
  filter: blur(1px) !important;
  transition:
    opacity .82s cubic-bezier(.4,0,.2,1) !important,
    filter .82s cubic-bezier(.4,0,.2,1) !important;
}

/* Incoming page's guaranteed zero-opacity starting frame. */
main > section.page-transition-in {
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transform: none !important;
  filter: blur(2.2px) !important;
  transition:
    opacity 1.42s cubic-bezier(.16,1,.3,1) !important,
    filter 1.32s cubic-bezier(.16,1,.3,1) !important;
}

/* Once page-active is added, preserve the transition declared by the
   incoming state so opacity visibly animates from 0 to 1. */
main > section.page-transition-in.page-active,
main > section.page-active:not(.page-transition-out) {
  transition:
    opacity 1.42s cubic-bezier(.16,1,.3,1) !important,
    filter 1.32s cubic-bezier(.16,1,.3,1) !important;
}

/* First three boundary phrases get their own isolated full-screen sequence. */
.transition-phrase-overlay {
  opacity: 0;
  visibility: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(76,147,166,.13), transparent 36%),
    rgba(3, 10, 14, .96) !important;
  backdrop-filter: blur(2px);
}

.transition-phrase-overlay.phrase-sequence {
  visibility: visible !important;
  animation: weddingPhraseOverlaySequence 2.2s ease-in-out both;
}

.transition-phrase-overlay.phrase-sequence .transition-phrase {
  animation: weddingPhraseTextSequence 2.2s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes weddingPhraseOverlaySequence {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  74%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes weddingPhraseTextSequence {
  0%   {
    opacity: 0;
    transform: translateY(8px) scale(.992);
    filter: blur(4px);
  }
  23%  {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  68%  {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-6px) scale(1.004);
    filter: blur(1.5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  main > section,
  main > section.page-active,
  main > section.page-hidden,
  main > section.page-transition-out,
  main > section.page-transition-in,
  main > section.page-transition-in.page-active {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }

  .transition-phrase-overlay.phrase-sequence,
  .transition-phrase-overlay.phrase-sequence .transition-phrase {
    animation: none !important;
  }
}


/* v5.0 Phrase transition visibility fix */
.transition-phrase-overlay.phrase-sequence {
  display: grid !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1200 !important;
  pointer-events: none !important;
}

.transition-phrase-overlay.phrase-sequence .transition-phrase {
  display: block !important;
  visibility: visible !important;
  color: #f8f4ec !important;
}


/* v5.1 Stable resting states for the rebuilt page transitions */
main > section.page-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

main > section.page-active:not([style*="opacity"]) {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  filter: none !important;
  transform: none !important;
}

.transition-phrase-overlay:not([style*="opacity"]) {
  opacity: 0 !important;
  visibility: hidden !important;
}


/* v5.2 Intro-page language selector */
#home .intro-language-toggle {
  position: relative;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .72rem;
  margin-top: clamp(.8rem, 1.8vh, 1.15rem);
  padding: .42rem .72rem;
  border: 1px solid rgba(185, 231, 255, .22);
  border-radius: 999px;
  background: rgba(2, 8, 12, .24);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

#home .intro-lang-option {
  appearance: none;
  border: 0;
  padding: .12rem .18rem;
  background: transparent;
  color: rgba(248, 250, 249, .58);
  font: 500 .68rem/1.2 Inter, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color .35s ease,
    opacity .35s ease,
    text-shadow .35s ease;
}

#home .intro-lang-option:hover,
#home .intro-lang-option:focus-visible {
  color: rgba(226, 244, 248, .92);
  outline: none;
}

#home .intro-lang-option.is-active {
  color: #b9e7ff;
  text-shadow: 0 0 9px rgba(185, 231, 255, .26);
}

#home .intro-lang-divider {
  width: 1px;
  height: .85rem;
  background: rgba(185, 231, 255, .25);
}

@media (max-width: 640px) {
  #home .intro-language-toggle {
    margin-top: .72rem;
    padding: .4rem .66rem;
  }

  #home .intro-lang-option {
    font-size: .64rem;
  }
}


/* v5.3 Guaranteed visible intro language selector */
#home .intro-language-toggle {
  position: relative !important;
  z-index: 50 !important;
  display: flex !important;
  width: fit-content !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .78rem !important;
  margin: 1rem auto 0 !important;
  padding: .48rem .86rem !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  border: 1px solid rgba(185,231,255,.42) !important;
  border-radius: 999px !important;
  background: rgba(1,7,11,.52) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 5px 20px rgba(0,0,0,.16) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

#home .intro-language-toggle .intro-lang-option {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  padding: .12rem .1rem !important;
  color: rgba(239,247,249,.70) !important;
  font-family: Inter, sans-serif !important;
  font-size: .68rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: .14em !important;
  cursor: pointer !important;
}

#home .intro-language-toggle .intro-lang-option.is-active {
  color: #b9e7ff !important;
  text-shadow: 0 0 10px rgba(185,231,255,.42) !important;
}

#home .intro-language-toggle .intro-lang-option:hover,
#home .intro-language-toggle .intro-lang-option:focus-visible {
  color: #e2f4f8 !important;
  outline: none !important;
}

#home .intro-language-toggle .intro-lang-divider {
  display: block !important;
  width: 1px !important;
  height: .9rem !important;
  flex: 0 0 1px !important;
  background: rgba(185,231,255,.38) !important;
}

@media (max-width: 640px) {
  #home .intro-language-toggle {
    margin-top: .8rem !important;
    padding: .44rem .74rem !important;
  }
}


/* v5.4 Softer language-change transition only */
.language-soft-fade {
  transition:
    opacity .42s cubic-bezier(.22,.61,.36,1),
    filter .42s cubic-bezier(.22,.61,.36,1) !important;
}

.language-soft-fade.language-soft-fade-out {
  opacity: 0 !important;
  filter: blur(1.5px) !important;
}

@media (prefers-reduced-motion: reduce) {
  .language-soft-fade,
  .language-soft-fade.language-soft-fade-out {
    transition: none !important;
    filter: none !important;
  }
}


/* v5.5 RSVP layout optimisation so bottom navigation never covers form fields */
#rsvp {
  scroll-padding-bottom: 9rem;
}

#rsvp .section-inner {
  padding-bottom: clamp(9rem, 15vh, 12rem) !important;
}

#rsvp form {
  padding-bottom: clamp(2rem, 5vh, 4rem);
}

/* Keep the fixed Back / Continue controls visually separate from the form. */
.page-controls,
.bottom-controls,
.page-nav,
#pageControls {
  z-index: 200;
}

/* On smaller screens, allow even more breathing room because the control bar
   occupies a larger proportion of the viewport. */
@media (max-width: 760px) {
  #rsvp {
    scroll-padding-bottom: 11rem;
  }

  #rsvp .section-inner {
    padding-bottom: 12rem !important;
  }

  #rsvp form {
    padding-bottom: 3rem;
  }
}


/* v5.6 RSVP fixed-navigation clearance
   Uses a real spacer plus field scroll margins so the fixed controls can never
   cover editable fields, including Transport / accommodation notes. */
#rsvp {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-padding-top: 6rem !important;
  scroll-padding-bottom: 10.5rem !important;
}

#rsvp .section-inner.narrow {
  min-height: max-content !important;
  padding-top: clamp(6.5rem, 10vh, 8.5rem) !important;
  padding-bottom: 0 !important;
}

#rsvp .rsvp-form {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#rsvp .rsvp-form label,
#rsvp .rsvp-form fieldset,
#rsvp .rsvp-form input,
#rsvp .rsvp-form textarea,
#rsvp .submit-button {
  scroll-margin-top: 7rem;
  scroll-margin-bottom: 10.5rem;
}

#rsvp .rsvp-bottom-clearance {
  display: block !important;
  grid-column: 1 / -1;
  width: 100%;
  height: 150px;
  min-height: 150px;
  pointer-events: none;
}

@media (max-width: 760px) {
  #rsvp {
    scroll-padding-bottom: 12rem !important;
  }

  #rsvp .section-inner.narrow {
    width: min(760px, 90vw);
    padding-top: 6.2rem !important;
  }

  #rsvp .rsvp-form label,
  #rsvp .rsvp-form fieldset,
  #rsvp .rsvp-form input,
  #rsvp .rsvp-form textarea,
  #rsvp .submit-button {
    scroll-margin-bottom: 12rem;
  }

  #rsvp .rsvp-bottom-clearance {
    height: 190px;
    min-height: 190px;
  }
}


/* v5.7 Manual controls for the 3-step Welcome and Party text sequences */
.sequence-step-controls {
  position: relative;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin: 1.25rem auto 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition:
    opacity .42s ease,
    transform .42s ease,
    visibility 0s linear .42s;
}

.sequence-step-controls.is-available {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity .42s ease,
    transform .42s ease,
    visibility 0s linear 0s;
}

.sequence-step-button {
  width: 2.15rem;
  height: 2.15rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(185,231,255,.36);
  background: rgba(6,14,18,.18);
  color: #b9e7ff;
  font: 300 1.4rem/1 Cormorant Garamond, serif;
  cursor: pointer;
  transition:
    background .25s ease,
    border-color .25s ease,
    opacity .25s ease,
    transform .25s ease;
}

.sequence-step-button:hover,
.sequence-step-button:focus-visible {
  background: rgba(185,231,255,.10);
  border-color: rgba(185,231,255,.62);
  outline: none;
  transform: translateY(-1px);
}

.sequence-step-button:disabled {
  opacity: .28;
  cursor: default;
  transform: none;
}

.sequence-step-dots {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
}

.sequence-step-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(185,231,255,.30);
  transition:
    transform .28s ease,
    background .28s ease,
    box-shadow .28s ease;
}

.sequence-step-controls[data-step="0"] .sequence-step-dots span:nth-child(1),
.sequence-step-controls[data-step="1"] .sequence-step-dots span:nth-child(2),
.sequence-step-controls[data-step="2"] .sequence-step-dots span:nth-child(3) {
  background: #b9e7ff;
  transform: scale(1.25);
  box-shadow: 0 0 8px rgba(185,231,255,.28);
}

/* Welcome is on an icy-blue page, so give controls enough green contrast there. */
#welcome .sequence-step-button {
  color: var(--ral-6009, #27352a);
  border-color: rgba(39,53,42,.28);
  background: rgba(255,255,255,.14);
}

#welcome .sequence-step-button:hover,
#welcome .sequence-step-button:focus-visible {
  background: rgba(39,53,42,.07);
  border-color: rgba(39,53,42,.45);
}

#welcome .sequence-step-dots span {
  background: rgba(39,53,42,.22);
}

#welcome .sequence-step-controls[data-step="0"] .sequence-step-dots span:nth-child(1),
#welcome .sequence-step-controls[data-step="1"] .sequence-step-dots span:nth-child(2),
#welcome .sequence-step-controls[data-step="2"] .sequence-step-dots span:nth-child(3) {
  background: var(--ral-6009, #27352a);
  box-shadow: 0 0 8px rgba(39,53,42,.15);
}

@media (max-width: 640px) {
  .sequence-step-controls {
    margin-top: 1rem;
    gap: .68rem;
  }
  .sequence-step-button {
    width: 2rem;
    height: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sequence-step-controls,
  .sequence-step-controls.is-available {
    transition: none;
    transform: none;
  }
}



/* v5.10 Welcome + Page 8 sequence control positioning refinements */

/* Page 2: keep the text block more centrally balanced on screen */
#welcome .section-inner,
#welcome .welcome-inner,
#welcome .welcome-content {
  min-height: 100%;
}

#welcome .welcome-inner,
#welcome .welcome-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Keep manual controls directly below the animated message, with safe clearance */
#welcome .welcome-sequence-controls {
  position: relative;
  left: auto;
  top: auto;
  bottom: auto;
  margin: clamp(1.35rem, 2.8vh, 2rem) auto 0;
  transform: translateY(6px);
}

#welcome .welcome-sequence-controls.is-available {
  transform: translateY(0);
}

/* Page 8: preserve centred message position and lower controls slightly */
#party .party-promise-inner {
  min-height: 100%;
  display: grid;
  place-items: center;
  position: relative;
  text-align: center;
  padding: clamp(2rem, 6vw, 6rem);
}

#party .party-sequence-controls {
  position: absolute;
  left: 50%;
  top: calc(50% + clamp(8.4rem, 15vh, 11rem));
  bottom: auto;
  margin: 0;
  transform: translate(-50%, 6px);
}

#party .party-sequence-controls.is-available {
  transform: translate(-50%, 0);
}

@media (max-width: 760px) {
  #welcome .welcome-sequence-controls {
    margin-top: 1.5rem;
  }

  #party .party-sequence-controls {
    top: calc(50% + 9rem);
  }
}

@media (max-height: 720px) {
  #party .party-sequence-controls {
    top: calc(50% + 7.7rem);
  }
}


/* v5.11 Page 2 controls anchored directly beneath transitioning welcome text */
#welcome {
  position: relative;
}

#welcome .welcome-sequence-controls {
  position: absolute !important;
  left: 50% !important;
  top: calc(50% + clamp(7.5rem, 14vh, 10rem)) !important;
  right: auto !important;
  bottom: auto !important;
  width: max-content;
  margin: 0 !important;
  transform: translate(-50%, 6px) !important;
  z-index: 30;
}

#welcome .welcome-sequence-controls.is-available {
  transform: translate(-50%, 0) !important;
}

@media (max-width: 760px) {
  #welcome .welcome-sequence-controls {
    top: calc(50% + 8.5rem) !important;
  }
}

@media (max-height: 700px) {
  #welcome .welcome-sequence-controls {
    top: calc(50% + 7rem) !important;
  }
}


/* v5.12 Synchronise sequence controls with the third-message fade-in */
#welcome .welcome-sequence-controls,
#party .party-sequence-controls {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition:
    opacity .65s cubic-bezier(.22,.61,.36,1),
    transform .65s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear .65s !important;
}

#welcome .welcome-sequence-controls.is-available,
#party .party-sequence-controls.is-available {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition:
    opacity .65s cubic-bezier(.22,.61,.36,1),
    transform .65s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 0s !important;
}


/* v5.13 Reliable replayable Home cave animation */
#home .intro-photo-reveal {
  animation: none !important;
  opacity: .18;
}

#home::after {
  animation: none !important;
  opacity: 0;
}

#home .intro-star-glowworm {
  animation: none !important;
  opacity: 0;
}

#home.intro-run .intro-photo-reveal {
  animation: introCaveDarken 6.5s cubic-bezier(.22,.61,.36,1) .35s forwards !important;
}

#home.intro-run::after {
  animation: introRealGlowwormsReveal 6.5s cubic-bezier(.22,.61,.36,1) .35s forwards !important;
}

#home.intro-run .intro-star-glowworm {
  animation:
    introStarAppear 2.8s ease-in-out var(--delay) forwards,
    introStarTwinkle var(--twinkle) ease-in-out calc(var(--delay) + 2.8s) infinite !important;
}

@media (prefers-reduced-motion: reduce) {
  #home .intro-photo-reveal,
  #home.intro-run .intro-photo-reveal {
    animation: none !important;
    opacity: .66;
  }

  #home::after,
  #home.intro-run::after {
    animation: none !important;
    opacity: .58;
  }

  #home .intro-star-glowworm,
  #home.intro-run .intro-star-glowworm {
    animation: none !important;
    opacity: .58;
  }
}

/* v5.15 Mobile-only compact navigation alignment
   Desktop navigation is intentionally unchanged. */
@media (max-width: 760px) {
  .site-header {
    height: 64px !important;
    padding: 0 1rem !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    gap: .65rem !important;
    align-items: center !important;
  }

  .site-header .monogram {
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    justify-self: start !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 103;
    font-size: 1.55rem;
    line-height: 1 !important;
    white-space: nowrap;
  }

  .site-header .monogram .amp {
    line-height: 1 !important;
  }

  .site-header .menu-toggle {
    display: flex !important;
    grid-column: 2 !important;
    align-self: center !important;
    justify-self: center !important;
    width: 42px;
    height: 42px;
    padding: 10px !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    z-index: 103;
    border-radius: 50%;
  }

  .site-header .menu-toggle span {
    width: 21px;
    transition: transform .28s ease, opacity .2s ease;
    transform-origin: center;
  }

  .menu-open .site-header .menu-toggle span:first-child {
    transform: translateY(3.5px) rotate(45deg);
  }
  .menu-open .site-header .menu-toggle span:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
  }

  .site-header .lang-switch {
    grid-column: 3 !important;
    align-self: center !important;
    justify-self: end !important;
    position: relative;
    z-index: 103;
    margin: 0 !important;
    font-size: .66rem;
    line-height: 1 !important;
    letter-spacing: .12em;
    white-space: nowrap;
  }

  .site-header .main-nav {
    position: fixed !important;
    top: 64px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    width: calc(100vw - 1.5rem) !important;
    max-width: 430px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: .55rem 1.15rem !important;
    max-height: calc(100dvh - 82px);
    overflow-y: auto;
    background: rgba(7,22,28,.96) !important;
    border: 1px solid rgba(185,231,255,.18);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 18px 45px rgba(0,0,0,.28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: translate(-50%, -12px) scale(.985) !important;
    transform-origin: top center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s !important;
    z-index: 101;
  }

  .menu-open .site-header .main-nav {
    transform: translate(-50%, 0) scale(1) !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .28s ease, transform .28s ease, visibility 0s !important;
  }

  .site-header .main-nav a {
    width: 100%;
    padding: 1rem .25rem;
    text-align: center;
    font-family: "Cormorant Garamond", serif;
    font-size: 1.08rem;
    letter-spacing: .12em;
    border-bottom: 1px solid rgba(255,255,255,.09);
    opacity: .95;
  }
  .site-header .main-nav a:last-child { border-bottom: 0; }
}

@media (max-width: 380px) {
  .site-header { padding: 0 .75rem !important; gap: .35rem !important; }
  .site-header .monogram { font-size: 1.4rem; }
  .site-header .lang-switch { font-size: .61rem; letter-spacing: .08em; }
}

/* v5.16 Mobile Home vertical composition
   Mobile only: centre the Home hero within the usable screen between the header and bottom navigation. */
@media (max-width: 760px) {
  #home .hero-content {
    transform: translateY(clamp(-13rem, -26dvh, -10rem)) !important;
  }

  #home .intro-language-toggle {
    margin-top: .62rem !important;
  }
}

@media (max-width: 760px) and (max-height: 700px) {
  #home .hero-content {
    transform: translateY(-9rem) !important;
  }
}

/* v5.17 Mobile navigation dropdown positioning fix
   Mobile only: anchor the opened menu directly below the shared header and center it on every page. */
@media (max-width: 760px) {
  .site-header .main-nav {
    position: fixed !important;
    top: 64px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(calc(100vw - 1.5rem), 430px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 80px) !important;
    margin: 0 !important;
    padding: .7rem 1rem .85rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: rgba(7,22,28,.97) !important;
    border: 1px solid rgba(185,231,255,.18) !important;
    border-top: 0 !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.34) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: translate3d(-50%, -14px, 0) scale(.985) !important;
    transform-origin: top center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 102 !important;
    transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s !important;
  }

  .menu-open .site-header .main-nav {
    top: 64px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate3d(-50%, 0, 0) scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity .28s ease, transform .28s ease, visibility 0s !important;
  }

  .site-header .main-nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: .85rem .5rem !important;
    color: rgba(255,255,255,.96) !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    font-size: 1.05rem !important;
    letter-spacing: .11em !important;
    border-bottom: 1px solid rgba(255,255,255,.09) !important;
  }

  .site-header .main-nav a:last-child {
    border-bottom: 0 !important;
  }
}

/* v5.14 Mobile Wedding page: compact cards and touch-friendly detail popups */
#wedding .wedding-card-instruction-mobile {
  display: none;
}

@media (max-width: 760px) {
  #wedding .section-inner {
    width: min(92vw, 520px);
    min-height: 100%;
    padding: 4.65rem 0 7.25rem;
    justify-content: flex-start;
  }

  #wedding .eyebrow {
    margin-bottom: .85rem;
  }

  #wedding h2 {
    margin: 0 0 1.05rem;
    font-size: clamp(2.45rem, 10.5vw, 3.3rem);
    line-height: .98;
  }

  #wedding .lead {
    margin: 0;
    font-size: clamp(1.08rem, 4.7vw, 1.34rem);
    line-height: 1.38;
  }

  #wedding .wedding-card-instruction-desktop {
    display: none !important;
  }

  #wedding .wedding-card-instruction-mobile {
    display: block;
    margin: 1.35rem 0 .75rem;
    padding: 0 .35rem;
    font-size: .68rem;
    line-height: 1.35;
    letter-spacing: .075em;
  }

  #wedding .wedding-card-instruction + .info-cards,
  #wedding .info-cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .5rem;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  #wedding .info-card {
    min-width: 0;
    min-height: 4.5rem;
    padding: .65rem .3rem !important;
    border: 1px solid rgba(185, 231, 255, .3) !important;
    border-radius: 8px;
    display: grid;
    place-items: center;
    text-align: center;
  }

  #wedding .info-card h3 {
    margin: 0;
    padding: 0 0 .12rem;
    font-size: clamp(1.05rem, 4.4vw, 1.28rem);
    line-height: 1.05;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #wedding .hover-info-popup,
  #wedding .hover-info-card:first-child .hover-info-popup,
  #wedding .hover-info-card:last-child .hover-info-popup {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: calc(50dvh - 18px) !important;
    width: min(calc(100vw - 2rem), 430px) !important;
    max-height: min(62dvh, 520px) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.05rem 1.1rem;
    border-radius: 12px;
    box-sizing: border-box;
    z-index: 5000 !important;
    transform: translate(-50%, calc(-50% + 8px)) !important;
    -webkit-overflow-scrolling: touch;
  }

  #wedding .hover-info-popup p {
    font-size: clamp(.93rem, 3.7vw, 1.03rem);
    line-height: 1.48;
  }

  #wedding .hover-info-card.is-mobile-open {
    z-index: 5001;
  }

  #wedding .hover-info-card.is-mobile-open .hover-info-popup {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(-50%, -50%) !important;
  }
}

@media (max-width: 390px) {
  #wedding .section-inner {
    width: 94vw;
    padding-top: 4.4rem;
  }

  #wedding h2 {
    font-size: clamp(2.25rem, 10.2vw, 2.85rem);
  }

  #wedding .lead {
    font-size: 1.02rem;
  }

  #wedding .info-cards {
    gap: .35rem !important;
  }

  #wedding .info-card {
    min-height: 4.15rem;
    padding-inline: .18rem !important;
  }
}

/* v5.15 Mobile Wedding detail panels: centered directly beneath card headings */
@media (max-width: 760px) {
  #wedding .hover-info-popup,
  #wedding .hover-info-card:first-child .hover-info-popup,
  #wedding .hover-info-card:last-child .hover-info-popup {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: var(--mobile-wedding-popup-top, 58dvh) !important;
    width: min(calc(100vw - 2rem), 430px) !important;
    max-height: var(--mobile-wedding-popup-max-height, 40dvh) !important;
    margin: 0 !important;
    overflow-y: auto !important;
    transform: translateX(-50%) translateY(8px) !important;
    box-sizing: border-box;
    z-index: 5000 !important;
  }

  #wedding .hover-info-card.is-mobile-open .hover-info-popup,
  #wedding .hover-info-card:first-child.is-mobile-open .hover-info-popup,
  #wedding .hover-info-card:last-child.is-mobile-open .hover-info-popup {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
  }
}

/* v5.18 Mobile Travel & Stay swipe layout
   Mobile only: Travel and Stay become horizontally swipeable full-height cards with a visible colour peek. */
@media (max-width: 760px) {
  #travel.split-section {
    display: flex !important;
    grid-template-columns: none !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 76px 12px 108px !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: 12px !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
  }

  #travel.split-section::-webkit-scrollbar {
    display: none;
  }

  #travel .split-panel {
    flex: 0 0 calc(100vw - 48px) !important;
    width: calc(100vw - 48px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: clamp(1.25rem, 4.7vw, 1.7rem) clamp(1.15rem, 5vw, 1.55rem) !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px !important;
  }

  #travel .green-panel {
    background: var(--ral-6009-deep) !important;
  }

  #travel .blue-panel {
    background: var(--ice-blue) !important;
    color: #17323b !important;
  }

  #travel .split-panel .eyebrow {
    flex: 0 0 auto;
    margin: 0 0 .72rem !important;
    font-size: .72rem !important;
    line-height: 1 !important;
    letter-spacing: .22em !important;
  }

  #travel .split-panel h2 {
    flex: 0 0 auto;
    max-width: none !important;
    margin: 0 0 1rem !important;
    font-size: clamp(2.35rem, 11.2vw, 3.25rem) !important;
    line-height: .96 !important;
  }

  #travel .split-panel > p:not(.eyebrow) {
    max-width: none !important;
    margin: 0 !important;
    font-size: clamp(.92rem, 3.75vw, 1.03rem) !important;
    line-height: 1.48 !important;
  }

  #travel .green-panel > p:not(.eyebrow) {
    color: rgba(255,255,255,.83) !important;
  }

  #travel .blue-panel > p:not(.eyebrow) {
    color: rgba(23,50,59,.82) !important;
  }

  #travel .split-panel a {
    overflow-wrap: anywhere;
  }

  #travel .blue-panel .text-link {
    margin-top: 1.1rem !important;
    align-self: flex-start;
  }

  /* Leave a little breathing space below the final line when a panel must scroll vertically. */
  #travel .split-panel::after {
    content: "";
    display: block;
    flex: 0 0 1rem;
  }
}

@media (max-width: 390px) {
  #travel.split-section {
    padding-top: 72px !important;
    padding-bottom: 104px !important;
    gap: 10px !important;
  }

  #travel .split-panel {
    flex-basis: calc(100vw - 44px) !important;
    width: calc(100vw - 44px) !important;
    padding: 1.15rem 1rem !important;
  }

  #travel .split-panel h2 {
    font-size: clamp(2.1rem, 10.5vw, 2.75rem) !important;
  }

  #travel .split-panel > p:not(.eyebrow) {
    font-size: .9rem !important;
    line-height: 1.43 !important;
  }
}

/* v5.19 Mobile Wedding: restore visible ivory detail card beneath headings */
@media (max-width: 760px) {
  #wedding .hover-info-popup,
  #wedding .hover-info-card:first-child .hover-info-popup,
  #wedding .hover-info-card:last-child .hover-info-popup {
    background: var(--ivory, #f5f0e8) !important;
    color: var(--ral-6009-deep, #1d2921) !important;
    border: 1px solid rgba(39, 53, 42, .18) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 46px rgba(20, 29, 23, .2) !important;
    padding: 1rem 1.1rem !important;
    text-align: left !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #wedding .hover-info-popup p {
    margin: 0 !important;
    color: inherit !important;
  }
}

/* v5.20 Mobile Travel & Stay: make the next/previous panel visibly peek before any swipe */
@media (max-width: 760px) {
  #travel.split-section {
    gap: 12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    scroll-padding-left: 12px !important;
    scroll-padding-right: 12px !important;
  }

  #travel .split-panel {
    flex: 0 0 86vw !important;
    width: 86vw !important;
    scroll-snap-stop: always !important;
  }

  /* Keep Travel aligned to the left on first arrival so Stay is visibly peeking
     on the right. Stay then centres when swiped to, leaving a green Travel edge
     visible on the left. */
  #travel .green-panel {
    scroll-snap-align: start !important;
  }

  #travel .blue-panel {
    scroll-snap-align: center !important;
  }
}

@media (max-width: 390px) {
  #travel .split-panel {
    flex-basis: 84vw !important;
    width: 84vw !important;
  }
}

/* v5.21 Mobile Page 8: centre all three party messages in the usable screen area */
@media (max-width: 760px) {
  #party.party-promise {
    overflow: hidden !important;
  }

  #party .party-promise-inner {
    position: absolute !important;
    top: 76px !important;
    right: 0 !important;
    bottom: 96px !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 1.25rem !important;
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
  }

  #party .party-message {
    grid-area: 1 / 1 !important;
    width: min(88vw, 34rem) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    align-self: center !important;
    justify-self: center !important;
  }

  #party .party-message p {
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    font-size: clamp(2.15rem, 9.6vw, 3.35rem) !important;
    line-height: 1.02 !important;
    text-wrap: balance;
  }

  /* Keep the manual message controls centred beneath the text block. */
  #party .party-sequence-controls {
    left: 50% !important;
    top: calc(50% + 7.25rem) !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translate(-50%, 6px) !important;
  }

  #party .party-sequence-controls.is-available {
    transform: translate(-50%, 0) !important;
  }
}

@media (max-width: 390px) {
  #party .party-message {
    width: 90vw !important;
  }

  #party .party-message p {
    font-size: clamp(2rem, 9.3vw, 3rem) !important;
  }
}

/* v5.24 Desktop Home vertical centering
   Desktop only: keep the date/location, names and intro language selector in their existing order,
   but centre the complete group vertically in the viewport. Mobile composition is unchanged. */
@media (min-width: 761px) {
  #home {
    display: grid !important;
    place-items: center !important;
  }

  #home .hero-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    transform: none !important;
    align-self: center !important;
  }
}

/* v5.25 Desktop Home optical centering correction
   Desktop only: move the complete date/location + names + intro language selector group upward
   so its visual centre sits in the viewport centre and the language selector remains clear of the bottom controls. */
@media (min-width: 761px) {
  #home .hero-content {
    transform: translateY(-12vh) !important;
  }

  #home .intro-language-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 60 !important;
  }
}

@media (min-width: 761px) and (max-height: 650px) {
  #home .hero-content {
    transform: translateY(-5.25rem) !important;
  }
}

/* v5.26 Desktop Home centre correction 2
   Raise the complete Home information group further so its visual centre sits at the true
   centre of the usable desktop viewport, while preserving the existing order and language selector. */
@media (min-width: 761px) {
  #home .hero-content {
    transform: translateY(-25vh) !important;
  }

  #home .intro-language-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media (min-width: 761px) and (max-height: 650px) {
  #home .hero-content {
    transform: translateY(-8.5rem) !important;
  }
}


/* v5.17 Home name reveal: T <-> Te Ira on desktop and mobile */
#home .hero-alternating-name {
  position: relative;
  display: block;
  min-height: 1em;
}

#home .hero-alternating-name .hero-name-short,
#home .hero-alternating-name .hero-name-full {
  display: block;
  width: 100%;
  transition: opacity 1.8s cubic-bezier(.4,0,.2,1), filter 1.8s cubic-bezier(.4,0,.2,1);
  will-change: opacity, filter;
}

#home .hero-alternating-name .hero-name-short {
  opacity: 1;
  filter: blur(0);
}

#home .hero-alternating-name .hero-name-full {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: blur(1.5px);
}

#home .hero-alternating-name.is-full .hero-name-short {
  opacity: 0;
  filter: blur(1.5px);
}

#home .hero-alternating-name.is-full .hero-name-full {
  opacity: 1;
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  #home .hero-alternating-name .hero-name-short,
  #home .hero-alternating-name .hero-name-full {
    transition: opacity .01s linear, filter .01s linear;
    filter: none;
  }
}


/* v5.27 Mobile Wedding: force ivory detail panel to render on tap */
@media (max-width: 760px) {
  #wedding .hover-info-card {
    cursor: pointer;
    touch-action: manipulation;
  }

  #wedding .hover-info-popup,
  #wedding .hover-info-card:first-child .hover-info-popup,
  #wedding .hover-info-card:last-child .hover-info-popup {
    display: none !important;
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: var(--mobile-wedding-popup-top, 58dvh) !important;
    width: min(calc(100vw - 2rem), 430px) !important;
    max-height: var(--mobile-wedding-popup-max-height, 40dvh) !important;
    margin: 0 !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    z-index: 10000 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(10px) !important;
    background: #f5f0e8 !important;
    color: var(--ral-6009-deep, #1d2921) !important;
    border: 1px solid rgba(39, 53, 42, .18) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 46px rgba(20, 29, 23, .2) !important;
    padding: 1rem 1.1rem !important;
    text-align: left !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #wedding .hover-info-card.is-mobile-open .hover-info-popup,
  #wedding .hover-info-card:first-child.is-mobile-open .hover-info-popup,
  #wedding .hover-info-card:last-child.is-mobile-open .hover-info-popup {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  #wedding .hover-info-popup p {
    margin: 0 !important;
    color: inherit !important;
  }
}

/* v5.29 Mobile Wedding: body-level ivory popup escapes transformed/stacked page layers */
@media (max-width: 760px) {
  body > .mobile-wedding-info-portal {
    position: fixed !important;
    left: 50% !important;
    top: var(--mobile-wedding-portal-top, 58dvh) !important;
    width: min(calc(100vw - 2rem), 430px) !important;
    max-height: var(--mobile-wedding-portal-max-height, 40dvh) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    z-index: 2147483000 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(10px) !important;
    transition: opacity .28s ease, transform .28s ease, visibility .28s ease !important;
  }

  body > .mobile-wedding-info-portal.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  body > .mobile-wedding-info-portal .mobile-wedding-info-content {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-height: var(--mobile-wedding-portal-max-height, 40dvh) !important;
    margin: 0 !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    background: #f5f0e8 !important;
    color: var(--ral-6009-deep, #1d2921) !important;
    border: 1px solid rgba(39, 53, 42, .18) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 46px rgba(20, 29, 23, .22) !important;
    padding: 1rem 1.1rem !important;
    text-align: left !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    -webkit-overflow-scrolling: touch;
  }

  body > .mobile-wedding-info-portal .mobile-wedding-info-content p {
    margin: 0 !important;
    color: inherit !important;
    font-size: clamp(.93rem, 3.7vw, 1.03rem) !important;
    line-height: 1.48 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body > .mobile-wedding-info-portal {
    transition: none !important;
  }
}

/* v5.30 Large-screen / TV responsive layer
   Keeps full-screen pages usable on wide displays and shallow browser viewports
   without changing the existing phone/tablet breakpoints. */
@media (min-width: 1200px) and (max-height: 820px) {
  main > section {
    --tv-safe-top: clamp(4.75rem, 9vh, 6.25rem);
    --tv-safe-bottom: clamp(5.5rem, 11vh, 7rem);
    scroll-padding-top: var(--tv-safe-top);
    scroll-padding-bottom: var(--tv-safe-bottom);
  }

  #home .hero-content {
    transform: translateY(clamp(-8.5rem, -18vh, -5rem)) !important;
  }

  #story .story-grid,
  #wedding .wedding-content,
  #rsvp .rsvp-content,
  #faq .faq-content {
    max-height: calc(100dvh - 10.5rem);
  }

  .page-controls {
    bottom: clamp(.75rem, 2vh, 1.4rem) !important;
  }
}

/* Very wide screens, including common 16:9 televisions. Limit line lengths and
   content expansion so the composition stays close to the intended desktop design. */
@media (min-width: 1600px) and (min-aspect-ratio: 16/10) {
  main > section:not(#home) > * {
    max-width: min(92vw, 1680px);
    margin-left: auto;
    margin-right: auto;
  }

  #welcome .welcome-message,
  #party .party-message,
  #countdown .countdown-inner {
    max-width: min(76vw, 1200px);
    margin-left: auto;
    margin-right: auto;
  }

  #story .story-grid,
  #wedding .wedding-content,
  #rsvp .rsvp-content,
  #faq .faq-content {
    width: min(90vw, 1540px);
    margin-left: auto;
    margin-right: auto;
  }
}

/* 4K-class displays often report a huge CSS viewport. Scale spacing and type
   gently rather than allowing the layout to spread indefinitely. */
@media (min-width: 2200px) and (min-height: 1000px) {
  html { font-size: clamp(16px, .78vw, 20px); }

  #home .hero-content {
    width: min(82vw, 1800px);
    margin-left: auto;
    margin-right: auto;
  }

  #story .story-grid,
  #wedding .wedding-content,
  #rsvp .rsvp-content,
  #faq .faq-content {
    max-width: 1760px;
  }
}

/* Extra-shallow TV/browser windows. Height is the limiting dimension here. */
@media (min-width: 1200px) and (max-height: 650px) {
  #home .hero-content {
    transform: translateY(-5.5rem) !important;
  }

  #welcome .welcome-sequence-controls,
  #party .party-sequence-controls {
    transform: translate(-50%, 0) scale(.92) !important;
  }

  .page-controls {
    transform: scale(.92);
    transform-origin: bottom center;
  }
}

/* v5.31 TV / shallow-desktop calibration
   Chrome on a television often has a wide viewport but noticeably less usable
   height because of browser chrome and the OS taskbar. These overrides lift the
   visual composition, keep the navigation bar against the bottom edge, and make
   Wedding cards/popups fit without changing normal desktop or mobile layouts. */
@media (min-width: 1200px) and (max-height: 900px) {
  .page-controls {
    bottom: 8px !important;
    min-height: 52px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }

  /* Home: compensate for the tall title block and browser chrome. */
  #home .hero-content {
    transform: translateY(-20vh) !important;
    padding-top: 5rem !important;
    padding-bottom: 3.5rem !important;
  }

  /* Lift the visual centre of the remaining full-screen pages. Relative offsets
     do not create a transformed containing block, so fixed Wedding popups remain
     fixed to the viewport. */
  #welcome .welcome-inner {
    position: relative !important;
    top: -7vh !important;
  }

  #story .story-grid {
    position: relative !important;
    top: -5vh !important;
    padding-top: 5.25rem !important;
    padding-bottom: 5.25rem !important;
  }

  #wedding .section-inner {
    position: relative !important;
    top: -7vh !important;
    padding-top: 5.75rem !important;
    padding-bottom: 4.5rem !important;
  }

  #travel .split-panel > * {
    position: relative !important;
    top: -5vh !important;
  }

  #countdown .countdown-inner {
    position: relative !important;
    top: -6vh !important;
  }

  #rsvp .section-inner {
    padding-top: 5.75rem !important;
    padding-bottom: 6.75rem !important;
  }

  #party .party-promise-inner {
    top: -6vh !important;
  }

  #faq .section-inner {
    padding-top: 5.75rem !important;
    padding-bottom: 6.5rem !important;
  }

  #welcome .welcome-sequence-controls {
    top: calc(50% + 5.4rem) !important;
  }

  #party .party-sequence-controls {
    top: calc(50% + 6rem) !important;
  }

  /* Wedding cards should stay completely above the fixed Back/Continue bar. */
  #wedding .info-cards {
    margin-top: clamp(1.2rem, 2.8vh, 2rem) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #wedding .info-card {
    padding-top: clamp(1.25rem, 2.8vh, 1.8rem) !important;
    padding-bottom: clamp(1.25rem, 2.8vh, 1.8rem) !important;
  }

  #wedding .hover-info-popup,
  #wedding .hover-info-card:first-child .hover-info-popup,
  #wedding .hover-info-card:last-child .hover-info-popup {
    top: 44% !important;
    width: min(560px, 82vw) !important;
    max-height: calc(100dvh - 150px) !important;
    padding: clamp(1rem, 2.5vh, 1.5rem) !important;
  }

  #wedding .hover-info-popup p {
    font-size: clamp(.88rem, 1.2vw, 1rem) !important;
    line-height: 1.42 !important;
  }
}

/* Stronger height-first adjustments for TVs where Chrome leaves a very shallow
   webpage viewport. */
@media (min-width: 1200px) and (max-height: 700px) {
  #home .hero-content {
    transform: translateY(-17vh) !important;
    padding-top: 3.75rem !important;
    padding-bottom: 2.5rem !important;
  }

  #welcome .welcome-inner { top: -6vh !important; }
  #story .story-grid { top: -4vh !important; padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
  #wedding .section-inner { top: -6vh !important; padding-top: 4.75rem !important; padding-bottom: 4rem !important; }
  #travel .split-panel > * { top: -4vh !important; }
  #countdown .countdown-inner { top: -5vh !important; }
  #party .party-promise-inner { top: -5vh !important; }

  #wedding h2 { font-size: clamp(2.5rem, 4.6vw, 4.2rem) !important; }
  #wedding .lead { font-size: clamp(1.12rem, 2vw, 1.55rem) !important; }
  #wedding .wedding-card-instruction { margin-top: .8rem !important; margin-bottom: .65rem !important; }
  #wedding .info-cards { margin-top: .85rem !important; }

  #wedding .hover-info-popup,
  #wedding .hover-info-card:first-child .hover-info-popup,
  #wedding .hover-info-card:last-child .hover-info-popup {
    top: 42% !important;
    max-height: calc(100dvh - 125px) !important;
  }
}

/* v5.32 Mobile Welcome readability: keep botanical artwork away from text.
   This is intentionally mobile-only and does not change the desktop/TV layout. */
@media (max-width: 760px) {
  #welcome .pohutukawa-welcome {
    width: 170px !important;
    opacity: .14 !important;
  }

  #welcome .pohutukawa-left {
    left: -8.5rem !important;
    bottom: -5rem !important;
  }

  #welcome .pohutukawa-right {
    right: -7rem !important;
    top: -3.75rem !important;
    opacity: .11 !important;
  }

  #welcome .welcome-inner,
  #welcome .welcome-sequence,
  #welcome .welcome-message {
    position: relative;
    z-index: 3;
  }
}

/* v5.33 TV shallow-viewport correction
   Corrects the final wide/shallow viewport composition after testing on a TV.
   These rules deliberately sit after the earlier TV overrides so they win only
   on large, shallow desktop/TV viewports and leave phone/tablet layouts alone. */
@media (min-width: 1200px) and (max-height: 900px) {
  /* Keep the Back / Continue bar geometrically centred. */
  .page-controls {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: 8px !important;
  }

  /* Lift the Home composition and guarantee the intro language control remains visible. */
  #home .hero-content {
    transform: translateY(-28vh) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #home .intro-language-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 80 !important;
  }

  /* Raise the visual centre of the other pages within the usable browser area. */
  #welcome .welcome-inner { top: -10vh !important; }
  #story .story-grid { top: -9vh !important; }
  #wedding .section-inner { top: -10vh !important; }
  #travel .split-panel > * { top: -8vh !important; }
  #countdown .countdown-inner { top: -9vh !important; }
  #party .party-promise-inner { top: -9vh !important; }

  /* Keep Wedding cards and their information panels clear of the bottom controls. */
  #wedding .info-cards {
    margin-top: .75rem !important;
  }

  #wedding .hover-info-popup,
  #wedding .hover-info-card:first-child .hover-info-popup,
  #wedding .hover-info-card:last-child .hover-info-popup {
    top: 39% !important;
    max-height: calc(100dvh - 118px) !important;
    overflow-y: auto !important;
  }
}

@media (min-width: 1200px) and (max-height: 700px) {
  #home .hero-content {
    transform: translateY(-26vh) !important;
  }

  /* Earlier shallow-screen scaling replaced translateX(-50%), which caused the
     navigation bar to appear off-centre. Preserve both operations here. */
  .page-controls {
    transform: translateX(-50%) scale(.92) !important;
    transform-origin: bottom center !important;
  }

  #welcome .welcome-inner { top: -11vh !important; }
  #story .story-grid { top: -10vh !important; }
  #wedding .section-inner { top: -11vh !important; }
  #travel .split-panel > * { top: -9vh !important; }
  #countdown .countdown-inner { top: -10vh !important; }
  #party .party-promise-inner { top: -10vh !important; }

  #wedding .hover-info-popup,
  #wedding .hover-info-card:first-child .hover-info-popup,
  #wedding .hover-info-card:last-child .hover-info-popup {
    top: 37% !important;
    max-height: calc(100dvh - 105px) !important;
  }
}

/* v5.34 TV safe-area correction
   Keep wide/shallow TV layouts inside the visible browser area instead of
   lifting whole content blocks beneath the fixed header. Normal desktop and
   mobile layouts are unaffected. */
@media (min-width: 1200px) and (max-height: 900px) {
  /* Undo the earlier negative vertical offsets that could hide headings behind
     the 76px fixed header. Use real safe-area padding instead. */
  #welcome .welcome-inner,
  #story .story-grid,
  #wedding .section-inner,
  #travel .split-panel > *,
  #countdown .countdown-inner,
  #party .party-promise-inner {
    top: 0 !important;
  }

  #story .story-grid {
    min-height: 100% !important;
    max-height: none !important;
    padding-top: 96px !important;
    padding-bottom: 82px !important;
    align-items: center !important;
  }

  #wedding .section-inner {
    min-height: 100% !important;
    max-height: none !important;
    padding-top: 96px !important;
    padding-bottom: 78px !important;
  }

  #wedding .info-cards {
    padding-top: clamp(.8rem, 2vh, 1.4rem) !important;
    padding-bottom: .35rem !important;
    margin-top: auto !important;
  }

  #travel .split-panel {
    padding-top: 96px !important;
    padding-bottom: 78px !important;
  }

  #countdown .countdown-inner {
    padding-top: 96px !important;
    padding-bottom: 78px !important;
  }

  #party .party-promise-inner {
    min-height: 100% !important;
    padding-top: 96px !important;
    padding-bottom: 78px !important;
  }

  #party .party-message p {
    font-size: clamp(2.1rem, 4.4vw, 4.7rem) !important;
  }

  #welcome .welcome-inner {
    padding-top: 76px !important;
    padding-bottom: 68px !important;
  }

  #rsvp .section-inner,
  #faq .section-inner {
    padding-top: 96px !important;
    padding-bottom: 84px !important;
  }

  /* Keep the fixed navigation centred and fully inside the webpage viewport. */
  .page-controls {
    left: 50% !important;
    right: auto !important;
    bottom: 8px !important;
    transform: translateX(-50%) !important;
    transform-origin: bottom center !important;
  }

  /* Wedding detail cards should open within the safe area between header and
     bottom navigation rather than being pushed toward the top edge. */
  #wedding .hover-info-popup,
  #wedding .hover-info-card:first-child .hover-info-popup,
  #wedding .hover-info-card:last-child .hover-info-popup {
    top: 50% !important;
    max-height: calc(100dvh - 170px) !important;
  }
}

@media (min-width: 1200px) and (max-height: 700px) {
  #story .story-grid,
  #wedding .section-inner,
  #travel .split-panel,
  #countdown .countdown-inner,
  #party .party-promise-inner,
  #rsvp .section-inner,
  #faq .section-inner {
    padding-top: 86px !important;
    padding-bottom: 68px !important;
  }

  #story h2,
  #wedding h2,
  #travel h2 {
    font-size: clamp(2.4rem, 4.2vw, 4rem) !important;
  }

  #story .story-copy p:not(.eyebrow),
  #travel .split-panel > p:not(.eyebrow) {
    line-height: 1.42 !important;
  }

  #party .party-message p {
    font-size: clamp(2rem, 4vw, 4rem) !important;
  }

  .page-controls {
    transform: translateX(-50%) scale(.92) !important;
  }
}