:root{color-scheme:dark;--bg:#071e32;--ink:#fff7e9;--soft:#d0dbe3;--gold:#e7c791;--line:#e7c79145}*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Georgia,'Times New Roman',serif;-webkit-font-smoothing:antialiased}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid var(--gold);outline-offset:4px}h1,p,figure{margin:0}.ambient-glow{pointer-events:none;position:absolute;inset:0 0 auto;height:850px;background:radial-gradient(ellipse at 85% 14%,#276b8c70,transparent 54%),radial-gradient(ellipse at 0 47%,#153b5466,transparent 58%)}.keepsake{position:relative;max-width:1100px;margin:auto;padding:44px 50px 140px}.eyebrow{font:600 11px/1.5 system-ui,sans-serif;letter-spacing:.16em;color:var(--gold);padding-bottom:24px;border-bottom:1px solid var(--line)}.hero-composition{position:relative;display:grid;grid-template-columns:1fr .8fr;min-height:490px;align-items:center}.hero-type{z-index:2;position:relative;padding:30px 0}.occasion{font:400 26px/1.25 system-ui,sans-serif;color:var(--soft)}.occasion em{font-family:Georgia,serif;font-style:italic;color:var(--gold);font-size:1.2em}h1{font-size:clamp(88px,12vw,145px);font-weight:400;line-height:1.06;letter-spacing:-.065em;margin:12px 0 16px;text-shadow:0 3px 24px #071e3266}.gold-stroke{display:block;width:72px;height:2px;background:linear-gradient(90deg,var(--gold),transparent);margin:24px 0}.salute{font:400 16px/1.6 system-ui,sans-serif;color:var(--soft)}.art{position:relative;height:480px;align-self:end;isolation:isolate}.art img{height:100%;width:100%;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 10px 35px #03132155)}.orbit{position:absolute;width:86%;aspect-ratio:1;border:1px solid #e7c79135;border-radius:50%;top:12%;left:4%;transform:rotate(-20deg);box-shadow:0 0 80px #337fa329,inset 0 0 60px #337fa31a}.orbit:after{content:'';position:absolute;inset:14px;border:1px solid #e7c79113;border-radius:50%}.letter{max-width:700px;margin:0 auto}.opening{position:relative;padding:30px 0 32px;border-block:1px solid var(--line);font-size:clamp(24px,3.2vw,34px);line-height:1.47;letter-spacing:-.025em;color:var(--ink)}.letter-body{padding-top:32px}.letter-body>p{font-size:20px;line-height:1.8;margin-bottom:28px;color:var(--soft);text-wrap:pretty}.letter-body .blessing{font-size:25px;font-style:italic;color:var(--gold);line-height:1.5;padding:12px 0}.signature{margin-top:26px}.signature span{display:block;font:12px/1.5 system-ui,sans-serif;color:var(--soft)}.signature strong{display:block;font-weight:400;font-style:italic;font-size:44px;margin-top:9px;letter-spacing:-.04em}.closing{text-align:center;max-width:600px;margin:58px auto 0}.closing-line{display:block;width:36px;height:1px;background:var(--gold);margin:0 auto 24px}.closing p{font-size:18px;line-height:1.7;font-style:italic;color:var(--soft)}.closing>span:last-child{font:500 9px/1.6 system-ui,sans-serif;letter-spacing:.16em;color:var(--gold);display:block;margin-top:20px}.sound-dock{position:fixed;z-index:10;bottom:calc(16px + env(safe-area-inset-bottom,0px));right:20px;background:#0a253e;border:1px solid #e7c79166;box-shadow:0 8px 28px #0004;border-radius:30px;padding:0 14px;display:flex;align-items:center;gap:10px}.sound-toggle{display:flex;align-items:center;gap:8px;color:var(--ink);background:transparent;border:0;min-height:48px;padding:0;font:600 12px/1 system-ui,sans-serif}.sound-toggle svg{width:20px;height:20px;color:var(--gold)}.sound-note{font:10px/1 system-ui,sans-serif;color:var(--soft);padding-left:10px;border-left:1px solid var(--line)}.sound-waves{opacity:.3}.playing .sound-waves{opacity:1}
@media(max-width:700px){.keepsake{padding:25px 26px 115px}.eyebrow{font-size:10px;letter-spacing:.12em;padding-bottom:18px}.hero-composition{grid-template-columns:1fr 1fr;min-height:300px;margin-top:6px}.hero-type{padding:18px 0}.occasion{font-size:17px;line-height:1.4}h1{font-size:78px;margin:8px 0 14px;letter-spacing:-.065em}.gold-stroke{margin:18px 0;width:45px}.salute{font-size:12px;line-height:1.55}.art{height:290px;width:195px;position:absolute;right:-18px;bottom:0;z-index:0}.art img{object-position:center;opacity:.9}.orbit{top:13%;width:95%;left:0}.opening{font-size:24px;line-height:1.45;padding:24px 0 26px}.letter-body{padding-top:26px}.letter-body>p{font-size:18px;line-height:1.75;margin-bottom:25px}.letter-body .blessing{font-size:23px}.closing{margin-top:45px}.closing p{font-size:17px}.sound-dock{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:0 12px}.sound-note{font-size:9px}.sound-toggle{font-size:11px;min-height:44px}}
@media(max-width:360px){.keepsake{padding:20px 22px 110px}.eyebrow{font-size:9px;letter-spacing:.09em}.hero-composition{min-height:270px}.art{height:260px;width:173px;right:-15px}.occasion{font-size:16px}h1{font-size:68px}.salute{font-size:11px}.opening{font-size:22px;padding:21px 0;line-height:1.42}.sound-note{display:none}}
@media(prefers-reduced-motion:no-preference){.hero-type{animation:type-in .8s ease-out both}.art img{animation:art-in 1.4s cubic-bezier(.2,.7,.2,1) both}.orbit{animation:ring-in 2s ease-out both}.reveal{opacity:.75;transform:translateY(12px);transition:opacity .7s ease,transform .7s ease}.reveal.revealed{opacity:1;transform:none}@keyframes type-in{from{transform:translateY(8px);opacity:.9}to{transform:none;opacity:1}}@keyframes art-in{from{transform:translateY(12px) scale(.97);opacity:.55}to{transform:none;opacity:.9}}@keyframes ring-in{from{transform:rotate(-32deg);opacity:.2}to{transform:rotate(-20deg);opacity:1}}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none}}
/* Contain the decorative ring so it cannot create a horizontal scrollbar. */
.keepsake{overflow:clip}