:root {
  --wine: #3b111c;
  --wine-deep: #20080f;
  --cream: #f4efe6;
  --sand: #d8c9b3;
  --gold: #b18c63;
  --ink: #241a18;
  --muted: #746965;
  --line: rgba(36, 26, 24, .18);
  --serif: "Prata", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--sans); font-weight: 300; }
body.locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }

.grain { position: fixed; inset: 0; pointer-events: none; z-index: 1000; opacity: .1; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' 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='.4'/%3E%3C/svg%3E"); }

.opening { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 44%, #6a4650 0%, var(--wine) 40%, var(--wine-deep) 100%); color: var(--cream); transition: opacity 1s ease, visibility 1s; }
.opening::before, .opening::after { content:""; position:absolute; width:55vw; height:55vw; border:1px solid rgba(216,201,179,.16); border-radius:50%; }
.opening::before { left:-30vw; top:-34vw; }
.opening::after { right:-28vw; bottom:-36vw; }
.opening.opened { opacity: 0; visibility: hidden; }
.opening-copy { position: absolute; top: 7vh; left: 0; right: 0; text-align: center; }
.eyebrow { display:block; font-size:11px; letter-spacing:.34em; text-transform:uppercase; }
.opening-date { display:block; margin-top:12px; font-family:var(--serif); font-size:14px; letter-spacing:.2em; }
.envelope { position:relative; width:min(520px,78vw); aspect-ratio:1.55; border:0; padding:0; background:transparent; cursor:pointer; perspective:1200px; filter:drop-shadow(0 30px 40px rgba(0,0,0,.34)); }
.envelope-shadow { position:absolute; inset:85% 8% -4%; border-radius:50%; background:rgba(0,0,0,.35); filter:blur(15px); }
.envelope-back { position:absolute; inset:0; background:#e8decd; border-radius:3px; }
.letter { position:absolute; z-index:2; left:7%; right:7%; top:8%; height:82%; display:flex; flex-direction:column; align-items:center; padding-top:12%; color:var(--wine); background:#f7f1e7; border:1px solid rgba(59,17,28,.08); transition:transform 1.1s cubic-bezier(.2,.75,.25,1); }
.letter-monogram { font-family:var(--serif); font-size:clamp(22px,3vw,38px); }
.letter-line { width:36px; height:1px; margin:18px 0; background:var(--gold); }
.letter-text { font-size:10px; letter-spacing:.38em; text-transform:uppercase; }
.envelope-front { position:absolute; z-index:3; inset:0; background:linear-gradient(145deg,transparent 49.5%,#efe5d5 50%) left/50.5% 100% no-repeat,linear-gradient(215deg,transparent 49.5%,#e5d8c5 50%) right/50.5% 100% no-repeat,linear-gradient(32deg,#efe5d5 49.5%,transparent 50%) bottom left/50.5% 52% no-repeat,linear-gradient(-32deg,#e2d4c0 49.5%,transparent 50%) bottom right/50.5% 52% no-repeat; }
.envelope-flap { position:absolute; z-index:5; top:0; left:0; width:100%; height:59%; transform-origin:top; background:linear-gradient(152deg,transparent 49.4%,#f5ecdf 50%) left/50.5% 100% no-repeat,linear-gradient(208deg,transparent 49.4%,#eee2d1 50%) right/50.5% 100% no-repeat; transition:transform .8s cubic-bezier(.4,0,.2,1),z-index 0s .42s; }
.seal { position:absolute; z-index:6; left:50%; top:52%; width:74px; height:74px; transform:translate(-50%,-50%); display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 34% 28%,#d4b379,#9a7243 58%,#74502f 100%); border:4px double rgba(255,238,196,.55); color:#fff3d4; font-family:var(--serif); font-size:15px; box-shadow:0 8px 20px rgba(54,32,16,.38); transition:opacity .3s .1s,transform .45s; }
.envelope.is-opening .envelope-flap { z-index:1; transform:rotateX(180deg); }
.envelope.is-opening .seal { opacity:0; transform:translate(-50%,-50%) scale(.6); }
.envelope.is-opening .letter { transform:translateY(-68%); }
.open-hint { position:absolute; bottom:8vh; border:0; background:transparent; color:var(--cream); font-size:11px; letter-spacing:.22em; text-transform:uppercase; cursor:pointer; }
.open-hint i,.scroll-cue i { display:block; width:1px; height:38px; margin:15px auto 0; background:linear-gradient(var(--gold),transparent); animation:pulseLine 1.8s ease-in-out infinite; }
@keyframes pulseLine { 0%,100%{transform:scaleY(.35);transform-origin:top;opacity:.45}50%{transform:scaleY(1);opacity:1} }

.site { visibility:hidden; opacity:0; transition:opacity .7s ease; }
.site.visible { visibility:visible; opacity:1; }
.sound { position:fixed; left:24px; top:24px; z-index:100; width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(177,140,99,.6); border-radius:50%; background:rgba(32,8,15,.7); color:var(--cream); backdrop-filter:blur(10px); cursor:pointer; }
.sound svg { width:18px; fill:none; stroke:currentColor; stroke-width:1.4; }
.sound.muted { opacity:.5; }
.sound-ring { position:absolute; inset:-1px; border:1px solid var(--gold); border-radius:50%; animation:soundRing 2.2s ease-out infinite; }
.sound.muted .sound-ring { display:none; }
@keyframes soundRing { from{transform:scale(.9);opacity:.7}to{transform:scale(1.45);opacity:0} }

.hero { position:relative; min-height:100svh; overflow:hidden; display:grid; align-items:center; background:var(--wine-deep); color:var(--cream); }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(32,8,15,.9) 0%,rgba(32,8,15,.2) 45%,rgba(32,8,15,.55) 100%); }
.nav { position:absolute; z-index:5; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:28px 6vw; border-bottom:1px solid rgba(244,239,230,.14); }
.nav-mark { font-family:var(--serif); font-size:18px; letter-spacing:.18em; }
.nav-links { display:flex; gap:36px; font-size:10px; letter-spacing:.22em; text-transform:uppercase; }
.hero-art { position:absolute; inset:0; }
.arch { position:absolute; border:1px solid rgba(177,140,99,.35); border-radius:50% 50% 0 0; }
.arch-one { width:46vw; height:74vh; right:8vw; bottom:-12vh; }
.arch-two { width:34vw; height:62vh; right:14vw; bottom:-4vh; }
.hero-photo { position:absolute!important; width:31vw; height:76vh; right:15.5vw; bottom:0; background:linear-gradient(160deg,#9d7b70 0%,#50323a 48%,#281017 100%)!important; }
.silhouette { position:absolute; bottom:0; border-radius:46% 46% 8% 8%; background:linear-gradient(#211318,#090609); }
.couple-one { width:35%; height:67%; left:22%; transform:rotate(-3deg); }
.couple-one::before,.couple-two::before { content:""; position:absolute; width:48%; aspect-ratio:1; left:26%; top:-16%; border-radius:50%; background:#171015; }
.couple-two { width:32%; height:58%; right:18%; transform:rotate(3deg); }
.photo-placeholder { position:relative; overflow:hidden; background:linear-gradient(135deg,#c6b4a7,#80626a 58%,#3b2028); }
.photo-placeholder::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(255,255,255,.14),transparent 35%,rgba(0,0,0,.2)); }
.photo-number,.photo-note { position:absolute; z-index:2; font-size:9px; letter-spacing:.22em; text-transform:uppercase; }
.photo-number { top:20px; left:20px; }
.photo-note { right:20px; bottom:20px; }
.hero-copy { position:relative; z-index:3; width:min(700px,55vw); margin-left:8vw; padding-top:6vh; }
.light { color:var(--sand); }
.hero h1 { margin:28px 0 24px; font-family:var(--serif); font-weight:400; font-size:clamp(64px,8.2vw,138px); line-height:.88; letter-spacing:-.04em; }
.hero h1 span { display:block; }
.hero h1 span:last-child { margin-left:1.05em; }
.hero h1 em { display:block; margin:.05em 0 -.17em .75em; color:var(--gold); font-size:.55em; font-style:italic; }
.hero-date { font-family:var(--serif); font-size:18px; letter-spacing:.14em; }
.hero-phrase { margin-top:25px; color:rgba(244,239,230,.7); font-size:13px; line-height:1.8; }
.scroll-cue { position:absolute; z-index:4; right:5vw; bottom:4vh; text-align:center; font-size:9px; letter-spacing:.22em; text-transform:uppercase; }

section { position:relative; padding:110px 8vw; }
.section-cream { background:var(--cream); }
.section-wine { background:var(--wine); color:var(--cream); }
.section-sand { background:var(--sand); }
.section-index { margin-bottom:70px; padding-bottom:18px; border-bottom:1px solid var(--line); font-size:9px; letter-spacing:.26em; text-transform:uppercase; }
.light-index { border-color:rgba(244,239,230,.2); color:var(--sand); }
.story-grid { display:grid; grid-template-columns:1fr 1fr; gap:12vw; align-items:start; }
.script-word { display:block; margin-bottom:-12px; color:var(--gold); font-family:cursive; font-size:38px; font-style:italic; transform:rotate(-5deg); }
h2 { margin:0; font-family:var(--serif); font-size:clamp(48px,6vw,88px); line-height:1.03; font-weight:400; letter-spacing:-.035em; }
.story-copy { padding-top:45px; font-size:14px; line-height:1.9; color:var(--muted); }
.story-copy .lead { margin-top:0; color:var(--ink); font-family:var(--serif); font-size:24px; line-height:1.5; }
.signature { margin-top:40px; display:flex; flex-direction:column; }
.signature span { color:var(--gold); font-family:cursive; font-size:22px; font-style:italic; }
.signature strong { margin-top:5px; color:var(--ink); font-family:var(--serif); font-size:18px; font-weight:400; }
.story-photo { height:62vw; max-height:850px; margin-top:100px; background:linear-gradient(140deg,#b9a59e,#6e4c57 55%,#2f1820); }
.line-flower { position:absolute; z-index:2; inset:0; display:grid; place-items:center; color:rgba(244,239,230,.55); font-family:var(--serif); font-size:160px; }

.date-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:9vw; align-items:center; }
.calendar { display:flex; min-height:440px; flex-direction:column; justify-content:center; align-items:center; border:1px solid rgba(244,239,230,.24); border-radius:48% 48% 0 0; background:linear-gradient(rgba(255,255,255,.04),transparent); }
.calendar strong { font-family:var(--serif); font-size:170px; line-height:1; font-weight:400; }
.calendar-month,.calendar-year { font-size:10px; letter-spacing:.32em; text-transform:uppercase; }
.date-copy h2 { margin:22px 0 55px; }
.countdown { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(244,239,230,.2); border-bottom:1px solid rgba(244,239,230,.2); }
.countdown div { padding:23px 10px; border-right:1px solid rgba(244,239,230,.2); text-align:center; }
.countdown div:last-child { border:0; }
.countdown strong { display:block; font-family:var(--serif); font-size:32px; font-weight:400; }
.countdown span { color:var(--sand); font-size:8px; letter-spacing:.22em; text-transform:uppercase; }

.section-heading { margin-bottom:80px; }
.timeline { position:relative; margin-left:15vw; }
.timeline::before { content:""; position:absolute; top:0; bottom:0; left:146px; width:1px; background:var(--line); }
.timeline-item { display:grid; grid-template-columns:120px 52px 1fr; min-height:190px; }
.timeline-item time { padding-top:8px; font-family:var(--serif); font-size:26px; }
.timeline-dot { position:relative; z-index:1; width:11px; height:11px; margin:14px auto 0; border:2px solid var(--cream); border-radius:50%; background:var(--wine); box-shadow:0 0 0 1px var(--wine); }
.timeline-item div { padding:0 0 60px 40px; border-bottom:1px solid var(--line); }
.timeline-item:last-child div { border:0; }
.item-num { color:var(--gold); font-size:9px; letter-spacing:.2em; }
.timeline h3 { margin:10px 0; font-family:var(--serif); font-size:32px; font-weight:400; }
.timeline p { max-width:520px; margin:0; color:var(--muted); font-size:13px; line-height:1.7; }

.details-grid { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid rgba(36,26,24,.17); }
.detail-card { min-height:530px; padding:50px 38px; display:flex; flex-direction:column; border-right:1px solid rgba(36,26,24,.17); }
.detail-card:last-child { border:0; }
.detail-card:nth-child(2) { background:var(--cream); }
.card-kicker { margin-bottom:auto; font-size:9px; letter-spacing:.3em; text-transform:uppercase; }
.detail-card h2 { margin-bottom:30px; font-size:42px; }
.detail-card p { color:#645852; font-size:13px; line-height:1.8; }
.detail-card a { margin-top:25px; padding-bottom:10px; display:flex; justify-content:space-between; border-bottom:1px solid currentColor; font-size:10px; letter-spacing:.2em; text-transform:uppercase; }
.palette { display:flex; margin-top:25px; }
.palette i { width:42px; height:42px; border-radius:50%; margin-left:-7px; border:1px solid rgba(255,255,255,.6); background:var(--swatch); }
.palette i:first-child { margin:0; }

.gallery-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:70px; }
.gallery-heading span { max-width:200px; color:var(--muted); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.gallery-grid { display:grid; grid-template-columns:1.15fr .85fr; grid-template-rows:460px 380px; gap:20px; }
.gallery-photo.tall { grid-row:span 2; background:linear-gradient(145deg,#a98f86,#54343e 55%,#271117); }
.gallery-photo.wide { background:linear-gradient(145deg,#d4c2b6,#8c6a70 55%,#44232c); }
.gallery-photo.square { display:none; }
.gallery-quote { display:grid; place-items:center; text-align:center; background:var(--wine); color:var(--cream); }
.gallery-quote span { position:absolute; color:var(--gold); font-family:var(--serif); font-size:80px; opacity:.35; }
.gallery-quote p { position:relative; font-family:var(--serif); font-size:26px; line-height:1.5; }

.rsvp-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:10vw; }
.light-script { color:var(--sand); }
.rsvp-copy p { max-width:430px; margin-top:40px; color:rgba(244,239,230,.65); font-size:13px; line-height:1.8; }
.rsvp-form { padding:45px; border:1px solid rgba(244,239,230,.24); }
.rsvp-form>label,.rsvp-form fieldset { display:block; margin:0 0 30px; padding:0; border:0; }
.rsvp-form label>span,.rsvp-form legend { display:block; margin-bottom:10px; color:var(--sand); font-size:9px; letter-spacing:.22em; text-transform:uppercase; }
.rsvp-form input[type=text],.rsvp-form textarea { width:100%; padding:15px 0; border:0; border-bottom:1px solid rgba(244,239,230,.3); border-radius:0; outline:0; resize:none; background:transparent; color:var(--cream); }
.rsvp-form input::placeholder,.rsvp-form textarea::placeholder { color:rgba(244,239,230,.35); }
.rsvp-form .radio { display:inline-flex; margin:8px 22px 0 0; align-items:center; gap:9px; cursor:pointer; }
.rsvp-form .radio span { margin:0; color:var(--cream); font-size:12px; letter-spacing:0; text-transform:none; }
.rsvp-form input[type=radio] { accent-color:var(--gold); }
.rsvp-form button { width:100%; display:flex; justify-content:space-between; margin-top:40px; padding:17px 0; border:0; border-bottom:1px solid var(--cream); background:transparent; color:var(--cream); text-transform:uppercase; letter-spacing:.2em; cursor:pointer; }
.form-status { min-height:20px; margin:18px 0 0; color:var(--sand); font-size:12px; }

footer { display:flex; justify-content:space-between; align-items:center; padding:42px 8vw; background:var(--wine-deep); color:var(--cream); font-size:9px; letter-spacing:.2em; text-transform:uppercase; }
.footer-mark { font-family:var(--serif); font-size:18px; }

.reveal { opacity:0; transform:translateY(32px); transition:opacity .9s ease,transform .9s ease; }
.reveal.in-view { opacity:1; transform:none; }

@media (max-width: 760px) {
  .opening-copy { top:9vh; }
  .envelope { width:88vw; }
  .seal { width:58px; height:58px; font-size:12px; }
  .open-hint { bottom:10vh; }
  .sound { width:44px; height:44px; left:16px; top:16px; }
  .nav { padding:22px 20px; }
  .nav-links { display:none; }
  .hero { min-height:100svh; align-items:end; }
  .hero-art { inset:0; }
  .hero::after { background:linear-gradient(0deg,rgba(32,8,15,.98) 0%,rgba(32,8,15,.28) 62%,rgba(32,8,15,.5) 100%); }
  .arch-one { width:100vw; height:65vh; right:-20vw; bottom:4vh; }
  .arch-two { width:78vw; height:53vh; right:-8vw; bottom:10vh; }
  .hero-photo { width:72vw; height:62vh; right:-2vw; bottom:14vh; }
  .hero-copy { width:auto; margin:0; padding:0 24px 9vh; }
  .hero h1 { margin:20px 0 18px; font-size:clamp(55px,17vw,78px); }
  .hero h1 span:last-child { margin-left:.55em; }
  .hero-phrase { display:none; }
  .hero-date { font-size:14px; }
  .scroll-cue { display:none; }
  section { padding:80px 24px; }
  .section-index { margin-bottom:50px; }
  .story-grid,.date-layout,.rsvp-grid { grid-template-columns:1fr; gap:60px; }
  h2 { font-size:47px; }
  .script-word { font-size:30px; }
  .story-copy { padding-top:0; }
  .story-copy .lead { font-size:21px; }
  .story-photo { height:115vw; margin-top:65px; }
  .calendar { min-height:360px; }
  .calendar strong { font-size:130px; }
  .countdown strong { font-size:25px; }
  .countdown span { font-size:6px; letter-spacing:.1em; }
  .program .section-heading { margin-bottom:60px; }
  .timeline { margin-left:0; }
  .timeline::before { left:86px; }
  .timeline-item { grid-template-columns:70px 32px 1fr; min-height:170px; }
  .timeline-item time { font-size:19px; }
  .timeline-item div { padding-left:18px; }
  .timeline h3 { font-size:25px; }
  .details-grid { grid-template-columns:1fr; }
  .detail-card { min-height:430px; border-right:0; border-bottom:1px solid rgba(36,26,24,.17); }
  .gallery-heading { display:block; }
  .gallery-heading span { display:block; margin-top:25px; }
  .gallery-grid { grid-template-columns:1fr; grid-template-rows:125vw 78vw auto; }
  .gallery-photo.tall { grid-row:auto; }
  .gallery-quote { min-height:330px; }
  .rsvp-form { padding:30px 22px; }
  .rsvp-form .radio { display:flex; }
  footer { flex-direction:column; gap:18px; text-align:center; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto!important; animation:none!important; transition-duration:.01ms!important; }
}