:root{--paper:#fffaf5;--pink:#faeeee;--rose:#eed3d9;--ink:#663047;--muted:#86636e;--accent:#913f59;--line:#d9acb8;--serif:'Cormorant Garamond',Georgia,serif;--sans:'DM Sans',Arial,sans-serif;--script:'Parisienne',cursive}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px}body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--sans);font-size:16px;line-height:1.6}body.cover-on{overflow:hidden}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.06}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:6px}button{color:inherit}[hidden]{display:none!important}.eyebrow{text-transform:uppercase;letter-spacing:.19em;font-size:.75rem;font-weight:500;color:var(--muted);line-height:1.8}.script{font-family:var(--script);font-weight:400}.and{display:block;font:italic .55em var(--serif);line-height:.9;margin:9px 0;color:#ac6e80}.floating-hearts{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:8}.floating-hearts span{position:absolute;bottom:-10%;font:24px Georgia,serif;color:#c08399;opacity:0;animation:drift 18s linear infinite}.floating-hearts span:nth-child(1){left:5%;animation-delay:-4s}.floating-hearts span:nth-child(2){left:16%;animation-delay:-12s;font-size:11px}.floating-hearts span:nth-child(3){left:29%;animation-delay:-7s}.floating-hearts span:nth-child(4){left:44%;animation-delay:-16s;font-size:14px}.floating-hearts span:nth-child(5){left:57%;animation-delay:-2s;font-size:10px}.floating-hearts span:nth-child(6){left:66%;animation-delay:-9s}.floating-hearts span:nth-child(7){left:78%;animation-delay:-14s;font-size:13px}.floating-hearts span:nth-child(8){left:91%;animation-delay:-5s}.floating-hearts span:nth-child(9){left:37%;animation-delay:-18s;font-size:15px}.floating-hearts span:nth-child(10){left:85%;animation-delay:-20s;font-size:12px}@keyframes drift{0%{transform:translate3d(0,0,0) rotate(-15deg);opacity:0}15%,75%{opacity:.28}100%{transform:translate3d(28px,-115vh,0) rotate(18deg);opacity:0}}
.cover{position:fixed;inset:0;z-index:20;background:radial-gradient(ellipse at 15% 15%,#f0d3da 0,transparent 48%),radial-gradient(ellipse at 90% 80%,#f3dde0,transparent 50%),#faf0ed;text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:45px 24px;overflow-y:auto;transition:opacity .85s ease,visibility .85s}.cover:before{content:'';position:absolute;inset:15px;border:1px solid #d8afb958;pointer-events:none}.cover-top{margin-bottom:33px;font-size:.7rem;letter-spacing:.22em}.letter{position:relative;background:var(--paper);width:min(510px,100%);padding:43px 24px 60px;border:1px solid #dec5bc;box-shadow:0 25px 75px #70384714,7px 7px 0 #f4e7df,8px 8px 0 #dbc5be;transform:rotate(-2deg);transition:transform 1s cubic-bezier(.22,1,.36,1),opacity .75s}.letter:before{content:'';position:absolute;inset:12px;border:1px solid #d9acb84d;pointer-events:none}.stamp{position:absolute;right:23px;top:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:35px;height:52px;border:1px dashed var(--line);font-family:var(--serif);font-size:15px;line-height:1}.stamp span{font-size:12px;margin:2px}.salutation{font-size:2.6rem;margin-bottom:20px;color:#a26077}.letter h1{font-size:clamp(2.8rem,5.5vw,4rem);margin-top:17px;letter-spacing:-.025em}.letter-date{font-size:.7rem;letter-spacing:.21em;margin-top:30px}.seal{width:70px;height:70px;background:var(--accent);border:4px double #c9899e;border-radius:50%;box-shadow:0 4px 0 #6e2d45,0 8px 14px #57203626;position:absolute;bottom:-32px;left:calc(50% - 35px);color:#ffe7e8;font-size:28px;display:grid;place-items:center;animation:seal-pulse 3s ease-in-out infinite;transition:transform .2s}.seal:hover{transform:scale(1.1)}@keyframes seal-pulse{50%{box-shadow:0 4px 0 #6e2d45,0 0 0 10px #913f5909}}.open-label{margin-top:57px;background:none;border:0;letter-spacing:.13em;text-transform:uppercase;font-size:.8rem;padding:12px 20px}.open-label span{color:#b8778c;margin-left:10px}.cover-note{font:italic 1.15rem var(--serif);color:var(--muted);margin-top:2px}.cover.opening{opacity:0;pointer-events:none}.cover.opening .letter{transform:translateY(-70px) rotate(4deg) scale(1.06);opacity:0}.cover.opening .seal{animation:none;transform:scale(1.4) rotate(20deg)}
header{height:76px;padding:0 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dab7c035;gap:12px;background:var(--pink)}.logo{font-family:var(--serif);font-size:29px;letter-spacing:3px;text-decoration:none}.logo span{font-style:italic;font-size:.7em;color:#b7798b;margin:0 3px}header>p{font-size:.75rem;letter-spacing:.16em;color:var(--muted)}.motion-control{font-size:.75rem;background:none;border:0;border-bottom:1px solid var(--line);padding:8px 0;color:var(--muted)}.hero{position:relative;isolation:isolate;text-align:center;background:radial-gradient(ellipse at 50% 60%,#fffaf5 5%,transparent 65%),var(--pink);padding:66px 24px 45px;overflow:hidden}.hero:after{content:'';position:absolute;inset:18px;border:1px solid #d9acb842;border-radius:160px 160px 14px 14px;z-index:-1}.prelude{font-size:2.4rem;color:#b8798f;margin:24px 0 12px}.hero h2{font-size:clamp(3.2rem,6vw,5.7rem);letter-spacing:-.025em}.honour{font:italic 1.35rem var(--serif);color:var(--muted);margin-top:24px}.hands-wrap{position:relative;width:min(570px,100%);height:265px;margin:-8px auto -4px}.hands{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 12px #913f5908);opacity:0}.is-open .hands{animation:hands-arrive 1.8s .55s cubic-bezier(.22,1,.36,1) forwards}.hands-halo{position:absolute;inset:20% 20%;background:#efd3d53d;border-radius:50%;filter:blur(25px)}@keyframes hands-arrive{from{opacity:0;transform:translateY(25px) scale(.91)}to{opacity:1;transform:translateY(0) scale(1)}}.hand-heart{position:absolute;left:50%;top:30%;color:#b46784;font-size:18px;opacity:0}.is-open .hand-heart{animation:hand-love 3s 1.8s ease-out infinite}@keyframes hand-love{0%{opacity:0;transform:translate(-50%,15px) scale(.5)}20%{opacity:.65}100%{opacity:0;transform:translate(-50%,-50px) scale(1.2)}}.hero-date{font:2rem var(--serif);letter-spacing:.16em}.hero-date span{color:#c28b9b;margin:0 8px}.hero-time{font-size:.875rem;color:var(--muted);margin-top:6px}.scroll{display:block;margin:28px auto 0;font-size:.7rem;color:var(--muted);letter-spacing:.06em;text-decoration:none}.scroll span{display:block;font-size:24px;line-height:1.3;color:#b6788d;animation:nudge 2s ease-in-out infinite}@keyframes nudge{50%{transform:translateY(4px)}}
.count-section{text-align:center;padding:84px 24px 90px;position:relative}.tiny-heart{font:3rem Georgia,serif;color:#c28499;line-height:1;margin-bottom:22px}.count-section h2{font-size:3.3rem;line-height:1.25;margin-top:18px}.count-section h2 .script{font-size:1.4em;color:#a45170}.countdown{display:flex;justify-content:center;gap:24px;margin:40px auto 30px}.countdown>div{width:116px;height:132px;border:1px solid #e2c2cb;border-radius:58px 58px 18px 18px;background:linear-gradient(155deg,#fffaf5,#fbf0f0);display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative}.countdown>div:nth-child(even){transform:translateY(12px)}.countdown strong{font:3.4rem var(--serif);font-variant-numeric:tabular-nums;line-height:1.1}.countdown span{font-size:.72rem;text-transform:uppercase;letter-spacing:.15em;margin-top:9px}.count-section>p:last-child{font-size:.8rem;color:var(--muted);margin-top:37px}
.day-section{max-width:1080px;margin:auto;padding:80px 45px 115px;display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.day-copy h2{font-size:4.3rem;margin:20px 0 26px}.day-copy em{font-weight:400;color:#a45170}.day-copy>p:not(.eyebrow){font-size:1rem;color:var(--muted);line-height:1.9}.day-copy>.script{display:block;font-size:2rem;margin-top:24px;color:#a45170}.event-card{position:relative;background:#fffdf9;border:1px solid #e1c3ca;box-shadow:12px 12px 0 #f4e6e7;transform:rotate(2deg);padding:50px 28px 40px;text-align:center}.event-card:before{content:'';position:absolute;inset:10px;border:1px solid #ead5d7;pointer-events:none}.card-pin{display:block;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--pink);font:30px Georgia,serif;line-height:44px;position:absolute;left:calc(50% - 23px);top:-24px;color:#b7788c}.date-number{font:6rem var(--serif);line-height:1.1;margin-top:15px}.date-month{font:1.55rem var(--serif)}.event-rule{width:50px;height:1px;margin:20px auto;background:var(--line)}.event-time{font-size:.8rem;color:var(--muted)}.event-card h3{font-size:2.5rem;margin-top:24px}.place{color:var(--muted);font-size:.9rem;margin-top:6px}.button{display:inline-flex;gap:10px;align-items:center;justify-content:center;border-radius:100px;background:var(--accent);padding:15px 26px;color:#fff8f4;text-decoration:none;font-size:.875rem;transition:transform .25s,background .25s;min-height:52px;margin-top:28px}.button:hover{background:#713047;transform:translateY(-3px)}.button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.4}.closing{background:radial-gradient(ellipse at 50% 10%,#f8e7e8,transparent 65%),#efd8df;text-align:center;padding:60px 24px 45px}.closing-spark{font-size:35px;color:#b46d87;margin-bottom:18px}.closing h2{font-size:clamp(2.8rem,5vw,4.4rem);line-height:1.15;margin-top:27px}.closing h2 em{color:#974763;font-weight:400}.love-button{width:60px;height:60px;border:1px solid #c993a5;border-radius:50%;background:#ffffff30;font:32px Georgia,serif;color:#913f59;margin:32px auto 22px;transition:transform .2s,background .2s}.love-button:hover{transform:scale(1.12);background:#fff8f5}.signoff{font-size:2.1rem}.footer-date{font-size:.72rem;letter-spacing:.2em;margin-top:15px;color:var(--muted)}.replay{display:block;margin:36px auto 0;border:0;background:none;text-decoration:underline;text-underline-offset:5px;color:var(--muted);font-size:.75rem;padding:10px}.burst{position:fixed;z-index:25;pointer-events:none;font-family:Georgia,serif;color:var(--color,#b46784);animation:pop-heart 1.9s ease-out forwards}@keyframes pop-heart{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}15%{opacity:.9}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r)) scale(1.2)}}.reveal{transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1)}.js-motion .reveal:not(.visible){opacity:0;transform:translateY(24px)}.paused *,.paused *:before,.paused *:after{animation-play-state:paused!important}.paused .floating-hearts,.paused .burst,.paused .hand-heart{display:none}.paused .hands{opacity:1;transform:none}.paused .reveal{opacity:1!important;transform:none!important}.fallback{position:relative;z-index:40;background:var(--paper);padding:30px}
@media(max-width:700px){.cover{padding:45px 30px}.cover-top{font-size:.65rem;letter-spacing:.13em;max-width:270px;margin-bottom:28px}.letter{padding:43px 18px 52px}.letter h1{font-size:clamp(2.35rem,9vw,3.5rem)}.salutation{font-size:2.2rem}.stamp{right:17px;top:18px;width:28px;height:43px;font-size:13px}.letter .eyebrow{font-size:.66rem}.letter-date{font-size:.65rem;letter-spacing:.15em}.seal{width:62px;height:62px;left:calc(50% - 31px);bottom:-29px}.open-label{margin-top:44px}.cover-note{font-size:1rem}header{height:66px;padding:0 6%}.logo{font-size:25px}header>p{font-size:.65rem;letter-spacing:.1em}.motion-control{font-size:.65rem}.hero{padding:68px 24px 43px}.hero:after{inset:13px;border-radius:140px 140px 12px 12px}.hero>.eyebrow{font-size:.65rem;letter-spacing:.13em;max-width:230px;margin:auto}.prelude{font-size:1.9rem;margin-top:24px}.hero h2{font-size:clamp(2.5rem,10vw,4rem)}.honour{font-size:1.15rem;margin-top:23px}.hands-wrap{height:195px;margin:0 auto}.hero-date{font-size:1.65rem}.hero-date span{margin:0 3px}.hero-time{font-size:.8rem}.scroll{font-size:.65rem;max-width:235px}.count-section{padding:65px 18px 60px}.count-section .eyebrow{font-size:.65rem;letter-spacing:.12em}.count-section h2{font-size:2.8rem}.countdown{gap:10px;margin-top:28px}.countdown>div{width:75px;height:106px;border-radius:42px 42px 14px 14px}.countdown strong{font-size:2.7rem}.countdown span{font-size:.62rem;letter-spacing:.05em}.count-section>p:last-child{max-width:270px;margin:32px auto 0;font-size:.75rem}.day-section{grid-template-columns:1fr;gap:48px;padding:40px 32px 80px}.day-copy{text-align:center}.day-copy .eyebrow{font-size:.65rem}.day-copy h2{font-size:3.4rem}.day-copy>.script{font-size:1.85rem}.event-card{max-width:360px;width:100%;margin:auto}.event-card h3{font-size:2.3rem}.closing{padding:50px 24px 35px}.closing .eyebrow{font-size:.65rem;letter-spacing:.12em}.closing h2{font-size:2.7rem}.closing h2>br{display:none}.signoff{font-size:1.8rem}}
@media(max-height:700px){.cover{padding-top:25px;padding-bottom:25px}.cover-top{margin-bottom:15px}.letter{padding-top:30px;padding-bottom:43px}.salutation{margin-bottom:12px;font-size:2rem}.letter h1{font-size:2.75rem}.letter-date{margin-top:20px}.open-label{margin-top:38px}.cover-note{font-size:1rem}}@media(max-height:580px){.cover{justify-content:flex-start}.cover-on{overflow:auto!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.hands{opacity:1}.floating-hearts,.burst,.hand-heart{display:none}.js-motion .reveal:not(.visible){opacity:1;transform:none}}
.hands{mask-image:linear-gradient(to right,transparent,black 12%,black 88%,transparent)}
.hands-wrap{margin-top:12px}
/* A compact, responsive invitation with layered interactive motion. */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;background:#a84e70;transform:scaleX(var(--read,0));transform-origin:left;z-index:40;pointer-events:none}
.hero{padding:44px 38px 30px}.prelude{margin:12px 0 8px}.honour{margin-top:16px}.scroll{margin-top:16px}
.hands-wrap{display:block;border:0;background:none;color:inherit;padding:0;perspective:800px;isolation:isolate;cursor:pointer;touch-action:pan-y;height:225px;margin:4px auto 20px}
.hands-float{display:block;width:100%;height:100%;animation:hand-sway 5s ease-in-out infinite;transform-origin:center}
.is-open .hands{opacity:1;animation:none;transform:translate3d(var(--hand-x,0px),var(--hand-y,0px),0) rotate(var(--hand-turn,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .5s;will-change:transform}
.is-open .hands-wrap{animation:hand-intro 1.4s .35s both}
.hands-wrap:hover .hands{filter:drop-shadow(0 15px 18px #913f5930)}
.hands-wrap.celebrating .hands-float{animation:hand-squeeze .85s ease-in-out}
.hands-halo{animation:halo-breathe 4s ease-in-out infinite;inset:20% 12%;background:#e6a9bc55;z-index:-1}
.hands-hint{display:block;position:absolute;bottom:-8px;left:0;right:0;font-size:.75rem;letter-spacing:.07em;color:#91556b}.hands-hint span{display:inline-block;animation:heart-beat 1.6s infinite;margin-left:5px}
@keyframes hand-sway{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-12px) rotate(1.5deg)}}
@keyframes hand-squeeze{0%,100%{transform:scale(1)}35%{transform:scale(1.07) rotate(-2deg)}65%{transform:scale(1.02) rotate(2deg)}}
@keyframes halo-breathe{50%{transform:scale(1.2);opacity:.45}}
@keyframes hand-intro{from{opacity:0;transform:translateY(35px) scale(.85)}to{opacity:1;transform:none}}
@keyframes heart-beat{35%{transform:scale(1.3)}55%{transform:scale(1)}75%{transform:scale(1.15)}}
.count-section{padding:44px 24px}.tiny-heart{margin-bottom:12px;font-size:2.3rem}.count-section h2{font-size:2.8rem;margin-top:10px}.countdown{margin:24px auto 20px;gap:18px}.count-section>p:last-child{margin-top:25px}
.day-section{padding:42px 38px 58px;gap:48px}.day-copy h2{font-size:3.6rem;margin:16px 0}.day-copy>.script{margin-top:15px}.event-card{padding:34px 25px 28px}.date-number{font-size:4.7rem;margin-top:8px}.event-rule{margin:14px auto}.event-card h3{margin-top:18px}.button{margin-top:20px}.closing{padding:38px 24px 26px}.closing h2{font-size:clamp(2.4rem,4vw,3.5rem);margin-top:16px}.closing-spark{margin-bottom:10px}.love-button{margin:20px auto 14px}.replay{margin-top:22px}
.reveal{transition:opacity .7s,transform .9s cubic-bezier(.2,.8,.2,1)}.js-motion .reveal:not(.visible){transform:translateY(45px) scale(.97)}
.countdown>div,.day-copy,.event-card,.closing h2,.closing .signoff{transition:opacity .8s,translate .9s cubic-bezier(.2,.8,.2,1),rotate .9s}
.reveal:not(.visible) .countdown>div{opacity:0;translate:0 45px;rotate:-6deg}.visible .countdown>div:nth-child(2){transition-delay:.1s}.visible .countdown>div:nth-child(3){transition-delay:.2s}.visible .countdown>div:nth-child(4){transition-delay:.3s}
.reveal:not(.visible) .day-copy{opacity:0;translate:-35px 0}.reveal:not(.visible) .event-card{opacity:0;translate:35px 35px;rotate:7deg}.visible .event-card{transition-delay:.15s}
.countdown strong.digit-change{animation:digit-pop .45s ease-out}@keyframes digit-pop{from{opacity:.4;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
@media(min-width:900px){.hero{display:grid;grid-template-columns:1.1fr 1fr;column-gap:20px;align-items:center;padding:52px max(5%,calc((100vw - 1200px)/2)) 40px;text-align:center}.hero>*{grid-column:1}.hero>.hands-wrap{grid-column:2;grid-row:1/9;width:100%;height:350px;margin:0;align-self:center}.hero h2{font-size:clamp(3.2rem,4.6vw,4.6rem)}.hero:after{border-radius:28px}.prelude{font-size:2.1rem}.hero-date{margin-top:18px}.hero .eyebrow{margin:0}.hands-hint{bottom:0}}
@media(max-width:700px){.hero{padding:47px 22px 24px}.hero:after{border-radius:100px 100px 14px 14px}.prelude{font-size:1.65rem;margin:13px 0 8px}.hero h2{font-size:clamp(2.25rem,9vw,3.2rem)}.and{margin:6px 0}.honour{font-size:1.05rem;margin-top:15px}.hands-wrap{height:175px;width:min(360px,100%);margin:4px auto 19px}.hands-hint{font-size:.7rem;bottom:-9px}.hero-date{font-size:1.45rem}.hero-time{font-size:.75rem}.scroll{margin-top:14px}.count-section{padding:32px 18px}.count-section h2{font-size:2.35rem}.countdown{gap:10px;margin:20px auto}.countdown>div{width:72px;height:92px}.countdown strong{font-size:2.4rem}.countdown span{margin-top:5px}.tiny-heart{font-size:2rem;margin-bottom:10px}.day-section{padding:22px 26px 42px;gap:35px}.day-copy h2{font-size:2.8rem;margin:13px 0}.day-copy h2 br{display:none}.day-copy>p:not(.eyebrow){font-size:.9rem}.day-copy>.script{font-size:1.6rem;margin-top:12px}.event-card{padding:30px 24px 24px}.date-number{font-size:4rem}.event-card h3{font-size:2.1rem}.closing{padding:30px 24px 24px}.closing h2{font-size:2.3rem}.signoff{font-size:1.7rem}.love-button{width:52px;height:52px}.cover{padding-left:28px;padding-right:28px}}
.paused .hands-float,.paused .hands,.paused .hands-wrap,.paused .hands-halo{animation:none!important;transform:none!important}.paused .reveal *{opacity:1!important;translate:none!important;rotate:none!important}
@media(prefers-reduced-motion:reduce){.hands-float,.is-open .hands,.is-open .hands-wrap{animation:none!important;transform:none!important;opacity:1}.reveal *{opacity:1!important;translate:none!important;rotate:none!important}.scroll-progress{display:none}}
.count-section .tiny-heart,.closing-spark{transform:translateY(var(--scroll-shift,0px)) rotate(calc(var(--read,0)*40deg));transition:transform .15s linear}.paused .tiny-heart,.paused .closing-spark{transform:none}
html,body{overflow-x:clip}.hands-wrap{margin-top:18px}.day-section{overflow:clip}@media(max-width:700px){.hands-wrap{margin-top:18px}.event-card{max-width:calc(100% - 10px)}}