:root{--paper:#f8f5ef;--ink:#292721;--muted:#77736b;--red:#ad292e;--pink:#e8bfc0;--line:#ddd8ce;--serif:'DM Serif Display',Georgia,serif;--sans:'DM Sans',Arial,sans-serif;--hand:'Caveat','Segoe Print',cursive}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.6 var(--sans);-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.035;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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.65' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--red);outline-offset:6px}button{border:0}button:disabled{cursor:default;opacity:.3}img{display:block;width:100%;height:100%;object-fit:cover}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}.svg-defs{position:absolute;width:0;height:0}h1,h2,h3,p{margin:0}h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.045em;line-height:1.04}h1{font-size:clamp(44px,5.4vw,76px)}h2{font-size:clamp(38px,4.5vw,60px)}h1 em,h2 em{font-weight:400;color:var(--red)}.hand{font-family:var(--hand);font-weight:400}.masthead{height:92px;max-width:1280px;margin:auto;padding:0 56px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.wordmark{background:none;padding:0;display:flex;align-items:center;font-family:var(--serif);font-size:31px;line-height:1;letter-spacing:-3px}.little-knot{font:italic 20px var(--serif);color:var(--red);padding:0 5px}.wordmark-note{font:11px var(--sans);letter-spacing:.01em;margin-left:24px;color:var(--muted)}.music-button{display:flex;gap:10px;align-items:center;background:transparent;font-size:11px;padding:12px 0 12px 12px}.equalizer{display:flex;gap:3px;align-items:center;height:18px;color:var(--red)}.equalizer i{width:2px;height:7px;background:currentColor}.equalizer i:nth-child(2){height:14px}.equalizer i:nth-child(3){height:10px}.playing .equalizer i{animation:equalize .7s ease-in-out infinite alternate}.playing .equalizer i:nth-child(2){animation-delay:.2s}.playing .equalizer i:nth-child(3){animation-delay:.4s}main{width:100%;overflow:clip;min-height:calc(100svh - 164px)}.scene{max-width:1040px;margin:auto;padding:52px 42px 70px;text-align:center}.scene[hidden]{display:none!important}.scene.active{animation:arrive .5s ease both}.eyebrow{text-transform:uppercase;letter-spacing:.17em;font-size:9px;color:var(--muted);margin-bottom:20px}.intro{color:var(--muted);margin-top:21px;font-size:13px;line-height:1.75}.cover{padding-top:40px;padding-bottom:34px}.cover-collage{height:310px;max-width:730px;margin:15px auto 0;position:relative;isolation:isolate}.cover-thread{position:absolute;inset:0;width:100%;height:100%;z-index:-1;stroke:var(--red);stroke-width:1.5}.polaroid{background:#fffdf9;padding:10px 10px 13px;box-shadow:0 4px 7px #5140330a,0 12px 26px #51403310;border:1px solid #e8e2d9;position:relative}.cover-photo{position:absolute;top:27px;width:200px;height:253px;transition:transform .4s,box-shadow .4s}.cover-photo-one{left:21%;transform:rotate(-9deg)}.cover-photo-two{left:46%;top:40px;transform:rotate(8deg)}.cover-photo img{height:197px;filter:saturate(.65) contrast(.94)}.cover-photo:hover{box-shadow:0 15px 30px #51403325}.cover-photo:active{transform:rotate(0) scale(.97)}.photo-caption{display:block;font:22px/1.2 var(--hand);margin-top:10px}.tape{position:absolute;width:75px;height:24px;top:-11px;left:calc(50% - 37px);background:#e0aaa875;transform:rotate(-4deg);z-index:2;clip-path:polygon(2% 0,98% 2%,95% 20%,100% 40%,96% 60%,100% 100%,0 97%,4% 70%,0 50%,4% 20%)}.tape.blue{background:#b9ccd399;transform:rotate(8deg)}.cover-note{position:absolute;left:0;top:48px;font-size:23px;line-height:1.1;text-align:left;transform:rotate(-9deg);color:#81766c}.date-stamp{position:absolute;right:5%;top:62px;border:1px solid #b3a795;border-radius:50%;width:94px;height:94px;display:flex;flex-direction:column;justify-content:center;font-size:8px;line-height:1.4;transform:rotate(13deg);text-transform:uppercase;letter-spacing:.12em;color:#8b7c6b}.date-stamp strong{font:37px/.95 var(--serif);color:var(--red)}.collage-note{position:absolute;right:4%;bottom:30px;color:var(--red);font-size:24px;transform:rotate(-8deg)}.cover-back{display:flex;position:absolute;inset:9px;background:#f2e5d9;align-items:center;justify-content:center;flex-direction:column;font:30px/1.2 var(--hand);opacity:0;transform:rotateY(90deg);transition:transform .4s,opacity .2s;color:var(--red)}.cover-back small{font:9px var(--sans);margin-top:24px;color:var(--muted)}.flipped .cover-back{opacity:1;transform:rotateY(0)}.flipped{transform:rotate(0)}.cover-action{display:flex;flex-direction:column;align-items:center;gap:15px}.button{display:inline-flex;gap:23px;justify-content:center;align-items:center;min-height:47px;padding:12px 24px;border-radius:999px;text-decoration:none;font-size:11px;font-weight:500;transition:background .2s,transform .2s}.primary{background:var(--red);color:#fffaf4}.primary:hover{background:#8f1f24}.button:active{transform:scale(.97)}.button svg{width:17px;height:17px}.micro{font-size:9px;color:var(--muted)}.journey-nav{max-width:1168px;margin:auto;padding:22px 0 24px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted)}.nav-back{padding:5px 16px 5px 0;background:none}.journey-dots{display:flex;gap:12px}.journey-dots button{position:relative;padding:0;background:#d3cec5;width:6px;height:6px;border-radius:50%;transition:background .2s,width .2s}.journey-dots button:before{content:"";position:absolute;inset:-17px -5px}.journey-dots button.active{background:var(--red);width:24px;border-radius:5px}.section-heading>p:last-child{margin-top:18px;color:var(--muted);font-size:13px}.board-toolbar{display:flex;justify-content:space-between;align-items:center;margin:36px 0 24px}.tabs{display:flex;gap:5px}.tab{border-radius:30px;background:none;padding:10px 17px;font-size:10px}.tab.active{background:var(--ink);color:white}.tab span{margin-left:6px;font-size:9px}.board-hint{font:20px var(--hand);color:var(--muted)}.photo-board{columns:3;column-gap:19px;text-align:left}.pin{break-inside:avoid;margin-bottom:23px;position:relative}.pin-open{width:100%;display:block;background:none;padding:0;text-align:left}.pin-image{overflow:hidden;border-radius:10px;position:relative;background:#e5ddd1}.pin-image img{height:auto;aspect-ratio:4/5;transition:transform .4s;filter:saturate(.7)}.pin:nth-child(2n) .pin-image img{aspect-ratio:1/1}.pin:nth-child(3n) .pin-image img{aspect-ratio:4/5.5}.pin-open:hover img{transform:scale(1.04)}.pin-title{font-size:11px;font-weight:500;display:block;margin-top:9px}.pin-caption{font:19px var(--hand);color:var(--muted)}.pin-save{position:absolute;right:10px;top:10px;width:36px;height:36px;background:#fff9;border-radius:50%;display:grid;place-items:center;backdrop-filter:blur(4px);color:var(--red)}.pin-save.saved{background:var(--red);color:white}.pin-save.saved svg{fill:currentColor}.saved-tag{position:absolute;bottom:10px;left:10px;background:#fff9;padding:3px 9px;border-radius:20px;font-size:9px}.scene-footer{display:flex;justify-content:space-between;align-items:center;margin-top:20px;gap:20px}.scene-footer>.hand{font-size:25px;color:var(--red)}.empty-state{padding:60px 0;color:var(--muted)}.thread-scene{max-width:840px}.thread-table{height:340px;position:relative;margin:30px auto 10px;max-width:620px}.connecting-thread{position:absolute;inset:0;width:100%;height:100%;stroke:var(--red);stroke-width:1.4}.mini-polaroid{position:absolute;top:22px;width:160px;padding:8px 8px 14px;background:#fffdfa;border:1px solid #e4ded4;box-shadow:0 8px 18px #46352512;transition:transform 1s cubic-bezier(.2,.8,.2,1),left 1s,right 1s}.mini-polaroid img{height:177px;filter:saturate(.6)}.mini-polaroid span{font:24px var(--hand)}.hers{left:8%;transform:rotate(-10deg)}.his{right:8%;transform:rotate(9deg)}.thread-track{position:absolute;bottom:0;left:15%;right:15%;height:54px;border:1px solid #decfc4;background:#f1e9df;border-radius:40px;text-align:center;user-select:none}.track-label{font-size:10px;color:#8b7b6f;line-height:52px}.thread-target{position:absolute;right:8px;top:7px;display:grid;place-items:center;width:38px;height:38px;border:1px dashed #b9847d;border-radius:50%;font:17px var(--hand);color:var(--red)}#thread-handle{position:absolute;left:4px;top:4px;width:44px;height:44px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;touch-action:none;z-index:1;box-shadow:0 3px 7px #7c242329}#thread-handle svg{width:19px;height:19px;fill:currentColor}.connected .hers{left:24%;transform:rotate(-6deg)}.connected .his{right:24%;transform:rotate(7deg)}.connected .track-label{opacity:0}.connected .thread-track{background:#ead8d0}.connection-note{margin:25px 0}.connection-note>.hand{font-size:29px;color:var(--red)}.connection-note>p:last-child{font-size:11px;color:var(--muted);margin-top:5px}.envelope-wrap{perspective:900px;max-width:450px;margin:65px auto 70px}.envelope{display:block;width:100%;height:270px;position:relative;background:#e9dfd0;box-shadow:0 16px 30px #6e4b3510;isolation:isolate;border:1px solid #d8ccbc}.envelope:after{content:"";position:absolute;inset:0;background:#eee4d6;clip-path:polygon(0 0,50% 62%,100% 0,100% 100%,0 100%);z-index:-1}.envelope-flap{position:absolute;inset:0;background:#d9cbb8;clip-path:polygon(0 0,100% 0,50% 59%);transform-origin:top;transition:transform .65s}.envelope-address{position:absolute;bottom:24px;left:25px;text-align:left;font-size:27px;line-height:1.1}.wax-seal{position:absolute;top:46%;left:calc(50% - 25px);width:50px;height:50px;border-radius:48% 52% 44% 56%;background:var(--red);color:#e9b1aa;display:grid;place-items:center;box-shadow:0 4px 6px #79232938,inset 0 0 0 4px #ffffff12}.wax-seal svg{width:23px;height:23px}.envelope-hint{position:absolute;bottom:-38px;left:0;right:0;font-size:10px;color:var(--muted)}.opening .envelope-flap{transform:rotateX(180deg)}.opening .wax-seal{transform:scale(0);transition:transform .3s}.letter-paper{position:relative;max-width:650px;margin:40px auto 0;text-align:left;padding:45px 50px;background:#fffdf8;border:1px solid #e5ddd2;box-shadow:0 8px 30px #56432c09;animation:arrive .7s ease both}.letter-paper:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0,transparent 31px,#b7a48a0c 32px)}.letter-topline{display:flex;justify-content:space-between;gap:10px;font-size:9px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:24px}.letter-paper h3{font-size:34px;font-weight:400;color:var(--red);margin-bottom:21px}.letter-paper p{font-size:13px;line-height:1.95;margin-bottom:20px}.letter-signature{display:flex;flex-direction:column;align-items:flex-start;position:relative;font-size:11px;padding-top:10px}.letter-signature strong{font-size:36px;color:var(--red);font-weight:400}.letter-signature svg{position:absolute;right:0;bottom:10px;color:var(--red);width:35px;height:35px;transform:rotate(13deg)}.letter-next{margin-top:35px}.ending-scene{padding-top:45px}.ending-photo{width:180px;margin:30px auto 36px;transform:rotate(-5deg)}.ending-photo img{height:175px;filter:saturate(.6)}.ending-photo .photo-caption{font-size:21px}.ending-scene>p:not(.eyebrow){font-size:13px;color:var(--muted);margin-top:22px}.ending-scene>.button{margin-top:28px}.ending-scene>.heart-response{font-size:24px!important;color:var(--red)!important;margin-top:17px!important}.text-button{display:block;margin:15px auto 0;padding:10px;background:none;text-decoration:underline;text-underline-offset:5px;font-size:10px;color:var(--muted)}dialog{border:0;color:var(--ink);padding:0;background:#fffaf4;box-shadow:0 30px 100px #24170944}dialog::backdrop{background:#29221bc9;backdrop-filter:blur(5px)}.photo-dialog{width:min(820px,calc(100% - 36px));max-height:85dvh;border-radius:10px;overflow:auto}.photo-dialog[open]{display:grid;grid-template-columns:1fr 1fr;animation:arrive .3s ease}.dialog-close{position:absolute;right:12px;top:12px;width:38px;height:38px;display:grid;place-items:center;background:#f9f6f0ee;border-radius:50%;font-size:26px;line-height:1;z-index:2}.dialog-photo-wrap{background:#eee5db;padding:25px 25px 15px}.dialog-photo-wrap img{height:365px;border-radius:3px;object-fit:cover}.dialog-photo-wrap>.hand{font-size:28px;display:block;text-align:center;padding-top:10px}.dialog-note{padding:65px 35px 35px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.dialog-note .eyebrow{font-size:8px}.dialog-note h3{font:31px/1.1 var(--serif);margin-bottom:20px}.dialog-note>p:not(.eyebrow){font-size:13px;line-height:1.8;color:var(--muted)}.dialog-note .button{margin-top:27px}.music-dialog{padding:55px 32px 32px;width:min(420px,calc(100% - 36px));border-radius:8px;text-align:center}.music-dialog>.hand{font-size:25px;color:var(--red)}.music-dialog h3{font:38px var(--serif);margin-top:18px}.music-dialog p{color:var(--muted);font-size:12px;margin-top:10px}.music-dialog .button{margin-top:22px}#heart-particles{position:fixed;inset:0;pointer-events:none;z-index:30;overflow:hidden}.particle{position:absolute;width:22px;height:22px;color:var(--red);animation:heartRise 1.7s ease-out forwards}.particle svg{fill:currentColor;width:100%;height:100%}@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes equalize{to{height:4px}}@keyframes heartRise{0%{opacity:0;transform:translate(0,15px) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(var(--drift),-200px) rotate(var(--rotation)) scale(1.2)}}[hidden]{display:none!important}
@media(min-width:1440px){.cover{padding-top:48px}.cover-collage{height:335px}.cover-photo{top:35px}.cover-photo-two{top:48px}.cover-action{margin-top:10px}}
@media(max-width:750px){.masthead{margin:0 24px;height:77px;padding:0}.wordmark-note{margin-left:17px;font-size:9px}.wordmark{font-size:28px}.music-button{font-size:10px}.scene{padding:42px 24px 45px}.cover{padding-top:35px;padding-bottom:35px}h1{font-size:clamp(39px,8.8vw,59px)}h2{font-size:43px}.eyebrow{font-size:8px;letter-spacing:.13em;margin-bottom:18px}.intro{font-size:12px;margin-top:19px}.cover-collage{height:307px;margin-top:24px;max-width:440px}.cover-photo{width:43%;height:231px;top:27px;padding:8px 8px 10px}.cover-photo img{height:174px}.cover-photo-one{left:6%;top:20px}.cover-photo-two{left:47%;top:48px}.photo-caption{font-size:20px;margin-top:12px}.cover-note{display:none}.date-stamp{width:67px;height:67px;right:0;top:0;font-size:6px;z-index:2;background:#f8f5efc9}.date-stamp strong{font-size:27px}.collage-note{font-size:23px;right:0;bottom:0}.cover-thread{left:-8%;width:116%;top:-12px}.cover-action{gap:16px;margin-top:23px}.button{min-height:49px;padding:13px 21px;font-size:11px}.micro{font-size:8px}.journey-nav{margin:0 24px;padding:23px 0}.journey-dots{gap:13px}main{min-height:calc(100svh - 147px)}.board-toolbar{margin-top:29px;flex-direction:column;align-items:flex-start;gap:12px}.board-hint{font-size:20px;align-self:flex-end}.photo-board{columns:2;column-gap:12px}.pin{margin-bottom:19px}.pin-title{font-size:10px}.pin-caption{font-size:18px}.pin-save{width:33px;height:33px;right:8px;top:8px}.pin-save svg{width:16px;height:16px}.scene-footer{flex-direction:column;gap:21px;margin-top:28px}.scene-footer>.hand{font-size:24px}.thread-table{height:310px;margin-top:33px}.mini-polaroid{width:43%;top:20px;padding:7px 7px 11px}.mini-polaroid img{height:158px}.mini-polaroid span{font-size:23px}.hers{left:1%}.his{right:1%}.connected .hers{left:12%}.connected .his{right:12%}.thread-track{left:0;right:0}.track-label{font-size:9px;padding-left:7px}.thread-target{font-size:16px}.connection-note>.hand{font-size:25px}.connection-note>p:last-child{font-size:10px}.envelope-wrap{margin:58px 2px 68px}.envelope{height:225px}.envelope-address{font-size:26px}.letter-paper{padding:28px 23px;margin-top:30px}.letter-topline{font-size:8px}.letter-paper p{font-size:12px;line-height:1.95}.letter-paper h3{font-size:31px}.photo-dialog[open]{display:block;max-width:440px}.dialog-photo-wrap{padding:20px 20px 10px}.dialog-photo-wrap img{height:270px}.dialog-photo-wrap>.hand{font-size:25px}.dialog-note{padding:23px 25px 27px}.dialog-note .eyebrow{margin-bottom:10px}.dialog-note h3{font-size:28px;margin-bottom:12px}.dialog-note>p:not(.eyebrow){font-size:12px}.dialog-note .button{margin-top:18px}.ending-scene{padding-top:38px}.ending-photo{width:168px;margin-top:34px}.ending-photo img{height:160px}.ending-scene>p:not(.eyebrow){font-size:12px}.cover-back{font-size:25px}.cover-back small{font-size:8px}}
@media(max-width:360px){.scene{padding-left:18px;padding-right:18px}.masthead,.journey-nav{margin-left:18px;margin-right:18px}.wordmark-note{max-width:95px;line-height:1.3}.cover-collage{height:280px}.cover-photo{height:209px}.cover-photo img{height:155px}.photo-caption{font-size:18px}.collage-note{font-size:21px}.intro{font-size:11px}h1{font-size:37px}h2{font-size:37px}.track-label{font-size:8px}.mini-polaroid img{height:143px}}
.cover-photo .photo-caption{font-size:19px;white-space:nowrap}.cover-note{left:-22px;top:20px;font-size:20px}.collage-note{bottom:0;font-size:23px}.cover-collage{height:330px}.cover-photo img{height:calc(100% - 36px)}
@media(max-width:750px){.cover-collage{height:325px}.cover-photo .photo-caption{font-size:17px;margin-top:10px}.collage-note{bottom:0;font-size:22px}.cover-photo-two{top:49px}.cover-action{margin-top:14px}}
@media(max-width:360px){.cover-collage{height:300px}.cover-photo .photo-caption{font-size:15px}.collage-note{font-size:21px}}
.mini-polaroid span{display:block;text-align:left;padding-left:7px}.connected .thread-target{opacity:0}
@media(max-width:750px){.letter-paper p{font-size:14px;line-height:1.9}.connected .hers{left:8%}.connected .his{right:8%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Keep one solid entry action, an outlined continuation, and a quiet letter link. */
.button{gap:12px;padding-inline:27px}.scene-footer .button{background:transparent;color:var(--red);border:1px solid #b6656459}.scene-footer .button:hover{background:#ad292e0a}.letter-next .button{background:transparent;color:var(--red);border-radius:0;padding:10px 2px;min-height:44px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}.letter-next .button:hover{color:#781b20}