@font-face{font-family:Patrick Hand;src:url(fonts/PatrickHand.ttf) format('truetype');font-display:swap;font-weight:400}
@font-face{font-family:Caveat;src:url(fonts/Caveat.ttf) format('truetype');font-display:swap;font-weight:100 900}
:root{--paper:#f4f0e7;--ink:#222;--soft-ink:#4a4743;--accent:#ad3940;--hand:'Patrick Hand','Comic Sans MS',cursive;--script:Caveat,'Comic Sans MS',cursive;--sans:Arial,Helvetica,sans-serif;--pad:clamp(1.3rem,6vw,4.5rem);--ease:cubic-bezier(.2,.7,.25,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:#e5e0d5;color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}p,h1,h2,figure{margin:0}a{color:inherit;text-underline-offset:5px;overflow-wrap:anywhere;-webkit-tap-highlight-color:transparent}a:focus-visible{outline:2px dashed var(--accent);outline-offset:6px}img{display:block;width:100%;height:100%;object-fit:cover}svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}h1,h2,p,time,span{overflow-wrap:break-word}
.skip-link{position:absolute;left:1rem;top:1rem;transform:translateY(-200%);z-index:4;background:var(--paper);padding:.75rem}.skip-link:focus{transform:none}.load-status{padding:2rem;max-width:600px;margin:auto}
.paper{position:relative;max-width:720px;margin:auto;isolation:isolate;background:var(--paper);box-shadow:0 8px 35px #22222212}
.paper::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.11;background-image:radial-gradient(#676058 .45px,transparent .7px),radial-gradient(#958b7c .4px,transparent .65px);background-size:5px 7px,11px 13px;background-position:0 0,3px 4px}
.ambient{display:none}.poster{padding:2rem var(--pad) 1.5rem;text-align:center}.cover-star{width:36px;height:42px;margin:0 auto .6rem;transform:rotate(-9deg)}.eyebrow{font-size:clamp(.61rem,1.4vw,.7rem);font-weight:400;letter-spacing:.15em;text-transform:uppercase;line-height:1.7}.poster>.eyebrow{margin-bottom:1rem;color:var(--soft-ink)}
h1{font-weight:400;line-height:1.05}.hand-name{display:block;font-family:var(--script);font-size:clamp(3.8rem,16vw,6.8rem);font-weight:600;transform:rotate(-5deg);padding:.08em .05em .15em}.birthday-title{display:flex;flex-direction:column;align-items:center;font-family:var(--hand);font-size:clamp(3.2rem,13vw,5.6rem);line-height:.95;letter-spacing:-.045em}.age{font-size:clamp(4.3rem,19vw,8rem);font-family:var(--hand);letter-spacing:-.055em;transform:rotate(3deg);padding-inline:.15em;line-height:1}.birthday-word{transform:rotate(-2deg);padding:.1em 0 .16em}.invitation-phrase{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;max-width:34ch;margin:1.1rem auto 0;line-height:1.8;text-wrap:balance}
.hanging-disco{position:relative;width:120px;margin:1rem auto 1.3rem;padding-top:24px}.disco-thread{display:block;width:1px;height:24px;position:absolute;top:0;left:50%;background:var(--ink)}.disco{width:120px;height:120px;transform:rotate(5deg)}.pencil-note{font-family:var(--script);font-size:clamp(1.4rem,4vw,1.8rem);line-height:1.25;font-weight:500;color:var(--soft-ink)}.hanging-disco .pencil-note{position:absolute;left:93%;top:44%;width:6ch;transform:rotate(9deg);font-size:1.4rem;text-align:left}
.cover-date{display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);gap:.8rem;align-items:center;text-transform:uppercase;font-size:.66rem;letter-spacing:.065em;line-height:1.7;max-width:460px;margin-inline:auto}.date-star{width:22px;height:26px}.cover-date>span:first-child{text-align:right}.cover-date>span:last-child{text-align:left}
.birthday-scene{display:grid;grid-template-columns:1fr 1.7fr 1fr;gap:clamp(.3rem,2vw,1rem);align-items:end;max-width:420px;margin:1.5rem auto .2rem}.scene-cake{aspect-ratio:1}.scene-flower{aspect-ratio:.65;transform:rotate(-9deg)}.scene-cocktail{aspect-ratio:.7;transform:rotate(9deg)}.scene-caption{font-family:var(--script);font-size:1.15rem;line-height:1.25;max-width:30ch;margin:.5rem auto 1.2rem;transform:rotate(-2deg)}
.ink-link{position:relative;display:inline-flex;justify-content:center;align-items:center;gap:.7rem;min-height:44px;padding:.5rem .2rem;text-decoration:none;font-size:.7rem;line-height:1.4;letter-spacing:.025em}.ink-link::after{content:'';position:absolute;bottom:.3rem;left:0;right:0;border-bottom:1px solid var(--ink);transform:rotate(-1deg);transition:transform .3s}.ink-link:hover::after{transform:rotate(1deg) scaleX(.9)}.arrow-icon{width:22px;height:22px;flex-shrink:0;stroke-width:1.6}
.paper-section{position:relative;padding:clamp(2rem,6vw,3.5rem) var(--pad);text-align:center}.drawn-rule{height:14px;width:100%;margin:0 auto clamp(1.7rem,5vw,3rem)}.drawn-rule svg{stroke-width:1;overflow:visible}h2{font-family:var(--hand);font-size:clamp(2.1rem,8vw,3.35rem);font-weight:400;line-height:1.13;letter-spacing:-.015em;margin:.8rem auto 1.2rem;text-wrap:balance}h2 span{font-family:var(--script);font-size:1.12em}.body-copy{font-size:clamp(.88rem,2vw,1rem);line-height:1.9;max-width:43ch;margin-inline:auto;color:var(--soft-ink)}
.intro{padding-top:1.5rem}.date-details{display:flex;flex-direction:column;gap:.2rem;font-family:var(--hand);font-size:clamp(1.3rem,5vw,1.9rem);margin:1rem auto 2rem}.date-details time{font-size:1.15em}.where .pencil-note{transform:rotate(-4deg);margin-bottom:1rem;color:var(--accent)}.address{font-size:clamp(.9rem,2.4vw,1.05rem);max-width:32ch;margin:auto;line-height:1.8}.where .ink-link{margin-top:.8rem}
.countdown h2{font-size:clamp(1.85rem,6vw,2.8rem);max-width:20ch}.countdown-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.5rem,3vw,2rem);max-width:440px;margin:1.8rem auto 0}.countdown-values>div{position:relative;min-width:0}.countdown-values>div::after{content:'';display:block;border-bottom:1px solid #4a474380;transform:rotate(-2deg);margin-top:.6rem}.countdown-values>div:nth-child(2)::after{transform:rotate(2deg)}.countdown-values span:first-child{display:block;font-family:var(--hand);font-size:clamp(2.9rem,11vw,4.5rem);line-height:1.15;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.countdown-values span:last-child{display:block;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;padding-top:.5rem}.countdown-complete{font-family:var(--script);font-size:1.7rem;line-height:1.4;max-width:28ch;margin:auto;transform:rotate(-2deg)}.countdown-sparkle{width:28px;height:32px;margin:1.5rem auto 0}
.dress{display:grid;grid-template-columns:minmax(0,1fr) 65px;gap:.6rem;align-items:center;text-align:left}.dress h2{margin:.65rem 0 .9rem}.dress-code{font-family:var(--hand);font-size:clamp(1.6rem,6vw,2.2rem);line-height:1.25;transform:rotate(-2deg)}.dress .pencil-note{font-size:1.35rem;margin-top:1.1rem;max-width:24ch}.dress-flower{width:100%;height:145px;transform:rotate(10deg)}
.visual-section{padding-block:1.5rem}.secondary-visual{position:relative;aspect-ratio:9/7;max-width:450px;margin:auto}.secondary-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}.secondary-placeholder>div{width:130px;height:170px;transform:rotate(-8deg)}.secondary-visual img{position:absolute;inset:0;object-fit:cover}.visual-section figcaption,.portrait-section figcaption{font-family:var(--script);font-size:1.3rem;line-height:1.4;margin-top:.7rem;transform:rotate(-2deg)}.portrait-visual{aspect-ratio:4/5;max-width:280px;margin:auto}
.gifts{display:grid;grid-template-columns:65px minmax(0,1fr);gap:1.1rem;text-align:left;align-items:start}.gift-doodle{height:90px;transform:rotate(-8deg);margin-top:1.5rem}.gifts h2{font-size:clamp(1.8rem,6vw,2.6rem);margin-inline:0}.gifts .body-copy{font-size:.87rem}
.rsvp h2{font-family:var(--script);font-size:clamp(3.8rem,15vw,5.8rem);font-weight:600;transform:rotate(-4deg);margin-bottom:.2rem}.rsvp>.pencil-note{margin-bottom:1.5rem;color:var(--accent);transform:rotate(4deg)}.drawn-button{position:relative;display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:65px;padding:1rem 1.2rem;max-width:430px;margin:auto;text-decoration:none;font-family:var(--hand);font-size:clamp(1.04rem,3.6vw,1.45rem);line-height:1.4}.button-outline{position:absolute;inset:0;pointer-events:none;stroke-width:1.5;transition:rotate .25s}.drawn-button span,.drawn-button .arrow-icon{position:relative}.drawn-button:hover .button-outline{rotate:-1deg}.rsvp-note{font-size:.68rem;line-height:1.7;color:var(--soft-ink);max-width:36ch;margin:1rem auto 0}.signature{font-family:var(--script);font-size:2rem;transform:rotate(-5deg);margin:2rem auto 0}
.footer{padding:1rem var(--pad) 2rem;text-align:center}.footer-star{width:24px;height:30px;margin:0 auto 1.2rem}.footer>p{font-family:var(--hand);font-size:1.2rem}.brand{margin-top:2rem;display:flex;flex-direction:column;gap:.4rem}.brand strong{font-size:.8rem;letter-spacing:.01em}.brand span{font-size:.6rem;color:var(--soft-ink);line-height:1.6}.back-top{margin-top:.7rem;font-size:.6rem}.doodle-missing{font-family:var(--hand);font-size:.8rem;border:1px dashed #4a474340;display:grid;place-items:center;text-align:center;padding:.3rem;min-height:50px}
/* Whole letters stay visible; only illustration strokes are drawn progressively. */
.motion-ready .paper{animation:paper-arrive 1s var(--ease) both}.motion-ready .hand-name{animation:name-arrive 1.1s var(--ease) both}.motion-ready .birthday-title{animation:letter-arrive 1s .12s var(--ease) both}.motion-ready .reveal{opacity:0;translate:0 12px;transition:opacity .6s var(--ease),translate .7s var(--ease)}.motion-ready .reveal.is-visible{opacity:1;translate:0 0}.motion-ready .dress.reveal{rotate:-1deg;transition:opacity .6s,translate .7s,rotate .8s}.motion-ready .dress.is-visible{rotate:0deg}.motion-ready .draw-shape{stroke-dasharray:var(--stroke-length);stroke-dashoffset:var(--stroke-length)}.motion-ready .is-drawn .draw-shape{animation:trace 1.9s var(--ease) both;animation-delay:var(--stroke-delay,0ms)}.motion-ready .disco{animation:disco-rock 8s ease-in-out infinite}.motion-ready .cover-star{animation:star-breathe 6s ease-in-out infinite}.motion-ready .scene-flower{translate:0 var(--doodle-shift,0px)}
@keyframes trace{to{stroke-dashoffset:0}}@keyframes paper-arrive{from{opacity:0;rotate:-1.2deg;scale:.985;translate:0 12px}to{opacity:1;rotate:0deg;scale:1;translate:0 0}}@keyframes name-arrive{from{opacity:0;transform:rotate(-8deg) translateX(-9px)}to{opacity:1;transform:rotate(-5deg) translateX(0)}}@keyframes letter-arrive{from{opacity:0;scale:.97;rotate:2deg}to{opacity:1;scale:1;rotate:0deg}}@keyframes disco-rock{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(5deg)}}@keyframes star-breathe{0%,100%{scale:1}50%{scale:.9}}
@media(min-width:600px){body{padding:2rem 1.5rem}.poster{padding-top:2.6rem}.paper{--pad:3.8rem}.birthday-scene{margin-top:2rem;max-width:390px}.cover-date{font-size:.8rem}.scene-caption{font-size:1.4rem}.invitation-phrase{font-size:.75rem;max-width:35ch}.dress{grid-template-columns:minmax(0,1fr) 110px;gap:2rem}.dress-flower{height:180px}.gifts{grid-template-columns:95px minmax(0,1fr);gap:1.5rem}.gift-doodle{height:125px}.gifts .body-copy{font-size:.95rem}}
@media(min-width:1100px){body{padding-block:3rem}.ambient{display:block;position:fixed;width:100px;height:170px;top:35%;opacity:.23;pointer-events:none}.ambient-left{left:calc((100vw - 720px)/4 - 50px);transform:rotate(-14deg)}.ambient-right{right:calc((100vw - 720px)/4 - 50px);transform:rotate(12deg);top:60%}.paper{box-shadow:0 12px 45px #22222216}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.motion-ready .reveal{opacity:1;translate:none;rotate:none}.motion-ready .draw-shape{stroke-dashoffset:0}.motion-ready .scene-flower{translate:none}}