@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url('../fonts/archivo.woff2') format('woff2');
}

@font-face {
    font-family: 'Archivo';
    font-style: italic;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url('../fonts/archivo-italic.woff2') format('woff2');
}

:root {
    color-scheme: dark;

    /* Ink: the only neutrals. Eleven blue-tinted steps, darkest first. */
    --ink-0: oklch(0.13 0.03 272);
    --ink-1: oklch(0.17 0.035 272);
    --ink-2: oklch(0.215 0.04 272);
    --ink-3: oklch(0.27 0.042 272);
    --ink-4: oklch(0.35 0.04 272);
    --ink-5: oklch(0.45 0.036 272);
    --ink-6: oklch(0.56 0.03 272);
    --ink-7: oklch(0.69 0.024 272);
    --ink-8: oklch(0.8 0.018 272);
    --ink-9: oklch(0.9 0.01 272);
    --ink-10: oklch(0.975 0.005 272);

    /* The edition colour: current, selected, positive, and drenched title cards. */
    --edition: oklch(0.48 0.255 268);
    --edition-hover: oklch(0.54 0.25 268);
    --on-edition: var(--ink-10);
    --on-edition-soft: oklch(0.86 0.06 268);

    /* Negative votes and failures. */
    --vermilion: oklch(0.67 0.2 35);
    --on-vermilion: var(--ink-0);

    /* Jokers and winners only. */
    --spotlight: oklch(0.91 0.15 95);
    --on-spotlight: var(--ink-0);

    /* The fill of a selected vote at 0; .sign--* classes swap in the colour of other signs. */
    --sign: var(--ink-10);
    --on-sign: var(--ink-0);

    --ground: var(--ink-0);
    --text: var(--ink-10);
    --text-muted: var(--ink-7);
    --rule: var(--ink-3);
    --focus: var(--spotlight);

    /* Type: one variable family, three widths. */
    --font: 'Archivo', system-ui, sans-serif;
    --wide: 125%;
    --normal: 100%;
    --narrow: 78%;

    --size-super: clamp(2rem, 0.2rem + 8.4vw, 6rem);
    --size-name: clamp(1.75rem, 1.15rem + 2.4vw, 3rem);
    --size-lead: clamp(1.15rem, 1.05rem + 0.4vw, 1.375rem);
    --size-body: 1.0625rem;
    --size-small: 0.9375rem;
    --size-tier: 0.8125rem;
    --size-cell: 1.25rem;
    --size-token: 0.75rem;
    --size-mark: 0.6875rem;

    --weight-super: 860;
    --weight-medium: 560;
    --weight-strong: 680;
    --weight-body: 420;

    --track-super: -0.015em;
    --track-tier: 0.08em;

    /* Space: 4px steps. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;
    --gutter: clamp(1rem, 0.4rem + 3vw, 3rem);
    --safe: clamp(1rem, -0.5rem + 7vw, 7.5rem);

    --hairline: 1px;
    --edge: 2px;
    --control: 3rem;
    --masthead: 3.5rem;
    --cell: 3.5rem;
    --punch: 0.5rem;
    --token-width: 1.6rem;
    --token-height: 1.25rem;

    /* Motion: wipes and rises, exponential out. */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    /* A fade that holds, then lets go: a state light cooling down. */
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-quick: 160ms;
    --dur-wipe: 560ms;
    --dur-rise: 720ms;
    --stagger: 90ms;
}

@media (max-width: 30rem) {
    :root {
        --masthead: 3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-quick: 0ms;
        --dur-wipe: 0ms;
        --dur-rise: 0ms;
        --stagger: 0ms;
    }
}