.contact {
    --lift: rgba(24, 24, 27, 0.18);
    --paper: color-mix(in srgb, var(--panel) 96%, #F2DFB8);
    --ruled: color-mix(in srgb, var(--fg) 10%, transparent);
    --margin-line: color-mix(in srgb, var(--accent) 45%, transparent);
    --blank-line: color-mix(in srgb, var(--muted) 85%, var(--paper));
    --blank-line-hover: color-mix(in srgb, var(--fg) 65%, var(--paper));
    --blank-fill: color-mix(in srgb, var(--fg) 5%, transparent);
    --blank-hover: color-mix(in srgb, var(--fg) 8%, transparent);
    --blank-focus: color-mix(in srgb, var(--fg) 9%, transparent);
    --blank-wrong: color-mix(in srgb, var(--accent) 7%, transparent);
    --blank-ring: color-mix(in srgb, var(--fg) 12%, transparent);
    --blank-hint: color-mix(in srgb, var(--muted) 80%, var(--fg));
    padding-bottom: calc(var(--dock-space) + 48px);
}

:root[data-theme="dark"] .contact {
    --lift: rgba(0, 0, 0, 0.55);
    --paper: color-mix(in srgb, var(--panel) 95%, #4A3C26);
    --ruled: color-mix(in srgb, var(--fg) 11%, transparent);
    --margin-line: color-mix(in srgb, var(--accent) 40%, transparent);
    --blank-fill: color-mix(in srgb, var(--fg) 7%, transparent);
    --blank-hover: color-mix(in srgb, var(--fg) 9%, transparent);
    --blank-focus: color-mix(in srgb, var(--fg) 11%, transparent);
    --blank-wrong: color-mix(in srgb, var(--accent) 12%, transparent);
    --blank-ring: color-mix(in srgb, var(--fg) 16%, transparent);
}

.contact-stage {
    display: grid;
    gap: 28px;
}

.contact-lead {
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 26px;
}

.contact-links {
    margin: 16px 0 0;
    font-size: 15px;
    line-height: 24px;
    color: var(--body);
}

.contact-links a {
    font-weight: 600;
    color: var(--fg);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.contact-desk {
    position: relative;
    display: grid;
}

.letter {
    --rule: 34px;
    position: relative;
    z-index: 2;
    isolation: isolate;
    display: grid;
    box-sizing: border-box;
    padding: 20px 18px 22px 50px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--paper);
    box-shadow: 0 30px 60px -34px var(--lift);
    font-size: 16px;
    line-height: var(--rule);
    color-scheme: light;
}

:root[data-theme="dark"] .letter {
    color-scheme: dark;
}

.letter::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 36px;
    width: 1px;
    background: var(--margin-line);
}

.letter-hi {
    margin: 0;
    font-family: var(--font-name);
    font-weight: 900;
    font-size: 22px;
    line-height: var(--rule);
}

.letter-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
    margin: 0 0 6px;
}

.letter-line label {
    color: var(--body);
}

.letter-blank,
.letter-paper {
    box-sizing: border-box;
    min-width: 0;
    border-bottom: 2px solid var(--blank-line);
    border-radius: 6px 6px 0 0;
    background-color: var(--blank-fill);
    scroll-margin-top: calc(var(--bar) + 24px);
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}

.letter-blank {
    flex: 1 1 160px;
}

.letter-blank:hover,
.letter-paper:hover {
    border-bottom-color: var(--blank-line-hover);
    background-color: var(--blank-hover);
}

.letter-blank:focus-within,
.letter-paper:focus-within {
    border-bottom-color: var(--fg);
    background-color: var(--blank-focus);
    box-shadow: 0 0 0 2px var(--blank-ring);
    outline: 2px solid transparent;
}

.letter-blank[data-invalid],
.letter-paper[data-invalid] {
    border-bottom-color: var(--accent-ink);
    background-color: var(--blank-wrong);
}

.letter input,
.letter textarea {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font: inherit;
    font-weight: 600;
    color: var(--fg);
    caret-color: var(--accent);
    outline: none;
    scroll-margin-top: calc(var(--bar) + 24px);
}

.letter input {
    line-height: calc(var(--rule) - 2px);
}

.letter input:-webkit-autofill,
.letter input:-webkit-autofill:hover,
.letter input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--fg);
    transition: background-color 600000s 0s;
}

.letter input::placeholder,
.letter textarea::placeholder {
    font-weight: 400;
    color: var(--blank-hint);
    opacity: 1;
}

.letter-paper {
    position: relative;
    display: grid;
    min-height: calc(var(--rule) * 3 + 2px);
    margin-top: 6px;
}

.letter-paper::after {
    content: attr(data-value) " ";
    grid-area: 1 / 1;
    max-height: calc(var(--rule) * 10);
    padding: 0 8px;
    overflow: hidden;
    font-weight: 600;
    line-height: var(--rule);
    white-space: pre-wrap;
    overflow-wrap: break-word;
    visibility: hidden;
    pointer-events: none;
}

.letter textarea {
    grid-area: 1 / 1;
    max-height: calc(var(--rule) * 10);
    line-height: var(--rule);
    background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--rule) - 1px), var(--ruled) 0 var(--rule));
    background-attachment: local;
    resize: none;
    scrollbar-width: thin;
}

.letter-error {
    flex: 1 0 100%;
    margin: 2px 0 6px;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    color: var(--accent-ink);
}

.letter-error:empty {
    margin: 0;
    padding: 0;
}

.letter-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.letter-bye {
    margin: 4px 0 0;
    color: var(--body);
}

.letter-sign {
    font-family: var(--font-name);
    font-weight: 900;
    font-size: 18px;
    color: var(--fg);
}

.letter-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.letter-guard.is-open {
    margin-top: 14px;
}

.letter-send {
    --icon-busy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 3a9 9 0 1 1-9 9'/%3E%3C/svg%3E");
    justify-self: stretch;
    height: 52px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    padding: 0 24px;
    border: 0;
    border-radius: 8px;
    background: var(--accent);
    color: #FFFFFF;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    cursor: pointer;
    transition: background .2s, opacity .2s;
}

.letter-send:hover {
    background: color-mix(in srgb, var(--accent) 86%, #000000);
}

.letter-send i {
    flex: none;
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: var(--icon-arrow) center / contain no-repeat;
    mask: var(--icon-arrow) center / contain no-repeat;
    transition: translate .2s;
}

.letter-send:hover i {
    translate: 4px 0;
}

.letter-send-busy {
    display: none;
}

.letter-send[aria-busy="true"] {
    pointer-events: none;
    opacity: 0.85;
}

.letter-send[aria-busy="true"] .letter-send-text {
    display: none;
}

.letter-send[aria-busy="true"] .letter-send-busy {
    display: inline;
}

.letter-send[aria-busy="true"] i {
    -webkit-mask-image: var(--icon-busy);
    mask-image: var(--icon-busy);
    animation: letter-spin .8s linear infinite;
}

.letter-status {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
    color: var(--accent-ink);
}

.letter-status:not(:empty) {
    margin-top: 10px;
}

.envelope,
.envelope-flap {
    position: absolute;
    top: 50%;
    left: min(50%, 320px);
    width: 240px;
    pointer-events: none;
    visibility: hidden;
}

.envelope {
    z-index: 3;
    overflow: visible;
}

.envelope-flap {
    z-index: 1;
    height: 160px;
}

.envelope-flap i {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 98px;
    background: var(--accent);
    clip-path: path("M12 1.25 H228 A10.75 10.75 0 0 1 238.75 12 L120 96 L1.25 12 A10.75 10.75 0 0 1 12 1.25 Z");
}

.envelope-body {
    fill: var(--paper);
    stroke: var(--line);
    stroke-width: 1.5;
}

.envelope-fold {
    fill: none;
    stroke: var(--line);
    stroke-width: 1.5;
}

.letter-sent {
    position: absolute;
    inset: 0;
    display: grid;
    gap: 10px;
    align-content: center;
    justify-items: center;
    text-align: center;
}

.letter-sent[hidden] {
    display: none;
}

.letter-sent:focus {
    outline: none;
}

.letter-sent-title {
    margin: 0;
    font-family: var(--font-name);
    font-weight: 900;
    font-size: 26px;
    line-height: 32px;
    letter-spacing: -0.02em;
}

.letter-sent-text {
    margin: 0;
    color: var(--body);
}

.letter-again {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--accent-ink);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    cursor: pointer;
}

@keyframes letter-spin {
    to {
        rotate: 360deg;
    }
}

@media (max-width: 599px) {
    .letter {
        --rule: 36px;
    }

    .letter-line label {
        flex: 0 0 100%;
    }
}

@media (min-width: 1200px) {
    .contact {
        display: grid;
        align-content: center;
        padding-bottom: var(--dock-space);
    }

    .contact-stage {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: center;
        column-gap: 72px;
    }

    .contact-lead {
        font-size: 19px;
        line-height: 31px;
    }

    .letter {
        max-width: 640px;
        padding: 30px 40px 30px 76px;
        font-size: 17px;
        rotate: -1deg;
    }

    .letter::before {
        left: 54px;
    }

    .letter-hi {
        font-size: 26px;
    }

    .letter-send {
        justify-self: start;
        height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .letter-blank,
    .letter-paper,
    .letter-send,
    .letter-send i {
        transition: none;
    }

    .letter-send[aria-busy="true"] i {
        animation: none;
    }
}