@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&display=swap');
:root{--pink:#ecd1d6;--rose:#a94e65;--ink:#593b43;--paper:#fffdf6}*{box-sizing:border-box}body{margin:0;background:#faeeef;color:var(--ink);font-family:'DM Sans',sans-serif;background-image:radial-gradient(#ba7d8b18 .8px,transparent .8px);background-size:7px 7px}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #a94e65;outline-offset:6px}[hidden]{display:none!important}header{max-width:1400px;margin:auto;padding:30px 5%;display:flex;justify-content:space-between;font-size:11px;letter-spacing:2px}.since{letter-spacing:1px;font-style:italic}.eyebrow{font-size:11px;letter-spacing:3px;font-weight:500;color:#985468}#intro{text-align:center;padding:45px 20px 75px}h1,h2,.address,.signature{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400}h1{font-size:clamp(56px,7vw,94px);line-height:1.02;margin:24px 0}em{font-weight:400;color:var(--rose)}.subtitle{font-size:13px;line-height:1.7;margin:22px auto 48px;max-width:360px}.main-envelope{width:min(370px,88vw);height:235px;background:#eac2cb;position:relative;border:1px solid #d6a5af;box-shadow:0 18px 35px #764a5220;display:block;margin:60px auto 30px;transition:transform .5s;border-radius:3px;isolation:isolate}.main-envelope:after{content:'';position:absolute;inset:0;background:#f1d2d8;clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);z-index:-1}.flap{position:absolute;inset:0;background:#f6dde1;clip-path:polygon(0 0,100% 0,50% 57%);transform-origin:top;transition:transform .7s;z-index:1}.address{position:absolute;left:0;right:0;bottom:45px;font-size:31px}.seal{position:absolute;z-index:2;left:calc(50% - 24px);top:100px;width:48px;height:48px;border-radius:50%;background:#ad536a;color:#fff0ed;display:grid;place-items:center;font-family:Georgia;font-size:30px;box-shadow:0 3px 0 #803d50,0 5px 8px #85435440}.from{position:absolute;bottom:18px;left:0;right:0;font-size:10px;letter-spacing:2px}.main-envelope:hover{transform:translateY(-5px) rotate(-1deg)}.opened .flap{transform:rotateX(180deg)}.opened .seal{opacity:0}.hint{font-size:12px;color:#8f5f6c}.hint span{display:block;font-size:10px;margin-top:12px;letter-spacing:1px}.sparkles{position:absolute;top:170px;left:12%;font-size:32px;color:#b6798866;pointer-events:none}.sparkles span{position:absolute;left:65vw;top:50px}.sparkles span:nth-child(2){top:300px;left:0}.sparkles span:nth-child(3){left:65vw;top:370px}.section-intro{text-align:center;margin:0 auto 65px;padding:0 20px}h2{font-size:48px;line-height:1.1;margin:18px 0}.section-intro>p:last-child{font-size:12px;line-height:1.7}.scrapbook{position:relative;max-width:1320px;margin:auto;padding:0 28px;display:grid;grid-template-columns:1fr 1.8fr 1fr;gap:28px}.letter{grid-column:2;background:var(--paper);padding:35px 40px 50px;box-shadow:0 5px 25px #78554812;border:1px solid #eaded2;animation:unfold 1.2s ease both;transform-origin:top;background-image:linear-gradient(0deg,transparent 98%,#bc998b09 98%);background-size:100% 32px}.letter-top{display:flex;justify-content:space-between;color:#b97081;font-size:13px;border-bottom:1px solid #e7d4d2;padding-bottom:24px;margin-bottom:30px}.letter-top span{font-size:10px;letter-spacing:2px}#letter-copy{font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;line-height:1.6}#letter-copy p{margin:0 0 25px}#letter-copy p:first-child{font-size:23px;color:var(--rose);line-height:1.3}.signature{font-size:30px;font-style:italic;color:var(--rose);margin:35px 0 0}#memory-list{display:contents}.memory{position:absolute;width:calc((100% - 112px)/3.8);max-width:290px;left:28px;top:100px;transform:rotate(-4deg);text-align:center}.memory:nth-child(2){left:auto;right:28px;top:600px;transform:rotate(4deg)}.memory:nth-child(3){top:1100px;transform:rotate(-3deg)}.memory:nth-child(4){left:auto;right:28px;top:1600px;transform:rotate(3deg)}.memory .date{display:block;font-size:11px;letter-spacing:1.5px;margin-bottom:18px}.mini-envelope{width:100%;height:175px;background:#efc7d0;border:1px solid #d7abb5;position:relative;box-shadow:0 8px 18px #75445315;border-radius:2px}.mini-envelope:before{content:'';position:absolute;inset:0;background:#f7dfe4;clip-path:polygon(0 0,100% 0,50% 55%)}.mini-envelope:after{content:'♡';position:absolute;top:65px;left:calc(50% - 19px);width:38px;height:38px;background:#b76b7f;border-radius:50%;color:white;display:grid;place-items:center;font-size:25px}.mini-envelope:hover{transform:translateY(-5px);transition:.2s}.mini-envelope span{position:absolute;bottom:19px;left:0;right:0;font-family:'Cormorant Garamond',Georgia,serif;font-size:23px}.memory>small{display:block;margin-top:18px;font-size:10px;color:#946675;letter-spacing:1px}.reunion{text-align:center;padding:100px 20px 65px}.reunion h2{font-size:44px}#countdown{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(320px,100%);margin:30px auto 22px;padding:28px 20px 26px;background:#fff8f6;border:1px solid #e5bec9;border-radius:22px;box-shadow:0 8px 24px #7544530c;color:var(--rose)}.countdown-number{font-family:'Cormorant Garamond',Georgia,serif;font-size:88px;line-height:1;font-variant-numeric:tabular-nums}.countdown-label{font-size:14px;line-height:1.5;letter-spacing:.3px}.countdown-date{font-size:10px;line-height:1.5;letter-spacing:1.3px;color:#946675;padding-top:14px;border-top:1px solid #edd5dc;margin-top:3px}.reunion>p{font-size:12px}footer{text-align:center;font-size:11px;letter-spacing:1px;padding:20px 20px 150px}footer span{display:block;font-size:28px;margin:25px;color:var(--rose)}#player{position:fixed;z-index:5;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;background:#fffaf5ed;border:1px solid #dfc3c9;box-shadow:0 5px 30px #593b4320;border-radius:45px;padding:10px 18px;max-width:calc(100% - 24px);backdrop-filter:blur(12px)}.record{width:35px;height:35px;display:grid;place-items:center;background:#704655;color:#fff;border-radius:50%}#player small{display:block;font-size:7px;letter-spacing:1.5px;margin-bottom:4px}#track{display:block;font-size:12px;min-width:110px;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#player button{border:0;background:none;color:var(--rose);font-size:24px;min-width:30px;min-height:40px}#audio-status{position:absolute;bottom:100%;font-size:11px;background:#fffaf5;border-radius:8px;padding:5px}#audio-status:empty{display:none}dialog{border:1px solid #e4c6cd;border-radius:8px;background:#fffaf5;color:var(--ink);width:min(680px,calc(100% - 28px));max-height:88vh;padding:36px;box-shadow:0 20px 100px #4c28374a}dialog::backdrop{background:#593b4377;backdrop-filter:blur(5px)}dialog h2{font-size:40px;margin-right:20px}.close{position:sticky;float:right;top:0;background:#f4dfe4;border:0;border-radius:50%;height:38px;width:38px;font-size:28px;color:var(--rose)}.photo{width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;background:#efe2df;border:9px solid white;box-shadow:0 4px 15px #593b4315;margin:25px 0}.photo img{width:100%;height:100%;object-fit:contain}.photo.sideways img{position:absolute;left:50%;top:50%;width:56.25%;height:177.7778%;max-width:none;transform:translate(-50%,-50%) rotate(-90deg);object-fit:contain}.photo.portrait{aspect-ratio:9/12}.song-label{font-size:11px;color:var(--rose);letter-spacing:1px}#memory-caption{font-size:15px;line-height:1.9;white-space:pre-wrap}.return{display:block;margin:28px auto 0;background:#f2d6de;border:1px solid #dcaab8;padding:12px 20px;color:var(--ink);border-radius:25px}@keyframes unfold{from{opacity:0;transform:translateY(-60px) scaleY(.85)}to{opacity:1;transform:none}}@media(min-width:1500px){.scrapbook{max-width:1450px}}@media(max-width:1000px){.scrapbook{grid-template-columns:1fr 2fr 1fr;gap:15px;padding:0 16px}.letter{padding:25px}.memory{width:19%;left:16px}.memory:nth-child(2),.memory:nth-child(4){right:16px}.mini-envelope{height:145px}.mini-envelope span{font-size:19px}.mini-envelope:after{top:51px}.memory .date{font-size:9px}}@media(max-width:700px){header{padding:22px 20px;font-size:8px}.since{font-size:9px}#intro{padding-top:35px}.section-intro h2{font-size:42px}.scrapbook{display:flex;flex-direction:column;padding:0 20px;gap:35px}.letter{padding:27px 25px}#letter-copy{font-size:20px}#memory-list{display:flex;flex-direction:column;gap:48px;margin:30px 0}.memory,.memory:nth-child(n){position:relative;top:auto;left:auto;right:auto;width:78%;max-width:310px;align-self:flex-start}.memory:nth-child(even){align-self:flex-end}.mini-envelope{height:175px}.mini-envelope:after{top:65px}.mini-envelope span{font-size:25px}.memory .date{font-size:11px}.reunion{padding-top:50px}.reunion h2{font-size:36px}dialog{padding:24px}dialog h2{font-size:34px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.music-control{border:1px solid #dcaab8;background:#f6e3e8;border-radius:20px;padding:8px 16px;color:#794555;margin:0 0 20px;min-height:42px}

/* Little favorites, drawn into the stationery. */
.flower-greeting{display:flex;justify-content:center;align-items:center;height:90px;margin:-10px auto 20px;gap:8px;pointer-events:none}.flower-greeting img{width:85px;height:85px;transform:rotate(-13deg)}.flower-greeting img+img{width:76px;transform:rotate(15deg)}.letter-flowers{display:flex;justify-content:space-between;align-items:end;height:66px;margin:-14px -14px 12px;pointer-events:none}.letter-flowers img{width:65px;height:65px;transform:rotate(-12deg)}.letter-flowers img+img{width:75px;height:75px;transform:rotate(12deg)}.memory-sticker{position:absolute;width:83px;height:83px;right:-18px;top:-20px;transform:rotate(13deg);pointer-events:none;filter:drop-shadow(0 3px 2px #75445312)}.memory:nth-child(even) .memory-sticker{right:auto;left:-18px;transform:rotate(-14deg)}.reunion-flowers{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto 22px;pointer-events:none}.reunion-flowers img{width:84px;height:84px;transform:rotate(-12deg)}.reunion-flowers img:last-child{transform:rotate(12deg)}.reunion-flowers span{font-size:24px;color:var(--rose)}@media(min-width:701px) and (max-width:1000px){.memory-sticker{width:62px;height:62px;right:-10px}.memory:nth-child(even) .memory-sticker{left:-10px}}@media(max-width:700px){.flower-greeting{height:75px}.flower-greeting img{width:72px;height:72px}.flower-greeting img+img{width:66px}.memory-sticker{width:74px;height:74px;right:-12px}.memory:nth-child(even) .memory-sticker{left:-12px}}

/* Center the floral pair on the date, with matching visual weight. */
.flower-greeting,.letter-flowers{display:flex;justify-content:center;align-items:center;gap:0;width:160px;max-width:100%;height:90px;margin-left:auto;margin-right:auto;transform:translateX(-3px)}
.flower-greeting img,.flower-greeting img+img,.letter-flowers img,.letter-flowers img+img{flex:0 0 80px;width:80px;height:80px;transform-origin:50% 50%;transform:rotate(-10deg)}
.flower-greeting img+img,.letter-flowers img+img{transform:rotate(10deg)}
.letter-flowers{margin-top:-10px;margin-bottom:12px}
@media(max-width:700px){.flower-greeting,.letter-flowers{width:144px;height:80px}.flower-greeting img,.flower-greeting img+img,.letter-flowers img,.letter-flowers img+img{flex-basis:72px;width:72px;height:72px}}
