@layer block {
    .static-page {
        & .static-page__heading {
            font-family: var(--font-display);
            font-size: var(--text-display-story);
            font-weight: var(--weight-display);
            line-height: var(--leading-display);
            color: var(--color-ink);
            letter-spacing: -0.02em;
        }

        & .static-page__updated {
            --flow-space: var(--space-2);

            font-family: var(--font-ui);
            font-size: var(--text-label-caps);
            color: var(--color-text-muted);
        }

        /*
         * Markdown emits bare elements with no classes, so the prose is styled
         * through this wrapper. Everything below is scoped to it on purpose:
         * a naked `h2 { }` would leak into every other .flow on the site.
         */
        & .static-page__prose {
            --flow-space: var(--space-4);

            margin-top: var(--space-6);
            font-family: var(--font-body);
            font-size: var(--text-body-lg);
            line-height: var(--leading-body-lg);
            /* Not --color-text: this is the only place on the site where
               somebody reads a whole screen of prose, and full-strength ink on
               a dark surface halates. The token carries that difference so the
               component needs no dark-mode branch of its own. */
            color: var(--color-text-prose);

            & h2,
            & h3 {
                /* Sections need more air above them than the paragraphs inside
                   them, which is what makes a long document scannable. */
                --flow-space: var(--space-6);

                font-family: var(--font-display);
                color: var(--color-ink);
                letter-spacing: -0.01em;
            }

            & h2 {
                font-size: var(--text-headline-md);
                font-weight: var(--weight-headline);
            }

            & h3 {
                --flow-space: var(--space-5);

                font-size: var(--text-body-lg);
                font-weight: var(--weight-display);
            }

            & a {
                color: var(--color-secondary);
                text-decoration: underline;
                text-underline-offset: 0.2em;
                text-decoration-thickness: 1px;
                transition: color var(--transition-fast);

                &:hover,
                &:focus-visible {
                    /* Deepen towards ink and thicken the rule, rather than
                       brighten towards --color-brand: the brand lime sits at
                       1.4:1 on paper, so hovering a link used to make it
                       vanish in the light theme. */
                    color: var(--color-ink);
                    text-decoration-thickness: 2px;
                }
            }

            & strong {
                /* Weight only. Lifting bold to --color-ink made no visible
                   difference on paper and made it brighter than its own
                   paragraph in the dark, so emphasis blared instead of
                   emphasising. */
                font-weight: var(--weight-label);
            }

            & ul,
            & ol {
                padding-inline-start: var(--space-5);

                & li + li {
                    margin-top: var(--space-2);
                }

                & li::marker {
                    color: var(--color-secondary);
                }
            }

            & blockquote {
                padding-inline-start: var(--space-4);
                border-inline-start: 2px solid var(--color-accent);
                font-style: italic;
                color: var(--color-text-muted);
            }

            & table {
                width: 100%;
                border-collapse: collapse;
                font-size: var(--text-body-md);
                text-align: start;
            }

            & th,
            & td {
                padding-block: var(--space-2);
                padding-inline-end: var(--space-3);
                border-bottom: 1px solid var(--color-border);
                text-align: start;
                vertical-align: top;
                /* Cells wrap; an unbreakable run — an e-mail address, a legal
                   reference — breaks rather than pushing the table off a phone. */
                overflow-wrap: anywhere;
            }

            & th {
                font-family: var(--font-ui);
                font-size: var(--text-label-caps);
                font-weight: var(--weight-label);
                text-transform: uppercase;
                letter-spacing: 0.04em;
                color: var(--color-text-muted);
            }

            & code {
                padding: 0.05em 0.35em;
                border: 1px solid var(--color-border);
                border-radius: var(--radius-sm);
                /* Two dark greys a hair apart are one grey. The border is what
                   actually draws the chip in the dark; the fill only tints it. */
                background: var(--color-surface-container-high);
                font-family: ui-monospace, monospace;
                /* Monospace faces run large next to a serif — 0.9em still read
                   bigger than the words around it. */
                font-size: 0.85em;
            }

            & hr {
                border: 0;
                border-top: 1px solid var(--color-border);
            }

            /* The section anchor sits out of the way until the heading is
               pointed at. It carries aria-hidden and tabindex="-1" from
               CommonMark, so it is decoration for sighted readers only. */
            & .static-page__anchor {
                margin-inline-start: var(--space-2);
                color: var(--color-outline);
                text-decoration: none;
                opacity: 0;
                transition: opacity var(--transition-fast);
            }

            & h2:hover .static-page__anchor,
            & h3:hover .static-page__anchor {
                opacity: 1;
            }
        }
    }

    /* No hover to reveal it with, so it stays faintly visible instead. */
    @media (hover: none) {
        .static-page .static-page__prose .static-page__anchor {
            opacity: 0.4;
        }
    }
}