@import url('fonts.css');
:root { --navy:#2c4e67; --cream:#eeeada; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; color:var(--cream); background:var(--navy); font-family:'Cormorant Garamond',Georgia,serif; }
a { color:inherit; }
.hero,.rsvp { position:relative; isolation:isolate; overflow:hidden; }
.hero { min-height:650px; height: min(100svh,900px); }
.backdrop { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.hero::after,.rsvp::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,#0006,transparent 60%,#0002); }
.hero .backdrop { width:125%; height:125%; max-width:none; left:-25%; top:-12%; }
.back { position:absolute; top:28px; left:32px; font:12px Manrope,sans-serif; letter-spacing:.08em; text-decoration:none; padding:10px; }
.monogram { position:absolute; top:30px; left:50%; transform:translateX(-50%); font-size:70px; font-weight:300; letter-spacing:-18px; padding-right:18px; }
.monogram span { position:relative; top:12px; }
.hero-title { position:absolute; top:45%; left:5%; right:5%; }
h1 { font-family:'Great Vibes',cursive; font-weight:400; font-size:clamp(55px,7.5vw,115px); line-height:1.15; margin:0; color:#fff; }
h1 span { font-size:1.12em; }
.hero-title p { font-size:clamp(25px,4.7vw,65px); text-transform:uppercase; margin:0; font-weight:300; }
.date { position:absolute; bottom:38px; width:100%; text-align:center; font:clamp(11px,1.6vw,20px) Manrope,sans-serif; text-transform:uppercase; }
.details { padding:65px max(7%,24px) 85px; }
.section-title { text-align:center; margin-bottom:45px; }
.flourish { font-size:65px; font-weight:300; }
.section-title p { font-family:'Great Vibes',cursive; font-size:50px; margin:5px 0 -18px; }
.section-title h2 { text-transform:uppercase; font-size:65px; font-weight:300; margin:0; }
.details-grid { display:grid; grid-template-columns:1fr 1fr; gap:50px 13%; max-width:1000px; margin:auto; }
article { text-align:center; }
.ornament { display:block; font-size:48px; line-height:1; }
h3 { font-size:36px; font-weight:400; margin:12px 0; }
article p { max-width:370px; margin:auto; font:15px/1.7 Manrope,Arial,sans-serif; }
.venue { display:block; width:100%; max-height:700px; object-fit:cover; }
.gifts { display:grid; grid-template-columns:1fr 1fr; gap:0; padding:0; }
.gift-photo { position:relative; min-height:500px; overflow:hidden; }
.gift-photo img { width:100%; height:100%; position:absolute; object-fit:cover; }
.gift-photo h2 { position:absolute; top:34%; left:8%; color:var(--navy); font-size:70px; line-height:.9; font-weight:300; text-transform:uppercase; }
.gift-photo em { font-family:'Great Vibes',cursive; text-transform:none; font-size:80px; font-style:normal; }
.gift-photo h2 span { color:white; }
.gift-copy { padding:14% 12%; align-self:center; }
.gift-copy h3 { font-size:30px; line-height:1.1; margin-bottom:35px; }
.gift-copy p { font:14px/1.6 Manrope,Arial,sans-serif; max-width:330px; }
.gift-copy .flourish { display:block; text-align:right; }
.rsvp { min-height:650px; }
.rsvp h2 { position:absolute; bottom:50px; left:6%; font-size:clamp(30px,4.5vw,60px); font-weight:300; line-height:.95; }
.rsvp-link { position:absolute; top:40%; right:8%; font:clamp(45px,7vw,95px) 'Great Vibes',cursive; text-decoration:none; border-bottom:1px solid #eeeada88; transform:rotate(-12deg); }
.rsvp .monogram { top:auto; bottom:35px; left:auto; right:5%; transform:none; }
footer { padding:30px; text-align:center; font:12px/1.8 Manrope,Arial,sans-serif; }
a:focus-visible { outline:3px solid var(--cream); outline-offset:6px; }
.rsvp-link:hover { color:white; }
@media(max-width:760px) {
  .hero { display:flex; flex-direction:column; min-height:0; height:auto; }
  .hero::after { display:none; }
  .hero .backdrop { position:relative; inset:auto; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:center; z-index:0; }
  .back { z-index:2; top:12px; left:12px; min-height:44px; display:flex; align-items:center; padding:10px 14px; background:#203b50d9; border-radius:3px; font-size:13px; }
  .monogram { z-index:1; top:12px; left:auto; right:20px; transform:none; font-size:46px; letter-spacing:-12px; padding-right:12px; text-shadow:0 1px 6px #0008; }
  .hero-title { position:static; padding:28px 20px 0; text-align:center; }
  h1 { font-size:clamp(38px,10.5vw,68px); text-wrap:balance; line-height:1.25; }
  .hero-title p { font-size:clamp(22px,5vw,32px); margin-top:12px; }
  .date { position:static; width:auto; padding:20px 24px 30px; margin:0; font-size:12px; line-height:1.7; text-wrap:balance; }
  .details { padding:40px 24px 48px; }
  .details-grid { grid-template-columns:minmax(0,1fr); gap:36px; }
  .section-title { margin-bottom:32px; }
  .section-title h2 { font-size:55px; }
  article p { font-size:16px; line-height:1.75; }
  .venue { height:auto; max-height:none; }
  .gifts { grid-template-columns:minmax(0,1fr); }
  .gift-photo { min-height:0; aspect-ratio:4/5; }
  .gift-photo h2 { font-size:clamp(52px,13vw,70px); margin:0; }
  .gift-photo em { font-size:clamp(60px,15vw,80px); }
  .gift-copy { padding:36px 28px; }
  .gift-copy h3 { font-size:32px; margin-bottom:24px; }
  .gift-copy p { font-size:16px; line-height:1.75; max-width:none; }
  .rsvp { min-height:560px; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:20px; padding:40px 24px 100px; }
  .rsvp::after { background:linear-gradient(0deg,#102638e8, #10263830 85%); }
  .rsvp .backdrop { object-position:48% center; }
  .rsvp h2 { position:static; margin:0; font-size:clamp(32px,7vw,44px); line-height:1.1; }
  .rsvp-link { position:static; transform:none; font-size:clamp(36px,10vw,56px); line-height:1.3; padding:8px 4px; min-height:48px; white-space:nowrap; }
  .rsvp .monogram { bottom:24px; right:24px; font-size:48px; }
  footer { padding:24px; }
  footer a { display:inline-flex; align-items:center; min-height:44px; padding:10px; font-size:14px; }
}
@media(max-width:760px) and (orientation:landscape) {
  .hero .backdrop { aspect-ratio:2/1; }
  .rsvp { min-height:440px; }
}