:root{--red:#a52b35;--ink:#552b36;--lilac:#d7cbe2;--paper:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px}body{background:var(--lilac);color:var(--ink);margin:0;font-family:Cormorant Garamond,Georgia,serif}body:after{content:"";pointer-events:none;z-index:20;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.3' d='M0 0h160v160H0z'/%3E%3C/svg%3E");position:fixed;inset:0}a{color:inherit;text-decoration:none}a:hover{text-underline-offset:5px;text-decoration:underline}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:1px solid #552b3655;border-radius:30px;padding:8px 13px}a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:5px}.skip{position:absolute;top:-100px}.skip:focus{z-index:30;background:var(--paper);top:10px}header{justify-content:space-between;align-items:center;padding:20px 5%;font-size:15px;display:flex}nav{gap:35px;display:flex}.brand{font-size:30px}.brand span{margin-left:10px;font-size:17px;font-style:italic}.hero{min-height:680px;padding:24px 7% 30px;position:relative}.hero-top{letter-spacing:2px;justify-content:space-between;font:10px Arial,sans-serif;display:flex}.hero h1{z-index:3;color:var(--red);letter-spacing:-7px;margin:30px 0 -35px 4%;font-family:La Belle Aurore,Brush Script MT,cursive;font-size:clamp(90px,15vw,220px);font-weight:400;line-height:.85;position:relative;transform:rotate(-5deg)}.hero h1>span:first-child{letter-spacing:0;margin:0 0 12px 12%;font:italic 26px Cormorant Garamond,Georgia,serif;display:block}.star{vertical-align:top;margin:20px 0 0 25px;font:70px Georgia;display:inline-block}.hero-image{background:#beb5c5;border-radius:2px 2px 35% 2%/2px 2px 8% 2%;height:clamp(260px,33vw,440px);margin:0 4%;position:relative;box-shadow:inset 0 0 70px #a69baa30}.photo-note{color:#594d64;font:20px La Belle Aurore,cursive;position:absolute;bottom:22px;left:30px}.corner{font-size:30px;position:absolute;bottom:18px;right:30px}.flower{color:#75526a;width:140px}.hero-flower{z-index:4;width:155px;position:absolute;bottom:80px;right:3%;transform:rotate(22deg)}.hero-bottom{justify-content:space-between;align-items:center;padding-top:22px;font-size:18px;display:flex}.hero-bottom p{margin:0;font-style:italic}.hero-bottom a{font-size:16px}.hero-bottom a span{margin-left:25px}.hero-bottom>span{font-size:30px}.scrapbook{background:var(--paper);padding:110px 7% 70px;overflow:hidden}.section-intro{text-align:center}.eyebrow{letter-spacing:2px;font:10px Arial,sans-serif}h2{margin:25px 0;font-size:clamp(44px,6vw,78px);font-weight:400;line-height:1}h2 em{color:var(--red)}.section-intro p{font-size:19px}.spread{border-top:1px solid #552b3625;max-width:1200px;height:780px;margin:60px auto;position:relative}.page-number{font-style:italic;position:absolute;top:22px}.photo{background:#fff;margin:0;padding:15px 15px 45px;position:absolute;transform:rotate(-5deg);box-shadow:3px 9px 20px #4a303122}.photo:before{content:"";z-index:2;background:#d9cbea99;width:100px;height:30px;position:absolute;top:-12px;left:35%;transform:rotate(-7deg)}.photo-space{background:#eee9f5;height:100%;box-shadow:inset 0 0 60px #c2b0d526}.photo figcaption{text-align:center;padding:10px 0;font:20px La Belle Aurore,cursive}.large{width:48%;height:450px;top:100px;left:8%}.small{width:30%;height:330px;top:300px;right:6%;transform:rotate(8deg)}.scribble{font:29px La Belle Aurore,cursive;position:absolute;top:60px;right:12%;transform:rotate(8deg)}.spread>.flower{position:absolute;bottom:100px;left:-3%;transform:rotate(-20deg)}.paper-word{font-size:52px;line-height:1;position:absolute;bottom:25px;left:9%}.paper-word em{color:var(--red)}.spread-two .large{top:90px;left:45%}.spread-two .small{top:260px;left:8%}.spread-two .paper-word{left:48%}.round-note{border:1px solid var(--red);text-align:center;border-radius:50%;place-content:center;width:145px;height:145px;font-size:23px;font-style:italic;display:grid;position:absolute;top:70px;left:12%;transform:rotate(-12deg)}.spread-three .large{width:42%;left:12%}.spread-three .small{top:150px;right:8%}.spread-three>.flower{bottom:50px;left:auto;right:10%}.letter-stage{background:#c9b9d4;flex-direction:column;justify-content:space-around;align-items:center;height:100vh;min-height:900px;padding:40px 20px;display:flex;position:relative;overflow:hidden}.letter-heading{text-align:center;z-index:6}.letter-heading p{font-size:18px;font-style:italic}.envelope{perspective:1200px;width:min(600px,80vw);height:330px;margin-top:170px;position:relative}.envelope-back{z-index:1;background:#e7def0;position:absolute;inset:0;box-shadow:0 15px 30px #552b3625}.letter-sleeve{z-index:2;position:absolute;inset:0;overflow:hidden}.letter-paper{background:#fff;width:86%;height:440px;position:absolute;bottom:15px;left:7%;box-shadow:0 0 8px #552b3620}.envelope-front{z-index:4;clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);background:#fff;position:absolute;inset:0}.flap{clip-path:polygon(0 0,100% 0,50% 58%);transform-origin:top;z-index:5;background:#f6f1fc;position:absolute;inset:0}.seal{z-index:6;color:#e8b7ad;background:#8d2639;border:4px double #b45968;border-radius:50%;place-items:center;width:60px;height:60px;font:italic 28px Georgia;display:grid;position:absolute;top:46%;left:45%;box-shadow:1px 3px 6px #552b3660}.envelope-address{z-index:6;font:26px La Belle Aurore,cursive;position:absolute;bottom:30px;left:35%}footer{flex-wrap:wrap;justify-content:space-between;padding:60px 7%;font-size:14px;display:flex}.signoff{text-align:center;width:100%;color:var(--red);margin:65px 0;font:clamp(35px,7vw,85px) La Belle Aurore,cursive}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.letter-sleeve{top:-500px}.letter-paper{transform:translateY(-55%)}.envelope-back{z-index:0}.flap{z-index:1;transform:rotateX(180deg)}.seal{display:none}}@media (max-width:650px){header{flex-wrap:wrap;gap:12px;padding:15px 6%}nav{gap:16px;font-size:13px}.brand span{display:none}header button{font-size:12px}.hero{min-height:620px;padding:25px 5%}.hero-top{letter-spacing:1px;font-size:8px}.hero h1{letter-spacing:-4px;margin-top:55px;margin-bottom:-15px;margin-left:0;font-size:25vw}.hero h1>span:first-child{margin-left:8%;font-size:22px}.star{margin:5px;font-size:35px}.hero-image{height:300px;margin:0}.hero-flower{width:95px;bottom:100px;right:0}.hero-bottom{gap:15px;font-size:15px}.hero-bottom a{max-width:150px;font-size:14px}.hero-bottom>span{font-size:22px}.scrapbook{padding:75px 6% 25px}.spread{height:670px;margin:40px auto}.large{width:65%;height:320px;top:90px;left:2%}.small{width:48%;height:240px;top:320px;right:0}.paper-word{font-size:36px;bottom:15px;left:2%}.scribble{font-size:22px;top:40px;right:0}.spread>.flower{width:85px;bottom:70px}.spread-two .large{left:30%}.spread-two .small{top:310px;left:0}.spread-two .paper-word{bottom:10px;left:30%}.round-note{width:95px;height:95px;font-size:18px;top:100px;left:0}.spread-three .large{width:60%;left:0}.spread-three .small{top:290px;right:0}.letter-stage{min-height:800px}.envelope{height:230px;margin-top:200px}.letter-paper{height:340px}.seal{width:45px;height:45px;left:43%}.envelope-address{font-size:23px;left:25%}footer{font-size:12px}}.hero{min-height:900px;padding-top:65px}.hero h1{letter-spacing:-4px;width:76%;margin:40px 0 -15px;font-size:clamp(100px,14vw,195px);line-height:.9}.hero h1>span:first-child{font:inherit;margin:0 0 10px 6%;font-size:.65em}.birthday-word{margin-left:8%;display:block}.hero-image{background:#e9e1f1;border:14px solid #fff;border-bottom-width:42px;border-radius:0;width:65%;height:340px;margin-left:26%;transform:rotate(3deg);box-shadow:4px 12px 24px #49305822}.hero-flower{width:240px;bottom:55px;left:1%;right:auto;transform:rotate(-18deg)}.hero-bottom{padding-left:27%;font:28px La Belle Aurore,cursive}.calendar{z-index:4;background:#fff;width:245px;padding:20px 22px 25px;position:absolute;top:55px;right:7%;transform:rotate(7deg);box-shadow:3px 8px 20px #49305822}.calendar h2{text-align:center;color:var(--red);margin:0 0 12px;font:40px La Belle Aurore,cursive}.calendar-grid{text-align:center;grid-template-columns:repeat(7,1fr);gap:8px 3px;font-size:17px;display:grid}.calendar-grid b{color:#78618c;font-weight:400}.calendar-grid span{line-height:26px;position:relative}.birthday-date{color:var(--red);font-weight:700}.birthday-date:after{content:"";border:2px solid var(--red);border-radius:48% 55% 43% 50%;position:absolute;inset:-3px;transform:rotate(-15deg)}.photo figcaption{font-size:26px}.section-intro h2,.paper-word,.letter-heading h2{font-family:La Belle Aurore,cursive}.spread{border:0}.round-note{background:#fff}.letter-sleeve{clip-path:inset(0 -10%);overflow:visible}.letter-paper{background:#fff}.signoff{margin:30px 0}footer{justify-content:center}@media (max-width:650px){.hero{min-height:930px;padding-top:245px}.calendar{width:210px;padding:15px 20px;top:28px;right:9%}.calendar h2{font-size:34px}.calendar-grid{gap:5px 2px;font-size:16px}.hero h1{letter-spacing:-3px;width:100%;margin:30px 0 -5px;font-size:27vw}.hero h1>span:first-child{font-size:.7em}.hero-image{border-width:10px 10px 35px;width:88%;height:275px;margin-left:9%}.hero-flower{width:155px;bottom:55px;left:-5%}.hero-bottom{padding-left:35%;font-size:24px}.photo figcaption{font-size:23px}}.section-intro{max-width:760px;margin:0 auto 90px}.section-intro h2{font-size:clamp(52px,7vw,92px);line-height:1.12}.spread-two{margin-top:110px;margin-bottom:130px}.spread-three{height:700px}.spread-three .paper-word{bottom:60px}.footer-credit{text-align:center;width:100%;margin:18px 0 0;font:16px/1.6 Cormorant Garamond,Georgia,serif}.footer-credit a{text-underline-offset:4px;text-decoration:underline;text-decoration-thickness:1px}@media (max-width:650px){.section-intro{margin-bottom:55px}.spread-two{margin-top:65px;margin-bottom:75px}.spread-three{height:670px}.spread-three .paper-word{bottom:15px}.footer-credit{font-size:15px}}