.info-letter-page{color:#eee9df;isolation:isolate;min-height:280svh;font-family:var(--font-outfit),var(--font-anuphan),sans-serif;--reading:0;background:#0b1925;position:relative}.info-letter-page:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(at 64% 25%,#42586770,#0000 55%),radial-gradient(at 10% 90%,#28425280,#0000 60%);position:fixed;inset:0}.letter-nav{z-index:5;letter-spacing:.12em;justify-content:space-between;align-items:center;padding:30px 4vw;font-size:12px;display:flex;position:fixed;top:0;left:0;right:0}.letter-nav>a{font-size:13px}.letter-nav sup{margin-left:5px;font-size:7px}.letter-nav nav{letter-spacing:.02em;gap:32px;display:flex}.letter-nav [aria-current]{border-bottom:1px solid #eee9df70;padding-bottom:5px}.letter-stage{grid-template-columns:1fr minmax(0,620px) 1fr;align-items:center;gap:4vw;height:100svh;min-height:720px;padding:90px 6vw 76px;display:grid;position:sticky;top:0}.letter-aside{align-self:center}.letter-aside>span,.letter-page-note{font:9px var(--font-geist-mono),monospace;letter-spacing:.17em;color:#b4c3cb}.letter-aside h1{font-family:var(--font-dm-serif),serif;letter-spacing:-.025em;margin:24px 0;font-size:clamp(36px,4.3vw,70px);font-weight:400;line-height:1.08}.letter-aside h1 em{color:#c5d3d7;font-weight:400}.letter-aside p{color:#b4c3cb;font-size:12px;line-height:1.8}.letter-perspective{perspective:1500px;min-width:0}.letter-paper{color:#26323a;transform-style:preserve-3d;--light-x:50%;--light-y:25%;background:#eee7d6;padding:34px 48px 26px;position:relative;transform:rotate(-2deg);box-shadow:1px 1px #bdb5a4,2px 3px #aca493,3px 5px #827e71,0 35px 75px #0007,0 5px 15px #0004}.letter-paper:after{content:"";pointer-events:none;background:radial-gradient(ellipse at var(--light-x) var(--light-y),#fff9,transparent 65%),linear-gradient(110deg,#fff3,transparent 35%,#614a1710);mix-blend-mode:soft-light;position:absolute;inset:0}.letter-fibre{pointer-events:none;opacity:.24;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23837961' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E");position:absolute;inset:0}.letter-fold{pointer-events:none;background:linear-gradient(#0000 32.9%,#7369520b 33%,#fff8 33.2%,#0000 33.7% 66%,#7369520c 66.3%,#fff7 66.5%,#0000 67%),linear-gradient(90deg,#0000 49.5%,#73695208 50%,#fff4 50.2%,#0000 50.7%);position:absolute;inset:0}.letter-paper-top,.letter-paper-bottom{font:7px var(--font-geist-mono),monospace;letter-spacing:.12em;color:#6d7169;justify-content:space-between;gap:12px;display:flex;position:relative}.letter-paper-top{border-bottom:1px solid #26323a24;padding-bottom:14px}.letter-address{letter-spacing:.08em;color:#62695f;justify-content:space-between;margin:23px 0 26px;font-size:9px;display:flex}.letter-address>span:last-child{letter-spacing:0;font-style:italic}.letter-paper h2{font:italic 34px/1.2 var(--font-dm-serif),serif;margin-bottom:24px;font-weight:400;position:relative}.letter-body{font:19px/1.65 var(--font-dm-serif),var(--font-anuphan),serif;letter-spacing:-.012em;position:relative}.letter-body p+p{margin-top:16px}.letter-body [data-ink]{transition:none}.letter-signature{flex-direction:column;align-items:flex-start;margin-top:25px;display:flex;position:relative}.letter-signature>span{color:#646c65;font-size:11px;font-style:italic}.letter-signature strong{font:44px/1.2 var(--font-hand),cursive;margin:2px 0 12px;font-weight:400;transform:rotate(-5deg)}.letter-signature a{letter-spacing:.03em;border-bottom:1px solid #26323a50;padding-bottom:4px;font-size:10px}.letter-paper-bottom{border-top:1px solid #26323a24;margin-top:24px;padding-top:13px;font-size:6px}.letter-page-note{writing-mode:vertical-rl;justify-self:end}.letter-controls{z-index:5;font:8px var(--font-geist-mono),monospace;letter-spacing:.1em;color:#b4c3cb;justify-content:space-between;align-items:center;gap:24px;padding:24px 4vw;display:flex;position:fixed;bottom:0;left:0;right:0}.letter-controls button{font:inherit;padding:8px 0}.letter-progress{background:#e7e7df25;width:100px;height:1px}.letter-progress i{transform-origin:0;height:100%;transform:scaleX(var(--reading));background:#e7e7df;display:block}.letter-still{min-height:100svh}.letter-still .letter-progress{display:none}@media (width>=1050px) and (height<=850px){.letter-stage{grid-template-columns:1fr minmax(0,540px) 1fr;min-height:660px}.letter-paper{padding:25px 38px 20px}.letter-body{font-size:17px;line-height:1.5}.letter-paper h2{margin-bottom:18px;font-size:30px}.letter-address{margin:17px 0}.letter-signature{margin-top:18px}.letter-paper-bottom{margin-top:16px}}@media (width<=1050px){.letter-stage{grid-template-columns:minmax(0,580px);justify-content:center;gap:0;padding:86px 28px 72px}.letter-aside,.letter-page-note{display:none}.letter-paper{padding:28px 36px}.letter-body{font-size:18px}.letter-paper h2{font-size:30px}}@media (width<=600px){.letter-stage{min-height:660px;padding:76px 22px 70px}.letter-nav{padding:23px 24px}.letter-paper{padding:23px 25px 20px}.letter-paper-top{font-size:6px}.letter-address{margin:18px 0;font-size:8px}.letter-paper h2{margin-bottom:20px;font-size:28px}.letter-body{font-size:16px;line-height:1.55}.letter-body p+p{margin-top:14px}.letter-signature{margin-top:22px}.letter-signature strong{font-size:38px}.letter-paper-bottom{margin-top:18px;font-size:5px}.letter-controls{gap:12px;padding:15px 22px;font-size:7px}.letter-progress{display:none}}@media (prefers-reduced-motion:reduce){.info-letter-page{min-height:100svh}.letter-paper{transform:none!important}.letter-paper [data-ink]{opacity:1!important}}.info-letter-page .letter-signature{background:0 0;padding-bottom:0!important}.info-letter-page .letter-controls{background:linear-gradient(#0000,#0b1925b0);padding-bottom:24px!important}.letter-fold{opacity:.5}@media (width<=600px){.info-letter-page .letter-controls{padding-bottom:15px!important}}@font-face{font-family:LetterSignature;src:url(/fonts/caveat-letter-latin.woff2)format("woff2");font-weight:400 700;font-style:normal;font-display:swap}.letter-signature strong{font-family:LetterSignature,cursive}.letter-motion{min-height:440svh}.letter-perspective{position:relative}.letter-model{pointer-events:none;width:130%;height:min(86svh,850px);display:none;position:absolute;top:50%;left:-15%;transform:translateY(-50%)}.letter-webgl .letter-model{display:block}.letter-webgl .letter-paper{opacity:0;pointer-events:none}.letter-webgl .letter-paper:focus-within{opacity:1;pointer-events:auto}.letter-paper{border-radius:2px 5px 3px 8px;box-shadow:0 1px 1px #a89d87,0 25px 50px #0004}.letter-body{font-family:LetterSignature,var(--font-anuphan),cursive;font-size:24px;font-weight:400;line-height:1.45}@media (width<=600px){.letter-model{width:110%;height:80svh;left:-5%}.letter-body{font-size:21px}}@media (prefers-reduced-motion:reduce){.letter-motion{min-height:100svh}.letter-model{display:none!important}.letter-webgl .letter-paper{opacity:1;pointer-events:auto}}.letter-model{filter:drop-shadow(0 22px 22px #0005)}.letter-webgl .letter-perspective:has(.letter-paper:focus-within) .letter-model{display:none}
