:root { --wine:#651530; --rose:#a23958; --cream:#fff9ef; --gold:#c79d47; --ink:#301422; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"DM Sans",sans-serif; overflow-x:hidden; }
.grain { position:fixed; inset:0; pointer-events:none; z-index:5; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
nav { position:absolute; z-index:3; width:100%; top:0; display:flex; justify-content:space-between; align-items:center; padding:25px clamp(20px,5vw,75px); color:#fff; }
.monogram { font-family:"Cormorant Garamond",serif; font-weight:700; font-size:1.65rem; letter-spacing:.05em; }
nav a { color:#fff; text-decoration:none; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; transition:opacity .25s; } nav a:hover { opacity:.7; }
.hero { position:relative; min-height:100svh; display:grid; place-items:center; text-align:center; color:white; overflow:hidden; background:linear-gradient(125deg,rgba(56,6,23,.65),rgba(106,23,49,.52)),url('https://images.unsplash.com/photo-1587271407850-8d438ca9fdf2?auto=format&fit=crop&w=1800&q=85') center/cover; animation:heroZoom 18s ease-out both; }
.hero:after { content:""; position:absolute; inset:18px; border:1px solid rgba(255,240,205,.45); pointer-events:none; }
.hero-copy { position:relative; z-index:2; padding:110px 20px 80px; animation:rise 1.1s .15s ease both; }
.eyebrow { display:flex; align-items:center; justify-content:center; gap:13px; font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; } .eyebrow:before,.eyebrow:after { content:""; width:34px; height:1px; background:#e7c773; }
h1 { margin:18px 0 0; font-family:"Great Vibes",cursive; font-weight:400; font-size:clamp(5.2rem,15vw,11rem); line-height:.76; text-shadow:0 2px 18px rgba(30,0,10,.2); } h1 span { display:block; font-family:"Cormorant Garamond",serif; font-weight:500; font-size:clamp(2.8rem,7vw,5.4rem); font-style:italic; line-height:.9; }
.hero-date { margin:34px auto 0; padding:14px 19px; width:max-content; max-width:100%; border-top:1px solid rgba(255,255,255,.7); border-bottom:1px solid rgba(255,255,255,.7); font-family:"Cormorant Garamond",serif; font-size:1.25rem; letter-spacing:.12em; } .hero-date b { padding:0 13px; font-size:1.7rem; color:#f4d47d; }
.scroll { position:absolute; z-index:2; bottom:27px; color:white; text-decoration:none; font-size:.62rem; text-transform:uppercase; letter-spacing:.22em; animation:bob 2s infinite; }
.petal { position:absolute; z-index:1; width:14px; height:22px; border-radius:90% 10% 90% 10%; background:rgba(255,218,186,.75); filter:blur(.2px); animation:drift linear infinite; } .petal-one { left:18%; top:-30px; animation-duration:13s; } .petal-two { left:72%; top:-50px; width:10px; height:16px; animation-duration:17s; animation-delay:-6s; } .petal-three { left:91%; top:-20px; animation-duration:15s; animation-delay:-10s; }
.intro,.rsvp { padding:clamp(80px,12vw,150px) 24px; text-align:center; background:radial-gradient(circle at 50% 0,#fff 0,transparent 52%); }.section-kicker { color:var(--rose); font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; font-weight:600; } h2 { margin:16px 0; font-family:"Cormorant Garamond",serif; font-size:clamp(2.5rem,5vw,4.1rem); font-weight:600; line-height:.95; }.intro p { max-width:535px; margin:0 auto; font-family:"Cormorant Garamond",serif; font-size:1.35rem; line-height:1.5; }.lotus { color:var(--gold); font-size:2rem; margin-top:26px; animation:spinPulse 5s ease-in-out infinite; }
.countdown { padding:60px 20px 80px; text-align:center; background:#fffaf2; }.timer { display:flex; justify-content:center; align-items:center; gap:clamp(10px,3vw,34px); margin-top:25px; }.timer div { min-width:74px; }.timer strong { display:block; color:var(--wine); font-family:"Cormorant Garamond",serif; font-size:clamp(2.6rem,6vw,4.5rem); font-weight:600; line-height:.9; font-variant-numeric:tabular-nums; }.timer span { display:block; margin-top:9px; color:var(--rose); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; }.timer i { width:4px; height:4px; border-radius:100%; background:var(--gold); }
.events { padding:100px clamp(20px,7vw,110px); background:#f3e6d0; position:relative; }.events:before { content:"\2726"; position:absolute; font-size:18rem; color:rgba(162,57,88,.06); top:-80px; right:4vw; }.event-grid { margin:52px auto 0; max-width:1150px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(101,21,48,.28); border-bottom:1px solid rgba(101,21,48,.28); }.event { padding:30px 23px 35px; min-height:285px; border-right:1px solid rgba(101,21,48,.28); display:flex; flex-direction:column; transition:background .3s, transform .3s; }.event:hover { background:rgba(255,255,255,.32); transform:translateY(-7px); }.event:last-child { border:0; }.event:nth-child(1) .event-icon { color:#d3981c; }.event:nth-child(2) .event-icon { color:#7c8e44; }.event:nth-child(3) .event-icon { color:var(--wine); }.event:nth-child(4) .event-icon { color:#a26729; }.event-icon { font-family:"Cormorant Garamond",serif; font-size:3rem; line-height:1; }.event-day { margin-top:23px; color:var(--rose); font-size:.65rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase; }.event h3 { margin:7px 0 10px; font-family:"Cormorant Garamond",serif; font-size:2.25rem; font-weight:600; line-height:1; }.event p { margin:auto 0 0; font-size:.78rem; line-height:1.7; color:#623f4b; }.event p strong { display:block; font-size:.8rem; color:var(--ink); }
.venue { min-height:620px; display:grid; grid-template-columns:1fr 1fr; background:var(--wine); color:#fff9e8; }.venue-photo { background:linear-gradient(rgba(29,6,14,.18),rgba(29,6,14,.18)),url('https://images.unsplash.com/photo-1519225421980-715cb0215aed?auto=format&fit=crop&w=1200&q=85') center/cover; min-height:360px; }.venue-copy { padding:clamp(60px,9vw,130px) clamp(30px,8vw,120px); display:flex; flex-direction:column; justify-content:center; }.venue-kicker { color:#e8bf65; }.venue-copy h2 { color:#f8d87f; }.venue-copy p { font-family:"Cormorant Garamond",serif; font-size:1.3rem; line-height:1.5; max-width:390px; }.venue-note { font-size:1rem !important; }
.btn { display:inline-block; margin-top:20px; width:max-content; padding:14px 19px; color:#fff5dd; border:1px solid #d8b864; text-decoration:none; font-size:.67rem; letter-spacing:.16em; text-transform:uppercase; transition:.25s ease; }.btn:hover { background:#d8b864; color:var(--wine); transform:translateY(-2px); }.rsvp { padding:110px 20px; }.rsvp p { margin:0 auto; max-width:450px; color:#6e4b55; line-height:1.7; font-size:.9rem; }.rsvp .btn { background:var(--wine); border-color:var(--wine); color:white; }.rsvp .btn:hover { background:var(--rose); border-color:var(--rose); color:white; } footer { padding:30px; background:var(--ink); color:#eed9ba; text-align:center; font-family:"Cormorant Garamond",serif; font-size:1.1rem; }
.reveal { opacity:0; transform:translateY(26px); transition:opacity .75s ease, transform .75s cubic-bezier(.2,.75,.3,1); }.reveal.visible { opacity:1; transform:none; }.event.reveal:nth-child(2) { transition-delay:.12s; }.event.reveal:nth-child(3) { transition-delay:.24s; }.event.reveal:nth-child(4) { transition-delay:.36s; }
@keyframes rise { from { opacity:0; transform:translateY(25px); } to { opacity:1; transform:none; } } @keyframes bob { 50% { transform:translateY(6px); } } @keyframes heroZoom { from { background-size:108%; } to { background-size:100%; } } @keyframes drift { to { transform:translate(90px,110vh) rotate(540deg); } } @keyframes spinPulse { 50% { transform:rotate(15deg) scale(1.1); } }
@media (max-width:780px) { nav a { display:none; }.event-grid { grid-template-columns:1fr 1fr; }.event:nth-child(2) { border-right:0; }.event:nth-child(-n+2) { border-bottom:1px solid rgba(101,21,48,.28); }.venue { grid-template-columns:1fr; }.venue-copy { min-height:420px; } }
@media (max-width:460px) { h1 { font-size:5rem; }.hero-date { font-size:1rem; letter-spacing:.05em; }.hero-date b { padding:0 7px; }.event { min-height:240px; padding:25px 16px; }.event h3 { font-size:1.9rem; }.timer { gap:7px; }.timer div { min-width:57px; }.timer i { display:none; }.timer strong { font-size:2.35rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } .reveal { opacity:1; transform:none; } }