:root{
  --sand:#d8cbb3; --paper:#f6f1e7; --card:#fbf8f2;
  --ink:#5b4a40; --soft:#6f6157; --rose:#b65f66; --rose-soft:#e9c9c4;
  --olive:#6f6a5c; --line:#cdbfa8;
  --script:"Dancing Script",cursive;
  --fs-2xs:11px; --fs-xs:12px; --fs-sm:14px; --fs-md:16px; --fs-lg:20px; --fs-xl:28px;
  --fs-sc-sm:22px; --fs-sc-md:30px; --fs-sc-lg:38px;
  --ease:cubic-bezier(.22,.8,.24,1);
  --body:"Be Vietnam Pro",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#5e1c22;color:var(--ink);font-family:var(--body);font-weight:300;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.phone{max-width:460px;margin:0 auto;background:var(--paper);min-height:100vh;position:relative;overflow:hidden;box-shadow:0 0 60px rgba(0,0,0,.35)}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ---------- COMMON ---------- */
section{padding:64px 28px;text-align:center;position:relative}
.h-hand{text-transform:uppercase;color:var(--ink);font-size:var(--fs-lg);font-family:var(--body);font-weight:500;letter-spacing:.22em}
.cap{letter-spacing:.18em;text-transform:uppercase;color:var(--soft);line-height:1.9;font-size:var(--fs-xs)}
.script{font-family:var(--script);color:var(--rose);font-weight:500}
.rule{width:60px;height:1px;background:var(--line);margin:22px auto}
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.doodle{stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.btn{display:inline-block;background:var(--olive);color:#fff;text-decoration:none;font-family:var(--body);font-weight:500;letter-spacing:.18em;text-transform:uppercase;padding:11px 26px;border-radius:6px;border:0;cursor:pointer;font-size:var(--fs-xs)}
.btn.rose{background:#7a2a31}
.btn.ghost{background:transparent;color:var(--olive);border:1px solid var(--olive)}

/* hero */
.hero{background:var(--sand);padding:0}
.hero .top{height:90px;background:var(--sand)}
.hero .body{background:var(--paper);padding:48px 28px 56px;border-radius:0}
.hero .ring{position:absolute;right:26px;top:96px;width:70px;transform:rotate(-12deg)}
.hero .names{text-transform:uppercase;line-height:1.9;margin-top:22px;font-size:var(--fs-md);font-family:var(--body);font-weight:500;letter-spacing:.16em}
.hero .names .amp{font-family:var(--script);color:var(--rose);text-transform:none;letter-spacing:0;display:block;line-height:1.2;font-size:var(--fs-sc-md)}
.hero .sub{font-family:var(--body);letter-spacing:.2em;color:var(--soft);display:block;font-size:var(--fs-2xs)}
.hero .cats{width:100%;margin:26px auto 8px}
.hero .dates{font-family:var(--script);color:var(--rose);font-size:var(--fs-sc-md)}

/* invite */
.invite p{line-height:1.9;font-size:var(--fs-sm)}
.guest{font-family:var(--script);color:var(--rose);margin:10px 0 6px;min-height:1.2em;border-bottom:1px dashed var(--line);padding-bottom:6px;font-size:var(--fs-sc-md)}

/* families */
.fam{display:grid;grid-template-columns:1fr 1fr;gap:18px;text-align:center}
.fam h3{text-transform:uppercase;font-size:var(--fs-sm);font-family:var(--body);font-weight:500;letter-spacing:.18em}
.fam p{line-height:1.8;margin-top:6px;font-size:var(--fs-sm)}
.fam .addr{color:var(--soft);margin-top:8px;font-size:var(--fs-xs)}
.couple{margin-top:36px}
.couple .n{font-family:var(--script);color:var(--rose);line-height:1.15;font-size:var(--fs-sc-lg)}
.couple .r{color:var(--soft);letter-spacing:.1em;font-size:var(--fs-xs)}
.couple .hrt{width:26px;margin:12px auto}

/* events */
.day{margin-top:34px}
.day-title{display:inline-block;text-transform:uppercase;background:var(--card);border:1px solid var(--line);padding:6px 16px;border-radius:30px;font-size:var(--fs-xs);font-family:var(--body);font-weight:500;letter-spacing:.16em}
.ev{margin-top:26px}
.ev svg{width:64px;height:64px;margin:0 auto 6px}
.ev .t{font-size:var(--fs-xl);font-family:var(--body);font-weight:300;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.ev .w{letter-spacing:.18em;text-transform:uppercase;line-height:1.8;font-size:var(--fs-xs)}
.ev .l{color:var(--soft);margin-top:2px;font-size:var(--fs-xs)}

/* calendar + countdown */
.cal{max-width:300px;margin:22px auto 0;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 14px}
.cal .m{font-size:var(--fs-md);font-family:var(--body);font-weight:500;letter-spacing:.16em}
.cal .g{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:10px;font-size:var(--fs-xs)}
.cal .g b{font-weight:500;color:var(--soft);font-size:var(--fs-2xs)}
.cal .g span{height:30px;display:grid;place-items:center;position:relative}
.cal .g span.hit{color:#fff;font-weight:500}
.cal .g span.hit::before{content:"";position:absolute;width:30px;height:28px;z-index:-1;background:var(--rose);clip-path:path("M15 27 C5 19 0 14 0 8 C0 3.5 3.5 0 8 0 C11 0 13.5 1.6 15 4 C16.5 1.6 19 0 22 0 C26.5 0 30 3.5 30 8 C30 14 25 19 15 27Z")}
.cal .g span.hit{isolation:isolate}
.cd{display:flex;justify-content:center;gap:8px;margin-top:22px}
.cd div{flex:1;max-width:62px;min-width:0;padding:10px 0;background:var(--card);border:1px solid var(--line);border-radius:10px}
.cd b{display:block;font-size:var(--fs-xl);font-family:var(--body);font-weight:300;font-variant-numeric:tabular-nums}
.cd span{letter-spacing:.16em;text-transform:uppercase;color:var(--soft);font-size:var(--fs-2xs)}
.cd-label{margin-top:16px}

/* insta */
.insta{background:#fff;border:1px solid #d9d0c1;border-radius:6px;text-align:left;max-width:360px;margin:26px auto 0;box-shadow:0 6px 20px rgba(80,60,40,.08)}
.insta .hd{display:flex;align-items:center;gap:10px;padding:10px 12px;font-weight:500;font-size:var(--fs-xs)}
.insta .av{width:30px;height:30px;border-radius:50%;background:var(--sand) url(/assets/cats-wedding.webp) 30% 25%/260% no-repeat;border:1px solid var(--line)}
.insta .hd .dots{margin-left:auto;letter-spacing:2px;color:var(--soft)}
.insta .ic{display:flex;gap:14px;padding:10px 12px 4px}
.insta .ic svg{width:22px;height:22px}
.likebtn{background:none;border:0;padding:6px;margin:-6px;cursor:pointer;line-height:0}
.likebtn.on path{fill:var(--rose);stroke:var(--rose)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.insta .cp{padding:2px 12px 14px;line-height:1.7;font-weight:400;font-size:var(--fs-xs)}
.insta .cp b{font-weight:500}
.insta .cp .tag{color:#3b5f8a}

/* venues */
.venue{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px 18px 22px;margin-top:28px}
.venue h3{font-size:var(--fs-lg);font-family:var(--body);font-weight:500;letter-spacing:.2em}
.venue .house{width:84px;margin:4px auto 6px}
.venue .a{line-height:1.7;margin-top:6px;font-size:var(--fs-sm)}
.venue .when{letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-top:10px;line-height:1.9;font-size:var(--fs-xs)}
.map{margin:16px 0 14px;border-radius:10px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:#e9e3d6}
.map iframe{width:100%;height:100%;border:0;display:block;filter:sepia(.25) saturate(.85)}
.venue .acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* photos */
.polaroid{position:relative;width:78%;margin:8px auto 0;padding:10px 10px 44px;background:#fff;box-shadow:0 10px 26px rgba(70,50,30,.18);transform:rotate(var(--r,-3deg))}
.polaroid img{width:100%;height:auto}
.polaroid figcaption{position:absolute;left:0;right:0;text-align:center;bottom:8px;font-family:var(--script);color:var(--rose);font-size:var(--fs-sc-sm)}
.polaroid::before{content:"";position:absolute;top:-12px;left:50%;width:90px;height:24px;margin-left:-45px;background:rgba(216,203,179,.75);transform:rotate(2deg)}
.polaroid.right{margin-right:6%;--r:3deg}
.polaroid.left{margin-left:6%;--r:-3deg}
.bleed{position:relative;padding:0;margin:20px 0}
.bleed img{width:100%;height:auto}
.bleed .over{position:absolute;left:0;right:0;top:9%;text-align:center;font-family:var(--script);color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35);font-size:var(--fs-sc-md)}
.bleed .over small{display:block;text-transform:uppercase;font-size:var(--fs-xs);font-family:var(--body);font-weight:500;letter-spacing:.24em}
.insta .slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.insta .slides::-webkit-scrollbar{display:none}
.insta .slides img{flex:0 0 100%;width:100%;height:auto;aspect-ratio:1100/744;object-fit:cover;scroll-snap-align:center}
.insta .media{position:relative}
.insta .dotsrow{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:5px;justify-content:center;pointer-events:none}
.insta .dotsrow i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 3px rgba(0,0,0,.35)}
.insta .dotsrow i.on{background:#fff}

/* rsvp */
.rsvp form{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px 18px;margin-top:24px;text-align:left}
.fld{margin-top:18px;border:0;padding:0;min-width:0}
#rsvpForm>.fld:first-child{margin-top:0}
.fld>label,.fld>legend,.fld>.lbl{display:block;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);font-weight:500;margin-bottom:8px;font-size:var(--fs-xs)}
.fld input[type=text],.fld textarea{width:100%;font:inherit;font-weight:400;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:var(--fs-md)}
.fld textarea{min-height:96px;resize:vertical}
.fld input:focus,.fld textarea:focus,.pill input:focus-visible+span,.step button:focus-visible{outline:2px solid var(--rose);outline-offset:1px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{position:relative}
.pill input{position:absolute;opacity:0;width:1px;height:1px}
.pill span{display:inline-block;padding:8px 13px;border:1px solid var(--line);border-radius:30px;background:#fff;cursor:pointer;transition:background .2s,color .2s;font-size:var(--fs-sm)}
.pill input:checked+span{background:var(--olive);border-color:var(--olive);color:#fff}
.step{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:30px;background:#fff;overflow:hidden}
.step button{width:40px;height:38px;border:0;background:none;color:var(--ink);cursor:pointer;font-size:var(--fs-lg)}
.step output{min-width:42px;text-align:center;font-size:var(--fs-lg);font-family:var(--body);font-weight:400;font-variant-numeric:tabular-nums}
.hint{color:var(--soft);margin-top:6px;font-size:var(--fs-xs)}
.fld>label.chk{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;text-transform:none;letter-spacing:0;font-weight:300;font-size:var(--fs-sm)}
.chk input{margin-top:3px;accent-color:var(--olive)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rsvp .send{width:100%;margin-top:22px;padding:14px;font-size:var(--fs-sm)}
.rsvp .send[disabled]{opacity:.6;cursor:wait}
.status{margin-top:12px;text-align:center;min-height:1.2em;font-size:var(--fs-sm)}
.status.ok{color:#4f6b3a}.status.err{color:#9b2c33}
[hidden]{display:none!important}
.wishes{margin-top:34px}
.wishes h3{text-transform:uppercase;font-size:var(--fs-lg);font-family:var(--body);font-weight:500;letter-spacing:.2em}
.wlist{margin-top:14px;max-height:420px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:2px}
.wish{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-align:left;line-height:1.7;white-space:pre-line;word-break:break-word;font-size:var(--fs-sm)}
.wish b{display:block;font-family:var(--script);color:var(--rose);font-weight:500;font-size:var(--fs-sc-sm)}
.wish small{display:block;color:var(--soft);margin-top:4px;font-size:var(--fs-2xs)}
.wempty{color:var(--soft);margin-top:12px;font-size:var(--fs-sm)}

/* closing */
.closing{padding-bottom:40px}
.closing .cats{width:250px;height:auto;margin:0 auto;mix-blend-mode:multiply}
.closing p{line-height:1.9;font-size:var(--fs-sm)}
.closing .thanks{font-family:var(--script);color:var(--rose);margin-top:16px;font-size:var(--fs-sc-lg)}
.paw{position:absolute;width:22px;opacity:.18;fill:var(--ink)}
footer{background:var(--sand);text-align:center;padding:26px 20px 96px;color:var(--ink);font-size:var(--fs-xs);font-family:var(--body);font-weight:500;letter-spacing:.2em}
footer .s{font-family:var(--script);letter-spacing:0;color:var(--ink);display:block;font-size:var(--fs-sc-md)}

/* sticky bar */
.bar{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translate(-50%,140%);width:min(430px,calc(100% - 24px));background:var(--olive);color:#fff;border-radius:40px;display:flex;align-items:center;justify-content:space-between;padding:7px 7px 7px 18px;z-index:20;transition:transform .6s ease;letter-spacing:.16em;text-transform:uppercase;box-shadow:0 8px 24px rgba(0,0,0,.25);font-size:var(--fs-2xs)}
.bar.show{transform:translate(-50%,0)}
.bar a{background:var(--paper);color:var(--olive);text-decoration:none;border-radius:30px;padding:8px 14px;font-weight:500}

/* ---------- motion & interaction ---------- */
body{animation:pageIn .6s var(--ease) backwards}
body.leaving{opacity:0;transition:opacity .22s ease}
@keyframes pageIn{from{opacity:0}}
.btn,.side-btn,.pill span,.step button,.likebtn,.music,.bar a,.homelink,.other{-webkit-tap-highlight-color:transparent;transition:transform .18s var(--ease),box-shadow .2s ease,background .2s ease,color .2s ease}
.btn:active,.side-btn:active,.pill:active span,.step button:active,.bar a:active,.music:active{transform:scale(.95)}
.rp{position:relative;overflow:hidden;isolation:isolate}
.ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.22;transform:scale(0);animation:ripple .6s var(--ease) forwards;z-index:-1}
@keyframes ripple{to{transform:scale(1);opacity:0}}
.bump{animation:bump .35s var(--ease)}
@keyframes bump{40%{transform:scale(1.25)}}
.flip{animation:flip .45s var(--ease)}
@keyframes flip{from{transform:translateY(-35%);opacity:.2}to{transform:none;opacity:1}}
.likebtn.pop svg{animation:pop .45s var(--ease)}
@keyframes pop{30%{transform:scale(1.35)}60%{transform:scale(.9)}}
.slides{cursor:grab;user-select:none;-webkit-user-select:none}
.slides.dragging{cursor:grabbing;scroll-snap-type:none!important;scroll-behavior:auto}
.slides img{-webkit-user-drag:none;pointer-events:none}
.bigheart{position:absolute;left:50%;top:50%;width:84px;margin:-42px 0 0 -42px;fill:#fff;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));pointer-events:none;animation:bigheart .9s var(--ease) forwards}
@keyframes bigheart{0%{transform:scale(0);opacity:0}25%{transform:scale(1.15);opacity:1}45%{transform:scale(.95)}75%{transform:scale(1);opacity:1}100%{transform:scale(1.1) translateY(-20px);opacity:0}}
.dragwrap{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;will-change:transform}
.dragwrap.dragging{cursor:grabbing}
.dragwrap img{-webkit-user-drag:none}
.dragwrap.spring{transition:transform .7s cubic-bezier(.2,1.6,.4,1)}
/* music button */
.music{position:fixed;z-index:30;top:calc(12px + env(safe-area-inset-top));right:max(12px,calc(50% - 230px + 12px));width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(60,40,20,.2)}
.music:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.music svg{width:24px;height:24px}
.music .disc{transition:transform .3s}
.music.on .disc{animation:spin 4s linear infinite}
.music .eq{position:absolute;right:-2px;bottom:-2px;display:flex;gap:2px;align-items:flex-end;height:14px;padding:2px 3px;border-radius:8px;background:var(--rose);opacity:0;transition:opacity .3s}
.music .eq i{width:2px;height:4px;background:#fff;border-radius:1px}
.music.on .eq{opacity:1}
.music.on .eq i{animation:eq .9s ease-in-out infinite}
.music.on .eq i:nth-child(2){animation-delay:.2s}.music.on .eq i:nth-child(3){animation-delay:.4s}
.music.hint::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--rose);animation:ring 1.8s ease-out infinite}
.music-tip{position:fixed;z-index:30;top:calc(22px + env(safe-area-inset-top));right:max(66px,calc(50% - 230px + 66px));background:var(--ink);color:#fff;font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:20px;pointer-events:none;transition:opacity .4s}
.music-tip.off{opacity:0}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes eq{0%,100%{height:3px}50%{height:10px}}
@keyframes ring{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.35);opacity:0}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01s!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- sub-page extras ---------- */
.hero .top{display:flex;align-items:flex-end;justify-content:space-between;padding:0 70px 14px 18px}
.homelink{text-transform:uppercase;text-decoration:none;color:var(--ink);padding:6px 4px;font-size:var(--fs-xs);font-family:var(--body);font-weight:500;letter-spacing:.16em}
.side-tag{text-transform:uppercase;color:var(--ink);background:var(--card);border-radius:30px;padding:4px 12px;font-size:var(--fs-xs);font-family:var(--body);font-weight:500;letter-spacing:.16em}
.other{display:inline-block;margin-top:14px;font-family:var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-size:var(--fs-xs)}

/* ---------- HOME ---------- */
.home{position:relative;max-width:460px;min-height:100vh;min-height:100svh;margin:0 auto;background:var(--sand);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px 22px calc(36px + env(safe-area-inset-bottom));overflow:hidden;box-shadow:0 0 60px rgba(0,0,0,.35)}
.home .kicker{text-transform:uppercase;color:var(--ink);font-size:var(--fs-xs);font-family:var(--body);font-weight:500;letter-spacing:.3em}
.home .couple-n{font-family:var(--script);line-height:1.1;color:var(--rose);margin-top:6px;font-size:var(--fs-sc-lg)}
.home .to{color:var(--ink);margin-top:10px;min-height:1.4em;font-size:var(--fs-md);font-family:var(--body);font-weight:400;letter-spacing:.02em}
.home .stagecats{width:min(80vw,330px);margin:8px auto 0;animation:catIn 1.1s cubic-bezier(.2,.9,.3,1.15) both, bob 2.6s ease-in-out 1.1s infinite}
.home .choose{width:100%;margin-top:10px;opacity:0;animation:fadeUp .8s ease 1.3s forwards}
.home .choose .cap{color:var(--ink);margin-bottom:12px}
.sides{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.side-btn{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 10px 14px;text-decoration:none;color:var(--ink);box-shadow:0 6px 18px rgba(80,60,40,.12);transition:transform .2s ease, box-shadow .2s ease}
.side-btn:hover,.side-btn:focus-visible{transform:translateY(-3px);box-shadow:0 10px 24px rgba(80,60,40,.18)}
.side-btn:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.side-btn svg{width:58px;height:40px}
.side-btn .nm{text-transform:uppercase;font-size:var(--fs-md);font-family:var(--body);font-weight:500;letter-spacing:.16em}
.side-btn .evn{letter-spacing:.12em;text-transform:uppercase;line-height:1.6;font-size:var(--fs-2xs)}
.side-btn .dt{font-family:var(--script);color:var(--rose);line-height:1.1;font-size:var(--fs-sc-sm)}
.side-btn .pl{color:var(--soft);font-size:var(--fs-2xs)}
.home .foot{margin-top:22px;letter-spacing:.14em;color:var(--ink);opacity:0;animation:fadeUp .8s ease 1.6s forwards;font-size:var(--fs-xs)}
.heart{position:absolute;bottom:-30px;width:16px;opacity:0;fill:var(--rose);animation:rise 9s linear infinite}
@keyframes catIn{0%{opacity:0;transform:translateY(30px) scale(.85)}100%{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes rise{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:.5}90%{opacity:.35}100%{transform:translateY(-105vh) rotate(25deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.home .choose,.home .foot{opacity:1}.heart{display:none}}
.slides{touch-action:manipulation}
.step output{display:inline-block}