:root{--ink:#f2e8d6;--olive:#aaa887;--brown:#30221f;--paper:#f2e8d6}
body{background:var(--brown);color:var(--ink)}
header{color:var(--ink);border-color:#aaa88744;height:88px;background:var(--brown)}
.wordmark .heart{color:var(--olive)}
nav a:hover{color:var(--olive)}
.music-toggle{border:1px solid #aaa88788;border-radius:3px;background:transparent;color:var(--ink);padding:11px 15px;white-space:nowrap;font-size:13px;display:flex;gap:8px}
.music-toggle[aria-pressed=true]{background:var(--olive);color:var(--brown)}
.hero{background:var(--brown) url('olive-dots.png') center/650px auto;min-height:680px;padding:75px 7%;gap:80px;grid-template-columns:1.25fr 1fr}
.hero-copy{background:var(--brown);padding:32px;z-index:auto}
h1{font-size:clamp(48px,5.1vw,74px);letter-spacing:-3px;line-height:1.1}
.hero em{color:var(--olive)}
.hero .eyebrow{background:transparent;color:var(--olive);letter-spacing:1.5px;font-size:11px}
.hero .intro{color:var(--ink)}
.hero .signed{color:#d5c8b5}.hero .signed span{color:var(--olive)}
.hero-art{margin:0;width:100%;max-width:370px;justify-self:end}
.photo-frame,.photo-frame:hover{transform:none;background:var(--paper);padding:12px 12px 17px;box-shadow:none;color:var(--brown)}
.photo-frame img{aspect-ratio:1/1.1;object-position:50% center}
.photo-caption{gap:10px;margin-top:14px;line-height:1.4}
.photo-caption span:first-child{font-size:20px}
.button.red{background:var(--olive);color:var(--brown);font-weight:600}
.button.red:hover{background:#c3c0a0}
.reasons,.photo-section,.letter-section{background:var(--brown)}
.section-top h2 em,.letter-heading h2 em,.ending h2 em{color:var(--olive)}
.section-top>p:last-child,.letter-heading>p,.photo-postscript{color:#d5c8b5}
.letter-heading h2,.letter-heading .eyebrow{color:var(--ink)}
.letter-heading .heart-outline{color:var(--olive)}
.reasons-grid{border-color:#aaa88755}
.reason{background:var(--paper);color:var(--brown)}
.reason .tiny-script{color:#61583e}
.reason.cherry{background:#7c7959;color:#fff9ed}
.reason.dotted{background:#dedbc4;background-image:radial-gradient(circle,#7c7959 0 5px,transparent 6px)}
.reason.dotted>*{background:#dedbc4;box-shadow:0 0 0 7px #dedbc4}
.reason-number{color:#786c5c}
.letter-section{border-color:#aaa88744}
.letter{color:var(--brown);background:var(--paper);box-shadow:8px 8px 0 #7c7959}
.letter:before{background:#aaa88777}
.letter .letter-last,.letter h3,.letter-sign strong{color:#61583e}
.scrapbook-photo{background:var(--paper)}
.scrapbook-photo:before{background:#aaa88788}
.playlist-note{background:#24201a;color:var(--ink);padding-top:85px;padding-bottom:85px}
.playlist-note h2 em,.handwritten{color:var(--olive)}
.soundtrack-player{width:340px;max-width:100%;min-height:200px;margin:35px auto 0}
.soundtrack-player iframe{display:block;width:100%;height:200px;border:0}
.player-status{color:var(--ink);margin-top:12px;font-size:13px}
.player-status:empty{display:none}
.ending{background:var(--brown) url('olive-dots.png') center/650px auto}
.ending>h2,.ending>p,.ending>.back-top{background:var(--brown);color:var(--ink);box-shadow:0 0 0 20px var(--brown)}
.ending .love-reveal{background:var(--paper);color:var(--brown);box-shadow:none}
footer{background:var(--brown);color:#d5c8b5;border-color:#aaa88744}footer b{color:var(--olive)}
.back-button{background:var(--paper);color:var(--brown);border-color:#aaa887}
button:focus-visible,a:focus-visible{outline-color:var(--olive)}
@media(max-width:1000px){.hero{gap:35px;padding:60px 5%;grid-template-columns:1.2fr 1fr}.hero-copy{padding:25px}h1{font-size:clamp(44px,5.2vw,64px)}.hero-art{max-width:320px}}
@media(max-width:640px){header{height:75px;padding:0 5%}nav{gap:15px;font-size:12px}.music-toggle{font-size:11px;padding:9px;gap:5px}.hero{display:grid;grid-template-columns:1fr;padding:30px 6% 50px;gap:30px;background-size:520px auto;min-height:auto}.hero-copy{padding:25px 20px;margin:0}.hero-art{width:80%;max-width:300px;justify-self:center;align-self:auto;margin:0}h1{font-size:clamp(43px,10.3vw,62px);letter-spacing:-2px}.hero .eyebrow{font-size:10px;line-height:1.6}.hero .intro{font-size:14px;line-height:1.8}.hero .button{padding:15px 18px;font-size:12px;gap:10px}.hero .signed{margin-top:23px}.photo-caption span:first-child{font-size:18px}.ending{background-size:520px auto}.section{padding-top:75px;padding-bottom:75px}.photo-section{padding-top:20px}.soundtrack-player{width:300px}.ending>h2,.ending>p{box-shadow:0 0 0 12px var(--brown)}}