* { box-sizing: border-box; margin: 0; }

html { scroll-behavior: smooth; }

body {
  background: #FCFDFC;
  color: #2C3A34;
  font-family: 'Cormorant Garamond', Georgia, serif;
}

a { color: #B9924C; text-decoration: none; }
a:hover { color: #97753A; }

.eyebrow {
  font-family: 'Tenor Sans', 'Trebuchet MS', sans-serif;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #4A635A;
}
.eyebrow.gold { color: #B9924C; }

.greeting {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(24px, 3.2vw, 34px);
  color: #3B4B44;
  margin-bottom: -10px;
}
.greeting + .eyebrow { text-transform: none; letter-spacing: 0.18em; }

h1 {
  font-size: clamp(52px, 9vw, 106px);
  font-weight: 500;
  line-height: 1.05;
}
h1 .amp { font-style: italic; font-weight: 400; color: #B9924C; }

h2 { font-size: clamp(30px, 4.5vw, 40px); font-weight: 500; }

.prose {
  font-size: 19px;
  line-height: 1.75;
  color: #5C6E66;
  max-width: 640px;
}

.button {
  display: inline-block;
  font-family: 'Tenor Sans', 'Trebuchet MS', sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 18px 46px;
  cursor: pointer;
}
.button-outline {
  border: 1px solid #4A635A;
  background: rgba(252, 253, 252, 0.6);
  color: #3B4B44;
}
.button-outline:hover { background: rgba(252, 253, 252, 0.95); color: #2C3A34; }
.button-gold {
  border: none;
  background: #B9924C;
  color: #FCFDFC;
  margin-top: 10px;
}
.button-gold:hover { background: #A5813F; }

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

.hero {
  position: relative;
  min-height: clamp(640px, 100svh, 940px);
  background: #F1F6F3;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sky { position: absolute; top: 130px; left: 58%; width: 190px; height: 190px; }
.sun {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: #F6E9CD;
  box-shadow: 0 0 90px 30px rgba(233, 214, 173, 0.55);
  animation: sun-breathe 12s ease-in-out infinite alternate;
}

.cloud { position: absolute; }
.cloud-a { top: 108px; left: 5%; }
.cloud-a svg { filter: blur(6px); opacity: 0.9; animation: cloud-drift 44s ease-in-out infinite alternate; }
.cloud-b { top: 224px; right: 8%; }
.cloud-b svg { filter: blur(6px); opacity: 0.72; animation: cloud-drift 58s ease-in-out infinite alternate-reverse; }

.birds { position: absolute; top: 180px; left: 47%; }
.birds svg { animation: bird-bob 5s ease-in-out infinite alternate; }

.ridge { position: absolute; bottom: 0; left: 0; width: 100%; height: 340px; }
.ridge-far { filter: blur(4px) drop-shadow(0 -10px 16px rgba(44, 58, 52, 0.08)); }
.ridge-mid { filter: drop-shadow(0 -10px 16px rgba(44, 58, 52, 0.10)); }
.ridge-near { transform-origin: 50% 100%; filter: drop-shadow(0 -10px 16px rgba(44, 58, 52, 0.12)); }
.ridge-front { filter: drop-shadow(0 -12px 18px rgba(44, 58, 52, 0.16)); }

.mist { position: absolute; left: 0; width: 100%; filter: blur(14px); }
.mist-a { bottom: 200px; height: 36px; background: rgba(255, 255, 255, 0.55); }
.mist-b { bottom: 108px; height: 32px; background: rgba(255, 255, 255, 0.45); }

.flowers { position: absolute; bottom: -8px; z-index: 2; }
.flowers-left { left: -12px; }
.flowers-right { right: -12px; }
.mirror { transform: scaleX(-1); }
.sway {
  transform-origin: 20% 100%;
  animation: flower-sway 11s ease-in-out infinite alternate;
  filter: drop-shadow(0 8px 12px rgba(44, 58, 52, 0.20));
}
.sway-alt { animation: flower-sway 13s ease-in-out infinite alternate-reverse; }

.petals { position: absolute; inset: 0; pointer-events: none; }
.petal { position: absolute; display: block; }
.petal-1 { top: 100px; left: 22%; width: 11px; height: 13px; background: #DEB3AB; border-radius: 62% 38% 58% 42%; animation: petal-fall 15s linear infinite; }
.petal-2 { top: 90px; left: 38%; width: 9px; height: 11px; background: #D8A8A0; border-radius: 58% 42% 62% 38%; animation: petal-fall 17s linear 4s infinite; }
.petal-3 { top: 110px; left: 66%; width: 10px; height: 12px; background: #DEB3AB; border-radius: 60% 40% 60% 40%; animation: petal-fall 16s linear 8s infinite; }
.petal-4 { top: 96px; left: 80%; width: 9px; height: 11px; background: #E4C1BA; border-radius: 58% 42% 62% 38%; animation: petal-fall 18s linear 11s infinite; }

.nav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 34px clamp(20px, 5vw, 72px);
  font-family: 'Tenor Sans', 'Trebuchet MS', sans-serif;
}
.mark { font-size: 15px; letter-spacing: 0.3em; color: #4A635A; }
.nav-links { display: flex; gap: clamp(16px, 3vw, 44px); flex-wrap: wrap; }
.nav-links a {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #52655D;
}
.nav-links a:hover { color: #2C3A34; }
.lang { display: flex; gap: 12px; }
.lang button {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.12em;
  border: none;
  background: none;
  padding: 0 0 2px;
  color: #9FB0A8;
  cursor: pointer;
}
.lang button[aria-pressed='true'] {
  color: #2C3A34;
  border-bottom: 1px solid #B9924C;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(30px, 7vh, 74px) clamp(20px, 6vw, 80px) 0;
  gap: 26px;
}
.hero-date {
  font-family: 'Tenor Sans', 'Trebuchet MS', sans-serif;
  font-size: clamp(12px, 1.6vw, 15px);
  letter-spacing: 0.28em;
  color: #3B4B44;
}
.divider { display: flex; align-items: center; gap: 18px; }
.divider .line { width: clamp(48px, 8vw, 96px); height: 1px; background: #B7C6BF; }

.rise { animation: rise-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
.rise-1 { animation-delay: 0.1s; }
.rise-2 { animation-delay: 0.28s; animation-duration: 1s; }
.rise-3 { animation-delay: 0.5s; }
.rise-4 { animation-delay: 0.64s; }
.rise-5 { animation-delay: 0.8s; }

/* ---------- chapters ---------- */

.chapter {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(64px, 10vw, 96px) clamp(20px, 6vw, 80px) clamp(60px, 9vw, 90px);
  background: #FCFDFC;
}
.chapter.tinted { background: #F1F6F3; }
.chapter .reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.schedule {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 48px;
  width: 100%;
  max-width: 1100px;
}
.chapter .schedule { display: grid; }
.slot { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.slot-label {
  font-family: 'Tenor Sans', 'Trebuchet MS', sans-serif;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #4A635A;
}
.slot-time { font-size: 32px; font-weight: 500; }
.slot-place { font-style: italic; font-size: 17px; color: #5C6E66; }

/* ---------- game ---------- */

.game-frame {
  margin-top: 48px;
  width: min(100%, 1100px);
  aspect-ratio: 16 / 9;
  border: 1px solid #B7C6BF;
  background: #DCE8DF;
  box-shadow: 0 18px 44px rgba(44, 58, 52, 0.14);
}
.game-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.game-link { margin-top: 22px; font-family: 'Tenor Sans', 'Trebuchet MS', sans-serif; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }

/* ---------- footer ---------- */

.footer-ridges { position: relative; height: 190px; background: #FCFDFC; }
.footer-ridges svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 190px; }
.footer-ridge-back { filter: drop-shadow(0 -8px 14px rgba(44, 58, 52, 0.12)); }
.footer-body {
  background: #3E5A52;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 26px 20px 56px;
  text-align: center;
  font-family: 'Tenor Sans', 'Trebuchet MS', sans-serif;
}
.gold-mark { color: #D9C28F; }
.footer-date { font-size: 12px; letter-spacing: 0.24em; color: #C4D2CC; }
.footer-sign { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 18px; color: #E7EEEA; }

/* ---------- motion ---------- */

.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.9s ease-out, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-visible { opacity: 1; transform: translateY(0); }

@keyframes cloud-drift { from { transform: translateX(-70px); } to { transform: translateX(70px); } }
@keyframes bird-bob { from { transform: translateY(0); } to { transform: translateY(-9px); } }
@keyframes petal-fall {
  0% { transform: translateY(-30px) rotate(0deg); opacity: 0; }
  12% { opacity: 0.85; }
  88% { opacity: 0.6; }
  100% { transform: translateY(340px) rotate(160deg); opacity: 0; }
}
@keyframes flower-sway { from { transform: rotate(-1.3deg); } to { transform: rotate(1.5deg); } }
@keyframes sun-breathe { from { transform: scale(1); } to { transform: scale(1.035); } }
@keyframes rise-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- rsvp form ---------- */

.rsvp-code { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.rsvp-code input {
  font: inherit;
  font-size: 17px;
  padding: 14px 18px;
  border: 1px solid #B7C6BF;
  background: #FCFDFC;
  color: #2C3A34;
  min-width: 260px;
}
.rsvp-code input:focus { outline: 2px solid #B9924C; outline-offset: 1px; }
.rsvp-error { color: #A0522D; font-style: italic; font-size: 17px; }

.rsvp-invitation {
  margin-top: 26px;
  width: min(100%, 620px);
  text-align: left;
  border: 1px solid #B7C6BF;
  background: #FCFDFC;
  padding: clamp(24px, 4vw, 44px);
  box-shadow: 0 18px 44px rgba(44, 58, 52, 0.10);
}
.rsvp-invitation h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 30px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 22px;
}
.rsvp-guest {
  display: grid;
  gap: 10px;
  padding: 16px 0;
  border-top: 1px solid #E3EAE5;
}
.rsvp-guest-name { font-size: 20px; }
.rsvp-guest-name .rsvp-child { font-style: italic; font-size: 15px; color: #7E938A; }
.rsvp-choice { display: flex; gap: 22px; font-family: 'Tenor Sans', 'Trebuchet MS', sans-serif; font-size: 13px; letter-spacing: 0.06em; }
.rsvp-choice label { display: flex; align-items: center; gap: 7px; cursor: pointer; color: #3B4B44; }
.rsvp-choice input { accent-color: #B9924C; width: 16px; height: 16px; }
.rsvp-invitation input[type='text'], .rsvp-invitation input[type='date'], .rsvp-invitation select {
  font: inherit;
  font-size: 16px;
  padding: 8px 10px;
  border: 1px solid #D5DFD9;
  background: #FCFDFC;
  color: #2C3A34;
  width: 100%;
  box-sizing: border-box;
}
.rsvp-accommodation { border-top: 1px solid #E3EAE5; padding-top: 18px; margin-top: 4px; display: grid; gap: 12px; }
.rsvp-accommodation-title { font-family: 'Tenor Sans', 'Trebuchet MS', sans-serif; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #4A635A; }
.rsvp-accommodation-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rsvp-accommodation-fields label { display: grid; gap: 5px; font-size: 14px; color: #5C6E66; }
.rsvp-submit { margin-top: 22px; text-align: center; }
.rsvp-saved { margin-top: 14px; text-align: center; font-style: italic; color: #4A635A; }
.rsvp-saved.rsvp-failed { color: #A0522D; }