/* A pocket of paper, ribbon and sealed letters. Scoped to the letter section. */
.letter-section.post-office-ready{position:relative;isolation:isolate}
.letter-section.post-office-ready:before{content:"";position:absolute;z-index:-1;inset:34px -27px 8px;border:1px solid #cdd8c366;border-radius:22px 4px 25px 5px;background:linear-gradient(112deg,#e8eddb99,#f5eadd88 52%,#e5e9e066);transform:rotate(-.7deg);pointer-events:none}
.letter-section .letter-layout{align-items:start;gap:28px}
.letter-section .stamp-collection{min-width:0;padding:10px 0}
.letter-section .collection-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 3px 16px;color:#727d67;font:16px var(--serif)}
.letter-section .collection-count{font:italic 24px Georgia;color:#9caa8c}
.letter-section .stamp-grid{gap:14px}
.letter-section .blessing-tab{position:relative;min-height:121px;padding:17px 6px 12px;background:#fffdf1;box-shadow:2px 3px 0 #81927b0d;border:1px dashed #aebaa0;border-radius:6px;color:#61765a;overflow:visible}
.letter-section .blessing-tab:nth-child(2n){transform:rotate(1.8deg)}
.letter-section .blessing-tab:nth-child(3n){transform:rotate(-1.2deg)}
.letter-section .blessing-tab:before{content:attr(data-number);position:absolute;top:6px;left:8px;font:10px Georgia;color:#8a9b7b}
.letter-section .blessing-tab:after{content:"✓";position:absolute;right:6px;top:5px;font:13px Georgia;color:#37745a;opacity:0;transform:scale(.6) rotate(-20deg)}
.letter-section .blessing-tab.has-been-read:after{opacity:1;transform:scale(1) rotate(-10deg)}
.letter-section .blessing-tab .stamp-thumb{display:block;width:52px;height:56px;margin:1px auto 9px;object-fit:cover;object-position:center;border:3px solid #fff;box-shadow:0 2px 5px #354e3520;border-radius:3px;transform:rotate(-4deg)}
.letter-section .blessing-tab span{display:block;line-height:1.5}
.letter-section .blessing-tab.active{border-color:#729b7d;border-width:1.5px;background:#dfebdc;color:#345e47;box-shadow:3px 4px 0 #b3c8ac66;transform:translateY(-2px) rotate(-2.5deg)}
.letter-section .blessing-tab:hover{transform:translateY(-4px) rotate(0);background:#edf2e1}
.letter-section .letter-receipt{margin:24px 2px 0;padding:18px 12px 15px;text-align:center;background:#ffffff70;border-top:1px dashed #b7c3a9;border-bottom:1px dashed #b7c3a9;position:relative}
.letter-section .receipt-dots{display:flex;justify-content:center;gap:10px;font-size:17px;color:#b6bdab}
.letter-section .receipt-dot.is-received{color:#578470;text-shadow:0 0 8px #80b69b20}
.letter-section .receipt-text{margin:9px 0 7px;font-size:11px;color:#60765c}
.letter-section .receipt-footnote{font:12px var(--serif);color:#8a927e}
.letter-section .letter-envelope{--letter-tint:#f0e3c8;--letter-accent:#9a754b;--letter-mark:#f3d89b;position:relative;min-width:0;perspective:1000px;padding:12px 10px 9px;background:#e6dfcb;border:1px solid #d3d1bc;border-radius:6px;box-shadow:0 9px 17px #54583c0c}
.letter-section .letter-envelope[data-letter-theme="steps"]{--letter-tint:#e0e8ce;--letter-accent:#66834e;--letter-mark:#d6e7b2}
.letter-section .letter-envelope[data-letter-theme="salad"]{--letter-tint:#dce9de;--letter-accent:#4c8269;--letter-mark:#c6e5c5}
.letter-section .letter-envelope[data-letter-theme="study"]{--letter-tint:#dee7ed;--letter-accent:#5c8197;--letter-mark:#c6e2ee}
.letter-section .letter-envelope[data-letter-theme="gift"]{--letter-tint:#efdfdf;--letter-accent:#ad797d;--letter-mark:#f0cfca}
.letter-section .letter-envelope[data-letter-theme="wish"]{--letter-tint:#e7e0ef;--letter-accent:#8c779d;--letter-mark:#e2d1f0}
.letter-section .letter-sheet{opacity:0;visibility:hidden;transform:translateY(22px) scale(.97);transform-origin:50% 100%;min-width:0}
.letter-section .letter-envelope.is-open .letter-sheet{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.letter-section .letter-paper{padding:32px 27px 0;box-shadow:2px 3px 0 #c7c4b166;border-color:#ded9c8;background-color:#fffdf4;background-image:radial-gradient(#9c97700d .7px,transparent .7px);background-size:5px 5px;border-radius:2px 4px 6px 2px}
.letter-section .letter-ribbon{display:flex;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 20px);position:relative;margin:-48px 0 22px -6px;padding:10px 19px 9px 15px;background:var(--letter-tint);color:var(--letter-accent);transform:rotate(-2deg);box-shadow:1px 3px 0 #4654420a;clip-path:polygon(0 0,100% 4%,98% 50%,100% 97%,2% 100%,0 80%,2% 40%)}
.letter-section .letter-ribbon-symbol{font:23px var(--serif);line-height:1}
.letter-section .letter-ribbon-note{font:15px var(--serif)}
.letter-section .paper-top{padding-bottom:15px;color:#94907b}
.letter-section .letter-body{padding:23px 0 25px;gap:22px;grid-template-columns:minmax(0,1fr) 124px;align-items:center}
.letter-section .letter-body>div{min-width:0}
.letter-section .letter-kicker{font-size:9px;letter-spacing:1.25px;color:var(--letter-accent)}
.letter-section .letter-body h3{font-size:27px;line-height:1.6;margin:12px 0 18px;padding-left:14px;border-left:3px solid var(--letter-accent);position:relative}
.letter-section .letter-body p{padding:0 6px 7px 1px;font-size:19px;line-height:2.1;min-height:148px;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(2.1em - 1px),#c7cdb548 calc(2.1em - 1px),#c7cdb548 2.1em);background-position:0 -3px;overflow-wrap:anywhere}
.letter-section .letter-highlight{color:inherit;background:linear-gradient(transparent 55%,var(--letter-mark) 55%,var(--letter-mark) 91%,transparent 91%);padding:0 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.letter-section .letter-body img{border:6px solid #fffdf7;border-bottom-width:17px;box-shadow:2px 5px 8px #333b3512;transform:rotate(5deg);position:relative}
.letter-section .signature{font-size:14px;margin-top:22px;color:#8c8b74;line-height:1.8}
.letter-section .signature span{color:var(--letter-accent);padding-right:8px;margin-top:5px}
.letter-section .paper-bottom{font-size:8px;letter-spacing:1px;padding-top:14px;color:#aaa18a}
.letter-section .paper-bottom span:last-child{color:var(--letter-accent)}
.letter-section .letter-controls{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:17px -27px 0;padding:14px 22px;border-top:1px dashed #d6d8c3;background:var(--letter-tint);border-radius:0 0 5px 2px}
.letter-section .letter-close{color:#6f7867;font-size:11px;min-height:39px;padding:7px 0;text-decoration:underline;text-underline-offset:6px;text-decoration-color:#9ea68e}
.letter-section .letter-next{min-height:41px;padding:10px 18px;color:#fffdf4;background:var(--letter-accent);border:1px solid #ffffff3d;border-radius:4px;box-shadow:2px 2px 0 #354a3320;font-size:12px}
.letter-section .envelope-cover{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;align-items:center;padding:27px 25px;background-color:#e4e8d5;background-image:repeating-linear-gradient(0deg,transparent 0 19px,#a5b09615 19px 20px),repeating-linear-gradient(90deg,transparent 0 19px,#a5b09615 19px 20px);border-radius:5px;overflow:hidden;transform-origin:50% 100%;isolation:isolate}
.letter-section .envelope-cover:before{content:"";position:absolute;z-index:-1;inset:0;background:#f3f0df;clip-path:polygon(0 0,100% 0,50% 48%);filter:drop-shadow(0 2px 0 #b4b99d);transform-origin:top;}
.letter-section .envelope-cover:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(150deg,#eef0e0,#d8e1c8);clip-path:polygon(0 51%,50% 78%,100% 51%,100% 100%,0 100%)}
.letter-section .envelope-postmark{display:flex;justify-content:space-between;align-items:center;gap:20px;align-self:stretch;color:#8b957a;font:8px monospace;letter-spacing:1.2px}
.letter-section .envelope-address{margin:auto 0 21px;text-align:center;position:relative;z-index:1}
.letter-section .envelope-address small{font:9px monospace;letter-spacing:2px;color:#8c957c}
.letter-section .envelope-address p{font:25px/1.6 var(--serif);margin:6px 0;color:#587158}
.letter-section .envelope-address p:first-of-type{margin-top:21px}
.letter-section .envelope-open{display:grid;place-items:center;width:70px;height:70px;flex-shrink:0;border-radius:49% 44% 50% 45%;background:#a77a65;color:#fff1d5;font:39px Georgia;line-height:1;border:4px double #d9b99c;box-shadow:0 4px 0 #8e6652,0 8px 15px #6a594027;transform:rotate(-8deg);position:relative;z-index:1}
.letter-section .envelope-open:hover{background:#946a56;transform:rotate(2deg) translateY(-3px)}
.letter-section .envelope-open:active{transform:rotate(-6deg) translateY(2px);box-shadow:0 1px 0 #8e6652,0 3px 7px #6a594022}
.letter-section .envelope-hint{display:block;margin:18px 0 auto;padding-bottom:14px;font:14px var(--serif);color:#7d8b6d}
.letter-section .envelope-postage{position:absolute;right:22px;bottom:23px;white-space:pre-line;border:1px dashed #8e9c7a;transform:rotate(-14deg);padding:10px 9px;color:#8e9c7a;line-height:1.5;font-size:8px;letter-spacing:1.4px;border-radius:50%;text-align:center}
.letter-section .letter-envelope.is-open .envelope-cover{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px) scale(.98)}
.letter-section #letter-title:focus{outline:none}
.motion-ready[data-motion="on"] .letter-section .letter-sheet{transition:opacity .45s .14s ease,transform .6s .1s cubic-bezier(.2,.75,.2,1),visibility .5s}
.motion-ready[data-motion="on"] .letter-section .envelope-cover{transition:opacity .35s ease,transform .55s ease,visibility .4s}
.motion-ready[data-motion="on"] .letter-section .letter-envelope.is-open .envelope-cover:before{transform:rotateX(160deg);transition:transform .55s ease}
.motion-ready[data-motion="on"] .letter-section .blessing-tab:after{transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.4,1.6)}
@media(max-width:1050px){.letter-section .letter-body{grid-template-columns:minmax(0,1fr)}.letter-section .letter-body img{display:none}.letter-section .letter-body p{min-height:140px}.letter-section .envelope-postmark span:last-child{display:none}.letter-section .letter-ribbon-note{font-size:14px}}
@media(max-width:620px){.letter-section.post-office-ready:before{inset:24px 9px 12px;transform:rotate(-.4deg)}.letter-section .letter-layout{display:block}.letter-section .stamp-collection{padding:0}.letter-section .collection-heading{font-size:14px;padding:0 3px 12px}.letter-section .collection-count{font-size:21px}.letter-section .stamp-grid{gap:10px;margin-bottom:13px}.letter-section .blessing-tab{min-height:111px;padding:16px 4px 10px}.letter-section .blessing-tab .stamp-thumb{width:44px;height:49px;margin-bottom:8px}.letter-section .blessing-tab span:last-child{font-size:10px}.letter-section .letter-receipt{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 15px;margin:11px 0 30px;padding:11px 4px}.letter-section .receipt-dots{gap:7px;font-size:15px}.letter-section .receipt-text{margin:0;font-size:10px}.letter-section .receipt-footnote{display:none}.letter-section .letter-envelope{padding:10px 7px 7px}.letter-section .letter-paper{padding:31px 20px 0}.letter-section .letter-ribbon{margin-top:-47px;margin-left:-3px;margin-bottom:23px;padding:9px 14px;max-width:calc(100% - 8px)}.letter-section .letter-ribbon-note{font-size:13px}.letter-section .letter-ribbon-symbol{font-size:20px}.letter-section .letter-body{padding:22px 0;gap:0}.letter-section .letter-body h3{font-size:23px;line-height:1.7;margin:10px 0 16px;padding-left:12px}.letter-section .letter-body p{font-size:18px;line-height:2.1;min-height:150px}.letter-section .signature{font-size:13px;margin-top:20px}.letter-section .paper-top{font-size:7px;letter-spacing:1px;gap:8px}.letter-section .paper-top span:last-child{font-size:9px;letter-spacing:1px;white-space:nowrap}.letter-section .paper-bottom{font-size:6px;letter-spacing:.7px}.letter-section .letter-controls{margin:15px -20px 0;padding:12px 17px}.letter-section .letter-close{font-size:10px}.letter-section .letter-next{font-size:11px;padding:11px 16px}.letter-section .envelope-cover{padding:25px 20px}.letter-section .envelope-address p{font-size:24px}.letter-section .envelope-address small{font-size:8px;letter-spacing:1.5px}.letter-section .envelope-hint{font-size:12px}.letter-section .envelope-postage{right:15px;bottom:19px;font-size:7px}.letter-section .envelope-open{width:65px;height:65px;font-size:35px}}
@media(prefers-reduced-motion:reduce){.letter-section .letter-sheet,.letter-section .envelope-cover,.letter-section .envelope-cover:before,.letter-section .blessing-tab,.letter-section .blessing-tab:after,.letter-section .envelope-open{transition:none!important;animation:none!important}.letter-section .blessing-tab:hover,.letter-section .envelope-open:hover{transform:none}}
html[data-motion="off"] .letter-section .letter-sheet,html[data-motion="off"] .letter-section .envelope-cover,html[data-motion="off"] .letter-section .envelope-cover:before,html[data-motion="off"] .letter-section .blessing-tab,html[data-motion="off"] .letter-section .blessing-tab:after,html[data-motion="off"] .letter-section .envelope-open{transition:none!important;animation:none!important}
html[data-motion="off"] .letter-section .blessing-tab:hover,html[data-motion="off"] .letter-section .envelope-open:hover{transform:none}