/* The public pages: the home page (/about, and / while signed out), /signin and /invite.
   They share the banner, the type and the cards, so the rules are global rather than scoped
   to one component; every selector is under an about-* class.

   The desk locks the document. This page is taller than the window, so it scrolls itself. */
.about-page {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    background-color: var(--paper);
    color: var(--text-primary);
    --about-paper-dot: color-mix(in srgb, var(--rule-line) 30%, transparent);
}

/* Fixed paper surface: light dot grid + very soft grain (stays still while the page scrolls). */
.about-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(
            circle at 50% 50%,
            var(--about-paper-dot) 0.45px,
            transparent 0.55px
        ),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
    background-size: 24px 24px, 160px 160px;
    background-position: 0 0, 0 0;
    opacity: 0.92;
    mix-blend-mode: multiply;
}

.about-letter.about-page::before {
    background-size: var(--about-paper-pitch, 24px) var(--about-paper-pitch, 24px), 160px 160px;
    background-position: 0 var(--about-paper-y, 0), 0 0;
}

.about-page > .about-banner,
.about-page > .about-main {
    position: relative;
    z-index: 2;
}

/* index.html + Authorizing: yellow band and desk grain only until the letter mounts. */
.app-boot-shell {
    min-height: 100dvh;
    /* Before the pen measures them (qs-haiku.js), the card's unwrapped lines run past a phone's
       width: the boot page never scrolls sideways for them. */
    overflow-x: hidden;
}

/* Signed-in writer heading to the desk: hide the public boot shell (index.html sets the class). */
.qs-signed-in .app-boot-shell {
    visibility: hidden;
}

/* Journal cover: QS left, wordmark centred, sign-in right on one row. */
.about-banner {
    background: var(--eco-yellow);
    color: var(--eco-yellow-type);
    border-bottom: 1px solid var(--eco-yellow-border);
    padding: 40px 0 44px;
}

.about-banner-inner {
    width: min(920px, 100%);
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.about-banner-top {
    display: grid;
    grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr);
    align-items: center;
    gap: 0.75rem 1rem;
    min-height: 48px;
    padding: 0 0 2px;
}

a.about-banner-top.about-banner-top-link {
    text-decoration: none;
    color: inherit;
    border-radius: 2px;
}

a.about-banner-top.about-banner-top-link:focus {
    outline: none;
}

a.about-banner-top.about-banner-top-link:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
}

@media (hover: hover) {
    a.about-banner-top.about-banner-top-link:hover .about-banner-mark {
        transform: rotate(-1.5deg) translateY(-1px);
        color: color-mix(in srgb, var(--ink) 88%, black);
    }

    a.about-banner-top.about-banner-top-link:hover .about-banner-title {
        color: color-mix(in srgb, var(--eco-yellow-type) 88%, var(--ink));
    }
}

a.about-banner-top.about-banner-top-link .about-banner-mark {
    transition: transform 200ms ease, color 200ms ease;
    transform-origin: 50% 55%;
}

a.about-banner-lockup-link {
    grid-column: 1 / 3;
    display: grid;
    grid-template-columns: minmax(44px, 1fr) auto;
    align-items: center;
    gap: 0.75rem 1rem;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    border-radius: 2px;
}

a.about-banner-lockup-link:focus {
    outline: none;
}

a.about-banner-lockup-link:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
}

a.about-banner-lockup-link .about-banner-title {
    grid-column: auto;
    justify-self: start;
}

a.about-banner-lockup-link .about-banner-mark {
    transition: transform 200ms ease, color 200ms ease;
    transform-origin: 50% 55%;
}

@media (hover: hover) {
    a.about-banner-lockup-link:hover .about-banner-mark {
        transform: rotate(-1.5deg) translateY(-1px);
        color: color-mix(in srgb, var(--ink) 88%, black);
    }

    a.about-banner-lockup-link:hover .about-banner-title {
        color: color-mix(in srgb, var(--eco-yellow-type) 88%, var(--ink));
    }
}

.about-banner-mark {
    justify-self: start;
    width: 44px;
    height: 44px;
    color: var(--ink);
}

.about-banner-title {
    grid-column: 2;
    margin: 0;
    padding: 0;
    font-family: var(--serif);
    font-size: clamp(22px, 3.6vw, 28px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.36em;
    text-indent: 0.36em;
    text-transform: uppercase;
    text-align: center;
    color: var(--eco-yellow-type);
}

.about-banner-sign {
    grid-column: 3;
    justify-self: end;
}

.about-banner-sign-spacer {
    grid-column: 3;
    justify-self: end;
    width: 44px;
    height: 1px;
}

.about-sub {
    align-self: center;
    margin: 16px 0 0;
    padding: calc(14px + var(--ink-bleed)) var(--ink-bleed) var(--ink-bleed);
    max-width: 28em;
    text-align: center;
    font-family: var(--script);
    font-size: 21px;
    line-height: 1.6;
    position: relative;
    overflow: visible;
}
/* Written in by the pen (qs-tagline.js): the text stays for layout and screen readers. */
.about-sub.is-inked { color: transparent; }

/* Words the pen will write (tagline, hero haiku, band headings) wait unseen rather than show
   in print for a moment and then swap to ink. The boot copy in index.html is replaced before
   the ink comes, so it simply waits; on the live page, if the ink never lands, the printed
   text shows after a beat. Text-fill only, so the rules' ::before marks and colours stay. */
.about-sub:not(.is-inked),
.about-hero-haiku-ink:not(.has-ink) .j-line,
.about-band-heading-ink:not(.has-ink) .j-line,
.about-signature:not(.has-ink) .j-line,
.about-pen-title-ink:not(.has-ink) .j-line {
    -webkit-text-fill-color: transparent;
    animation: qs-ink-late 0.35s ease 0.85s forwards;
}
/* Landing: never flash printed type — ink or nothing until the letter fades in. */
.about-landing-page .about-sub:not(.is-inked),
.about-landing-page .about-hero-haiku-ink:not(.has-ink) .j-line,
.about-landing-page .about-band-heading-ink:not(.has-ink) .j-line,
.about-landing-page .about-signature:not(.has-ink) .j-line {
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: none;
}
@keyframes qs-ink-late { to { -webkit-text-fill-color: currentcolor; } }
/* Softer than the card, which is the page's hero. */
.about-sub-ink {
    opacity: 0.8;
    position: absolute;
    top: calc(-1 * var(--ink-bleed));
    left: calc(-1 * var(--ink-bleed));
    right: calc(-1 * var(--ink-bleed));
    bottom: calc(-1 * var(--ink-bleed));
    width: calc(100% + 2 * var(--ink-bleed));
    height: calc(100% + 2 * var(--ink-bleed));
    pointer-events: none;
}
.about-sub::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 36px;
    height: 1px;
    transform: translateX(-50%);
    background: var(--eco-yellow-type);
    opacity: 0.55;
}

.about-sign {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px;
    font-family: var(--ui);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink);
    text-decoration: none;
}
.about-sign:hover { text-decoration: underline; text-underline-offset: 3px; }
.about-sign:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

.about-main {
    width: min(920px, 100%);
    margin: 0 auto;
    padding: 48px 32px 88px;
}

.about-main.is-quiet {
    width: min(36rem, 100%);
    padding-top: 52px;
    padding-bottom: 72px;
}

.about-lede {
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    line-height: 1.4;
    margin: 0 0 32px;
    max-width: 28em;
}

.about-return { margin: 4px 0 0; }
.about-return .btn {
    min-height: 44px;
    padding: 10px 18px;
}
.about-page a.btn { text-decoration: none; }

.about-card {
    margin: 0;
    padding: 20px 20px 18px;
    scroll-margin-top: 20px;
}
.about-card-sign { border-top: 3px solid var(--ink); }
.about-card-wait { border-top: 3px solid var(--wax); }

.about-card .eyebrow { margin: 0 0 8px; }
.about-card h2 {
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 8px;
    text-wrap: balance;
}
.about-card p {
    margin: 0 0 14px;
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.45;
}
.about-card form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.about-card .field {
    background: var(--paper);
    min-height: 44px;
}
.about-card textarea.field { min-height: 88px; }
.about-card .btn {
    margin-top: 8px;
    width: 100%;
    min-height: 44px;
    padding: 11px 16px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}
/* Empty fields keep the button from sending, but the ink and wax should still read as themselves. */
.about-card .btn:disabled { opacity: 1; }
.about-card strong { overflow-wrap: anywhere; }

.about-page .ink-button {
    background: var(--ink);
    color: var(--paper);
    border-color: transparent;
}
.about-page .ink-button:hover:not(:disabled) { background: var(--ink-soft); }
.about-page .ink-button:active:not(:disabled) { background: var(--ink); }

/* The way back from /signin and /invite. */
.about-back {
    margin: 22px 0 0;
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.45;
}
.about-back a { color: var(--ink); text-underline-offset: 3px; }
.about-back a:hover { color: var(--wax); }

.about-label {
    font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
    margin-top: 6px;
}

.about-note { resize: vertical; }

.about-card .about-or {
    margin: 16px 0 2px;
    text-align: center;
    font-family: var(--ui);
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.about-error,
.about-expired {
    color: var(--wax);
    font-style: italic;
}

@media (max-width: 640px) {
    .about-banner { padding-bottom: 32px; }
    .about-banner-inner,
    .about-main { padding-left: 20px; padding-right: 20px; }
    .about-main { padding-top: 32px; padding-bottom: 64px; }
    .about-main.is-quiet { padding-top: 36px; }
    .about-banner-mark { width: 44px; height: 44px; }
    .about-banner-title {
        font-size: 16px;
        letter-spacing: 0.18em;
        text-indent: 0.18em;
    }

    .about-banner-top {
        grid-template-columns: 44px 1fr auto;
        gap: 0.5rem 0.65rem;
    }

    .about-banner-sign .about-sign,
    .about-banner-sign {
        font-size: 12px;
    }
    .about-sub { font-size: 18px; }
    .about-lede { font-size: 19px; margin-bottom: 24px; }
    .about-card h2 { font-size: 24px; }
}

/* The public pages' pen (the hero haiku, the band headings, a page's inked title): Playwrite NZ
   in Diamine Earl Grey; the signature is the same ink in Pinyon Script. */
.public-pen { --hand: 'Playwrite NZ', cursive; --journal-ink: #756E82; }
.public-pen-signature { --hand: 'Pinyon Script', cursive; }

/* Logged-out home: one measure (920px), magazine spread — masthead, hero, bands, close. */
.about-letter {
    --about-pen-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.3 C 40 2.6 90 3.6 140 3.1 S 250 2.5 300 3.2 S 370 3.4 399 2.9 L 399 3.3 C 370 3.9 330 3.7 300 3.9 S 200 3.3 140 3.8 S 50 3.5 1 3.6 Z' fill='%23756E82' fill-opacity='0.85'/%3E%3C/svg%3E");
    --sheet-pad-top: 52px;
    --about-motion: 200ms ease;
    --about-close-gap: 5rem;
    /* A shade darker than the app's secondary text: on the dotted paper the usual tone fell
       just under 4.5:1. */
    --text-secondary: #5E584B;
    /* Body copy: a warm near-black (10.6:1 on the sheet). Emphasis is weight, not colour. */
    --about-body: #3F3B33;
    --about-paper-dot: color-mix(in srgb, var(--rule-line) 26%, transparent);
}

/* A sheet on a desk. The page under the banner is a desk, and the copy sits on a sheet of paper
   lying on it, with the desk showing round it. The paper's texture and Qs watermark are on the
   sheet, so they scroll with it as paper would; the desk keeps only a coarser grain. A phone
   gets the same sheet with a narrow margin of desk (below). */
@media all {
    .about-letter.about-page {
        background-color: var(--desk);
    }

    .about-letter.about-page::before {
        background-image: var(--desk-grain);
        background-size: 220px 220px;
        background-position: 0 0;
    }

    /* A4 (210 × 297): the sheet grows past it only if the copy ever needs more, and the
       footer sits at the foot of the page, as a page footer would. */
    .about-letter.about-page .about-main {
        display: flex;
        flex-direction: column;
        aspect-ratio: 210 / 297;
        width: min(760px, calc(100% - 64px));
        /* The same desk above and below, so a window that holds the sheet doesn't scroll. */
        margin: 40px auto;
        /* The footer line runs close to the sheet's foot, as a page's footer would. */
        padding: var(--sheet-pad-top) 40px 22px;
        border-radius: 0;
        /* Whiter and creamier than the app's paper, so the sheet lifts off the desk. */
        background-color: var(--letter-paper);
        background-image: var(--letter-light);
        /* A lighter rim where the light catches the cut edge, a hairline, the tight shadow of a
           sheet lying flat, and a softer one under the bottom-right corner, lifted a little. */
        box-shadow: var(--letter-shadow);
    }

    .about-letter .about-main::before,
    .about-letter .about-main::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        pointer-events: none;
        mix-blend-mode: multiply;
    }

    /* The sheet's make: the close laid lines and wider chain lines of good writing paper, a
       faint large mottle (paper is never one flat tone) and a fine grain. */
    .about-letter .about-main::before {
        background-image: var(--letter-make);
        background-size: var(--letter-make-size);
        opacity: 0.7;
    }

    /* The Qs as a true watermark: thinner paper, so lighter than the sheet, not printed on it. */
    .about-letter .about-main::after {
        background-color: #fff;
        -webkit-mask: var(--letter-watermark) center top / 480px 360px repeat;
        mask: var(--letter-watermark) center top / 480px 360px repeat;
        mix-blend-mode: normal;
        opacity: 0.5;
        filter: blur(0.5px);
    }

    .about-letter .about-main > * {
        position: relative;
        z-index: 1;
    }

    .about-letter .about-main > .about-landing {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
    }

    .about-letter .about-main .about-landing-close {
        margin-top: auto;
        padding-top: 1rem;
    }
}

.about-letter .about-banner {
    padding: 16px 0 18px;
}

.about-letter .about-banner-top {
    min-height: 38px;
}

.about-letter .about-banner-title {
    font-size: clamp(20px, 3.35vw, 26px);
}

.about-letter .about-banner-mark {
    width: 40px;
    height: 40px;
    transition: transform var(--about-motion), color var(--about-motion), filter var(--about-motion);
    transform-origin: 50% 55%;
}

@media (hover: hover) {
    .about-letter .about-banner-mark:hover {
        transform: rotate(-1.5deg) translateY(-1px);
        color: color-mix(in srgb, var(--ink) 88%, black);
    }
}

.about-letter .about-sign:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
    border-radius: 2px;
}

.about-letter .about-sub {
    margin-top: 8px;
    padding-top: 12px;
    font-size: 17px;
    line-height: 1.45;
}

.about-letter .about-sub::before {
    width: 28px;
    opacity: 0.45;
    top: 2px;
}

.about-letter .about-main {
    width: min(920px, 100%);
    margin: 0 auto;
    padding: 36px 32px 56px;
}

.about-landing {
    font-family: var(--serif);
    color: var(--text-primary);
}


.about-hero {
    display: grid;
    /* minmax(0, …) so the card's unwrapped lines can't widen the column past the screen. */
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem 0;
    align-items: start;
}

.about-hero-title-wrap {
    position: relative;
    align-self: start;
    padding: 0.35rem 0.5rem 0.35rem 0;
    margin: -0.35rem 0 0 -0.15rem;
    border-radius: 2px;
}

.about-hero-title-wrap::before {
    content: "";
    position: absolute;
    inset: -0.35rem -0.5rem -0.35rem -0.25rem;
    z-index: -1;
    opacity: 0.14;
    border-radius: 1px;
    background-color: var(--sheet);
    background-image:
        linear-gradient(var(--rule-line) 1px, transparent 1px);
    background-size: 100% 22px;
    transition: opacity var(--about-motion);
}

/* The card is clipped to the top edge of the sheet, its own top just under that edge, and hangs a
   little off true from the clip: clockwise, right side down, as a card held at one corner
   would hang. The ink host lifts the tilt ([data-ink-tilt] .is-square) while it measures.

   The gem clip is slid over the sheet's edge, U-bend up: the edge sits in the bend, which shows
   on the desk above it. The inner tongue and the bend are in front (::after, with a shadow), the
   tongue lying on the card; the outer loop is behind the sheet (::before, cut off at the edge). */
@media all {
    .about-hero-title-wrap:has(.about-hero-haiku) {
        --clip-above: 12px;       /* clip top to the sheet's edge, which sits in the U-bend */
        --card-below: 10px;       /* the sheet's edge to the card's top */
        margin-top: calc(var(--card-below) - var(--sheet-pad-top) - 0.35rem);
        transform: rotate(0.8deg);
        transform-origin: 38px 0;
    }

    .about-hero-title-wrap.is-square {
        transform: none;
    }

    .about-hero-title-wrap:has(.about-hero-haiku)::before,
    .about-hero-title-wrap:has(.about-hero-haiku)::after {
        content: "";
        position: absolute;
        inset: auto;
        top: calc(0.35rem - var(--card-below) - var(--clip-above));
        left: 24px;
        width: 29px;
        height: 78px;
        background: center / contain no-repeat;
        pointer-events: none;
        opacity: 1;
        border-radius: 0;
    }

    .about-hero-title-wrap:has(.about-hero-haiku)::before {
        z-index: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 80'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23858b93'/%3E%3Cstop offset='.45' stop-color='%23e3e6ea'/%3E%3Cstop offset='1' stop-color='%237d838b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 14V68a11 11 0 0 0 22 0V30' fill='none' stroke='url(%23g)' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
        clip-path: inset(0 0 calc(100% - var(--clip-above)) 0);
    }

    .about-hero-title-wrap:has(.about-hero-haiku)::after {
        z-index: 3;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 80'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23858b93'/%3E%3Cstop offset='.45' stop-color='%23e3e6ea'/%3E%3Cstop offset='1' stop-color='%237d838b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M10 22V62a6 6 0 0 0 12 0V14a9 9 0 0 0-18 0' fill='none' stroke='url(%23g)' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
        filter: drop-shadow(1px 2px 1.2px rgba(40, 30, 20, 0.32));
    }

    .about-hero-title-wrap:has(.about-hero-haiku) > .about-hero-haiku-ink {
        z-index: 1;
    }
}

/* First visit to the home page this session: the index card drops onto the sheet and the gem
   clip catches it. The clip stays at the edge; only the card moves. */
.about-landing-page {
    --landing-drop: min(52vh, 380px);
    --landing-enter-duration: 1.75s;
    --landing-letter-reveal: 0.42s;
}

/* Only the paper sheet waits for ink; the yellow band stays solid (matches the boot shell). */
.about-landing-page.is-letter-preparing > .about-main,
.about-landing-page:not(.is-letter-revealed):not(.is-letter-revealing) > .about-main {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.about-landing-page.is-letter-revealing > .about-main {
    visibility: visible;
    animation: landing-letter-reveal var(--landing-letter-reveal) ease-out forwards;
    pointer-events: auto;
}

.about-landing-page.is-letter-revealed > .about-main {
    opacity: 1;
    visibility: visible;
}

@keyframes landing-letter-reveal {
    from { opacity: 0; }
    to { opacity: 1; }
}

.about-landing-page:not(.has-card-entered):not(.is-card-entrance)
.about-hero-title-wrap:has(.about-hero-haiku) > .about-hero-haiku-ink {
    transform: translate3d(0, calc(-1 * var(--landing-drop)), 0);
    visibility: hidden;
}

/* Off-screen but measurable while the pen lays ink down before the drop runs. */
.about-landing-page.is-card-prepped:not(.is-card-entrance):not(.has-card-entered)
.about-hero-title-wrap:has(.about-hero-haiku) > .about-hero-haiku-ink {
    visibility: visible;
    opacity: 0;
    pointer-events: none;
}

.about-landing-page.is-card-entrance
.about-hero-title-wrap:has(.about-hero-haiku) > .about-hero-haiku-ink {
    visibility: visible;
    opacity: 1;
    animation: landing-card-attach var(--landing-enter-duration)
        cubic-bezier(0.22, 1, 0.36, 1) both;
}

.about-landing-page.is-card-entrance
.about-hero-title-wrap:has(.about-hero-haiku) > .about-hero-haiku-ink::before {
    animation: landing-card-shadow var(--landing-enter-duration)
        cubic-bezier(0.33, 1, 0.45, 1) both;
}

.about-landing-page.is-card-entrance
.about-hero-title-wrap:has(.about-hero-haiku)::before {
    animation: landing-clip-back var(--landing-enter-duration)
        cubic-bezier(0.33, 1, 0.45, 1) both;
}

.about-landing-page.is-card-entrance
.about-hero-title-wrap:has(.about-hero-haiku)::after {
    animation: landing-clip-front var(--landing-enter-duration)
        cubic-bezier(0.33, 1, 0.45, 1) both;
}

@keyframes landing-card-attach {
    0% {
        transform: translate3d(0, calc(-1 * var(--landing-drop)), 0) rotate(-1.35deg);
    }
    62% {
        transform: translate3d(0, 6px, 0) rotate(0.2deg);
    }
    80% {
        transform: translate3d(0, -2px, 0) rotate(-0.08deg);
    }
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}

@keyframes landing-card-shadow {
    0% {
        box-shadow:
            0 2px 6px rgba(60, 48, 30, 0.05),
            0 18px 36px -12px rgba(60, 48, 30, 0.08);
    }
    68% {
        box-shadow:
            0 2px 4px rgba(60, 48, 30, 0.14),
            0 16px 32px -8px rgba(60, 48, 30, 0.32);
    }
    100% {
        box-shadow:
            0 1px 2px rgba(60, 48, 30, 0.10),
            0 6px 18px -8px rgba(60, 48, 30, 0.22);
    }
}

@keyframes landing-clip-back {
    0%, 14% {
        opacity: 0.25;
        transform: translate3d(0, -5px, 0);
    }
    26%, 100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes landing-clip-front {
    0%, 50% {
        opacity: 0;
        transform: translate3d(0, -10px, 0) scale(0.9);
    }
    66% {
        opacity: 1;
        transform: translate3d(0, 1px, 0) scale(1.025);
    }
    82% {
        transform: translate3d(0, -0.5px, 0) scale(0.995);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}


/* The hero is an index card: the title on its red head rule, the haiku on the blue rules below,
   and one empty ruled line under it. The rules are on the ink host, under the canvas, at the
   hand's baseline (descenders cross them); qs-haiku.js sets --about-rule-at and -pitch from the
   first line. The card's padding is the margin either side, the rules running through it. */
.about-hero-haiku-ink {
    --card-face: #fffdf8;
    --card-head-rule: rgba(205, 92, 92, 0.6);
    --card-rule: rgba(112, 156, 204, 0.38);
    --card-rule-at: var(--about-rule-at, calc(12px + 1em * 0.78 + 2px));
    --card-pitch: var(--about-rule-pitch, calc(1em * 1.28));
}

.about-hero-haiku-ink::before,
.about-hero-haiku-ink::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

/* The card itself, with its red head rule. The card hangs off true, and a rule with hard stops
   is rasterised square and then turned, which steps it: so each rule keeps its 1px weight and
   place but ramps in and out over half a pixel either side, and turns smoothly. */
.about-hero-haiku-ink::before {
    inset: 0;
    border-radius: 2px;
    background-color: var(--card-face);
    background-image: linear-gradient(
        to bottom,
        transparent calc(var(--card-rule-at) - 1.3px),
        var(--card-head-rule) calc(var(--card-rule-at) - 0.9px),
        var(--card-head-rule) calc(var(--card-rule-at) - 0.1px),
        transparent calc(var(--card-rule-at) + 0.3px)
    );
    box-shadow:
        0 1px 2px rgba(60, 48, 30, 0.10),
        0 6px 18px -8px rgba(60, 48, 30, 0.22);
    transition: box-shadow var(--about-motion), transform var(--about-motion);
}

/* The blue rules, one pitch apart, starting under the head rule. */
.about-hero-haiku-ink::after {
    inset: var(--card-rule-at) 0 0 0;
    background-image: linear-gradient(
        to bottom,
        transparent calc(var(--card-pitch) - 1.3px),
        var(--card-rule) calc(var(--card-pitch) - 0.9px),
        var(--card-rule) calc(var(--card-pitch) - 0.1px),
        transparent calc(var(--card-pitch) + 0.3px)
    );
    background-size: 100% var(--card-pitch);
}

.about-hero-haiku-ink > canvas.j-ink {
    z-index: 1;
}

/* On the card the verse block spans it, so the title centres on the card, not the longest line. */
.about-hero-haiku-ink .about-hero-haiku {
    /* Static, so the title's own canvas (in its .j-entry) lies over the card as the card's does. */
    position: static;
    z-index: auto;
    width: auto;
    padding: 0;
    margin: 0;
}

.about-hero-haiku-ink .about-hero-haiku .j-line.about-card-heading {
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
}

/* One empty ruled line between the title and the haiku: a whole pitch, so the verse stays on its rules. */
.about-card-verse {
    margin: var(--card-pitch) 0 0;
}

.about-hero-title {
    margin: 0;
    max-width: 7em;
    font-size: clamp(2.28rem, 4.95vw, 3.2rem);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.018em;
    color: var(--ink);
    text-wrap: balance;
    text-shadow:
        0 0.35px 0 color-mix(in srgb, var(--ink) 14%, transparent),
        0.25px 0.5px 0 color-mix(in srgb, var(--wax) 6%, transparent);
    transition: color var(--about-motion);
}

/* ProceduralInk host for the hero haiku (Earl Grey, qs-haiku.js). */
.about-hero-haiku-ink {
    position: relative;
    display: block;
    /* The card's margins; below the haiku, one empty ruled line and a little paper under it. */
    padding: 12px 18px calc(var(--card-pitch) + 10px);
    margin: 0;
    border: none;
    background: transparent;
    overflow: visible;
    color: var(--journal-ink, #756e82);
    isolation: isolate;
    /* Same as .about-hero-haiku so rule fallbacks (1em) match before qs-haiku.js measures. */
    font-size: clamp(1.72rem, 3.85vw, 2.35rem);
    line-height: 1.28;
}

.about-hero-haiku-ink.has-ink .about-hero-haiku .j-line {
    color: transparent;
}

.about-hero-title.about-hero-haiku {
    max-width: none;
    text-wrap: wrap;
}

.about-hero-haiku .j-line {
    display: block;
    white-space: nowrap;
}

.about-hero-haiku {
    position: relative;
    z-index: 2;
    width: max-content;
    max-width: 100%;
    padding: 0 0.4em 0 0.12em;
    margin: 0 -0.4em 0 -0.12em;
    border-radius: 1px;
    font-size: clamp(1.72rem, 3.85vw, 2.35rem);
    font-weight: 500;
    line-height: 1.28;
    letter-spacing: 0.01em;
    font-style: italic;
}

.about-hero-haiku-ink .about-hero-haiku {
    font-style: normal;
    text-shadow: none;
}

.about-hero-haiku-ink .about-hero-haiku .j-line {
    display: block;
    font-family: var(--hand, "Playwrite NZ"), cursive;
    font-size: calc(1em * var(--setup-fit, 1));
    font-weight: 400;
    line-height: inherit;
    letter-spacing: inherit;
    margin: 0;
    white-space: nowrap;
    overflow-wrap: normal;
}

.about-hero-copy {
    font-size: 18px;
    line-height: 1.58;
    color: var(--about-body);
    max-width: 38ch;
}

.about-hero-copy p {
    margin: 0 0 1.1rem;
}

.about-hero-copy p:last-of-type {
    margin-bottom: 0;
}

.about-band {
    display: grid;
    gap: 2.25rem 2.5rem;
}

.about-band-pairs {
    grid-template-columns: 1fr;
}

.about-band-cell {
    position: relative;
}

.about-band-heading {
    margin: 0 0 0.65rem;
    font-family: var(--ui);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--ink);
}

.about-band-heading-ink {
    position: relative;
    display: block;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    overflow: visible;
    color: var(--journal-ink, #756e82);
}

.about-band-heading-ink.has-ink .j-line {
    color: transparent;
}

/* The rule under each heading: a fine pen stroke in the heading's ink, wavering a little and
   tapered at both ends, across the section, a hair under the heading's baseline so the
   descenders cross it. The baseline sits 3.6px above the foot of the 18px / 1.2 line, and the stroke runs
   through the middle of its 6px strip. Drawn, not inked: the ink library only writes letters,
   and a row of them came out dashed. */
.about-band-heading::after {
    content: "";
    display: block;
    height: 6px;
    margin: calc(-3.6px - 3px + 2px) 0 4.6px;   /* a hair below the baseline */
    background: var(--about-pen-rule) center / 100% 100% no-repeat;
}

.about-band-heading-ink .j-line {
    display: block;
    font-family: var(--hand, "Playwrite NZ"), cursive;
    /* At 13px the pen's strokes ran together; this is about the smallest it writes cleanly. */
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.2;
    /* Written a little in from the rule's start. A margin, not padding: the ink is placed from
       the line's box. */
    margin: 0 0 0 0.4rem;
    white-space: nowrap;
}


.about-band-cell p {
    margin: 0;
    font-size: 18px;
    line-height: 1.58;
    color: var(--about-body);
}

.about-band-lead {
    margin: 0.5rem 0 1.05rem !important;
    font-weight: 600;
}

.about-landing-close {
    margin-top: var(--about-close-gap);
    padding-top: 0;
    text-align: center;
    font-family: var(--serif);
    color: var(--text-secondary);
}

/* The foot of the page: one line in the body's serif, in two parts across the measure (what
   it isn't, then the way in), over a hairline. On a phone the two parts stack, centred. */
.about-close-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem 2rem;
    margin: 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--rule-line);
    font-size: 16px;
    line-height: 1.6;
    text-align: left;
}

@media (max-width: 720px) {
    .about-close-line {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

.about-close-line > span {
    text-wrap: balance;
}

.about-close-line a {
    flex: none;
    font-weight: 600;
    color: var(--about-body);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--about-motion);
}

.about-close-line a:focus-visible {
    color: var(--wax);
    outline: 2px solid var(--ink);
    outline-offset: 3px;
    border-radius: 2px;
}

@media (hover: hover) {
    .about-close-line a:hover {
        color: var(--wax);
    }
}

/* The way in, for a newcomer, without scrolling to the foot of the page. */
.about-hero-copy .about-hero-invite {
    margin-top: 1.4rem;
}

.about-invite-link {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    color: var(--about-body);
    text-decoration: none;
    background-image: linear-gradient(var(--wax), var(--wax));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1.5px;
    padding-bottom: 2px;
    transition: color var(--about-motion), background-size var(--about-motion);
}

.about-invite-link:focus-visible {
    color: var(--wax);
    background-size: 100% 1.5px;
    outline: 2px solid var(--ink);
    outline-offset: 4px;
    border-radius: 2px;
}

@media (hover: hover) {
    .about-invite-link:hover {
        color: var(--wax);
        background-size: 100% 1.5px;
    }
}

@media (min-width: 720px) {
    .about-hero {
        grid-template-columns: minmax(0, 21.5rem) minmax(0, 1fr);
        gap: 2rem 2.75rem;
    }

    /* The opening paragraph beside the card; "Each day…" and the invitation run across both
       columns under it. The copy's paragraphs join the hero's grid (display: contents). */
    .about-hero-copy {
        display: contents;
    }

    .about-hero-copy > p {
        margin: 0;
    }

    .about-hero-copy > p:first-child {
        grid-column: 2;
        grid-row: 1;
    }

    .about-hero-copy > p:not(:first-child) {
        grid-column: 1 / -1;
        max-width: none;
    }

    .about-hero-copy > p.about-hero-invite {
        margin-top: -0.75rem;
    }

    /* Two columns at most: Listen | Write, Notice | Keep it, then Give it away across both. */
    .about-band-pairs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2.75rem;
        align-items: start;
    }

    .about-band-cell {
        padding-right: 0.15rem;
    }

    .about-band-pairs .about-band-cell-emphasis {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .about-letter .about-main {
        padding: 28px 20px 40px;
    }

    .about-letter .about-banner {
        padding-bottom: 16px;
    }

    .about-letter .about-banner-inner {
        padding-left: 20px;
        padding-right: 20px;
    }

    .about-letter .about-banner-top {
        gap: 0.5rem 0.65rem;
    }

    .about-letter .about-banner-mark {
        width: 36px;
        height: 36px;
    }

    .about-letter .about-banner-sign.about-sign {
        font-size: 14px;
        letter-spacing: 0.06em;
    }

    .about-letter .about-banner-title {
        font-size: clamp(17px, 4.6vw, 22px);
        letter-spacing: 0.22em;
        text-indent: 0.22em;
    }

    .about-letter .about-sub {
        margin-top: 10px;
        padding-top: 14px;
    }


    .about-hero-copy {
        font-size: 17px;
        max-width: none;
    }

    .about-hero-title {
        font-size: clamp(2.05rem, 9vw, 2.65rem);
    }

    .about-hero-haiku-ink,
    .about-hero-haiku {
        font-size: clamp(1.55rem, 6.8vw, 2.05rem);
        line-height: 1.32;
    }

    .about-landing-close {
        margin-top: calc(var(--about-close-gap) * 0.85);
    }
}

@media (max-width: 480px) {
    .about-letter .about-banner-top {
        grid-template-columns: 36px 1fr auto;
        gap: 0.4rem 0.5rem;
    }

    .about-letter .about-banner-title {
        grid-column: 2;
        justify-self: start;
        text-align: left;
        letter-spacing: 0.14em;
        text-indent: 0;
        font-size: clamp(16px, 4.2vw, 19px);
        line-height: 1.15;
    }

    .about-letter .about-banner-mark {
        width: 32px;
        height: 32px;
    }

    .about-letter .about-banner-sign.about-sign {
        grid-column: 3;
        font-size: 13px;
        padding: 2px 0;
        white-space: nowrap;
    }

    a.about-banner-lockup-link {
        grid-column: 1 / 3;
        grid-template-columns: 32px 1fr;
        gap: 0.45rem 0.5rem;
    }

    a.about-banner-lockup-link .about-banner-title {
        font-size: clamp(16px, 4.2vw, 19px);
        letter-spacing: 0.14em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-letter {
        --about-motion: 0ms;
    }

    .about-letter .about-banner-mark:hover {
        transform: none;
    }

    .about-landing-page:not(.has-card-entered):not(.is-card-entrance)
    .about-hero-title-wrap:has(.about-hero-haiku) > .about-hero-haiku-ink {
        transform: none;
        visibility: visible;
    }

    .about-landing-page.is-card-entrance
    .about-hero-title-wrap:has(.about-hero-haiku) > .about-hero-haiku-ink,
    .about-landing-page.is-card-entrance
    .about-hero-title-wrap:has(.about-hero-haiku) > .about-hero-haiku-ink::before,
    .about-landing-page.is-card-entrance
    .about-hero-title-wrap:has(.about-hero-haiku)::before,
    .about-landing-page.is-card-entrance
    .about-hero-title-wrap:has(.about-hero-haiku)::after {
        animation: none;
    }

    .about-landing-page.is-letter-preparing > .about-main,
    .about-landing-page:not(.is-letter-revealed):not(.is-letter-revealing) > .about-main {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .about-landing-page.is-letter-revealing > .about-main {
        animation: none;
    }
}

/* The letter, typed: everything on the home page's sheet is set in Courier Prime, a typewriter
   face made for reading, while the card stays in the pen. Courier runs wide, so the sizes come
   down a step and the lines open up. */
.about-letter {
    --about-type: "Courier Prime", "Courier New", monospace;
}

.about-letter .about-landing,
.about-letter .about-landing-close {
    font-family: var(--about-type);
}

.about-letter .about-hero-copy,
.about-letter .about-band-cell p {
    font-size: 16.5px;
    line-height: 1.65;
}

.about-letter .about-band-lead {
    font-weight: 700;
}

.about-letter .about-invite-link {
    font-size: 15px;
    font-weight: 700;
}

.about-letter .about-close-line {
    font-size: 14px;
    justify-content: center;
    text-align: center;
}

.about-letter .about-close-line a {
    font-weight: 700;
}

.about-letter .about-close-line {
    border-top: 0;
    padding-top: 0;
}

/* ── The letter on a phone ──
   The same sheet on a narrow margin of desk, not A4 (it would be far too tall), with the card
   clipped to its top as on the desk. */
@media (max-width: 759px) {
    .about-letter {
        --sheet-pad-top: 34px;
    }

    .about-letter.about-page .about-main {
        width: calc(100% - 20px);
        margin: 18px auto 28px;
        padding: var(--sheet-pad-top) 18px 36px;
        aspect-ratio: auto;
    }
}

/* ── Letterhead ──
   On a wide screen the name is printed at the head of the sheet, top right where a letter's
   sender stands, and the banner keeps only the mark, the pen's tagline and the way in. On a
   phone the banner keeps its wordmark and the letterhead is there only for a screen reader. */
.about-letterhead {
    margin: 0;
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--eco-yellow-type);
}

@media (min-width: 760px) {
    .about-letter .about-banner-title {
        display: none;
    }

    /* One row: the mark, the pen's tagline in the middle where the wordmark stood, the way in. */
    .about-letter .about-banner {
        padding: 8px 0;
    }

    .about-letter .about-banner-inner {
        position: relative;
    }

    .about-letter .about-sub {
        position: absolute;
        top: 50%;
        left: 50%;
        width: max-content;
        max-width: calc(100% - 200px);
        margin: 0;
        padding: 0;
        transform: translate(-50%, -50%);
    }

    .about-letter .about-sub::before {
        content: none;
    }

    .about-letter .about-letterhead {
        position: absolute;
        top: 30px;
        right: 40px;
        z-index: 1;
    }

    /* The opening paragraph clears the letterhead above it. */
    .about-letter .about-hero-copy > p:first-child {
        margin-top: 2.6rem;
    }
}

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

/* "Sign in" typed, like the rest of the letter. */
.about-letter .about-sign {
    font-family: var(--about-type);
    font-weight: 700;
    letter-spacing: 0;
}

/* The way in, wherever it appears: typed, underlined, with its arrow. */
.about-letter .about-invite-link {
    font-family: var(--about-type);
    font-size: 15px;
    font-weight: 700;
    color: var(--about-body);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    background: none;
    padding-bottom: 0;
}

@media (hover: hover) {
    .about-letter .about-invite-link:hover {
        color: var(--wax);
    }
}

/* No word left alone on a paragraph's last line ("pen." under a ragged column). */
.about-letter .about-hero-copy p,
.about-letter .about-band-cell p {
    text-wrap: pretty;
}

/* ── The letter's close ──
   "Yours to try." and "Sincerely," typed, then the name signed in the card's Earl Grey ink in a
   pointed-pen roundhand (qs-haiku.js inks it). */
.about-signoff {
    margin-top: 2.25rem;
}

.about-signoff-line {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--about-body);
}

.about-signoff-line + .about-signoff-line {
    margin-top: 0.8rem;
}

.about-signature {
    position: relative;
    display: inline-block;
    margin-top: 0.4rem;
    color: var(--journal-ink, #756e82);
}

.about-signature .j-line {
    margin: 0;
    font-family: var(--hand, "Pinyon Script"), cursive;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
}

.about-signature.has-ink .j-line {
    color: transparent;
}

/* The signer's role, typed under the signature and close up to it. */
.about-signoff-line.about-signoff-role {
    margin-top: 0;
    font-size: 14px;
    color: var(--text-secondary);
}

/* The sections follow the hero after a little air; their pen-ruled headings mark the start. */
.about-letter .about-band {
    margin-top: 2.25rem;
}

/* ── The banner on a phone ──
   One slim row, as on the desk: the mark, the name (the letterhead is too wide to sit beside
   the clipped card here) and the way in. The pen's tagline is the desk's alone. */
@media (max-width: 759px) {
    .about-letter .about-banner {
        padding: 8px 0;
    }

    .about-letter .about-sub {
        display: none;
    }
}

/* ══ The other public pages: the same letter, on note paper ══
   /signin, /invite and a sent poem (/gift) share the home page's desk, band, paper, letterhead
   and typewriter. Their sheet is a short note rather than A4, the letterhead sits centred at its
   head, the title is written by the pen on a drawn rule, and the forms are typed onto the
   paper: labels typed, fields a ruled blank, buttons typed and boxed in ink. */
.about-letter .about-main {
    font-family: var(--about-type);
    color: var(--about-body);
}

.about-letter.about-page .about-main.is-quiet {
    aspect-ratio: auto;
    padding-bottom: 44px;
    width: min(36rem, calc(100% - 64px));
    min-height: 0;
}

/* A note's letterhead is a printed yellow band across its head, the name knocked out of it so
   the paper shows through, uninked. On a phone it stands in for the banner's wordmark. */
.about-letter .about-main.is-quiet .about-letterhead {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    margin: calc(-1 * var(--sheet-pad-top)) -40px 2.25rem;
    padding: 14px 0 13px;
    background: var(--eco-yellow);
    color: var(--letter-paper);
    text-align: center;
}

@media (max-width: 759px) {
    .about-letter .about-main.is-quiet .about-letterhead {
        margin-left: -18px;
        margin-right: -18px;
    }

    .about-letter:has(.about-main.is-quiet) .about-banner-title {
        visibility: hidden;
    }
}

@media (max-width: 759px) {
    .about-letter.about-page .about-main.is-quiet {
        width: calc(100% - 20px);
    }
}

/* The title in the pen, on a rule the descenders cross (as the home page's headings). */
.about-pen-title {
    margin: 0 0 1rem;
}

.about-pen-title-ink {
    position: relative;
    display: block;
    color: var(--journal-ink, #756e82);
}

.about-pen-title-ink .j-line {
    display: block;
    margin: 0 0 0 0.4rem;
    font-family: var(--hand, "Playwrite NZ"), cursive;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.25;
    /* A long title wraps; the ink host writes it a row at a time. */
    white-space: normal;
    text-wrap: balance;
}

.about-pen-title-ink.has-ink .j-line {
    color: transparent;
}

.about-pen-title::after {
    content: "";
    display: block;
    height: 6px;
    margin: -8px 0 0;
    background: var(--about-pen-rule) center / 100% 100% no-repeat;
}

.about-letter .about-lede {
    font-family: var(--about-type);
    font-style: normal;
    font-size: 16.5px;
    line-height: 1.65;
    max-width: none;
    margin: 0 0 1.75rem;
}

.about-letter .about-back {
    font-family: var(--about-type);
    font-size: 15px;
}

.about-letter .about-back a {
    font-weight: 700;
    color: var(--about-body);
}

/* The forms, typed onto the paper. */
.about-letter .about-card {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.about-letter .about-card p {
    font-family: var(--about-type);
    font-size: 15.5px;
    line-height: 1.65;
}

.about-letter .about-label {
    margin-top: 0.9rem;
    font-family: var(--about-type);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--about-body);
}

.about-letter .about-card .field {
    min-height: 38px;
    padding: 6px 2px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--about-body) 55%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-family: var(--about-type);
    font-size: 16px;
    color: var(--about-body);
}

.about-letter .about-card textarea.field {
    min-height: 76px;
    border: 1px solid color-mix(in srgb, var(--about-body) 35%, transparent);
    padding: 6px 8px;
}

.about-letter .about-card .field:focus {
    outline: none;
    border-bottom-color: var(--about-body);
    background: rgba(255, 255, 255, 0.45);
}

.about-letter .about-card .btn,
.about-letter .about-main .btn {
    min-height: 44px;
    border: 1.5px solid var(--about-body);
    border-radius: 0;
    background: transparent;
    color: var(--about-body);
    font-family: var(--about-type);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: none;
}

.about-letter .about-card .btn {
    margin-top: 1.25rem;
}

@media (hover: hover) {
    .about-letter .about-card .btn:hover:not(:disabled),
    .about-letter .about-main .btn:hover:not(:disabled) {
        background: var(--about-body);
        color: var(--letter-paper);
    }
}

.about-letter .about-card .btn:disabled {
    opacity: 0.55;
}

.about-letter .about-card .about-or {
    margin: 1.4rem 0 0;
    font-family: var(--about-type);
    font-size: 13px;
    letter-spacing: 0.3em;
    text-transform: none;
}

.about-letter .about-card .about-or::before,
.about-letter .about-card .about-or::after {
    content: "~";
    margin: 0 0.6em;
}

.about-letter .about-error,
.about-letter .about-expired {
    font-family: var(--about-type);
    font-style: normal;
    color: var(--wax);
}

.about-letter .link-button {
    font-family: var(--about-type);
    font-weight: 700;
    color: var(--about-body);
}