/* ============ V4 · PLAYFUL & FUN (bold, kinetic, share-ready) ============ */
:root{
  --cream:#FFF7EC; --ink:#161616; --pink:#FF4D8D; --yellow:#FFC43D;
  --blue:#2D6CFF; --mint:#27D3A2;
  --disp:"Bricolage Grotesque", system-ui, sans-serif;
  --ui:"Space Grotesk", system-ui, sans-serif;
  --pad:clamp(1.1rem,4vw,5rem);
  --maxw:1180px;
}
body{background:var(--cream);color:var(--ink);font-family:var(--ui);font-size:clamp(1rem,1.05vw,1.12rem);overflow-x:hidden}
.h2{font-family:var(--disp);font-weight:800;font-size:clamp(2rem,5.5vw,3.6rem);line-height:1;letter-spacing:-.02em}
.center{text-align:center}
.edit{color:#b07f1f;font-style:italic;font-size:.82em}
.wink{font-family:var(--ui);font-weight:400;font-size:.5em;color:var(--pink)}
img,video{border-radius:18px}

/* buttons */
.btn{display:inline-block;font-family:var(--disp);font-weight:800;font-size:1rem;padding:.9rem 1.6rem;border-radius:999px;
  border:3px solid var(--ink);background:#fff;color:var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn--pop{background:var(--pink);color:#fff}
.btn--ghost{background:var(--yellow)}

/* NAV */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:.8rem var(--pad);transition:.3s}
.nav.scrolled{background:rgba(255,247,236,.92);backdrop-filter:blur(8px);border-bottom:3px solid var(--ink)}
.nav__brand{font-family:var(--disp);font-weight:800;font-size:1.3rem;background:var(--ink);color:var(--cream);width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:50%}
.nav__links{display:flex;gap:1.4rem;font-weight:500}
.nav__links a:hover{color:var(--pink)}
.nav__cta{font-family:var(--disp);font-weight:700;background:var(--yellow);border:3px solid var(--ink);border-radius:999px;padding:.4rem 1rem;box-shadow:3px 3px 0 var(--ink)}

/* MARQUEE */
.marquee{overflow:hidden;background:var(--ink);color:var(--yellow);padding:.55rem 0;white-space:nowrap;border-bottom:3px solid var(--ink)}
.marquee__track{display:inline-flex;animation:scroll 22s linear infinite;font-family:var(--disp);font-weight:700;letter-spacing:.04em}
.marquee__track span{padding-right:1rem}
@keyframes scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* HERO */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:center;
  max-width:var(--maxw);margin-inline:auto;padding:clamp(2.5rem,7vw,5rem) var(--pad) clamp(2rem,5vw,4rem)}
.badge{display:inline-block;font-family:var(--disp);font-weight:700;background:var(--mint);border:3px solid var(--ink);
  border-radius:999px;padding:.3rem .9rem;box-shadow:3px 3px 0 var(--ink);transform:rotate(-3deg);margin-bottom:1.2rem}
.hero__names{font-family:var(--disp);font-weight:800;font-size:clamp(3rem,11vw,6.5rem);line-height:.86;letter-spacing:-.03em;display:flex;flex-direction:column}
.hero__names .amp{color:var(--pink);font-size:.7em}
.hero__sub{font-size:1.05rem;margin:1.2rem 0 1.8rem;max-width:34ch;color:#333}
.hero__photo{position:relative;rotate:2.5deg}
.hero__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border:5px solid var(--ink);box-shadow:10px 10px 0 var(--pink)}
.sticker{position:absolute;font-family:var(--disp);font-weight:800;background:var(--yellow);border:3px solid var(--ink);
  border-radius:999px;padding:.3rem .8rem;box-shadow:3px 3px 0 var(--ink)}
.sticker--1{top:-14px;left:-14px;rotate:-12deg;background:var(--yellow)}
.sticker--2{bottom:18px;right:-14px;rotate:10deg;background:#fff;font-size:1.4rem;padding:.4rem .6rem}

/* COUNTDOWN */
.count{background:var(--blue);color:#fff;text-align:center;padding:clamp(2.2rem,6vw,3.5rem) var(--pad);border-block:4px solid var(--ink)}
.count__lead{font-family:var(--disp);font-weight:700;font-size:1.1rem;margin-bottom:1.2rem}
.count__grid{display:flex;justify-content:center;gap:clamp(.7rem,3vw,1.6rem);flex-wrap:wrap}
.count__grid li{background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:16px;
  box-shadow:5px 5px 0 var(--ink);min-width:78px;padding:.8rem .6rem;display:flex;flex-direction:column}
.count__grid b{font-family:var(--disp);font-weight:800;font-size:clamp(2rem,6vw,3rem);line-height:1}
.count__grid span{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);font-weight:700}

/* STORY */
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:center;
  max-width:var(--maxw);margin-inline:auto;padding:clamp(3rem,8vw,6rem) var(--pad)}
.story__img img{width:100%;aspect-ratio:1/1;object-fit:cover;border:5px solid var(--ink);box-shadow:10px 10px 0 var(--blue);rotate:-2deg}
.story__text p{margin-top:1rem;font-size:1.15rem}

/* PROPOSAL */
.proposal{max-width:var(--maxw);margin-inline:auto;padding:clamp(2rem,6vw,4rem) var(--pad);text-align:center}
.proposal__cap{margin:.4rem 0 1.6rem;color:#555}
.proposal__frame{display:inline-block;rotate:-1.5deg}
.proposal video{width:min(330px,72vw);aspect-ratio:9/16;object-fit:cover;background:#000;border:5px solid var(--ink);box-shadow:10px 10px 0 var(--pink)}

/* GALLERY */
.gallery-sec{max-width:var(--maxw);margin-inline:auto;padding:clamp(3rem,8vw,6rem) var(--pad)}
.gallery-sec .h2{margin-bottom:1.6rem}
.gallery-sec .slideshow{max-width:760px}
.gallery-sec .slides{border:5px solid var(--ink);border-radius:18px;box-shadow:8px 8px 0 var(--pink)}
.gallery-sec .dots{color:var(--ink)}

/* DETAILS */
.details{max-width:var(--maxw);margin-inline:auto;padding:clamp(3rem,8vw,6rem) var(--pad)}
.details .h2{margin-bottom:2rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem}
.info{background:#fff;border:3px solid var(--ink);border-radius:20px;box-shadow:6px 6px 0 var(--ink);padding:1.6rem;text-align:center}
.info:nth-child(1){box-shadow:6px 6px 0 var(--pink)}
.info:nth-child(2){box-shadow:6px 6px 0 var(--blue)}
.info:nth-child(3){box-shadow:6px 6px 0 var(--mint)}
.info__emoji{font-size:2rem}
.info h3{font-family:var(--disp);font-weight:800;font-size:1.4rem;margin:.4rem 0 .3rem;text-transform:lowercase}
.info__sm{font-size:.9rem;color:#666}
.details .edit{margin-top:1.2rem;display:block}

/* SCHEDULE */
.schedule{max-width:740px;margin-inline:auto;padding:clamp(3rem,8vw,6rem) var(--pad)}
.schedule .h2{margin-bottom:2rem}
.steps li{display:flex;gap:1rem;align-items:center;background:#fff;border:3px solid var(--ink);border-radius:18px;
  box-shadow:5px 5px 0 var(--ink);padding:1rem 1.2rem;margin-bottom:1rem}
.steps li:nth-child(odd){rotate:-1deg}.steps li:nth-child(even){rotate:1deg}
.steps__emoji{font-size:2rem}
.steps__t{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);font-weight:700}
.steps h3{font-family:var(--disp);font-weight:800;font-size:1.5rem;line-height:1}
.steps p{color:#555}

/* RSVP */
.rsvp{background:var(--yellow);border-block:4px solid var(--ink);padding:clamp(3rem,8vw,6rem) var(--pad)}
.rsvp__inner{max-width:620px;margin-inline:auto}
.rsvp__lead{margin:.4rem 0 2rem}
.form{display:flex;flex-direction:column;gap:1rem;background:#fff;border:4px solid var(--ink);border-radius:24px;
  box-shadow:8px 8px 0 var(--ink);padding:clamp(1.4rem,4vw,2.2rem)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field>span{font-family:var(--disp);font-weight:700;font-size:.85rem}
.field input,.field textarea{border:3px solid var(--ink);border-radius:12px;padding:.75rem .9rem;font-family:var(--ui)}
.field input:focus,.field textarea:focus{outline:none;box-shadow:3px 3px 0 var(--blue)}
.field--radio{border:0}
.choices{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:.3rem;font-weight:500}
.choices label{display:flex;gap:.5rem;align-items:center}
.choices input{accent-color:var(--pink);width:1.1rem;height:1.1rem}
.form .btn{margin-top:.4rem}
.form__status{font-weight:500;min-height:1.2em}
.form__status[data-state="ok"]{color:#1a8f5e}.form__status[data-state="err"]{color:#d63b3b}

/* FAQ */
.faq{max-width:720px;margin-inline:auto;padding:clamp(3rem,8vw,6rem) var(--pad)}
.faq .h2{margin-bottom:1.6rem}
.faq details{background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);padding:1rem 1.2rem;margin-bottom:.9rem}
.faq summary{font-family:var(--disp);font-weight:700;font-size:1.2rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--pink);font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:.6rem;color:#555}

/* FOOTER */
.footer{background:var(--ink);color:var(--cream);text-align:center;padding:clamp(3rem,8vw,6rem) var(--pad)}
.footer__line{font-family:var(--disp);font-weight:800;font-size:clamp(2.2rem,8vw,4.5rem);line-height:.95;color:var(--yellow)}
.footer__cd{margin:1.4rem 0;font-weight:500}
.footer__cd b{font-family:var(--disp);font-weight:800;font-size:1.6rem;color:var(--pink)}
.footer__sig{margin-top:2rem;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;opacity:.6}

/* CONFETTI */
.confetti{position:fixed;top:-8vh;z-index:200;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(112vh) rotate(540deg);opacity:.9}}

/* RESPONSIVE */
@media (max-width:768px){
  .nav__links{display:none}
  .hero,.story{grid-template-columns:1fr}
  .hero__photo{rotate:1.5deg;max-width:380px;margin-inline:auto}
  .row{grid-template-columns:1fr}
}