*,
*::before,
*::after{box-sizing:border-box}
:root{--ink:#2c2330;--ink-soft:#726a74;--coral:#d96666;--coral-deep:#b94e56;--rose:#eab8b1;--sage:#829a86;--cream:#fff9f4;--paper:#fffdf9;--paper-shadow:#e7d9d0;--line:rgba(44,35,48,.12);--shadow:0 28px 70px rgba(44,35,48,.16);--shadow-soft:0 14px 34px rgba(44,35,48,.09)}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:radial-gradient(circle at top right,rgba(234,184,177,.2),transparent 26%),radial-gradient(circle at 10% 30%,rgba(130,154,134,.12),transparent 20%),linear-gradient(180deg,#f8efe9 0%,#efe5df 100%);font-family:Inter,Arial,sans-serif;line-height:1.8}
body.modal-open{overflow:hidden}
button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}h1,h2,blockquote{margin:0;font-family:Fraunces,"Playfair Display",Georgia,serif}p{margin:0}
.eyebrow{color:var(--coral-deep);font-size:.73rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.button{display:inline-flex;min-height:50px;align-items:center;justify-content:center;padding:0 22px;border:1px solid transparent;border-radius:999px;font-weight:900;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.button:hover{transform:translateY(-1px)}
.button--coral{color:#fff;background:var(--coral);box-shadow:0 12px 30px rgba(217,102,102,.22)}.button--ink{color:#fff;background:var(--ink)}.button--soft{color:var(--ink);border-color:var(--line);background:var(--paper)}
.opening{position:fixed;inset:0;z-index:100;display:grid;place-items:center;gap:38px;padding:18px;overflow:auto;background:radial-gradient(circle at 82% 18%,rgba(234,184,177,.28),transparent 24%),linear-gradient(135deg,#fff9f4 0%,#e8d6cf 100%);transition:opacity .4s ease,visibility .4s ease}
.opening.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.envelope{position:relative;width:min(440px,88vw);aspect-ratio:1.42/1;filter:drop-shadow(0 28px 40px rgba(44,35,48,.18))}
.envelope__back{position:absolute;inset:0;border-radius:18px;background:#e8c9c2}
.envelope__letter{position:absolute;z-index:2;left:8%;right:8%;top:12%;min-height:76%;padding:32px 28px;border-radius:12px 12px 4px 4px;background:var(--paper);box-shadow:0 14px 26px rgba(44,35,48,.12);transform:translateY(-14%);text-align:center}
.envelope__letter span{display:block;color:var(--coral-deep);font-size:.72rem;font-weight:900;letter-spacing:.16em}.envelope__letter strong{display:block;margin-top:18px;font-family:Georgia,serif;font-size:clamp(1.7rem,6vw,2.5rem);font-weight:500;line-height:1.15}
.envelope__front{position:absolute;z-index:4;inset:0;border-radius:18px;background:linear-gradient(30deg,#e2bdb6 0 49.5%,transparent 50%),linear-gradient(-30deg,#f0d4cd 0 49.5%,transparent 50%);clip-path:polygon(0 32%,50% 75%,100% 32%,100% 100%,0 100%)}
.envelope__flap{position:absolute;z-index:5;inset:0;border-radius:18px;background:#f2d8d1;clip-path:polygon(0 0,100% 0,50% 58%)}
.envelope__seal{position:absolute;z-index:6;left:50%;top:46%;display:grid;width:62px;height:62px;transform:translate(-50%,-50%);place-items:center;border-radius:50%;color:#fff;background:var(--coral-deep);font-family:Georgia,serif;font-size:1.5rem;box-shadow:0 10px 22px rgba(185,78,86,.24)}
.opening__copy{max-width:650px;text-align:center}.opening__copy h1{margin-top:12px;font-size:clamp(2.6rem,7vw,5.2rem);font-weight:500;line-height:1;letter-spacing:-.05em}.opening__copy>p:not(.eyebrow){margin-top:18px;color:var(--ink-soft);font-family:Georgia,serif;font-size:1.2rem;font-style:italic}.opening__copy .button{margin-top:30px}
.topbar{position:sticky;top:0;z-index:30;width:min(1100px,calc(100% - 36px));margin:0 auto;padding:18px 0;display:flex;align-items:center;justify-content:space-between;gap:18px;background:rgba(248,239,233,.84);backdrop-filter:blur(12px)}
.brand{display:grid;width:54px;height:54px;place-items:center;border-radius:50%;color:#fff;background:var(--coral);font-family:Georgia,serif;font-size:1.2rem}.topbar__actions{display:flex;gap:18px}.topbar__button{padding:0;border:0;color:var(--ink-soft);background:none;cursor:pointer}.topbar__button:hover,.topbar__button:focus-visible{color:var(--coral-deep)}
main{padding:50px 0 130px}
.letter{width:min(820px,calc(100% - 36px));margin:0 auto;padding:clamp(34px,7vw,76px);border:1px solid rgba(44,35,48,.08);background:linear-gradient(rgba(255,253,249,.94),rgba(255,253,249,.94)),repeating-linear-gradient(0deg,transparent 0 34px,rgba(44,35,48,.035) 34px 35px);box-shadow:0 3px 0 var(--paper-shadow),0 32px 80px rgba(44,35,48,.15)}
.letter__heading{padding-bottom:44px;border-bottom:1px solid var(--line)}.letter__date{margin-bottom:34px;color:var(--ink-soft);font-size:.9rem;text-align:right}.letter__heading h1{max-width:680px;margin-top:14px;font-size:clamp(3rem,7vw,5.6rem);font-weight:500;line-height:.98;letter-spacing:-.055em}.letter__lead{max-width:620px;margin-top:24px;color:var(--ink-soft);font-family:Georgia,serif;font-size:clamp(1.14rem,2.5vw,1.38rem);font-style:italic}
.letter__body{padding-top:44px}.letter__body>p{color:#4f4751;font-family:Georgia,serif;font-size:clamp(1.05rem,2.1vw,1.17rem);line-height:2}.letter__body>p+p{margin-top:28px}.letter__body blockquote{margin:46px 0;padding:32px 0 32px 30px;border-left:8px solid var(--rose);color:var(--coral-deep);font-size:clamp(1.7rem,4vw,2.7rem);font-style:italic;line-height:1.35}
.letter__pause{margin:54px 0;padding:clamp(26px,5vw,42px);color:#fff;background:linear-gradient(135deg,var(--coral-deep),var(--coral));box-shadow:var(--shadow-soft)}.letter__pause span{font-size:.72rem;font-weight:900;letter-spacing:.16em}.letter__pause p{margin-top:18px;font-family:Georgia,serif;font-size:clamp(1.35rem,3vw,2rem);line-height:1.55}
.letter__photo{margin:38px 0;overflow:hidden;border:1px solid rgba(44,35,48,.08);border-radius:22px;background:#f6efe9;box-shadow:var(--shadow-soft)}.letter__photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}.letter__photo--narrow img{aspect-ratio:4/3}
.letter__signature{margin-top:52px}.letter__signature span{display:block;color:var(--ink-soft);font-family:Georgia,serif;font-size:1.1rem}.letter__signature strong{display:block;margin-top:6px;color:var(--coral-deep);font-family:Georgia,serif;font-size:3rem;font-style:italic;font-weight:500}
.postscript{margin-top:68px;padding-top:44px;border-top:1px solid var(--line)}.postscript__locked{text-align:center}.postscript__locked h2{margin-top:12px;font-size:clamp(2rem,5vw,3.6rem);font-weight:500;line-height:1.05}.postscript__locked .button{margin-top:28px}
.postscript__revealed{position:relative;padding:clamp(30px,6vw,52px);background:#f4e4df}.postscript__revealed span{position:absolute;top:18px;right:22px;color:rgba(185,78,86,.2);font-family:Georgia,serif;font-size:5rem;font-weight:700}.postscript__revealed p{position:relative;z-index:1;color:var(--ink);font-family:Georgia,serif;font-size:clamp(1.45rem,3vw,2.2rem);font-style:italic;line-height:1.55}
.letter__closing-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:48px}
.audio-player{position:fixed;right:18px;bottom:18px;z-index:40;width:min(420px,calc(100% - 36px));display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 16px;align-items:center;padding:14px 16px;border:1px solid rgba(255,255,255,.5);border-radius:20px;background:rgba(255,249,244,.94);box-shadow:var(--shadow-soft);backdrop-filter:blur(12px)}
.audio-player__play{display:grid;width:44px;height:44px;place-items:center;border:0;border-radius:50%;color:#fff;background:var(--coral);cursor:pointer}.audio-player__meta strong{display:block;font-family:Georgia,serif;font-size:.98rem;font-weight:500}.audio-player__meta span{display:block;margin-top:2px;color:var(--ink-soft);font-size:.78rem}.audio-player__progress{grid-column:1/-1;width:100%;accent-color:var(--coral)}
.footer{padding:0 18px 110px;color:var(--ink-soft);font-size:.9rem;text-align:center}.footer a{color:var(--ink)}
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:18px;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .2s ease}.modal.is-open{visibility:visible;opacity:1;pointer-events:auto}.modal__backdrop{position:absolute;inset:0;background:rgba(44,35,48,.8);backdrop-filter:blur(8px)}.modal__panel{position:relative;z-index:1;width:min(1100px,100%);max-height:calc(100vh - 36px);overflow:hidden;padding:18px;border-radius:28px;background:var(--cream);box-shadow:0 34px 90px rgba(44,35,48,.3)}.modal__panel iframe{width:100%;height:min(82vh,880px);border:0;border-radius:20px;background:#fff}.modal__close{position:absolute;z-index:3;top:14px;right:14px;display:grid;width:42px;height:42px;place-items:center;border:0;border-radius:50%;color:#fff;background:var(--coral-deep);font-size:1.4rem;cursor:pointer}
.toast{position:fixed;z-index:90;left:18px;bottom:18px;max-width:min(360px,calc(100% - 36px));padding:14px 18px;border-radius:14px;color:#fff;background:var(--ink);box-shadow:var(--shadow-soft);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}.toast.is-visible{opacity:1;transform:translateY(0)}
@media(min-width:780px){.opening{grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr)}}
@media(max-width:640px){.topbar{align-items:flex-start}.topbar__actions{flex-direction:column;align-items:flex-end;gap:8px}main{padding-top:24px}.letter{width:min(100% - 20px,820px);padding:28px 22px 36px}.letter__date{text-align:left}.letter__closing-actions{flex-direction:column}.letter__closing-actions .button{width:100%}.audio-player{right:10px;bottom:10px;width:calc(100% - 20px)}}
@media(max-height:760px) and (min-width:641px){.opening{gap:24px}.envelope{width:min(330px,44vh)}.opening__copy h1{font-size:clamp(2.3rem,5vw,4rem)}.opening__copy>p:not(.eyebrow){margin-top:12px}.opening__copy .button{margin-top:22px}}