@layer components {
    /*
     * A page that is only text, set like a chapter rather than like a form: narrow measure, the
     * display serif for headings, generous leading. The body is converted Markdown, so there are
     * no classes to hang anything on — every rule below is by element, inside the one block.
     */
    .static-page {
        max-inline-size: var(--measure);
        margin-inline: auto;
        padding: clamp(var(--space-l), 7vw, var(--space-2xl)) var(--space-m) var(--space-xl);
    }

    .static-page__header {
        margin-block-end: var(--space-xl);
    }

    .static-page__heading {
        margin: 0;
        font-size: var(--text-title);
    }

    .static-page__meta {
        margin: var(--space-s) 0 0;
        color: var(--color-text-muted);
        font-size: var(--text-s);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .static-page__body {
        /* A legal page is read by looking for one section: the counter makes it scannable. */
        counter-reset: section;

        & h2 {
            counter-increment: section;
            margin-block: var(--space-xl) var(--space-m);
            padding-block-start: var(--space-l);
            border-block-start: 1px solid var(--color-border);
            font-size: var(--text-section);
        }

        & h2::before {
            content: counter(section);
            display: block;
            margin-block-end: var(--space-2xs);
            color: var(--color-accent);
            font-family: var(--font-body);
            font-size: var(--text-s);
            font-weight: 600;
        }

        & h3 {
            margin-block: var(--space-l) var(--space-xs);
            font-size: var(--text-m);
        }

        & > p:first-child {
            margin-block-start: 0;
            font-size: var(--text-lead);
            line-height: 1.5;
        }

        & ul,
        & ol {
            display: grid;
            gap: var(--space-xs);
            padding-inline-start: var(--space-l);
        }

        & a {
            color: var(--color-text);
            text-decoration-color: var(--color-accent);
            text-underline-offset: 0.22em;
        }

        & code {
            padding: 0.1em 0.35em;
            border-radius: var(--radius-s);
            background-color: var(--color-sunken);
            font-family: var(--font-mono);
            font-size: 0.875em;
        }

        /* Scrolls rather than squeezing: on a phone a squeezed column is one word per line. */
        & table {
            display: block;
            overflow-x: auto;
            border-collapse: collapse;
            margin-block: var(--space-l);
            font-size: var(--text-s);
            line-height: 1.5;
        }

        & th,
        & td {
            padding: var(--space-s) var(--space-m) var(--space-s) 0;
            border-block-end: 1px solid var(--color-border);
            text-align: start;
            vertical-align: top;
        }

        & th {
            color: var(--color-text-muted);
            font-weight: 600;
            white-space: nowrap;
        }

        /* The one sentence per page that has to be read rather than skimmed. */
        & blockquote {
            margin: var(--space-l) 0;
            padding: var(--space-m) var(--space-l);
            border-inline-start: 3px solid var(--color-accent);
            background-color: var(--color-sunken);
            font-family: var(--font-display);
            font-size: var(--text-lead);
            line-height: 1.45;
        }

        & blockquote p {
            margin: 0;
        }
    }

    .static-page__nav {
        margin-block-start: var(--space-xl);

        & a::before {
            content: '← ';
        }
    }
}