/* Reset and element defaults. */

/* Figtree (OFL, public/static/v2/fonts). The fallback face is metric-adjusted Arial, so swapping fonts
   does not move the layout. */
@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("../fonts/figtree-latin-wght.woff2") format("woff2");
}
@font-face {
    font-family: "Figtree Fallback";
    src: local("Arial");
    size-adjust: 98%;
    ascent-override: 97%;
    descent-override: 26%;
    line-gap-override: 0%;
}

@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    /* hidden always hides, even on elements whose class sets display (important in a layer beats later layers) */
    [hidden] { display: none !important; }
    * { margin: 0; }
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    img, svg, canvas { display: block; max-inline-size: 100%; }
    img { block-size: auto; }
    ul, ol { padding: 0; list-style: none; }
    button, input, textarea, select { font: inherit; color: inherit; }
    button { background: none; border: 0; cursor: pointer; }
    table { border-collapse: collapse; }
    [hidden] { display: none !important; }
}

@layer base {
    html {
        scroll-padding-block-start: calc(var(--header-h) + var(--space-4));
        hanging-punctuation: first last;
    }

    @media (prefers-reduced-motion: no-preference) {
        html { scroll-behavior: smooth; }
    }

    body {
        min-block-size: 100dvh;
        display: flex;
        flex-direction: column;
        background: var(--bg);
        color: var(--ink-2);
        font-family: var(--font);
        font-size: var(--step-0);
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3 {
        color: var(--ink);
        line-height: 1.15;
        letter-spacing: -.015em;
        text-wrap: balance;
    }
    h1 { font-size: var(--step-4); font-weight: 650; }
    h2 { font-size: var(--step-3); font-weight: 650; }
    h3 { font-size: var(--step-1); font-weight: 600; }
    p, li { text-wrap: pretty; }

    a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: .18em; }
    a:hover { color: var(--brand-strong); }

    :focus-visible {
        outline: 3px solid var(--brand);
        outline-offset: 2px;
        border-radius: 4px;
    }

    strong { color: var(--ink); font-weight: 600; }

    /* Inline SVG icons default to the text size; components set larger sizes where needed */
    .icon { inline-size: 1em; block-size: 1em; flex: none; }
    a > .icon { display: inline; vertical-align: -.125em; margin-inline-start: .2em; }
    small { font-size: var(--step--1); }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .01ms !important;
        }
    }
}