:root{
  --ink:#15122b; --ink2:#221e45; --cream:#fff6e6; --paper:#fffdf8;
  --p:#3d5afe;      /* Phili */
  --l:#ff4d6d;      /* Leonie */
  --lime:#c8f542; --sun:#ffd23f;
  --yes:#19b86b; --no:#e5484d; --maybe:#f5a524;
  --r:22px;
  --font:'Bricolage Grotesque',system-ui,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:70px;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--cream);color:var(--ink);line-height:1.5;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
button,input,textarea{font:inherit;color:inherit}
a{color:inherit}
.small{font-size:.85rem;opacity:.7}
.tbd{background:var(--sun);padding:.05em .45em;border-radius:6px;font-size:.9em;font-weight:600;white-space:nowrap}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:100}

/* top bar */
.bar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;
  padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;background:rgba(21,18,43,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff}
.bar__logo{font-weight:800;text-decoration:none;letter-spacing:-.02em;font-size:1.15rem}
.bar__logo span{color:var(--lime);margin:0 .08em}
.pill{display:inline-flex;align-items:center;gap:.5em;border:0;border-radius:99px;padding:.5em .95em;font-weight:600;font-size:.9rem;cursor:pointer;background:#fff;color:var(--ink);max-width:68vw;transition:transform .15s}
.pill:active{transform:scale(.96)}
.pill span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill__dot{width:.7em;height:.7em;border-radius:50%;background:#9aa;flex:none}
.pill--yes .pill__dot{background:var(--yes);box-shadow:0 0 0 4px #19b86b33}
.pill--no .pill__dot{background:var(--no);box-shadow:0 0 0 4px #e5484d33}
.pill--maybe .pill__dot{background:var(--maybe);box-shadow:0 0 0 4px #f5a52433}
.pill--none .pill__dot{background:var(--lime);animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px #c8f54244}}

/* hero */
.hero{position:relative;min-height:100svh;background:var(--ink);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:90px 20px 40px;overflow:hidden;
  background-image:radial-gradient(#ffffff14 1px,transparent 1.5px);background-size:26px 26px}
.hero__glow{position:absolute;width:70vmax;height:70vmax;border-radius:50%;filter:blur(90px);opacity:.45;pointer-events:none}
.hero__glow--a{background:var(--p);left:-40vmax;top:-20vmax}
.hero__glow--b{background:var(--l);right:-40vmax;bottom:-25vmax}
.hero>*:not(.hero__glow){position:relative}
.eyebrow{display:inline-block;background:var(--lime);color:var(--ink);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;padding:.45em 1em;border-radius:99px;transform:rotate(-2deg);animation:pop .7s .1s both cubic-bezier(.2,1.6,.4,1)}
.names{display:flex;flex-direction:column;align-items:center;line-height:.88;margin:.5em 0 .3em;font-weight:800;letter-spacing:-.045em;font-size:clamp(4.4rem,22vw,10.5rem)}
.name{display:block;animation:slam .8s both cubic-bezier(.2,1.4,.3,1)}
.name--p{color:#fff;text-shadow:.04em .04em 0 var(--p);animation-delay:.2s}
.name--l{color:#fff;text-shadow:.04em .04em 0 var(--l);animation-delay:.45s}
@keyframes slam{from{opacity:0;transform:translateY(-60px) scale(1.25)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.3) rotate(-2deg)}}
.vs{position:relative;display:grid;place-items:center;height:.5em;font-family:var(--serif);font-style:italic;font-weight:400;font-size:.55em;letter-spacing:0;margin:.12em 0}
.vs>*{grid-area:1/1}
.vs__old{color:#ffffff66;text-decoration:line-through;text-decoration-color:var(--l);text-decoration-thickness:.07em;animation:vsOut .6s 1.5s forwards}
.vs__new{color:var(--lime);opacity:0;transform:scale(0) rotate(-40deg);animation:vsIn .8s 1.9s forwards cubic-bezier(.2,1.8,.4,1)}
@keyframes vsOut{to{opacity:0;transform:scale(.4) translateY(-10px)}}
@keyframes vsIn{to{opacity:1;transform:none}}
.tagline{font-size:clamp(1.05rem,4.2vw,1.4rem);max-width:28ch;opacity:.92;animation:fade 1s 1s both}
.tagline em{font-family:var(--serif);font-size:1.15em;color:var(--sun)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}}

.date-card{display:flex;align-items:stretch;margin:1.6em 0 1.2em;border-radius:18px;overflow:hidden;background:#fff;color:var(--ink);text-align:left;box-shadow:0 10px 0 #00000040;animation:fade 1s 1.2s both}
.date-card__main{display:flex;align-items:center;gap:.5em;padding:.6em 1em;background:var(--sun)}
.date-card__main b{font-size:3rem;line-height:1;letter-spacing:-.04em}
.date-card__main span{font-weight:700;line-height:1.1;font-size:.95rem;text-transform:uppercase}
.date-card__where{padding:.6em 1.1em;font-weight:800;display:flex;flex-direction:column;justify-content:center;line-height:1.2}
.date-card__where small{font-weight:500;opacity:.7;font-size:.8rem}

.score{display:flex;gap:8px;animation:fade 1s 1.4s both}
.score div{background:#000;border:2px solid #ffffff22;border-radius:12px;min-width:68px;padding:.45em .3em .35em;display:flex;flex-direction:column;align-items:center}
.score b{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:1.9rem;line-height:1.1;color:var(--lime);font-variant-numeric:tabular-nums;text-shadow:0 0 14px #c8f54288}
.score span{font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;opacity:.6}
.todo{display:flex;align-items:center;gap:.8em;margin-top:1.6em;text-decoration:none;text-align:left;background:#ffffff14;border:2px solid #ffffff55;border-radius:16px;padding:.7em 1em;backdrop-filter:blur(6px);animation:fade 1s 1.7s both}
.todo.wiggle{animation:fade 1s 1.7s both,wiggle 3.5s 3s infinite}
.todo small{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;opacity:.7}
.todo b{font-size:1rem}
.todo__check{flex:none;width:28px;height:28px;border-radius:8px;border:2.5px solid var(--lime);display:grid;place-items:center;font-weight:800;color:var(--ink)}
.todo--done .todo__check{background:var(--lime)}
.todo--done .todo__check::after{content:"✓"}
.todo--done b{text-decoration:line-through;opacity:.7}
.todo--urgent{border-color:var(--sun)}
.deadline{display:inline-block;margin:-.2em 0 1.2em;background:var(--sun);border:2.5px solid var(--ink);border-radius:99px;padding:.4em 1em;font-weight:700;font-size:.92rem;box-shadow:0 3px 0 var(--ink)}
.deadline.wiggle{animation:wiggle 3.5s 1.5s infinite;transform-origin:left center}
@keyframes wiggle{0%,60%,100%{transform:none}64%{transform:rotate(-3deg) scale(1.04)}70%{transform:rotate(3deg) scale(1.04)}76%{transform:rotate(-2.5deg)}82%{transform:rotate(2deg)}88%{transform:rotate(-1deg)}94%{transform:none}}
.deadline--done{background:#d6f5e6}
.deadline--late{background:#fde0e1}
.upd{font-size:.82rem;opacity:.65;margin-top:.8em}
.scroll{margin-top:2em;color:#fff;font-weight:700;text-decoration:none;opacity:.8;animation:bob 1.8s infinite}
@keyframes bob{50%{transform:translateY(6px)}}

/* ticker */
.ticker{background:var(--lime);color:var(--ink);overflow:hidden;white-space:nowrap;transform:rotate(-1.2deg);margin:-14px -10px 0;position:relative;z-index:2;border-block:3px solid var(--ink)}
.ticker__track{display:inline-flex;gap:1.2em;padding:.7em 0;font-weight:800;text-transform:uppercase;letter-spacing:.05em;animation:tick 28s linear infinite}
@keyframes tick{to{transform:translateX(-50%)}}

/* sections */
.sec{max-width:760px;margin:0 auto;padding:64px 16px 8px}
.sec__title{font-size:clamp(2.2rem,9vw,3.4rem);letter-spacing:-.04em;line-height:1;margin-bottom:.6em;font-weight:800}
.sec__title small{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:.45em;color:var(--l);letter-spacing:0;margin-bottom:.2em}
.card{background:var(--paper);border:2.5px solid var(--ink);border-radius:var(--r);box-shadow:6px 6px 0 var(--ink);padding:22px}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1;transform:none}

/* RSVP */
.rsvp{padding:24px 20px}
.rsvp h3{font-size:1.7rem;letter-spacing:-.03em;line-height:1.1}
.rsvp h3 em{font-family:var(--serif);font-weight:400;color:var(--l)}
.rsvp p{margin-top:.5em}
.skeleton{height:160px;border-radius:14px;background:linear-gradient(100deg,#0000000a 30%,#00000018 50%,#0000000a 70%);background-size:300% 100%;animation:sh 1.2s infinite}
@keyframes sh{to{background-position:-100% 0}}
.choices{display:grid;gap:10px;margin:1.2em 0}
.choice{display:flex;align-items:center;gap:.8em;text-align:left;border:2.5px solid var(--ink);background:#fff;border-radius:16px;padding:.95em 1em;font-weight:700;font-size:1.05rem;cursor:pointer;transition:transform .12s,box-shadow .12s,background .2s;min-height:60px;box-shadow:0 4px 0 var(--ink)}
.choice:active{transform:translateY(4px);box-shadow:none}
.choice__e{font-size:1.6rem}
.choice small{display:block;font-weight:500;opacity:.65;font-size:.82rem}
.choice[aria-pressed=true]{color:#fff}
.choice[data-v=yes][aria-pressed=true]{background:var(--yes)}
.choice[data-v=no][aria-pressed=true]{background:var(--no)}
.choice[data-v=maybe][aria-pressed=true]{background:var(--maybe);color:var(--ink)}
.field{display:block;margin-top:1em}
.field>span{display:block;font-weight:700;font-size:.88rem;margin-bottom:.35em}
.field input[type=text],.field textarea{width:100%;border:2.5px solid var(--ink);border-radius:14px;padding:.8em .9em;background:#fff;font-size:16px;outline:none;transition:box-shadow .15s}
.field textarea{resize:vertical;min-height:84px}
.field input:focus,.field textarea:focus{box-shadow:0 0 0 4px var(--lime)}
.diets{display:flex;gap:8px;flex-wrap:wrap}
.diet{flex:1;min-width:90px;cursor:pointer}
.diet input{position:absolute;opacity:0;pointer-events:none}
.diet span{display:block;text-align:center;border:2.5px solid var(--ink);border-radius:14px;padding:.7em .4em;font-weight:700;font-size:.95rem;background:#fff;transition:background .15s,transform .1s}
.diet input:checked+span{background:var(--lime);box-shadow:0 3px 0 var(--ink)}
.diet input:focus-visible+span{outline:3px solid var(--p)}
.diet:active span{transform:scale(.97)}
.toggle{display:flex;align-items:center;gap:.8em;margin-top:1em;padding:.8em 1em;border:2.5px dashed var(--ink);border-radius:14px;cursor:pointer;font-weight:700}
.toggle input{width:24px;height:24px;accent-color:var(--p);flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:2.5px solid var(--ink);background:#fff;border-radius:99px;padding:.9em 1.5em;font-weight:800;font-size:1.05rem;cursor:pointer;text-decoration:none;box-shadow:0 5px 0 var(--ink);transition:transform .12s,box-shadow .12s;min-height:54px}
.btn:active{transform:translateY(5px);box-shadow:none}
.btn--primary{background:var(--lime)}
.btn--block{width:100%;margin-top:1.3em}
.btn[disabled]{opacity:.55;pointer-events:none}
.linkbtn{background:none;border:0;text-decoration:underline;cursor:pointer;padding:0;opacity:.8}
.status-big{display:flex;align-items:center;gap:.8em;margin-top:1em;padding:1em;border-radius:16px;font-weight:700;border:2.5px solid var(--ink)}
.status-big .choice__e{font-size:2rem}
.status-big--yes{background:#d6f5e6}.status-big--no{background:#fde0e1}.status-big--maybe{background:#fdeccb}
.status-big small{display:block;font-weight:500;opacity:.75}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:1.2em}
.row .btn{flex:1;min-width:150px;font-size:.98rem}
.codeform{display:flex;gap:8px;margin-top:1em}
.codeform input{flex:1;min-width:0;border:2.5px solid var(--ink);border-radius:14px;padding:.8em;font-size:16px;text-transform:uppercase;letter-spacing:.15em;font-weight:700}
.codeform .btn{padding:.8em 1.1em;min-height:0}
.err{color:var(--no);font-weight:700;margin-top:.6em}

/* info */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.info{padding:18px}
.info--wide{grid-column:1/-1}
.info__icon{font-size:2rem;display:block;margin-bottom:.2em}
.info h3{font-size:1.2rem;letter-spacing:-.02em;margin-bottom:.25em}
.info p{font-size:.95rem}
.link{display:inline-block;margin-top:.6em;font-weight:700;color:var(--p)}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin-top:.5em}
.chips li{background:var(--cream);border:2px solid var(--ink);padding:.4em .85em;border-radius:99px;font-weight:600;font-size:.92rem}
.info:nth-child(1){transform:rotate(-.6deg)}.info:nth-child(2){transform:rotate(.5deg)}
.reveal.in.info:nth-child(1){transform:rotate(-.6deg)}.reveal.in.info:nth-child(2){transform:rotate(.5deg)}
@media(max-width:520px){.grid{grid-template-columns:1fr}.info:nth-child(n){transform:none!important}}

/* photos */
.photos{text-align:center;background:var(--p);color:#fff;padding:32px 22px}
.photos__emoji{font-size:3.2rem}
.photos h3{font-size:1.6rem;letter-spacing:-.03em;margin:.2em 0}
.photos p{margin-bottom:1em}
.photos .small{margin:1em 0 0;color:#fff}
.btn--off{background:#ffffff33;color:#fff;box-shadow:none;border-color:#fff;pointer-events:none}

.foot{text-align:center;padding:70px 16px calc(50px + var(--safe-b));font-weight:700}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(24px + var(--safe-b));transform:translate(-50%,40px);background:var(--ink);color:#fff;padding:.8em 1.3em;border-radius:99px;font-weight:700;opacity:0;pointer-events:none;transition:.35s cubic-bezier(.2,1.2,.4,1);z-index:120;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .vs__old{opacity:0}.vs__new{opacity:1;transform:none}
  .ticker__track{animation:none}
}