@font-face{font-family:Letter;src:url('assets/Allura-Regular.ttf') format('truetype');font-display:swap}
:root{color-scheme:light;--ink:#493323;--red:#862628;--paper:#ead9b2}
*{box-sizing:border-box}body{margin:0;min-height:100svh;color:var(--ink);background:radial-gradient(ellipse at 50% 37%,#f0e4c9 0%,#e2d1ae 60%,#c5ad82 100%);font-family:Georgia,serif;display:flex;flex-direction:column}body:before{position:fixed;inset:0;content:"";filter:url(#paper-grain);opacity:.15;pointer-events:none;mix-blend-mode:multiply;z-index:10}.texture-filter{position:absolute;width:0;height:0}header,footer{display:flex;align-items:center;justify-content:space-between;margin:0 5vw;position:relative}header{height:100px;border-bottom:1px solid #705c3224;flex-shrink:0}.brand,.place,footer>span:first-child{font-size:11px;letter-spacing:.24em}.brand{font-weight:bold}.place{opacity:.66}.small-star{position:absolute;left:50%;font-size:26px;color:#92754b}main{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:26px 12px 16px}.scene{width:min(880px,90vw);perspective:1700px;margin:12px auto 20px}.letter{height:570px;position:relative;transform:rotate(-1deg);transition:transform 2s ease}.paper{position:absolute;top:0;height:100%;background:radial-gradient(ellipse at 38% 27%,#f6e9c9 0%,#ecdbb5 58%,#dfc99a 100%);box-shadow:inset 0 0 36px #8c63251d,0 12px 24px #53391420;border:1px solid #a285502c}.paper:after{content:"";position:absolute;inset:0;filter:url(#paper-grain);mix-blend-mode:multiply;opacity:.15;pointer-events:none}.middle{width:50%;left:25%;background:linear-gradient(90deg,#dfcba3,#f1e2bf 9%,#ecdbb5 48%,#dac499 50%,#efdfba 52%,#e7d3aa 94%,#d7bd8f)}.wing{width:25%;z-index:3;backface-visibility:visible;transition:transform 2.1s cubic-bezier(.22,.65,.18,1),filter 2.1s ease}.left{left:0;transform-origin:100% 50%;transform:rotateY(180deg);background:linear-gradient(90deg,#dbc398,#ecdbb7 18%,#f0e1bf 94%,#c5a978)}.right{right:0;transform-origin:0 50%;transform:rotateY(-180deg);background:linear-gradient(90deg,#cfb484,#eeddb9 8%,#eddbb4 82%,#d6bd90);transition-delay:.16s}.unfolded .wing{transform:rotateY(0)}.unfolded .letter{transform:rotate(0)}.seal{position:absolute;width:148px;height:148px;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-8deg);border:0;padding:0;background:none;z-index:5;cursor:pointer;filter:drop-shadow(3px 9px 6px #42251355);transition:filter .2s}.seal:hover{filter:drop-shadow(3px 10px 10px #42251380) brightness(1.08)}.seal:focus-visible{outline:2px solid var(--red);outline-offset:12px;border-radius:50%}.seal-half{position:absolute;inset:0;transition:transform .8s cubic-bezier(.3,.05,.7,.7),opacity .7s .15s}.seal-half img{width:100%;height:100%;object-fit:contain}.seal-left{clip-path:polygon(0 0,53% 0,47% 23%,55% 39%,46% 54%,53% 70%,45% 85%,49% 100%,0 100%)}.seal-right{clip-path:polygon(53% 0,100% 0,100% 100%,49% 100%,45% 85%,53% 70%,46% 54%,55% 39%,47% 23%)}.broken .seal-left{transform:translate(-65px,70px) rotate(-32deg);opacity:0}.broken .seal-right{transform:translate(70px,95px) rotate(38deg);opacity:0}.broken .seal{pointer-events:none}.message{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .8s;pointer-events:none;padding:32px 20px}.writing .message{opacity:1}.eyebrow{font-size:10px;letter-spacing:.28em;opacity:.62;margin-bottom:13px}.flourish{width:180px;height:25px;fill:none;stroke:#9d7748;stroke-width:.8}.top{margin-bottom:9px}.bottom{margin-top:18px}.handwriting{text-align:center;width:100%;font-family:Letter,'Monotype Corsiva',cursive}.handwriting p,.handwriting h1{font-weight:400;margin:0;line-height:1.26}.intro{font-size:39px}.family{font-size:88px;color:#732d2c;line-height:1.2!important}.welcome{font-size:43px}.wish{font-size:44px;margin-top:18px!important}.postscript{font-size:28px;margin-top:25px;line-height:1.3}.ink{clip-path:inset(0 100% 0 -10%)}.writing .ink{animation:write var(--duration) linear var(--delay) both}.complete .ink{animation:none;clip-path:none}.complete .message{opacity:1}@keyframes write{from{clip-path:inset(0 100% 0 -10%)}to{clip-path:inset(0 -10% 0 -10%)}}.controls{height:65px;text-align:center;font-size:14px;color:#6b573c}.controls p{font-style:italic;margin:0 0 10px}.controls button{font:inherit;background:none;color:inherit;border:0;padding:5px 10px;cursor:pointer;text-underline-offset:5px}.controls button:hover{text-decoration:underline}.controls button:focus-visible{outline:1px solid var(--red)}#replay{font-style:italic}#replay span{padding-left:7px;font-style:normal}#skip{display:block;margin:auto;font-size:12px;opacity:.75}[hidden]{display:none!important}footer{min-height:64px;border-top:1px solid #705c3224;color:#756044}footer>span:last-child{font-style:italic;font-size:13px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(min-width:1500px){.scene{width:940px}.letter{height:620px}.family{font-size:100px}.intro{font-size:44px}.wish{font-size:49px}.welcome{font-size:48px}}
@media(max-width:600px){header{height:74px;margin:0 6vw}.brand{font-size:10px}.place{font-size:9px;letter-spacing:.13em}.small-star{display:none}main{padding:18px 4px 8px}.scene{width:94vw;margin:6px auto 20px}.letter{height:530px}.seal{width:116px;height:116px}.message{padding:28px 15px}.eyebrow{font-size:8px;letter-spacing:.18em}.intro{font-size:clamp(25px,7.6vw,37px)}.family{font-size:clamp(47px,14vw,72px);margin:10px 0 4px!important}.welcome{font-size:36px}.wish{font-size:clamp(28px,8.7vw,43px);margin-top:25px!important}.postscript{font-size:25px;margin-top:30px}.flourish{width:140px}.bottom{margin-top:24px}footer{margin:0 6vw;min-height:58px}footer>span:first-child{font-size:9px;letter-spacing:.12em}footer>span:last-child{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.ink{clip-path:none}}

/* Horizontal letter folds and a quieter, unframed composition. */
main{padding:28px 10px;min-height:100svh}
.scene{margin:0 auto;width:min(880px,92vw)}
.letter{height:620px;transform:none}
.middle{left:0;top:25%;width:100%;height:50%;background:linear-gradient(180deg,#dfcba3,#f1e2bf 9%,#ecdbb5 48%,#dac499 50%,#efdfba 52%,#e7d3aa 94%,#d7bd8f)}
.wing{left:0;width:100%;height:25%;transition:transform 2.4s cubic-bezier(.22,.65,.18,1)}
.upper{top:0;transform-origin:50% 100%;transform:rotateX(-180deg);background:linear-gradient(180deg,#dbc398,#ecdbb7 18%,#f0e1bf 94%,#c5a978)}
.lower{top:75%;transform-origin:50% 0;transform:rotateX(180deg);background:linear-gradient(180deg,#cfb484,#eeddb9 8%,#eddbb4 82%,#d6bd90);transition-delay:.18s}
.unfolded .wing{transform:rotateX(0)}
.handwriting p,.handwriting h1{line-height:1.35}
.intro{font-size:43px}.family{font-size:88px}.welcome{font-size:46px}.wish{font-size:48px;margin-top:25px!important}.postscript{font-size:32px;margin-top:36px}
.ink{width:fit-content;max-width:100%;margin-left:auto!important;margin-right:auto!important}
.controls{height:30px;margin-top:15px}.controls:has(button[hidden]){visibility:hidden}
@media(max-width:600px){main{padding:18px 4px}.scene{width:94vw}.letter{height:560px}.intro{font-size:clamp(25px,7.6vw,37px)}.family{font-size:clamp(47px,14vw,72px)}.welcome{font-size:36px}.wish{font-size:clamp(28px,8.7vw,43px)}.postscript{font-size:clamp(23px,6.5vw,29px)}}
/* Aged paper against pure black, with only faint opened creases. */
body{background:#000}
body:before{display:none}
.paper{border:0;background-image:url('assets/parchment.png');background-repeat:no-repeat;box-shadow:none}
.middle{background-size:100% 200%;background-position:center center}
.upper,.lower{background-size:100% 400%}
.upper{background-position:center top}
.lower{background-position:center bottom}
.paper:after{filter:none;mix-blend-mode:normal;opacity:1;background:none}
.upper:after{box-shadow:inset 0 -9px 12px -10px #3a220a99;transition:box-shadow 2.4s}
.lower:after{box-shadow:inset 0 9px 12px -10px #3a220a99;transition:box-shadow 2.4s}
.unfolded .upper:after{box-shadow:inset 0 -2px 3px -2px #3a220a33}
.unfolded .lower:after{box-shadow:inset 0 2px 3px -2px #3a220a33}
.ink,.writing .ink{clip-path:none;animation:none}
.lettering{display:block;height:1.45em;max-width:100%;overflow:visible;margin:auto}
.glyph{font-family:Letter,cursive;font-size:100px;fill:currentColor;fill-opacity:0;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:650;stroke-dashoffset:650;opacity:0}
.writing .glyph{animation:draw-character .48s ease-out var(--start) both}
@keyframes draw-character{0%{opacity:1;stroke-dashoffset:650;fill-opacity:0}65%{opacity:1;fill-opacity:.08}100%{opacity:1;stroke-dashoffset:0;fill-opacity:1}}
.complete .glyph{animation:none;opacity:1;stroke-dashoffset:0;fill-opacity:1;stroke-width:0}
.handwriting .family{line-height:1.2}
.controls{color:#c8b48c}
@media(prefers-reduced-motion:reduce){.writing .glyph{opacity:1;fill-opacity:1;stroke-dashoffset:0}}