@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Montserrat:wght@300;400;500&display=swap");

:root {
  --ivory: #f4ecdf;
  --wine: #5a0712;
  --wine-deep: #31050a;
  --gold: #b69355;
  --ink: #2d1714;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--ivory); }

body { color: var(--ink); font-family: "Montserrat", Arial, sans-serif; }

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  opacity: 0;
  animation: curtain 850ms cubic-bezier(.22,.61,.36,1) forwards;
}

.hero__picture, .hero__picture img, .hero__veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__picture img { object-fit: cover; object-position: center; }
.hero__veil { background: linear-gradient(180deg, rgba(244,236,223,.22), transparent 30%, transparent 72%, rgba(35,14,12,.2)); }

.invitation, .footer { position: absolute; z-index: 2; text-align: center; }

.invitation { left: 5%; top: 28%; width: 48%; color: var(--wine-deep); text-shadow: none; }
.ornament { display: block; margin-bottom: 1.1rem; color: var(--gold); font-family: Georgia, serif; font-size: clamp(.7rem, 1.2vw, 1rem); letter-spacing: .18em; }
.invitation__line { margin: 0 0 clamp(.9rem, 2.2vh, 1.5rem); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.5rem, 2.6vw, 2.55rem); font-style: italic; font-weight: 500; line-height: 1.3; letter-spacing: .1em; }
.invitation__promise { margin: 0 auto clamp(1.3rem, 3vh, 2.2rem); max-width: 34rem; font-size: clamp(.68rem, 1vw, .92rem); font-weight: 400; line-height: 1.65; letter-spacing: .035em; }
.invitation__status { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.8rem, 3.2vw, 3.2rem); font-style: italic; font-weight: 500; letter-spacing: .12em; }
.invitation__domain { margin: 1.5rem 0 0; color: var(--gold); font-size: clamp(.75rem, 1.2vw, 1rem); letter-spacing: .12em; }

.footer { inset: auto 1.25rem max(1rem, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; color: rgba(255,250,241,.88); font-size: .55rem; letter-spacing: .13em; text-transform: uppercase; }

@media (max-width: 700px) {
  .hero__veil { background: linear-gradient(180deg, rgba(244,236,223,.16), transparent 30%, transparent 76%, rgba(35,14,12,.26)); }
  .invitation { inset: 14% 1.25rem auto; width: auto; }
  .invitation__line { margin-bottom: 1.35rem; font-size: clamp(1.15rem, 5.2vw, 1.6rem); line-height: 1.3; }
  .invitation__promise { margin-bottom: 1.1rem; max-width: 19rem; font-size: clamp(.6rem, 2.7vw, .78rem); line-height: 1.55; }
  .invitation__status { font-size: clamp(1.45rem, 7vw, 2.15rem); }
  .invitation__domain { margin-top: 1rem; }
  .footer { font-size: .48rem; gap: .45rem; }
}

@media (prefers-reduced-motion: reduce) { .hero { opacity: 1; animation: none; } }

@keyframes curtain { from { opacity: 0; filter: brightness(1.12); } to { opacity: 1; filter: brightness(1); } }