/* base.css. Fonts, the page background, text, links, focus and the skip link.
   Loaded after tokens.css and after each page's older stylesheets. */

/* Fonts, self-hosted (SIL Open Font License, see /fonts). One Latin file each, font-display swap. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/inter-latin-variable.woff2") format("woff2");
}

@font-face {
    font-family: "Unbounded";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("/assets/unbounded-latin-variable.woff2") format("woff2");
}

/* While a font loads, a local font adjusted to the same size, so the text does not jump when it arrives. */
@font-face {
    font-family: "Inter Fallback";
    src: local("Arial");
    size-adjust: 107.4%;
    ascent-override: 90.2%;
    descent-override: 22.5%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Unbounded Fallback";
    src: local("Arial");
    size-adjust: 118%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    overflow-wrap: break-word;
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    /* Fixed sizes, so a short page and a long page get the same colors at the top (percentages made the glows and
       the fade stretch with the page). */
    background:
        radial-gradient(circle 760px at top left, var(--glow-1), transparent),
        radial-gradient(circle 700px at top right, var(--glow-2), transparent),
        linear-gradient(180deg, var(--bg) 0, var(--bg-alt) 1500px);
    background-color: var(--bg-alt);
    background-attachment: scroll;
}

/* The older pages drew a faint light sheen over the whole page. The new pages do not. */
body::before {
    display: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

h1 {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

h1,
h2,
h3 {
    color: var(--text);
}

p,
li {
    text-wrap: pretty;
}

.num,
time,
.sg-tabular {
    font-variant-numeric: tabular-nums;
}

/* Focus. Two pixels, outside the element, on everything that can be used with the keyboard. */
:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

/* Skip link, the first thing a keyboard user reaches on a page. */
.sg-skip {
    position: absolute;
    left: 12px;
    top: -64px;
    z-index: 1000;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    background: var(--action);
    color: var(--on-action);
    font-weight: 700;
    text-decoration: none;
    transition: top 150ms var(--ease);
}

.sg-skip:focus {
    top: 12px;
}

.sg-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Motion. Short changes of color and border only, nothing longer without a reduced motion rule. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Text for screen readers only. */
.sg-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }