.letter-desk{--bond:#fcfbf8;--thermal:#fff;--pen:#161614;--pen-muted:#0d0d0d94;--rule:#0d0d0d38;--spot:var(--c-accent);width:min(1180px,100% - 2rem);margin:0 auto;padding-block:4rem 6rem;position:relative;container:desk/inline-size}.letter{background:var(--bond);width:min(100%,760px);color:var(--pen);font-family:var(--font-mono);letter-spacing:-.01em;margin-inline:auto;padding:8cqi 9cqi 7cqi;font-size:14px;line-height:30px;position:relative;box-shadow:0 1px 1px #0000002e,0 24px 50px -20px #00000042;container-type:inline-size}.letter:before{content:"";pointer-events:none;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='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:0}.letter ::selection{color:var(--pen);background:#e3262b29}.letter input,.letter textarea{min-inline-size:0;color:inherit;font:inherit;letter-spacing:inherit;background:0 0;border:0;outline:none;padding:0}.letter input::placeholder,.letter textarea::placeholder{color:var(--pen-muted);opacity:.7}.letter input:-webkit-autofill{-webkit-text-fill-color:var(--pen);transition:background-color 9999s ease-out}.letter__sr{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.letter__rule{background:var(--rule);pointer-events:none;block-size:1px;transition:background-color .2s;position:absolute;inset-block-end:0;inset-inline:0}.letter__head{align-items:center;gap:1.25rem;padding-block-end:1.25rem;line-height:1.5;display:flex;position:relative}.letter__mark{aspect-ratio:1;inline-size:clamp(52px,9cqi,68px);font-family:var(--font-display);letter-spacing:.02em;border:1.5px solid;border-radius:50%;flex:none;place-items:center;font-size:clamp(1.3rem,3.4cqi,1.7rem);display:grid}.letter__name{font-family:var(--font-geist-sans), Arial, sans-serif;letter-spacing:-.02em;margin:0 0 4px;font-size:17px;font-weight:600;line-height:1.25}.letter__line{color:var(--pen-muted);letter-spacing:.06em;text-transform:uppercase;margin:0;font-size:11px}.letter__line a{color:inherit;text-transform:none;text-decoration:none}.letter__line a:hover,.letter__line a:focus-visible{text-underline-offset:.2em;text-decoration:underline}.letter__date{color:var(--pen-muted);margin:2rem 0 0;font-size:12px}.letter__salut{margin:.5rem 0 0;font-size:15px}.letter__label{color:var(--pen-muted);letter-spacing:.06em;font-size:11px}.letter__re{border:0;flex-wrap:wrap;align-items:baseline;gap:0 1.25rem;min-inline-size:0;margin:1rem 0 0;padding:0 0 0 8ch;display:flex;position:relative}.letter__re legend{padding:0;position:absolute;inset-inline-start:0}.letter__kind{cursor:pointer;align-items:center;gap:.5ch;font-size:13px;display:inline-flex}.letter__kind input{opacity:0;pointer-events:none;position:absolute}.letter__box:before{content:"[ ]";letter-spacing:0}.letter__kind input:checked~.letter__box:before{content:"[X]"}.letter__kind input:focus-visible~.letter__box{outline:2px solid var(--pen);outline-offset:2px}.letter__field{align-items:baseline;gap:.75rem;margin-block-start:.5rem;padding-block-end:1px;display:flex;position:relative}.letter__field .letter__label{flex:none;min-inline-size:4.85em}.letter__field input{flex:1}.letter__field:focus-within .letter__rule,.letter__sig:focus-visible .letter__rule{background:var(--pen)}.letter__body{background:repeating-linear-gradient(transparent 0 29px, var(--rule) 29px 30px);margin-block-start:1.25rem;display:block}.letter__body:focus-within{background-image:repeating-linear-gradient(#0000 0 29px,#0d0d0d6b 29px 30px)}.letter__body textarea{resize:none;min-block-size:180px;inline-size:100%;line-height:30px;display:block;overflow:hidden}.letter__close{margin:1.5rem 0 0;font-size:15px}.letter__sig{cursor:pointer;outline:none;block-size:120px;margin-block-start:.25rem;position:relative}.letter-desk[data-status=posted] .letter__sig{cursor:default}.letter__ink{pointer-events:none;block-size:100%;inline-size:100%;display:block;position:absolute;inset:0}.letter__ghost{color:var(--pen-muted);font-family:var(--font-scrawl);opacity:.7;pointer-events:none;font-size:15px;transition:opacity .3s;position:absolute;inset-block-end:.5rem;inset-inline-start:0}.letter__sig[data-signed] .letter__ghost{opacity:0}.letter__typed{justify-content:space-between;align-items:baseline;gap:1rem;margin-block-start:.5rem;display:flex}.letter__typed input{flex:1;font-size:13px}.letter__typed input:focus{box-shadow:0 1px 0 var(--pen)}.letter__link{color:var(--pen-muted);font:inherit;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;background:0 0;border:0;padding:0;font-size:11px;text-decoration:none}.letter__link:hover,.letter__link:focus-visible{color:var(--pen);text-underline-offset:.2em;text-decoration:underline}.letter__foot{justify-content:space-between;align-items:center;gap:1.5rem;margin-block-start:2.5rem;display:flex}.letter__status{color:var(--pen-muted);letter-spacing:.06em;margin:0;font-size:11px;line-height:1.6}.letter-desk[data-status=posted] .letter__status{color:var(--pen)}.letter__send{background:var(--pen);color:var(--bond);font-family:var(--font-display);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;border:0;border-radius:3px;padding:.35rem .9rem;font-size:1.05rem;transition:background-color .2s,scale .2s}.letter__send:hover,.letter__send:focus-visible{background:var(--spot)}.letter__send:active{scale:.96}.letter__note{color:var(--spot);letter-spacing:.02em;margin:6px 0 0;font-size:11px;line-height:1.6}.letter-desk[data-error=email] [data-field=email] .letter__rule,.letter-desk[data-error=sign] .letter__sig .letter__rule{background:var(--spot)}.letter-desk[data-error=body] .letter__body{background-image:repeating-linear-gradient(transparent 0 29px, var(--spot) 29px 30px)}.letter-desk[data-status=posted] .letter input,.letter-desk[data-status=posted] .letter textarea{color:var(--pen-muted)}.letter__stamp{inline-size:clamp(150px,30cqi,230px);color:var(--spot);font-family:var(--font-mono);mix-blend-mode:multiply;pointer-events:none;position:absolute;inset-block-end:22cqi;inset-inline-end:6cqi;rotate:-9deg}.letter__stamp svg{block-size:auto;inline-size:100%;display:block}.letter-stub{--pen:#161614;--pen-muted:#5b5b58;--rule:#1616144d;z-index:2;color:#161614;inline-size:min(100% - 2rem,280px);font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;clip-path:polygon(0 8px,4% 0,8% 8px,12% 0,16% 8px,20% 0,24% 8px,28% 0,32% 8px,36% 0,40% 8px,44% 0,48% 8px,52% 0,56% 8px,60% 0,64% 8px,68% 0,72% 8px,76% 0,80% 8px,84% 0,88% 8px,92% 0,96% 8px,100% 0,100% 100%,0 100%);background:#fff;margin:2.5rem auto 0;padding:26px 22px 22px;font-size:11px;line-height:1.5;position:relative;rotate:2deg;box-shadow:0 1px 1px #00000024,0 16px 34px -16px #0000003d}.letter-stub p{margin:0}.letter-stub__head{font-size:12px;font-weight:600}.letter-stub__sub{border-block-end:1px dashed var(--rule);color:var(--pen-muted);padding-block-end:10px;font-size:10px}.letter-stub__rows{margin:12px 0 0}.letter-stub__rows>div{border-block-end:1px dotted var(--rule);justify-content:space-between;gap:.5rem;padding-block:5px;display:flex}.letter-stub__rows dt{color:var(--pen-muted)}.letter-stub__rows dd{text-align:right;margin:0}.letter-stub__rows dd[data-empty]{color:var(--pen-muted)}.letter-stub__bars{background:repeating-linear-gradient(90deg, var(--pen) 0 2px, transparent 2px 4px, var(--pen) 4px 5px, transparent 5px 9px, var(--pen) 9px 12px, transparent 12px 14px);block-size:26px;margin-block-start:16px;display:block}.letter-stub__foot{color:var(--pen-muted);margin-block-start:8px;font-size:10px}@container desk not (min-width:760px){.letter-stub{display:none}}@container desk (min-width:760px){.letter,.letter-stub{--sheet:clamp(560px, 62cqw, 760px)}.letter{inline-size:var(--sheet);margin-inline-start:calc((100cqw - var(--sheet) * 1.2) / 2)}.letter-stub{inline-size:calc(var(--sheet) * .34);margin:0;position:absolute;inset-block-start:1.5rem;inset-inline-start:calc((100cqw - var(--sheet) * 1.2) / 2 + var(--sheet) * .84)}}.letter-slip{background:var(--bond,#f1ede3);inline-size:min(92vw,640px);color:var(--pen,#0d0d0d);font-family:var(--font-mono);border:0;border-radius:2px;margin:auto;padding:0;box-shadow:inset 0 1px #fff6,0 30px 80px #0000008c}.letter-slip::backdrop{background:#0a0a0a99}.letter-slip__in{padding:22px 26px 20px}.letter-slip__head{letter-spacing:.06em;justify-content:space-between;gap:1rem;margin:0;font-size:11px;line-height:1.5;display:flex}.letter-slip__hint{color:var(--pen-muted)}.letter-slip__pad{border-block-end:1px solid var(--rule);cursor:crosshair;touch-action:none;block-size:clamp(170px,32vw,240px);margin-block-start:.75rem;position:relative}.letter-slip__pad canvas{block-size:100%;inline-size:100%;display:block;position:absolute;inset:0}.letter-slip__x{color:var(--pen-muted);pointer-events:none;font-size:13px;position:absolute;inset-block-end:6px;inset-inline-start:2px}.letter-slip__foot{justify-content:flex-end;align-items:center;gap:1.25rem;margin-block-start:1rem;display:flex}@media (max-width:767px){.letter-desk{padding-block:1rem}.letter,.letter__typed input{font-size:16px}.letter{padding:7cqi 6cqi 6cqi}.letter__foot{flex-direction:column;align-items:flex-start}.letter-slip__head{flex-direction:column;gap:2px}}