@font-face{font-family:Caveat;src:url('assets/caveat.ttf') format('truetype');font-display:swap;font-weight:600}
@font-face{font-family:Cormorant;src:url('assets/cormorant.ttf') format('truetype');font-display:swap;font-weight:400}
:root{--desk:#ece5d5;--paper:#faf6e9;--ink:#343d32;--soft-ink:#676b54;--envelope:#d6c8a9;--wax:#823a30;--paper-width:720px;--envelope-width:520px;--envelope-height:322px;color-scheme:light}
*{box-sizing:border-box}
html{overflow-anchor:none;scrollbar-color:#aca185 var(--desk);scrollbar-width:thin}
body{margin:0;background:var(--desk);color:var(--ink);font-family:Cormorant,Georgia,serif;overflow-x:clip}
::selection{background:#dfc568;color:#2d332a}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:2px solid var(--wax);outline-offset:6px}
[hidden]{display:none!important}
.reading-controls{position:fixed;inset:24px 30px auto;z-index:20;display:flex;justify-content:space-between;pointer-events:none;gap:20px}
.reading-controls button{pointer-events:auto;border:0;border-bottom:1px solid #b5aa90;background:var(--desk);padding:6px 0;font-size:17px;line-height:1.4;transition:color .2s}
.reading-controls button:hover{color:var(--wax)}
.stage{position:relative;min-height:100svh;overflow:clip;background:radial-gradient(ellipse at 50% 35%,#f4edde00 20%,#b2a78225 100%)}
.boot:not(.enhanced) .stage{height:100svh}
.boot:not(.enhanced) .paper{visibility:hidden;position:absolute}
.enhanced #journey{height:var(--journey-height,8000px)}
.enhanced .stage{position:fixed;inset:0;height:100svh;min-height:0;perspective:1600px;isolation:isolate}
.desk-mark{position:absolute;top:31px;left:50%;transform:translateX(-50%);font-size:16px;color:#6a6c57;white-space:nowrap;letter-spacing:.035em}
.envelope{position:absolute;width:var(--envelope-width);height:var(--envelope-height);top:50%;left:50%;transform:translate(-50%,-50%) rotate(-4deg);z-index:4;perspective:1200px;filter:drop-shadow(0 24px 22px #64583c25)}
.envelope-rear{z-index:1}
.envelope-front{z-index:4;filter:none}
.envelope-back{position:absolute;inset:0;background:#c4b28b;border-radius:3px;box-shadow:inset 0 0 0 1px #aa987a60}
.envelope-lining{position:absolute;inset:5px;background:#6c765e;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.envelope-lining::after{content:'';position:absolute;inset:10px;border:1px solid #c3bc8a70}
.envelope-pocket{position:absolute;inset:0;z-index:3;clip-path:polygon(0 0,50% 44%,100% 0,100% 100%,0 100%);background:linear-gradient(31deg,#d2c3a2 49.8%,#c5b591 50%,#ddcfaf 50.4%);border-radius:3px}
.envelope-pocket::after{content:'';position:absolute;inset:0;clip-path:polygon(0 100%,50% 42%,100% 100%);background:linear-gradient(160deg,#e1d5b9,#d2c3a2);box-shadow:0 -2px 2px #80714a25}
.envelope-flap{position:absolute;inset:0;z-index:6;transform-origin:50% 0;transform:rotateX(0deg);backface-visibility:visible;clip-path:polygon(0 0,100% 0,50% 55%);background:linear-gradient(175deg,#e5dac0,#d0bf9a);filter:drop-shadow(0 2px 1px #75603c33)}
.flap-inner{position:absolute;inset:4px 5px;background:#768064;clip-path:polygon(0 0,100% 0,50% 54%);opacity:0}
.address{position:absolute;inset:auto 22% 11%;z-index:7;text-align:center;display:flex;flex-direction:column;align-items:center;color:#424a38;pointer-events:none;line-height:1.1}
.address>span:first-child{font-size:18px;font-style:italic}
.recipient{font-family:Caveat,cursive;font-size:70px;line-height:1}
.sender{font-size:17px;margin-top:3px;font-style:italic;white-space:nowrap}
.stamp{position:absolute;z-index:7;right:25px;bottom:23px;width:68px;height:84px;border:1px solid #8a8060;outline:1px solid #8a8060;outline-offset:4px;display:flex;flex-direction:column;align-items:center;color:#6a7250;transform:rotate(5deg)}
.stamp span:first-child{font-size:23px;line-height:1.2;margin-top:3px}
.stamp span:nth-child(2){font-family:Georgia,serif;font-size:8px;letter-spacing:.07em}
.stamp svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:1.1}
.wax-seal{position:absolute;z-index:8;left:50%;top:26%;width:66px;height:64px;transform:translateX(-50%) rotate(9deg);background:radial-gradient(ellipse at 28% 20%,#b06348,#8b4033 50%,#682b26);border-radius:47% 53% 46% 54% / 54% 45% 55% 46%;box-shadow:0 5px 7px #4934213d,inset 0 0 0 4px #ac5e4433,inset 0 0 0 7px #63292244;display:grid;place-items:center}
.wax-seal {
  background: radial-gradient(ellipse at 33% 23%, #a65b4a, #843e33 54%, #63312b);
  box-shadow: 0 3px 6px #49342142, inset 0 1px 2px #eab19370, inset 0 -2px 4px #49221e66;
}

.wax-seal::before {
  content: '';
  position: absolute;
  inset: 13%;
  border: 1px solid #e4ad8b66;
  border-radius: 50%;
  box-shadow: 0 1px 1px #4b211d88, inset 0 1px 2px #4b211d70;
}

.wax-seal span {
  font-family: Cormorant, Georgia, serif;
  font-style: italic;
  font-size: 34px;
  line-height: 1;
  color: #f4cfb5;
  text-shadow: 0 1px 1px #51251f;
}
.paper{position:relative;width:min(var(--paper-width),calc(100% - 40px));margin:90px auto;background:var(--paper);padding:60px 76px 72px;box-shadow:0 20px 50px #5e503c26,0 1px 3px #68583e26;isolation:isolate}
.enhanced .paper{position:absolute;top:0;left:50%;margin:0;z-index:2;transform-origin:50% 0;will-change:transform;box-shadow:0 15px 38px #5e503c20,0 1px 3px #68583e26}
.paper::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#b7a57409,transparent 4%,transparent 96%,#b7a57412)}
.paper-edge{position:absolute;inset:5px -2px -2px 3px;background:#e3dac4;z-index:-2;transform:rotate(.15deg)}

.paper::before {
  background-image: linear-gradient(90deg, #80633a14, transparent 6%, transparent 93%, #8f714918), url('assets/papel.webp');
  background-size: 100% 100%, 240px 240px;
  background-blend-mode: multiply;
  opacity: .18;
  mix-blend-mode: multiply;
}

.envelope-back,
.envelope-pocket,
.envelope-pocket::after,
.envelope-flap,
.envelope-lining,
.flap-inner {
  background-image: linear-gradient(#eee0c88c, #eee0c88c), url('assets/papel.webp'), var(--paper-light, none);
  background-size: 100% 100%, 190px 190px, 100% 100%;
  background-blend-mode: normal, soft-light, normal;
}

.envelope-pocket { --paper-light: linear-gradient(31deg, #cbbb98, #ded2b4 73%); background-color: #d6c8a9; }
.envelope-pocket::after { --paper-light: linear-gradient(163deg, #e4d8bc, #c8b693); background-color: #d6c8a9; }
.envelope-flap { --paper-light: linear-gradient(173deg, #eee2c7, #cbbb96); background-color: #d6c8a9; }
.envelope-lining,
.flap-inner {
  background-image: linear-gradient(#6c765eaa, #6c765eaa), url('assets/papel.webp');
  background-blend-mode: normal, multiply;
}

@media print {
  .paper::before { display: none; }
}
.letter-heading time{display:block;text-align:right;color:var(--soft-ink);font-size:17px;margin-bottom:42px;font-style:italic}
h1{font-family:Caveat,cursive;font-size:65px;font-weight:600;line-height:1.05;margin:0 0 10px;letter-spacing:-.015em}
.aside{font-family:Caveat,cursive;font-size:24px;line-height:1.35;margin:0 0 35px;color:#6d7057;max-width:390px}
.letter-copy{font-family:Caveat,cursive;font-size:29px;font-weight:600;line-height:1.45;letter-spacing:.005em}
.letter-copy p{margin:0 0 28px}
.letter-copy .birthday{font-size:35px;margin-bottom:32px}
.sign-off{margin:42px 0 0 40%;padding-bottom:34px}
.sign-off p{margin:0}
.sign-off .signature{font-size:58px;line-height:1.2;color:#48513e;transform:rotate(-5deg);margin-top:7px}
.postscript{border-top:1px solid #d8cdb2;padding-top:34px;margin-top:20px}
.postscript p{font-size:25px;line-height:1.35;margin-bottom:0}
.photo-promise{display:flex;align-items:center;gap:20px;margin-bottom:24px;color:#737158}
.photo-promise svg{width:96px;flex:none;stroke:#8a886d;fill:none;stroke-width:1;transform:rotate(-7deg)}
.photo-promise span{font-size:25px;line-height:1.2;max-width:170px}
.fold-line{position:absolute;left:0;right:0;height:1px;background:#b4a67c25;box-shadow:0 3px 8px #8c79581a;pointer-events:none}
.fold-one{top:33.333%}.fold-two{top:66.666%}
.word{display:inline-block;white-space:nowrap}
.glyph{display:inline-block;white-space:pre}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.enhanced .glyph{opacity:0}
.scroll-hint{position:absolute;left:50%;bottom:37px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;white-space:nowrap;color:#525c46;z-index:9;pointer-events:none}
.scroll-hint>span:first-child{font-family:Caveat,cursive;font-size:28px}
.hint-action{font-size:18px;font-style:italic}
.scroll-hint svg{width:20px;height:31px;stroke:currentColor;stroke-width:1;fill:none;margin-top:8px}
.memory{display:none;margin:0;position:absolute;bottom:9%;width:min(25vw,340px);z-index:5;pointer-events:none;transform-origin:50% 85%;opacity:0}
.enhanced .memory{display:block}
.memory-one{left:max(0px,calc(50% - 720px));transform:rotate(-7deg)}
.memory-two{right:max(0px,calc(50% - 720px));transform:rotate(6deg)}
.memory-three{left:max(0px,calc(50% - 720px));transform:rotate(-5deg)}

.memory video,.memory .still{width:100%;height:auto;aspect-ratio:9/16;max-height:48vh;object-fit:contain;display:block;filter:drop-shadow(0 14px 13px #6e63432b)}
.memory video{display:none}.memory.playing video{display:block}.memory.playing .still{display:none}
.memory figcaption{font-family:Caveat,cursive;font-size:27px;line-height:1.1;text-align:center;margin-top:4px;color:#5b654b}
.end-note{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);font-family:Caveat,cursive;font-size:26px;white-space:nowrap;opacity:0;z-index:8;color:#5b654b}
@keyframes ink{to{opacity:1}}
@keyframes unseal{0%{opacity:1;transform:translateX(-50%) rotate(9deg)}100%{opacity:0;transform:translate(-50%,45px) rotate(35deg) scale(.8)}}
@keyframes lift-flap{0%{transform:rotateX(0deg)}100%{transform:rotateX(180deg)}}
@keyframes show-lining{to{opacity:1}}
@keyframes hide-address{to{opacity:0}}
@keyframes envelope-away{0%{transform:translate(-50%,-50%) rotate(-4deg);opacity:1}45%{transform:translate(-50%,-50%) rotate(0deg);opacity:1}100%{transform:translate(-50%,55svh) rotate(3deg);opacity:0}}
@keyframes hint-away{to{opacity:0;translate:0 15px}}
@keyframes photo-left{0%{opacity:0;transform:translate(-35px,70px) rotate(-12deg) scale(.85)}18%,76%{opacity:1;transform:translate(0,0) rotate(-5deg) scale(1)}100%{opacity:0;transform:translate(-20px,-50px) rotate(0deg) scale(.96)}}
@keyframes photo-right{0%{opacity:0;transform:translate(35px,70px) rotate(12deg) scale(.85)}18%,76%{opacity:1;transform:translate(0,0) rotate(5deg) scale(1)}100%{opacity:0;transform:translate(20px,-50px) rotate(0deg) scale(.96)}}
@keyframes ending{to{opacity:1}}
.native .glyph{animation:ink 1ms steps(1,end) both;animation-timeline:scroll(root block);animation-range:var(--start) var(--end)}
.native .wax-seal{animation:unseal linear both;animation-timeline:scroll(root block);animation-range:0px var(--seal-end)}
.native .envelope-flap{animation:lift-flap linear both;animation-timeline:scroll(root block);animation-range:var(--flap-start) var(--flap-end)}
.native .flap-inner{animation:show-lining linear both;animation-timeline:scroll(root block);animation-range:var(--flap-start) var(--flap-end)}
.native .envelope{animation:envelope-away linear both;animation-timeline:scroll(root block);animation-range:0px var(--open-end)}
.native .scroll-hint{animation:hint-away linear both;animation-timeline:scroll(root block);animation-range:0px var(--seal-end)}
.native .desk-mark{animation:hide-address linear both;animation-timeline:scroll(root block);animation-range:0px var(--flap-start)}
.native .paper{animation:letter-journey linear both;animation-timeline:scroll(root block);animation-range:0px var(--total)}
.native .memory-one{animation:photo-left linear both;animation-timeline:scroll(root block);animation-range:var(--photo-one-start) var(--photo-one-end)}
.native .memory-two{animation:photo-right linear both;animation-timeline:scroll(root block);animation-range:var(--photo-two-start) var(--photo-two-end)}
.native .memory-three{animation:photo-left linear both;animation-timeline:scroll(root block);animation-range:var(--photo-three-start) var(--photo-three-end)}
.native .end-note{animation:ending linear both;animation-timeline:scroll(root block);animation-range:var(--end-start) var(--total)}
.plain #journey{height:auto!important}.plain .stage{position:relative;height:auto;min-height:100svh;overflow:visible}.plain .paper{position:relative;left:auto;transform:none!important;clip-path:none!important;opacity:1!important;margin:90px auto 40px;animation:none!important;will-change:auto}
.plain .glyph{opacity:1!important;animation:none!important}.plain .envelope,.plain .scroll-hint,.plain .memory,.plain .desk-mark,.plain .end-note{display:none!important}
@media(min-width:1500px){:root{--paper-width:760px}.paper{padding:65px 84px 80px}.letter-copy{font-size:31px}}
@media(max-width:1050px){:root{--paper-width:620px;--envelope-width:460px;--envelope-height:285px}.paper{padding:48px 58px 60px}.letter-copy{font-size:28px}.memory{width:24vw;bottom:5%;z-index:3}.memory-one{left:-4vw}.memory-two{right:-4vw}.memory figcaption{font-size:23px}}
@media(max-width:650px){:root{--paper-width:500px;--envelope-width:min(84vw,420px);--envelope-height:52vw}.reading-controls{inset:15px 20px auto;gap:10px}.reading-controls button{font-size:15px}.desk-mark{display:none}.envelope{max-height:260px}.recipient{font-size:clamp(34px,11vw,52px)}.address{inset:auto 22% 9%}.address>span:first-child{font-size:13px}.sender{font-size:clamp(11px,3.6vw,14px);margin-top:2px}.wax-seal{width:51px;height:50px;top:22%}.wax-seal span{font-size:28px}.stamp{width:45px;height:59px;right:18px;bottom:16px}.stamp span:first-child{font-size:18px}.stamp span:nth-child(2){font-size:6px}.stamp svg{width:24px;height:24px}.paper{width:calc(100% - 36px);padding:34px 29px 50px}.letter-heading time{font-size:14px;margin-bottom:29px}h1{font-size:52px}.aside{font-size:22px;margin-bottom:30px;max-width:255px}.letter-copy{font-size:25px;line-height:1.43;letter-spacing:0}.letter-copy p{margin-bottom:27px}.letter-copy .birthday{font-size:30px}.sign-off{margin:28px 0 0 30%;padding-bottom:20px}.sign-off .signature{font-size:50px}.postscript{padding-top:25px}.postscript p{font-size:23px}.photo-promise{gap:16px}.photo-promise svg{width:75px}.photo-promise span{font-size:22px}.memory{width:42vw;max-width:190px;bottom:25px;z-index:5}.memory-one{left:-18px}.memory-two{right:-18px}.memory figcaption{font-size:21px;text-align:center}.scroll-hint{bottom:46px}.scroll-hint>span:first-child{font-size:26px}.hint-action{font-size:17px}.end-note{font-size:23px;bottom:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.memory video{display:none!important}.memory .still{display:block!important}}
@media print{.reading-controls,.envelope,.memory,.scroll-hint,.desk-mark,.end-note{display:none!important}#journey{height:auto!important}.stage{position:relative!important;height:auto!important;overflow:visible!important;background:none}.paper{position:relative!important;left:auto!important;transform:none!important;clip-path:none!important;opacity:1!important;animation:none!important;box-shadow:none;margin:0 auto!important;padding:20px;width:100%}.glyph{opacity:1!important;animation:none!important}.paper-edge{display:none}body{background:white}.letter-copy{font-size:23px}}

.native .glyph,.native .envelope,.native .envelope-flap,.native .flap-inner,.native .wax-seal,.native .address,.native .stamp,.native .paper,.native .scroll-hint,.native .desk-mark,.native .memory,.native .end-note{animation-duration:1ms}

.letter-copy {
  font-family: Georgia, serif;
  color: #33392e;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: normal;
}

.letter-copy .birthday,
.sign-off .signature,
.photo-promise span {
  font-family: Caveat, cursive;
  font-weight: 600;
}

.postscript p { font-size: .94em; line-height: 1.6; }
.aside { color: #565b48; }
.stamp { color: #545c43; border-color: currentColor; outline-color: currentColor; }
.address { color: #363e2f; }
@media(max-width:1050px){.memory-three{left:-4vw}}@media(max-width:650px){.memory-three{left:-18px}}
@media(max-width:650px){.memory{width:min(34vw,145px);bottom:12px}.memory video,.memory .still{max-height:24vh}.memory figcaption{font-size:16px}.memory-one,.memory-three{left:4px}.memory-two{right:4px}}