.birthday-envelope{text-align:center;margin:4px auto 22px}.birthday-greeting{font:italic 500 30px/1.1 'EB Garamond',Georgia,serif;color:var(--ink);margin-bottom:8px}.notebook .envelope{position:relative;display:block;width:260px;max-width:100%;min-height:0;margin:auto;padding:0;border:0;background:transparent;perspective:800px}.envelope:focus-visible{outline:3px solid #9b7137;outline-offset:4px}.envelope svg{display:block;width:100%;overflow:visible}.envelope svg,.envelope svg *{pointer-events:none}.envelope{cursor:pointer;touch-action:manipulation}.envelope-caption{font:11px/1.4 'IBM Plex Mono',monospace;letter-spacing:.12em;color:var(--label);margin-top:4px}.env-flap,.env-sheet,.env-pocket{position:absolute;inset:0;pointer-events:none}.env-flap{transform-origin:50% 18.18%;backface-visibility:visible}.env-flap i{position:absolute;inset:0;background:#1b1815;opacity:0;clip-path:polygon(4% 18%,96% 18%,50% 65%)}.env-flap-back{z-index:1;visibility:hidden;transform:rotateX(-90deg)}.env-sheet{z-index:2}.env-pocket{z-index:3}.env-flap-front{z-index:4}.seal-halo,.seal-half{position:absolute;z-index:5;left:50%;top:55.7%;pointer-events:none}.seal-halo{width:46px;height:46px;margin:-23px;border-radius:50%;background:#d8b96d;opacity:.24}.seal-half{width:18px;height:36px;margin-top:-18px;background:radial-gradient(circle at 32% 26%,#b35e4b 0%,#84352e 45%,#511d1b 100%);background-size:36px 36px;color:#e3c681;text-shadow:1px 1px 0 #50241a;box-shadow:0 2px 3px #321b1780,inset 0 0 0 1px #c68369;line-height:36px;font-size:22px;overflow:hidden}.seal-left{margin-left:-18px;border-radius:36px 0 0 36px;text-align:right}.seal-right{background-position:-18px 0;border-radius:0 36px 36px 0;text-align:left;text-indent:-18px}.seal-crumbs{position:absolute;z-index:5;left:50%;top:56%;pointer-events:none;opacity:0}.seal-crumbs i{position:absolute;width:1.5px;height:1.5px;background:#6f2a24;border-radius:50%}.seal-crumbs i:nth-child(2){left:-5px}.seal-crumbs i:nth-child(3){left:5px;top:2px}.opening .seal-halo,.is-open .seal-halo,.is-open .seal-half{opacity:0}.is-open .env-flap-front{visibility:hidden}.is-open .env-flap-back{visibility:visible;transform:rotateX(-180deg)}.is-open .env-sheet{transform:translateY(-95px);opacity:0}

.letter-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:10px;pointer-events:none}.letter-overlay.modal,.letter-overlay.ready{pointer-events:auto}.letter-backdrop{position:fixed;inset:0;contain:strict;background:#121212;opacity:0;pointer-events:none}.letter-overlay.modal .letter-backdrop,.letter-backdrop.ready{opacity:.72}.letter-dialog{position:relative;display:flex;flex-direction:column;width:min(560px,92vw);max-height:88dvh;min-height:0;outline:none;opacity:0}.ready .letter-dialog,.unrolling .letter-dialog{opacity:1}.letter-paper{position:relative;min-height:0;overflow:hidden}.letter-surface{position:absolute;inset:0;transform-origin:center;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M2 0H98L99 4 97.8 9 99 14 98 20 99 25 98 31 99 38 97.8 45 99 52 98 58 99 65 97.8 71 99 78 98 84 99 91 98 100H2L1 95 2.2 89 1 82 2 75 1 69 2.2 62 1 55 2 49 1 42 2.2 35 1 28 2 22 1 15 2.2 8 1 4Z'/%3E%3C/svg%3E");mask-size:100% 100%;background:radial-gradient(ellipse at center,transparent 48%,#79512545 100%),radial-gradient(ellipse at 25% 30%,#9972411a,transparent 19%),radial-gradient(ellipse at 75% 70%,#98703e1c,transparent 20%),linear-gradient(transparent 31%,#7f603416 31.2%,transparent 31.5%,transparent 65%,#7f603416 65.2%,transparent 65.5%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='8' result='noise'/%3E%3CfeDiffuseLighting in='noise' lighting-color='%23fff' surfaceScale='1' diffuseConstant='.7'%3E%3CfeDistantLight azimuth='45' elevation='60'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E") 0 0/150px 150px,linear-gradient(#ead9b0,#d9c08c)}.letter-content{position:relative;padding:38px clamp(24px,7vw,60px) 32px;color:#2a1d12;text-shadow:0 0 .6px rgba(42,29,18,.45);font:20px/1.45 'EB Garamond',Georgia,serif;overflow-wrap:anywhere}.letter-content:before,.letter-content:after{content:'';display:block;height:10px;background:#75512b;mask:var(--o-braid) center/auto 10px repeat-x;opacity:.7}.letter-content:before{margin:0 0 25px}.letter-content:after{margin:25px 0 0}.letter-content h2{margin:0;text-align:center;color:#2a1d12;font:600 clamp(34px,7.5vw,58px)/1.02 'EB Garamond',Georgia,serif;letter-spacing:.06em}.letter-rule{height:1px;width:75%;margin:20px auto 25px;background:linear-gradient(90deg,transparent,#805d30,transparent)}.letter-content p{margin:0 0 14px}.letter-signoff{text-align:right;font:italic 26px/1.2 'EB Garamond',Georgia,serif;margin:22px 0}.letter-signoff div:last-child{font-size:29px}.letter-content .letter-close,.letter-content .letter-x{color:#352719;background:transparent;border:1px solid #8d7653;cursor:pointer;font:11px 'IBM Plex Mono',monospace}.letter-content .letter-close{display:block;padding:10px 18px;margin:24px auto 0}.letter-content .letter-x{position:absolute;right:10px;top:10px;width:32px;height:32px;padding:0;border-radius:50%;font-size:20px;line-height:1}.letter-content button:focus-visible{outline:3px solid #9b7137;outline-offset:3px}.letter-rod{position:relative;z-index:1;flex:none;height:22px;margin:0;border-radius:12px;background:linear-gradient(#b38a59 0%,#71492d 27%,#422919 55%,#855b39 85%,#392317 100%);box-shadow:0 6px 8px #3c251b70}.letter-rod:before,.letter-rod:after{content:'◦';position:absolute;top:1px;width:22px;height:20px;border-radius:50%;text-align:center;line-height:18px;color:#6b4921;background:radial-gradient(circle at 35% 30%,#f4dc9a,#b78b49 60%,#70502a);border:1px solid #806031}.letter-rod:before{left:0}.letter-rod:after{right:0}.preparing .letter-surface,.flight .letter-surface{transform:scaleY(.02)}.preparing .letter-content,.flight .letter-content{opacity:0}.preparing .top-rod,.flight .top-rod{transform:translateY(var(--half-paper, 0px))}.preparing .bottom-rod,.flight .bottom-rod{transform:translateY(calc(-1 * var(--half-paper, 0px)))}.flight .letter-content h2,.flight .letter-rule,.flight .letter-content p,.flight .letter-signoff{opacity:0;transform:translateY(6px)}.unrolling .letter-content{transition:opacity .01s linear .3s}.unrolling .letter-content h2,.unrolling .letter-rule,.unrolling .letter-content p,.unrolling .letter-signoff{transition:opacity .3s cubic-bezier(.16,1,.3,1) calc(.3s + var(--order, 0) * 40ms),transform .3s cubic-bezier(.16,1,.3,1) calc(.3s + var(--order, 0) * 40ms)}

@media(max-width:600px){.notebook .envelope{width:220px}.letter-content h2{letter-spacing:.04em}}@media(prefers-reduced-motion:reduce){.seal-halo{opacity:0}.is-open .env-flap-front{visibility:hidden}}@media print{.birthday-envelope,.letter-overlay{display:none!important}}

.opening .env-flap-back,.closing .env-flap-back{visibility:visible}.closing .env-flap-front{visibility:visible}.letter-overlay.modal .letter-dialog{opacity:1}.opening .seal-halo{opacity:0}

/* The letter has one viewport-sized page; all decorative spacing scales with type and height. */
.letter-overlay{box-sizing:border-box;padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
.letter-dialog{box-sizing:border-box;width:min(568px,100%);height:min-content;max-height:min(100%,calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px));overflow:hidden;flex:none}
.letter-paper{--letter-lh:26px;flex:0 1 auto;margin-inline:4px}
.letter-content{--letter-font-size:clamp(13px, min(2.3dvh, 5vw), 20px);padding:clamp(8px,3dvh,38px) clamp(12px,5vw,60px);font-size:var(--letter-font-size);line-height:var(--letter-lh)}
.letter-content:before,.letter-content:after{height:clamp(4px,1dvh,10px)}
.letter-content:before{margin-bottom:.7em}.letter-content:after{margin-top:.7em}
.letter-content h2{font-size:clamp(1.45em, min(5dvh, 8vw), 2.7em);line-height:1.02}
.letter-rule{margin:.7em auto .8em}.letter-content p{margin:0}.letter-content p + p{margin-top:calc(var(--letter-lh) * .5)}
.letter-content p,.letter-signoff{background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--letter-lh) - 2px),rgba(100,70,43,.16) calc(var(--letter-lh) - 2px),rgba(100,70,43,.16) calc(var(--letter-lh) - 1px),transparent calc(var(--letter-lh) - 1px),transparent var(--letter-lh))}
.letter-signoff{font-size:1.25em;line-height:var(--letter-lh);margin:calc(var(--letter-lh) * .5) 0 .7em}.letter-signoff div:last-child{font-size:1.1em}
.letter-content .letter-close{padding:.5em 1.2em;margin:.7em auto 0}
.letter-content .letter-x{width:clamp(24px,4dvh,32px);height:clamp(24px,4dvh,32px);top:5px;right:7px}
.letter-rod{height:clamp(10px,2.5dvh,22px);margin:0}
.letter-rod:before,.letter-rod:after{box-sizing:border-box;width:clamp(10px,2.5dvh,22px);height:clamp(10px,2.5dvh,22px);top:0;line-height:1}
.letter-content.letter-tight{letter-spacing:-.035em;padding-top:5px;padding-bottom:5px}
.letter-tight:before{margin-bottom:.25em}.letter-tight:after{margin-top:.25em}.letter-tight .letter-rule{margin:.25em auto}.letter-tight p{margin-bottom:0}.letter-tight .letter-signoff{margin:calc(var(--letter-lh) * .5) 0 .3em}.letter-tight .letter-close{margin-top:.25em}

/* Rules are decorative and disappear in high-contrast and print output. */
@media print, (forced-colors:active){.letter-surface,.letter-content p,.letter-signoff{background-image:none}}

/* Keep each cap's glyph inside its own box, including at short viewport heights. */
.letter-rod:before,.letter-rod:after{overflow:hidden;font-size:clamp(10px,2.5dvh,22px)}
/* The close control has its own 44px gutter above the heading. */
.letter-content .letter-x{box-sizing:border-box;width:44px;height:44px;top:0;right:0}
.letter-content:before{min-height:44px;box-sizing:border-box;background-size:auto 10px;background-repeat:repeat-x;background-position:center}