/* Shared, bounded layout for phones, tablets, computers and television browsers.
   Visual assets and interaction timing stay in style.css and app.js. */
:root{--page-pad:clamp(16px,3.5vw,64px);--reading-ink:#60464a;--warm-rule:#b99b714d;--section-gap:clamp(56px,7vw,112px)}
html{overflow-x:hidden;scroll-padding-top:20px}
body{overflow-x:hidden;text-rendering:optimizeLegibility}
button,input,a{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid #e7c593;outline-offset:5px}
img{max-width:100%}
main>section{min-width:0}
header{width:100%;max-width:1440px;margin-inline:auto;min-width:0}
/* The shell scrolls; the scene's garden is a real final row, never an overlay. */
.cover-scroll{height:100vh;height:100svh;overscroll-behavior:contain}
#cover{--env-size:min(350px,82vw,42svh);--garden-size:clamp(110px,18svh,155px);position:relative;inset:auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto minmax(var(--garden-size),1fr);align-items:start;justify-items:center;gap:0;width:100%;min-height:100vh;min-height:100svh;height:auto;padding:clamp(22px,4svh,40px) 20px 0;overflow:hidden;box-sizing:border-box}
#cover>.cover-top{grid-column:1;grid-row:1;font-size:8px;line-height:1.7;letter-spacing:2.7px;margin:0 0 14px}
#cover>.cover-heading{grid-column:1;grid-row:2;margin:0;text-align:center;min-width:0;max-width:100%}
#cover .cover-heading p{font-size:18px;line-height:1.4;margin:0 0 4px}
#cover .cover-heading h1{font-size:clamp(48px,8svh,72px);line-height:1.06;letter-spacing:-1.5px;margin:0}
#cover .cover-date{font-size:8px;line-height:1.4;gap:15px;letter-spacing:2.6px;margin:18px 0 0}
#cover .cover-date span{font-size:30px;line-height:1.15}
#cover>.cover-keepsake{grid-column:1;grid-row:3;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%;min-width:0;padding:clamp(44px,7svh,85px) 0 0;transition:padding-top 1.5s cubic-bezier(.4,0,.2,1)}
#cover .cover-keepsake .envelope{width:var(--env-size);max-width:calc(100vw - 64px);aspect-ratio:1.52;flex:none;margin:0 0 24px;grid-area:auto;align-self:center;justify-self:auto}
#cover .cover-keepsake .envelope-invitation{position:relative;grid-area:auto;display:block;visibility:visible;font-size:clamp(8px,2.3vw,10px);font-weight:500;line-height:1.8;letter-spacing:1.7px;max-width:100%;margin:0 0 24px;text-align:center;white-space:normal}
#cover .cover-keepsake .envelope-invitation span{font-size:17px;margin-left:7px}
#cover>.cover-bottom{grid-column:1;grid-row:4;align-self:start;position:relative;z-index:1;max-width:100%;padding:0 12px 6px;margin:0;transform:none;text-align:center}
#cover .cover-title,#cover.unsealed .cover-title{font-size:23px;line-height:1.35;margin:0 0 8px}
#cover .cover-title i,#cover.unsealed .cover-title i{font-size:22px}
#cover .cover-from{font-size:8px;line-height:1.8;letter-spacing:2.3px;margin:14px 0 0}
#cover .enter-card{height:auto;max-height:220px;overflow:hidden;margin:0;transition:max-height 1.5s cubic-bezier(.4,0,.2,1),opacity .65s ease,transform .65s ease,visibility 0s}
#cover:not(.unsealed) .enter-card{max-height:0;opacity:0;visibility:hidden;margin:0;padding:0}
#cover .enter-card p{font-size:12px;line-height:1.7;margin:12px 0 10px}
#cover .enter-card .heart-entry{width:132px;height:112px;margin:0 auto;top:0}
#cover .enter-card .heart-words{font-size:9px;top:38px}
#cover.unsealed>.cover-keepsake{padding-top:clamp(92px,14svh,150px)}
#cover.unsealed .envelope-invitation{visibility:hidden;opacity:0;pointer-events:none}
#cover>.cover-garden-footer{grid-column:1;grid-row:5;position:relative;z-index:0;width:calc(100% + 40px);min-height:var(--garden-size);height:100%;align-self:stretch;pointer-events:none;isolation:isolate}
#cover .cover-garden-footer .garden-meadow{position:absolute;inset:auto -4px -3px;height:var(--garden-size);width:auto;pointer-events:none}
#cover .cover-garden-footer .garden-breeze{pointer-events:auto}
#cover .cover-garden-footer .meadow-bed{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:fill}
#cover .birthday-garden{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#cover .garden-top-left,#cover .garden-top-right{width:72px;height:130px;top:40px}
#cover .garden-top-left{left:0}#cover .garden-top-right{right:0}
#cover .cover-rule{z-index:1}
/* Every frame fits inside its section; no cumulative negative margins. */
.song-section,.memories,.letter-section{padding:var(--section-gap) var(--page-pad)}
.player{width:100%;max-width:1120px;margin:clamp(30px,4vw,55px) auto 0;--scroll-frame-top:clamp(60px,7.6vw,106px);--scroll-frame-bottom:clamp(65px,8vw,112px);--scroll-frame-side:clamp(20px,2.8vw,38px);min-width:0}
.player .lyric-atmosphere,.player .full-lyrics{width:100%;max-width:100%;margin-inline:0}
.player .lyric-atmosphere{margin-top:32px;margin-bottom:24px}
.player .lyric-atmosphere:before{inset:0;border-width:var(--scroll-frame-top) var(--scroll-frame-side) var(--scroll-frame-bottom)}
.player .lyric-atmosphere .karaoke-panel{padding:calc(var(--scroll-frame-top) + 18px) clamp(28px,5.4vw,76px) calc(var(--scroll-frame-bottom) + 9px);min-width:0}
.player .karaoke-label{gap:10px;min-width:0;font-size:clamp(7px,1vw,14px);letter-spacing:clamp(.2px,.09vw,1.5px)}
.player .karaoke-label button{flex-shrink:0;font-size:clamp(9px,1vw,15px);min-height:36px;padding:8px 11px}
.player .karaoke-viewport{height:clamp(285px,43svh,600px);overflow-x:hidden;overflow-y:auto}
.player .karaoke-line{font-size:clamp(16px,2.45vw,38px);line-height:1.9;padding:clamp(35px,4vw,56px) 0 20px;overflow-wrap:anywhere;text-wrap:pretty}
.player #lyricCue{font-size:clamp(12px,1.65vw,25px);line-height:1.7;min-height:1.7em;letter-spacing:.08em;margin:20px 0 4px}
.player .karaoke-tip{font-size:clamp(9px,1vw,15px);line-height:1.6;margin:15px 0 0}
.player .full-lyrics{padding-inline:clamp(12px,2vw,30px);border-width:var(--scroll-frame-top) var(--scroll-frame-side) var(--scroll-frame-bottom);margin-top:30px}
.player .full-lyrics summary{font-size:clamp(10px,1.35vw,20px);min-height:44px;padding:12px 0 18px;flex-wrap:wrap;gap:8px}
.player .full-lyrics #lyrics p{font-size:clamp(15px,1.75vw,27px);overflow-wrap:anywhere;line-height:2.2}
.player .full-lyrics #lyrics h3{font-size:clamp(13px,1.4vw,22px)}
.play-row{gap:clamp(22px,4vw,58px);justify-content:center}
.play-row button{min-height:44px;min-width:44px}
.play-button{width:clamp(56px,5.8vw,82px);height:clamp(56px,5.8vw,82px);font-size:clamp(20px,2vw,29px)}
.times{font-size:clamp(11px,1.1vw,17px)}
#seek{width:100%;min-width:0;touch-action:pan-x}
.memories .album{width:100%;max-width:1200px;min-width:0;margin-inline:auto;border-left-width:clamp(24px,3.8vw,54px);border-right-width:clamp(24px,3.8vw,54px);padding:clamp(12px,2vw,28px) 0 14px}
.album .photo-stage{min-width:0;overflow:hidden;padding:3px 0 32px}
.album .photo-track{width:100%;min-width:0}
.album .strip-photo{flex:0 0 92%;min-width:0;padding:5px 5px 10px}
.album .strip-photo img{display:block;width:100%;height:clamp(285px,51svh,700px);object-fit:contain;max-width:100%;border-width:3px}
.album .strip-photo figcaption{font-size:clamp(17px,2.15vw,36px);line-height:1.4;min-height:2.8em;margin:15px 4px 8px;text-wrap:balance}
.album .strip-photo>span{font-size:clamp(8px,.9vw,14px);line-height:1.7;min-height:1.7em;letter-spacing:1.6px}
.album .photo-index{font-size:clamp(10px,1vw,16px);right:8px;bottom:5px}
.album .album-autoplay button{min-height:44px;font-size:clamp(11px,1vw,16px);padding:9px 15px}
.album .album-nav{gap:4px;margin:6px 0 0;align-items:center}
.album .album-nav>button{width:36px;min-width:36px;height:44px;font-size:28px}
.album .dots{flex:1;min-width:0;max-width:420px;flex-wrap:wrap;justify-content:center;gap:0}
.album .dots button{width:18px;flex:0 0 18px;min-width:18px;height:32px;padding:6px}
.album .dots button:after{width:5px;height:5px}
.letter-section .letter{width:100%;max-width:1050px;min-width:0;padding:clamp(12px,1.8vw,26px);margin-inline:auto}
.letter-section .letter-border{padding:clamp(30px,4.5vw,65px) clamp(22px,5.5vw,85px) clamp(26px,3.5vw,50px)}
.letter-section .letter p{font-size:clamp(17px,1.7vw,26px);line-height:1.9;color:var(--reading-ink);margin-bottom:clamp(24px,2.6vw,36px);overflow-wrap:break-word}
.letter-section .letter h2{font-size:clamp(31px,3.6vw,56px);line-height:1.2;margin:clamp(28px,3vw,45px) 0;text-wrap:balance}
.letter-section .letter .letter-subtitle{font-size:clamp(24px,2.6vw,38px);color:#7b3b51;margin-top:38px}
.letter-section .letter .letter-highlight{font-size:clamp(27px,3vw,44px);line-height:1.45;color:#70364c;padding-block:30px}
.letter-date{font-size:clamp(8px,.9vw,14px);line-height:1.8;letter-spacing:clamp(1.5px,.2vw,3.5px)}
.october-dates{width:100%;max-width:1050px;gap:clamp(14px,3vw,50px);margin:0 auto 40px}
.october-dates strong{font-size:clamp(21px,2.6vw,40px);line-height:1.2}
.october-dates span{font-size:clamp(8px,1vw,15px);line-height:1.6;letter-spacing:1.6px}
.ending{width:100%;max-width:1320px;padding:var(--section-gap) var(--page-pad);gap:clamp(36px,6vw,100px)}
.ending-image{width:100%;max-width:480px}
.ending-image img{display:block;width:100%;height:auto}
.ending-copy h2{font-size:clamp(32px,3.5vw,54px);line-height:1.25;text-wrap:balance}
.ending-copy p{font-size:clamp(16px,1.45vw,22px);line-height:1.8}
.hero-sub,.section-intro{width:100%;max-width:600px;font-size:clamp(15px,1.4vw,21px);line-height:1.8}
.section-intro{margin-bottom:35px}
.hero .portrait-frame{width:min(90%,480px)}
.hero .frame-inner img{height:clamp(320px,46vw,500px)}
@media(min-width:700px){
 #cover{--env-size:min(520px,72vw,46svh);--garden-size:clamp(170px,20svh,250px);padding-inline:40px;padding-top:36px}
 #cover>.cover-top{font-size:11px;letter-spacing:3.8px;margin-bottom:20px}
 #cover .cover-heading p{font-size:25px}
 #cover .cover-heading h1{font-size:clamp(72px,8svh,96px)}
 #cover .cover-date{font-size:12px;margin-top:24px;gap:20px}
 #cover .cover-date span{font-size:40px}
 #cover .cover-keepsake{padding-top:clamp(70px,8svh,110px)}
 #cover.unsealed>.cover-keepsake{padding-top:clamp(140px,17svh,200px)}
 #cover .cover-keepsake .envelope-invitation{font-size:12px;letter-spacing:2.3px;margin-bottom:28px}
 #cover .cover-title,#cover.unsealed .cover-title{font-size:31px}
 #cover .cover-title i,#cover.unsealed .cover-title i{font-size:29px}
 #cover .cover-from{font-size:10px;margin-top:18px}
 #cover .enter-card p{font-size:16px;margin:18px 0 12px}
 #cover .enter-card .heart-entry{width:150px;height:128px}
 #cover .enter-card .heart-words{font-size:11px;top:43px}
 #cover>.cover-garden-footer{width:calc(100% + 80px)}
 #cover .garden-top-left,#cover .garden-top-right{width:115px;height:190px;top:42px}
 .player .karaoke-viewport{height:clamp(340px,46svh,620px)}
 .album .dots button{flex-basis:22px;width:22px;height:38px}
}
/* Landscape tablets and wide monitors use the same two-column stationery grid. */
@media(min-width:1000px) and (min-aspect-ratio:4/3){
 #cover{--env-size:min(44vw,650px,78svh);--garden-size:clamp(170px,22svh,300px);grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto auto 1fr minmax(var(--garden-size),auto);column-gap:clamp(25px,4vw,90px);padding:32px clamp(40px,5vw,100px) 0;align-content:start}
 #cover>.cover-top{grid-column:1/-1;grid-row:1;font-size:12px;margin-bottom:28px}
 #cover>.cover-heading{grid-column:1;grid-row:2;align-self:end;padding-top:35px}
 #cover .cover-heading h1{font-size:clamp(74px,6.5vw,116px)}
 #cover .cover-heading p{font-size:clamp(24px,2vw,30px)}
 #cover>.cover-keepsake,#cover.unsealed>.cover-keepsake{grid-column:2;grid-row:2/4;align-self:center;padding-top:clamp(100px,13svh,160px)}
 #cover .cover-keepsake .envelope{margin-bottom:30px;max-width:100%}
 #cover .cover-keepsake .envelope-invitation{font-size:clamp(10px,.9vw,14px);margin-bottom:15px;letter-spacing:2px}
 #cover>.cover-bottom{grid-column:1;grid-row:3;padding:24px 0 15px;max-width:520px}
 #cover .cover-title,#cover.unsealed .cover-title{font-size:clamp(28px,2.2vw,36px)}
 #cover .cover-title i,#cover.unsealed .cover-title i{font-size:clamp(27px,2vw,34px)}
 #cover>.cover-garden-footer{grid-column:1/-1;grid-row:4;width:calc(100% + clamp(80px,10vw,200px));min-height:var(--garden-size)}
 #cover .garden-top-left,#cover .garden-top-right{width:130px;height:200px;top:35px}
 .ending{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(max-width:360px){
 #cover{padding-inline:16px;--env-size:min(82vw,42svh);--garden-size:clamp(100px,17svh,140px)}
 #cover .cover-heading h1{font-size:clamp(44px,8svh,60px)}
 #cover>.cover-garden-footer{width:calc(100% + 32px)}
 #cover .cover-keepsake .envelope-invitation{font-size:8px;letter-spacing:1.1px}
 #cover .garden-top-left,#cover .garden-top-right{width:58px;height:110px}
 .player .lyric-atmosphere .karaoke-panel{padding-inline:25px}
 .album .dots button{flex-basis:16px;width:16px;min-width:16px}
 .letter-section .letter-border{padding-inline:19px}
}
@media(min-width:2000px){
 .player{max-width:1450px}
 .player .karaoke-line{font-size:44px}
 .memories .album{max-width:1500px}
 .album .strip-photo img{height:clamp(600px,53svh,950px)}
 .letter-section .letter{max-width:1220px}
 .letter-section .letter p{font-size:30px}
 .hero h1{font-size:136px}
}
@supports not (height:1svh){
 #cover{--env-size:min(350px,82vw);--garden-size:145px;min-height:100vh}
 .player .karaoke-viewport{height:340px}
 .album .strip-photo img{height:380px}
 @media(min-width:700px){#cover{--env-size:min(520px,65vw);--garden-size:220px}.player .karaoke-viewport{height:440px}.album .strip-photo img{height:540px}}
}
@media(prefers-reduced-motion:reduce){#cover .cover-keepsake,#cover .enter-card{transition:none}}
/* Safe edges on notched devices, and a fallback for older television browsers. */
.cover-scroll{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
@supports not (aspect-ratio:1){#cover .cover-keepsake .envelope{height:calc(var(--env-size)/1.52)}}
@media(min-width:700px) and (max-width:999px){.song-section h2,.memories h2{font-size:clamp(38px,5vw,52px)}}
@media(min-width:1000px){.album .album-nav{padding-inline:15px}.album .album-nav>button{width:44px;min-width:44px}}
/* Leave room for the raised flap and keepsakes, including on short landscape screens. */
#cover.unsealed>.cover-keepsake{padding-top:max(110px,calc(var(--env-size)*.42))}

/* Reveal a clear next step, then bring its heart into the visible cover viewport. */
#cover .enter-card{max-height:285px}
#cover .entry-guide{font:10px/1.8 Arial,sans-serif;letter-spacing:1.2px;color:#936e45;margin:0 0 10px}
#cover .entry-guide span{display:inline-block;font-size:17px;margin-left:6px;animation:entryGuideNudge 2.6s ease-in-out infinite}
@keyframes entryGuideNudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}
@media(min-width:700px){#cover .entry-guide{font-size:12px;margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){#cover .entry-guide span{animation:none}}