@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:wght@400;500;600&family=Caveat:wght@400;500&display=swap');
:root{--paper:#f5eee5;--ink:#382e2b;--red:#9b383a;--line:#d9cdc0}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}.grain{position:fixed;inset:0;pointer-events:none;opacity:.15;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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.3' filter='url(%23n)'/%3E%3C/svg%3E");z-index:3}header{margin:0 6%;height:90px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:12px;letter-spacing:1px}header a{font-family:'Cormorant Garamond',serif;font-size:23px;letter-spacing:0}header i{color:var(--red);margin-left:18px}.hero{position:relative;text-align:center;padding:60px 20px 30px;overflow:hidden}.eyebrow{font-size:10px;letter-spacing:2.5px;font-weight:500}.hand{font-family:Caveat,cursive;color:var(--red);font-size:30px;margin:30px 0 8px}h1,h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;letter-spacing:-3px;line-height:1.02}h1{font-size:clamp(70px,8vw,110px);margin:5px 0 24px}em{color:var(--red);font-weight:400}.intro{font-size:14px;line-height:1.9;color:#786c62}.envelope{display:block;position:relative;margin:44px auto 35px;width:340px;height:187px;background:#eaddcd;border:1px solid #d6c6b2;box-shadow:0 16px 27px #67492c13;transform:rotate(-5deg);color:var(--ink);transition:transform .3s}.envelope:hover{transform:rotate(-1deg) translateY(-5px)}.envelope:before{content:'';position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 64%);background:#f0e5d7;border-top:1px solid #d6c6b2}.stamp{position:absolute;right:16px;top:16px;border:1px dashed #a48b77;padding:6px 10px;font-family:Georgia;font-size:15px;color:var(--red)}.envelope-label{position:absolute;left:25px;bottom:45px;font-family:Caveat,cursive;font-size:28px}.seal{position:absolute;top:83px;left:148px;border-radius:50%;width:44px;height:44px;background:var(--red);color:#edd4bb;display:grid;place-items:center;font-size:22px;box-shadow:0 2px 0 #69292a}.tap{position:absolute;bottom:16px;left:25px;font-size:8px;letter-spacing:2px}.date{font-size:9px;letter-spacing:1.4px}.date span{color:var(--red);margin:0 13px}.down{display:block;margin:33px 0 0;font-size:10px;color:#83756b}.scribble{position:absolute;right:10%;top:330px;font-family:Caveat,cursive;color:var(--red);font-size:30px;transform:rotate(12deg)}section:not(.hero){max-width:1000px;margin:auto;padding:100px 60px}.story{border-bottom:1px solid var(--line)}h2{font-size:clamp(42px,5vw,66px);letter-spacing:-1.7px;margin:25px 0 40px}.numbers{display:flex;justify-content:space-between;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0;margin-bottom:35px}.numbers div{display:flex;flex-direction:column}.numbers strong{font-family:'Cormorant Garamond',serif;color:var(--red);font-weight:400;font-size:56px}.numbers span{font-size:11px;color:#83756b}.story>p,.ending>p{font-size:14px;line-height:2;color:#786c62;max-width:630px}blockquote{margin:65px 0 0;text-align:center;font-family:'Cormorant Garamond',serif;font-size:43px;font-style:italic;color:var(--red)}blockquote span{display:block;margin-top:22px;font-family:'DM Sans',sans-serif;font-size:9px;font-style:normal;letter-spacing:2px;color:#786c62}.promise{display:grid;grid-template-columns:1fr 1fr;column-gap:70px}.promise .eyebrow{grid-column:1/-1}.promise h2{font-size:53px}.promise-list article{display:flex;gap:22px;border-bottom:1px solid var(--line);padding:25px 0}.promise-list article>span{font-size:10px;color:var(--red);padding-top:8px}h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:28px;margin:0 0 8px}.promise-list p{font-size:12px;line-height:1.9;color:#786c62;margin:0}.ending{text-align:center;border-top:1px solid var(--line)}.ending>p{margin:0 auto 30px}.primary{border:0;background:var(--red);color:#fff5e9;padding:17px 25px;font:12px 'DM Sans',sans-serif;border-radius:2px}.closing{margin-top:55px}.small{font-size:8px;letter-spacing:2px}footer{border-top:1px solid var(--line);margin:0 6%;padding:25px 0;font-size:10px;color:#8a7d73;display:flex;justify-content:space-between}dialog{border:1px solid var(--line);background:#fcf7ef;color:var(--ink);width:min(700px,92vw);max-height:88dvh;padding:30px 45px;border-radius:3px;box-shadow:0 30px 100px #26181550}dialog::backdrop{background:#30242199;backdrop-filter:blur(5px)}.letter-top{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:2px;border-bottom:1px solid var(--line);padding-bottom:15px}.letter-top button{border:0;background:none;color:var(--red);font-size:22px}#letterBody p{font-size:14px;line-height:2;color:#665950}#letterBody p:first-child{font-family:'Cormorant Garamond',serif;font-size:32px;color:var(--red);line-height:1.2}#letterBody p:nth-child(2){font-size:10px;letter-spacing:1px}.heart{position:fixed;pointer-events:none;z-index:9;bottom:-20px;color:var(--red);animation:rise 3s ease-out forwards}@keyframes rise{to{transform:translateY(-95vh) rotate(35deg);opacity:0}}button:focus-visible,a:focus-visible{outline:2px solid var(--red);outline-offset:6px}@media(max-width:650px){header{height:72px}.hero{padding-top:40px}.eyebrow{font-size:8px;letter-spacing:1.5px}.hand{font-size:26px}h1{font-size:76px}.scribble{display:none}.envelope{width:290px;height:170px}.seal{left:124px;top:73px}.envelope-label{font-size:25px}.date{font-size:7px;letter-spacing:.7px}.date span{margin:0 4px}section:not(.hero){padding:75px 25px}.numbers strong{font-size:45px}.numbers span{font-size:9px}blockquote{font-size:34px}.promise{display:block}.promise h2{font-size:43px}.ending h2{font-size:46px}footer{font-size:8px;gap:20px}dialog{padding:22px}#letterBody p{font-size:13px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before{animation:none!important;transition:none!important}}

.music-player{position:fixed;left:22px;bottom:20px;z-index:5;display:flex;align-items:center;gap:12px;padding:11px 16px 11px 10px;border:1px solid #d9cdc0;background:#fcf7eff5;box-shadow:0 5px 25px #382e2b12;border-radius:40px;backdrop-filter:blur(8px)}.music-player button{border:0;border-radius:50%;background:var(--red);color:#fff5e9;width:38px;height:38px;font-size:19px}.music-player strong{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;font-weight:500}.music-player span{display:block;font-size:9px;color:#83756b;margin-top:2px}.volume-label{font-size:0;display:flex;align-items:center;margin-left:7px}.volume-label input{width:62px;accent-color:var(--red)}.playing button{box-shadow:0 0 0 4px #9b383a12}footer{padding-bottom:100px}dialog .primary{margin-bottom:15px}@media(max-width:650px){.music-player{left:12px;bottom:12px;padding:8px 12px 8px 8px;gap:9px}.music-player strong{font-size:16px}.music-player span{font-size:8px}.music-player button{width:34px;height:34px}.volume-label input{width:45px}}