/* Arbeit Book (300) is the only face there is. Nothing may ask for a heavier
   weight — the browser would synthesise a fake bold rather than fall back. */
@font-face {
    font-family: "Arbeit";
    src: url("../fonts/arbeit-book.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

:root {
    font-size: 24px; /* Rem used as line height */

    --bg: #fafafa;
    --fg: #111111;
    --muted: #aaaaaa;
    --size: 0.75rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
}

body {
    background: var(--bg);
    color: var(--fg);
    font-family:
        "Arbeit",
        system-ui,
        -apple-system,
        sans-serif;
    font-weight: 300;
    font-size: var(--size);
    line-height: 1rem;
    -webkit-font-smoothing: antialiased;
    padding: 2rem;
}

/* Sized off --size, not rem: rem is the leading here, so a rem width would
   not track the text size. ~65 characters. */
main {
    max-width: calc(32 * var(--size));
}

/* Inherit rather than restate: also overrides the UA bold, which we have no
   face for. */
h1,
h2 {
    font: inherit;
}

h1 {
    margin-bottom: 2rem;
}

h2 {
    color: var(--muted);
}

p,
ul {
    margin-bottom: 2rem;
}

ul {
    list-style: none;
    padding: 0;
}

a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--muted);
}

a:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 3px;
}