.subscribe{--sub-fill:var(--color-text);--sub-on-fill:var(--color-bg);--sub-field:var(--color-bg);--sub-ink:var(--color-text);--sub-line:var(--color-rule);--sub-muted:var(--color-muted)}.dark .subscribe{--sub-fill:var(--color-text-dark);--sub-on-fill:var(--color-bg-dark);--sub-field:var(--color-bg-dark);--sub-ink:var(--color-text-dark);--sub-line:var(--color-rule-dark);--sub-muted:var(--color-muted-dark)}.subscribe--inverse,.dark .subscribe--inverse{--sub-fill:var(--letter-fg);--sub-on-fill:var(--letter-bg);--sub-field:transparent;--sub-ink:var(--letter-fg);--sub-line:color-mix(in srgb,var(--letter-fg)40%,transparent);--sub-muted:color-mix(in srgb,var(--letter-fg)65%,transparent)}.subscribe__pill{background-color:var(--sub-fill);border-radius:999px;width:180px;max-width:100%;height:54px;transition:width .55s cubic-bezier(.65,0,.35,1),background-color .35s,box-shadow .3s;position:relative}.subscribe__pill>*{position:absolute}.subscribe__open{border-radius:inherit;color:var(--sub-on-fill);font:500 15px/1 var(--font-body),sans-serif;transition:opacity .2s;inset:0}.subscribe__input{width:calc(100% - 84px);height:100%;color:var(--sub-ink);font:16px/1 var(--font-body),sans-serif;opacity:0;pointer-events:none;background:0 0;border:0;outline:0;padding:0;transition:opacity .2s;top:0;left:24px}.subscribe__input::placeholder{color:var(--sub-muted)}.subscribe__go{background-color:var(--sub-fill);width:40px;height:40px;color:var(--sub-on-fill);opacity:.35;border-radius:50%;place-items:center;transition:transform .25s ease-in,opacity .25s;display:grid;top:7px;right:7px;transform:scale(0)}.subscribe__msg{color:var(--sub-on-fill);font:500 15px/1 var(--font-body),sans-serif;white-space:nowrap;opacity:0;pointer-events:none;justify-content:center;align-items:center;gap:8px;transition:opacity .2s;display:flex;inset:0}.subscribe__pill.is-open{background-color:var(--sub-field);width:400px;box-shadow:inset 0 0 0 1px var(--sub-line)}.subscribe__pill.is-open:focus-within{box-shadow:inset 0 0 0 1px var(--sub-ink)}.subscribe__pill.is-open .subscribe__open,.subscribe__pill.is-done .subscribe__open{opacity:0;pointer-events:none}.subscribe__pill.is-open .subscribe__input{opacity:1;pointer-events:auto;transition:opacity .3s .25s}.subscribe__pill.is-open .subscribe__go{transition:transform .45s cubic-bezier(.34,1.56,.64,1) .3s,opacity .25s;transform:scale(1)}.subscribe__pill.is-valid .subscribe__go{opacity:1}.subscribe__pill.is-busy .subscribe__go{opacity:.35;pointer-events:none}.subscribe__pill.is-done{width:220px}.subscribe__pill.is-done .subscribe__msg{opacity:1;transition:opacity .3s .35s}.subscribe__open:focus-visible,.subscribe__go:focus-visible{outline:2px solid var(--sub-ink);outline-offset:3px}.subscribe__trap{opacity:0;width:1px;height:1px;left:-9999px}.subscribe__note{min-height:1.55em;font-size:var(--font-size-sm);color:var(--sub-muted);margin-top:12px}@media (prefers-reduced-motion:reduce){.subscribe__pill{transition:background-color .2s}.subscribe__pill.is-open .subscribe__go{transition:opacity .25s}}.letter{--letter-bg:var(--color-text);--letter-fg:var(--color-bg);--letter-radius:10px;border-radius:var(--letter-radius);background-color:var(--letter-bg);color:var(--letter-fg);padding:64px 28px 16px;position:relative;box-shadow:0 20px 40px -16px #0006}.dark .letter{--letter-bg:var(--color-text-dark);--letter-fg:var(--color-bg-dark);box-shadow:0 20px 40px -16px #000c}.letter__flap{width:100%;height:100%;clip-path:inset(0 round var(--letter-radius));pointer-events:none;position:absolute;inset:0}.letter__flap path{fill:none;stroke:var(--letter-fg);stroke-width:1.5px}.letter__body{text-align:center;position:relative}.letter__title{font-family:var(--font-display),sans-serif;letter-spacing:-.02em;white-space:nowrap;margin-bottom:12px;font-size:1rem;font-weight:500;line-height:1.25}.letter .subscribe__pill{width:132px;height:42px;margin-inline:auto}.letter .subscribe__pill.is-open,.letter .subscribe__pill.is-done{width:100%}.letter .subscribe__open,.letter .subscribe__msg{font-size:14px}.letter .subscribe__input{width:calc(100% - 56px);left:16px}.letter .subscribe__go{width:32px;height:32px;top:5px;right:5px}.letter .subscribe__note{width:0;min-width:100%;min-height:0;margin-top:6px;font-size:12px}.letter__archive-row{justify-content:center;margin-top:12px;font-size:10.5px;display:flex}.letter__archive{font-family:var(--font-mono),ui-monospace,monospace;text-transform:uppercase;text-underline-offset:3px;opacity:.8;align-items:center;gap:3px;-webkit-text-decoration:underline #0000;text-decoration:underline #0000;transition:opacity .2s,text-decoration-color .2s;display:inline-flex}.letter__archive:hover,.letter__archive:focus-visible{opacity:1;text-decoration-color:currentColor}.letter__archive:focus-visible{outline:2px solid var(--letter-fg);outline-offset:2px}.letter__close{width:28px;height:28px;color:var(--letter-fg);opacity:.75;border-radius:50%;place-items:center;transition:opacity .2s;display:grid;position:absolute;top:calc(30% - 36px);left:50%;translate:-50%}.letter__close:hover{opacity:1}.letter__close:focus-visible{outline:2px solid var(--letter-fg);outline-offset:-2px}.letter-drop{--tilt:-3deg;right:var(--page-gutter);bottom:var(--page-gutter);z-index:60;width:264px;max-width:calc(100vw - var(--page-gutter)*2);rotate:var(--tilt);position:fixed}.letter-drop.is-in{animation:.9s cubic-bezier(.22,1.2,.36,1) both letter-in,5s ease-in-out 3s infinite letter-wiggle}.letter-drop.is-in:hover,.letter-drop.is-in:focus-within{animation-play-state:paused}.letter-drop.is-out{animation:.45s cubic-bezier(.55,0,.75,.3) forwards letter-out}.letter-drop.is-sent{animation:.7s cubic-bezier(.55,0,.75,.3) forwards letter-sent}@keyframes letter-in{0%{translate:calc(100% + 80px) 60px;rotate:16deg}}@keyframes letter-wiggle{0%,20%,to{rotate:var(--tilt)}4%{rotate:calc(var(--tilt) + 3deg)}8%{rotate:calc(var(--tilt) - 2.5deg)}12%{rotate:calc(var(--tilt) + 2deg)}16%{rotate:calc(var(--tilt) - 1deg)}}@keyframes letter-out{to{opacity:0;translate:calc(100% + 80px) 60px;rotate:12deg}}@keyframes letter-sent{to{opacity:0;translate:-40px -110vh;rotate:-16deg}}@media (prefers-reduced-motion:reduce){.letter-drop.is-in{animation:.3s ease-out both letter-fade}.letter-drop.is-out,.letter-drop.is-sent{animation:.25s ease-in reverse forwards letter-fade}}@keyframes letter-fade{0%{opacity:0}}
