:root{--paper:#eadfcd;--paper2:#f7f0e5;--ink:#28201d;--red:#8e2e38;--tape:rgba(216,189,149,.72)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#211b19;color:var(--ink);font-family:Georgia,"Times New Roman",serif;line-height:1.7}.locked{overflow:hidden}button{font:inherit}.opening{position:fixed;inset:0;z-index:100;display:grid;place-content:center;text-align:center;padding:28px;background:radial-gradient(circle at 50% 35%,#4c2c31,#201719 70%);color:#fff7ee;transition:.8s}.opening.hidden{opacity:0;visibility:hidden}.envelope{font-size:3.5rem;color:#e6b0b6}.opening p,.hand{font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive}.opening p{margin:10px 0 0;color:#e7c2c6;font-size:1.2rem}.opening h1{font-weight:400;font-size:clamp(2.8rem,8vw,5.6rem);line-height:1.05;margin:10px 0 32px}.opening button{border:0;border-radius:2px;background:#f3e7d3;color:#392326;padding:15px 25px;cursor:pointer;font-weight:700;box-shadow:5px 6px 0 #ad6972}.opening small{display:block;margin-top:18px;color:#cdbabd}.page{background:var(--paper);background-image:linear-gradient(rgba(83,57,44,.05) 1px,transparent 1px);background-size:100% 32px;opacity:0;transition:.7s}.page.visible{opacity:1}.cover{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 24px;background:linear-gradient(rgba(38,22,23,.34),rgba(38,22,23,.55)),radial-gradient(circle at 22% 15%,#aa6570,#523139 47%,#211719);color:#fff8ef;position:relative;overflow:hidden}.cover:before,.cover:after{content:"";position:absolute;width:180px;height:240px;border:1px solid rgba(255,255,255,.16);transform:rotate(-12deg);left:-40px;top:12%}.cover:after{left:auto;top:auto;right:-55px;bottom:10%;transform:rotate(13deg)}.hand{color:var(--red);font-size:1.15rem;margin:0 0 12px}.cover .hand{color:#e5b6bd}.cover h1{font-weight:400;font-size:clamp(4rem,13vw,8.5rem);line-height:.88;letter-spacing:-.05em;margin:0}.cover h1 span{font-style:italic;color:#e7b2ba}.date{letter-spacing:.23em;font-family:Arial,sans-serif;font-size:.78rem;margin-top:36px}.down{position:absolute;bottom:28px;color:#f9e6df;text-decoration:none;font-family:Arial,sans-serif;font-size:.8rem}main{width:min(1120px,calc(100% - 32px));margin:auto}section{padding:110px 0}.first-page{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}.note{background:var(--paper2);padding:50px;box-shadow:4px 7px 18px rgba(57,38,28,.15);transform:rotate(-1deg);position:relative}.note:before,.photo:before{content:"";position:absolute;width:120px;height:34px;background:var(--tape);top:-18px;left:calc(50% - 60px)}h2{font-weight:400;font-size:clamp(2.5rem,6vw,4.6rem);line-height:1.06;margin:0 0 20px}.note>p:last-child,.ending>p:not(.hand){font-family:Arial,sans-serif;color:#645650}.counter{display:grid;grid-template-columns:1fr 1fr;gap:14px}.counter div{border-bottom:1px solid #8d7368;padding:20px 6px}.counter strong{display:block;font-weight:400;color:var(--red);font-size:clamp(2.6rem,6vw,4.5rem);line-height:1}.counter span{font-family:Arial,sans-serif;text-transform:uppercase;letter-spacing:.15em;font-size:.7rem}.center{text-align:center}.memories{border-top:1px solid rgba(80,55,43,.25)}.photo-wall{display:grid;grid-template-columns:minmax(0,1fr) 50px minmax(0,1fr);align-items:center;gap:16px;margin:45px auto 70px;max-width:1050px}.photo{background:#fffaf1;padding:18px 18px 58px;margin:0;box-shadow:8px 12px 28px rgba(58,39,29,.22);position:relative}.photo-one{transform:rotate(-3deg)}.photo-two{transform:rotate(2.5deg)}.photo img{display:block;width:100%;min-height:390px;object-fit:contain;background:#050505}.photo figcaption{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-family:"Segoe Print","Bradley Hand",cursive;font-size:1.25rem}.between{text-align:center;font-size:3rem;color:var(--red)}blockquote{max-width:800px;margin:auto;font-size:clamp(2rem,5vw,4rem);line-height:1.15;text-align:center;font-style:italic;color:#4d3530}.soundtrack{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;border-top:1px solid #9e8a7b;border-bottom:1px solid #9e8a7b}.soundtrack h2{font-size:clamp(2.1rem,5vw,3.5rem);margin:0}.soundtrack p{margin:0}.soundtrack button{border:1px solid var(--red);background:transparent;color:var(--red);padding:13px 19px;cursor:pointer}.youtube-player{grid-column:1/-1;width:100%;max-width:560px;aspect-ratio:16/9;margin:5px auto 0;box-shadow:6px 8px 20px rgba(57,38,28,.18)}.youtube-player iframe{width:100%;height:100%;border:0}.letter{max-width:850px;margin:42px auto 0;background:#fbf5e9;padding:clamp(34px,7vw,76px);box-shadow:7px 10px 28px rgba(68,45,32,.18);position:relative}.letter:before{content:"";position:absolute;inset:22px;border:1px solid rgba(108,76,61,.18)}.letter p{position:relative;font-size:clamp(1.08rem,2vw,1.28rem);margin:0 0 1.3em}.letter .dear{font-family:"Segoe Print","Bradley Hand",cursive;color:var(--red);font-size:clamp(1.7rem,4vw,2.7rem)}.signature{text-align:right;margin-top:45px!important}.signature strong{font-family:"Segoe Print","Bradley Hand",cursive;color:var(--red);font-size:1.45rem}.ending{text-align:center;max-width:850px;margin:auto}.big-heart{font-size:4rem;color:var(--red)}footer{text-align:center;padding:34px 20px 55px;font-family:Arial,sans-serif;color:#75645c;font-size:.8rem}@media(max-width:760px){main{width:min(100% - 22px,1120px)}section{padding:74px 0}.first-page{grid-template-columns:1fr;gap:32px}.note{padding:40px 26px}.photo-wall{display:flex;flex-direction:column;gap:34px}.photo{width:min(100%,520px);padding:13px 13px 52px}.photo img{min-height:0}.between{line-height:1}.soundtrack{grid-template-columns:1fr}.soundtrack button{width:100%}.cover h1{font-size:clamp(3.9rem,20vw,6rem)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.opening,.page{transition:none}}