:root {
  --backdrop: #f5dbe2;
  --cream: #fbf6f0;
  --mauve: #8e4f63;
  --rose: #c77b8e;
  --gold: #c9a14a;
  --text: #5a3f45;
  --card-w: 420px;
  --script: "Great Vibes", cursive;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Montserrat", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--serif);
  color: var(--text);
  background: var(--backdrop);
  line-height: 1.55;
  font-size: 1.05rem;
}
body.locked { overflow: hidden; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Cover ---------- */
.cover {
  position: fixed; inset: 0; z-index: 30;
  display: flex; justify-content: center;
  background: var(--backdrop);
  transition: opacity 1s ease, transform 1.1s ease;
}
.cover.opened { opacity: 0; transform: translateY(-40px); pointer-events: none; }

.cover-inner {
  position: relative;
  width: min(var(--card-w), 100%);
  height: 100%;
  background: radial-gradient(circle at 50% 40%, #fffaf6, var(--cream));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(142, 79, 99, 0.12);
}

.frame-wrap {
  position: relative;
  width: min(84%, calc(86vh * 320 / 470));
  aspect-ratio: 320 / 470;
}
.frame { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Botanical illustrations (transparent PNGs) */
.art { position: absolute; pointer-events: none; user-select: none; height: auto; }
.cv-top-left  { width: 50%; left: -20%; top: -9%;  transform: rotate(-24deg); }
.cv-top-right { width: 46%; right: -18%; top: -8%; transform: scaleX(-1) rotate(-22deg); }
.cv-left      { width: 26%; left: -15%; top: 40%;  transform: rotate(-8deg); }
.cv-right     { width: 26%; right: -15%; top: 44%; transform: scaleX(-1) rotate(-8deg); }
.cv-bottom    { width: 58%; left: 21%; bottom: -30%; }

.cover-content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-bottom: 8%;
}

.crown { width: 70px; margin-bottom: -10px; filter: drop-shadow(0 2px 2px rgba(120, 80, 0, 0.35)); }

.monogram-row { display: flex; align-items: center; }
.mono-bloom { width: 34px; height: auto; transform: rotate(-30deg); }
.mono-bloom.flip { transform: scaleX(-1) rotate(-30deg); }

.monogram {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(5rem, 24vw, 6.6rem);
  line-height: 1;
  letter-spacing: -0.06em;
  padding: 0 0.12em;
  background: linear-gradient(180deg, #fff3b4 0%, #e3b33c 42%, #9c6410 70%, #f4d46e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 2px rgba(110, 70, 0, 0.35));
}

.cover-title {
  font-family: var(--script);
  font-weight: 400;
  font-size: 2rem;
  color: var(--mauve);
  margin: 0.6rem 0 1rem;
}

.open-btn {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mauve);
  background: rgba(255, 255, 255, 0.75);
  border: 1.5px solid #b98591;
  border-radius: 999px;
  padding: 0.75rem 1.6rem;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.open-btn:hover, .open-btn:focus-visible { background: var(--mauve); color: #fff; }
.open-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---------- Music pill ---------- */
.music-toggle {
  position: fixed; top: 14px; z-index: 20;
  right: max(14px, calc(50% - var(--card-w) / 2 + 14px));
  font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.1em;
  color: var(--mauve);
  background: rgba(255, 250, 246, 0.9);
  border: 1px solid #d9b9c1;
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.music-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- Card ---------- */
.card {
  width: min(var(--card-w), 100%);
  margin: 0 auto;
  background: var(--cream);
  box-shadow: 0 0 40px rgba(142, 79, 99, 0.12);
  overflow: hidden;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 760px;
  background: linear-gradient(180deg, #fffdf9 0%, #fbf4ec 70%, #f3e9dc 100%);
  overflow: hidden;
}

.drape { position: absolute; top: 0; left: 0; width: 100%; height: 170px; z-index: 2; }

.column {
  position: absolute; top: 130px; bottom: 0; width: 58px; z-index: 1;
  background: repeating-linear-gradient(90deg, #fffdf6 0 7px, #e6dccb 7px 9px, #fbf7ee 9px 14px);
  box-shadow: inset 0 0 10px rgba(120, 100, 70, 0.15);
}
.column.left { left: 10px; }
.column.right { right: 10px; }
.column::before, .column::after {
  content: ""; position: absolute; left: -8px; right: -8px; height: 26px;
  background: linear-gradient(180deg, #fffaf0, #e3d4bb);
  border: 1px solid #d6c4a4; border-radius: 4px;
}
.column::before { top: -20px; }
.column::after { bottom: 0; height: 34px; }

.flowers { z-index: 3; }
.cap-left { width: 84px; top: 96px; left: 0; transform: rotate(-12deg); }
.cap-right { width: 84px; top: 96px; right: 0; transform: rotate(10deg); }
.top-center { width: 74px; top: 4px; left: 50%; transform: translateX(-50%); }
.base-left { width: 138px; bottom: 0; left: -34px; }
.base-right { width: 150px; bottom: 0; right: -40px; transform: scaleX(-1); }

.hero-content {
  position: relative; z-index: 4;
  padding: 210px 82px 160px;
  text-align: center;
}

.message {
  font-size: 1rem;
  color: #7a5a5f;
  white-space: pre-line;
}

.names {
  font-family: var(--script);
  font-weight: 400;
  color: var(--mauve);
  font-size: clamp(2.4rem, 11vw, 2.9rem);
  line-height: 1.25;
  margin-top: 2rem;
  display: flex; flex-direction: column;
}
.amp { color: var(--rose); font-size: 0.85em; }

/* ---------- Panels ---------- */
.panel {
  position: relative;
  overflow: hidden;
  padding: 3.5rem 1.75rem;
  text-align: center;
  border-top: 1px solid rgba(201, 161, 74, 0.3);
}

.divider { width: 200px; height: 22px; display: block; margin: 0 auto 1.25rem; }
.panel .divider:last-child { margin: 1.5rem auto 0; }

.caps {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.32em;
  color: var(--mauve);
  margin-bottom: 0.5rem;
}

.script-heading {
  font-family: var(--script);
  font-weight: 400;
  font-size: 2.4rem;
  color: var(--mauve);
  margin-bottom: 0.75rem;
}

/* Date */
.big-day { font-size: 4.2rem; line-height: 1; color: var(--mauve); font-weight: 500; }
.big-month { font-family: var(--script); font-size: 2.4rem; color: var(--rose); line-height: 1.2; }
.big-year { letter-spacing: 0.15em; text-transform: uppercase; font-size: 0.95rem; }

.countdown { display: flex; justify-content: center; gap: 0.6rem; margin-top: 1.75rem; }
.countdown div {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fff;
  border: 1.5px solid #e6c3cc;
  box-shadow: 0 0 0 4px #fbeef1;
}
.countdown span { font-size: 1.6rem; font-weight: 600; color: var(--mauve); line-height: 1; }
.countdown small { font-family: var(--sans); font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 3px; }

/* Events */
.events { display: grid; gap: 1.5rem; background: linear-gradient(180deg, var(--cream), #f9eef0); }
.event-card {
  position: relative;
  background: #fffdfb;
  border: 1px solid #ead2d8;
  border-radius: 140px 140px 16px 16px;
  padding: 3rem 1.5rem 2rem;
  box-shadow: 0 6px 18px rgba(142, 79, 99, 0.08);
}
.event-card::before {
  content: ""; position: absolute; inset: 8px;
  border: 1px solid rgba(201, 161, 74, 0.45);
  border-radius: 132px 132px 10px 10px;
  pointer-events: none;
}
.event-card .ev-flower { width: 72px; top: -30px; left: 50%; transform: translateX(-50%); }

/* Panel accents */
.date-left  { width: 118px; left: -46px; top: 10px; opacity: 0.5; transform: rotate(-10deg); }
.date-right { width: 110px; right: -42px; bottom: -20px; opacity: 0.5; transform: scaleX(-1) rotate(-6deg); }
.gallery-bloom { position: static; display: block; width: 64px; margin: 0 auto 0.5rem; }
.closing-left  { width: 120px; left: -40px; bottom: -40px; opacity: 0.85; }
.closing-right { width: 116px; right: -40px; bottom: -40px; opacity: 0.85; transform: scaleX(-1); }
.date-block > :not(.art), .closing > :not(.art) { position: relative; z-index: 1; }
.event-card h3 { font-family: var(--script); font-weight: 400; font-size: 2.2rem; color: var(--mauve); }
.event-card .when { font-weight: 600; margin-top: 0.25rem; }
.event-card .time { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.12em; color: var(--rose); margin-top: 0.25rem; }
.event-card .where { margin: 0.75rem 0 1.25rem; white-space: pre-line; font-size: 0.98rem; }
.event-card .where::first-line { font-weight: 600; font-size: 1.08rem; color: var(--mauve); }

.map-link {
  position: relative; z-index: 1;
  display: inline-block;
  font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.6rem 1.4rem;
  color: var(--mauve); text-decoration: none;
  border: 1.5px solid #b98591; border-radius: 999px;
  transition: background 0.3s, color 0.3s;
}
.map-link:hover, .map-link:focus-visible { background: var(--mauve); color: #fff; }
.map-link:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Gallery */
.quote { font-style: italic; margin-bottom: 1.5rem; }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.gallery-grid img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 12px; border: 4px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Closing */
.closing { padding: 4rem 1.75rem 7rem; background: linear-gradient(180deg, var(--cream), #f6e3e8); }
.closing p { max-width: 300px; margin: 0 auto; }
.signature { font-family: var(--script); font-size: 1.9rem; color: var(--mauve); margin-top: 1rem !important; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal.visible { opacity: 1; transform: none; }

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