 :root {
  --gold: #c6a45b;
  --gold-deep: #987333;
  --cream: rgba(250, 249, 242, .74);
  --ink: #3e4653;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink); font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.2rem; background: #e8e8e5 url("assets/paper.jpg") center / cover fixed;
}
.gold-gradient {
  background: linear-gradient(135deg, var(--gold-deep), #e1c77f, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.display-font { font-family: "Great Vibes", cursive; font-size: 2.5rem; color: var(--gold-deep); }
.hero { min-height: 100vh; animation: fade-up 1s ease both; }
.couple-name { font: 8rem/1 "Great Vibes", cursive; margin-bottom: 0; }
.ampersand { color: var(--gold-deep); font: 4rem/1 "Great Vibes", cursive; }
.hero-note { max-width: 32rem; }
.content-section { max-width: 760px; padding: 3rem 1.25rem; animation: fade-up 1s ease both; }
.section-title { font: 3.4rem/1.1 "Great Vibes", cursive; }
.gold-rule { width: 8rem; height: 1px; background: var(--gold); margin: 1rem auto 1.5rem; }
.glass-card {
  background: var(--cream); backdrop-filter: blur(6px);
  border: 1px solid rgba(198,164,91,.55); border-radius: 1.15rem;
  box-shadow: 0 10px 40px -15px rgba(55,62,76,.35);
}
.scratch-card { width: min(100%, 18rem); height: 14rem; position: relative; overflow: hidden; }
#scratchCanvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; transition: opacity .7s; }
#scratchCanvas.cleared { opacity: 0; pointer-events: none; }
.tracking { letter-spacing: .18em; color: var(--gold-deep); }
.gallery {
  position: relative; width: min(100%, 24rem); aspect-ratio: 4 / 5;
  overflow: hidden; border: 4px solid rgba(198,164,91,.65); border-radius: 2rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.15);
}
.gallery-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s; }
.gallery-image.active { opacity: 1; }
.countdown-row { max-width: 34rem; }
.countdown-cell { padding: 1rem .25rem; }
.count-number { color: var(--gold-deep); font: 600 2.5rem/1.2 "Cormorant Garamond", serif; }
.count-label { font: 600 .7rem/1.4 sans-serif; text-transform: uppercase; letter-spacing: .12em; }
.event-card, .venue-card { padding: 1.25rem; }
.event-card h3, .venue-card h3 { font-size: 1.7rem; font-weight: 600; }
.event-meta { color: var(--gold-deep); font: 600 .9rem/1.4 sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.btn-gold { color: #fff; background: var(--gold); border-color: var(--gold); font-weight: 600; }
.btn-gold:hover, .btn-gold:focus { color: #fff; background: var(--gold-deep); border-color: var(--gold-deep); }
.venue-card { max-width: 38rem; padding: 1.5rem; }
.rsvp-form, .rsvp-success { max-width: 32rem; padding: 1.5rem; }
.form-control, .form-select { border-color: rgba(198,164,91,.6); background-color: rgba(255,255,255,.6); }
.form-control:focus, .form-select:focus { border-color: var(--gold); box-shadow: 0 0 0 .2rem rgba(198,164,91,.2); }
.intro-seal {
  position: fixed; inset: 0; z-index: 1055; width: 100%; height: 100%;
  padding: 0; border: 0; overflow: hidden; background: #171717; cursor: pointer;
}
.intro-seal img { width: 100%; height: 100%; object-fit: cover; }
.intro-seal span {
  position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%);
  color: var(--gold-deep); font: 600 clamp(2rem,5vw,3.5rem)/1.2 Georgia,serif;
  letter-spacing: .2em; text-transform: uppercase;
}
.intro-seal.leaving { animation: seal-out .9s ease forwards; pointer-events: none; }
@keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes seal-out { to { opacity: 0; transform: scale(1.4); } }
@media (max-width: 575.98px) {
  .couple-name { font-size: 6rem; }
  .section-title { font-size: 2.8rem; }
  .count-number { font-size: 1.8rem; }
  .count-label { font-size: .58rem; letter-spacing: .06em; }
  .content-section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}
