/* Baby blue and chocolate dots, in staggered rows like the supplied reference. */
:root{--sky:#cbe9fa;--chocolate:#4b281e}
body{background:var(--sky)}
.hero,.ending{background-color:var(--sky);background-image:radial-gradient(circle at 12px 12px,var(--chocolate) 0 9px,transparent 10px),radial-gradient(circle at 12px 12px,var(--chocolate) 0 9px,transparent 10px);background-size:108px 132px;background-position:0 0,54px 66px}
.hero-copy{background:var(--sky);padding:24px 18px 24px 0;position:relative;z-index:1}
.hero .eyebrow,.scroll-note{background:var(--sky)}
.scroll-note{padding:6px 10px;border-radius:3px}
.round-seal{background:#fff8ed;border-color:var(--chocolate)}
.side-note{background:#fff8ed;color:var(--chocolate)}
.reasons{background:var(--sky)}
.reason{background:#fff8ed}
.reason.cherry{background:var(--chocolate);color:#fff8ed}
.reason.dotted{background-color:#e8f5fc;background-image:radial-gradient(circle,var(--chocolate) 0 5px,transparent 6px);background-size:42px 42px}
.reason.dotted>*{background:#e8f5fc;width:fit-content;box-shadow:0 0 0 7px #e8f5fc}
.letter-section{background:var(--sky)}
.letter-heading h2,.letter-heading>p{color:var(--chocolate)}
.letter{background:#fffdfa}
.ending>h2,.ending>p,.ending>.back-top{position:relative;background:var(--sky);width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;box-shadow:0 0 0 16px var(--sky)}
.ending>.eyebrow{padding:2px 6px}
.ending .love-reveal{background:#fff8ed;box-shadow:none;color:var(--chocolate)}
dialog{background:#fffdfa}
.button.red{background:var(--chocolate);color:#fff8ed}
.button.red:hover{background:#30190f}
.button.cream{background:var(--sky);color:var(--chocolate)}
.playlist-note{background:var(--chocolate)}
footer{background:var(--sky)}
@media(max-width:640px){.hero,.ending{background-size:86px 108px;background-position:0 0,43px 54px;background-image:radial-gradient(circle at 10px 10px,var(--chocolate) 0 7px,transparent 8px),radial-gradient(circle at 10px 10px,var(--chocolate) 0 7px,transparent 8px)}.hero-copy{padding:18px 8px}.hero{padding-top:40px}.ending>h2,.ending>p{box-shadow:0 0 0 10px var(--sky)}}