:root { --black:#090708; --wine:#6f1020; --red:#a7192d; --gold:#d9ae5b; --cream:#f5ead5; --muted:#b9a99a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--black); color:var(--cream); font-family:Montserrat, sans-serif; font-weight:300; line-height:1.7; text-align:center; overflow-x:hidden; }
body:before { display:none; }
.hero { min-height:50vh; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden; background:radial-gradient(circle at 50% 38%, #56111d 0, #1b0c11 34%, var(--black) 70%); padding:2rem 1.5rem 4.5rem; }
.hero-glow { position:absolute; width:300px; height:300px; background:#ae192c; filter:blur(120px); opacity:.25; }
.rose-emblem { width:200px; height:200px; object-fit:contain; position:relative; z-index:1; margin-top:20px; margin-bottom:.7rem; filter:drop-shadow(0 8px 14px rgba(0,0,0,.45)); animation:rise .9s ease both; }
.eyebrow { color:var(--gold); font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; margin:0 0 1.2rem; }
.hero .eyebrow { font-family:"Great Vibes", cursive; font-size:2rem; letter-spacing:.04em; text-transform:none; margin-bottom:.5rem; background:linear-gradient(110deg,#8b5d19 0%,#f8df91 22%,#b77b22 42%,#fff0ad 58%,#c08a32 76%,#ffe59a 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 1px 0 rgba(255,235,157,.15); }
.hero-divider { width:min(65vw,260px); max-height:55px; object-fit:contain; margin:.8rem auto .45rem; position:relative; z-index:1; opacity:.9; filter:drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.intro-line { font-family:Parisienne, cursive; color:var(--gold); font-size:1.7rem; margin:0 0 .5rem; }
h1,h2,h3,p { position:relative; z-index:1; }
h1 { font:600 clamp(4rem, 13vw, 8rem)/.85 Cinzel, serif; letter-spacing:.03em; text-transform:uppercase; margin:1rem 0; background:linear-gradient(110deg,#8b5d19 0%,#f8df91 22%,#b77b22 42%,#fff0ad 58%,#c08a32 76%,#ffe59a 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 8px 30px rgba(0,0,0,.45); animation:rise .9s ease both; }
h1 span { font-size:.54em; background:inherit; -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:.16em; }
.gold-rule { width:75px; height:1px; background:var(--gold); margin:1.5rem auto; position:relative; z-index:1; }
.hero-date { font-family:"Cormorant Garamond",serif; font-size:1.25rem; margin-left:0; background:linear-gradient(110deg,#8b5d19 0%,#f8df91 22%,#b77b22 42%,#fff0ad 58%,#c08a32 76%,#ffe59a 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.music-player { width:min(92%,560px); margin:1.5rem auto 0; padding:1.25rem 1.5rem 1.1rem; position:relative; z-index:2; display:flex; flex-direction:column; align-content:center; justify-content:center; align-items:center; flex-wrap:nowrap; background:var(--black); box-shadow:none; backdrop-filter:none; }.player-label { margin:0 0 .55rem; color:var(--gold); font:1.25rem "Cormorant Garamond",serif; text-align:center; }.music-button { width:auto; height:auto; display:block; position:static; margin:20px auto 1rem; padding:0; border:0; color:var(--gold); background:transparent; font-size:1.35rem; line-height:1; cursor:pointer; text-transform:none; letter-spacing:normal; }.music-button:hover { color:#f8df91; }.progress-container { width:100%; display:block; }.progress-container input { width:100%; height:3px; accent-color:var(--gold); cursor:pointer; }.music-time { display:block; margin-top:.35rem; color:var(--muted); text-align:right; white-space:nowrap; font-size:.58rem; }
.scroll-link { --parallax:0px; position:absolute; bottom:1.25rem; color:rgba(245,234,213,.9); text-decoration:none; font-size:.52rem; letter-spacing:.1em; text-transform:uppercase; z-index:1; padding:.55rem .8rem .45rem; border:1px solid rgba(217,174,91,.42); border-radius:999px; background:radial-gradient(circle at 50% calc(35% + var(--parallax)),rgba(255,229,143,.18),transparent 45%),rgba(9,7,8,.16); box-shadow:0 8px 20px rgba(0,0,0,.22), inset 0 1px 8px rgba(255,232,159,.12); backdrop-filter:blur(5px); transition:opacity .7s, transform .7s; animation:float 3s ease-in-out infinite; }.scroll-link span { display:block; color:var(--gold); font-size:1rem; line-height:1; }.scroll-link.expired { opacity:0 !important; visibility:hidden; transform:translateY(20px) scale(.9); pointer-events:none; }
.section { padding:7rem 1.5rem; max-width:1000px; margin:auto; position:relative; }
blockquote { max-width:720px; margin:0 auto 2rem; color:var(--cream); font:1.5rem/1.6 Parisienne, cursive; }.blessing p:not(.eyebrow) { max-width:620px; margin:1.4rem auto; color:var(--muted); }.invitation-text { color:var(--gold)!important; margin-top:3rem!important; }
.blessing-frame { width:min(100%,760px); margin:auto; position:relative; display:grid; place-items:center; }.blessing-content { width:100%; position:relative; z-index:1; padding:26px 0 1rem; }.blessing-divider { display:block; width:350px; max-width:100%; height:auto; margin:0 auto 1rem; opacity:.9; }.blessing-divider:last-child { margin:1rem auto 0; }.blessing-content .eyebrow { font-family:"Great Vibes",cursive; font-size:1.8rem; letter-spacing:.03em; text-transform:none; }.blessing-content blockquote { font-size:1.35rem; }.blessing-content p:not(.eyebrow) { color:var(--muted); font-size:.82rem; }.blessing-content .invitation-text { font-size:.88rem; }
.blessing-quote { font-size:.9rem !important; line-height:1.35 !important; }.blessing-heading { margin:1.4rem 0 .25rem; font:600 1.25rem Cinzel,serif; text-transform:uppercase; letter-spacing:.12em; background:linear-gradient(110deg,#8b5d19 0%,#f8df91 22%,#b77b22 42%,#fff0ad 58%,#c08a32 76%,#ffe59a 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.people { background:linear-gradient(90deg, transparent, rgba(111,16,32,.25), transparent); max-width:none; }.people-grid { max-width:850px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:4rem; }.people article+article { border-left:1px solid rgba(217,174,91,.35); }.people h2 { font:500 1.05rem/1.8 Cinzel,serif; }.ampersand { color:var(--gold); font:1.6rem Parisienne,cursive; }
h2 { color:var(--gold); font:500 2rem Cinzel,serif; letter-spacing:.08em; text-transform:uppercase; }.countdown-section { max-width:none; background:linear-gradient(180deg,var(--black) 0%,#16090c 38%,#3e0e17 100%); }.countdown { display:flex; justify-content:center; gap:clamp(1rem,5vw,4rem); margin-top:3rem; }.countdown div { min-width:65px; }.countdown strong { display:block; color:var(--cream); font:500 clamp(2rem,6vw,3.8rem) Cinzel,serif; }.countdown span { color:var(--muted); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; }
.countdown-lead { font-family:"Cormorant Garamond",serif; font-size:1.25rem; line-height:1.45; background:linear-gradient(110deg,#8b5d19 0%,#f8df91 22%,#b77b22 42%,#fff0ad 58%,#c08a32 76%,#ffe59a 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }.countdown-section h2,.countdown strong,.countdown span { background:linear-gradient(110deg,#8b5d19 0%,#f8df91 22%,#b77b22 42%,#fff0ad 58%,#c08a32 76%,#ffe59a 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.detail-card,.mini-card { padding:3rem 1.5rem; box-shadow:0 20px 60px rgba(0,0,0,.24); position:relative; }.detail-icon,.card-symbol { color:var(--gold); font-size:2rem; }.card-divider { display:block; width:350px; max-width:100%; height:auto; margin:0 auto 1.5rem; }.gift-symbol,.dresscode-symbol { display:block; width:90px; height:90px; object-fit:contain; margin:0 auto 1rem; }.detail-card h3 { font:500 1.2rem/1.6 Cinzel,serif; }.detail-card h3 span { color:var(--gold); letter-spacing:.2em; }.detail-card p,.mini-card p,.rsvp p { color:var(--muted); }.button { display:inline-block; color:var(--black); background:var(--gold); padding:.75rem 1.5rem; text-decoration:none; text-transform:uppercase; letter-spacing:.12em; font-size:.68rem; font-weight:600; margin-top:1rem; transition:transform .25s, background .25s, box-shadow .25s; }.button:hover { background:#f0ca78; box-shadow:0 8px 25px rgba(217,174,91,.2); transform:translateY(-2px); }.two-cards { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; max-width:1000px; background:linear-gradient(180deg,var(--black) 0%,#16090c 48%,#3e0e17 100%); }.mini-card h2 { margin:.3rem 0 1rem; font-size:1.4rem; background:linear-gradient(110deg,#8b5d19 0%,#f8df91 22%,#b77b22 42%,#fff0ad 58%,#c08a32 76%,#ffe59a 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }.secondary-heading { font-size:1.05rem!important; margin-top:.4rem!important; }.mini-card b,.rsvp b { color:var(--gold); font-weight:500; }.rsvp { padding-bottom:8rem; }.deadline { margin:2rem auto!important; }.button-red { background:var(--red); color:var(--cream); }.button-red:hover { background:#c42238; }
.details { max-width:none; padding:0; }.reception-art { display:block; width:100%; max-width:none; height:auto; margin:0; }.invitation-banner { padding-top:4rem; padding-bottom:4rem; background:linear-gradient(180deg,#3e0e17 0%,#16090c 62%,var(--black) 100%); }.invitation-banner p { max-width:650px; margin:0 auto; }
.reception-info { padding-top:4rem; padding-bottom:4rem; }.venue-image { display:block; width:170px; height:170px; margin:0 auto 1.5rem; object-fit:cover; border:2px solid var(--gold); border-radius:50%; padding:5px; }.reception-info h2 { font-size:1.35rem; line-height:1.6; background:linear-gradient(110deg,#8b5d19 0%,#f8df91 22%,#b77b22 42%,#fff0ad 58%,#c08a32 76%,#ffe59a 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }.reception-info h2 span { letter-spacing:.18em; }.reception-info p { margin:1.5rem auto; }
.reception-info .button { border:1px solid #f8df91; border-radius:999px; background:linear-gradient(110deg,#8b5d19,#f8df91 35%,#b77b22 60%,#ffe59a); box-shadow:0 8px 22px rgba(217,174,91,.2), inset 0 1px 2px rgba(255,255,255,.55); padding:.85rem 1.8rem; transition:transform .25s,box-shadow .25s,filter .25s; }.reception-info .button:hover { filter:brightness(1.08); transform:translateY(-3px); box-shadow:0 12px 28px rgba(217,174,91,.35), inset 0 1px 2px rgba(255,255,255,.65); }
footer { padding:2rem 1.5rem 1rem; background:#11090b; color:var(--gold); font:1.6rem/1.5 Parisienne,cursive; } .footer-divider { display:block; width:350px; max-width:100%; height:auto; margin:0 auto 1.5rem; } .footer-divider-bottom { margin:1.2rem auto 0; } footer span { font: .7rem Montserrat,sans-serif; letter-spacing:.2em; } footer small { display:block; color:var(--muted); font: .65rem Montserrat,sans-serif; margin-top:3rem; letter-spacing:.15em; text-transform:uppercase; }.social-links { display:flex; justify-content:center; gap:1.4rem; margin-top:1.5rem; }.social-links a { color:var(--gold); font-size:1.35rem; transition:color .25s,transform .25s; }.social-links a:hover { color:#f8df91; transform:translateY(-2px); }
.footer-logo { display:block; width:50px; max-width:40%; height:auto; margin:1.2rem auto 0; }
@keyframes rise { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes float { 0%,100% { margin-bottom:0; } 50% { margin-bottom:10px; } }
@media (prefers-reduced-motion:no-preference) { .eyebrow,.hero-date,.scroll-link { animation:rise .8s .2s ease both; }.scroll-link { animation:rise .8s .2s ease both, float 3s 1s ease-in-out infinite; } }
@media (max-width:650px) { .section { padding:2rem 1.2rem; }.details { padding:0; }.people-grid,.two-cards { grid-template-columns:1fr; gap:3rem; }.people article+article { border-left:0; border-top:1px solid rgba(217,174,91,.35); padding-top:3rem; }.countdown { gap:.5rem; }.countdown div { min-width:60px; } blockquote { font-size:1.3rem; }.blessing-content { padding:1rem 0; }.blessing-content blockquote { font-size:1.05rem; line-height:1.45; }.blessing-content p:not(.eyebrow) { font-size:.7rem; line-height:1.5; }.blessing-content .invitation-text { font-size:.74rem; } }
body p:not(.eyebrow) { font-family:"Cormorant Garamond",serif; font-size:1.25rem !important; font-style:normal; line-height:1.45; background:linear-gradient(110deg,#8b5d19 0%,#f8df91 22%,#b77b22 42%,#fff0ad 58%,#c08a32 76%,#ffe59a 100%); -webkit-background-clip:text; background-clip:text; color:transparent !important; }
.card-divider-bottom { margin:1.5rem auto 0; }.rsvp { background:linear-gradient(180deg,#3e0e17 0%,#16090c 55%,var(--black) 100%); }.rsvp-image { display:block; width:170px; height:170px; object-fit:cover; margin:0 auto 1.5rem; border:2px solid var(--gold); border-radius:50%; padding:5px; }.rsvp h2 { background:linear-gradient(110deg,#8b5d19 0%,#f8df91 22%,#b77b22 42%,#fff0ad 58%,#c08a32 76%,#ffe59a 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.detail-card,.mini-card { padding:0; box-shadow:none; }.rsvp-image { width:80px; height:80px; object-fit:contain; border:0; border-radius:0; padding:0; }
.reception-info .button,.rsvp .button { border:1px solid #f8df91; border-radius:999px; background:linear-gradient(110deg,#8b5d19,#f8df91 35%,#b77b22 60%,#ffe59a); box-shadow:0 8px 22px rgba(217,174,91,.2),inset 0 1px 2px rgba(255,255,255,.55); padding:.85rem 1.8rem; }.reception-info .button:hover,.rsvp .button:hover { filter:brightness(1.08); transform:translateY(-3px); box-shadow:0 12px 28px rgba(217,174,91,.35),inset 0 1px 2px rgba(255,255,255,.65); }
