@layer base {
    body {
        background: var(--bg);
        color: var(--fg);
        font-family: var(--font-ui);
        font-variation-settings: 'wdth' var(--wdth-ui);
        font-size: var(--step-0);
        line-height: 1.5;
    }

    /* Display type is the condensed grotesque the 2014 site used, restated
       through the variable font's width axis rather than a second family. */
    h1, h2, h3, .u-display {
        font-family: var(--font-display);
        font-variation-settings: 'wdth' var(--wdth-display);
        line-height: 1.08;
        text-wrap: balance;
    }

    h1 { font-size: var(--step-3); font-weight: 800; letter-spacing: .01em; }
    h2 { font-size: var(--step-2); font-weight: 700; }
    h3 { font-size: var(--step-1); font-weight: 700; }

    p { text-wrap: pretty; }

    a {
        color: inherit;
        text-decoration-color: color-mix(in oklch, currentColor 40%, transparent);
        text-underline-offset: .18em;
    }

    a:hover { text-decoration-color: currentColor; }

    /* Every number that sits in a column -- spreads, scores, totals -- must line
       up. Tabular figures are non-negotiable on a scoreboard. */
    .u-nums, td, th {
        font-variant-numeric: tabular-nums;
    }

    small { font-size: var(--step--1); }

    hr {
        border: 0;
        border-block-start: 1px solid var(--rule);
        margin-block: var(--space-5);
    }

    /* ---- utilities ------------------------------------------------------ */

    .u-visually-hidden {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .u-skip-link {
        position: absolute;
        inset-block-start: var(--space-2);
        inset-inline-start: var(--space-2);
        z-index: var(--z-toast);
        padding: var(--space-2) var(--space-4);
        background: var(--surface-1);
        border: 1px solid var(--rule);
        border-radius: var(--radius-2);
        transform: translateY(-200%);
        transition: transform var(--dur-1) var(--ease-out);
    }

    .u-skip-link:focus-visible { transform: none; }

    .u-stack > * + * { margin-block-start: var(--space-4); }

    .u-muted { color: var(--fg-muted); }
    .u-subtle { color: var(--fg-subtle); }

    .u-label {
        font-size: var(--step--2);
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--fg-muted);
        font-weight: 600;
    }

    /* Wide content -- breakdown tables especially -- scrolls inside its own box.
       The page body must never scroll sideways. */
    .u-scroll-x {
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }
}