:root{--ink:#2a1f18;--ink-soft:#5c4a3a;--label:#6e4a3e;--wax:#722f37;--gold:#c9a84c;--gold-hi:#e2c46e;--ivory:#f7f0e3;--blush:#e8c8bf;--night:#1a110a;--display:"Pinyon Script", "Snell Roundhand", cursive;--serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;--caps:"Cormorant SC", "Cormorant Garamond", Georgia, serif;--hand:"Caveat", "Bradley Hand", "Segoe Print", cursive;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--night)}body{font-family:var(--serif);color:var(--ivory);min-height:100vh;margin:0}.room{background:var(--night) url(/img/desk.jpg) center/cover no-repeat;min-height:100vh;position:relative}.room.fixed{background-attachment:fixed}.room:before{content:"";pointer-events:none;position:absolute;inset:0}.room.dim:before{background:linear-gradient(#0f090594,#0f0905c2)}.room.soft:before{background:radial-gradient(at 50% 45%,#0f090500 30%,#0f090580 100%)}.inner{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));position:relative}.parch{color:var(--ink);background:radial-gradient(at 18% 12%,#8b6d3f1a,#0000 50%),radial-gradient(at 80% 70%,#96733c17,#0000 45%),radial-gradient(#f4e9d1 35%,#ecdec0 72%,#dccaa0 100%);box-shadow:0 1px 2px #0006,0 22px 50px #0000008c,inset 0 0 60px #8b6d3f1f}.brand{font-family:var(--display);color:var(--gold);text-shadow:0 2px 14px #000000b3;font-weight:400;line-height:1}.sub{color:var(--blush);text-shadow:0 1px 8px #000000b3;font-style:italic}.caps{font-family:var(--caps);letter-spacing:.25em;text-transform:none}.link{font-family:var(--caps);letter-spacing:.2em;color:#e9d7b0;cursor:pointer;background:0 0;border:0;border-bottom:1px solid #0000;align-items:center;gap:10px;min-height:44px;padding:10px 4px;font-size:15px;text-decoration:none;display:inline-flex}.link:hover,.link:focus-visible{color:var(--gold);border-bottom-color:#c9a84c80;outline:none}.muted{font-family:var(--serif);letter-spacing:0;color:#c8a99f;font-size:14px}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.fade{animation:1s both fade}@keyframes fade{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.gate{flex-direction:column;justify-content:center;align-items:center;gap:26px;min-height:100vh;padding-block:48px;display:flex}.gate form{border-radius:2px;flex-direction:column;align-items:center;gap:22px;width:100%;max-width:500px;padding:52px 40px 40px;display:flex}.gate label{text-align:center;color:#3a2a1a;text-wrap:balance;font-size:34px;font-weight:500;line-height:1.2}.gate label em{color:var(--wax)}.gate input{width:100%;font-family:var(--hand);text-align:center;color:var(--ink);background:0 0;border:0;border-bottom:1.5px solid #722f3766;padding:8px 4px;font-size:30px}.gate input:focus{border-bottom-color:var(--wax);outline:none}.gate .note{font-family:var(--hand);text-align:center;color:var(--wax);max-width:400px;margin:0;font-size:24px;line-height:1.3}.btn{font-family:var(--caps);letter-spacing:.25em;color:var(--ivory);background:var(--wax);cursor:pointer;border:0;border-radius:1px;min-height:48px;padding:14px 44px;font-size:17px;box-shadow:0 6px 14px #3c0a1459}.btn:hover{background:#86353f}.desk{flex-direction:column;min-height:100vh;display:flex}.desk header{text-align:center;padding-top:40px}.scene{flex:1;width:100%;max-width:1280px;min-height:740px;margin:0 auto;position:relative}.pol{cursor:pointer;background:#f8f4ea;border:0;padding:8px 8px 28px;transition:transform .35s,box-shadow .35s;display:block;box-shadow:0 1px 2px #00000059,0 14px 30px #00000080}.pol img{filter:sepia(.12)saturate(.92);width:100%;height:auto;display:block}.scene .pol{z-index:1;position:absolute}.scene .pol:hover,.scene .pol:focus-visible{z-index:6;box-shadow:0 2px 4px #0006,0 22px 44px #0009}.env{z-index:4;cursor:pointer;width:380px;color:inherit;background:0 0;border:0;margin-left:-190px;padding:0;transition:transform .4s;position:absolute;top:56px;left:50%}.env:hover{transform:translateY(-6px)}.env .face{border-radius:2px;height:250px;position:relative;overflow:hidden}.env .addr{text-align:center;font-family:var(--hand);line-height:1.1;position:absolute;bottom:14px;left:0;right:0}.env .addr .d{color:var(--ink-soft);font-size:19px}.env .addr .t{color:var(--ink);font-size:28px}.env .hint{text-align:center;font-family:var(--caps);letter-spacing:.3em;color:var(--gold);text-shadow:0 1px 6px #000c;margin-top:16px;font-size:15px;display:block}.bundle{z-index:3;cursor:pointer;background:0 0;border:0;width:180px;margin-left:-90px;padding:0;position:absolute;top:436px;left:50%}.bundle .tied{filter:drop-shadow(0 10px 18px #0000008c)drop-shadow(0 2px 3px #0006);width:100%;height:auto;transition:transform .35s;display:block}.bundle:hover .tied{transform:translateY(-4px)}.bundle .lbl,.next .lbl{text-align:center;font-family:var(--caps);letter-spacing:.22em;color:#e9d7b0;text-shadow:0 1px 6px #000c;margin-top:12px;font-size:14px;display:block}.nextline{z-index:3;text-align:center;flex-direction:column;align-items:center;gap:4px;width:420px;margin-left:-210px;display:flex;position:absolute;top:372px;left:50%}.nextline .rule{background:#c9a84c8c;width:60px;height:1px}.nextline .k{font-family:var(--caps);letter-spacing:.24em;color:var(--gold);text-shadow:0 1px 6px #000000d9;font-size:14px}.nextline .w{font-family:var(--hand);color:var(--ivory);text-shadow:0 1px 6px #000000d9;font-size:24px}.bar{flex-wrap:wrap;justify-content:center;gap:4px 36px;padding-block:14px 30px;display:flex}.opening{justify-content:center;align-items:center;min-height:100vh;display:flex}.open-env{aspect-ratio:400/264;perspective:900px;width:min(400px,90vw);position:relative}.open-env .paper{height:86%;font-family:var(--hand);opacity:0;justify-content:center;align-items:center;font-size:30px;animation:1s ease-out 1.1s forwards rise;display:flex;position:absolute;top:7%;left:6%;right:6%}.open-env .back{border-radius:2px;position:absolute;inset:0}.open-env .flap{clip-path:polygon(0 0,100% 0,50% 56%);transform-origin:50% 0;background:linear-gradient(#eadbbb,#d9c59b);animation:.8s ease-in-out .7s forwards flap;position:absolute;inset:0}.open-env .half{width:96px;height:96px;margin-left:-48px;position:absolute;top:31%;left:50%}.open-env .l{clip-path:inset(0 50% 0 0);animation:1s ease-in .35s forwards left}.open-env .r{clip-path:inset(0 0 0 50%);animation:1s ease-in .35s forwards right}@keyframes rise{to{opacity:1;transform:translateY(-34%)}}@keyframes flap{to{opacity:0;transform:rotateX(180deg)}}@keyframes left{to{opacity:0;transform:translate(-60px,50px)rotate(-35deg)}}@keyframes right{to{opacity:0;transform:translate(60px,50px)rotate(35deg)}}.letter-wrap{flex-direction:column;align-items:center;padding-block:56px 72px;display:flex}article.letter{border-radius:2px;width:100%;max-width:720px;padding:60px;position:relative}.stamp{mix-blend-mode:multiply;opacity:.9;pointer-events:none;width:128px;height:auto;position:absolute;top:22px;right:26px;transform:rotate(4deg)}.body p.hdate{text-indent:0;color:var(--ink-soft);margin:0 0 6px;font-size:24px}.crest{filter:grayscale()sepia(.55)hue-rotate(-18deg)saturate(1.4)contrast(1.05);mix-blend-mode:multiply;opacity:.82;border-radius:2px;width:96px;height:auto;transform:rotate(-2deg)}.letter header{text-align:center;border-bottom:1px solid #722f372e;margin-bottom:30px;padding-top:40px;padding-bottom:22px}.letter .date{color:var(--ink-soft);font-size:17px}.letter .chap{font-family:var(--caps);letter-spacing:.3em;color:var(--label);margin-top:6px;font-size:14px}.letter h1{color:var(--wax);text-wrap:balance;margin:10px 0 0;font-size:40px;font-weight:500;line-height:1.15}.body{font-family:var(--hand);color:var(--ink);max-width:62ch;font-size:26px;line-height:1.6}.body p{text-indent:28px;margin:0 0 18px}.body p:first-child,.body p:nth-child(2){text-indent:0}.sign{margin-top:36px}.sign .c{font-family:var(--hand);color:#3a2a1a;font-size:26px}.sign .n{font-family:var(--display);color:#3a2a1a;font-size:56px;line-height:1.1}.sign .ph{color:var(--label);font-size:13px}.tucked{width:160px;position:absolute;bottom:-44px;right:-30px;transform:rotate(7deg)}.cliff{border-top:1px solid #c9a84c59;border-bottom:1px solid #c9a84c59;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;width:100%;max-width:720px;margin-top:76px;padding-block:22px;display:flex}.cliff .k{font-family:var(--caps);letter-spacing:.22em;color:var(--gold);font-size:14px}.cliff .t{font-size:26px;font-style:italic}.cliff .s{color:var(--blush);font-size:16px}.page{max-width:760px;margin:0 auto;padding-block:56px 72px}.page.wide{max-width:1180px}.page h2{text-align:center;font-family:var(--display);color:var(--gold);margin:0;font-size:54px;font-weight:400;line-height:1}.page .lede{text-align:center;color:var(--blush);margin-top:8px;font-size:18px;font-style:italic}.ch{font-family:var(--caps);letter-spacing:.28em;color:var(--gold);border-bottom:1px solid #c9a84c4d;padding-bottom:10px;font-size:15px}.row{width:100%;color:var(--ivory);text-align:left;cursor:pointer;font-family:var(--serif);background:0 0;border:0;border-bottom:1px solid #f7f0e314;align-items:center;gap:18px;padding:16px 8px;display:flex}.row:hover{background:#f7f0e30f}.row .ti{flex:1;min-width:0;font-size:24px}.row .dt{color:var(--blush);font-size:16px}.row.sealed{cursor:default;opacity:.72}.row.sealed:hover{background:0 0}.row.sealed .ti{font-family:var(--caps);letter-spacing:.25em;color:#e9d7b0;font-size:20px}.gallery{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));align-items:start;gap:40px 32px;margin-top:44px;display:grid}.gallery .pol{cursor:default}.center{text-align:center;margin-top:44px}@media (width<=820px){.scene{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:18px 12px;min-height:0;padding-block:24px;display:grid}.scene .pol{padding:5px 5px 18px;position:static}.env{order:-3;grid-column:1/-1;width:min(340px,100%);margin:0 auto 18px;position:relative;top:auto;left:auto}.env .face{aspect-ratio:380/250;height:auto}.nextline{order:-2;grid-column:1/-1;width:100%;margin:0 auto 6px;position:relative;top:auto;left:auto}.bundle{order:-1;grid-column:1/-1;width:150px;margin:0 auto 10px;position:relative;top:auto;left:auto}article.letter{padding:44px 24px}.stamp{width:78px;top:14px;right:14px}.letter header{padding-top:84px}.tucked{width:120px;right:-6px}.gate form{padding:44px 24px 32px}.gate label{font-size:28px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation-duration:.01ms!important;animation-delay:0s!important}}a.link{color:#e9d7b0}.env{text-decoration:none}.gate .note:empty{display:none}.scene .pol{appearance:none}.letter-link{display:contents}[hidden]{display:none!important}img{max-width:100%}
