:root{--paper:#faf6ed;--ink:#51413d;--rose:#a95665;--soft:#ecddd1;--green:#777c62;color:var(--ink);background:var(--paper);font-synthesis:none;font-family:ui-rounded,Trebuchet MS,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{background-image:radial-gradient(#987d6010 .7px,#0000 .7px);background-size:6px 6px;margin:0}a{color:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}button{font:inherit}button,a,summary{touch-action:manipulation}:focus-visible{outline:3px solid var(--rose);outline-offset:6px}.topbar{border-bottom:1px solid #51413d18;justify-content:space-between;align-items:center;max-width:1000px;margin:auto;padding:20px 24px;display:flex}.topbar>a{font:italic 36px Georgia,serif;text-decoration:none}.topbar>a span{color:var(--rose);font-size:21px}.topbar>span{letter-spacing:2px;font-size:10px}.topbar>span:last-child{color:var(--green);font-size:25px}main{max-width:900px;margin:auto}section{text-align:center;padding:65px 24px}.eyebrow{letter-spacing:2px;color:var(--green);font-size:10px;font-weight:700;line-height:1.8}.eyebrow>span{background:var(--rose);border-radius:50%;width:6px;height:6px;margin:0 6px 1px 0;display:inline-block}h1,h2{letter-spacing:-2px;margin:20px 0;font-family:Georgia,Times New Roman,serif;font-weight:400}h1{font-size:clamp(42px,9.6vw,76px);line-height:1.12;position:relative}em{color:var(--rose);font-weight:400}h1 em{font-size:1.3em}.little-star{color:#aa956b;vertical-align:top;margin-left:8px;font-size:42px;display:inline-block;transform:rotate(12deg)}p{font-size:15px;line-height:1.8}.intro{color:#79665f}.hero-photo{background:#fffcf6;width:min(78vw,350px);margin:48px auto 35px;padding:12px 12px 2px;position:relative;transform:rotate(-4deg);box-shadow:0 6px 25px #5e423318}.hero-photo>img{aspect-ratio:1000/1286;object-fit:cover;width:100%;height:auto;display:block}.hero-photo>p{margin:15px 0;font:italic 17px Georgia,serif}.tape{z-index:1;clip-path:polygon(3% 0,100% 3%,97% 100%,0 95%);background:#c9bc9260;width:95px;height:28px;position:absolute;top:-13px;left:50%;transform:translate(-50%)rotate(-6deg)}.cat-sticker{filter:drop-shadow(0 3px #fff9ed);width:125px;position:absolute;bottom:19px;right:-27px;transform:rotate(13deg)}.cat-sticker svg{width:100%;height:auto;display:block}.cat-sticker>span{white-space:nowrap;background:#fff8e9;border-radius:5px;padding:5px 3px;font:italic 12px Georgia,serif;display:block}.photo-heart{color:var(--rose);font-size:55px;position:absolute;top:35px;left:-25px;transform:rotate(-15deg)}.primary{border:1px solid var(--rose);background:var(--rose);color:#fff8ef;cursor:pointer;border-radius:40px;justify-content:center;align-items:center;gap:24px;min-height:52px;padding:16px 25px;font-size:14px;text-decoration:none;display:inline-flex;box-shadow:0 4px 12px #a9566514}.primary:active{transform:translateY(2px)}.primary:disabled{opacity:1;cursor:default;background:var(--green);border-color:var(--green)}.tiny{color:#8c7b6e;letter-spacing:.7px;margin-top:15px;font-size:10px}h2{letter-spacing:-1px;font-size:clamp(32px,6.5vw,46px);line-height:1.2}h2 em{margin-top:5px;display:block}section>p{color:#7b6b62;max-width:390px;margin:15px auto 30px}.letter-section{background:#f1e9dd99;border-top:1px solid #e7ddcf;border-bottom:1px solid #e7ddcf;scroll-margin-top:20px}.letter{text-align:left;background:#fffaf1;border:1px solid #d9c7b6;max-width:560px;margin:32px auto 0;box-shadow:5px 6px #e6d9c95c}.letter summary{cursor:pointer;align-items:center;gap:17px;min-height:100px;padding:24px 18px;font-family:Georgia,serif;font-size:18px;list-style:none;display:flex}.letter summary::-webkit-details-marker{display:none}.letter summary small{color:#8d7c6d;letter-spacing:.4px;margin-top:9px;font:11px Trebuchet MS,sans-serif;display:block}.envelope{width:60px;height:43px;color:var(--rose);background:linear-gradient(31deg,#0000 49%,#d6bbae 50%,#0000 52%),linear-gradient(-31deg,#0000 49%,#d6bbae 50%,#0000 52%);border:1px solid #bf9d93;border-radius:3px;flex-shrink:0;place-items:center;font-size:25px;display:grid}.open-sign{color:var(--rose);margin-left:auto}details[open] .open-sign{transform:rotate(45deg)}.letter-body{border-top:1px dashed #e1d1bf;margin:0 12px;padding:0 25px 25px}.letter-body p{font-size:15px;line-height:1.95}.letter-body .salutation,.signature{color:var(--rose);font:italic 24px/1.6 Georgia,serif}.divider{text-align:center;color:#a49069;padding-top:50px;font-size:24px}.memories{padding-top:30px}.memory-grid{gap:40px;max-width:640px;margin:50px auto 0;display:grid}.memory{background:#fffcf6;margin:0;padding:10px 10px 2px;position:relative;transform:rotate(2deg);box-shadow:0 3px 16px #5e423312}.memory:nth-child(2n){transform:rotate(-2deg)}.memory img{width:100%;height:auto;display:block}.memory:not(.wide){justify-self:center;max-width:380px}.memory figcaption{text-align:left;padding:17px 9px 12px}.memory figcaption>span{letter-spacing:2px;text-transform:uppercase;color:var(--green);font-size:9px}.memory figcaption p{margin:9px 0 3px;font:italic 19px/1.5 Georgia,serif}.wish{background:#eeeede80;border-top:1px solid #dadac7;border-bottom:1px solid #dadac7;margin-top:15px}.birthday-scene{width:240px;height:220px;margin:30px auto 20px;position:relative}.birthday-cat{width:145px;position:absolute;top:15px;left:0;transform:rotate(-8deg)}.cake{width:135px;position:absolute;bottom:20px;right:0}.cake-base{background:repeating-linear-gradient(90deg,#e4b7a7 0 14px,#eac6b5 14px 28px);border:2px solid #86624f;border-radius:8px 8px 12px 12px;place-items:center;height:66px;display:grid}.cake-base span{color:#a95665;font-size:30px}.icing{z-index:1;background:#fff5dc;border:2px solid #86624f;border-bottom:0;border-radius:50% 50% 5px 5px;height:22px;margin-bottom:-6px;position:relative}.plate{background:#c5c8b0;border:1px solid #7a8063;border-radius:50%;width:160px;height:9px;margin:-2px 0 0 -13px}.candle{background:repeating-linear-gradient(45deg,#fff2d8 0 4px,#b57a81 4px 8px);border:1px solid #86624f;width:10px;height:33px;margin:0 auto;position:relative}.flame{background:#e9ad4a;border-radius:70% 30% 60% 40%;width:13px;height:22px;animation:1s ease-in-out infinite alternate flicker;position:absolute;bottom:36px;left:-2px;box-shadow:0 0 20px #e9ad4a80}.blown .flame{display:none}.spark{color:#ae9663;font-size:30px;position:absolute}.s1{top:0;left:0}.s2{top:25px;right:0}.wish-message{max-width:360px;min-height:80px;margin:25px auto 0}.wish-message p{color:#77725f;font-size:13px}.wish-message .celebration{color:var(--rose);margin-bottom:10px;font:italic 28px Georgia,serif}.reset{color:var(--green);cursor:pointer;background:0 0;border:0;border-bottom:1px solid #b9b49e;min-height:44px;padding:12px;font-size:12px}.reset[hidden]{display:none}footer{text-align:center;padding:55px 20px 35px}footer>span{color:var(--rose);font-size:32px}footer p{margin:15px 0;font:italic 25px Georgia,serif}footer small{color:#8e7c70;font-size:12px}footer div{letter-spacing:2px;color:#8e7c70;margin-top:40px;font-size:8px}#confetti{pointer-events:none;z-index:10;position:fixed;inset:0;overflow:hidden}#confetti span{width:8px;height:13px;animation:3.5s ease-in forwards fall;position:absolute;top:-20px}@keyframes fall{to{transform:translate(var(--drift),110vh) rotate(var(--turn));opacity:0}}@keyframes flicker{to{transform:rotate(9deg)scale(.9)}}@media (width>=700px){.hero{padding-top:65px}.hero-photo{margin-top:50px}.memory-grid{grid-template-columns:1fr 1fr;gap:35px 25px}.memory.wide{grid-column:1/-1}.letter-section,.wish{border-radius:160px 160px 12px 12px}.letter-section{margin:20px 35px}.wish{margin:15px 35px}.memories{padding-bottom:80px}}@media (width<=360px){section{padding-left:20px;padding-right:20px}.eyebrow{letter-spacing:1.2px;font-size:9px}.letter summary{gap:10px;padding:20px 12px;font-size:16px}.envelope{width:45px}.cat-sticker{width:105px;right:-18px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition:none!important;animation:none!important}}
