
.reader{--shop-bg:#24281f;--shop-paper:#f3e6ca;--shop-ink:#493a2b;--shop-gold:#d5b57a;--shop-wax:#913f32;background:var(--shop-bg);color:#f3e6ca;font-family:'DM Sans',sans-serif;padding-bottom:30px;isolation:isolate}
.reader *{box-sizing:border-box}
.reader header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px 116px 24px 34px}
.reader h1{font:400 29px/1.2 'Literata',Georgia,serif;letter-spacing:-1px;margin:0}
.reader .strap{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--shop-gold);margin-top:10px}
.reader .issue{font-size:11px;letter-spacing:.08em;color:var(--shop-gold)}
.reader figure{margin:0 22px;border:7px solid #393b2a;outline:1px solid #79684a}
.reader img{display:block;width:100%;height:auto}
.reader .mail{position:relative;margin:-52px auto 0;width:min(510px,calc(100% - 64px));z-index:1}
.reader .envelope{position:relative;height:245px;background:linear-gradient(120deg,#e5d1ab,#f0dfbd 50%,#d9c29a);box-shadow:0 16px 35px #10150c70;transform:rotate(-2deg);isolation:isolate}
.reader .envelope:before{content:'';position:absolute;inset:0;background:linear-gradient(150deg,transparent 49.5%,#c4a97a55 50%,transparent 50.5%),linear-gradient(210deg,transparent 49.5%,#c4a97a55 50%,transparent 50.5%);z-index:0}
.reader .envelope:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#eddbb8,#e4d0aa);clip-path:polygon(0 100%,50% 43%,100% 100%);border-bottom:1px solid #c6ae83;z-index:1}
.reader .flap{position:absolute;inset:0 0 auto;height:156px;background:#b69a6e;clip-path:polygon(0 0,100% 0,50% 100%);z-index:2;filter:drop-shadow(0 3px 2px #49301630)}
.reader .flap:before{content:'';position:absolute;inset:0 0 2px;background:linear-gradient(160deg,#f7e9cd,#e8d4af);clip-path:polygon(0 0,100% 0,50% 100%)}
.reader button{font:inherit;color:inherit;cursor:inherit}
.reader .seal{position:absolute;left:50%;top:112px;transform:translateX(-50%) rotate(7deg);width:72px;height:69px;border:0;border-radius:46% 54% 48% 51% / 48% 44% 56% 52%;background:radial-gradient(ellipse at 32% 20%,#b96c51 0%,#9b4b39 39%,#743327 80%);box-shadow:2px 4px 6px #53342360,inset 1px 2px 2px #d28c6b,inset -3px -3px 2px #60291f;z-index:4;padding:0}
.reader .seal:before{content:'';position:absolute;inset:9px;border-radius:50%;border:1px solid #693124;box-shadow:inset 1px 1px 2px #d47b54,1px 1px 1px #c77b59}
.reader .moth{position:absolute;left:50%;top:50%;width:3px;height:24px;background:#642f23;transform:translate(-50%,-45%);border-radius:50%;box-shadow:1px 1px #d1805e}
.reader .moth:before,.reader .moth:after{content:'';position:absolute;width:19px;height:22px;top:-1px;background:linear-gradient(145deg,#6e3023,#9a4e36);border:1px solid #6d3326;box-shadow:inset 1px 1px #c27856;border-radius:80% 15% 60% 20%}
.reader .moth:before{right:3px;transform:rotate(-20deg)}
.reader .moth:after{left:3px;transform:scaleX(-1) rotate(-20deg)}
.reader .antennae{position:absolute;width:13px;height:10px;left:-5px;top:-9px;border:1px solid #713626;border-bottom:0;border-radius:50% 50% 0 0}
.reader .address{position:absolute;left:15px;right:15px;bottom:16px;z-index:3;text-align:center;color:#6b533c;font:400 25px/1.25 'Caveat',cursive}
.reader .date{font:10px/1.4 'DM Sans',sans-serif;letter-spacing:.15em;text-transform:uppercase;margin-top:5px;color:#776044}
.reader .cue{display:block;background:none;border:0;text-align:center;font-size:12px;color:var(--shop-gold);margin:14px auto 0;padding:12px 20px;min-height:44px}
.reader .paper{scroll-margin-top:24px;overflow-anchor:none}
.reader .letter-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:20px}
.reader .letter-head .date{margin:0}
.reader .close-top{background:none;border:0;color:#67533b;font-size:12px;min-height:44px;padding:8px 0;white-space:nowrap}
.reader .paper{position:relative;background:linear-gradient(95deg,#f2e5c9,#faf0da 40%,#f3e6cb);color:var(--shop-ink);padding:33px 40px 28px;box-shadow:0 16px 35px #10150c50;transform:rotate(-.5deg);z-index:5}
.reader .paper:before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:#b59d7733;box-shadow:0 1px #fff5dd99;pointer-events:none}
.reader .paper .date{margin:0 0 23px}
.reader .prose p{position:relative;font:400 16px/1.8 'Literata',Georgia,serif;margin:0 0 17px}
.reader .prose p:last-child{margin-bottom:0}
.reader .signature{font:400 26px/1.2 'Caveat',cursive;text-align:right;margin:22px 0 0;color:#766044}
.reader .opened .envelope{height:63px;margin:0 16px;transform:rotate(1deg)}
.reader .opened .envelope:after{clip-path:polygon(0 100%,50% 0,100% 100%)}
.reader .opened .flap,.reader .opened .seal,.reader .opened .address{display:none}
.reader .tuck{display:block;background:none;border:0;font-size:12px;margin:20px auto 0;padding:12px 20px;color:var(--shop-gold);text-decoration:underline;text-underline-offset:5px;min-height:44px}
.reader nav{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:26px 15px 0}
.reader nav button{background:none;border:0;font-size:12px;padding:12px;min-height:44px}
.reader button:focus-visible{outline:2px solid var(--shop-gold);outline-offset:5px}
.reader nav button:disabled{opacity:.35}
.reader nav button:hover,.reader .tuck:hover{color:#ffdf9e}
.reader footer{text-align:center;color:var(--shop-gold);font-size:10px;letter-spacing:.12em;margin:27px 20px 0}
.reader .status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.reader [hidden]{display:none!important}
@font-face{font-family:Literata;src:url('/assets/fonts/literata.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/assets/fonts/dm-sans.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Caveat;src:url('/assets/fonts/caveat.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:dark;--shop-bg:#24281f;--shop-gold:#d5b57a}
html{background:var(--shop-bg);scroll-behavior:auto}
body{margin:0 auto;max-width:1280px;color:#f3e6ca;font-family:'DM Sans',sans-serif}
*{box-sizing:border-box}
a{color:inherit;text-underline-offset:5px}
button,a,summary{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
:focus-visible{outline:2px solid var(--shop-gold);outline-offset:5px}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 34px 24px}
.brand{font:400 29px/1.2 Literata,Georgia,serif;letter-spacing:-1px;text-decoration:none}
.archive-link{font-size:12px;padding:12px 0;color:var(--shop-gold)}
.site-footer{text-align:center;font-size:11px;color:var(--shop-gold);padding:10px 20px 32px}
.skip-link{position:absolute;left:20px;top:-100px;background:var(--shop-bg);padding:12px;z-index:10}
.skip-link:focus{top:10px}
.reader{padding-bottom:14px}
.reader .envelope-summary{list-style:none;cursor:pointer;display:block}
.reader .envelope-summary::-webkit-details-marker{display:none}
.reader .envelope{display:block}
.reader .envelope-date{display:block;font:10px/1.4 'DM Sans',sans-serif;letter-spacing:.1em;margin-top:5px}
.reader .open-label{display:block;text-align:center;font-size:12px;color:var(--shop-gold);padding:18px 16px 10px;min-height:44px}
.reader .letter-head time{font:10px/1.4 'DM Sans',sans-serif;letter-spacing:.1em;color:#776044}
.reader .close-letter{border:0;background:transparent;color:#67533b;font:12px/1.4 'DM Sans',sans-serif;min-height:44px;padding:10px 0;cursor:pointer;white-space:nowrap}
.reader .close-bottom{display:block;margin:20px auto 0;text-decoration:underline;text-underline-offset:5px}
.reader .close-letter:focus-visible{outline-color:var(--shop-ink)}
.reader.is-enhanced .mail[open] .envelope-summary{display:none}
.reader.is-enhanced .mail[open]::after{content:'';display:block;height:55px;margin:0 16px;background:linear-gradient(155deg,#e5d1ab,#f0dfbd 50%,#d9c29a);box-shadow:0 14px 30px #10150c50;transform:rotate(1deg)}
.reader .story-navigation{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin:26px 15px 0;font-size:12px}
.reader .story-navigation a,.reader .story-navigation button,.reader .story-navigation span{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px;text-decoration:none}
.reader .story-navigation button{background:none;border:0;font:inherit;cursor:pointer}
.reader .story-navigation [aria-disabled=true]{opacity:.35}
.reader .story-navigation a:hover,.reader .story-navigation button:hover{color:#ffdf9e}
.reader .prose ul{padding-left:20px;font:400 16px/1.8 Literata,Georgia,serif}
.reader .prose li{margin:0 0 12px}
.reader .prose p{overflow-wrap:anywhere}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.archive{max-width:640px;margin:40px auto;padding:0 26px}
.archive h1{font:400 32px Literata,Georgia,serif}
.archive h2{font:400 20px Literata,Georgia,serif;color:var(--shop-gold);margin-top:35px}
.archive p{font-size:14px;line-height:1.7}
.archive ol{padding-left:22px}
.archive li{padding:5px 0;font-size:14px}
.archive li a{display:inline-block;padding:8px}
.archive-id{font-size:12px;color:var(--shop-gold);margin-left:16px}
@media(max-width:600px){.site-header{padding:24px 20px}.brand{font-size:25px}.reader .story-navigation{gap:0;margin:16px 8px 0}.reader .story-navigation a,.reader .story-navigation span,.reader .story-navigation button{padding:12px 9px}.reader .envelope-date{font-size:10px}.reader .letter-head{gap:8px}.reader .letter-head time{font-size:10px}.reader .envelope-summary{width:100%}}
@media(prefers-reduced-motion:no-preference){.reader .seal{transition:transform .2s,box-shadow .2s}.reader .seal:hover{transform:translateX(-50%) rotate(-4deg) scale(1.06)}}
@media(max-width:600px){.reader header{padding:24px 20px;align-items:start}.reader h1{font-size:25px}.reader .strap{max-width:175px;line-height:1.6}.reader .issue{font-size:10px;padding-top:4px}.reader figure{margin:0 12px;border-width:4px}.reader .mail{width:calc(100% - 52px);margin-top:-20px}.reader .envelope{height:190px}.reader .flap{height:114px}.reader .seal{top:81px;width:62px;height:60px}.reader .address{font-size:23px;bottom:12px}.reader .date{font-size:9px}.reader .paper{padding:27px 24px}.reader .prose p{font-size:16px}.reader nav{gap:0;margin-top:16px}.reader nav button{padding:12px 9px}}
