:root{--bg:#f3eee5;--ink:#121c16;--forest:#121c16;--gold:#c4ad84;--mute:#7b8076;--line:rgba(18,28,22,.14);
  --serif:"Cormorant Garamond",Georgia,serif;--sans:"Onest",system-ui,sans-serif;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:300 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.locked{overflow:hidden}
i,em{font-style:italic}a{color:inherit}
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.kicker{font-size:11px;letter-spacing:.32em;text-transform:uppercase;margin:0 0 1.6rem}
h2{font:300 clamp(44px,8vw,104px)/.95 var(--serif);letter-spacing:-.02em;margin:0 0 2rem}
h2 em{color:var(--gold)}
.mono,.gate-mono,.foot-mono{font-family:var(--serif);text-decoration:none;letter-spacing:-.05em}
.mono i,.gate-mono i,.foot-mono i{color:var(--gold);font-size:.8em;padding:0 .12em}

/* gate */
#gate{position:fixed;inset:0;z-index:100;color:#f3eee5;display:grid;place-items:center;text-align:center;overflow:hidden;transition:opacity .4s 1.5s}
#gate.out{opacity:0;pointer-events:none}
.door{position:absolute;top:0;bottom:0;width:50.2%;background:var(--forest);transition:transform 1.7s cubic-bezier(.7,0,.15,1);z-index:0}
.door.l{left:0;border-right:1px solid rgba(196,173,132,.5)}.door.r{right:0}
#gate.out .l{transform:translateX(-101%)}#gate.out .r{transform:translateX(101%)}
.glow{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%),rgba(196,173,132,.16),transparent 60%);transition:opacity .6s}
.glow::before,.glow::after{content:"";position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(90px);opacity:.35;animation:drift 18s ease-in-out infinite alternate}
.glow::before{background:#2c4a38;left:-20vmax;top:-20vmax}.glow::after{background:#6b5a3a;right:-25vmax;bottom:-25vmax;animation-duration:24s}
@keyframes drift{to{transform:translate(12vmax,8vmax) scale(1.2)}}
#dust{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.gate-in,.gate-lang,.gate-date{z-index:2;transition:opacity .7s,transform 1s var(--ease)}
.gate-in{position:relative}
#gate.out .gate-in{opacity:0;transform:scale(1.12)}#gate.out .gate-lang,#gate.out .gate-date{opacity:0}
.gate-lang{position:absolute;top:calc(20px + env(safe-area-inset-top));right:clamp(20px,5vw,64px)}
.gate-date{position:absolute;bottom:calc(30px + env(safe-area-inset-bottom));left:0;right:0;margin:0;font-size:11px;letter-spacing:.45em;opacity:.45;animation:fadeUp 2s 1.2s var(--ease) both}
.ring-wrap{--rs:min(88vw,400px);position:relative;width:var(--rs);height:var(--rs);margin:0 auto 1.6rem;display:grid;place-items:center}
.ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 70s linear infinite,fadeIn 2.4s .6s both}
.ring text{font:400 10.5px var(--sans);letter-spacing:.3em;fill:var(--gold)}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{from{opacity:0}}
.arch{position:absolute;height:62%;top:19%;overflow:visible}
.arch path{fill:none;stroke:var(--gold);stroke-width:.8;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 3s .3s var(--ease) forwards;opacity:.7}
@keyframes draw{to{stroke-dashoffset:0}}
.gate-mono{position:relative;font-size:calc(var(--rs)*.2);line-height:1;animation:monoIn 2.2s .2s var(--ease) both}
@keyframes monoIn{from{opacity:0;filter:blur(18px);letter-spacing:.25em;transform:scale(.9)}}
.gate-in .kicker{opacity:.6;animation:fadeUp 1.4s 1s var(--ease) both}
.gate-in .btn{animation:fadeUp 1.4s 1.3s var(--ease) both,pulse 2.8s 3s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(196,173,132,.45)}70%,100%{box-shadow:0 0 0 24px rgba(196,173,132,0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}}

/* buttons */
.btn{display:inline-block;border:1px solid currentColor;background:none;color:inherit;font:400 11px var(--sans);letter-spacing:.28em;text-transform:uppercase;
  padding:1.15em 2.4em;border-radius:99px;cursor:pointer;text-decoration:none;position:relative;overflow:hidden;transition:color .5s var(--ease),transform .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--gold);transform:translateY(101%);transition:transform .6s var(--ease);z-index:-1;border-radius:inherit}
.btn:hover{color:var(--forest);border-color:var(--gold)}.btn:hover::before{transform:none}
.btn{isolation:isolate}.btn.solid{background:var(--gold);color:var(--forest);border-color:var(--gold);width:100%;margin-top:1.5rem}
.btn.solid::before{background:#f3eee5}.btn.ghost{margin-top:3rem}

/* topbar */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;
  padding:calc(18px + env(safe-area-inset-top)) clamp(20px,5vw,64px) 18px;color:#fff;mix-blend-mode:difference}
.mono{font-size:28px}.lang{display:flex;gap:10px;align-items:center;font-size:11px;letter-spacing:.2em}
.lang span{width:1px;height:12px;background:currentColor;opacity:.5}
.lang-btn{background:none;border:0;color:inherit;font:inherit;opacity:.5;cursor:pointer;padding:6px 2px;transition:opacity .3s}
.lang-btn.active{opacity:1}

/* hero */
.hero{position:relative;height:100svh;min-height:620px;display:grid;place-items:center;text-align:center;color:#f3eee5;overflow:hidden;background:var(--forest)}
.hero-bg{position:absolute;inset:-8% 0;will-change:transform}
.hero-image{position:absolute;inset:0;background:url("https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=2200&q=85") center/cover;animation:kb 24s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.15)}}
.hero-shade{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(18,28,22,.2),rgba(18,28,22,.72)),linear-gradient(transparent 55%,var(--forest))}
.hero-content{position:relative;padding:0 20px 90px}
.hero h1{margin:0;display:flex;flex-direction:column;align-items:center;font:300 clamp(54px,14vw,200px)/.82 var(--serif);letter-spacing:-.04em}
.line{display:block;overflow:hidden;padding:.06em .04em .1em}
.ch{display:inline-block;transform:translateY(110%) rotate(6deg);transition:transform 1.5s var(--ease);transition-delay:calc(var(--i)*70ms + .5s)}
.opened .ch{transform:none}
.amp{font-size:.55em;line-height:.7;color:var(--gold);margin:-.08em 0 -.02em;text-shadow:0 0 .5em rgba(196,173,132,.4)}
.hero-date{margin:3rem 0 0;display:flex;gap:1.1rem;justify-content:center;align-items:baseline;font-size:12px;letter-spacing:.32em}
.hero-date b{font:300 48px var(--serif);letter-spacing:0}
.rise{opacity:0;transform:translateY(24px);transition:opacity 1.4s var(--ease),transform 1.4s var(--ease);transition-delay:1.4s}
.opened .rise{opacity:1;transform:none}
.cue{position:absolute;bottom:calc(28px + env(safe-area-inset-bottom));left:50%;margin-left:-30px;width:60px;display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;font-size:9px;letter-spacing:.25em;white-space:nowrap}
.cue span{width:1px;height:46px;background:linear-gradient(var(--gold),transparent);animation:drip 2s ease-in-out infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

@keyframes mq{to{transform:translateX(-50%)}}

.section{padding:clamp(90px,16vw,200px) clamp(22px,7vw,110px);max-width:1280px;margin:auto}
.dark{max-width:none;background:var(--forest);color:#f3eee5}
.dark>*{max-width:1100px;margin-left:auto;margin-right:auto}
.muted{color:var(--mute)}.dark .muted{color:#98a094}

.words{font:300 clamp(24px,3.6vw,44px)/1.35 var(--serif);max-width:20em;margin:0}
.w{opacity:.14;transition:opacity .5s}.w.on{opacity:1}

/* reveal */
.r{opacity:0;transform:translateY(40px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.r.in{opacity:1;transform:none}

/* date */
.big{display:flex;align-items:center;gap:1.5rem;font-family:var(--serif)}
.big span{font-size:clamp(130px,30vw,340px);line-height:.8;font-weight:300;letter-spacing:-.05em;color:var(--gold)}
.big b{display:block;font:300 clamp(34px,6vw,72px)/1 var(--serif)}.big small{font-size:clamp(18px,3vw,32px);opacity:.6}
.weekday{letter-spacing:.3em;text-transform:uppercase;font-size:12px;margin:2.5rem 0 3.5rem}
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(243,238,229,.14);border:1px solid rgba(243,238,229,.14);border-radius:20px;overflow:hidden}
.count div{background:var(--forest);padding:clamp(20px,4vw,48px) 8px;text-align:center}
.count strong{display:block;font:300 clamp(36px,8vw,92px)/1 var(--serif);font-variant-numeric:tabular-nums}
.count span{font-size:10px;letter-spacing:.25em;text-transform:uppercase;opacity:.55}

/* venue */
.venue-card{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,6vw,90px);align-items:end}
.venue-photo{aspect-ratio:4/5;border-radius:240px 240px 8px 8px;background:url("images/venue.jpg") center/cover,url("https://avatars.mds.yandex.net/get-altay/11385489/2a0000018d3559721011fcb1c7266e14bf9f/XXXL") center/cover,#cfc7b6;
  clip-path:inset(100% 0 0 0);transition:clip-path 1.6s var(--ease)}
.venue-card.in .venue-photo{clip-path:inset(0)}
.venue-info h3{font:400 clamp(30px,4vw,48px)/1.1 var(--serif);margin:0 0 1rem}.venue-info p{margin:.3rem 0}.venue-info h3+p{font-size:19px;padding-left:14px;border-left:1px solid var(--gold);margin:.6rem 0 1.2rem}.venue-info .btn{margin-top:2rem}

/* timeline */
.timeline{position:relative;padding-left:clamp(26px,5vw,60px)}
.tl-line{position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--gold);transform-origin:top;transform:scaleY(var(--p,0))}
.ti{display:grid;grid-template-columns:minmax(110px,200px) 1fr;gap:1.5rem;align-items:baseline;padding:2rem 0;border-bottom:1px solid var(--line)}
.ti time{font:300 clamp(46px,8vw,96px)/1 var(--serif);color:var(--gold)}
.ti b{font:400 22px var(--sans)}.ti p{margin:.3rem 0 0;color:var(--mute)}

/* rsvp */
.rsvp form{max-width:560px;margin-top:3rem}
.field{display:block;position:relative;margin-bottom:2rem}
.field input{width:100%;background:none;border:0;border-bottom:1px solid rgba(243,238,229,.3);color:inherit;font:300 22px var(--sans);padding:1.4rem 0 .6rem;outline:0;transition:border-color .4s}
.field input:focus{border-color:var(--gold)}
.field span{position:absolute;left:0;top:1.3rem;color:#98a094;pointer-events:none;transition:all .4s var(--ease);font-size:16px}
.field input:focus+span,.field input:not(:placeholder-shown)+span{top:0;font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:1.6rem}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{border:1px solid rgba(243,238,229,.25);border-radius:14px;padding:1.1rem .8rem;text-align:center;cursor:pointer;font-size:14px;transition:all .4s var(--ease)}
.seg input:checked+label{background:var(--gold);color:var(--forest);border-color:var(--gold)}
.seg label:hover{border-color:var(--gold)}
.stepper{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#98a094;max-height:90px;overflow:hidden;transition:all .6s var(--ease)}
.stepper.hide{max-height:0;opacity:0}
.stepper div{display:flex;align-items:center;gap:1.2rem}
.stepper button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(243,238,229,.3);background:none;color:#f3eee5;font-size:20px;cursor:pointer;transition:all .3s}
.stepper button:hover{background:var(--gold);color:var(--forest)}
.stepper output{font:300 32px var(--serif);color:#f3eee5;min-width:1.2em;text-align:center}
.status{min-height:1.5em;font-size:13px;color:var(--gold);margin:1rem 0 0}
.done{text-align:center;padding:3rem 0;animation:fadeUp 1.2s var(--ease)}
.done .tick{width:72px;height:72px;margin:0 auto 1.5rem;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);font-size:28px}
.done h3{font:300 40px var(--serif);margin:0 0 .6rem}.done p{color:#98a094}

.footer{background:var(--forest);color:#f3eee5;text-align:center;padding:60px 20px calc(110px + env(safe-area-inset-bottom));border-top:1px solid rgba(243,238,229,.1)}
.foot-mono{font-size:clamp(90px,24vw,260px);line-height:1}.footer p{margin:1rem 0 .4rem}.footer small{letter-spacing:.3em;opacity:.5}

/* music */
.music{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:60;display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:99px;border:1px solid rgba(255,255,255,.25);
  background:rgba(18,28,22,.45);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#f3eee5;font:400 11px var(--sans);letter-spacing:.12em;cursor:pointer;opacity:0;pointer-events:none;transition:opacity 1s 1.8s}
.opened .music{opacity:1;pointer-events:auto}
.eq{display:flex;gap:2px;align-items:flex-end;height:14px}.eq i{width:2px;background:var(--gold);height:100%;animation:eq 1s ease-in-out infinite;transform-origin:bottom}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}
.music.off .eq i{animation:none;transform:scaleY(.2)}
@keyframes eq{50%{transform:scaleY(.25)}}

@media(max-width:760px){.venue-card{grid-template-columns:1fr}.ti{grid-template-columns:1fr;gap:.2rem}.big{flex-direction:column;align-items:flex-start;gap:1rem}.music b{display:none}.music{padding:14px}}
@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}.r,.rise{opacity:1;transform:none}.ch{transform:none}.venue-photo{clip-path:none}.w{opacity:1}}

/* marquee */
.marquee{background:var(--forest);padding:clamp(28px,4vw,56px) 0;border-top:1px solid rgba(196,173,132,.18);display:grid;gap:clamp(14px,2vw,26px)}
.mq-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-track{display:flex;width:max-content;align-items:center;white-space:nowrap;animation:mq 70s linear infinite}
.rev .mq-track{animation-direction:reverse;animation-duration:90s}
.mq-row:hover .mq-track{animation-play-state:paused}
.mq-i{font:italic 300 clamp(44px,7vw,92px)/1.1 var(--serif);color:#f3eee5;letter-spacing:-.01em}
.mq-i.o{color:transparent;-webkit-text-stroke:1px var(--gold)}
.sep{flex:none;width:clamp(16px,2vw,26px);aspect-ratio:1;margin:0 clamp(22px,3vw,48px);background:var(--gold);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{50%{transform:rotate(90deg) scale(.7)}}
.small .mq-i{font:400 11px var(--sans);letter-spacing:.42em;text-transform:uppercase;color:#98a094}
.small .mq-i.o{color:#98a094;-webkit-text-stroke:0}
.small .sep{width:9px;margin:0 28px;opacity:.6}