*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-snap-type:y proximity}body{margin:0;background:#ead2c5;color:#51352e;font-family:"DM Sans",sans-serif;line-height:1.6}main{width:min(100%,560px);margin:auto;background:#faeee5;box-shadow:0 0 40px #6b3c2c20;overflow:hidden}.page{min-height:100svh;padding:70px 24px 48px;text-align:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at 10% 10%,#fff9f0,transparent 35%),linear-gradient(145deg,#f8e8dd,#f3ddd1 60%,#f8e9df);scroll-snap-align:start}.script{font-family:Parisienne,cursive;color:#9d5e58;font-weight:400;line-height:1.15;font-size:clamp(2.6rem,10vw,4rem);margin:0 0 16px}.eyebrow{font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:#9b6c61}.cover{display:flex;flex-direction:column;align-items:center;justify-content:center}.cover h1{font-size:clamp(3.5rem,14vw,5rem);transform:rotate(-4deg);margin:15px}.envelope{width:min(80%,320px);height:170px;position:relative;border:0;background:#e9c6b3;margin:15px;box-shadow:0 12px 20px #7b4c3a22}.flap{position:absolute;inset:0 0 35%;background:#f7dfcf;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:.8s;z-index:3}.letter{position:absolute;top:20px;left:12%;width:76%;height:125px;background:#fff7ef;display:grid;place-content:center;font-family:"Cormorant Garamond",serif;font-size:1.2rem;transition:.8s}.seal{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);z-index:4;border-radius:50%;background:#b56e68;color:#ffe6d7;padding:10px;border:3px double #d89c8d}.envelope.open .flap{transform:rotateX(180deg)}.envelope.open .letter{transform:translateY(-35px)}.pin{display:flex;gap:6px;justify-content:center}.pin input{width:38px;height:44px;border:1px solid #d7aaa0;border-radius:8px;background:#fffaf5;text-align:center;font-size:1.2rem}.pill,.next{border:0;border-radius:999px;background:#a5655d;color:#fff5ed;padding:11px 24px;margin:14px auto}.next{display:block;background:transparent;color:#976057;font-family:"Cormorant Garamond",serif;font-size:1.1rem}#timeline{display:grid;gap:20px;text-align:left}.timelineItem{display:grid;grid-template-columns:105px 1fr;gap:13px;align-items:start}.timelineItem img{width:100%;height:125px;object-fit:cover;background:#e4c2b2;padding:5px;cursor:zoom-in}.timelineItem h3,.loveCard h3,#littleCard h3{font-family:"Cormorant Garamond",serif;margin:0;font-size:1.3rem}.timelineItem p,.loveCard p{font-family:"Cormorant Garamond",serif;line-height:1.3;margin:5px 0}.gallery{margin:20px 0;background:#fffaf5;padding:9px;box-shadow:0 8px 18px #70483822;transform:rotate(-1deg)}.gallery:nth-child(even){transform:rotate(1deg)}.gallery img{width:100%;max-height:520px;aspect-ratio:4/5;object-fit:cover;display:block;cursor:zoom-in}.loveCard{background:#f9e9df;border:1px solid #e7cabb;padding:16px;margin:18px 0;text-align:left}.loveCard img{width:100%;max-height:240px;aspect-ratio:4/3;object-fit:cover;background:#e4c2b2;padding:4px;cursor:zoom-in}.loveCard p{font-size:1.08rem}#littleCard{background:#f9e9df;padding:13px;touch-action:pan-y}#littleCard img{width:100%;height:340px;object-fit:cover;background:#e4c2b2;padding:6px;cursor:zoom-in}#littleCard p{font-family:"Cormorant Garamond",serif;font-size:1.1rem}#dots button{width:8px;height:8px;border:0;border-radius:50%;background:#d6aaa0;margin:5px}#dots button.active{background:#9f5e56}.letterPaper{background:#fff7ef;border:1px solid #e8cbbc;padding:28px 22px;text-align:left;box-shadow:0 8px 20px #80513e12;animation:floatPaper 5s ease-in-out infinite}.letterPaper p{font-family:"Cormorant Garamond",serif;font-size:1.12rem;line-height:1.45}.future{background:linear-gradient(#c98e7d,#8e5d57 65%,#533e42);color:#fff4ed}.future .script{color:#fff2e8}.wishCard{background:#fff3e9;color:#69463f;border-radius:9px;text-align:left;margin:10px 0;padding:12px}.wishCard label{font-family:"Cormorant Garamond",serif;font-size:1.1rem;display:block}.wishCard textarea,.hope textarea{width:100%;min-height:65px;border:1px solid #e5c7b8;border-radius:8px;padding:9px;background:#fffaf5}.wishCard button{border:0;border-radius:99px;background:#a5655d;color:white;padding:7px 13px;margin-top:6px}.wishSaved{white-space:pre-wrap;padding-top:7px;font-family:"Cormorant Garamond",serif}.hope{background:#fff3e9;color:#69463f;padding:14px;border-radius:12px;text-align:left}.hope h3{text-align:center;font-size:2rem}.hopeEntry{background:#fffaf5;padding:10px;margin:8px 0;border-left:3px solid #b8776d;white-space:pre-wrap}.ending{font-family:"Cormorant Garamond",serif;font-style:italic;margin-top:30px}.music-toggle{position:fixed;z-index:20;right:12px;top:12px;border:1px solid #d8aaa0;border-radius:99px;background:#fff6eddd;color:#8f5a53;padding:8px 13px}.music-picker{position:fixed;z-index:21;right:12px;top:58px;width:min(300px,calc(100vw - 24px));background:#fff7ef;border:1px solid #e4c2b2;border-radius:12px;padding:14px;box-shadow:0 10px 30px #56392e33}.music-picker label{display:block;font-size:.8rem;margin:8px 0}.music-picker input{width:100%}.music-picker button{border:0;border-radius:99px;background:#a5655d;color:white;padding:6px}.ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:10}.ambient span{position:absolute;bottom:-50px;color:#b7796d66;font-size:23px;animation:float 15s linear infinite}.ambient span:nth-child(1){left:8%}.ambient span:nth-child(2){left:28%;animation-delay:4s}.ambient span:nth-child(3){left:48%;animation-delay:7s}.ambient span:nth-child(4){left:72%;animation-delay:2s}.ambient span:nth-child(5){left:90%;animation-delay:10s}.lightbox{display:none;position:fixed;inset:0;z-index:50;background:#211512ed;align-items:center;justify-content:center}.lightbox.open{display:flex}.lightbox img{max-width:94vw;max-height:82vh;object-fit:contain}.lightbox button{position:absolute;right:20px;top:10px;font-size:2.5rem;color:white;background:none;border:0}footer{text-align:center;padding:20px;color:#8c6258}@keyframes float{0%{transform:translateY(0) rotate(0);opacity:0}15%{opacity:.8}100%{transform:translateY(-110vh) rotate(45deg);opacity:0}}@keyframes floatPaper{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-5px) rotate(.3deg)}}.reveal{opacity:0;transform:translateY(25px);transition:.7s}.reveal.visible{opacity:1;transform:translateY(0)}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Version 3 refinements */
#memories .section-heading{display:none}
#memories{padding-top:38px}
#littleCard small{display:none}
#littleCard{overflow:hidden;border-radius:18px;box-shadow:0 12px 24px #70483818}
#littleCard img{border-radius:10px}
.timelineItem img,.loveCard img{transition:transform .25s ease,filter .25s ease}
.timelineItem img:hover,.loveCard img:hover{filter:saturate(1.06)}
.lightbox{background:rgba(65,39,37,.58);backdrop-filter:blur(7px);opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease;padding:22px}
.lightbox.open{display:flex;opacity:1;visibility:visible}
.lightbox img{width:min(72vw,520px);max-height:68vh;object-fit:contain;padding:9px;background:#fff5eb;border:1px solid #f4d4c3;border-radius:16px;box-shadow:0 18px 60px #29161455;transform:scale(.82) translateY(18px);transition:transform .35s cubic-bezier(.2,.8,.2,1);border-radius:16px}
.lightbox.open img{transform:scale(1) translateY(0)}
.lightbox button{right:calc(50% - min(36vw,260px) - 22px);top:calc(16vh - 22px);width:38px;height:38px;border-radius:50%;background:#fff3e9;color:#9b5e56;font-size:1.8rem;line-height:1}
.wishCard{border-radius:13px;padding:11px 13px;margin:9px 0;box-shadow:0 4px 12px #4b2a2312}
.wishCard label{font-size:1.12rem;font-weight:600}
.wishCard p{font-size:.78rem;margin:1px 0 7px}
.wishCard textarea{min-height:38px;height:38px;resize:vertical;padding:8px 10px;font-size:.83rem}
.wishCard button{font-size:.75rem;padding:6px 12px;margin-top:5px}
.wishSaved{font-size:.92rem;padding-top:5px}
.final-photo-frame{width:min(84%,340px);margin:24px auto 18px;padding:9px 9px 25px;background:#fff4e9;box-shadow:0 12px 30px #2e1b1b35;transform:rotate(-2deg);border-radius:3px}
.final-photo-frame img{display:block;width:100%;height:250px;object-fit:cover;background:#d8aaa0}
.ending{font-size:1.25rem;letter-spacing:.02em}
.bubu-dudu-pair{display:flex;align-items:flex-end;justify-content:center;gap:22px;margin:18px auto 10px;min-height:100px}
.bear{position:relative;width:74px;height:70px;border-radius:48% 48% 42% 42%;animation:bearBob 3.4s ease-in-out infinite;box-shadow:inset -5px -6px 0 #0000000a}
.bear .ear{position:absolute;top:-12px;width:26px;height:26px;border-radius:50%;z-index:-1}
.bear .ear.left{left:2px}.bear .ear.right{right:2px}
.bear.panda{background:#fffaf4;border:2px solid #5b4947}
.bear.panda .ear{background:#3d3333}
.bear.brown{background:#a86f50;border:2px solid #80523f;animation-delay:.5s}
.bear.brown .ear{background:#80523f}
.bear .eye{position:absolute;top:24px;width:17px;height:22px;border-radius:50%;background:#443533}
.bear .eye.left{left:12px;transform:rotate(25deg)}.bear .eye.right{right:12px;transform:rotate(-25deg)}
.bear.panda .eye{width:15px;height:19px;background:#352a2a}
.bear .eye:after{content:"";position:absolute;top:4px;left:4px;width:5px;height:5px;background:white;border-radius:50%}
.bear .nose{position:absolute;top:43px;left:50%;transform:translateX(-50%);width:10px;height:7px;border-radius:50%;background:#4b3431}
.bear .cheek{position:absolute;top:44px;width:11px;height:7px;border-radius:50%;background:#e99a96aa}
.bear .cheek.left{left:3px}.bear .cheek.right{right:3px}
.bear-caption{position:absolute;left:0;right:0;bottom:-23px;font-family:"Cormorant Garamond",serif;font-size:.9rem;color:#ffe9dc}
@keyframes bearBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}
@media(max-width:380px){.lightbox img{width:82vw;max-height:65vh}.lightbox button{right:10px;top:10px}.final-photo-frame img{height:210px}}


/* Version 4: requested photo counts, layouts, and more gentle motion */
.memories-page{padding-top:58px}
.memories-page .script{margin-bottom:8px}
#memoriesGallery{display:grid;gap:16px}
#memoriesGallery .gallery{margin:8px 0}
.lovePhotos{display:grid;grid-template-columns:1fr;gap:10px;margin:12px 0}
.lovePhotos img{width:100%;height:230px;max-height:none;aspect-ratio:4/3;object-fit:cover;background:#e4c2b2;padding:4px;cursor:zoom-in;border-radius:5px}
.lovePhotos.two-photos{grid-template-columns:repeat(2,minmax(0,1fr))}
.lovePhotos.two-photos img{height:170px;aspect-ratio:3/4}
.loveCard{border-radius:14px;box-shadow:0 8px 20px #70483812;transition:transform .35s ease,box-shadow .35s ease}
.loveCard:hover{transform:translateY(-4px);box-shadow:0 14px 26px #70483820}
.gallery{transition:transform .45s ease,box-shadow .45s ease}
.gallery:hover{transform:translateY(-4px) rotate(0deg);box-shadow:0 14px 24px #7048382b}
#littleCard{transition:transform .35s ease,box-shadow .35s ease}
#littleImage{transition:opacity .25s ease,transform .35s ease}
#littleImage:hover{transform:scale(1.015)}
.closing-heart{display:flex;align-items:center;justify-content:center;gap:13px;margin:26px auto 12px;height:76px;color:#ffe9e1}
.closing-heart span{font-family:Georgia,serif;font-size:2.3rem;opacity:.8;animation:heartFloat 2.8s ease-in-out infinite}
.closing-heart i{font-style:normal;font-size:3.6rem;color:#ffd3ce;text-shadow:0 5px 18px #2e171733;animation:heartBeat 1.5s ease-in-out infinite}
.closing-heart span:last-child{animation-delay:.45s}
@keyframes heartBeat{0%,100%{transform:scale(1)}14%{transform:scale(1.18)}28%{transform:scale(1)}42%{transform:scale(1.12)}56%{transform:scale(1)}}
@keyframes heartFloat{0%,100%{transform:translateY(3px) rotate(-8deg)}50%{transform:translateY(-7px) rotate(8deg)}}
.page .script{animation:titleFade .9s both}
@keyframes titleFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:390px){.lovePhotos.two-photos img{height:140px}}

/* Preserve paragraph breaks in personal stories */
.loveCard p,#littleText{white-space:pre-line;line-height:1.8}

/* v6: Little Things arrows + compact horizontal slider section */
#little.page{min-height:0;padding:42px 24px 30px}
#little #littleCard{position:relative;max-width:430px;margin:10px auto 0;padding:12px 12px 10px;background:rgba(255,250,245,.78)}
#little #littleImage{display:block;width:100%;height:clamp(230px,68vw,390px);object-fit:cover;margin:0 auto 13px}
#little #littleTitle{margin:8px 36px 5px}
#little #littleText{margin:5px 12px 12px}
#little #dots{display:flex;justify-content:center;gap:7px;padding:8px 0 3px}
#little #dots button{width:7px;height:7px;border:0;border-radius:50%;padding:0;background:#d6b4a8;cursor:pointer}
#little #dots button.active{background:#9d5e58;transform:scale(1.25)}
.little-arrow{position:absolute;z-index:2;top:clamp(115px,34vw,195px);width:38px;height:38px;border:1px solid #fff8;background:rgba(255,247,239,.88);color:#925c55;border-radius:50%;font-size:29px;line-height:1;display:grid;place-items:center;box-shadow:0 3px 12px #4b2a231f;cursor:pointer;transition:transform .2s,background .2s}
.little-arrow:hover{transform:scale(1.1);background:#fffaf5}
.little-prev{left:18px}
.little-next{right:18px}
#little .next{margin-top:14px}
@media(max-width:390px){
 #little.page{padding:34px 18px 24px}
 #little #littleImage{height:clamp(210px,66vw,300px)}
 .little-arrow{top:clamp(105px,33vw,155px);width:34px;height:34px}
}

/* v7: Favorite Moments gallery is a clear vertical photo-and-caption sequence */
#favorites.page{min-height:0;padding:48px 22px 34px}
#favoritesGallery{display:grid;grid-template-columns:1fr;gap:20px;margin:18px auto 8px}
.favoriteMoment{position:relative;margin:0 auto;width:100%;padding:10px 10px 14px;background:#fffaf5;border:1px solid #ead2c5;box-shadow:0 9px 22px #70483818;border-radius:13px;text-align:left;overflow:hidden}
.favoriteMoment:nth-child(even){transform:rotate(.35deg)}
.favoriteMoment:nth-child(odd){transform:rotate(-.35deg)}
.favoriteMoment img{display:block;width:100%;max-height:440px;aspect-ratio:4/5;object-fit:cover;border-radius:7px;background:#ead2c5;cursor:zoom-in}
.favoriteNumber{position:absolute;z-index:1;top:17px;left:17px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff7efed;color:#9d5e58;font-family:"Cormorant Garamond",serif;font-weight:700;box-shadow:0 3px 10px #56392e20}
.favoriteCaption{padding:11px 7px 2px}
.favoriteCaption p{margin:0;color:#63443c;font-family:"Cormorant Garamond",serif;font-size:1.12rem;line-height:1.55;white-space:pre-line}
#favorites .script{margin-bottom:5px}
#favorites .eyebrow{margin:4px 0 15px}


/* Story lock: keep the page fixed until the correct PIN is accepted */
html.story-locked,
body.story-locked {
  height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
}
body.story-locked {
  position: fixed;
  inset: 0;
  width: 100%;
  touch-action: none;
}
body.story-locked .cover button,
body.story-locked .cover input {
  touch-action: manipulation;
}