@font-face{font-family:LetterSerif;src:url('assets/letter-serif.otf') format('opentype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:LetterSerif;src:url('assets/letter-serif-italic.otf') format('opentype');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:LoveScript;src:url('assets/love-script.otf') format('opentype');font-style:normal;font-weight:400;font-display:swap}
:root{--rose:#f9e9ed;--rose-deep:#f2d9e1;--ink:#682438;--wine:#77293f;--muted:#875b67;--rule:#dcb9c4;--paper:#fffaf7;--body:#65434a;--serif:LetterSerif,Georgia,serif;--sans:Arial,Helvetica,sans-serif;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:2rem}
body{margin:0;background:var(--rose);color:var(--ink);font-family:var(--sans);font-size:16px;min-width:280px;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
button:disabled{cursor:wait}
button:focus-visible,a:focus-visible{outline:3px solid #a44261;outline-offset:7px}
button:focus:not(:focus-visible){outline:none}
button,a{touch-action:manipulation}
button svg{width:22px;height:22px;flex-shrink:0}
[hidden]{display:none!important}
::selection{background:#e9b0c2;color:#57192d}
.page-frame{position:fixed;inset:14px;border:1px solid var(--rule);pointer-events:none;z-index:15}
.masthead{max-width:1320px;margin:auto;padding:39px 66px 23px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.monogram{font-family:var(--serif);font-size:1.6rem;letter-spacing:.15em;white-space:nowrap}
.monogram span{font-size:1.4rem;letter-spacing:.08em}
.masthead-note,.edition{font-size:.75rem;letter-spacing:.15em;line-height:1.5}
.masthead-note{position:absolute;left:50%;transform:translateX(-50%)}
.edition{color:var(--muted)}
.cover{max-width:1320px;margin:auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:42px 66px 0;min-height:calc(100svh - 101px);position:relative}
.cover-copy{padding:0 0 25px 15px;position:relative;z-index:2}
.eyebrow{font-size:.75rem;letter-spacing:.17em;font-weight:500;line-height:1.8}
.cover-copy .eyebrow{display:flex;align-items:center;gap:11px;margin:0 0 26px}
.tiny-heart{font-size:.75rem}
h1{font-family:var(--serif);font-size:clamp(5.6rem,9.1vw,8rem);font-weight:400;letter-spacing:-.065em;line-height:.94;margin:0 0 28px}
h1 em{font-weight:400;letter-spacing:-.055em;display:inline-block;padding-right:.08em}
.personal-title{font-size:clamp(4.1rem,6.6vw,6.2rem);line-height:.98}
.cover-message{font-family:var(--serif);font-size:1.42rem;line-height:1.5;color:var(--body);margin:0 0 30px}
.primary-button{background:var(--wine);border:1px solid var(--wine);border-radius:3px;min-height:55px;padding:0 26px;color:#fff5f7;display:inline-flex;align-items:center;justify-content:center;gap:34px;font-size:.9rem;letter-spacing:.025em;transition:transform .3s,background .3s,box-shadow .3s}
.primary-button:hover{background:#612035;transform:translateY(-3px);box-shadow:0 9px 20px #77293f1c}
.primary-button:active{transform:translateY(0)}
.handwritten{font-family:LoveScript,var(--serif);font-weight:400}
.cover-signature{font-size:1.5rem;margin:23px 0 0 20px;transform:rotate(-4deg);color:var(--muted)}
.cover-keepsake{align-self:center;position:relative;display:flex;flex-direction:column;align-items:center;margin:0 -24px 16px -22px}
.envelope-button{border:none;background:transparent;display:block;padding:0;position:relative;width:100%;max-width:600px;border-radius:45%;transition:transform .6s var(--ease);isolation:isolate}
.envelope-button:hover{transform:translateY(-7px) rotate(-2deg)}
.envelope-art{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse 66% 65% at 50% 48%,#000 56%,transparent 80%)}
.keepsake-caption{font-family:LoveScript,var(--serif);font-size:1.65rem;color:var(--muted);transform:rotate(-4deg);margin-top:-15px;position:relative;z-index:1;text-align:center;max-width:100%}
.cover-bottom{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:.75rem;letter-spacing:.14em;line-height:1.6;border-top:1px solid var(--rule);padding:23px 0 28px;color:var(--muted);align-self:end;margin-top:42px}
.bottom-heart{font-size:1.4rem;color:var(--ink)}
.cover.is-opening{animation:cover-away .46s ease both;pointer-events:none}
.cover.is-opening .envelope-button{transform:translateY(-25px) rotate(6deg) scale(1.05)}
.letter-view{max-width:1020px;margin:auto;padding:22px 48px 0;animation:letter-arrives .75s var(--ease) both}
.letter-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 28px}
.text-button{display:inline-flex;gap:10px;align-items:center;background:none;border:0;padding:10px 0;color:var(--ink);font-size:.875rem}
.text-button:hover{text-decoration:underline;text-underline-offset:5px}
.toolbar-note{font-size:.75rem;letter-spacing:.12em;color:var(--muted)}
.letter-paper{position:relative;max-width:810px;margin:auto;background:var(--paper);padding:31px 77px 45px;border:1px solid #e6cfd0;box-shadow:0 22px 60px #6b2b3b0b,0 2px 2px #6b2b3b05}
.letter-topline{display:flex;gap:15px;justify-content:space-between;font-size:.75rem;letter-spacing:.16em;color:var(--muted);padding-bottom:20px;border-bottom:1px solid #ead7d8;line-height:1.5}
.letter-heading{text-align:center;margin:40px 0}
.letter-small-heart{display:block;font-size:1.8rem;color:#a75c72;margin-bottom:9px}
.letter-heading h2{font-size:4.5rem;line-height:1.15;margin:0;scroll-margin-top:35px}
.letter-heading h2:focus{outline:0}
.letter-heading p{font-size:.83rem;letter-spacing:.01em;color:var(--muted);margin:10px 0 0}
.letter-copy{font-family:var(--serif);font-size:1.24rem;line-height:1.78;color:var(--body)}
.letter-copy p{margin:0 0 24px}
.letter-copy blockquote{font-family:var(--serif);font-style:italic;font-size:1.86rem;line-height:1.38;letter-spacing:-.025em;color:var(--ink);text-align:center;margin:40px -7px;padding:26px 12px;border-top:1px solid #e8d2d7;border-bottom:1px solid #e8d2d7}
.letter-copy .last-line{color:var(--ink);margin-top:28px}
.letter-signoff{margin:26px 0 41px;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:7px;font-family:var(--serif);font-size:1.12rem;color:var(--body)}
.signature{font-size:3.2rem;color:var(--ink);line-height:1.3;transform:rotate(-5deg)}
.signature span{font-family:var(--serif);font-size:1.7rem}
.postscript{text-align:center;padding:25px 0 0;border-top:1px solid #e8d2d7}
.postscript .eyebrow{font-size:.75rem}
.postscript p{font-size:1.95rem;margin:11px 0 15px;color:var(--ink)}
.postscript-link{color:var(--muted);text-underline-offset:5px;font-size:.875rem;display:inline-flex;gap:18px;padding:8px}
.single-note{max-width:620px;margin:82px auto 0;background:#fff8f8;border:1px solid #ddb9c4;box-shadow:0 14px 35px #77293f0b;padding:42px 48px 38px;text-align:center;position:relative}
.single-note-heart{display:block;font-family:Georgia,serif;font-size:2rem;color:#a55970;line-height:1;margin-bottom:19px}
.single-note p{font-family:var(--serif);font-style:italic;font-size:1.65rem;line-height:1.5;color:var(--ink);margin:0}
.little-notes{max-width:840px;margin:100px auto 0;text-align:center;scroll-margin-top:35px}
.little-notes>.eyebrow{font-size:.75rem;margin-bottom:17px}
.little-notes h2{font-family:var(--serif);font-weight:400;font-size:2.9rem;line-height:1.15;letter-spacing:-.04em;margin:0 0 20px}
.little-notes h2 em{font-weight:400}
.notes-instruction{font-size:.875rem;color:var(--muted);line-height:1.6}
.heart-selector{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 4px;max-width:650px;margin:30px auto 28px}
.heart-note{width:44px;min-height:57px;border:0;background:transparent;color:#955367;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:transform .25s,color .25s}
.heart-note .heart-symbol{font-family:Georgia,serif;font-size:1.85rem;line-height:1}
.heart-note .heart-number{font-family:var(--sans);font-size:.75rem;line-height:1.5}
.heart-note:hover{transform:translateY(-4px);color:var(--ink)}
.heart-note[aria-pressed="true"]{color:var(--wine);transform:translateY(-4px)}
.heart-note[aria-pressed="true"] .heart-number{border-bottom:1px solid var(--wine)}
.note-paper{max-width:540px;margin:auto;background:#fff8f8;border:1px solid #ddb9c4;box-shadow:0 10px 30px #77293f08;padding:22px 35px 20px;position:relative}
.note-counter{font-size:.75rem;letter-spacing:.13em;color:var(--muted);display:block;text-align:left;margin-bottom:20px}
.note-message{min-height:126px;display:flex;flex-direction:column;justify-content:center}
.note-kicker{font-size:.75rem;letter-spacing:.14em;color:var(--muted)}
.note-message p{font-family:var(--serif);font-size:1.48rem;line-height:1.45;margin:15px 0 20px;letter-spacing:-.015em}
.note-message.changed{animation:note-arrives .36s var(--ease)}
.next-note{border:0;border-top:1px solid #ead2da;color:var(--ink);background:transparent;display:flex;justify-content:space-between;align-items:center;width:100%;padding:18px 0 0;font-size:.875rem;line-height:1.5;margin-top:10px;text-align:left}
.next-note:hover{color:#ab415f}
.next-note span{font-size:1.25rem}
.ending{text-align:center;padding:90px 0 35px}
.ending-heart{font-family:Georgia,serif;font-size:3.5rem;color:#a55970;line-height:1;display:block;margin-bottom:30px}
.ending>.eyebrow{font-size:.75rem}
.ending h2{font-family:var(--serif);font-weight:400;font-size:3.45rem;letter-spacing:-.04em;line-height:1.12;margin:20px 0}
.ending h2 em{font-weight:400}
.ending>p:not(.eyebrow):not(.hug-response){color:var(--muted);font-family:var(--serif);font-size:1.35rem}
.hug-button{margin-top:16px;gap:26px}
.button-heart{font-family:Georgia,serif;font-size:1.6rem}
.hug-response{font-size:1.6rem;min-height:2em;margin:20px 0 0;color:var(--ink);line-height:1.4}
.letter-footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--rule);padding:24px 0 36px;font-size:.75rem;letter-spacing:.12em;color:var(--muted)}
.heart-shower{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden}
.floating-heart{position:absolute;bottom:-40px;color:var(--wine);font-family:Georgia,serif;animation:heart-rise var(--duration) ease-out forwards;opacity:0}
.noscript-note{max-width:580px;margin:20px auto;padding:20px;text-align:center}
@keyframes cover-away{to{opacity:0;transform:translateY(-12px)}}
@keyframes letter-arrives{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes note-arrives{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes heart-rise{0%{opacity:0;transform:translateY(0) rotate(0deg)}15%{opacity:.65}75%{opacity:.5}100%{opacity:0;transform:translate(var(--drift),-108vh) rotate(var(--turn))}}
@media(min-width:1450px){.cover{min-height:780px;padding-top:70px}.cover-keepsake{margin-top:0}}
@media(max-width:1000px){.masthead{padding-left:45px;padding-right:45px}.cover{padding-left:45px;padding-right:45px;gap:0}.cover-copy{padding-left:0}.cover-keepsake{margin-left:-20px;margin-right:-22px}.keepsake-caption{font-size:1.5rem}.cover-bottom{font-size:.75rem;letter-spacing:.1em}.cover-message{font-size:1.25rem}.cover h1{font-size:clamp(4.6rem,10vw,7rem)}.cover h1.personal-title{font-size:clamp(3.5rem,7vw,5rem)}.letter-paper{padding-left:55px;padding-right:55px}}
@media(max-width:700px){.page-frame{inset:9px}.masthead{padding:29px 29px 16px}.monogram{font-size:1.3rem}.monogram span{font-size:1.2rem}.masthead-note{display:none}.edition{font-size:.75rem;letter-spacing:.1em}.cover{display:flex;flex-direction:column;padding:26px 30px 0;min-height:calc(100svh - 78px)}.cover-copy{text-align:center;padding:0;width:100%;z-index:3}.cover-copy .eyebrow{justify-content:center;font-size:.75rem;margin-bottom:17px}.cover h1{font-size:clamp(4.6rem,16vw,6.2rem);line-height:.97;margin-bottom:18px}.cover h1.personal-title{font-size:clamp(3.25rem,12.5vw,4.9rem);line-height:1}.cover-message{font-size:1.17rem;line-height:1.43;margin-bottom:24px}.primary-button{min-height:52px;padding-left:25px;padding-right:25px;gap:26px}.cover-signature{font-size:1.4rem;margin:18px 0 0;transform:rotate(-4deg)}.cover-keepsake{width:min(380px,calc(100% + 25px));margin:-13px -13px 0;z-index:1}.keepsake-caption{font-size:1.4rem;margin-top:-34px}.cover-bottom{width:100%;margin-top:37px;padding:20px 0 25px;gap:15px;font-size:.75rem;letter-spacing:.09em}.cover-bottom>span:first-child{max-width:128px}.cover-bottom>span:last-child{max-width:117px;text-align:right}.bottom-heart{font-size:1.2rem}.letter-view{padding:10px 23px 0}.letter-toolbar{margin-bottom:18px;gap:12px}.text-button{font-size:.82rem}.toolbar-note{font-size:.75rem;letter-spacing:.05em}.letter-paper{padding:23px 25px 30px}.letter-topline{font-size:.75rem;letter-spacing:.08em;gap:10px;padding-bottom:16px}.letter-heading{margin:28px 0 27px}.letter-heading h2{font-size:3.15rem}.letter-heading p{font-size:.76rem;line-height:1.5}.letter-small-heart{font-size:1.5rem}.letter-copy{font-size:1.12rem;line-height:1.72}.letter-copy p{margin-bottom:22px}.letter-copy blockquote{font-size:1.6rem;line-height:1.4;margin:30px -4px;padding:22px 0}.letter-signoff{font-size:1rem;margin-bottom:27px}.signature{font-size:3rem}.postscript .eyebrow{font-size:.75rem;letter-spacing:.1em}.postscript p{font-size:1.62rem}.postscript-link{font-size:.82rem}.single-note{margin-top:58px;padding:31px 25px 29px}.single-note p{font-size:1.35rem;line-height:1.5}.ending{padding-top:42px}.ending-heart{font-size:3rem;margin-bottom:25px}.ending .eyebrow{font-size:.75rem}.ending h2{font-size:2.85rem}.ending>p:not(.eyebrow):not(.hug-response){font-size:1.2rem}.hug-response{font-size:1.45rem}.letter-footer{font-size:.75rem;padding-bottom:30px}}
@media(max-width:350px){.letter-view{padding-left:17px;padding-right:17px}.letter-paper{padding-left:20px;padding-right:20px}.letter-heading h2{font-size:3.1rem}.letter-topline{font-size:.75rem}.toolbar-note{display:none}.cover{padding-left:25px;padding-right:25px}.heart-note{width:38px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}.floating-heart{display:none}}