/*
 * Prose pages: /contact, /privacy-policy and /terms. One readable column
 * (about 80 characters a line at 42rem), real headings, and links that look
 * like links. The text, link and list rules are base.css's, shared with the
 * database markdown (.markdown-body); this file adds the column and the
 * headings. A heading's size comes from here, not its level.
 */

@layer reset, tokens, base, layout, components, pages, utilities;

@layer pages {
    .prose {
        max-width: 42rem;
        margin-inline: auto;
        padding-bottom: var(--space-6);
    }

    .prose h1 {
        margin-bottom: var(--space-4);
        color: var(--navy-900);
        font-size: var(--text-2xl);
        line-height: 1.25;
    }

    .prose h2 {
        margin-top: var(--space-6);
        margin-bottom: var(--space-2);
        color: var(--navy-900);
        font-size: var(--text-lg);
        line-height: 1.3;
    }

    .prose h3 {
        margin-top: var(--space-4);
        margin-bottom: var(--space-2);
        color: var(--navy-900);
        font-size: var(--text-base);
    }

    /* A subheading straight under its heading needs no gap of its own. */
    .prose h2 + h3 {
        margin-top: 0;
    }

    .prose address {
        margin-bottom: var(--space-4);
        font-style: normal;
    }

    .prose__meta {
        color: var(--color-text-muted);
    }
}