:root {
  --bg: #edf3ec;
  --paper: #fbfcf8;
  --mint: #d7ebd7;
  --mint-deep: #a8cfb3;
  --ink: #2f3d3a;
  --green: #4f7f6b;
  --green-deep: #3d6660;
  --teal: #557a80;
  --gold: #a68a4e;
  --muted: #74857f;
  --line: #cfdccf;
  --serif: "Cormorant Garamond", Georgia, serif;
  --display: "Playfair Display", Georgia, serif;
  --script: "Great Vibes", cursive;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

body {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  background: var(--bg);
  color: var(--ink);
  text-align: center;
}

.container {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 24px;
}

h1 {
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 400;
  color: var(--green-deep);
  margin-bottom: 8px;
}

h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.8rem;
  margin: 4px 0 12px;
}

/* ---------- Invitation page ---------- */

.invitation-page {
  overflow-x: clip;
  background-color: var(--bg);
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(30, 42, 35, 0.035) 31px 32px);
}

.page {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 20px 40px;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin: 0 0 10px;
}

.names {
  font-family: var(--display);
  font-size: clamp(2.6rem, 9vw, 4.6rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
  margin: 6px 0 18px;
}

.amp {
  font-family: var(--script);
  font-size: 0.6em;
  color: var(--muted);
  padding: 0 0.1em;
}

.invite {
  max-width: 560px;
  margin: 0 auto;
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--muted);
}

.invite strong {
  color: var(--ink);
  font-weight: 600;
}

/* Hero: the whole photo across the full width, at its natural height (no cropping) */
.hero-banner {
  position: relative;
  margin: -56px calc(50% - 50vw) 34px;
  overflow: hidden;
}

.hero-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100vh;
  max-height: 100dvh;
  object-fit: cover;
  object-position: 50% 12%;
}

/* Phones: portrait photo (2.jpg) filling the screen, with the text at the top */
@media (max-width: 600px) {
  .hero-banner img {
    height: 100vh;
    height: 100dvh;
    max-height: none;
    object-position: 50% 50%;
  }

  /* No darkening over the sky; the text carries its own gold foil instead */
  .hero .hero-banner::after { background: none; }

  .hero .hero-overlay {
    top: max(36px, 6vh);
    bottom: auto;
    text-shadow: none;
  }

  /* Deep navy on the light sky, with only the "&" in shining gold */
  .hero .hero-std { color: #2f5a82; }

  .hero .hero-names,
  .hero .hero-date {
    color: #1f3a56;
    text-shadow: 0 1px 12px rgba(255, 255, 255, 0.55);
  }

  .hero .hero-names { font-weight: 600; }

  .hero .hero-amp {
    background: linear-gradient(110deg, #9a6f24 0%, #d9ac52 30%, #f6dc95 45%, #c28f3a 60%, #9a6f24 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    animation: foil-shine 5s ease-in-out infinite;
  }
}

@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .hero .hero-amp { animation: none; }
}

/* Dark fade along the bottom so the white text stays readable */
.hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(15, 25, 22, 0.35) 75%, rgba(15, 25, 22, 0.72) 100%);
}

.hero-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(28px, 4.5vh);
  z-index: 1;
  padding: 0 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

.hero-overlay p { margin: 0; }

.hero-std {
  font-family: var(--script);
  font-size: clamp(2rem, 6.5vw, 2.8rem);
  line-height: 1;
}

.hero-names {
  margin: 6px 0 0;
  font-family: var(--display);
  font-size: clamp(1.6rem, 5.6vw, 2.8rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
}

.hero-amp { color: #f1e2b8; }

.hero-overlay .hero-date {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: clamp(0.85rem, 2.8vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.22em;
}

/* One-time confetti on page load */

.confetti {
  position: fixed;
  inset: 0;
  z-index: 70;
  overflow: hidden;
  pointer-events: none;
}

.confetti .bit {
  position: absolute;
  margin: -4px 0 0 -4px;
  box-shadow: 0 1px 2px rgba(47, 61, 58, 0.12);
  will-change: transform, opacity;
}

.confetti .strip { width: 4px; height: 12px; border-radius: 1px; }
.confetti .dot { width: 6px; height: 6px; border-radius: 50%; }
.confetti .petal { width: 10px; height: 7px; border-radius: 150% 0 150% 0; }

/* Cards scene: save-the-date, letter and calendar pocket */

.scene {
  position: relative;
  max-width: 720px;
  margin: 48px auto 24px;
  aspect-ratio: 1.08;
}

/* Cards stay hidden until the scene is scrolled into view and starts playing */
.scene:not(.play) .paper,
.scene:not(.play) .pocket,
.scene:not(.play) .pocket-back { opacity: 0; }

.paper {
  position: absolute;
  background: var(--paper);
  box-shadow: 0 18px 40px rgba(47, 61, 58, 0.16), 0 2px 6px rgba(47, 61, 58, 0.08);
  container-type: inline-size;
  color: var(--green-deep);
  overflow: hidden;
}

.paper p { margin: 0; }

.art {
  position: absolute;
  color: var(--green);
  opacity: 0.55;
  pointer-events: none;
}

/* Save the date */

.save-date {
  width: 46%;
  left: 1%;
  top: 7%;
  aspect-ratio: 1 / 1.4;
  background: linear-gradient(160deg, #e3f2e2 0%, var(--mint) 55%, #cbe5cf 100%);
  transform: rotate(-7deg);
  z-index: 1;
}

.save-date .art-top { width: 34%; aspect-ratio: 1; right: 2%; top: 2%; }
.save-date .art-top-leaf { width: 30%; aspect-ratio: 100 / 70; right: 24%; top: 10%; transform: rotate(-20deg); }
.save-date .art-bottom { width: 36%; aspect-ratio: 1; left: 4%; bottom: 3%; }
.save-date .art-bottom-leaf { width: 34%; aspect-ratio: 100 / 70; left: 26%; bottom: 2%; transform: rotate(12deg); }
.save-date .art-pod { width: 10%; aspect-ratio: 40 / 60; left: 9%; bottom: 30%; }
/* Thin double frame, like foil printing */
.save-date::before,
.save-date::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid rgba(85, 122, 128, 0.45);
}

.save-date::before { inset: 4.5%; }
.save-date::after { inset: 6%; border-color: rgba(85, 122, 128, 0.22); }

.std-label {
  position: absolute;
  left: 10%;
  top: 50%;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  font-size: 3.6cqw;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
}

.std-label em {
  font-family: var(--script);
  font-size: 1.6em;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gold);
}

.std-center {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.std-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--display);
  font-size: 25cqw;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--gold);
  /* Gold foil: gradient clipped to the text with a slow moving sheen */
  background: linear-gradient(110deg, #9a783a 0%, #c9a35b 22%, #f4e4b5 34%, #c29b53 46%, #a5803f 64%, #e8d095 80%, #9a783a 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6));
  animation: foil-shine 7s ease-in-out infinite;
}

@keyframes foil-shine {
  0%, 100% { background-position: 100% 0; }
  50% { background-position: 0% 0; }
}

/* Monogram: H & N on one line inside a fine double ring */
.std-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20cqw;
  height: 20cqw;
  margin-top: 7cqw;
  border-radius: 50%;
  border: 1px solid rgba(166, 138, 78, 0.75);
  box-shadow: 0 0 0 2.5px var(--mint), 0 0 0 3.5px rgba(166, 138, 78, 0.35);
  color: var(--gold);
  white-space: nowrap;
}

.seal-letter {
  font-family: var(--display);
  font-style: italic;
  font-size: 7cqw;
  line-height: 1;
}

.seal-amp {
  margin: 0 0.8cqw;
  font-family: var(--script);
  font-size: 4.5cqw;
  line-height: 1;
  color: #c2a56a;
  transform: translateY(0.3cqw);
}

@media (prefers-reduced-motion: reduce) {
  .std-date { animation: none; }
}

/* Guest invitation on the envelope front */

.pocket-invite {
  position: absolute;
  left: 14%;
  right: 14%;
  top: 44%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.invite-label {
  font-size: 3.2cqw;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.invite-name {
  min-width: 60%;
  min-height: 1.2em;
  padding: 0 4cqw;
  font-family: var(--script);
  font-size: 10cqw;
  line-height: 1.25;
  color: var(--teal);
  border-bottom: 1px dotted rgba(85, 122, 128, 0.6);
}

.invite-event {
  margin-top: 2cqw;
  font-size: 3.8cqw;
  font-style: italic;
  color: var(--ink);
}

.invite-when {
  margin-top: 1cqw;
  font-size: 2.8cqw;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}

/* Letter */

.letter {
  width: 50%;
  right: 1%;
  top: 9%;
  aspect-ratio: 1 / 1.18;
  transform: rotate(5deg);
  z-index: 2;
}

.letter-rail {
  position: absolute;
  left: 9%;
  top: 5%;
  bottom: 24%;
  width: 2cqw;
  border-left: 1px solid var(--teal);
  border-right: 1px solid var(--teal);
  opacity: 0.85;
}

.letter-rail .hy {
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 9cqw;
  height: 9cqw;
  border: 1px solid var(--teal);
  border-radius: 50%;
  background: var(--paper);
  display: grid;
  place-items: center;
  font-size: 5.5cqw;
  color: var(--teal);
  font-family: "Songti SC", "Noto Serif SC", "SimSun", serif;
}

.letter-body {
  position: absolute;
  inset: 6% 6% 20% 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1.4cqw;
  color: var(--ink);
}

.families {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 4cqw;
  font-size: 2.8cqw;
  line-height: 1.35;
  margin-bottom: 3cqw;
}

.families small { color: var(--muted); font-size: 1em; }
.families b { font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; font-size: 0.92em; white-space: nowrap; }
.families em { color: var(--muted); }

.letter .caps {
  font-size: 3cqw;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--teal);
}

.letter .caps.strong {
  font-size: 3.4cqw;
  color: var(--ink);
}

.letter .script {
  font-family: var(--script);
  font-size: 10cqw;
  line-height: 1.1;
  color: var(--teal);
}

.letter .script small {
  font-family: var(--serif);
  font-size: 0.26em;
  font-style: italic;
  color: var(--muted);
}

.letter .groom { align-self: flex-start; }
.letter .bride { align-self: flex-end; margin-bottom: 2cqw; }

.letter .heart {
  font-size: 4cqw;
  color: var(--teal);
  line-height: 1;
}

.letter .lunar {
  font-size: 2.8cqw;
  font-style: italic;
  color: var(--muted);
}

/* Opened envelope: .pocket-back (behind the letter) + .pocket front */

.pocket,
.pocket-back {
  position: absolute;
  right: -1%;
  bottom: 2%;
  width: 58%;
  height: 38%;
  transform: rotate(5deg);
}

.pocket-back {
  z-index: 1;
  background: linear-gradient(180deg, #b3d2bb 0%, #c4dfca 100%);
  filter: drop-shadow(0 12px 24px rgba(47, 61, 58, 0.16));
}

/* Open flap, folded up above the envelope */
.pocket-flap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 62%;
  background: linear-gradient(0deg, #c9e2cd 0%, #dbeedb 100%);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

.pocket {
  z-index: 3;
  container-type: inline-size;
  filter: drop-shadow(0 -2px 4px rgba(47, 61, 58, 0.14));
}

/* Front of the envelope with the V opening; the parent's shadow follows the cut */
.pocket-sheet {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.35) 0%, transparent 40%),
    linear-gradient(180deg, #e0f1df 0%, var(--mint) 100%);
  clip-path: polygon(0 0, 50% 34%, 100% 0, 100% 100%, 0 100%);
}

/* Fine line running parallel to the V edge */
.pocket-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(85, 122, 128, 0.35);
  clip-path: polygon(0 4%, 50% 38%, 100% 4%, 100% 4.6%, 50% 38.8%, 0 4.6%);
}

.pocket-lotus-1 { width: 13%; aspect-ratio: 1; right: 3%; top: 9%; }
.pocket-lotus-2 { width: 10%; aspect-ratio: 1; right: 17%; top: 22%; }
.pocket-leaf { width: 16%; aspect-ratio: 100 / 70; left: 3%; top: 10%; }

/* Animation: cards come out, rest for a while, tuck back in, repeat */

.scene.play .save-date { animation: loop-std 15s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
.scene.play .letter { animation: loop-letter 15s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
.scene.play .pocket,
.scene.play .pocket-back { animation: fade-in 0.8s ease both; }

@keyframes loop-std {
  0% { transform: translateX(-30%) rotate(-14deg); opacity: 0; }
  9%, 91% { transform: translateX(0) rotate(-7deg); opacity: 1; }
  100% { transform: translateX(-30%) rotate(-14deg); opacity: 0; }
}

@keyframes loop-letter {
  0%, 3% { transform: translateY(40%) rotate(5deg); opacity: 0; }
  13%, 88% { transform: translateY(0) rotate(5deg); opacity: 1; }
  97%, 100% { transform: translateY(40%) rotate(5deg); opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(12px) rotate(5deg); }
  to { opacity: 1; transform: rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .scene.play .save-date,
  .scene.play .letter,
  .scene.play .pocket,
  .scene.play .pocket-back { animation: none; }
}

/* Phones: stack the cards so the text stays readable */
@media (max-width: 560px) {
  .scene { aspect-ratio: 0.58; }
  .save-date { width: 66%; left: 0; top: 0; }
  .letter { width: 72%; right: 0; top: 30%; }
  .pocket,
  .pocket-back { width: 84%; height: 27%; right: 2%; bottom: 0; }
}

/* Lotus divider between sections */

.lotus-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 420px;
  margin: 56px auto 40px;
  color: var(--gold);
}

.lotus-divider span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(166, 138, 78, 0.6));
}

.lotus-divider span:last-child {
  background: linear-gradient(90deg, rgba(166, 138, 78, 0.6), transparent);
}

.lotus-divider svg {
  width: 36px;
  height: 36px;
}

/* Countdown */

.countdown-grid {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 3vw, 22px);
  margin-top: 14px;
}

.countdown-grid[hidden] { display: none; }

.countdown-grid div {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: clamp(62px, 17vw, 92px);
  padding: 14px 8px 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(47, 61, 58, 0.06);
}

.countdown-grid strong {
  font-family: var(--display);
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  font-weight: 400;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.countdown-grid span {
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.countdown-done {
  font-family: var(--script);
  font-size: 2.2rem;
  color: var(--gold);
  margin: 8px 0 0;
}

/* Details */

.details {
  display: grid;
  gap: 28px;
  margin-bottom: 36px;
}

.detail .eyebrow { margin-bottom: 8px; }

.detail .when {
  font-family: var(--display);
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  font-weight: 600;
  margin: 0;
}

.detail .where {
  font-size: 1.35rem;
  color: var(--muted);
  margin: 4px 0 0;
}

.detail .lunar {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--muted);
  margin: 2px 0 0;
}

.party-note {
  max-width: 560px;
  margin: 0 auto 8px;
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--ink);
}

.party-note strong {
  color: var(--teal);
  font-weight: 600;
}

.map-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 22px;
  border: 1.5px solid var(--green-deep);
  border-radius: 999px;
  color: var(--green-deep);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.map-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.map-btn:hover {
  background: var(--green-deep);
  color: #fff;
}

/* Background music toggle: a floating lily that spins while music plays */

.music-toggle {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 40;
  width: 66px;
  height: 66px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  filter: drop-shadow(0 6px 10px rgba(47, 61, 58, 0.28));
}

.music-toggle[hidden] { display: none; }

.music-toggle svg {
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  transition: opacity 0.3s;
}

/* Soft glow behind the lily that pulses while music plays */
.music-toggle::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 235, 0.95) 0%, rgba(230, 210, 159, 0.45) 45%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}

.music-toggle:not(.playing) svg {
  opacity: 0.8;
  animation: sway 3s ease-in-out infinite;
}

.music-toggle.playing svg { animation: spin 9s linear infinite; }
.music-toggle.playing::after { animation: glow 2.6s ease-in-out infinite; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes sway {
  0%, 100% { transform: rotate(-12deg) scale(0.96); }
  50% { transform: rotate(12deg) scale(1); }
}

@keyframes glow {
  0%, 100% { transform: scale(0.9); opacity: 0.55; }
  50% { transform: scale(1.35); opacity: 1; }
}

/* Opening cover: an envelope with a wax seal, tapped to open */

body.locked { overflow: hidden; }

.cover {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background-color: var(--bg);
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(30, 42, 35, 0.035) 31px 32px);
  cursor: pointer;
  transition: opacity 0.9s ease, visibility 0.9s;
}

.cover.opened {
  opacity: 0;
  visibility: hidden;
}

.cover-env {
  position: relative;
  width: min(100vw, 540px);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: linear-gradient(180deg, #f3f6f1 0%, #e8eee6 100%);
  box-shadow: 0 0 60px rgba(47, 61, 58, 0.18);
  perspective: 1400px;
  container-type: inline-size;
  transition: transform 1s cubic-bezier(0.5, 0, 0.2, 1);
}

/* Thin frame line, like the printed card */
.cover-env::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(85, 122, 128, 0.25);
  pointer-events: none;
}

.cover-art {
  position: absolute;
  color: var(--green);
  opacity: 0.22;
  pointer-events: none;
}

.cover-art-1 { width: 38%; aspect-ratio: 1; right: -4%; top: 50%; }
.cover-art-2 { width: 30%; aspect-ratio: 100 / 70; right: 14%; top: 64%; transform: rotate(-20deg); }
.cover-art-3 { width: 30%; aspect-ratio: 1; left: -4%; bottom: -2%; transform: rotate(15deg); }

.cover-flap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40%;
  z-index: 3;
  display: flex;
  justify-content: center;
  padding-top: 11%;
  background: linear-gradient(180deg, #f7f9f5 0%, #eef3ec 100%);
  clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
  filter: drop-shadow(0 6px 8px rgba(47, 61, 58, 0.12));
  transform-origin: top center;
  transition: transform 0.9s cubic-bezier(0.5, 0, 0.3, 1) 0.15s;
}

.cover-std {
  margin: 0;
  font-family: var(--script);
  font-size: clamp(44px, 13cqw, 70px);
  line-height: 0.9;
  color: var(--green);
  text-align: center;
}

.cover-std span { display: block; padding-left: 0.6em; font-size: 0.8em; }

/* Gold wax seal sitting on the flap's point */
.cover-seal {
  position: absolute;
  left: 50%;
  top: 40%;
  z-index: 4;
  width: clamp(76px, 19cqw, 100px);
  height: clamp(76px, 19cqw, 100px);
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%;
  background: radial-gradient(circle at 35% 30%, #f1d792 0%, #d1aa5c 38%, #a8803a 72%, #8a6528 100%);
  box-shadow:
    0 10px 18px rgba(80, 55, 20, 0.35),
    inset 0 2px 3px rgba(255, 240, 200, 0.7),
    inset 0 -4px 8px rgba(90, 60, 20, 0.45);
  cursor: pointer;
  transition: transform 0.5s ease, opacity 0.5s ease;
  animation: seal-breathe 2.6s ease-in-out infinite;
}

.cover-seal::before {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  box-shadow: inset 0 2px 4px rgba(90, 60, 20, 0.45), 0 1px 0 rgba(255, 240, 200, 0.5);
}

.cover-seal svg {
  position: relative;
  width: 52%;
  height: 52%;
  fill: none;
  stroke: #7a5a22;
  stroke-width: 1.6;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 0 rgba(255, 235, 190, 0.6));
}

.cover-body {
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
  text-align: center;
}

.cover-body p { margin: 0; }

.cover-of {
  font-family: var(--display);
  font-size: clamp(16px, 4cqw, 20px);
  letter-spacing: 0.18em;
  color: var(--muted);
}

.cover-names {
  display: flex;
  flex-direction: column;
  margin: 14px 0 0;
  font-family: var(--display);
  font-size: clamp(30px, 8.6cqw, 46px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--green-deep);
}

.cover-amp {
  font-family: var(--script);
  font-weight: 400;
  font-size: 0.8em;
  text-transform: none;
  color: var(--gold);
}

.cover-line {
  width: 90px;
  height: 1px;
  margin: 18px 0 14px;
  background: linear-gradient(90deg, transparent, rgba(166, 138, 78, 0.8), transparent);
}

.cover-date {
  font-family: var(--sans);
  font-size: clamp(14px, 3.6cqw, 17px);
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--green-deep);
}

.cover-body .cover-to {
  margin-top: 18px;
  font-size: clamp(17px, 4.4cqw, 21px);
  font-style: italic;
  color: var(--muted);
}

.cover-to strong {
  font-family: var(--script);
  font-style: normal;
  font-weight: 400;
  font-size: 1.5em;
  color: var(--teal);
}

.cover-body .cover-hint {
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  animation: hint-pulse 2s ease-in-out infinite;
}

/* Opening sequence */
.cover.opening .cover-seal { animation: none; transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
.cover.opening .cover-flap { transform: rotateX(180deg); }
.cover.opening .cover-hint { opacity: 0; animation: none; }
.cover.opened .cover-env { transform: translateY(-6%) scale(1.04); }

@keyframes seal-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.06); }
}

@keyframes hint-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cover-seal, .cover-hint { animation: none; }
  .cover-flap, .cover-env { transition: none; }
}

/* Scroll reveal */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* Invitation line: soft focus-in with a slight letter-spacing settle */
.invite.reveal {
  filter: blur(6px);
  letter-spacing: 0.06em;
  transition: opacity 1.4s ease, transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1), filter 1.4s ease, letter-spacing 1.6s ease;
  transition-delay: 0.2s;
}

.invite.reveal.in {
  filter: none;
  letter-spacing: normal;
}

.invite.reveal .guest-name {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s ease 1.2s, transform 0.8s ease 1.2s;
}

.invite.reveal.in .guest-name {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; transition: opacity 0.4s ease; }
  .invite.reveal { filter: none; letter-spacing: normal; }
  .invite.reveal .guest-name { opacity: 1; transform: none; transition: none; }
  .music-toggle svg,
  .music-toggle::after { animation: none !important; }
}

/* RSVP */

.card {
  background: var(--paper);
  border-radius: 4px;
  padding: 32px;
  box-shadow: 0 10px 30px rgba(30, 42, 35, 0.08);
}

.rsvp {
  position: relative;
  max-width: 520px;
  margin: 56px auto 0;
  padding: 44px 36px 36px;
}

.rsvp::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--line);
  pointer-events: none;
}

.rsvp > * { position: relative; }

.rsvp p { font-size: 1.2rem; line-height: 1.5; }

.answer-badge {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 20px;
  background: #e6e9e3;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.answer-badge.joining {
  background: #dfe9e0;
  color: var(--green);
}

.party-size {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 4px 0 14px;
}

.party-size-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.chips {
  display: flex;
  gap: 8px;
}

.chip {
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.chip[aria-pressed="true"] {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: #fff;
}

.guest-message {
  margin: 12px auto 20px;
  max-width: 420px;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--muted);
}

.soft-label {
  margin: 28px 0 8px;
  font-size: 1.05rem !important;
  font-style: italic;
  font-weight: 500;
  color: var(--muted);
}

textarea {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: inherit;
  font-family: var(--serif);
  font-size: 1.1rem;
  resize: none;
  outline: none;
  transition: border-color 0.2s;
}

textarea::placeholder {
  color: #a9b3ab;
  font-style: italic;
}

textarea:focus {
  border-color: var(--green);
}

button {
  padding: 12px 28px;
  margin: 6px;
  border: none;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.yes {
  background: var(--green-deep);
  color: #fff;
  border: 1.5px solid var(--green-deep);
}

.yes:hover { background: var(--green); }

.no {
  background: transparent;
  color: var(--green-deep);
  border: 1.5px solid var(--green-deep);
}

.no:hover { background: #e6ebe4; }

button.link {
  display: block;
  margin: 4px auto 0;
  padding: 6px;
  border: none;
  background: none;
  color: #a3ada6;
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
}

button.link:hover { color: var(--muted); }

dialog {
  border: none;
  border-radius: 4px;
  padding: 36px 32px 28px;
  max-width: 360px;
  background: var(--paper);
  text-align: center;
  color: inherit;
  font-family: inherit;
  font-size: 1.2rem;
  box-shadow: 0 20px 50px rgba(30, 42, 35, 0.25);
}

dialog::backdrop {
  background: rgba(30, 42, 35, 0.45);
}

.footer {
  margin-top: 56px;
}

.footer .script {
  font-family: var(--script);
  font-size: 2rem;
  color: var(--green);
}

/* ---------- Admin ---------- */

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

th, td {
  padding: 8px;
  border-bottom: 1px solid var(--line);
}

input {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: inherit;
}