@font-face{font-family:Erode;src:url('assets/fonts/erode-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Erode;src:url('assets/fonts/erode-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Erode;src:url('assets/fonts/erode-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Erode;src:url('assets/fonts/erode-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
:root{--forest:#173e31;--deep:#112e25;--paper:#f5f3e8;--sage:#a9b798;--pale:#e1e7d9;--soft:#e9ecdf;--ink:var(--forest);--gutter:clamp(20px,3.4vw,52px);--small:16px;--body:20px;--lead:26px;--head:clamp(36px,4.5vw,48px);--display:clamp(76px,7.7vw,110px);--ease:cubic-bezier(.22,.68,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--forest);color:var(--ink);font-family:Erode,Georgia,serif;font-size:var(--body);line-height:1.55;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button,a{touch-action:manipulation}button{border:0}a{color:inherit;text-decoration-thickness:1px;text-underline-offset:5px}button:focus-visible,a:focus-visible{outline:3px solid var(--sage);outline-offset:6px}img{display:block;width:100%;height:auto}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-weight:500;letter-spacing:-.025em;text-wrap:balance}h1{font-size:var(--display);line-height:.93}h2{font-size:var(--head);line-height:1.04}h3{font-size:var(--lead);line-height:1.15}p{overflow-wrap:break-word}strong{font-weight:600}::selection{background:var(--sage);color:var(--deep)}[hidden]{display:none!important}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.icon{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.skip-link{position:fixed;top:12px;left:16px;z-index:50;background:var(--paper);color:var(--forest);padding:12px 20px;transform:translateY(-150%)}.skip-link:focus{transform:translateY(0)}
.site-header{height:80px;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:28px;color:var(--paper);background:var(--forest);position:relative;z-index:4}.wordmark{display:flex;align-items:center;gap:14px;text-decoration:none;font-size:var(--lead);font-style:italic;white-space:nowrap}.wordmark svg{width:29px;height:37px;stroke:currentColor;fill:none;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}.site-header nav{display:flex;gap:38px;margin-left:80px;font-size:var(--small)}.site-header nav a{text-decoration:none;transition:opacity .2s}.site-header nav a:hover{opacity:.65}.music-toggle{background:transparent;color:var(--paper);display:flex;align-items:center;gap:10px;font-size:var(--small);min-height:44px;padding:6px 0}.music-toggle:hover .icon{transform:rotate(-10deg)}.music-toggle .icon{transition:transform .25s}.button{display:inline-flex;align-items:center;justify-content:center;gap:22px;border-radius:100px;background:var(--forest);color:var(--paper);padding:14px 30px;min-height:54px;line-height:1.15;font-size:var(--body);text-decoration:none;transition:transform .25s var(--ease),background-color .25s}.button:hover{background:var(--deep);transform:translateY(-3px)}.button:active{transform:scale(.97)}
.hero{min-height:calc(100svh - 80px);position:relative;isolation:isolate;display:flex;align-items:flex-start;justify-content:center;padding:38px var(--gutter) 0;overflow:hidden}.hero-landscape{position:absolute;z-index:-3;inset:0;height:100%;object-fit:cover;object-position:center;animation:landscape-drift 22s ease-in-out infinite alternate}.hero:after{content:'';position:absolute;inset:0;background:rgba(17,46,37,.12);z-index:-2}.invitation{background:var(--paper);width:610px;max-width:100%;text-align:center;padding:38px 48px 28px;position:relative;animation:letter-arrive .95s var(--ease) both}.invitation:before,.letter-paper:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.22;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.2' filter='url(%23n)'/%3E%3C/svg%3E")}.hero-copy{font-size:var(--lead);line-height:1.3;margin-top:28px;position:relative}.hero-action{margin-top:28px;position:relative}.hero-envelope{width:234px;margin:21px auto 0;mix-blend-mode:multiply;animation:envelope-breathe 6s ease-in-out infinite}.hero-date{font-size:var(--body);margin-top:4px}.rain{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden}.raindrop{position:absolute;width:1.5px;background:rgba(245,243,232,.36);height:34px;top:-50px;animation:rain-fall linear infinite;transform:rotate(12deg)}
.section-pad{padding:112px var(--gutter)}.letter-section{background:var(--pale);position:relative;z-index:1}.letter-paper{background:var(--paper);width:min(100%,840px);margin:auto;padding:66px 82px 54px;position:relative}.letter-paper h2{font-size:48px;margin-bottom:36px}.letter-paper>p{margin-top:23px;position:relative}.letter-paper .letter-opening{margin-top:0}.letter-paper .letter-emphasis{font-size:var(--lead);line-height:1.35;margin:30px 0}.letter-signature{margin-top:36px;display:grid;grid-template-columns:1fr 32px;column-gap:24px;position:relative}.letter-signature>p:first-child{font-size:var(--small)}.letter-signature .signature{grid-column:1;font-size:var(--lead);font-style:italic}.letter-signature svg{grid-column:2;grid-row:1/3;align-self:center;width:28px;height:28px;fill:var(--forest)}
.memories{background:var(--paper);position:relative;z-index:1}.section-heading{max-width:1180px;margin:0 auto 64px}.section-heading>p{margin-top:22px;font-size:var(--lead)}.scrapbook{max-width:1120px;margin:auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:54px 34px;align-items:center}.memory{padding:14px;background:var(--soft);transform:rotate(-2deg);transition:transform .45s var(--ease)}.memory:hover{transform:rotate(0)}.memory-one{grid-column:1/7}.memory-two{grid-column:8/13;transform:rotate(2deg);margin-top:64px}.memory-photo{display:block;width:100%;padding:0;background:var(--forest);overflow:hidden;text-align:left}.memory-photo img{transition:transform .6s var(--ease)}.memory-photo:hover img{transform:scale(1.035)}.memory-photo:focus-visible{outline-offset:5px}.memory figcaption{padding:22px 12px 10px}.memory figcaption p{font-size:var(--small);line-height:1.4;margin-top:10px}.memory-discord{grid-column:1/9;transform:rotate(1deg);margin-top:14px}.memory-discord img{aspect-ratio:1136/586;object-fit:contain}.distance-note{grid-column:10/13;align-self:center}.distance-note p{font-size:var(--lead);line-height:1.4}.note-heart{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.1;margin-bottom:20px}.future{background:var(--pale);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(36px,7vw,110px);position:relative;z-index:1}.future-picture{margin-left:auto;max-width:530px;transform:rotate(-2deg);padding:14px;background:var(--paper)}.future-picture figcaption{font-size:var(--small);line-height:1.4;padding:20px 10px 8px}.future-copy{max-width:500px}.future-copy h2{font-size:48px;margin-bottom:28px}.statement{font-size:var(--lead);line-height:1.3}.future-copy>p:last-child{margin-top:28px;max-width:430px}.proposal{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:60px;background:var(--forest);color:var(--paper);align-items:end;position:relative;z-index:1;padding-bottom:92px}.proposal-note{padding:0 0 35px;max-width:360px}.proposal-note .statement{font-size:var(--lead);line-height:1.15}.proposal-note>p:nth-child(2){margin-top:24px}.proposal-dedication{font-size:var(--small);margin-top:50px}.reply-card{background:var(--paper);color:var(--forest);padding:46px 38px 30px;transform:rotate(2deg);text-align:center;width:100%;max-width:760px;justify-self:end}.reply-card h2{font-size:var(--head);line-height:1}.reply-card>p{margin-top:22px;line-height:1.35}.answer-garden{position:relative;width:min(100%,430px);height:272px;margin:28px auto 0}.yes-button{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:172px;min-height:78px;padding:16px 18px;gap:12px;z-index:2;font-size:var(--lead)}.yes-button:hover{transform:translate(-50%,-50%) scale(1.035)}.yes-button:active{transform:translate(-50%,-50%) scale(.97)}.yes-button .icon{width:20px;height:20px}.no-button{position:absolute;width:61px;height:44px;border-radius:100px;background:var(--sage);color:var(--deep);font-size:20px;transition:transform .3s var(--ease),background-color .2s;z-index:3;left:0;top:0}.no-button:hover{background:var(--pale)}.no-button[data-slot="0"]{left:0;top:0}.no-button[data-slot="2"]{left:calc(100% - 61px);top:0}.no-button[data-slot="3"]{left:0;top:76px}.no-button[data-slot="4"]{left:calc(100% - 61px);top:76px}.no-button[data-slot="5"]{left:0;top:152px}.no-button[data-slot="6"]{left:calc(100% - 61px);top:152px}.no-button[data-slot="7"]{left:0;top:228px}.no-button[data-slot="9"]{left:calc(100% - 61px);top:228px}.reply-card .garden-caption{font-size:var(--small);margin-top:16px;min-height:22px}.text-button{background:transparent;color:inherit;display:inline-block;min-height:44px;padding:8px 4px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;transition:opacity .2s}.text-button:hover{opacity:.65}.reply-card>.text-button{margin-top:12px}
.footer{min-height:280px;position:sticky;bottom:0;background:var(--deep);color:var(--paper);padding:64px var(--gutter) 40px;display:flex;flex-wrap:wrap;align-items:baseline;gap:20px 50px;justify-content:space-between}.footer>p{font-size:var(--head);line-height:1.1;letter-spacing:-.025em;flex-basis:100%}.footer>span,.footer>a{font-size:var(--small)}.footer>a{display:inline-flex;align-items:center;gap:16px;text-decoration:none}.footer>a .icon{transform:rotate(-90deg);width:19px}.music-panel{ /* taste-skill-ignore: shadow belongs to an actual floating music overlay. */ position:fixed;z-index:20;bottom:20px;right:20px;background:var(--paper);color:var(--forest);padding:16px;width:352px;max-width:calc(100vw - 32px);box-shadow:0 12px 60px rgba(0,0,0,.22)}.music-panel-heading{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;gap:16px}.music-panel-heading p{font-size:23px;line-height:1.2}.music-panel-heading span{font-size:var(--small)}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:10px;background:var(--soft);color:var(--forest);border-radius:100px;flex-shrink:0;transition:transform .2s}.icon-button:hover{transform:rotate(7deg)}#youtubePlayer,.music-panel iframe{display:block;width:100%;height:200px;background:var(--deep)}.music-panel>p{font-size:var(--small);margin-top:12px;line-height:1.35}.music-panel>a{font-size:var(--small);display:inline-flex;align-items:center;min-height:44px;margin-top:4px}
dialog{ /* taste-skill-ignore: shadow belongs to a modal dialog. */ border:0;background:var(--paper);color:var(--forest);padding:0;max-width:calc(100% - 32px);max-height:calc(100svh - 32px);box-shadow:0 20px 100px rgba(0,0,0,.28)}dialog::backdrop{background:rgba(8,30,22,.78)}dialog[open]{animation:dialog-in .35s var(--ease)}.dialog-close{position:absolute;top:16px;right:16px;z-index:2}.memory-dialog{width:820px;overflow-y:auto}.memory-dialog>img{width:100%;max-height:65svh;object-fit:contain;background:var(--deep)}.memory-dialog-copy{padding:32px 40px}.memory-dialog-copy h2{font-size:36px}.memory-dialog-copy>p{margin-top:18px;font-size:var(--body)}.response-dialog{text-align:center;padding:40px 44px 30px;width:560px;overflow-y:auto}.response-dialog>img{width:230px;margin:0 auto 22px;mix-blend-mode:multiply}.response-dialog h2{font-size:42px;line-height:1.08}.response-dialog>p{margin-top:20px}.response-dialog .response-signature{font-size:var(--small);font-style:italic}.response-close{margin-top:28px}.response-dialog #realNoButton{display:block;margin:16px auto 0;font-size:var(--small)}.response-dialog .response-note{font-size:var(--small);line-height:1.35;margin-top:20px}.celebration{position:fixed;inset:0;pointer-events:none;z-index:35;overflow:hidden}.celebration svg{position:absolute;top:-60px;width:22px;height:22px;fill:var(--sage);stroke:none;animation:heart-fall var(--duration,4s) ease-in var(--delay,0s) both}
@keyframes letter-arrive{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}@keyframes envelope-breathe{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}@keyframes landscape-drift{from{transform:scale(1)}to{transform:scale(1.035)}}@keyframes rain-fall{to{transform:translate(-85px,1000px) rotate(12deg)}}@keyframes dialog-in{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes heart-fall{0%{opacity:0;transform:translateY(-20px) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translateY(110svh) rotate(290deg)}}
@media(min-width:1600px){.hero{padding-top:54px}.invitation{width:660px;padding-top:48px;padding-bottom:36px}.hero-envelope{width:260px;margin-top:28px}.hero-action{margin-top:32px}.hero-date{margin-top:12px}}
@media(max-width:1000px){:root{--body:19px;--lead:24px}.site-header nav{margin-left:0;gap:24px}.site-header{gap:20px}.site-header nav a:last-child{display:none}.section-pad{padding-top:88px;padding-bottom:88px}.letter-paper{padding:56px}.scrapbook{gap:40px 24px}.memory-one{grid-column:1/7}.memory-two{grid-column:7/13}.memory-discord{grid-column:1/9}.distance-note{grid-column:9/13}.future{gap:48px}.future-copy h2{font-size:40px}.proposal{gap:32px;grid-template-columns:.65fr 1.35fr}.reply-card{padding:34px 28px 28px}.proposal-note .statement{font-size:30px}.reply-card h2{font-size:50px}.yes-button{width:156px;font-size:24px;gap:8px}.answer-garden{height:272px}.no-button{width:56px}.no-button[data-slot="2"],.no-button[data-slot="4"],.no-button[data-slot="6"],.no-button[data-slot="9"]{left:calc(100% - 56px)}}
@media(max-width:700px){:root{--gutter:20px;--body:19px;--lead:24px;--head:40px;--display:84px}.site-header{height:72px;gap:16px}.wordmark{font-size:24px;gap:9px}.wordmark svg{width:22px;height:30px}.site-header nav{display:none}.music-toggle{font-size:16px;gap:9px}.music-toggle .icon{width:20px}.hero{min-height:calc(100svh - 72px);padding:28px var(--gutter) 0;align-items:stretch}.hero-landscape{object-position:48% center}.invitation{padding:36px 22px 26px;align-self:flex-start}.hero-copy{font-size:23px;line-height:1.35;margin-top:28px}.desktop-break{display:none}.hero-action{font-size:19px;min-height:54px;margin-top:25px;padding:14px 26px}.hero-envelope{width:206px;max-width:100%;margin-top:24px}.hero-date{font-size:var(--small);margin-top:10px}.section-pad{padding-top:72px;padding-bottom:72px}.letter-section{padding-left:14px;padding-right:14px}.letter-paper{padding:40px 26px}.letter-paper h2{font-size:36px;margin-bottom:28px}.letter-paper>p{margin-top:22px}.letter-paper .letter-emphasis{font-size:24px;margin:26px 0}.letter-signature{margin-top:30px}.section-heading{margin-bottom:40px}.section-heading h2{font-size:42px}.section-heading>p{font-size:22px;margin-top:18px}.scrapbook{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 16px}.memory{padding:9px}.memory-one{grid-column:1;align-self:start}.memory-two{grid-column:2;margin-top:38px;align-self:start}.memory figcaption{padding:15px 6px 7px}.memory h3{font-size:21px}.memory figcaption>p{font-size:16px;margin-top:9px;line-height:1.35}.memory-discord{grid-column:1/3;margin-top:8px}.memory-discord figcaption{padding:19px 12px 12px}.memory-discord h3{font-size:24px}.distance-note{grid-column:1/3;display:flex;align-items:center;gap:22px;margin:0 8px}.distance-note .note-heart{width:36px;height:36px;flex-shrink:0;margin:0}.distance-note p{font-size:24px;line-height:1.35}.future{grid-template-columns:1fr;gap:36px;padding-top:60px}.future-picture{max-width:440px;margin:0 auto;width:100%}.future-copy{max-width:none}.future-copy h2{font-size:40px;margin-bottom:24px}.statement{font-size:27px}.future-copy>p:last-child{margin-top:23px}.proposal{grid-template-columns:1fr;gap:38px;padding-top:60px;padding-bottom:62px}.proposal-note{max-width:none;padding:0 4px}.proposal-note .statement{font-size:32px}.proposal-note>p:nth-child(2){margin-top:18px}.proposal-dedication{margin-top:24px}.reply-card{padding:34px 22px 25px;transform:rotate(1deg);max-width:520px;justify-self:center}.reply-card h2{font-size:48px}.reply-card>p{font-size:19px}.answer-garden{height:272px;margin-top:26px}.yes-button{width:143px;min-height:74px;font-size:23px;gap:8px}.yes-button .icon{width:18px}.no-button{width:52px;font-size:var(--small)}.no-button[data-slot="2"],.no-button[data-slot="4"],.no-button[data-slot="6"],.no-button[data-slot="9"]{left:calc(100% - 52px)}.reply-card .garden-caption{font-size:16px;margin-top:14px}.footer{min-height:260px;gap:18px;padding:50px var(--gutter) 32px}.footer>p{font-size:40px;max-width:320px}.footer>span{flex-basis:100%}.music-panel{right:16px;bottom:16px;width:336px}.memory-dialog-copy{padding:28px 24px}.memory-dialog-copy h2{font-size:30px}.response-dialog{padding:34px 24px 26px}.response-dialog>img{width:190px;margin-bottom:16px}.response-dialog h2{font-size:36px}.response-dialog>p{font-size:19px}.response-dialog .response-note{font-size:16px}.response-close{font-size:19px}}
@media(max-width:370px){:root{--gutter:16px;--display:76px}.invitation{padding-left:18px;padding-right:18px}.hero-copy{font-size:22px}.hero-envelope{width:190px}.letter-paper{padding-left:23px;padding-right:23px}.reply-card{padding-left:16px;padding-right:16px}.reply-card h2{font-size:44px}.yes-button{width:135px;font-size:22px}.memory h3{font-size:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.hero-landscape{transform:none}.footer{position:relative}.memory,.future-picture,.reply-card{transform:none}.celebration{display:none}}
@media print{.site-header,.hero-landscape,.rain,.hero-action,.music-panel,.answer-garden,.text-button,.footer,dialog,.celebration{display:none!important}body,main,.section-pad,.hero{background:white!important;color:#173e31!important}.hero{min-height:0;padding:0}.invitation{width:100%;padding:20px}.hero-envelope{width:140px}.section-pad{padding:30px 20px;break-inside:avoid}.letter-paper{padding:20px;width:100%}.proposal{display:block}.proposal-note{display:none}.reply-card{transform:none;max-width:none}h1{font-size:64px}}
/* The complete sheet sits above the sticky back of the letter. */
main{position:relative;z-index:1;background:var(--forest)}
.footer{z-index:0}
.yes-button{white-space:nowrap}
.future-copy>p+p{margin-top:24px}
.response-text{margin-top:22px}
.response-text>p+p{margin-top:20px}
.response-text>p:last-child:not(:first-child){font-size:var(--lead);font-style:italic}
.response-dialog[data-response="yes"]{width:640px}
.response-dialog[data-response="yes"] h2{font-size:34px;line-height:1.15}
@media(max-width:1000px){.future-copy .statement{font-size:var(--lead)}}
@media(max-width:700px){.yes-button{width:148px;padding-left:12px;padding-right:12px}.future-copy .statement{font-size:24px}.memory h3{font-size:19px}}
@media(max-width:700px){.response-dialog[data-response="yes"] h2{font-size:27px}.response-text{font-size:19px}}

.music-status { position: fixed; bottom: 16px; right: 16px; z-index: 20; max-width: min(320px, calc(100vw - 32px)); padding: 12px 16px; background: #f8f6ed; color: #173e31; border: 1px solid #adc1a4; border-radius: 12px; font-size: 14px; }