* { box-sizing: border-box; margin: 0; padding: 0; }
/* Paint html/body too, so mobile overscroll and the address-bar area never flash white */
html { scroll-behavior: smooth; background: #f6f4ef; }
body { margin: 0; background: linear-gradient(180deg, #fbf1f3 0%, #f9f1f6 22%, #f7f3f3 48%, #f6f4ef 100%); }
::selection { background: #f3cdd9; color: #4a3f44; }

@keyframes sway { 0%,100% { transform: rotate(-2.4deg); } 50% { transform: rotate(2.8deg); } }
@keyframes swayslow { 0%,100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.8deg); } }
@keyframes flutter { 0%,100% { transform: rotateY(8deg); } 50% { transform: rotateY(72deg); } }
@keyframes flutterfast { 0%,100% { transform: rotateY(5deg) scaleX(1); } 50% { transform: rotateY(60deg) scaleX(.6); } }
@keyframes drift1 { 0% { transform: translate(0,0); } 25% { transform: translate(22vw,-7vh); } 50% { transform: translate(46vw,5vh); } 75% { transform: translate(70vw,-9vh); } 100% { transform: translate(96vw,-1vh); } }
@keyframes drift2 { 0% { transform: translate(0,0); } 30% { transform: translate(-18vw,8vh); } 60% { transform: translate(-42vw,-6vh); } 100% { transform: translate(-78vw,3vh); } }
@keyframes drift3 { 0% { transform: translate(0,0); } 50% { transform: translate(30vw,12vh); } 100% { transform: translate(62vw,-4vh); } }
@keyframes bob { 0%,100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(10px) translateX(-6px); } }
@keyframes wingbeat { 0%,100% { transform: scaleX(1) scaleY(1); } 50% { transform: scaleX(0.5) scaleY(0.92); } }
@keyframes fall { 0% { transform: translateY(-8vh) rotate(0); opacity: 0; } 12% { opacity: .85; } 100% { transform: translateY(92vh) rotate(420deg); opacity: 0; } }
@keyframes rise { 0% { opacity: 0; transform: translateY(24px); } 100% { opacity: 1; transform: translateY(0); } }

input, textarea, button { font-family: inherit; }

.page {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #4a3f44;
  background: linear-gradient(180deg, #fbf1f3 0%, #f9f1f6 22%, #f7f3f3 48%, #f6f4ef 100%);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Hover lifts (replacing the prototype's style-hover attributes) */
.btn-primary { transition: transform .25s, box-shadow .25s; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(196,142,178,0.5); }
.btn-secondary { transition: background .25s, transform .25s; }
.btn-secondary:hover { background: #fff; transform: translateY(-2px); }
.card { transition: transform .3s, box-shadow .3s; }
.card:hover { transform: translateY(-5px); box-shadow: 0 20px 48px rgba(170,130,155,0.16); }
.registry-card { transition: transform .3s, box-shadow .3s; }
.registry-card:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(170,130,155,0.16); }
.btn-submit { transition: transform .25s; }
.btn-submit:hover { transform: translateY(-2px); }

input:focus, textarea:focus { border-color: #b87fa3 !important; }

/* Responsive type for small screens so the hero script faces don't overflow */
@media (max-width: 640px) {
  .hero-h1 { font-size: 72px !important; }
  /* Extra line-height so the script descenders ("y") clear the ascenders when the name wraps */
  .hero-h2 { font-size: 64px !important; line-height: 1.24 !important; }
  .hero-shower { font-size: 30px !important; }
  .section-h2 { font-size: 56px !important; }

  /* On mobile the hero text sits over the meadow — darken the muted tones
     (keeping the hierarchy) and add a soft page-coloured glow for legibility */
  .hero-eyebrow { color: #5e4b55 !important; }
  .hero-date   { color: #4f4048 !important; }
  .hero-lede   { color: #4c3e46 !important; }
  .hero-credit { color: #7c6871 !important; }
  .hero-eyebrow, .hero-date, .hero-lede, .hero-credit {
    text-shadow: 0 1px 10px rgba(251, 242, 245, 0.9), 0 0 20px rgba(251, 242, 245, 0.65);
  }
}