:root{color:#453532;font-synthesis:none;text-rendering:optimizelegibility;background:#f4eee5;font-family:DM Sans,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:#f4eee5 radial-gradient(#6e4d3d0e .7px,#0000 .7px) 0 0/5px 5px;margin:0}button,a{font:inherit}.topbar{letter-spacing:.18em;color:#92796b;border-bottom:1px solid #dfd3c5;justify-content:space-between;align-items:center;height:64px;padding:0 7vw;font-size:9px;display:flex}.topbar a{color:inherit;text-decoration:none}.brand{letter-spacing:0;align-items:center;gap:8px;font-family:Playfair Display,serif;font-size:17px;display:flex;color:#5a373b!important}.cover{place-items:center;min-height:calc(100svh - 64px);padding:44px 20px;display:grid;position:relative;overflow:hidden}.cover-paper{text-align:center;background-color:#eee3d4;background-image:linear-gradient(90deg,#0000 97%,#e6d9c9 100%),repeating-linear-gradient(0deg,#0000 0 31px,#9d7c660b 32px);background-position:0 0;background-repeat:repeat;background-size:auto;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;border:1px solid #e1d1bf;width:min(550px,90vw);min-height:660px;padding:64px 35px 34px;position:relative;transform:rotate(-1deg);box-shadow:0 18px 55px #6d50401c,0 2px 6px #6d50401a}.eyebrow{letter-spacing:.22em;color:#9a776e;font-size:9px;font-weight:700}.cover-heart{color:#9a555b;margin:30px auto 13px}.cover h1{color:#603c40;letter-spacing:-.055em;margin:0;font:500 clamp(65px,10vw,96px)/.92 Playfair Display,serif}.cover h1 em,.section h2 em,.quote-band em{color:#a15f65;font-weight:400}.cover-subtitle{color:#806a5f;margin:20px 0 28px;font:italic 15px Playfair Display,serif}.cover-photo{background:#d4c4b2;width:205px;height:190px;margin:0 auto;padding:10px 10px 28px;transform:rotate(3deg);box-shadow:0 5px 15px #503b3026}.photo-placeholder{background:linear-gradient(140deg,#b8a28e,#e0d2bf 55%,#8d7770);position:relative}.photo-placeholder:before{content:"♡";color:#f4eee5a8;place-items:center;font:55px Playfair Display;display:grid;position:absolute;inset:0}.cover-snapshot span{color:#6c5149;font:12px Caveat;position:absolute;bottom:7px;left:0;right:0}.cover-date{letter-spacing:.2em;color:#9b8275;margin-top:36px;font-size:8px}.scroll-cue{color:#8d6f64;letter-spacing:.18em;justify-content:center;align-items:center;gap:9px;font-size:8px;text-decoration:none;display:flex;position:absolute;bottom:27px;left:0;right:0}.cover-stamp{color:#a15f65;border:1px solid #a77e76;border-radius:50%;place-content:center;width:64px;height:64px;font:14px/1 Caveat;display:grid;position:absolute;top:34px;right:26px;transform:rotate(12deg)}.cover-side-note{color:#a15f65;flex-direction:column;align-items:center;font:22px/1.05 Caveat;display:flex;position:absolute;bottom:100px;right:calc(50% - 350px);transform:rotate(8deg)}.section{max-width:1200px;margin:auto;padding:110px 8vw}.intro{text-align:center;max-width:720px}.section h2{letter-spacing:-.035em;color:#5b3d3c;margin:20px 0;font:500 clamp(38px,6vw,62px)/1.12 Playfair Display,serif}.intro>p:not(.handwritten),.future>p:not(.progress-note),.letter-section>p{color:#806f65;max-width:480px;margin:0 auto;font-size:14px;line-height:1.9}.handwritten{color:#a15f65;font:28px Caveat,cursive}.intro .handwritten{margin-top:18px}.memories{padding-top:70px}.section-heading{justify-content:space-between;align-items:end;margin-bottom:48px;display:flex}.page-number{color:#a58b7d;font:italic 13px Playfair Display}.memory-grid{grid-template-columns:repeat(3,1fr);align-items:start;gap:36px;display:grid}.memory-card{cursor:pointer;text-align:left;transform:rotate(var(--tilt));background:0 0;border:0;padding:0;transition:transform .25s}.memory-card:hover{transform:rotate(0)translateY(-8px)}.polaroid{background:#fffdf8;padding:13px 13px 20px;box-shadow:0 7px 20px #59443818}.memory-image{filter:saturate(.75);background-position:50%;background-size:cover;height:260px}.polaroid-caption{flex-direction:column;gap:6px;padding:15px 4px 0;display:flex}.polaroid-caption span{letter-spacing:.16em;color:#a17f71;font-size:8px}.polaroid-caption strong{color:#68484a;font:500 20px Caveat}.memory-tag{text-align:center;letter-spacing:.13em;color:#9d8074;margin-top:18px;font-size:8px;display:block}.tape{z-index:1;background:#d8c3a3b5;width:75px;height:20px;position:absolute;top:-8px;left:calc(50% - 37px);transform:rotate(-5deg)}.hint{text-align:center;color:#a58c7e;margin-top:40px;font:17px Caveat}.quote-band{color:#f6eee4;text-align:center;background:#6a4548;margin:40px 0;padding:80px 20px}.quote-mark{color:#d8b5a9;font:70px/.7 Playfair Display}.quote-band p{margin:15px 0 22px;font:clamp(24px,4vw,38px)/1.4 Playfair Display}.quote-band em{color:#e6c1b4}.quote-credit{letter-spacing:.2em;color:#dfc9bc;font-size:8px}.future{text-align:center;max-width:760px}.future-icon,.letter-decoration{color:#9e6265;border:1px solid #d9c5b7;border-radius:50%;place-items:center;width:54px;height:54px;margin:0 auto 24px;display:grid}.adventure-list{text-align:left;border-top:1px solid #ddcfc1;max-width:590px;margin:42px auto 0}.adventure{cursor:pointer;color:#6d5750;border-bottom:1px solid #ddcfc1;align-items:center;gap:15px;padding:17px 5px;font:16px Playfair Display;display:flex}.adventure input{opacity:0;position:absolute}.custom-check{color:#0000;border:1px solid #c6a99c;border-radius:50%;flex:none;place-items:center;width:22px;height:22px;display:grid}.adventure input:checked+.custom-check{color:#fff;background:#9e6265;border-color:#9e6265}.adventure input:checked~span:nth-of-type(2){opacity:.55;text-decoration:line-through}.adventure small{color:#b29b8c;margin-left:auto;font:10px DM Sans}.progress-note{letter-spacing:.08em;color:#a08779!important;margin-top:20px!important;font-size:10px!important}.letter-section{text-align:center;background:#eee3d5;max-width:none;margin-top:30px;padding:95px 20px}.letter-section>p{margin-bottom:30px}.letter-button{color:#fff8f0;letter-spacing:.16em;cursor:pointer;background:#9b6869;border:1px solid #9b6869;align-items:center;gap:12px;padding:15px 23px;font-size:9px;transition:all .2s;display:inline-flex}.letter-button:hover{background:#75494c;transform:translateY(-2px)}footer{color:#a18a7c;letter-spacing:.16em;justify-content:space-between;align-items:center;padding:25px 7vw;font-size:8px;display:flex}footer button{color:#a15f65;cursor:pointer;background:0 0;border:0}.overlay{z-index:5;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#3426259c;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.note-modal,.letter-modal{background:#f8f1e7 repeating-linear-gradient(0deg,#0000 0 30px,#bba99b1c 31px);width:100%;max-width:510px;padding:55px clamp(25px,7vw,60px);position:relative;box-shadow:0 20px 70px #20141355}.note-modal h2,.letter-modal h2{color:#674447;margin:18px 0;font:36px Playfair Display}.note-modal p,.letter-modal p{color:#715d54;font:15px/1.9 Playfair Display}.note-modal .handwritten{text-align:right;margin-top:25px;display:block}.letter-modal{max-height:90vh;overflow:auto}.letter-modal h2{font-style:italic}.letter-modal .signoff{margin-top:26px;font-size:25px}.signature{text-align:right;font:italic 18px Playfair Display!important}.close{color:#876d62;cursor:pointer;background:0 0;border:0;position:absolute;top:17px;right:17px}.secret-toast{color:#fff3e9;z-index:8;white-space:nowrap;background:#674447;padding:14px 22px;font:20px Caveat;position:fixed;bottom:22px;left:50%;transform:translate(-50%);box-shadow:0 8px 25px #34262533}@media (width<=760px){.topbar{height:56px;padding:0 22px}.topbar>a:last-child{font-size:8px}.cover{min-height:calc(100svh - 56px);padding:30px 15px}.cover-paper{min-height:590px;padding:55px 20px 30px}.cover h1{font-size:72px}.cover-photo{width:180px;height:165px}.cover-side-note{font-size:17px;bottom:55px;right:5px}.cover-stamp{width:53px;height:53px;font-size:12px;top:20px;right:15px}.section{padding:78px 23px}.section-heading{align-items:start;gap:10px}.section-heading h2{font-size:42px}.memory-grid{grid-template-columns:1fr;gap:42px;max-width:390px;margin:auto}.memory-image{height:290px}.memory-card:nth-child(2){margin-left:20px}.memory-card:nth-child(3){margin-right:15px}.quote-band{margin:10px 0;padding:65px 20px}.quote-band p{font-size:27px}.adventure{font-size:14px;line-height:1.4}.letter-section{padding:75px 22px}footer{letter-spacing:.1em;padding:22px 16px;font-size:7px}.letter-modal{padding:48px 25px}.letter-modal h2{font-size:31px}}
