@import url('assets/fonts/fonts.css');
:root{--bg:#171413;--cream:#eee4d7;--muted:#a99e94;--gold:#c5a782;--line:#ffffff20;--serif:'Cormorant Garamond',Georgia,serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:82px}body{margin:0;background:var(--bg);color:var(--cream);font:14px/1.8 'Manrope',sans-serif;-webkit-font-smoothing:antialiased}body:before{content:'';position:fixed;inset:0;pointer-events:none;z-index:10;opacity:.035;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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:7px}.skip{position:fixed;top:-80px;z-index:99;background:var(--cream);color:var(--bg);padding:12px}.skip:focus{top:12px}header{height:102px;margin:0 5.3%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:2}.wordmark{font-size:17px;letter-spacing:4px;line-height:1.5}.wordmark span{display:block;font-size:8px;letter-spacing:3px;color:var(--muted);margin-top:6px}.header-date{font-size:9px;letter-spacing:2.4px;color:var(--muted)}i{font-style:normal}header i{margin:0 20px;color:var(--gold)}.hero{min-height:780px;min-height:calc(100svh - 102px);position:relative;padding:62px 9% 100px;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:6%;overflow:hidden;background:radial-gradient(ellipse at 85% 40%,#4b1f2559,transparent 55%)}.eyebrow{font-size:9px;font-weight:500;letter-spacing:2.6px;color:var(--gold);display:block}.hero .eyebrow{display:flex;align-items:center;gap:12px}.eyebrow>span{display:inline-block;width:24px;height:1px;background:var(--gold)}h1,h2{font-family:var(--serif);font-weight:400;line-height:1.05;letter-spacing:-1.8px}h1{font-size:clamp(64px,6.4vw,100px);margin:30px 0 24px}em{font-weight:400;color:var(--gold)}.hero-copy>p{color:var(--muted);font-size:13px;line-height:1.9}.pill{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;background:var(--cream);color:#29211c;border-radius:40px;padding:16px 23px;font-size:11px;margin-top:25px;transition:background .3s,transform .3s}.pill:hover{background:var(--gold);transform:translateY(-3px)}.pill span{font-size:20px;line-height:1}.duration{display:block;font-size:8px;letter-spacing:2px;color:#867c73;margin:16px 0 0 14px}.hero-art{height:540px;position:relative;max-width:450px;width:100%;justify-self:center}.arch{position:absolute;inset:15px 20px 20px 15px;border-radius:48% 48% 1px 1px;overflow:hidden;margin:0;background:#443b33}.arch:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#160f13a6,transparent 45%)}img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.22) brightness(.82)}.arch img{object-position:50% 50%}.arch figcaption{position:absolute;z-index:1;bottom:25px;width:100%;text-align:center;font-family:var(--serif);font-style:italic;font-size:22px;color:#efe4d3}.orbit{position:absolute;inset:0 6px 7px 0;border:1px solid #b6987050;border-radius:48% 48% 0 0;transform:rotate(7deg)}.date-stamp{position:absolute;bottom:70px;left:-48px;width:111px;height:111px;background:#58242c;border:1px solid #a577624a;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:var(--serif);font-size:49px;line-height:1;box-shadow:0 10px 50px #0003}.date-stamp span{font:8px 'Manrope',sans-serif;letter-spacing:2px;margin-top:9px}.vertical{position:absolute;right:-35px;top:160px;writing-mode:vertical-rl;font-size:8px;letter-spacing:2.5px;color:var(--muted)}.star{position:absolute;color:var(--gold);z-index:2}.star-one{right:6px;top:-20px;font-size:46px}.star-two{left:-22px;bottom:25px;font-size:33px}.hero-bottom{position:absolute;bottom:25px;left:5.3%;right:5.3%;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:23px;font-size:8px;letter-spacing:2px;color:var(--muted)}.hero-bottom a span{padding-left:20px;font-size:15px}.scene{min-height:90svh;padding:130px 9%;scroll-margin-top:0}.intro{text-align:center;background:radial-gradient(ellipse at 50% 40%,#38232055,transparent 65%)}.ornament{display:block;font-size:40px;color:var(--gold);margin-top:35px}h2{font-size:clamp(45px,5vw,74px);margin:25px 0 30px}.prose{max-width:480px;margin:auto;color:var(--muted);font-size:14px}.prose p{margin:24px 0}.text-link{display:inline-block;font-size:10px;letter-spacing:1px;border-bottom:1px solid #c5a78266;padding:12px 0;margin-top:25px;color:var(--gold)}.text-link span{margin-left:30px}.moments{display:grid;grid-template-columns:1fr 1fr;gap:12%;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.moment-photo{position:relative;height:560px;max-width:420px}.oval{margin:0;height:100%;overflow:hidden;border-radius:50%}.photo-outline{position:absolute;inset:12px -15px;border:1px solid #c5a78260;border-radius:50%;transform:rotate(-10deg)}.photo-note{position:absolute;bottom:20px;right:-30px;font:italic 27px var(--serif);transform:rotate(-8deg)}.moment-copy>p{color:var(--muted)}.moment-copy h2{font-size:clamp(42px,4.6vw,66px)}.memories{margin-top:30px}.memories button{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:18px 0;font:25px var(--serif);display:flex;align-items:center;gap:20px}.memories button>span{font:9px 'Manrope';color:var(--gold)}.memories i{margin-left:auto;color:var(--gold);font-size:22px}.memories p{font-size:13px;color:var(--muted);padding:5px 0 12px 32px}.secret{position:relative;text-align:center;background:radial-gradient(ellipse at 50% 50%,#59242c85,transparent 65%);overflow:hidden}.secret p{color:var(--muted)}.wish{display:block;border:1px solid #c5a78266;background:#42232880;width:100px;height:100px;border-radius:50%;margin:35px auto 15px;transition:transform .6s,box-shadow .6s}.wish span{font:55px var(--serif);color:var(--gold)}.wish:hover{transform:scale(1.08);box-shadow:0 0 70px #c5a78226}.wish[aria-pressed=true]{box-shadow:0 0 90px #d6ad7150;background:#765039}.wish-response{min-height:50px;font-size:12px}.constellation{position:absolute;inset:25% 5%;z-index:-0;pointer-events:none;color:#c5a78240;font-size:25px;line-height:5;letter-spacing:100px}.secret .reveal{position:relative;z-index:1}.ending{text-align:center;background:#1c1715;border-top:1px solid var(--line)}.seal{display:flex;align-items:center;justify-content:center;margin:35px auto;width:66px;height:66px;border:1px solid #c5a78260;border-radius:50%;font:italic 38px var(--serif);color:var(--gold)}.gold{color:var(--gold)}footer{margin:0 5.3%;display:flex;justify-content:space-between;gap:20px;padding:30px 0;font-size:9px;letter-spacing:2px;color:var(--muted)}footer i{margin-left:15px;color:var(--gold)}.js .reveal{opacity:0;transform:translateY(35px);transition:opacity 1.2s,transform 1.2s}.js .reveal.visible{opacity:1;transform:translateY(0)}
@media(min-width:1500px){.hero{padding-left:max(9%,calc((100vw - 1260px)/2));padding-right:max(9%,calc((100vw - 1260px)/2))}}@media(max-width:760px){header{height:83px;margin:0 7%}.wordmark{font-size:12px;letter-spacing:2.8px}.wordmark span{font-size:6px;letter-spacing:2.2px}.header-date{display:none}.hero{display:flex;flex-direction:column;padding:43px 8% 85px;gap:45px;min-height:auto;align-items:stretch}.hero-copy{position:relative;z-index:1}.hero .eyebrow{font-size:7px;letter-spacing:1.8px}h1{font-size:66px;margin:25px 0 20px}.hero-copy>p{font-size:12px}.pill{margin-top:18px;padding:14px 22px}.duration{font-size:7px}.hero-art{width:76%;height:390px;align-self:center;margin-left:18px}.arch{inset:12px 12px 15px}.arch figcaption{font-size:19px;bottom:20px}.date-stamp{width:85px;height:85px;left:-30px;bottom:55px;font-size:39px}.date-stamp span{font-size:6px}.vertical{right:-20px;top:100px;font-size:6px}.star-one{font-size:35px;top:-15px}.hero-bottom{font-size:6px;letter-spacing:1.2px;bottom:18px}.hero-bottom>span:last-child{display:none}.hero-bottom a span{padding-left:8px}.scene{padding:90px 8%;min-height:auto}h2{font-size:45px;letter-spacing:-1px;line-height:1.1}.eyebrow{font-size:8px;letter-spacing:2px}.prose{font-size:13px}.moments{display:flex;flex-direction:column;gap:65px}.moment-photo{height:400px;width:77%}.moment-copy{width:100%}.moment-copy h2{font-size:47px}.moment-copy>p{font-size:13px}.photo-note{font-size:23px;right:-20px}.secret{min-height:730px;display:grid;align-items:center}.ending{padding-bottom:95px}.constellation{letter-spacing:30px}.wish-response{font-size:11px}footer{font-size:7px;letter-spacing:1.2px;flex-wrap:wrap}footer>span:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}

/* Handheld story rhythm: stable small viewport, native scrolling, safe areas. */
@media(max-width:760px){
 html{scroll-padding-top:18px}
 body{-webkit-text-size-adjust:100%}
 header{height:64px;margin-left:max(24px,env(safe-area-inset-left));margin-right:max(24px,env(safe-area-inset-right))}
 
 .hero{min-height:calc(100vh - 64px);min-height:calc(100svh - 64px);padding:23px max(28px,env(safe-area-inset-right)) 58px;gap:22px;justify-content:space-between}
 h1{font-size:clamp(46px,13.2vw,56px);line-height:1.01;margin:18px 0 14px}
 .hero-copy>p{margin:0;font-size:12px;line-height:1.7}
 .hero .eyebrow{font-size:7px;letter-spacing:1.5px}
 .pill{min-height:48px;margin-top:17px;padding:12px 21px;font-size:12px}
 .duration{margin-top:10px;font-size:7px}
 .hero-art{height:clamp(210px,31svh,270px);width:65%;flex-shrink:0;margin-left:24px}
 .arch{inset:8px 10px 10px;border-radius:46% 46% 1px 1px}
 .arch figcaption{font-size:15px;bottom:12px}
 .date-stamp{width:67px;height:67px;font-size:30px;left:-30px;bottom:28px}
 .date-stamp span{font-size:5px;letter-spacing:1.5px;margin-top:7px}
 .vertical{top:65px;right:-21px;font-size:6px;letter-spacing:1.6px}
 .star-one{font-size:28px;top:-12px}.star-two{font-size:25px;bottom:0}
 .hero-bottom{padding-top:12px;bottom:9px;align-items:center}
 .hero-bottom a{min-height:32px;display:flex;align-items:center}
 .scene{min-height:100vh;min-height:100svh;padding:68px max(28px,env(safe-area-inset-right)) max(58px,env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:center;scroll-margin-top:0}
 h2{font-size:clamp(39px,11.5vw,48px);line-height:1.08;margin:22px 0 26px}
 .prose{font-size:14px;line-height:1.9}.prose p{margin:22px 0}
 .ornament{margin-top:24px;font-size:32px}
 .text-link{min-height:48px;display:inline-flex;align-items:center;font-size:12px;margin-top:20px;padding:12px 0}
 .moments{gap:38px;align-items:center;padding-top:56px}
 .moment-photo{height:290px;width:70%;flex-shrink:0}
 .photo-note{font-size:21px;bottom:8px}
 .moment-copy h2{font-size:43px}
 .moment-copy>p{font-size:14px;line-height:1.8}
 .memories{margin-top:24px}
 .memories button{min-height:62px;font-size:26px;touch-action:manipulation}
 .memories p{font-size:14px;line-height:1.85;padding-left:0}
 .memories p:not([hidden]){animation:note-in .45s ease both}
 .secret{min-height:100svh}.secret>div.reveal{width:100%}
 .secret p{font-size:14px}.wish{width:94px;height:94px;touch-action:manipulation}
 .wish-response{min-height:70px}.wish-response p{font-size:13px}
 .ending{padding-bottom:max(70px,env(safe-area-inset-bottom))}
 footer{padding-bottom:max(24px,env(safe-area-inset-bottom));min-height:64px}
 .js .reveal{transform:translateY(22px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.65,.3,1)}
 .js .reveal.visible>.eyebrow,.js .reveal.visible>h2,.js .reveal.visible>.prose{animation:note-in .8s both}
 .js .reveal.visible>h2{animation-delay:.08s}.js .reveal.visible>.prose{animation-delay:.16s}
}
@keyframes note-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px) and (orientation:landscape){.hero-art{height:270px;width:220px}.scene{min-height:auto}.hero{gap:32px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .reveal{opacity:1;transform:none}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Full-screen chapters. Native snapping also works with touch and keyboard. */
html{height:100%;overflow:hidden;scroll-padding:0}
body{height:100%;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scroll-behavior:smooth}
body>header{position:absolute;top:0;left:0;right:0;z-index:5}
main>section{height:100%;height:100dvh;min-height:0;scroll-snap-align:start;scroll-snap-stop:always;overflow-y:auto;scroll-margin:0}
main{display:contents}
.hero{padding-top:130px;padding-bottom:85px}
.scene{padding-top:65px;padding-bottom:55px}
body>footer{display:none}
@media(max-width:760px){
 body>header{height:60px}
 .hero{height:100%;height:100dvh;min-height:0;display:flex;padding:77px 28px 49px;gap:12px;justify-content:space-between}
 .hero h1{font-size:clamp(40px,11.5vw,49px);margin:12px 0 10px;line-height:1}
 .hero-copy>p{font-size:11px;line-height:1.65}
 .hero .eyebrow{font-size:6px;letter-spacing:1.3px}
 .hero .pill{min-height:44px;margin-top:12px;padding:10px 19px;font-size:11px}
 .hero .duration{font-size:6px;margin-top:7px}
 .hero-art{height:clamp(150px,28dvh,245px);width:60%;flex:1;min-height:130px;max-height:245px}
 .hero-bottom{bottom:5px;padding-top:5px}
 .scene{height:100%;height:100dvh;min-height:0;padding:32px 27px max(25px,env(safe-area-inset-bottom));justify-content:center}
 h2{font-size:39px;margin:17px 0 20px}
 .ornament{margin-top:16px;font-size:26px}
 .prose{font-size:12px;line-height:1.8}.prose p{margin:17px 0}
 .text-link{margin-top:10px;font-size:11px;min-height:44px}
 .moments{gap:18px;justify-content:center}
 .moment-photo{height:clamp(125px,24dvh,205px);width:47%;min-height:125px}
 .photo-note{font-size:16px;right:-48px;bottom:5px}
 .moment-copy .eyebrow{font-size:6px;letter-spacing:1.5px}
 .moment-copy h2{font-size:34px;margin:12px 0}
 .moment-copy>p{font-size:11px;line-height:1.65;margin:8px 0}
 .memories{margin-top:12px}
 .memories button{min-height:44px;padding:10px 0;font-size:22px}
 .memories p{font-size:11px;line-height:1.65;margin:8px 0;padding:0}
 .moment-copy .text-link{margin-top:8px}
 .secret{min-height:0}
 .secret h2,.ending h2{font-size:43px}
 .secret p{font-size:12px}
 .wish{margin-top:25px;width:82px;height:82px}
 .wish-response{min-height:48px}
 .seal{width:54px;height:54px;font-size:30px;margin:22px auto}
 .ending{padding-top:30px;padding-bottom:30px}
}
@media(max-width:760px) and (max-height:700px){
 .moment-photo{height:125px;min-height:125px;width:40%}
 .moments{gap:12px;padding-top:20px;padding-bottom:20px}
 .moment-copy>p:nth-of-type(1){display:none}
 .moment-copy h2{font-size:30px;margin:9px 0}
 .prose p{margin:13px 0}
}
/* Keep long text reachable under text zoom or in landscape. */
@media(max-height:500px){
 main>section{justify-content:flex-start}
 .hero-art{display:none}
 .moment-photo{display:none}
 .scene{padding-top:24px}
}
@media(prefers-reduced-motion:reduce){body{scroll-behavior:auto}}

/* Warmer, more legible palette and restrained cinematic entrances. */
:root{--bg:#29201f;--cream:#fff3e6;--muted:#d1c2b7;--gold:#e0bc8f;--line:#f5d7b536}
.hero{background:radial-gradient(ellipse at 85% 40%,#8f465866,transparent 70%)}
.intro{background:radial-gradient(ellipse at 50% 40%,#72504466,transparent 75%)}
.moments{background:#302523}
.secret{background:radial-gradient(ellipse at 50% 50%,#8b435b99,#302323 78%)}
.ending{background:#352927}
.duration{color:#c4b1a3}
img{filter:sepia(.12) brightness(.98)}
.date-stamp{background:#753b48;border-color:#e0bc8f66}
.arch:after{background:linear-gradient(0deg,#21121899,transparent 40%)}
.pill{background:#f5dfc4;color:#30201d}
.wish{background:#75405280;border-color:#e0bc8f99}
.memories button>span{color:#efd1ab}
.js .reveal,.js .reveal.visible{opacity:1;transform:none;transition:none}
.js .reveal.visible>.eyebrow,.js .reveal.visible>h2,.js .reveal.visible>.prose{animation:none}
/* Opacity rather than blur keeps small text crisp throughout the transition. */
@keyframes chapter-copy{from{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes chapter-image{from{opacity:.25;transform:translate3d(0,16px,0) scale(.96)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes photo-settle{from{transform:scale(1.065)}to{transform:scale(1)}}
.js .chapter-enter .eyebrow{animation:chapter-copy .75s both}
.js .chapter-enter h1,.js .chapter-enter h2{animation:chapter-copy 1s cubic-bezier(.16,1,.3,1) .09s both}
.js .chapter-enter .prose,.js .chapter-enter .hero-copy>p,.js .chapter-enter .moment-copy>p,.js .secret.chapter-enter>.reveal>p{animation:chapter-copy 1.05s cubic-bezier(.16,1,.3,1) .19s both}
.js .chapter-enter .hero-art,.js .chapter-enter .moment-photo{animation:chapter-image 1.2s cubic-bezier(.16,1,.3,1) .08s both}
.js .chapter-enter figure img{animation:photo-settle 1.65s cubic-bezier(.2,.7,.3,1) both}
.js .chapter-enter .text-link,.js .chapter-enter .pill,.js .chapter-enter .memories,.js .chapter-enter .wish{animation:chapter-copy .85s ease .29s both}
@media(max-width:760px){
 .scene{padding-top:26px;padding-bottom:max(24px,env(safe-area-inset-bottom))}
 .prose{font-size:13px;line-height:1.75}
 .prose p{margin:15px 0}
 .eyebrow{font-size:9px;letter-spacing:1.5px}
 .hero .eyebrow{font-size:8px;letter-spacing:1px}
 .hero .duration{font-size:8px;letter-spacing:1px}
 .hero-bottom{font-size:7px;letter-spacing:1px}
 .hero-copy>p{font-size:12px}
 .hero-art{min-height:115px}
 .moment-copy .eyebrow{font-size:8px;letter-spacing:1px}
 .moment-copy>p{font-size:12px}
 .memories p{font-size:12px;line-height:1.65}
 .moment-copy h2{font-size:32px}
 .moment-photo{height:clamp(115px,19dvh,170px);min-height:115px}
 .moments{gap:12px}
 .secret p,.wish-response p{font-size:13px}
}
@media(max-width:760px) and (max-height:700px){
 .moment-photo{height:105px;min-height:105px;width:38%}
 .moments{gap:9px;padding-top:18px;padding-bottom:18px}
 .moment-copy h2{font-size:29px;margin:9px 0}
 .moment-copy>p{margin:6px 0}
 .memories{margin-top:9px}
 .memories button{padding:8px 0}
 .memories p{margin:7px 0}
 .hero h1{font-size:44px}
 .hero-art{min-height:105px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.js .chapter-enter *{opacity:1;transform:none}}

/* A wish becomes a small constellation; the message has reserved space. */
.wish{position:relative;isolation:isolate;overflow:visible}
.wish:disabled{cursor:default}
.wish::before,.wish::after{content:'';position:absolute;inset:-1px;border:1px solid #f4d6a6;border-radius:50%;opacity:0;pointer-events:none}
.wish-granted .wish::before{animation:wish-ring 1.4s ease-out both}
.wish-granted .wish::after{animation:wish-ring 1.4s .18s ease-out both}
.wish-granted .wish>span:first-child{display:inline-block;animation:wish-star 1.15s cubic-bezier(.2,.7,.3,1) both}
.wish-granted .wish{background:#91613d;box-shadow:0 0 35px #e5b57866,0 0 85px #e5b57830}
.wish-sparks{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.wish-sparks i{position:absolute;font:normal 26px var(--serif);color:#ffe6bc;line-height:1;opacity:0;animation:wish-spark 1s var(--delay) ease-out both}
.wish-response{height:94px;min-height:94px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.wish-response p{margin:0}
.wish-response .wish-blessing{font:italic 28px/1.2 var(--serif);color:#ffe3ba;max-width:330px;animation:chapter-copy .8s both}
.wish-response .wish-whisper{font-size:12px;color:var(--cream);animation:chapter-copy 1s .12s both}
@keyframes wish-ring{0%{opacity:.8;transform:scale(.85)}100%{opacity:0;transform:scale(2.65)}}
@keyframes wish-star{0%{transform:scale(1) rotate(0)}45%{transform:scale(1.25) rotate(85deg);text-shadow:0 0 24px #ffe5b7}100%{transform:scale(1) rotate(180deg);text-shadow:0 0 14px #ffe5b7}}
@keyframes wish-spark{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}25%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(.7)}}
@media(max-width:760px){.wish-response{height:94px;min-height:94px}.wish-response .wish-blessing{font-size:26px;max-width:290px}.wish-response .wish-whisper{font-size:11px}.secret .text-link{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.wish-sparks,.wish::before,.wish::after{display:none}.wish-granted .wish{box-shadow:0 0 25px #e5b57840}.wish-response *{animation:none!important}}

/* Shared navigation: identical viewport position on every chapter. */
.chapter-nav{position:fixed;z-index:20;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:10px;padding:16px 28px max(16px,env(safe-area-inset-bottom));background:linear-gradient(0deg,#29201f 72%,#29201f00);pointer-events:none}
.chapter-nav button{pointer-events:auto;min-height:48px;border-radius:28px;border:1px solid #e0bc8f66;touch-action:manipulation;transition:background .2s}
.chapter-back{width:48px;flex:0 0 48px;background:#3b2d29;font-size:21px}
.chapter-back:disabled{opacity:.3;cursor:default}
.chapter-next{display:flex;align-items:center;justify-content:space-between;gap:20px;width:280px;padding:12px 22px;background:#f5dfc4;color:#30201d;font-size:12px;font-weight:600}
.chapter-next>span:last-child{font-size:20px;line-height:1}
.chapter-next:hover{background:#ffeacf}
main>section .text-link,main>section .pill,.hero-bottom{display:none}
main>section{padding-bottom:105px}
.hero .duration{margin-left:0}
@media(max-width:760px){
 .chapter-nav{padding:14px 24px max(16px,env(safe-area-inset-bottom));gap:10px}
 .chapter-next{width:auto;flex:1;max-width:300px}
 .hero{padding:78px 28px 96px;gap:16px}
 .hero h1{margin:16px 0 14px}
 .hero .duration{margin-top:15px}
 .hero-art{max-height:260px;width:64%;min-height:110px}
 .scene{padding:30px 28px 100px}
 .intro .ornament{margin-top:20px}
 .intro h2{font-size:38px}
 .prose{font-size:13px;line-height:1.8;max-width:330px}
 .prose p{margin:17px 0}
 .moments{gap:15px}
 .moment-photo{height:clamp(110px,20dvh,160px);min-height:110px;width:43%}
 .moment-copy h2{font-size:33px;margin:13px 0}
 .moment-copy>p{font-size:12px;line-height:1.7}
 .moment-copy>p:first-of-type{display:none}
 .memories{margin-top:14px}
 .memories button{font-size:23px;min-height:45px}
 .memories p{font-size:12px;line-height:1.7;margin:9px 0 0}
 .secret .wish{margin:26px auto 12px}
 .secret .wish-response{height:100px;min-height:100px}
 .ending{padding-top:30px;padding-bottom:100px}
 .ending .seal{margin:18px auto}
 .ending h2{margin:18px 0 20px}
 .ending .prose p{margin:16px 0}
}
@media(max-width:760px) and (max-height:700px){
 .scene{padding-top:22px;padding-bottom:94px}
 .moments{gap:9px}
 .moment-photo{height:100px;min-height:100px;width:37%}
 .moment-copy h2{font-size:30px;margin:10px 0}
 .moment-copy>p{margin:6px 0}
 .memories{margin-top:10px}
 .memories p{font-size:11.5px;line-height:1.6}
 .intro h2{font-size:36px}
 .prose p{margin:14px 0}
 .ending h2{font-size:40px;margin:14px 0}
 .ending .seal{margin:14px auto}
 .ending .prose p{margin:13px 0}
}
@media(max-height:500px){main>section{padding-bottom:100px}.chapter-nav{padding-top:10px;padding-bottom:10px}}
@media(prefers-reduced-motion:reduce){.chapter-nav button{transition:none}}

/* Hide the initial back control without shifting the forward button. */
.chapter-back[hidden]{display:block!important;visibility:hidden;pointer-events:none}

/* A simple date replaces the internal project identity. */
body>header{justify-content:center}
body>header .header-date{display:block;text-align:center;font-size:9px;letter-spacing:1.8px;color:var(--muted)}
@media(max-width:760px){body>header .header-date{font-size:8px;letter-spacing:1.4px}body>header i{margin:0 12px}}

/* Rose editorial palette. */
:root{--bg:#f8e9ee;--cream:#54273e;--muted:#754c61;--gold:#a6406b;--line:#9e527537}
body{background:var(--bg)}
.hero{background:radial-gradient(ellipse at 85% 42%,#edb6cd88,transparent 70%),#f8e9ee}
.intro{background:radial-gradient(ellipse at 50% 45%,#ffe9f2,#f3dce6)}
.moments{background:#f8e7ee}
.secret{background:radial-gradient(ellipse at 50% 48%,#f6c4d9,#f8e9ee 78%)}
.ending{background:#f1d6e2}
.duration{color:#82546c}.date-stamp{background:#b64f79;border-color:#cd86a2;color:#fff6fa}
.orbit,.photo-outline{border-color:#b55e8266}
.arch{background:#d6a7ba}.arch:after{background:linear-gradient(0deg,#54273e88,transparent 45%)}
.arch figcaption{color:#fff5f9}.vertical{color:#754c61}
.memories button>span{color:#a6406b}.memories i{color:#a6406b}
.wish{background:#f4ccdd;border-color:#bd6b8d}
.wish:hover{box-shadow:0 0 55px #bc558a33}
.wish-granted .wish,.wish[aria-pressed=true]{background:#c75889;box-shadow:0 0 35px #d96c9b55,0 0 80px #e992b733}
.wish-granted .wish>span:first-child{color:#fff3f8}
.wish::before,.wish::after{border-color:#b34278}
.wish-sparks i{color:#ad336b}
.wish-response .wish-blessing{color:#922455}
.wish-response .wish-whisper{color:#754c61}
.constellation{color:#a6406b35}.seal{border-color:#a6406b66}
/* Reserve a collapsing grid column so the forward button moves smoothly. */
.chapter-nav{display:grid;grid-template-columns:48px minmax(0,280px);gap:10px;background:linear-gradient(0deg,#f8e9ee 72%,#f8e9ee00);transition:grid-template-columns .55s cubic-bezier(.22,1,.36,1),gap .55s cubic-bezier(.22,1,.36,1)}
.chapter-nav.is-first{grid-template-columns:0px minmax(0,338px);gap:0}
.chapter-nav .chapter-back{width:48px;min-width:0;opacity:1;transform:translateX(0) scale(1);background:#f2cedd;color:#8e315a;border-color:#bb668a66;transition:opacity .35s ease .12s,transform .55s cubic-bezier(.22,1,.36,1)}
.chapter-nav.is-first .chapter-back{visibility:visible;opacity:0;transform:translateX(18px) scale(.75);pointer-events:none;transition:opacity .2s,transform .45s}
.chapter-nav .chapter-next{width:100%;max-width:none;min-width:0;background:#b73e74;color:#fff8fb;border-color:#b73e74;box-shadow:0 5px 18px #a438681c}
.chapter-nav .chapter-next:hover{background:#a62f65}
@media(max-width:760px){
 .chapter-nav{grid-template-columns:48px minmax(0,287px);gap:10px;padding-left:24px;padding-right:24px}
 .chapter-nav.is-first{grid-template-columns:0px minmax(0,345px);gap:0}
 .hero h1{font-size:clamp(50px,14vw,61px);line-height:1.04;margin:20px 0 18px}
 .hero-art{max-height:280px;width:68%}
}
@media(prefers-reduced-motion:reduce){.chapter-nav,.chapter-nav button{transition:none!important}}

/* Balanced opening typography with natural wrapping. */
@media(max-width:760px){
 .hero-copy{text-align:center;width:100%;min-width:0}
 .hero .eyebrow{justify-content:center;line-height:1.6;letter-spacing:.9px;font-size:7px}
 .hero .eyebrow>span{display:none}
 .hero h1{font-size:clamp(46px,13.4vw,57px);line-height:1.08;letter-spacing:-1.3px;margin:19px auto 17px;max-width:100%;overflow-wrap:normal}
 .hero-copy>p{max-width:260px;margin:0 auto;font-size:13px;line-height:1.8;text-wrap:pretty}
 .hero .duration{margin:15px auto 0;letter-spacing:1.2px}
 .hero-art{margin-left:0;align-self:center}
 .hero{padding-left:26px;padding-right:26px}
}
.intro-gate{position:fixed;inset:0;z-index:100;background:radial-gradient(ellipse at 50% 42%,#ffeef5,#f3d8e4);display:grid;place-items:center;padding:32px;text-align:center;color:#54273e;opacity:1;transition:opacity .65s ease,visibility .65s}
.intro-gate-inner{width:100%;max-width:340px}
.intro-flower{display:block;font:52px var(--serif);color:#b73e74;animation:intro-breathe 2s ease-in-out infinite}
.intro-kicker{font-size:9px;letter-spacing:1.8px;margin:25px 0 18px;color:#8e4768}
.intro-gate h2{font:400 48px/1.12 var(--serif);letter-spacing:-1px;margin:16px 0 22px}
.intro-caption{font-size:13px;line-height:1.9;max-width:260px;margin:0 auto;color:#754c61;min-height:50px}
.intro-track{display:block;overflow:hidden;width:100px;height:2px;background:#b73e7425;margin:30px auto 0;border-radius:3px}
.intro-track>span{display:block;height:100%;width:35%;background:#b73e74;animation:intro-loading 1.5s ease-in-out infinite}
.intro-gate.is-ready .intro-track>span{width:100%;transform-origin:left;animation:intro-reading 5.5s linear both}
.intro-gate.is-ready h2,.intro-gate.is-ready .intro-caption{animation:chapter-copy .7s both}
.intro-gate.is-leaving{opacity:0;visibility:hidden;pointer-events:none}
body.is-loading{overflow:hidden}
.is-loading .chapter-nav{visibility:hidden}
@keyframes intro-breathe{50%{opacity:.45;transform:scale(.9)}}
@keyframes intro-loading{0%{transform:translateX(-110%)}100%{transform:translateX(390%)}}
@keyframes intro-reading{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.intro-gate,.intro-gate *{animation:none!important;transition:none!important}}

/* Every visible chapter element participates in the same entrance sequence.
   Animate groups once so nested text and photo ornaments do not jump twice. */
.js main>section:not(.chapter-enter)>.hero-copy,
.js main>section:not(.chapter-enter)>.hero-art,
.js main>section:not(.chapter-enter)>.reveal,
.js main>section:not(.chapter-enter)>.constellation{opacity:0}
.js .chapter-enter .hero-copy,.js .chapter-enter>.reveal{opacity:1}
.js .chapter-enter .eyebrow,
.js .chapter-enter h1,.js .chapter-enter h2,
.js .chapter-enter .prose,
.js .chapter-enter .hero-copy>p,
.js .chapter-enter .moment-copy>p,
.js .secret.chapter-enter>.reveal>p,
.js .chapter-enter .duration,
.js .chapter-enter .ornament,
.js .chapter-enter .seal,
.js .chapter-enter .wish-response,
.js .chapter-enter .memories,
.js .chapter-enter .wish,
.js .chapter-enter .constellation{
 animation:chapter-copy .9s cubic-bezier(.16,1,.3,1) both;
}
.js .chapter-enter .eyebrow{animation-delay:0s}
.js .chapter-enter .ornament,.js .chapter-enter .seal{animation-delay:.06s}
.js .chapter-enter h1,.js .chapter-enter h2{animation-delay:.12s}
.js .chapter-enter .prose,.js .chapter-enter .hero-copy>p,.js .chapter-enter .moment-copy>p,.js .secret.chapter-enter>.reveal>p{animation-delay:.22s}
.js .chapter-enter .duration,.js .chapter-enter .memories,.js .chapter-enter .wish{animation-delay:.32s}
.js .chapter-enter .wish-response{animation-delay:.4s}
.js .chapter-enter .constellation{animation-delay:.15s}
.js .chapter-enter .hero-art,.js .chapter-enter .moment-photo{animation:chapter-image 1.15s cubic-bezier(.16,1,.3,1) .2s both}
/* The image frame already animates; avoid a separate nested zoom. */
.js .chapter-enter figure img{animation:none}
body.story-revealed>header,body.story-revealed>.chapter-nav{animation:chapter-copy .85s cubic-bezier(.16,1,.3,1) .42s both}
body.is-loading>header{visibility:hidden}
/* Wish interaction takes over from the chapter entrance after a tap. */
.js .chapter-enter.wish-granted .wish{animation:none}
@media(prefers-reduced-motion:reduce){
 .js main>section:not(.chapter-enter)>.hero-copy,
 .js main>section:not(.chapter-enter)>.hero-art,
 .js main>section:not(.chapter-enter)>.reveal,
 .js main>section:not(.chapter-enter)>.constellation{opacity:1}
 *,*:before,*:after{animation:none!important;transition:none!important}
}

/* Distinct birthday typography with a gentle turning reveal. */
.hero h1{font-family:'Playfair Display',Georgia,serif;font-weight:400;line-height:1.16;letter-spacing:-1.6px;perspective:700px}
.js .chapter-enter h1{transform-origin:50% 65%;animation:birthday-turn 1.3s cubic-bezier(.16,1,.3,1) .12s both;backface-visibility:hidden}
@keyframes birthday-turn{
  0%{opacity:0;transform:perspective(700px) rotateY(-35deg) rotateZ(-4deg) translateY(16px) scale(.92)}
  65%{opacity:1;transform:perspective(700px) rotateY(3deg) rotateZ(.5deg) translateY(0) scale(1)}
  100%{opacity:1;transform:perspective(700px) rotateY(0) rotateZ(0) translateY(0) scale(1)}
}
@media(max-width:760px){
 .hero h1{font-size:clamp(41px,11.8vw,50px);line-height:1.18;letter-spacing:-1.5px;margin:20px auto}
 .hero-copy>p{max-width:100%;font-size:12px;line-height:1.85}
 .intro-caption{max-width:290px}
}
@media(prefers-reduced-motion:reduce){.js .chapter-enter h1{animation:none!important;transform:none}}

/* Keep the Azerbaijani photo caption comfortably inside its mask. */
.arch figcaption{padding:0 15px;line-height:1.3;text-wrap:balance}
@media(max-width:760px){.arch figcaption{font-size:14px;padding:0 13px;bottom:13px}.intro h2{font-size:clamp(30px,8.6vw,36px);line-height:1.17}.intro .ornament{margin-top:0}}

/* A small ornamental bloom replaces the third chapter's photo. */
.moment-pattern{position:relative;justify-self:center;align-self:center;width:280px;height:280px;flex-shrink:0;background:radial-gradient(ellipse,#edb2cd55,transparent 68%)}
.pattern-petal{position:absolute;left:50%;top:50%;width:115px;height:115px;border:1px solid #b65c8580;border-radius:50% 50% 8% 50%;transform-origin:0 0;background:linear-gradient(135deg,#f9dae766,#eaa8c326)}
.petal-one{transform:rotate(0deg) translate(-100%,-100%)}
.petal-two{transform:rotate(90deg) translate(-100%,-100%)}
.petal-three{transform:rotate(180deg) translate(-100%,-100%)}
.petal-four{transform:rotate(270deg) translate(-100%,-100%)}
.pattern-center{position:absolute;inset:0;display:grid;place-items:center;font:48px var(--serif);color:#a6406b}
.pattern-star{position:absolute;color:#ae4e7a;font:25px var(--serif)}
.star-left{left:0;top:24%}.star-right{right:0;bottom:23%;font-size:19px}
.pattern-dot{position:absolute;width:4px;height:4px;border-radius:50%;background:#c27999}
.dot-one{top:6%;right:17%}.dot-two{bottom:6%;left:17%}
.js .chapter-enter .moment-pattern{animation:chapter-image 1.15s cubic-bezier(.16,1,.3,1) .12s both}
@media(max-width:760px){
 .moment-pattern{width:155px;height:115px;background:radial-gradient(ellipse,#edb2cd44,transparent 70%)}
 .pattern-petal{width:48px;height:48px}
 .pattern-center{font-size:28px}
 .pattern-star{font-size:20px}.star-right{font-size:15px}
 .moments{gap:20px}
}
@media(max-width:760px) and (max-height:700px){.moment-pattern{height:90px;width:145px}.pattern-petal{width:39px;height:39px}.moments{gap:12px}}
@media(max-height:500px){.moment-pattern{display:none}}
@media(prefers-reduced-motion:reduce){.js .chapter-enter .moment-pattern{animation:none!important}}

/* Second chapter: an airy orbital ornament, distinct from the petal bloom. */
.birthday-orbit{width:160px;height:76px;margin:0 auto 18px;position:relative;background:radial-gradient(ellipse,#edb2cd40,transparent 70%)}
.birthday-orbit-ring{position:absolute;left:15px;top:13px;width:130px;height:48px;border:1px solid #b65c8566;border-radius:50%}
.birthday-orbit .ring-a{transform:rotate(-19deg)}
.birthday-orbit .ring-b{transform:rotate(19deg);border-color:#b65c8538}
.birthday-orbit-star{position:absolute;inset:0;display:grid;place-items:center;font:38px var(--serif);color:#a6406b}
.birthday-orbit-small{position:absolute;right:17px;top:5px;color:#b65c85;font-size:15px}
.birthday-orbit-dot{position:absolute;left:20px;bottom:12px;width:5px;height:5px;border-radius:50%;background:#bc7998}
.js .chapter-enter .birthday-orbit{animation:chapter-image 1.1s cubic-bezier(.16,1,.3,1) .04s both}
@media(max-width:760px){.birthday-orbit{height:64px;margin-bottom:13px}.birthday-orbit-ring{top:9px;height:44px}.birthday-orbit-star{font-size:32px}.intro h2{margin-top:14px}}
@media(max-width:760px) and (max-height:700px){.birthday-orbit{height:52px;margin-bottom:10px}.birthday-orbit-ring{top:7px;height:36px;width:112px;left:24px}.birthday-orbit-star{font-size:29px}.birthday-orbit-small{right:24px;top:0}.birthday-orbit-dot{left:24px;bottom:8px}}
@media(prefers-reduced-motion:reduce){.js .chapter-enter .birthday-orbit{animation:none!important}}

/* Quiet, repeating detail on the loading and introductory screen. */
.intro-gate{isolation:isolate;overflow:hidden}
.intro-gate::before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M32 27Q32 32 37 32Q32 32 32 37Q32 32 27 32Q32 32 32 27Z' fill='none' stroke='%23b65c85' stroke-width='.6' opacity='.18'/%3E%3Ccircle cx='0' cy='0' r='1' fill='%23b65c85' opacity='.18'/%3E%3C/svg%3E");-webkit-mask-image:radial-gradient(ellipse at center,transparent 15%,#000 75%);mask-image:radial-gradient(ellipse at center,transparent 15%,#000 75%)}
.intro-gate::after{content:'';position:absolute;width:min(76vw,360px);height:min(65vh,470px);border:1px solid #b65c8529;border-radius:50%;transform:rotate(-13deg);z-index:-1;pointer-events:none;box-shadow:0 0 0 15px #fff5f822,inset 0 0 65px #fff5f855}
.intro-gate-inner{position:relative}
@media(max-height:500px){.intro-gate::after{height:85vh;width:65vw}}

/* Keep the pattern above the opaque overlay background, below its text. */
.intro-gate::before{z-index:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58' viewBox='0 0 58 58'%3E%3Cpath d='M29 23Q29 29 35 29Q29 29 29 35Q29 29 23 29Q29 29 29 23Z' fill='none' stroke='%23a6406b' stroke-width='.85' opacity='.48'/%3E%3Ccircle cx='0' cy='0' r='1.1' fill='%23a6406b' opacity='.3'/%3E%3C/svg%3E");-webkit-mask-image:radial-gradient(ellipse at center,transparent 12%,#0008 42%,#000 75%);mask-image:radial-gradient(ellipse at center,transparent 12%,#0008 42%,#000 75%);animation:intro-pattern-glow 5.5s ease-in-out infinite}
.intro-gate::after{z-index:0;border-color:#b65c8545;animation:intro-outline-glow 7s ease-in-out infinite}
.intro-gate-inner{z-index:1}
@keyframes intro-pattern-glow{0%,100%{opacity:.58}50%{opacity:1}}
@keyframes intro-outline-glow{0%,100%{opacity:.55}50%{opacity:.9}}
@media(prefers-reduced-motion:reduce){.intro-gate::before,.intro-gate::after{animation:none!important;opacity:.8}}

/* The personal photo stays behind its own lightweight loading indicator. */
.arch{background:#f0d3df}
.arch img{opacity:0;filter:none;transform:scale(1.5);transform-origin:52% 74%;transition:opacity .65s ease}
.arch.photo-ready img{opacity:1}
.arch:not(.photo-ready)::after,.arch:not(.photo-ready) figcaption{opacity:0}
.photo-loading{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;background:radial-gradient(ellipse,#fbeaf1,#edc9da);color:#8e315a;font-size:11px}
.photo-loading[hidden]{display:none}
.photo-spinner{width:27px;height:27px;border:1.5px solid #b73e7428;border-top-color:#b73e74;border-radius:50%;animation:photo-spin 1.4s linear infinite}
.photo-error .photo-spinner{display:none}
.photo-loading button{min-height:44px;border:1px solid #b73e7455;border-radius:24px;padding:9px 15px;background:#fff3f8;color:#8e315a;font-size:11px}
@keyframes photo-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.arch img{transition:none}.photo-spinner{animation:none!important;border-color:#b73e74}}

/* Never hide a successfully loaded photo behind a decoding/animation state. */
.arch img{opacity:1}
.arch.photo-ready img{animation:photo-appear .6s ease both}
@keyframes photo-appear{from{opacity:0}to{opacity:1}}
.hero-art{display:block}
@media(max-width:760px){.hero-art{flex:1 0 160px;min-height:160px}}
@media(max-height:500px){.hero{overflow-y:auto}.hero-art{display:block;flex:0 0 180px;height:180px;min-height:180px;margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){.arch.photo-ready img{animation:none!important}}

/* Final love letter occupies the full screen with native modal focus handling. */
.love-dialog{position:fixed;inset:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;margin:0;border:0;padding:70px 28px 40px;overflow-y:auto;color:#54273e;background:radial-gradient(ellipse at 50% 35%,#fff2f7,#efc9db);text-align:center;overscroll-behavior:contain}
.love-dialog::backdrop{background:#54273e66}
.love-dialog[open]{display:flex;flex-direction:column;animation:love-arrive .8s cubic-bezier(.16,1,.3,1) both}
.love-letter{max-width:440px;width:100%;margin:auto}
.love-close{position:absolute;top:max(18px,env(safe-area-inset-top));right:20px;width:44px;height:44px;border:1px solid #a6406b40;border-radius:50%;background:#fff5f988;color:#922455;font-size:28px;line-height:1;touch-action:manipulation}
.love-heart{font:64px/1 var(--serif);color:#b73e74;display:block}
.love-kicker{font-size:8px!important;letter-spacing:2px;color:#a6406b;margin-top:18px!important}
.love-letter h2{font-family:'Playfair Display',Georgia,serif;font-size:clamp(48px,14vw,78px);line-height:1.12;margin:24px 0}
.love-letter>p{font-size:14px;line-height:1.85;margin:19px 0}
.love-letter .love-signature{font:italic 26px/1.35 var(--serif);color:#922455;margin-top:28px}
.love-dialog[open] .love-letter{animation:chapter-copy 1s .15s both}
body.love-open{overflow:hidden}
@keyframes love-arrive{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}
@media(max-height:700px){.love-dialog{padding-top:62px;padding-bottom:25px}.love-heart{font-size:44px}.love-letter h2{font-size:47px;margin:18px 0}.love-letter>p{font-size:12px;margin:14px 0}.love-letter .love-signature{font-size:23px;margin-top:20px}}
@media(prefers-reduced-motion:reduce){.love-dialog,.love-dialog *{animation:none!important}}

/* A readable caption regardless of the photograph behind it. */
.arch figcaption{left:10px;right:10px;bottom:12px;width:auto;padding:9px 12px;border-radius:12px;background:rgba(48,19,35,.84);color:#fff8fb;border:1px solid #ffffff30;font-size:18px;line-height:1.35;text-shadow:0 1px 2px #0005;text-wrap:balance}
@media(max-width:760px){.arch figcaption{left:8px;right:8px;bottom:9px;padding:8px 9px;font-size:14px;line-height:1.3}.date-stamp span{font-size:6px;letter-spacing:1.2px}}
/* The arrow gently suggests a next chapter without moving the whole control. */
.chapter-next>span:last-child{display:inline-block;animation:next-cue 2.6s ease-in-out infinite}
.chapter-next:active{filter:brightness(.94)}
@keyframes next-cue{0%,60%,100%{transform:translateY(0);opacity:1}30%{transform:translateY(4px);opacity:.65}}
@media(prefers-reduced-motion:reduce){.chapter-next>span:last-child{animation:none!important}}

/* Separate the date badge from the caption's bottom band. */
.hero-art .date-stamp{bottom:112px;z-index:2}
@media(max-width:760px){
 .hero-art .date-stamp{bottom:88px;left:-24px;width:62px;height:62px;font-size:29px}
 .hero-art .date-stamp span{font-size:6px;letter-spacing:1px;margin-top:6px}
 .hero-art .arch figcaption{bottom:9px;min-height:42px;display:flex;align-items:center;justify-content:center}
}

/* Equal spacing around the wish; reserved message space no longer centers text low. */
.secret>.reveal>p{margin:0;line-height:1.8}
.secret .wish{margin:24px auto;display:flex;align-items:center;justify-content:center;padding:0}
.secret .wish-response{height:100px;min-height:100px;justify-content:flex-start;padding:0;gap:8px}
.secret .wish-response>p{margin:0}
.secret .wish>span:first-child{line-height:1}
.wish .shooting-star{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:5;animation:shooting-flight 1.5s cubic-bezier(.25,.5,.45,1) both}
.shooting-head{position:absolute;left:-12px;top:-14px;font:normal 28px/1 var(--serif);color:#fff7dc;text-shadow:0 0 5px #fff,0 0 12px #cc5c91,0 0 22px #b73e7480}
.shooting-trail{position:absolute;right:3px;top:-2px;width:88px;height:3px;transform:rotate(30deg);transform-origin:right center;border-radius:50%;background:linear-gradient(90deg,transparent,#d978aa88,#fff4d9);box-shadow:0 0 7px #d978aa66}
@keyframes shooting-flight{
  0%{opacity:0;transform:translate(-125px,-75px) scale(.65)}
  15%{opacity:1}
  48%{opacity:1;transform:translate(0,0) scale(1.1)}
  80%{opacity:1}
  100%{opacity:0;transform:translate(135px,80px) scale(.45)}
}
.wish-granted .wish::before{animation-delay:.6s}
.wish-granted .wish::after{animation-delay:.8s}
.wish-granted .wish>span:first-child{animation-delay:.5s}
@media(prefers-reduced-motion:reduce){.wish .shooting-star{display:none}.wish-granted .wish>span:first-child{animation:none!important}}

.secret .wish-response .wish-blessing{max-width:100%;font-size:clamp(22px,6.6vw,26px);line-height:1.3}