/* Loaded on every page (UI v2 and legacy) before any page stylesheet: only fonts, tokens and globally safe rules. */
/* ==== FONTS ==== */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/source-serif-4-latin-300-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/source-serif-4-latin-ext-300-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'DM Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/dm-mono-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/dm-mono-latin-ext-400-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==== TOKENS ==== */
:root {
    --c-canvas: #FFFFFF;
    --c-paper: #FAF9F6;
    --c-chalk: #F1EEE9;
    --c-ink: #111111;
    --c-ink-hover: #333333;
    --c-ink-2: #5C5C5C;
    --c-ink-mute: #737373;
    --c-ink-3: #949494;
    --c-line: rgba(17, 17, 17, 0.1);
    --c-line-soft: rgba(17, 17, 17, 0.05);
    --c-line-strong: rgba(17, 17, 17, 0.2);
    --c-tint: rgba(17, 17, 17, 0.03);
    --c-mark: #D3CEC6;
    --c-blue: #1565C0;
    --c-orange: #FF5600;
    --c-danger: #B42318;
    --c-success: #067647;
    --c-bar: #E1E2E5;
    --g-bar: radial-gradient(38% 220% at 6% 50%, rgba(255, 86, 0, 0.42), transparent 70%),
        radial-gradient(30% 260% at 24% 0%, rgba(21, 101, 192, 0.38), transparent 72%),
        radial-gradient(34% 240% at 82% 100%, rgba(255, 128, 196, 0.42), transparent 72%),
        radial-gradient(26% 260% at 97% 0%, rgba(64, 196, 170, 0.4), transparent 72%);

    --ff-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --ff-serif: 'Source Serif 4', ui-serif, Georgia, serif;
    --ff-mono: 'DM Mono', ui-monospace, monospace;

    --fs-display: 2.5rem;
    --fs-h2: 1.875rem;
    --fs-h4: 1.25rem;
    --fs-h3: 1.25rem;
    --fs-lead: 1rem;
    --fs-body: 1rem;
    --fs-ui: 1rem;
    --fs-small: 0.875rem;
    --fs-label: 0.75rem;
    --fs-quote: clamp(1.375rem, 1.05rem + 0.9vw, 1.75rem);

    --radius: 4px;
    --radius-nav: 6px;
    --control-h: 40px;

    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;
    --s-9: 96px;
    --s-10: 128px;

    /* Grid: sections cap at 1920px; content spans the middle 10 of 12 columns (16px gaps, 16px edge). */
    --section-max: 1920px;
    --section-y: 80px;
    --grid-gap: 16px;
    --gutter: 16px;
    --container-pad: var(--gutter);
    --mh-height: 66px;
    --autoplay: 8s;

    --ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (min-width: 768px) {
    :root {
        /* One 12-column track plus its gap is skipped on each side; the % resolves against the element using it. */
        --container-pad: calc((100% - 2 * var(--gutter) - 11 * var(--grid-gap)) / 12 + var(--gutter) + var(--grid-gap));
        --fs-display: 4rem;
        --fs-h2: 2.5rem;
        --section-y: 112px;
    }
}

@media (min-width: 1280px) {
    :root {
        --fs-display: 5rem;
        --fs-h2: 3.375rem;
        --fs-h4: 1.5rem;
    }
}

/* ==== MOTION ==== */
@keyframes ui-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ==== UTILITIES ==== */
.u-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.u-invisible {
    visibility: hidden;
}

.u-skip {
    position: absolute;
    left: var(--s-4);
    top: var(--s-2);
    z-index: 100;
    padding: var(--s-2) var(--s-4);
    background: var(--c-ink);
    color: var(--c-canvas);
    border-radius: var(--radius);
    transform: translateY(-200%);
}

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