@charset "UTF-8";

:root{--paper:#f7f2eb;--ink:#423c36;--muted:#81776e;--rose:#a86b64;--rose-dark:#85504a;--line:#e4dbd1;--serif:'Lora',Georgia,serif;--display:'Italiana',Georgia,serif;--sans:'DM Sans',sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23584a3e' filter='url(%23noise)' opacity='.6' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid var(--rose-dark);outline-offset:6px}
h1:focus,h2:focus{outline:none}
.site-header{max-width:1440px;margin:auto;padding:33px 6.4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.wordmark{font-family:var(--serif);font-size:27px;letter-spacing:-1px;text-decoration:none;color:var(--ink);display:flex;gap:10px;align-items:center}
.wordmark svg{width:22px;fill:none;stroke:var(--rose);stroke-width:1.4}
.wordmark-dot{color:var(--rose);margin-left:-10px}
.header-note{font-family:var(--serif);font-size:12px;font-style:italic;color:var(--muted)}
.music-toggle{display:flex;align-items:center;gap:10px;padding:10px 15px;border:1px solid var(--line);background:transparent;border-radius:30px;color:var(--muted);font-size:11px}
.music-toggle:hover{border-color:var(--rose)}
.music-bars{height:13px;display:flex;gap:3px;align-items:center}
.music-bars i{width:2px;height:5px;background:var(--rose)}
.music-bars i:nth-child(2){height:12px}.music-bars i:nth-child(3){height:8px}
.music-toggle[aria-pressed=true] .music-bars i{animation:sound-wave 1.2s ease-in-out infinite alternate}
.music-bars i:nth-child(2){animation-delay:-.5s}.music-bars i:nth-child(3){animation-delay:-.8s}
.intro-section{max-width:1255px;margin:0 auto;min-height:calc(100svh - 172px);display:grid;grid-template-columns:1.12fr 1fr;gap:55px;align-items:center;padding:65px 42px 75px}
.hero-copy{animation:arrive .85s both}
.eyebrow{font-size:10px;letter-spacing:2.4px;font-weight:500;color:var(--rose-dark);display:flex;align-items:center;gap:10px;margin:0 0 26px}
.eyebrow>span{width:20px;height:1px;background:var(--rose)}
h1{font-family:var(--display);font-weight:400;font-size:clamp(57px,6.8vw,91px);line-height:1.08;letter-spacing:-2.7px;margin:0 0 28px}
h1 em{font-family:var(--serif);font-weight:400;font-size:.86em;color:var(--rose);letter-spacing:-3.8px}
.hero-description{font-size:14px;color:var(--muted);line-height:1.95;margin:0;max-width:380px}
.hero-bottom{display:flex;gap:17px;align-items:center;margin-top:43px}
.small-flower{color:var(--rose);font-size:30px;font-weight:400}
.hero-bottom p{font-size:11px;line-height:1.85;margin:0}.hero-bottom p span{color:var(--muted)}
.experience-panel{min-width:0;position:relative;animation:arrive 1s .15s both}
.intro-view{text-align:center}
.envelope-scene{height:340px;position:relative;max-width:420px;margin:auto}
.envelope-scene::before{content:'';position:absolute;width:320px;height:320px;left:50%;top:0;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,#eee3d9 0%,#f2eae1 45%,transparent 72%)}
.letter-peek{position:absolute;left:calc(50% - 122px);top:37px;width:246px;height:219px;background:#fffcf7;transform:rotate(-8deg);padding:31px 24px;text-align:left;box-shadow:0 5px 35px #604b3710;border:1px solid #e5dacb;font-family:var(--serif);font-size:19px;line-height:1.6;color:#766451}
.letter-peek em{display:block;font-size:17px;color:var(--rose)}
.letter-lines{padding-top:18px}.letter-lines i{display:block;height:1px;background:#e8dfd5;margin-bottom:13px;width:85%}.letter-lines i:last-child{width:62%}
.envelope{position:absolute;left:calc(50% - 160px);top:142px;width:320px;height:180px;transform:rotate(5deg);filter:drop-shadow(0 17px 18px #6f50341c)}
.envelope-back{position:absolute;inset:0;background:#d8bda2;border-radius:3px}
.envelope-front{position:absolute;inset:0;background:linear-gradient(135deg,#e3ccb5,#e9d4bf);clip-path:polygon(0 0,50% 59%,100% 0,100% 100%,0 100%)}
.envelope-fold{position:absolute;inset:0;background:#ead6c2;clip-path:polygon(0 100%,50% 37%,100% 100%);border-bottom:1px solid #cdb197}
.wax-seal{position:absolute;left:calc(50% - 24px);top:82px;width:48px;height:48px;background:var(--rose);border:3px solid #b57970;outline:1px solid #8d5952;border-radius:45% 51% 43% 50%;box-shadow:1px 3px 6px #6f403333;display:grid;place-items:center}
.wax-seal svg{width:21px;fill:none;stroke:#e2b4a8;stroke-width:1.3}
.envelope-caption{position:absolute;top:278px;left:0;right:0;font-family:var(--serif);font-style:italic;font-size:13px;color:#a1866b;transform:rotate(5deg)}
.scene-spark{position:absolute;color:#b09077;font-size:30px}.spark-one{top:49px;left:20px;transform:rotate(10deg)}.spark-two{top:125px;right:12px;font-size:23px}
.primary-button{border:1px solid var(--rose);border-radius:4px;background:var(--rose);color:#fffaf6;min-height:49px;padding:13px 24px;display:inline-flex;gap:38px;align-items:center;justify-content:space-between;font-size:12px;transition:background .2s,transform .2s}
.primary-button:hover{background:var(--rose-dark);border-color:var(--rose-dark);transform:translateY(-2px)}
.primary-button:active{transform:translateY(0)}
.primary-button>span{font-size:19px;line-height:1}
.button-note{font-size:10px;color:var(--muted);margin:16px 0 0}
.question-view,.pause-view{background:#fcf9f3;border:1px solid var(--line);padding:37px;box-shadow:0 12px 35px #5a463805;animation:arrive .5s both;min-height:425px}
.question-top{display:flex;justify-content:space-between;align-items:center}.question-top .eyebrow{margin:0;font-size:9px;letter-spacing:1.5px}.question-top>span:last-child{font-size:10px;color:var(--muted)}
.progress-track{height:2px;background:var(--line);margin-top:17px}.progress-track span{display:block;width:33.333%;height:100%;background:var(--rose);transition:width .3s}
.question-symbol{display:block;font-family:var(--serif);color:var(--rose);font-size:37px;line-height:1;margin:30px 0 22px}
.question-view h2,.pause-view h2{font-family:var(--serif);font-weight:400;font-size:29px;line-height:1.35;margin:0 0 15px;letter-spacing:-.6px}
.question-view>p:not(.choice-note),.pause-view>p:not(.eyebrow){font-size:12px;line-height:1.9;color:var(--muted);margin-bottom:26px}
.answer-buttons{display:flex;gap:12px;margin-top:25px}.answer-buttons button{flex:1;justify-content:center;gap:20px}
.secondary-button{border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--ink);padding:12px 22px;min-height:49px;font-size:12px;transition:border-color .2s,background .2s}.secondary-button:hover{border-color:var(--rose);background:#f4eae2}
.choice-note{margin:20px 0 0;font-size:10px;color:var(--muted)}
.pause-view .eyebrow{font-size:9px}.pause-view h2{font-size:42px}.pause-view h2 em{color:var(--rose);font-weight:400}.pause-view .question-symbol{margin-top:0}
.text-button{background:none;border:0;border-bottom:1px solid #cbb8ab;color:var(--rose-dark);font-size:11px;padding:5px 0;margin:20px 0 0;display:block}.text-button:hover{color:var(--ink)}
.audio-status{font-size:11px;line-height:1.6;color:var(--rose-dark);max-width:1255px;margin:15px auto 0;padding:0 27px}
.site-footer{max-width:1440px;display:flex;justify-content:space-between;align-items:center;margin:auto;padding:24px 6.4%;border-top:1px solid var(--line);color:var(--muted);font-size:8px;letter-spacing:1.6px;gap:15px}
.footer-center{font-family:var(--serif);font-size:11px;font-style:italic;letter-spacing:0}.site-footer>span:last-child{display:flex;gap:12px;align-items:center}.site-footer>span:last-child span{font-size:18px;color:var(--rose)}
.letter-section{padding:62px 24px 55px;animation:arrive .9s both}
.letter-intro{text-align:center;margin-bottom:40px}.letter-intro .eyebrow{justify-content:center;font-size:9px}.letter-intro h1{font-size:66px;line-height:1.1;margin-bottom:19px}.letter-intro h1 em{letter-spacing:-2px}.letter-intro>p:last-child{font-size:12px;color:var(--muted)}
.letter-paper{max-width:715px;margin:auto;background:#fffcf7;border:1px solid #e5dcd0;box-shadow:0 14px 45px #4c3f2f07;padding:52px 65px;position:relative}
.letter-paper::before{content:'';position:absolute;inset:7px;pointer-events:none;border:1px solid #efe8de}
.paper-heading{display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:2px;color:var(--muted);margin-bottom:36px}.paper-heading svg{width:20px;fill:none;stroke:var(--rose);stroke-width:1.1}
.letter-paper h2{font-family:var(--serif);font-weight:400;font-style:italic;font-size:30px;color:var(--rose);margin:0 0 25px}
.letter-paper p{font-family:var(--serif);font-size:14px;line-height:2.05;color:#665b51;margin:0 0 23px}
.letter-paper blockquote{font-family:var(--serif);font-size:21px;line-height:1.65;color:var(--ink);margin:33px 0;padding:24px 0 24px 24px;border-left:2px solid #c28d7f}.letter-paper blockquote em{color:var(--rose);font-size:18px}
.letter-signoff{margin-top:34px;display:flex;flex-direction:column;gap:9px;font-family:var(--serif);font-size:13px;color:var(--muted)}.letter-signoff em{font-size:37px;color:var(--rose)}.signoff-note{font-family:var(--sans);font-size:9px;letter-spacing:.4px;margin-top:13px}
.letter-end{text-align:center;margin:35px auto 0}.letter-end>span{font-size:29px;color:var(--rose)}.letter-end p{font-size:11px;line-height:1.9}.letter-end p span{color:var(--muted)}.letter-end .text-button{margin:20px auto 0}
.noscript-message{max-width:600px;margin:20px auto;padding:20px;text-align:center;font-size:14px}
@keyframes arrive{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes sound-wave{from{transform:scaleY(.4)}to{transform:scaleY(1)}}
@media(min-width:1500px){.intro-section{gap:90px}}
@media(max-width:900px){.intro-section{gap:25px;padding:55px 35px}.hero-description{font-size:12px}.envelope-scene{transform:scale(.86);margin:-20px auto}.question-view,.pause-view{padding:25px}h1{font-size:64px}.header-note{display:none}}
@media(max-width:640px){.site-header{padding:20px 24px}.wordmark{font-size:25px}.music-toggle{font-size:10px;padding:8px 12px}.intro-section{display:flex;flex-direction:column;align-items:stretch;gap:25px;padding:43px 27px 45px;min-height:0}.eyebrow{font-size:9px;margin-bottom:22px}h1{font-size:61px;letter-spacing:-2px}h1 em{letter-spacing:-2.5px}.hero-description{font-size:12px;line-height:1.85}.desktop-break{display:none}.hero-bottom{margin-top:26px;gap:12px}.hero-bottom p{font-size:10px}.small-flower{font-size:25px}.experience-panel{width:100%;max-width:420px;align-self:center}.envelope-scene{transform:scale(.88);height:320px;margin:-6px auto -6px}.intro-view>.primary-button{width:100%;justify-content:space-between}.button-note{font-size:9px}.site-footer{padding:21px 24px;font-size:7px;letter-spacing:1.2px}.footer-center{display:none}.question-view,.pause-view{min-height:390px;padding:28px}.question-view h2{font-size:27px}.letter-section{padding:40px 16px}.letter-intro h1{font-size:49px}.letter-intro .eyebrow{font-size:8px;letter-spacing:1.7px}.letter-paper{padding:35px 27px}.letter-paper p{font-size:13px;line-height:2}.letter-paper blockquote{font-size:18px;padding-left:17px}.letter-paper blockquote em{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}