:root{--desk:#32150f;--desk-deep:#1f0d09;--paper:#f3ead7;--paper-light:#faf4e7;--ink:#2d211b;--faded:#796a5e;--red:#9d3429;--gold:#c7903d;--line:#3a271d3d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:var(--ink);background:var(--desk-deep);margin:0;font-family:DM Sans,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}img{max-width:100%;display:block}.desk{background:radial-gradient(circle at 18% 20%,#b14c2b2b,#0000 32%),repeating-linear-gradient(94deg,#ffffff05 0 1px,#0000 1px 9px),linear-gradient(135deg,#3b1811,#1e0d09 72%);min-height:100vh;overflow:hidden}.letter-nav{color:#f5ead9;z-index:10;border-bottom:1px solid #ffffff24;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;height:72px;padding:0 5vw;display:grid;position:relative}.letter-brand{align-items:center;gap:11px;font-family:Gloock,serif;font-size:20px;display:flex}.seal-mini{color:#e5c58f;border:1px solid #d8b57d;border-radius:50%;place-items:center;width:34px;height:34px;display:grid}.issue-label{letter-spacing:.2em;text-transform:uppercase;opacity:.65;font:11px/1.2 DM Sans,sans-serif}.nav-order{border-bottom:1px solid #d6b77f;justify-self:end;align-items:center;gap:8px;padding:7px 0;font-size:12px;display:flex}.envelope-stage{color:#f7efe3;grid-template-columns:.85fr 1.15fr;align-items:center;gap:6vw;max-width:1400px;min-height:760px;margin:auto;padding:70px 7vw 110px;display:grid;position:relative}.envelope-copy{max-width:580px}.kicker{text-transform:uppercase;letter-spacing:.22em;color:#d3a75e;font-size:11px}.envelope-copy h1{letter-spacing:-.04em;margin:25px 0;font:400 clamp(54px,6.4vw,92px)/.98 Gloock,serif}.envelope-copy h1 em{color:#e7b65f;font-weight:400}.envelope-copy>p:not(.kicker){color:#ffffffb3;max-width:470px;font-size:16px;line-height:1.7}.open-button{color:#fff;cursor:pointer;background:0 0;border:0;border-bottom:1px solid #d6b77f;align-items:center;gap:9px;margin-top:23px;padding:10px 0;display:inline-flex}.envelope{aspect-ratio:1.45;cursor:pointer;filter:drop-shadow(0 32px 30px #00000059);perspective:1200px;background:0 0;border:0;width:min(620px,48vw);position:relative}.envelope-back{background:#d5b47e;border-radius:3px;position:absolute;inset:16% 0 0}.envelope-front-left,.envelope-front-right{z-index:3;border-radius:3px;position:absolute;inset:16% 0 0}.envelope-front-left{clip-path:polygon(0 0,55% 58%,100% 100%,0 100%);background:#e3c594}.envelope-front-right{clip-path:polygon(100% 0,45% 58%,0 100%,100% 100%);background:#d9bb88}.envelope-flap{z-index:5;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;background:#efd5a8;height:58%;transition:transform .75s cubic-bezier(.2,.8,.2,1),z-index .1s .35s;position:absolute;inset:16% 0 auto}.wax-seal{z-index:6;color:#efc3a4;background:radial-gradient(circle at 38% 35%,#b64937,#7c1e19 72%);border:4px double #ffd8b74d;border-radius:50%;place-items:center;width:62px;height:62px;font:26px serif;transition:opacity .25s,transform .4s;display:grid;position:absolute;top:54%;left:50%;transform:translate(-50%,-50%);box-shadow:0 5px 10px #3d0b0959}.letter-peek{z-index:2;background:#f8f0df;height:73%;transition:transform .85s cubic-bezier(.2,.8,.2,1) .2s;position:absolute;top:0;left:7%;right:7%;overflow:hidden}.letter-peek img{object-fit:contain;width:100%;height:100%}.address-lines{z-index:4;color:#67523d;text-align:center;flex-direction:column;width:55%;font:18px/1.6 Caveat,cursive;display:flex;position:absolute;bottom:12%;left:50%;transform:translate(-50%)rotate(-1deg)}.tap-note{color:#d9bc91;font:18px Caveat,cursive;position:absolute;bottom:64px;right:23%;transform:rotate(-3deg)}.opened .envelope-flap{z-index:1;transform:rotateX(180deg)}.opened .letter-peek{transform:translateY(-58%)}.opened .wax-seal{opacity:0;transform:translate(-50%,-90%)scale(.6)}.paper-letter{background:var(--paper);width:min(1120px,92vw);margin:0 auto 120px;padding:70px clamp(30px,7vw,105px) 90px;position:relative;box-shadow:0 32px 90px #00000075}.paper-letter:before,.paper-letter:after{content:"";background-size:28px 15px;height:15px;position:absolute;left:0;right:0}.paper-letter:before{background-image:linear-gradient(135deg, transparent 50%, var(--paper) 51%);top:-14px}.paper-letter:after{background-image:linear-gradient(135deg, transparent 50%, var(--paper) 51%);bottom:-14px;transform:rotate(180deg)}.paper-grain{pointer-events:none;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");position:absolute;inset:0}.letter-heading{border-bottom:1px solid var(--line);justify-content:space-between;align-items:flex-start;padding-bottom:25px;display:flex;position:relative}.sender span{font:34px Gloock,serif;display:block}.sender small{color:var(--faded);text-transform:uppercase;letter-spacing:.16em;font-size:9px}.postmark{color:#713728b3;border:2px solid #743c2c80;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:115px;height:115px;display:flex;transform:rotate(9deg)}.postmark span,.postmark small{letter-spacing:.18em;font-size:9px}.postmark b{border-top:1px solid;border-bottom:1px solid;margin:4px 0;padding:2px 0;font-family:monospace}.letter-intro{max-width:720px;margin:75px auto 80px;font:20px/1.85 Georgia,serif;position:relative}.date-line{text-align:right;color:var(--faded);font-size:15px;font-style:italic}.salutation{color:var(--red);font:30px Caveat,cursive}.dropcap:first-letter{float:left;color:var(--red);padding:12px 10px 0 0;font:76px/.78 Gloock,serif}.margin-note{width:145px;color:var(--red);font:25px/1.05 Caveat,cursive;position:absolute;top:46%;right:-180px;transform:rotate(-6deg)}.margin-note:before{content:"←";margin-right:6px}.taped-photo{background:#e8ddc8;width:90%;margin:0 auto 120px;padding:18px 18px 42px;position:relative;transform:rotate(-1deg);box-shadow:0 10px 28px #39271c26}.taped-photo:before{content:"";background:#d4be91ad;width:160px;height:38px;position:absolute;top:-18px;left:40%;transform:rotate(2deg)}.taped-photo img{aspect-ratio:16/9;object-fit:cover;width:100%}.taped-photo figcaption{text-align:center;color:#6f5a49;margin-top:12px;font:22px Caveat,cursive}.hand-label{color:var(--red);margin:0 0 9px;font:24px Caveat,cursive;transform:rotate(-1deg)}.inside-parcel h2,.field-note h2,.subscription-slip h2{letter-spacing:-.03em;margin:0;font:400 clamp(43px,5vw,68px)/1.05 Gloock,serif}.inside-parcel{border-top:1px dashed var(--line);padding:90px 0 110px}.parcel-list{border-top:1px solid var(--line);margin-top:55px}.parcel-line{border-bottom:1px solid var(--line);grid-template-columns:42px 1fr 24px;align-items:start;gap:18px;padding:22px 0;display:grid}.parcel-line .number{color:var(--red);padding-top:7px;font:11px monospace}.parcel-line h3{margin:0;font:400 26px Gloock,serif}.parcel-line p{color:var(--faded);max-width:680px;margin:6px 0 0;font-size:14px}.parcel-line svg{color:var(--red);margin-top:6px}.field-note{border-top:1px dashed var(--line);grid-template-columns:.75fr 1.25fr;align-items:center;gap:7vw;padding:100px 0;display:grid}.field-copy>p:not(.hand-label){color:var(--faded);line-height:1.75}.ink-link{color:var(--red);border-bottom:1px solid;align-items:center;gap:8px;padding:7px 0;font-size:13px;font-weight:600;display:inline-flex}.tiktok-postcard{background:#fffaf0;padding:16px;transform:rotate(1.3deg);box-shadow:0 10px 30px #3d271c24}.tiktok-postcard .tiktok-embed{margin:0!important}.subscription-slip{background:#e7d7b8;border:1px solid #bfa886;margin:80px -45px 110px;padding:56px 55px;position:relative;box-shadow:8px 10px #5b3a261f}.subscription-slip:before{content:"";pointer-events:none;border:1px dashed #593a266b;position:absolute;inset:8px}.slip-head{letter-spacing:.2em;border-bottom:1px solid #462e1e52;justify-content:space-between;padding-bottom:22px;font:10px monospace;display:flex}.slip-grid{grid-template-columns:1.2fr .8fr;gap:50px;padding-top:45px;display:grid}.slip-note{color:#6b594b;max-width:530px}.subscription-slip ul{gap:8px;margin:28px 0 0;padding:0;font-size:13px;list-style:none;display:grid}.subscription-slip li{align-items:center;gap:8px;display:flex}.price-stamp{color:#78372d;text-align:center;border:2px solid #8f4a39;flex-direction:column;justify-content:center;align-items:center;min-height:330px;padding:28px;display:flex;transform:rotate(1deg)}.price-stamp small{letter-spacing:.2em}.price-stamp strong{margin-top:14px;font:88px/1 Gloock,serif}.price-stamp span{text-transform:uppercase;letter-spacing:.12em;font-size:12px}.subscribe-button{background:var(--red);color:#fff6e9;border-radius:2px;justify-content:center;align-items:center;gap:9px;width:100%;margin-top:28px;padding:15px 16px;font-size:13px;font-weight:600;display:flex}.price-stamp em{margin-top:13px;font:16px Caveat,cursive}.postscript{max-width:780px;margin:0 auto 95px}.postscript>.salutation{font-size:34px}.faq-list{border-top:1px solid var(--line)}.faq-line{border-bottom:1px solid var(--line)}.faq-line button{width:100%;color:var(--ink);cursor:pointer;text-align:left;background:0 0;border:0;justify-content:space-between;align-items:center;padding:20px 0;font:18px Georgia,serif;display:flex}.faq-line button svg{transition:transform .25s}.faq-line.active button svg{transform:rotate(180deg)}.faq-answer{grid-template-rows:0fr;transition:grid-template-rows .3s;display:grid}.faq-answer p{color:var(--faded);margin:0;line-height:1.7;overflow:hidden}.faq-line.active .faq-answer{grid-template-rows:1fr}.faq-line.active .faq-answer p{padding-bottom:22px}.letter-signoff{border-top:1px dashed var(--line);min-height:170px;padding-top:60px;position:relative}.letter-signoff p{margin:0;font:22px Caveat,cursive}.letter-signoff strong{color:var(--red);transform-origin:0;font:46px Caveat,cursive;display:block;transform:rotate(-3deg)}.letter-signoff span{color:var(--faded);text-transform:uppercase;letter-spacing:.18em;font-size:9px}.letter-signoff img{object-fit:cover;filter:sepia(.25);border-radius:50%;width:120px;height:120px;position:absolute;top:35px;right:0}.desk-footer{color:#ffffff80;text-transform:uppercase;letter-spacing:.12em;justify-content:space-between;align-items:center;gap:25px;min-height:85px;padding:0 6vw;font-size:10px;display:flex}.desk-footer span{align-items:center;gap:6px;display:flex}@media (width<=900px){.letter-nav{grid-template-columns:1fr auto}.issue-label{display:none}.envelope-stage{text-align:center;grid-template-columns:1fr;padding-top:80px}.envelope-copy{margin:auto}.envelope-copy>p:not(.kicker){margin-left:auto;margin-right:auto}.envelope{width:min(640px,85vw);margin:30px auto 0}.tap-note{display:none}.margin-note{width:auto;margin-top:30px;position:static}.margin-note:before{content:""}.field-note,.slip-grid{grid-template-columns:1fr}.subscription-slip{margin-left:-15px;margin-right:-15px}}@media (width<=600px){.letter-nav{padding:0 5vw}.nav-order{display:none}.envelope-stage{min-height:720px;padding:58px 5vw 95px}.envelope-copy h1{font-size:49px}.envelope{width:94vw}.wax-seal{width:50px;height:50px}.address-lines{font-size:15px;bottom:8%}.paper-letter{width:96vw;padding:45px 24px 60px}.sender span{font-size:28px}.postmark{width:90px;height:90px}.letter-intro{margin-top:55px;font-size:18px}.taped-photo{width:105%;margin-left:-2.5%;padding:10px 10px 34px}.inside-parcel h2,.field-note h2,.subscription-slip h2{font-size:40px}.parcel-line{grid-template-columns:32px 1fr 18px;gap:9px}.parcel-line h3{font-size:22px}.field-note{gap:45px}.subscription-slip{margin:55px -12px 85px;padding:45px 28px}.slip-head{letter-spacing:.1em}.price-stamp strong{font-size:70px}.letter-signoff img{width:86px;height:86px}.desk-footer{text-align:center;flex-direction:column;justify-content:center;padding:28px}}
