/* The original sage paper envelope: native folds and a real, readable letter. */
.paper-envelope{--letter-space:168px;--letter-face-height:150px;--fold-ease:cubic-bezier(.22,.75,.25,1);width:100%;max-width:440px;margin:auto;padding:0;text-align:center;position:relative}
.paper-envelope .envelope-label{display:block;margin:0 0 16px;font-size:27px;line-height:1.25;color:#986147;transform:rotate(-4deg)}
.envelope-stage{position:relative;padding:80px 9px 8px;transition:padding-top .85s var(--fold-ease)}
.paper-envelope.has-opened .envelope-stage{padding-top:var(--letter-space)}
.paper-envelope .envelope{position:relative;width:min(100%,390px);height:230px;max-width:390px;margin:auto;perspective:1100px;isolation:isolate;filter:drop-shadow(0 15px 18px #5d62452b)}
.paper-envelope .envelope-back{z-index:0;background:linear-gradient(145deg,#c0c8a9,#9fae87);border-radius:5px;box-shadow:inset 0 0 0 1px #7b8d6938}
.envelope-lining{position:absolute;inset:3px 4px 4px;z-index:1;background:repeating-linear-gradient(45deg,#fcf6db15 0 1px,transparent 1px 7px),linear-gradient(#7a8b64,#b8c29c);border-radius:3px}
.paper-envelope .envelope-front{z-index:3;clip-path:polygon(0 0,50% 38%,100% 0,100% 100%,0 100%);background:linear-gradient(145deg,#d6ddc0 49.7%,transparent 50%) left/50% 100%,linear-gradient(215deg,#c6d0ad 49.7%,transparent 50%) right/50% 100%,linear-gradient(30deg,#bbc8a1 49.7%,#d9dfc5 50%);background-repeat:no-repeat;box-shadow:inset 0 -1px 1px #7b886750}
.paper-envelope .envelope-front:after{content:'';position:absolute;inset:9px;border:1px dashed #83916c35;border-radius:3px;pointer-events:none}
.paper-envelope .envelope-flap{z-index:5;background:repeating-linear-gradient(7deg,#fff8df08 0 1px,transparent 1px 4px),linear-gradient(170deg,#d3dbbd,#b5c19c 70%);backface-visibility:visible;transform:rotateX(0deg);transform-origin:50% 0;transition:transform .72s .12s var(--fold-ease),z-index 0s .48s;filter:drop-shadow(0 2px 1px #54604128);pointer-events:none}
.paper-envelope .envelope.open .envelope-flap{transform:rotateX(180deg);z-index:1;transition:transform .72s var(--fold-ease),z-index 0s .32s}
.envelope-paper-window{position:absolute;inset:0;z-index:2;clip-path:inset(-10000px -30px 0 -30px);pointer-events:none}
.paper-envelope .little-letter{position:absolute;inset:12px 6% auto;width:88%;height:auto;min-height:0;padding:0;display:block;z-index:2;border:1px solid #e1d7bf;border-radius:2px;background:repeating-linear-gradient(1deg,#b99d6805 0 1px,transparent 1px 3px),linear-gradient(115deg,#fffdf4,#f8f2e3 50%,#fffdf4);box-shadow:0 5px 14px #62543e12;color:#354631;opacity:0;transform:translateY(10px) scale(.96);transform-origin:center bottom;transition:transform .65s var(--fold-ease),opacity .25s .2s;pointer-events:none}
.paper-envelope .little-letter:before{content:'';position:absolute;inset:8px;border:1px solid #c7bf9b70;pointer-events:none}
.paper-envelope .letter-face{position:relative;min-height:128px;padding:12px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
/* The last 18px of the face sit in the mouth; an equal half stays below the rim. */
.paper-envelope .letter-tucked{height:max(90px,calc(var(--letter-face-height) - 36px));background:linear-gradient(#d0c3a514,transparent 6px)}
.paper-envelope .envelope.open .little-letter{transform:translateY(calc(6px - var(--letter-face-height))) scale(1);opacity:1;transition:transform 1.1s .3s var(--fold-ease),opacity .25s .3s;pointer-events:auto}
.paper-envelope .letter-face>*,.paper-envelope .letter-tucked>*{position:relative;max-width:100%;flex-shrink:0;overflow-wrap:anywhere}
.paper-envelope .letter-face>.hand{font:600 28px/1.15 var(--hand);color:#a75b42;margin:0}
.paper-envelope .letter-face>.letter-message{font:600 20px/1.23 var(--serif);letter-spacing:-.025em;text-wrap:balance;margin:0}
.paper-envelope .letter-heart{width:23px;height:22px;fill:none;stroke:#b3654b;stroke-width:1.7;overflow:visible}
.paper-envelope .letter-closing{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:2px}
.paper-envelope .letter-closing .letter-heart{flex:0 0 18px;width:18px;height:18px}
.paper-envelope .letter-closing>.letter-sign{min-width:0;margin:0;text-align:center}
.paper-envelope .letter-sign .hand{display:block;font-size:21px;line-height:1.2;margin:0;color:#78865d}
.paper-envelope .envelope-address{bottom:26px;font-size:28px;line-height:1.1;color:#66774f;z-index:4;pointer-events:none}
.envelope-botanical{position:absolute;bottom:6px;left:4px;width:90px;height:138px;object-fit:contain;object-position:left bottom;opacity:.23;z-index:4;pointer-events:none;filter:sepia(.2)}
.envelope-wax{position:absolute;top:43%;left:50%;width:65px;height:65px;display:grid;place-items:center;z-index:6;border:4px double #e8b897;border-radius:48% 52% 49% 51%;background:radial-gradient(ellipse at 30% 20%,#daae86,#b47855 65%,#955f43);color:#fff1d8;box-shadow:inset 0 1px 2px #fff2c877,inset 0 -2px 2px #76452755,0 5px 9px #58603f40;transform:translate(-50%,-50%) rotate(-6deg);transition:transform .4s,opacity .3s;pointer-events:none}
.envelope-wax svg{width:31px;height:29px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 0 #8a4d34)}
.paper-envelope .envelope.open .envelope-wax{opacity:0;transform:translate(75%,40%) rotate(25deg) scale(.78)}
.paper-envelope .envelope-seal{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:5px;background:transparent;box-shadow:none;transform:none;transition:none;z-index:7;cursor:pointer;touch-action:manipulation}
.paper-envelope .envelope-seal:hover{transform:none;background:transparent}
.paper-envelope .envelope.open .envelope-seal{opacity:1;pointer-events:auto;transform:none;cursor:default}
.paper-envelope .envelope-seal:focus-visible{outline:3px solid #a65b40;outline-offset:6px}
.paper-envelope .envelope:has(.envelope-seal:hover) .envelope-wax{transform:translate(-50%,-54%) rotate(2deg)}
.envelope-controls{min-height:54px;display:flex;flex-direction:column;align-items:center;padding-top:20px}
.paper-envelope .envelope-feedback{margin:0;min-height:22px;max-width:315px;font:500 13px/1.6 var(--sans);color:#536449;text-wrap:balance}
@media(max-width:1050px) and (min-width:741px){.paper-envelope .envelope{height:208px}.paper-envelope .letter-face>.letter-message{font-size:20px}.paper-envelope .envelope-address{font-size:25px}}
@media(max-width:740px){.paper-envelope{max-width:390px}.paper-envelope .envelope-label{font-size:26px}.envelope-stage{padding:72px 8px 8px}.paper-envelope .envelope{height:210px;max-width:360px}.paper-envelope .letter-face>.letter-message{font-size:19px}.paper-envelope .letter-face>.hand{font-size:26px}.paper-envelope .envelope-address{font-size:27px}.envelope-wax{width:61px;height:61px}.paper-envelope .envelope-feedback{font-size:12px}}
@media(max-width:365px){.envelope-stage{padding-inline:3px}.paper-envelope .envelope{height:188px}.paper-envelope .letter-face{padding-inline:10px}.paper-envelope .letter-face>.letter-message{font-size:18px}.paper-envelope .letter-face>.hand{font-size:25px}.paper-envelope .letter-sign .hand{font-size:20px}.paper-envelope .envelope-address{font-size:23px}.envelope-wax{width:56px;height:56px}}
@media(prefers-reduced-motion:reduce){.paper-envelope *,.paper-envelope *:before,.paper-envelope *:after{animation:none!important;transition:none!important}}