:root{color-scheme:dark;--bg:#171313;--paper:#211b1b;--ink:#f4e9e4;--muted:#b6a5a0;--rose:#d99b9b;--line:rgba(244,233,228,.14)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans",sans-serif;min-height:100vh;overflow-x:hidden}
.ambient{position:fixed;width:34rem;height:34rem;border-radius:50%;filter:blur(110px);opacity:.12;pointer-events:none;z-index:-1}
.ambient-one{background:#a94f61;top:-18rem;right:-12rem}.ambient-two{background:#805c71;bottom:-22rem;left:-16rem}
.page{width:min(100% - 48px,760px);margin:0 auto}
.topline,footer{display:flex;justify-content:space-between;align-items:center;font-size:.66rem;letter-spacing:.22em;color:var(--muted)}
.topline{padding:30px 0;border-bottom:1px solid var(--line)}
.heart{color:var(--rose);font-size:1rem}
.hero{min-height:610px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:90px 0 110px}
.eyebrow,.section-label{font-size:.67rem;letter-spacing:.2em;color:var(--rose)}
h1{font-family:"Playfair Display",serif;font-weight:500;font-size:clamp(5rem,15vw,9rem);line-height:.88;letter-spacing:-.065em;margin:30px 0}
h1 em,.closing em{color:var(--rose);font-weight:500}
.intro{max-width:410px;color:var(--muted);font-size:1rem;line-height:1.9}
.scroll-link{margin-top:42px;color:var(--ink);text-decoration:none;font-size:.68rem;letter-spacing:.17em;border-bottom:1px solid var(--rose);padding-bottom:10px}
.scroll-link span{color:var(--rose);margin-left:14px}
.letter-section,.promise-section{padding:55px 0 100px;border-top:1px solid var(--line)}
.section-label{display:flex;gap:18px;margin-bottom:30px}
.section-label span:first-child{opacity:.65}
.letter-card{background:var(--paper);border:1px solid var(--line);padding:clamp(28px,7vw,58px);box-shadow:0 25px 90px rgba(0,0,0,.16)}
.salutation,.signoff{font-family:"Playfair Display",serif;font-size:1.45rem}
.letter-copy{margin:34px 0;color:#e7d9d4;font-size:1rem;line-height:2}
.letter-copy p{margin:0 0 24px}
.placeholder{color:#c8aaa7}
.signoff{color:var(--muted);margin:42px 0 8px}.signature{font-family:"Playfair Display",serif;font-style:italic;color:var(--rose);font-size:1.8rem;margin:0}
.closing{font-family:"Playfair Display",serif;font-size:clamp(2rem,6vw,3.5rem);line-height:1.25;margin:0 0 22px;letter-spacing:-.03em}
.closing-note{max-width:520px;color:var(--muted);line-height:1.9}
footer{padding:25px 0 35px;border-top:1px solid var(--line)}
@media(max-width:520px){.page{width:min(100% - 36px,760px)}.hero{min-height:540px;padding:70px 0 90px}.letter-section,.promise-section{padding:42px 0 75px}.letter-card{padding:26px 22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}