:root{
  --cream:#f6f0e6;--cream2:#efe5d4;--paper:#fbf7ef;--wine:#8c2f3f;--wine2:#7a2535;--wine-d:#2a0e16;
  --gold:#c9962b;--gold2:#e2c57a;--ink:#8a6d66;--ink2:#5d4540;--pink:#f4a3b5;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;--script:"Great Vibes","Brush Script MT",cursive;
  --col:480px;
}
*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(120% 90% at 50% 0,#4a1824 0,#2a0e16 55%,#190a0f 100%);color:var(--ink2);font:400 17px/1.6 var(--serif);overflow-x:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
input,textarea{-webkit-user-select:text;user-select:text}
/* media can never be long-pressed / saved from the page */
img,video,canvas{pointer-events:none;-webkit-user-drag:none}
canvas#sc{pointer-events:auto}
button,a,input,textarea,iframe,label{pointer-events:auto}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- shell: a phone-width column, centred on big screens ---------- */
#app{position:relative;width:100%;max-width:var(--col);margin:0 auto;background:var(--cream);box-shadow:0 0 0 1px #c9962b55,0 0 90px #000a;overflow:hidden}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:45;pointer-events:none;opacity:0;transition:opacity 1.2s}
body.live #fx{opacity:1}
section{position:relative;padding:72px 22px 64px;text-align:center}
.eye{margin:0;font:400 13px/1.7 var(--serif);letter-spacing:.32em;text-transform:uppercase;color:#b9a79d}
.eye.dark{color:#8f7870}
h2{font:400 clamp(34px,9.5vw,44px)/1.22 var(--script);color:var(--wine);margin:14px auto 0;max-width:400px}

/* desktop side panels */
.side{display:none}
@media (min-width:1000px){
  .side{position:fixed;top:0;bottom:0;z-index:5;width:calc(50vw - var(--col)/2);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;color:#e9d9bd;transition:opacity 1s;opacity:0}
  body.live .side{opacity:1}
  .side.l{left:0}.side.r{right:0;justify-content:flex-end;padding-bottom:36px}
  .side img{width:min(240px,70%);margin-bottom:10px;-webkit-mask-image:radial-gradient(closest-side,#000 64%,transparent 100%);mask-image:radial-gradient(closest-side,#000 64%,transparent 100%)}
  .side p{margin:0;font:400 44px/1.1 var(--script);color:var(--gold2)}
  .side small{margin-top:10px;font-size:14px;line-height:1.7;opacity:.75;max-width:230px}
  .side a{color:var(--gold2);text-decoration:none;font-size:15px;border:1px solid #c9962b99;padding:9px 20px;border-radius:30px;pointer-events:auto}
  .side a:hover{background:#c9962b22}
  #back{display:none!important}
}

/* ---------- intro ---------- */
#intro{position:fixed;inset:0;z-index:100;background:#1a0f0b;transition:opacity 1.1s}
#intro.hide{opacity:0;pointer-events:none}
#intro .bgblur{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;filter:blur(26px) brightness(.55);display:none}
#intro .stage{position:absolute;top:0;bottom:0;left:50%;width:100%;transform:translateX(-50%);overflow:hidden;background:#1a0f0b}
@media (min-width:700px){#intro .bgblur{display:block}#intro .stage{width:min(100%,calc(100vh*9/16));box-shadow:0 0 80px #000b}}
#intro .pos,#intro video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#intro video{opacity:0;transition:opacity .5s}#intro.play video{opacity:1}
#start{position:absolute;left:50%;bottom:calc(9% + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,#9a3447,#6f2030);color:#f6e6d4;border:2px solid #d8b25a;font:500 19px var(--serif);letter-spacing:.03em;padding:15px 34px;border-radius:50px;cursor:pointer;box-shadow:0 10px 30px #000a,inset 0 1px 0 #ffffff40;animation:pulse 2.4s ease-in-out infinite;white-space:nowrap}
#start i{font-style:normal;font-size:17px}
#intro.play #start{display:none}
@keyframes pulse{50%{transform:translateX(-50%) scale(1.06)}}
#skip{display:none;position:absolute;right:14px;top:calc(14px + env(safe-area-inset-top,0px));background:#0008;color:#fff;border:1px solid #fff6;border-radius:20px;padding:7px 18px;font:400 15px var(--serif);cursor:pointer;z-index:3}
#intro.play #skip{display:block}
#burst{position:absolute;left:50%;bottom:11%;width:0;height:0;z-index:2}
#burst i{position:absolute;font-style:normal;color:#ff9fb4;text-shadow:0 2px 8px #0006;animation:bh 1.5s cubic-bezier(.15,.7,.3,1) forwards;opacity:0}
@keyframes bh{0%{transform:translate(0,0) scale(.3) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1.4) rotate(var(--r));opacity:0}}

/* ---------- hero ---------- */
#hero{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:70px 22px 56px;background:radial-gradient(90% 60% at 50% 30%,#fbf6ec,var(--cream))}
#hero .in{position:relative;z-index:2;width:100%}
.sprig{position:absolute;top:0;height:min(44vh,400px);width:auto;opacity:.95}
.sprig.l{left:-8px}.sprig.r{right:-8px;transform:scaleX(-1)}
#hero .eye{max-width:280px;margin:0 auto 14px;font-size:14px;color:#9a8077}
#hero h1{font:400 clamp(70px,22vw,92px)/1.02 var(--script);color:var(--wine);margin:0}
.par{margin:0;font-size:15px;color:#8d7068}
.amp{font:400 54px/1 var(--script);color:var(--gold);margin:12px 0 4px}
#hero hr{width:130px;height:1px;border:0;background:linear-gradient(90deg,transparent,#c9962b88,transparent);margin:24px auto 18px}
.date{margin:0;font-size:19px;line-height:1.5;color:#6d544e}.date b{font-weight:500;color:var(--gold)}
.cd{display:flex;justify-content:center;gap:10px;margin-top:30px}
.cd div{width:72px;padding:12px 0 9px;border-radius:14px;background:linear-gradient(180deg,#fffaf2,#efe4d2);border:1px solid #d9c7a8;box-shadow:0 8px 18px #7a4b3a1f,inset 0 1px 0 #fff}
.cd b{display:block;font:600 27px/1.1 var(--serif);color:var(--ink2);font-variant-numeric:tabular-nums}
.cd span{display:block;margin-top:3px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#a99389}
.down{margin:34px 0 0;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);animation:bob 2.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(7px)}}

/* ---------- save the date ---------- */
#std{min-height:100svh;display:flex;align-items:center;justify-content:center;background:#2a1a1a center/cover url(assets/dance-night.webp);padding:80px 22px}
#std:before{content:"";position:absolute;inset:0;background:linear-gradient(#2a0e1670,#2a0e1630 45%,#2a0e1680)}
#std .wrap{position:relative;width:100%}
#std .eye{color:#f1e3d3;opacity:.85;text-shadow:0 1px 8px #0008}
#std h2{color:#fff;font-size:clamp(64px,20vw,86px);line-height:1.02;margin:6px auto 40px;text-shadow:0 3px 20px #000a;max-width:360px}
.card{position:relative;width:min(100%,380px);height:196px;margin:0 auto 22px;border-radius:24px;overflow:hidden;border:1.5px solid #e5cd96;background:linear-gradient(180deg,#fbf6ec,#efe2cc);color:var(--ink2);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 20px 44px #000a}
.card .k{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:#a58e84}
.card .d{font:400 50px/1.15 var(--script);color:var(--wine);margin:6px 0 2px}
.card .y{letter-spacing:.5em;color:var(--gold);font-weight:600;padding-left:.5em}
.card canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;transition:opacity .9s;cursor:grab}

/* ---------- gallery: 3D coverflow ---------- */
#gal{background:var(--cream);padding-bottom:56px;overflow:hidden}
.cov{position:relative;height:min(112vw,520px);margin:12px -22px 6px;perspective:1100px;perspective-origin:50% 45%;outline:none;touch-action:pan-y}
.cf{position:absolute;left:50%;top:50%;width:62%;max-width:300px;aspect-ratio:3/4;border-radius:24px;background:#d8c9b6 center/cover no-repeat;box-shadow:0 26px 44px #5a3a3a40,0 0 0 4px #fff;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .6s;will-change:transform;backface-visibility:hidden}
.g1{background-image:url(assets/gallery/lake.webp)}.g2{background-image:url(assets/gallery/palace.webp)}.g3{background-image:url(assets/gallery/steps.webp)}.g4{background-image:url(assets/gallery/forest.webp)}.g5{background-image:url(assets/gallery/sunset.webp)}
.g1{background-position:68% 50%}.g2{background-position:52% 50%}.g3{background-position:30% 50%}.g4{background-position:58% 50%}

/* ---------- functions ---------- */
#fn{background:linear-gradient(var(--cream),#f4ebdf)}
.fns{display:flex;flex-direction:column;gap:26px;margin-top:34px}
.fnc{position:relative;aspect-ratio:9/15.4;border-radius:28px;overflow:hidden;background:#2a1a1a;color:#fff;text-align:center;box-shadow:0 22px 40px #6a40302e;border:1px solid #e3cfa6;transform:translateZ(0)}
.fnc video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fnc .shade{position:absolute;inset:0;background:linear-gradient(#1c0a10c4,#1c0a1055 42%,#0000 66%,#1c0a1055)}
.fnc .tx{position:absolute;left:0;right:0;top:0;padding:46px 20px 0;text-shadow:0 2px 12px #000a}
.fnc h3{margin:0 0 6px;font:400 58px/1.05 var(--script);color:#fff}
.fnc p{margin:3px 0;font-size:19px}.fnc .dt{font-size:21px}
.fnc .tg{margin-top:12px;font-size:16px;opacity:.88}.fnc .vn{font-size:16px;opacity:.9}
.pp{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:54px;height:54px;border-radius:50%;border:1px solid #ffffff80;background:#ffffff2e;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;opacity:.9;transition:opacity .4s,transform .2s}
.pp:before{content:"";position:absolute;left:21px;top:16px;border-left:15px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.fnc.playing .pp{opacity:0}.fnc.playing:hover .pp{opacity:.9}
.fnc.playing .pp:before{left:18px;top:17px;width:6px;height:20px;border:0;background:#fff;box-shadow:12px 0 #fff}

/* ---------- venue ---------- */
#ven{background:linear-gradient(#f4ebdf,#efe5d6)}
.map{width:100%;height:340px;margin:30px auto 0;border-radius:26px;overflow:hidden;border:1.5px solid #e3cfa6;background:#e6d8c8;box-shadow:0 18px 36px #6a40302e}
.map iframe{width:100%;height:100%;border:0;display:block}
.dir{display:inline-flex;align-items:center;gap:10px;margin-top:26px;background:linear-gradient(180deg,#9a3447,#7a2535);color:#f6e6d4;text-decoration:none;font:500 14px var(--serif);letter-spacing:.2em;text-transform:uppercase;padding:15px 34px;border-radius:50px;box-shadow:0 10px 22px #7a253555}

/* ---------- rsvp ---------- */
#rsvp{background:linear-gradient(#efe5d6,#f6dfd0)}
.lead{max-width:330px;margin:16px auto 0;font-size:16.5px;color:#7d655e}
.form{width:100%;margin:30px auto 0;border:2px solid #d9b45a;border-radius:20px;background:linear-gradient(#fbf7ef,#f3eadb);overflow:hidden;box-shadow:0 18px 36px #6a403026,0 0 0 5px #fbf3e2}
.form .hd{background:#ecdcb2;padding:11px;font-size:13.5px;letter-spacing:.22em;text-transform:uppercase;color:#6d4a3f}.form .hd i{font-style:normal;color:var(--wine);margin:0 6px}
.form form{padding:6px 20px 22px}
label{display:block;margin-top:16px;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:#8d7a72}
input,textarea{width:100%;margin-top:7px;padding:13px 14px;border:1px solid #dccdb8;border-radius:12px;background:#f7f0e4;color:var(--ink2);font:400 16px var(--serif)}
input::placeholder,textarea::placeholder{color:#b8a79c}
textarea{resize:vertical;min-height:84px}
.tog{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:7px}
.tog button{padding:13px 6px;border-radius:12px;border:1px solid #dccdb8;background:#f7f0e4;color:var(--ink2);font-size:15.5px;cursor:pointer;transition:background .2s,color .2s}
.tog button.on{background:var(--wine);color:#fbeee0;border-color:var(--wine);font-weight:500}
.send{width:100%;margin-top:22px;padding:15px;border:0;border-radius:12px;background:linear-gradient(180deg,#9a3447,#7a2535);color:#fbeee0;letter-spacing:.26em;text-transform:uppercase;font-size:13px;font-weight:500;cursor:pointer;box-shadow:0 8px 18px #7a253544}
.thanks{display:none;padding:52px 20px;font:400 44px/1.2 var(--script);color:var(--wine)}
.note{max-width:340px;margin:22px auto 0;font-size:14px;opacity:.8;font-style:italic}
footer{padding:46px 22px 100px;text-align:center;background:linear-gradient(#f6dfd0,#efd3c3)}
footer .fl{margin:0 0 12px;font:400 36px var(--script);color:var(--wine)}
.rights{max-width:380px;margin:0 auto;font-size:12.5px;line-height:1.7;color:#8d7068}

/* ---------- floaters ---------- */
#mus{position:fixed;right:max(16px,calc(50vw - var(--col)/2 + 16px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;width:50px;height:50px;border-radius:50%;background:linear-gradient(180deg,#9a3447,#7a2535);border:1.5px solid #d8b25a;color:#fbeee0;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 8px 20px #0007}
#back{position:fixed;left:max(14px,calc(50vw - var(--col)/2 + 14px));top:calc(12px + env(safe-area-inset-top,0px));z-index:60;background:#fbf4e6dd;color:var(--wine);border:1px solid #c9962b99;padding:7px 16px;border-radius:30px;font-size:14px;text-decoration:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .6s}
body.live #back{opacity:1;pointer-events:auto}
@media print{body{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}
@media (max-height:640px){#hero{padding-top:56px}}