@font-face{font-family:Cormorant;src:url('./assets/fonts/cormorant-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Cormorant;src:url('./assets/fonts/cormorant-italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Manrope;src:url('./assets/fonts/manrope-regular.ttf') format('truetype');font-weight:400;font-display:swap}

:root{
  color-scheme:light;
  --lilac:#eae0f2;--blush:#f7e3ec;--paper:#f8f0f7;--ink:#503b5e;--muted:#75647d;--rose:#a66b8b;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);
  --serif:Cormorant,Georgia,serif;--sans:Manrope,Arial,sans-serif;
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--lilac)}
body{margin:0;color:var(--ink);font:400 16px/1.6 var(--sans);min-height:100svh;-webkit-tap-highlight-color:transparent;overflow-x:clip}
body[data-page="home"][data-scene="opening"]{overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button,svg,img{user-select:none;-webkit-user-drag:none}
button{border:0;background:none}
button:focus-visible{outline:2px solid var(--rose);outline-offset:7px}
button:disabled{cursor:default}
[hidden]{display:none!important}
svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
::selection{background:#d9b9d8;color:var(--ink)}
.atmosphere{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 16% 8%,#e4d9f0 0,transparent 56%),radial-gradient(ellipse at 85% 93%,#f5dbe7 0,transparent 58%),linear-gradient(135deg,#eee5f4,#f9eef3 52%,#f4e4ef)}
.paper-grain{position:absolute;inset:0;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23735a83' opacity='.22' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.site-header{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:max(26px,env(safe-area-inset-top)) 42px;gap:16px}
.wordmark{display:flex;align-items:center;gap:9px;font:italic 25px/1 var(--serif);letter-spacing:-.7px}
.wordmark svg{width:25px;height:29px;stroke-width:1.1}
.header-controls{display:flex;align-items:center;gap:10px}
.icon-button,.sound-button{display:flex;align-items:center;justify-content:center;min-height:44px;transition:background-color 200ms ease,opacity 200ms ease}
.icon-button{width:44px;border-radius:50%;color:var(--muted)}
.icon-button svg{width:17px;height:17px}
.play-icon{display:none}
[data-paused="true"] .pause-icon{display:none}
[data-paused="true"] .play-icon{display:block}
.sound-button{gap:9px;border-radius:40px;background:#fff6;padding:0 17px;font-size:13px;letter-spacing:.01em}
.sound-button svg{width:16px;height:16px;stroke-width:1.4}
[data-sound="true"] .sound-slash{display:none}
.scene{position:relative;min-height:100svh;display:grid;place-items:center;padding:110px 24px 95px;isolation:isolate}
.intro-content,.reveal-content{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:580px;position:relative}
.intro-content{padding-bottom:10px}
.prelude{font-size:13px;letter-spacing:.09em;color:var(--muted);margin:0 0 18px}
.gift-button{position:relative;width:292px;height:292px;padding:0;margin:1px 0 23px;border-radius:50%;isolation:isolate;animation:arrive 1s var(--ease-out) both}
.gift-float{display:block;width:100%;height:100%;animation:float 4.8s ease-in-out infinite;will-change:transform}
.gift-image{display:block;position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 17px 19px #815f8c13);transition:transform 350ms var(--ease-out)}
.gift-shadow{position:absolute;z-index:-1;bottom:0;left:25%;width:50%;height:17px;border-radius:50%;background:#8d6a9b19;filter:blur(11px);animation:shadow-breathe 4.8s ease-in-out infinite}
.gift-aura{position:absolute;inset:-30px;z-index:-2;background:radial-gradient(circle,#fff8 0,#fff1 48%,transparent 68%);border-radius:50%}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.035em;line-height:1.08;margin:0;font-size:clamp(44px,5.1vw,66px)}
h1 em,h2 em{font-weight:400;color:#8f638b}
h1{animation:arrive 1s .1s var(--ease-out) both}
.open-button{display:flex;align-items:center;gap:16px;padding:14px 24px;margin-top:24px;background:#ffffff69;border:1px solid #fff8;border-radius:50px;font-size:13px;min-height:48px;transition:background-color 200ms ease,transform 160ms var(--ease-out);animation:arrive 1s .18s var(--ease-out) both}
.open-button svg{width:18px;height:18px;transition:transform 200ms var(--ease-out)}
.scene-footer{position:absolute;bottom:max(29px,env(safe-area-inset-bottom));left:24px;right:24px;text-align:center;font-size:13px;letter-spacing:.025em;color:var(--muted);margin:0}
.intro .prelude{animation:arrive 1s .05s var(--ease-out) both}
.petals{position:absolute;inset:0;overflow:hidden}
.petal{position:absolute;top:-30px;width:13px;height:18px;border-radius:85% 10% 75% 25%;background:linear-gradient(135deg,#f8d7e6,#d9b9db);opacity:0;animation:petal-drift var(--duration) linear var(--delay) infinite}
.petal:nth-child(3n){width:9px;height:14px;background:linear-gradient(140deg,#fff4f7,#e2cee9)}
.petal:nth-child(4n){filter:blur(1px)}
#flower-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:20;pointer-events:none;display:none}
.skip-button{position:fixed;z-index:30;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);white-space:nowrap;background:#fff9;backdrop-filter:blur(10px);font-size:13px;border-radius:40px;padding:13px 20px;min-height:44px}
.skip-button span{margin-left:12px}
body[data-scene="opening"] .intro-content>.prelude,body[data-scene="opening"] .intro h1,body[data-scene="opening"] .open-button,body[data-scene="opening"] .intro .scene-footer{animation:fade-away 400ms ease both}
body[data-scene="opening"] .gift-float{animation:unwrap 900ms var(--ease-out) both}
body[data-scene="opening"] .gift-shadow{animation:fade-away 500ms ease both}
.reveal{overflow:hidden}
.reveal-content{z-index:2}
.reveal .prelude{margin:0 0 12px}
.couple-keepsake{width:min(360px,78vw);margin:0 0 20px;}
.couple-keepsake img{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 20px #8000001f) drop-shadow(0 2px 6px #ff8c6e1a)}
.reveal h2{font-size:clamp(48px,5.5vw,72px)}
.reveal h2:focus{outline:none}
.reveal-message{font:400 clamp(21px,2vw,25px)/1.5 var(--serif);white-space:pre-line;margin:21px 0 0;color:var(--muted)}
.signature{font:italic 25px/1.4 var(--serif);color:var(--rose);margin:23px 0 0}
.replay-button{font-size:13px;display:flex;align-items:center;gap:9px;min-height:44px;margin-top:25px;padding:10px 18px;border-radius:24px;transition:background-color 180ms ease,color 180ms ease;color:var(--muted)}
.replay-button svg{width:15px;height:15px}
.footer-heart svg{width:17px;height:17px;color:#b98eaf;stroke-width:1.2}
.floral-corner{position:absolute;width:min(225px,40vw);z-index:0;pointer-events:none;opacity:1}
.corner-top{top:-17px;left:-34px}
.corner-bottom{bottom:-24px;right:-32px;transform:rotate(180deg)}
.corner-roses{display:block;width:100%;height:auto;transform-origin:50% 0;animation:corner-sway 7s ease-in-out infinite 1.5s;filter:drop-shadow(8px 10px 14px rgba(50,10,5,.45)) drop-shadow(4px 5px 8px rgba(70,15,8,.35)) drop-shadow(2px 3px 4px rgba(0,0,0,.25)) drop-shadow(0 0 3px rgba(255,190,170,.25))}

body[data-paused="true"] .corner-roses{animation-play-state:paused}
@keyframes corner-sway{0%,100%{transform:rotate(0deg)}30%{transform:rotate(2deg)}70%{transform:rotate(-2deg)}}
body[data-scene="reveal"] .reveal-content>*{animation:arrive 1100ms var(--ease-out) both}
body[data-scene="reveal"] .reveal-content>:nth-child(2){animation-delay:60ms}
body[data-scene="reveal"] .reveal-content>:nth-child(3){animation-delay:120ms}
body[data-scene="reveal"] .reveal-content>:nth-child(4){animation-delay:180ms}
body[data-scene="reveal"] .reveal-content>:nth-child(5){animation-delay:240ms}
body[data-scene="reveal"] .reveal-content>:nth-child(6){animation-delay:300ms}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.noscript-note{position:fixed;bottom:12px;left:20px;right:20px;text-align:center;font-size:14px}
body[data-paused="true"] .petal,body[data-paused="true"] .gift-float,body[data-paused="true"] .gift-shadow{animation-play-state:paused!important}
body[data-paused="true"] .reveal-content>*,body[data-paused="true"] .letter-word{animation:none!important;opacity:1!important}
body[data-paused="true"] .scroll-reveal{transition:none}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(1deg)}}
@keyframes shadow-breathe{0%,100%{transform:scaleX(1);opacity:.8}50%{transform:scaleX(.85);opacity:.5}}
@keyframes arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes fade-away{to{opacity:0}}
@keyframes unwrap{0%{transform:translateY(0) rotate(-2deg);opacity:1}20%{transform:translateY(-5px) rotate(5deg);opacity:1}40%{transform:translateY(-10px) rotate(-5deg);opacity:1}65%{transform:translateY(-22px) rotate(2deg) scale(1.05);opacity:1}100%{transform:translateY(-42px) rotate(0deg) scale(1.08);opacity:0}}
@keyframes petal-drift{0%{transform:translate3d(0,-30px,0) rotate(0deg);opacity:0}10%{opacity:.48}90%{opacity:.35}100%{transform:translate3d(var(--drift),110svh,0) rotate(var(--spin));opacity:0}}
@media(hover:hover) and (pointer:fine){.gift-button:hover .gift-image{transform:scale(1.045) rotate(2deg)}.open-button:hover{background:#fffb}.open-button:hover svg{transform:translateX(4px)}.sound-button:hover,.icon-button:hover,.replay-button:hover{background:#fff8}}
.gift-button:active .gift-image{transform:scale(.97)}.open-button:active{transform:scale(.97)}
@media(min-width:1500px){.gift-button{width:330px;height:330px}.intro-content{padding-bottom:20px}.prelude{margin-bottom:25px}}
@media(max-width:600px){.site-header{padding:22px 22px}.wordmark{font-size:23px}.wordmark svg{width:22px}.header-controls{gap:4px}.sound-button{font-size:13px;padding:0 13px;gap:7px}.icon-button{width:36px}.scene{padding:100px 22px 86px}.gift-button{width:256px;height:256px;margin:6px 0 25px}.prelude{font-size:13px;letter-spacing:.08em;margin-bottom:23px}h1{font-size:49px}.open-button{margin-top:25px}.scene-footer{font-size:13px;bottom:max(28px,env(safe-area-inset-bottom))}.floral-corner{width:165px}.corner-top{left:-29px;top:-14px}.corner-bottom{bottom:-20px;right:-29px;transform:rotate(180deg)}.reveal h2{font-size:52px}.reveal-message{font-size:23px;margin-top:19px}.signature{font-size:24px;margin-top:22px}.replay-button{margin-top:25px}.reveal .prelude{margin-top:9px;margin-bottom:10px}}
@media(max-height:720px){.scene{padding-top:90px;padding-bottom:65px}.gift-button{width:235px;height:235px;margin-bottom:17px}.prelude{margin-bottom:10px}.open-button{margin-top:17px}.reveal h2{font-size:49px}.reveal-message{margin-top:13px}.signature{margin-top:13px}.replay-button{margin-top:12px}.scene-footer{bottom:19px}}
@media(max-height:570px) and (min-width:600px){.scene{padding-top:95px;padding-bottom:65px}.intro-content{display:grid;grid-template-columns:240px 1fr;max-width:700px;column-gap:35px}.gift-button{grid-column:1;grid-row:1/4;margin:0}.intro .prelude{grid-column:2;align-self:end;margin:0 0 15px}.intro h1{grid-column:2;font-size:44px}.open-button{grid-column:2;justify-self:center;align-self:start;margin-top:20px}.reveal-content{padding:15px 0}.reveal-message{margin-top:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.2s!important;animation-delay:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.petals{display:none}.gift-float,.gift-shadow{animation:none!important}.gift-image,.open-button svg{transition:none}.reveal-content>*{animation:fade-in .2s ease!important}body[data-scene="opening"] .gift-float{animation:fade-away .2s ease both!important}.gift-button:hover .gift-image{transform:none}.icon-button{display:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

/* The next chapter: a small secret, memories, and a letter. */
.more-link{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none}
.more-link span{font-size:18px;line-height:1}
.love-quote{min-height:57svh;padding:110px 24px 100px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.little-heart{font:36px var(--serif);color:var(--rose);margin-bottom:25px}
.love-quote p{font:400 clamp(35px,4.4vw,58px)/1.25 var(--serif);letter-spacing:-.025em;margin:0}
.love-quote em{color:var(--rose)}
.letter-gate{text-align:center;min-height:70svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px 24px 110px;scroll-margin-top:30px}
.lock-gift{width:130px;height:155px;position:relative;isolation:isolate;transition:transform 200ms var(--ease-out)}
.lock-gift>svg{width:110px;height:130px;filter:drop-shadow(0 10px 13px #87639020)}
.lock-shackle{stroke:#a787b6;stroke-width:9}
.lock-body{fill:url(#lock-fill);stroke:#c5a5d2;stroke-width:1}
.lock-heart{fill:#f8e5ed;stroke:none}
.lock-halo{position:absolute;inset:0;background:radial-gradient(circle,#fffa,transparent 65%);z-index:-1;transform:scale(1.7)}
.letter-gate h2{font-size:clamp(42px,4.5vw,61px);margin-top:23px}
.letter-gate>p{font:21px/1.5 var(--serif);color:var(--muted);margin:19px 0 0}
.letter-gate .open-button{font-size:13px;margin-top:28px}
.chapter-footer{text-align:center;font:italic 20px/1.5 var(--serif);color:var(--rose);padding:0 20px 45px;margin:0}
.dialog-open{overflow:hidden}
dialog{color:var(--ink);border:1px solid #fffd;background:var(--paper);padding:0;box-shadow:0 24px 100px #4d31552b;max-width:calc(100vw - 36px);max-height:calc(100svh - 36px)}
dialog::backdrop{background:#4a325235;backdrop-filter:blur(9px)}
dialog[open]{animation:dialog-in 250ms var(--ease-out) both}
.dialog-close{position:absolute;right:14px;top:14px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;z-index:2}
.dialog-close svg{width:19px;height:19px}
.passcode-dialog{width:420px;text-align:center;border-radius:28px;padding:45px 42px 28px;background:linear-gradient(150deg,#f6effa,#f9eef3)}
.dialog-lock{width:48px;height:56px;margin:0 auto 19px;color:#a882b3;transition:transform 250ms var(--ease-out)}
.dialog-lock svg{width:100%;height:100%;stroke-width:2}
.passcode-dialog h2{font-size:40px}
.passcode-dialog>p{font-size:13px;color:var(--muted);margin:15px 0 0}
.passcode-input-wrap{position:relative;width:200px;height:46px;margin:22px auto 0;border-radius:10px}
.passcode-input-wrap:focus-within{outline:1px solid #af8fb577;outline-offset:7px}
#passcode-input{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.01;font-size:16px;cursor:text;caret-color:transparent}
.passcode-dots{display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 15px}
.passcode-dots span{width:12px;height:12px;border:1px solid #bca4c5;border-radius:50%;transition:background-color 160ms ease,transform 160ms var(--ease-out)}
.passcode-dots span.filled{background:#a17cad;border-color:#a17cad;transform:scale(1.1)}
.passcode-error{min-height:23px;color:#a36685;font-size:13px;margin:12px -10px 8px}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 6px}
.keypad button{height:58px;border-radius:50%;font:27px var(--serif);transition:background-color 160ms ease,transform 160ms var(--ease-out)}
.keypad button:active{transform:scale(.94);background:#e5d5eb}
.keypad .keypad-small{font:13px var(--sans)}
.keypad svg{width:22px;height:22px;vertical-align:middle}
.passcode-dialog .dialog-bottom{font:italic 16px/1.5 var(--serif);margin-top:22px}
.unlocked .dialog-lock{transform:rotate(-10deg) translateY(-4px);color:#9872a3}
.unlocked .keypad{opacity:.4;pointer-events:none}
.wrong .passcode-input-wrap{animation:shake 300ms var(--ease-out)}
.private-world{padding:115px 35px 0;max-width:1120px;margin:0 auto}
.back-button{display:flex;align-items:center;gap:8px;font-size:13px;min-height:44px;padding:10px 0;color:var(--muted)}
.back-button svg{width:17px;height:17px}
.gallery-heading{text-align:center;padding:45px 20px 65px}
.gallery-heading h1{font-size:clamp(54px,6vw,80px)}
.gallery-heading>p:last-child{font:21px/1.5 var(--serif);color:var(--muted);margin:17px 0 0}
.gallery-heading .prelude{margin-bottom:21px}
.memory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:45px 35px;max-width:960px;margin:0 auto;padding:10px 10px 30px}
.memory-card{margin:0;min-width:0}
.memory-photo{width:100%;background:#fffb;padding:12px 12px 0;transform:rotate(var(--card-rotation));box-shadow:0 7px 16px #634b6710;transition:transform 250ms var(--ease-out),box-shadow 250ms ease}
.memory-image{position:relative;display:block;aspect-ratio:4/4.6;background:var(--photo-bg,#f1dce8);overflow:hidden}
.memory-image img{display:block;width:100%;height:100%;object-fit:cover}
.is-placeholder .memory-image img{object-fit:contain;padding:25px 25px 40px}
.tone-pink{--photo-bg:#f1dce8}.tone-lilac{--photo-bg:#e7dcef}.tone-rose{--photo-bg:#f0d9e3}.tone-cream{--photo-bg:#f1e8e8}.tone-lavender{--photo-bg:#e2daed}.tone-blush{--photo-bg:#f3dee6}
.is-placeholder.tone-lilac img,.is-placeholder.tone-lavender img{filter:hue-rotate(288deg) saturate(.6)}
.is-placeholder.tone-cream img{filter:saturate(.35)}
.is-placeholder.tone-blush img{transform:rotate(35deg)}
.placeholder-label{position:absolute;left:0;right:0;bottom:17px;font:italic 16px var(--serif);color:#896f87}
.memory-caption{display:block;font:italic 23px/1.3 var(--serif);padding:20px 0 21px}
.photo-placeholder-note{text-align:center;font-size:13px;color:var(--muted);padding:20px 15px 0;margin:0}
.letter-section{max-width:720px;margin:120px auto 0;padding:0 20px}
.letter-section>.prelude{text-align:center;margin-bottom:30px}
.letter-paper{position:relative;padding:58px 60px 55px;background:#fffb;transform:rotate(-.8deg);box-shadow:0 8px 50px #67496b09}
.letter-paper:before{content:'';position:absolute;left:42%;top:-13px;width:100px;height:29px;transform:rotate(-6deg);background:#dac5df88;opacity:.8}
.letter-flower{position:absolute;right:33px;top:30px;width:40px;height:44px;color:#b394b6;stroke-width:1}
.letter-paper h2{font-size:41px;font-style:italic;margin:0 0 28px}
#letter-body p{font:22px/1.65 var(--serif);margin:0 0 24px}
.letter-closing{font:italic 24px/1.5 var(--serif);color:var(--rose);margin:32px 0 0}
.letter-signature{font:italic 34px/1.4 var(--serif);color:var(--rose);margin:6px 0 0}
.love-footer{text-align:center;padding:120px 20px 90px;display:flex;flex-direction:column;align-items:center}
.love-footer>span{font:40px var(--serif);color:var(--rose);margin-bottom:30px}
.love-footer h2{font-size:clamp(50px,6vw,75px)}
.love-footer>p{font:20px var(--serif);color:var(--muted);margin:24px 0 0}
.love-footer .replay-button{margin-top:40px}
.photo-dialog{width:min(580px,calc(100vw - 36px));border-radius:8px;padding:55px 25px 20px;text-align:center;background:var(--photo-bg,#f8eef4)}
.photo-dialog>img{max-width:100%;width:100%;height:min(62svh,600px);object-fit:contain;display:block}
.photo-dialog.is-placeholder>img{padding:35px}
#photo-caption{font:italic 27px/1.3 var(--serif);margin:15px 0}
.photo-navigation{display:flex;justify-content:center;align-items:center;gap:35px}
.photo-navigation>button{width:44px;height:44px;border-radius:50%;font-size:25px}
#photo-count{font-size:13px;color:var(--muted)}
.motion-ready .scroll-reveal{opacity:0;transform:translateY(20px);transition:opacity 800ms var(--ease-out),transform 800ms var(--ease-out)}
.motion-ready .scroll-reveal.is-visible{opacity:1;transform:translateY(0)}
.motion-ready .letter-section:not(.is-visible) .letter-word{opacity:.15}
.motion-ready .letter-section.is-visible .letter-word{animation:word-appear 600ms ease var(--word-delay) both}
@keyframes word-appear{from{opacity:.15}to{opacity:1}}
@keyframes dialog-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media(hover:hover) and (pointer:fine){.lock-gift:hover{transform:translateY(-4px) rotate(-4deg)}.keypad button:hover,.dialog-close:hover,.photo-navigation>button:hover{background:#e5d5eb66}.memory-photo:hover{transform:rotate(0deg) translateY(-5px);box-shadow:0 10px 20px #634b671a}}
@media(max-width:700px){.private-world{padding:105px 24px 0}.gallery-heading{padding:35px 0 45px}.gallery-heading>p:last-child{font-size:19px;max-width:275px;margin:17px auto 0}.memory-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:27px 18px;padding:10px 0}.memory-photo{padding:8px 8px 0}.memory-caption{font-size:19px;padding:15px 0 17px}.is-placeholder .memory-image img{padding:16px 12px 30px}.placeholder-label{font-size:13px;bottom:10px}.photo-placeholder-note{font-size:13px;max-width:290px;margin:0 auto;line-height:1.7}.letter-section{margin-top:85px;padding:0 4px}.letter-paper{padding:43px 28px 38px}.letter-paper h2{font-size:35px}.letter-flower{width:30px;right:25px;top:27px}#letter-body p{font-size:20px;line-height:1.65}.letter-closing{font-size:22px}.letter-signature{font-size:30px}.love-footer{padding:90px 0 70px}.love-quote{min-height:50svh;padding:80px 25px}.letter-gate{min-height:70svh;padding:60px 25px 90px}.passcode-dialog{padding:42px 30px 25px;width:365px}.passcode-dialog h2{font-size:37px}.passcode-dialog>p{font-size:13px}.keypad button{height:54px}.dialog-lock{width:42px;height:49px;margin-bottom:16px}}
@media(max-height:660px){.passcode-dialog{padding-top:25px;padding-bottom:20px}.dialog-lock{width:32px;height:37px;margin-bottom:12px}.passcode-dialog h2{font-size:32px}.passcode-dialog>p{margin-top:9px}.passcode-input-wrap{margin-top:12px;height:32px}.passcode-error{margin-top:8px;margin-bottom:4px}.keypad button{height:44px}.passcode-dialog .dialog-bottom{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.motion-ready .scroll-reveal{opacity:1;transform:none;transition:opacity 200ms ease}.letter-word{opacity:1!important;animation:none!important}.memory-photo{transition:none}.wrong .passcode-input-wrap{animation:none}dialog[open]{animation:fade-in .2s ease}.lock-gift:hover{transform:none}.memory-photo:hover{transform:rotate(var(--card-rotation))}}

@media(max-width:600px){.couple-keepsake{width:min(330px,82vw);margin:5px 0 16px}}
@media(max-height:720px){.couple-keepsake{width:min(275px,73vw);margin:0 0 12px}}
@media(prefers-reduced-motion:reduce){.corner-roses{animation:none!important}}

/* Shared navigation stays mounted above every page and the flower curtain. */
:root{--header-height:82px}
html{scroll-padding-top:calc(var(--header-height) + 20px)}
.site-header{position:sticky;top:0;z-index:40;min-height:var(--header-height);padding:12px 36px;display:grid;grid-template-columns:1fr auto 1fr;gap:20px;background:#f5edf5e8;border-bottom:1px solid #fff9;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.header-controls{justify-self:end}
.page-nav{display:flex;align-items:center;gap:6px}
.page-nav a{position:relative;padding:10px 17px;min-height:44px;display:flex;gap:5px;align-items:center;text-decoration:none;color:var(--muted);font-size:13px;white-space:nowrap;border-radius:25px;transition:background-color 160ms ease,color 160ms ease}
.page-nav a[aria-current="page"]{background:#e5d5eb;color:var(--ink)}
a:focus-visible{outline:2px solid var(--rose);outline-offset:4px}
.page-nav a:hover{background:#fff9;color:var(--ink)}
.page-nav a[aria-current="page"]:hover{background:#e5d5eb}
.scene{min-height:calc(100svh - var(--header-height));padding-top:65px}
.content-page{max-width:1120px;margin:0 auto;min-height:calc(100svh - var(--header-height));padding:32px 35px 70px}
.content-page .gallery-heading{padding-top:35px}
.content-page h1{animation:none}
.content-page .chapter-footer{padding-top:70px}
.memory-photo{background:#fff}
.memory-image{aspect-ratio:var(--image-ratio,4/4.6);background:#f5f0f3}
.memory-image img{object-fit:contain}
.memory-grid{align-items:start;row-gap:48px}
.images-gate{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:42svh;padding:10px 20px 60px}
.images-gate .little-heart{margin-bottom:0}
.images-gate>p{font:25px/1.4 var(--serif);color:var(--muted)}
.images-gate .open-button{margin-top:5px}
.coming-page{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-top:65px;padding-bottom:100px}
.coming-page h1{font-size:clamp(48px,6vw,78px)}
.coming-page h1 em{display:block}
.coming-page>p:not(.prelude){font:24px/1.5 var(--serif);color:var(--muted);margin:25px 0}
.chapter-icon{width:64px;height:64px;margin:38px 0 0;color:#b692be;stroke-width:1.2}
.text-link{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:8px 3px;font-size:13px;color:var(--ink);text-decoration:none;border-bottom:1px solid #b99bc088}
#images-flower-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:20;pointer-events:none;display:none}
body:not([data-page="home"]) #flower-canvas,body:not([data-page="home"]) #skip-button,body:not([data-page="images"]) #images-flower-canvas,body:not([data-page="images"]) #images-skip-button{display:none!important}
body[data-page="images"][data-images-state="opening"]{overflow:hidden}
body:not([data-page="home"]) .gift-float,body:not([data-page="home"]) .gift-shadow{animation-play-state:paused}
[data-page-heading]:focus{outline:none}
#page-images .letter-section{margin-top:115px}
@media(max-width:1050px){
 :root{--header-height:124px}
 .site-header{grid-template-columns:1fr auto;padding:8px 20px 10px;gap:3px 12px}
 .wordmark{font-size:22px}
 .wordmark svg{width:22px;height:25px}
 .page-nav{grid-column:1/-1;grid-row:2;justify-content:center;gap:5px;width:100%}
 .page-nav a{padding:9px 14px;font-size:12px;gap:4px}
 .header-controls{grid-column:2;grid-row:1}
 .scene{padding-top:45px}
 .content-page{padding:25px 24px 55px}
 .content-page .gallery-heading{padding:28px 0 40px}
 .private-world{padding-top:35px}
 .memory-grid{row-gap:32px}
 .coming-page{padding:60px 24px 90px}
}
@media(max-width:600px){
 :root{--header-height:160px}
 .page-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
 .page-nav a{justify-content:center;padding:9px 10px;font-size:12px}
}
@media(max-width:370px){.site-header{padding-inline:14px}.memory-caption{font-size:17px}}
@media(max-height:720px){.scene{padding-top:38px}.couple-keepsake{width:min(250px,65vw)}}

/* Video keepsakes: portrait films stay uncropped inside white paper frames. */
.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:46px 30px;max-width:1000px;margin:0 auto;padding:12px 10px 24px}
.video-frame{margin:0;padding:12px 12px 0;min-width:0;background:#fff;box-shadow:0 7px 20px #634b6714;transform:rotate(var(--frame-rotation))}
.video-frame-wide{grid-column:span 2;align-self:center}
.video-media{position:relative;background:#e8ddea;overflow:hidden;isolation:isolate}
.video-media video{display:block;width:100%;height:100%;object-fit:contain}
.video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:#fffefa;color:var(--ink);box-shadow:0 4px 24px #38213c30;border:1px solid #fff;transition:background-color 160ms ease}
.video-play svg{width:23px;height:23px;fill:currentColor;stroke-width:0;margin-left:4px}
.video-play:hover{background:#eadcf0}
.video-play:focus-visible{outline-offset:5px}
.video-caption{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:19px 4px 21px;font:italic 24px/1.3 var(--serif)}
.video-duration{flex:none;font:11px/1.5 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.video-error{font-size:12px;line-height:1.6;color:var(--muted);padding:0 5px 14px;margin:0}
.video-frame:has(video:fullscreen){transform:none}
@media(max-width:950px){.video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 24px}.video-frame-wide{grid-column:1/-1}}
@media(max-width:600px){.video-grid{grid-template-columns:1fr;gap:35px;max-width:390px;padding:10px 5px 20px}.video-frame{padding:10px 10px 0}.video-frame-wide{grid-column:auto}.video-caption{font-size:23px;padding:18px 5px 20px}.video-play{width:60px;height:60px}}
@media(prefers-reduced-motion:reduce){.video-play{transition:none}}

/* A shared act of kindness, kept in the centre of Our Work. */
.our-work-page .gallery-heading{padding-bottom:42px}
.certificate-keepsake{width:100%;max-width:820px;margin:0 auto;text-align:center}
.certificate-frame{display:block;padding:15px 15px 0;background:#fff;color:var(--muted);text-decoration:none;box-shadow:0 9px 34px #634b6714}
.certificate-frame img{display:block;width:100%;height:auto}
.certificate-action{display:flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:12px 10px;font:12px/1.5 var(--sans)}
.certificate-action>span{font-size:17px}
.certificate-frame:hover .certificate-action{color:var(--rose)}
.certificate-keepsake figcaption{margin:23px 0 0;font:italic 22px/1.5 var(--serif);color:var(--muted)}
.work-promise{max-width:660px;margin:65px auto 20px;text-align:center}
.work-promise .little-heart{display:block;margin-bottom:20px}
.work-promise .work-promise-lead{font:34px/1.3 var(--serif);color:var(--ink);margin:0 0 24px;letter-spacing:-.02em}
.work-promise-lead em{color:var(--rose)}
.work-promise>p:last-child{font:23px/1.6 var(--serif);color:var(--muted);margin:0 auto;max-width:575px}
@media(max-width:600px){.our-work-page .gallery-heading{padding-bottom:32px}.certificate-frame{padding:8px 8px 0}.certificate-action{min-height:48px;font-size:11px}.certificate-keepsake figcaption{font-size:19px;margin-top:19px}.work-promise{margin-top:42px}.work-promise .work-promise-lead{font-size:29px}.work-promise>p:last-child{font-size:21px}.work-promise-lead br{display:none}}

/* A portrait picture puzzle with a white keepsake frame. */
.puzzle-page .puzzle-heading{padding:18px 0 36px}
.puzzle-heading h1{font-size:clamp(44px,6vw,68px)}
.puzzle-heading>p:last-child{margin-top:12px;font-size:23px}
.puzzle-layout{display:grid;grid-template-columns:minmax(0,420px) minmax(0,280px);justify-content:center;align-items:center;gap:58px}
.puzzle-frame{padding:12px 12px 0;background:#fff;box-shadow:0 9px 34px #634b6718;min-width:0}
.puzzle-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));aspect-ratio:3/4;width:100%;background:#dfcde4;isolation:isolate}
.puzzle-tile,.puzzle-drag-piece{background-size:400% 400%;background-repeat:no-repeat;border-radius:0}
.puzzle-tile{position:relative;display:block;width:100%;height:100%;min-width:0;min-height:0;padding:0;border:0;box-shadow:inset 0 0 0 1px #fffc;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab;transition:none}
.puzzle-tile:focus-visible,.puzzle-tile.is-selected{outline:3px solid #804e95;outline-offset:-4px;z-index:1}
.puzzle-tile.is-selected:after{content:'♡';position:absolute;right:5px;top:5px;display:grid;place-items:center;width:23px;height:23px;background:#fff;color:#804e95;border-radius:50%;font:20px/1 var(--serif)}
.puzzle-tile.is-dragging{opacity:.3;cursor:grabbing}
.puzzle-tile.is-drop-target{outline:4px solid #d591b6;outline-offset:-4px;z-index:1}
.puzzle-board.is-complete .puzzle-tile{box-shadow:none;cursor:default;opacity:1}
.puzzle-drag-piece{position:fixed;z-index:100;pointer-events:none;box-shadow:0 8px 24px #37233b45;outline:2px solid #fff;will-change:transform}
.puzzle-frame-caption{margin:0;padding:17px 4px 20px;text-align:center;font:italic 22px/1.3 var(--serif);color:var(--muted)}
.puzzle-loading{aspect-ratio:3/4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin:0;background:#f6eff7;color:var(--muted);font-size:14px}
.puzzle-eyebrow{font-size:10px;letter-spacing:.14em;color:var(--rose);margin:0 0 15px}
.puzzle-sidebar h2{font:38px/1.12 var(--serif);letter-spacing:-.025em;margin:0 0 20px;font-weight:400}
.puzzle-sidebar h2 em{color:var(--rose);font-weight:400}
#puzzle-instructions{font-size:13px;line-height:1.9;color:var(--muted);margin:0 0 25px}
.puzzle-stats{display:flex;gap:40px;border-block:1px solid #a985b328;padding:17px 0;margin:0 0 24px}
.puzzle-stats dt{font-size:11px;color:var(--muted);margin-bottom:5px}
.puzzle-stats dd{font:30px/1.1 var(--serif);font-variant-numeric:tabular-nums;margin:0}
.puzzle-actions{display:grid;gap:10px}
.puzzle-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 20px;border:1px solid #b994c04d;border-radius:25px;color:var(--ink);background:#fff6;font:12px/1.5 var(--sans);transition:background-color 150ms ease}
.puzzle-button:hover{background:#fffb}
.puzzle-button-primary{background:#e3cde9;border-color:#e3cde9}
.puzzle-button-primary:hover{background:#d9bfe1}
.puzzle-button:disabled{opacity:.5;cursor:wait}
.puzzle-status{min-height:42px;margin:18px 0 0;font-size:12px;line-height:1.75;color:var(--muted)}
.puzzle-keyboard,.puzzle-save-note{font-size:10px;line-height:1.8;color:var(--muted);margin:10px 0 0}
.puzzle-save-note{font-style:italic}
.puzzle-complete{margin:23px 0 0;padding:20px 15px;text-align:center;background:#fff7;border-radius:10px}
.puzzle-complete>span{font:30px/1 var(--serif);color:var(--rose)}
.puzzle-complete h3{font:30px/1.2 var(--serif);margin:8px 0}
.puzzle-complete p{font-size:12px;line-height:1.7;margin:0;color:var(--muted)}
.puzzle-picture-dialog{width:min(440px,calc(100vw - 32px));padding:25px 22px 20px;text-align:center;max-height:calc(100svh - 32px);overflow:auto}
.puzzle-picture-dialog h2{font:30px/1.2 var(--serif);margin:5px 20px 18px}
.puzzle-picture-dialog img{display:block;width:auto;max-width:100%;height:auto;max-height:calc(100svh - 205px);margin:0 auto;object-fit:contain}
.puzzle-picture-dialog>.puzzle-button{margin-top:18px}
@media(max-width:760px){.puzzle-layout{grid-template-columns:minmax(0,420px);gap:28px}.puzzle-sidebar{display:contents}.puzzle-eyebrow,.puzzle-sidebar h2,.puzzle-keyboard{display:none}#puzzle-instructions{grid-row:1;margin:0;text-align:center;max-width:345px;justify-self:center}.puzzle-frame{grid-row:3}.puzzle-stats{grid-row:2;justify-content:center;border:0;padding:0;margin:0;text-align:center;gap:65px}.puzzle-actions{grid-row:4;grid-template-columns:1fr 1fr;gap:10px}.puzzle-button{padding-inline:10px}.puzzle-status{min-height:0;margin:0;text-align:center}.puzzle-save-note{margin:-15px 0 0;text-align:center}.puzzle-complete{margin:0}.puzzle-page .puzzle-heading{padding:15px 0 24px}.puzzle-heading>p:last-child{font-size:21px;max-width:300px}.puzzle-frame-caption{font-size:21px}.puzzle-frame{padding:9px 9px 0}}
@media(prefers-reduced-motion:reduce){.puzzle-button{transition:none}}

/* Keep the animation control distinct from the song, and the long letter readable. */
#motion-toggle{width:auto;padding:0 11px;gap:6px;border-radius:24px;font-size:11px}
.letter-paper{transform:none}
#letter-body p{white-space:pre-line}
.letter-paper strong{font-weight:600}

/* The Onyet film stays centred and uncropped, with explicit fullscreen access. */
.onyet-page .gallery-heading{padding-bottom:36px}
.onyet-video{max-width:920px;margin:0 auto}
.onyet-video .video-frame{transform:none}
.onyet-video .video-caption{justify-content:flex-start;flex-wrap:wrap}
.onyet-video .video-duration{margin-left:6px}
.video-fullscreen{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 13px;border-radius:24px;background:#eee3f2;color:var(--ink);font:12px/1.5 var(--sans)}
.video-fullscreen svg{width:17px;height:17px;stroke-width:1.5}
.video-fullscreen:hover{background:#e2ceeb}
.onyet-video video:fullscreen{width:100%;height:100%;object-fit:contain;background:#000}
@media(max-width:600px){.onyet-page .gallery-heading{padding-bottom:26px}.onyet-video .video-caption{gap:9px;padding:12px 2px}.video-fullscreen{font-size:11px;padding-inline:10px}}