/* Polaroid Stack. Fixed colours (no palettes): kraft paper, cream frames, pastel washi tape. */
:root{
  --kraft:#c9a47c; --kraft-d:#9c7651; --cream:#fffaf0; --ink:#3c3a38; --ink2:#5f5a54;
  --mint:#bfe6d2; --pink:#f7c6d0; --butter:#fbe6a2; --heart:#e0607a;
  --cw:min(340px, calc(100vw - 48px));
}
*{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;background:var(--kraft)}
body{margin:0;color:var(--ink);font:400 15px/1.5 'Nunito',system-ui,sans-serif;min-height:100vh;
  background-color:var(--kraft);
  background-image:
    radial-gradient(ellipse at 50% 20%, transparent 45%, rgba(90,58,28,.28)),
    radial-gradient(rgba(96,62,30,.2) 1px, transparent 1.7px),
    radial-gradient(rgba(255,240,214,.24) 1px, transparent 1.7px),
    repeating-linear-gradient(17deg, rgba(120,80,40,.05) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-23deg, rgba(255,255,255,.045) 0 1px, transparent 1px 13px);
  background-size:auto, 13px 17px, 19px 23px, auto, auto;
  background-position:0 0, 0 0, 7px 11px, 0 0, 0 0;
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px dashed var(--heart);outline-offset:3px}
button{font:inherit;color:inherit}
a{color:inherit}

main{max-width:480px;margin:0 auto;overflow:hidden;
  padding:calc(env(safe-area-inset-top) + 14px) calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 28px) calc(env(safe-area-inset-left) + 16px)}

/* shared.js plays a YouTube song in this small card while it plays, as YouTube's embedding rules expect */
.yt-card{position:fixed;left:12px;bottom:calc(env(safe-area-inset-bottom) + 14px);z-index:80;width:160px;height:90px;overflow:hidden;border-radius:3px;background:#000;
  border:6px solid var(--cream);box-shadow:0 10px 22px -8px rgba(60,35,10,.55);opacity:0;transform:translateY(8px) rotate(-2deg);transition:opacity .4s,transform .4s;pointer-events:none}
.yt-card.on{opacity:1;transform:rotate(-2deg);pointer-events:auto}
.yt-card iframe{display:block;width:148px;height:78px;border:0}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.hey{margin:0;font:400 30px/1 'Gochi Hand',cursive;transform:rotate(-3deg);position:relative;padding-bottom:6px}
.hey svg{position:absolute;left:0;bottom:-6px;width:100%;height:12px}
.cas{display:flex;flex-direction:column;align-items:center;gap:0;background:none;border:0;padding:4px;cursor:pointer;transform:rotate(6deg);-webkit-tap-highlight-color:transparent}
.cas[hidden]{display:none}
.cas svg{width:76px;height:50px;display:block}
.cas-l{font:400 14px/1.1 'Gochi Hand',cursive;white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}
.reel{transform-box:fill-box;transform-origin:center;animation:spin 2.2s linear infinite paused}
.cas.on .reel{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
.dear{margin:12px 0 0 4px;font:700 30px/1.1 'Caveat',cursive;transform:rotate(-2deg);overflow-wrap:break-word}

/* board: sticky note, stickers, the deck */
.board{position:relative;padding:4px 0 6px}
.board.nosticky{padding-top:22px}
.sticky-wrap{position:relative;width:max-content;max-width:78%;margin:10px 0 22px 4px;transform:rotate(-3deg)}
.sticky{background:var(--butter);padding:16px 18px 12px;box-shadow:0 6px 12px -6px rgba(60,35,10,.5);font:400 22px/1.15 'Gochi Hand',cursive}
.sticky small{display:block;font:600 12px/1.4 'Nunito',sans-serif;color:var(--ink2);margin-top:4px}
.clip{position:absolute;right:-6px;top:-14px;width:16px;height:40px;transform:rotate(14deg)}
.stk{position:absolute;z-index:20;pointer-events:none;animation:wig var(--w,2.8s) ease-in-out infinite;animation-delay:var(--dl,0s)}
.stk svg{display:block;width:100%;height:100%}
@keyframes wig{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg) scale(1.08)}}

.deck{display:grid;width:var(--cw);margin:0 auto;position:relative;touch-action:pan-y;padding-bottom:22px;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.deck > *{grid-area:1/1;align-self:start}
.deck:not(.still){transition:grid-template-rows .5s ease}
.card{position:relative;display:flex;flex-direction:column;background:var(--cream);padding:14px 14px 14px;border-radius:3px;min-width:0;
  box-shadow:0 1px 1px rgba(0,0,0,.14),0 10px 22px -8px rgba(60,35,10,.55);transform-origin:50% 85%;
  transition:transform .6s cubic-bezier(.3,1.4,.5,1),opacity .45s ease;will-change:transform;cursor:grab}
.card.drag{transition:none;cursor:grabbing}
.card.gone{transition:transform .65s cubic-bezier(.45,.05,.6,1),opacity .5s ease .12s;pointer-events:none}
.deck.still .card{transition:none}
.card input,.card textarea{user-select:text;-webkit-user-select:text}

.tape{position:absolute;z-index:3;top:-13px;left:50%;width:96px;height:26px;margin-left:-48px;transform:rotate(var(--tr,-4deg));opacity:.93;
  clip-path:polygon(0 0,100% 0,97% 20%,100% 40%,97% 60%,100% 80%,97% 100%,0 100%,3% 80%,0 60%,3% 40%,0 20%)}
.t-mint{background:var(--mint) radial-gradient(rgba(255,255,255,.75) 1.6px, transparent 2px) 0 0/10px 10px}
.t-pink{background:var(--pink) repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 4px, transparent 4px 9px)}
.t-butter{background:var(--butter) linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px) 0 0/8px 8px}
.pclip{position:absolute;z-index:3;right:18px;top:-16px;width:14px;height:38px;transform:rotate(-8deg)}

.ph{flex:1 1 auto;min-height:150px;position:relative;overflow:hidden;border-radius:2px;display:grid;place-items:center;
  background:#efe6d6 radial-gradient(rgba(60,58,56,.13) 1px, transparent 1.4px) 0 0/14px 14px}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;-webkit-user-drag:none}
.c-hello .ph{min-height:260px;background:#ddd}
.c-hello .ph.empty{background:#efe6d6 radial-gradient(rgba(60,58,56,.13) 1px, transparent 1.4px) 0 0/14px 14px}
.c-hello .ph.heart{min-height:200px;background:#fde6ea}
.ph-txt{font:400 24px/1.1 'Gochi Hand',cursive;color:var(--ink2);transform:rotate(-3deg)}
.cap{padding:10px 2px 0}
.ttl{margin:0;font:700 36px/1 'Caveat',cursive}
.hello{margin:0;font:400 25px/1.15 'Gochi Hand',cursive;text-align:center}
.hello b{font-weight:400;color:var(--heart)}
.tiny{margin:4px 0 0;font:600 12px/1.4 'Nunito',sans-serif;color:var(--ink2);text-align:center}

/* doodles */
.ink{width:100%;max-width:280px;height:auto;display:block;padding:6px}
.ink path:not(.fillin){fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2;stroke-dashoffset:1.05}
.ink path.hn{stroke:#9b4a24;stroke-width:1.8}
.ink path.pk{stroke:var(--heart);stroke-width:3}
.ink .fillin{stroke:none;opacity:0}
.is-top .ink path{stroke-dashoffset:0;transition:stroke-dashoffset .7s ease calc(var(--i,0) * .13s + .25s)}
.is-top .ink .fillin{opacity:.95;transition:opacity .6s ease 1.3s}
.deck.still .ink path,.deck.still .ink .fillin{transition:none}

/* save the date */
.std{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px 8px;
  background:#fff3c9 linear-gradient(rgba(60,58,56,.08) 1px, transparent 1px) 0 0/100% 22px}
.std-k{font:400 22px/1 'Gochi Hand',cursive;transform:rotate(-4deg)}
.std-big{position:relative;width:200px;max-width:100%;height:170px;display:grid;place-items:center}
.std-big .ink{position:absolute;inset:0;max-width:none;padding:0;height:100%}
.std-day{position:relative;font:700 108px/1 'Caveat',cursive;margin-top:-14px}
.std-tba{position:relative;font:400 24px/1.1 'Gochi Hand',cursive;margin-top:-14px;max-width:120px}
.std-m{font:700 30px/1 'Caveat',cursive;margin-top:-8px}
.std-w{font:600 13px/1.4 'Nunito',sans-serif;color:var(--ink2);margin-top:6px}
.city{display:inline-flex;align-items:center;gap:6px;font:400 19px/1.2 'Gochi Hand',cursive;max-width:100%}
.city svg{width:16px;height:20px;flex:none}

/* event facts */
.facts{margin:8px 0 0;display:grid;gap:5px}
.facts div{display:grid;grid-template-columns:52px 1fr;gap:6px;align-items:baseline}
.facts dt{font:400 16px/1.2 'Gochi Hand',cursive;color:var(--heart)}
.facts dd{margin:0;font:600 13.5px/1.35 'Nunito',sans-serif;overflow-wrap:anywhere;min-width:0}
.facts dd small{display:block;font-weight:400;color:var(--ink2);font-size:12.5px}
.note{margin:8px 0 0;font:500 19px/1.15 'Caveat',cursive;color:var(--ink2)}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

/* hand-drawn buttons */
.hb{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:6px 14px;cursor:pointer;
  font:400 17px/1.1 'Gochi Hand',cursive;color:var(--ink);text-decoration:none;background:#fff;border:2px solid var(--ink);
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;box-shadow:2px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}
.hb:active{transform:translate(2px,3px);box-shadow:0 0 0 var(--ink)}
.hb[disabled]{opacity:.35;cursor:default;transform:none}
.hb[hidden]{display:none}
.hb.mint{background:var(--mint)} .hb.pink{background:var(--pink)} .hb.butter{background:var(--butter)}
.hb svg{width:18px;height:12px;flex:none}

/* RSVP card */
.paper{flex:1;padding:6px 6px 2px;background:#fffdf7 linear-gradient(rgba(120,160,200,.18) 1px, transparent 1px) 0 6px/100% 26px;
  border-left:2px solid rgba(224,96,122,.35)}
.paper .ttl{text-align:center}
.by{margin:0 0 6px;text-align:center;font:400 16px/1.2 'Gochi Hand',cursive;color:var(--ink2)}
.fld{display:block;margin-top:8px}
.lb{display:block;font:400 17px/1.2 'Gochi Hand',cursive;padding:0}
.lb small{font-size:13px;color:var(--ink2)}
.fld input,.fld textarea{width:100%;border:0;border-bottom:2px dashed var(--ink);background:transparent;color:var(--ink);
  font:400 20px/1.3 'Gochi Hand',cursive;padding:4px 2px;border-radius:0;outline-offset:2px}
.fld textarea{resize:none;border:2px dashed var(--ink);border-radius:8px;padding:4px 8px;font-size:18px}
.fld input::placeholder,.fld textarea::placeholder{color:#a39d95}
.fld input.bad{border-bottom-color:var(--heart)}
.err,.rsvp-err{margin:2px 0 0;font:400 16px/1.2 'Gochi Hand',cursive;color:#c23a57}
.rsvp-err{margin-top:8px;text-align:center}
fieldset{border:0;margin:8px 0 0;padding:0;min-width:0}
fieldset[hidden]{display:none}
legend{padding:0}
.chk{position:relative;display:flex;align-items:center;gap:8px;padding:3px 0;cursor:pointer;font:400 18px/1.15 'Gochi Hand',cursive;min-width:0}
.chk span{min-width:0;overflow-wrap:anywhere}
.chk input,.cir input{position:absolute;opacity:0;width:100%;height:100%;inset:0;margin:0;cursor:pointer}
.chk svg{width:28px;height:28px;flex:none}
.chk svg path,.cir svg path{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.chk .tick,.cir .ring{stroke:var(--heart);stroke-width:3;stroke-dasharray:1 2;stroke-dashoffset:1.05;transition:stroke-dashoffset .35s ease}
.chk input:checked + svg .tick,.cir input:checked + svg .ring{stroke-dashoffset:0}
.chk input:focus-visible + svg,.cir input:focus-visible + svg{outline:3px dashed var(--heart);outline-offset:1px;border-radius:50%}
.evs{display:grid;grid-template-columns:1fr 1fr;gap:0 8px;transition:opacity .3s}
.evs .chk{font-size:16px;gap:5px}
.evs .chk svg{width:24px;height:24px}
.circles{display:grid;grid-template-columns:repeat(5,1fr);gap:2px 4px;max-width:270px}
.cir{position:relative;width:100%;max-width:46px;aspect-ratio:1;display:grid;place-items:center;cursor:pointer;justify-self:center}
.cir svg{position:absolute;inset:0;width:100%;height:100%}
.cir span{position:relative;font:400 21px/1 'Gochi Hand',cursive}
.send{width:100%;margin-top:12px;font-size:22px;min-height:48px}
.thanks{text-align:center;padding-top:6px}
.thanks[hidden]{display:none}
.thanks h3{margin:4px 0 2px;font:700 34px/1 'Caveat',cursive;overflow-wrap:break-word}
.thanks p{margin:0 0 12px;font:400 17px/1.3 'Gochi Hand',cursive}
.thanks svg{width:84px;height:76px}
.linky{display:block;margin:10px auto 0;background:none;border:0;cursor:pointer;font:400 16px/1.2 'Gochi Hand',cursive;text-decoration:underline wavy var(--heart);text-underline-offset:4px;padding:6px}

/* end of deck */
.endnote{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:20px;border:3px dashed rgba(74,52,32,.35);border-radius:14px;margin:6px;min-width:0;
  opacity:0;transform:scale(.9) rotate(-2deg);transition:opacity .4s ease .25s,transform .5s cubic-bezier(.3,1.5,.5,1) .25s}
.endnote.show{opacity:1;transform:rotate(-2deg)}
.endnote p{margin:0;font:400 26px/1.15 'Gochi Hand',cursive}
.endnote .hash{font:700 24px/1.1 'Caveat',cursive;color:var(--heart);overflow-wrap:anywhere;max-width:100%}
.endnote small{font:600 13px/1.4 'Nunito',sans-serif;color:#4a3420}
.endnote svg{width:70px;height:60px}

.ctrl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:4px}
.count{min-width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:var(--cream);font:400 22px/1 'Gochi Hand',cursive;
  box-shadow:0 4px 10px -4px rgba(60,35,10,.5);transform:rotate(-6deg)}
.hint{display:block;text-align:center;margin:8px 0 0;font:400 18px/1.2 'Gochi Hand',cursive;color:#4a3420;transition:opacity .4s}
.hint.off{opacity:0}

/* torn sign-off note */
.torn-wrap{position:relative;margin:34px auto 0;width:min(330px, 100%);transform:rotate(1.5deg)}
.torn{background:#fffdf6 linear-gradient(rgba(120,160,200,.16) 1px, transparent 1px) 0 10px/100% 24px;padding:26px 20px 24px;text-align:center;
  clip-path:polygon(0 3%,6% 0,12% 2.5%,19% .5%,26% 3%,33% 0,41% 2%,49% .5%,56% 3%,63% 0,71% 2.5%,78% .5%,86% 3%,93% 0,100% 2%,100% 97%,94% 100%,87% 97.5%,80% 99.5%,72% 97%,65% 100%,58% 98%,50% 99.5%,43% 97%,36% 100%,28% 97.5%,21% 99.5%,13% 97%,6% 100%,0 98%)}
.torn .tape{top:-10px;--tr:3deg}
.torn .inv{margin:0;font:600 14px/1.5 'Nunito',sans-serif;color:var(--heart)}
.torn .inv-en{margin:0;font:400 17px/1.3 'Gochi Hand',cursive;color:var(--ink2)}
.torn .shl{margin:6px 0 12px;font:500 13px/1.6 'Nunito',sans-serif;color:var(--ink2)}
.torn h2{margin:0;font:700 26px/1.1 'Caveat',cursive}
.torn .gp,.torn .hosts{margin:10px 0 0;font:400 18px/1.25 'Gochi Hand',cursive}
.torn .gp{font-size:16px;color:var(--ink2)}
.torn .iline{margin:6px 0 0;font:500 20px/1.2 'Caveat',cursive;color:var(--ink2)}
.torn .nm{margin:10px 0 0;font:700 28px/1 'Caveat',cursive}
.torn .ln{margin:2px 0 0;font:600 12.5px/1.4 'Nunito',sans-serif;color:var(--ink2)}
.torn .amp{margin:4px 0 0;font:400 22px/1 'Gochi Hand',cursive;color:var(--heart)}
.torn .fam{margin:14px 0 0;font:400 19px/1.25 'Gochi Hand',cursive}
.torn .wel{margin:14px 0 0;font:500 19px/1.25 'Caveat',cursive;color:var(--ink2)}

/* lined-paper notes: every function, travel, contacts */
.list{position:relative;margin:34px 0 0;background:#fffdf7 linear-gradient(rgba(120,160,200,.16) 1px, transparent 1px) 0 0/100% 26px;
  padding:22px 18px 18px 30px;border-radius:3px;box-shadow:0 10px 22px -10px rgba(60,35,10,.55)}
.list::before{content:"";position:absolute;left:18px;top:0;bottom:0;border-left:2px solid rgba(224,96,122,.35)}
.list .tape{top:-12px;--tr:-2deg}
.list h2{margin:0;font:700 32px/1.05 'Caveat',cursive}
.list ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:14px}
.list h3{margin:0;font:400 22px/1.1 'Gochi Hand',cursive;display:flex;align-items:center;gap:8px;overflow-wrap:anywhere;min-width:0}
.list h3 i{width:12px;height:12px;border-radius:50%;flex:none;background:var(--c)}
.list li p{margin:2px 0 0;font-size:14px;overflow-wrap:anywhere}
.list .lnks{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:4px;font:400 16px/1.3 'Gochi Hand',cursive}
.list .lnks a{text-decoration:underline wavy rgba(224,96,122,.7);text-underline-offset:3px}
.list .rs{margin-top:18px;padding-top:12px;border-top:2px dashed rgba(60,58,56,.25)}
.list .rs p{margin:4px 0 0;font-size:14px}
.list .rs .hb{margin-top:10px}
.list.butter{background-color:#fff6d6}

.who{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.who > div{flex:1 1 150px;min-width:0}
.who h3{display:block}
.who .role{display:block;font-size:13.5px;color:var(--ink2);overflow-wrap:anywhere}
.who .acts{margin-top:0}
.who .hb{min-height:36px;padding:4px 12px;font-size:16px}

/* story: small polaroids, one per chapter */
.sec{margin:40px 0 0}
.st{margin:0 0 18px;text-align:center;font:700 34px/1.05 'Caveat',cursive;color:#3a2a1a;transform:rotate(-2deg)}
.st small{display:block;font:400 18px/1.2 'Gochi Hand',cursive;color:#4a3420}
.chaps{list-style:none;margin:0;padding:0;display:grid;gap:30px}
.chap{position:relative;width:min(300px, 92%);background:var(--cream);padding:14px 14px 16px;border-radius:3px;box-shadow:0 1px 1px rgba(0,0,0,.14),0 10px 22px -8px rgba(60,35,10,.55);transform:rotate(var(--r))}
.chaps li:nth-child(odd) .chap{margin-right:auto;--r:-1.8deg}
.chaps li:nth-child(even) .chap{margin-left:auto;--r:1.6deg}
.chap img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;margin-bottom:10px}
.chap .yr{margin:0;font:400 20px/1 'Gochi Hand',cursive;color:var(--heart)}
.chap h3{margin:2px 0 0;font:700 28px/1.05 'Caveat',cursive;overflow-wrap:break-word}
.chap p:not(.yr){margin:6px 0 0;font-size:14px;line-height:1.5}

/* gallery: a pile of polaroids */
.gal{display:grid;grid-template-columns:1fr 1fr;gap:22px 16px}
.gal button{position:relative;display:block;padding:8px 8px 26px;border:0;background:var(--cream);border-radius:2px;cursor:zoom-in;
  box-shadow:0 1px 1px rgba(0,0,0,.14),0 8px 16px -8px rgba(60,35,10,.55);transform:rotate(var(--r,-2deg));-webkit-tap-highlight-color:transparent}
.gal button:nth-child(3n+2){--r:2.2deg} .gal button:nth-child(3n){--r:-1deg}
.gal img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:1px}
.gal .tape{width:56px;height:18px;margin-left:-28px;top:-9px}
.box{max-width:min(94vw,560px);max-height:92vh;padding:10px 10px 34px;border:0;border-radius:3px;background:var(--cream);overflow:visible;box-shadow:0 20px 40px -10px rgba(0,0,0,.6)}
.box::backdrop{background:rgba(60,40,20,.8)}
.box img{display:block;max-width:100%;max-height:calc(92vh - 44px)}
.box .x{position:absolute;top:-14px;right:-10px;width:40px;height:40px;border:2px solid var(--ink);border-radius:50%;background:var(--pink);color:var(--ink);font:400 26px/1 'Gochi Hand',cursive;cursor:pointer;box-shadow:2px 3px 0 var(--ink)}

footer{text-align:center;margin-top:30px;font:400 17px/1.3 'Gochi Hand',cursive;color:#4a3420}
footer p{margin:0}
footer .hb{margin-top:14px}
.made{display:inline-block;margin-top:16px;font:700 11px/1.4 'Nunito',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#4a3420;text-decoration:none;opacity:.85}

#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}

@media (prefers-reduced-motion: reduce){
  .stk,.reel{animation:none!important}
  .card,.card.gone,.endnote{transition:opacity .2s ease!important}
  .ink path,.chk .tick,.cir .ring{transition:none!important}
  .ink path{stroke-dashoffset:0!important}
  .ink .fillin{opacity:.95}
}