@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Inter:wght@300;400;500&display=swap');

:root { --ink:#26372f; --cream:#f4f0e7; --paper:#faf8f3; --wine:#702f3d; --gold:#aa8b53; --line:rgba(38,55,47,.22); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter, sans-serif; font-weight:300; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:"Cormorant Garamond",serif; font-weight:400; }
.eyebrow { font-size:.68rem; letter-spacing:.25em; text-transform:uppercase; font-weight:500; }
.hero { position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden; color:white; background:#1f302a; }
.heroVideo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.veil { position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,30,25,.35),rgba(20,30,25,.62)); }
.heroContent { position:relative; z-index:1; text-align:center; padding:2rem; }
.hero h1 { font-size:clamp(4rem,11vw,8.5rem); line-height:.72; margin:2rem 0; }
.hero h1 i { display:block; color:#dbc99c; font-size:.65em; margin:.18em 0; }
.date { letter-spacing:.22em; text-transform:uppercase; font-size:.78rem; }
.roundLink { color:white; text-decoration:none; border:1px solid rgba(255,255,255,.7); width:52px; height:52px; border-radius:50%; display:grid; place-items:center; margin:3rem auto 0; }
.personal { max-width:760px; margin:auto; text-align:center; padding:9rem 2rem 8rem; background:radial-gradient(circle at 50% 30%,#fff 0,transparent 60%); }
.personal h2,.dress h2,.rsvp h2 { font-size:clamp(3.2rem,8vw,5.6rem); line-height:.9; margin:1rem 0 1.5rem; color:var(--wine); }
.personal>p:not(.eyebrow,.invited) { max-width:580px; margin:0 auto 2.5rem; line-height:1.8; font-family:"Cormorant Garamond"; font-size:1.4rem; }
.seats { border-block:1px solid var(--line); margin:2rem auto; padding:1.5rem; display:grid; gap:.4rem; max-width:400px; }
.seats span { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }.seats strong { font:400 2rem "Cormorant Garamond"; }
.invited { letter-spacing:.15em; text-transform:uppercase; font-size:.72rem; }.invited span { color:var(--gold); margin:0 1rem; }
.countSection { background:var(--ink); color:var(--cream); text-align:center; padding:5rem 1.5rem; }
.countdown { max-width:760px; display:grid; grid-template-columns:repeat(4,1fr); margin:2rem auto 0; }
.countdown div { border-left:1px solid rgba(255,255,255,.2); }.countdown div:first-child { border:0; }
.countdown strong { display:block; font:400 clamp(2.4rem,7vw,4.6rem) "Cormorant Garamond"; }.countdown span { font-size:.6rem; letter-spacing:.17em; text-transform:uppercase; }
.events { display:grid; grid-template-columns:1fr 1fr; }
.event { padding:8rem max(2rem,8vw); min-height:760px; display:flex; flex-direction:column; justify-content:center; }
.ceremony { background:var(--cream); }.reception { background:var(--wine); color:#f8ede8; }
.number { font:italic 1.1rem "Cormorant Garamond"; }.event h2 { font-size:clamp(3.3rem,7vw,6rem); line-height:.9; margin:1rem 0 2rem; }
.eventIntro { font:1.3rem/1.6 "Cormorant Garamond"; max-width:400px; }
dl { margin:1rem 0 2.5rem; } dl div { padding:1rem 0; border-bottom:1px solid currentColor; display:grid; grid-template-columns:100px 1fr; gap:1rem; } dt { font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; } dd { margin:0; font-family:"Cormorant Garamond"; font-size:1.15rem; }
.button,.submit { display:inline-flex; justify-content:center; width:max-content; border:1px solid currentColor; padding:1rem 1.4rem; color:inherit; background:transparent; text-decoration:none; text-transform:uppercase; letter-spacing:.12em; font:500 .65rem Inter; }
.button:disabled { opacity:.5; }.dress { padding:8rem 2rem; text-align:center; }.dressLead { text-transform:uppercase; letter-spacing:.2em; font-size:.75rem; }
.dressGrid { display:grid; grid-template-columns:1fr auto 1fr; max-width:720px; align-items:center; margin:4rem auto 0; }.dressGrid div { border-top:1px solid var(--line); padding:2rem; }.dressGrid i { font:italic 3rem "Cormorant Garamond"; color:var(--gold); }.dressGrid span { font-size:.65rem; }.dressGrid h3 { font-size:2rem; margin:.5rem; }
.rsvp { background:#e5ddd0; padding:8rem 2rem; text-align:center; }
.deadline { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
form { max-width:670px; margin:3rem auto 0; text-align:left; } fieldset { border:0; padding:0; margin:0 0 2rem; } legend,.field>span { display:block; font:500 .72rem Inter; text-transform:uppercase; letter-spacing:.12em; margin-bottom:.8rem; }.choices { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }.choices label { border:1px solid var(--line); padding:1rem; background:rgba(255,255,255,.35); font-family:"Cormorant Garamond"; font-size:1.15rem; }.choices input { accent-color:var(--wine); margin-right:.6rem; }
.field { display:block; margin-bottom:1.6rem; }.field em { text-transform:none; letter-spacing:0; font-weight:300; } select,textarea { width:100%; border:1px solid var(--line); background:rgba(255,255,255,.48); color:var(--ink); padding:1rem; font:1rem Inter; } textarea { min-height:105px; resize:vertical; } small { display:block; margin-top:.5rem; }.submit { background:var(--ink); color:white; border-color:var(--ink); width:100%; cursor:pointer; }
.success { max-width:550px; margin:3rem auto 0; padding:3rem; border:1px solid var(--line); }.success span { color:var(--gold); }.success h3 { font-size:2rem; }.textButton { border:0; border-bottom:1px solid; background:none; color:inherit; cursor:pointer; }
footer { background:#19251f; color:#f5efe4; text-align:center; padding:5rem 2rem; } footer>span { display:block; font:italic 4rem "Cormorant Garamond"; color:#c9b079; } footer p { font:2rem "Cormorant Garamond"; margin:1rem 0 .2rem; } footer small { letter-spacing:.2em; } footer code { display:block; margin-top:2rem; opacity:.45; }
@media (max-width:720px) { .hero h1 { font-size:4rem; }.events { grid-template-columns:1fr; }.event { min-height:0; padding:6rem 1.5rem; }.countSection { padding-inline:.6rem; }.countdown strong { font-size:2.5rem; }.countdown span { font-size:.48rem; }.personal,.dress,.rsvp { padding:6rem 1.25rem; }.dressGrid { grid-template-columns:1fr; }.dressGrid i { margin:1rem; }.choices { grid-template-columns:1fr; } dl div { grid-template-columns:82px 1fr; } }