* {
    box-sizing: border-box;
}

:root {
    color-scheme: light dark;
    --page-space: clamp(1rem, 6vw, 6rem);
    --page-top-space: clamp(0.6rem, 3.6vw, 3.6rem);
}

/* Must use the native default background. */
body {
    margin: 0;
    color: #171717;
    font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.55;
}

h1 {
    margin: 0 0 1.25rem;
    font-size: clamp(1.75rem, 1.45rem + 1vw, 2rem);
    line-height: 1.15;
}

p {
    margin: 0 0 1rem;
}

p:last-child {
    margin-bottom: 0;
}

.page {
    display: flex;
    margin-top: var(--page-top-space);
    margin-bottom: 1.5rem;
}

.left {
    flex: 0 0 var(--page-space);
}

.content {
    max-width: 36rem;
    min-width: 0;
}

.right {
    min-width: var(--page-space);
    flex-grow: 1;
}

a {
    color: #8c471c;
    text-underline-offset: 0.14em;
}

a:hover,
a:focus-visible {
    color: #5f3617;
}

a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 0.18em;
}

@media (prefers-color-scheme: dark) {
    body {
        color: CanvasText;
    }

    a {
        color: rgb(217 161 122);
    }

    a:hover,
    a:focus-visible {
        color: rgb(224 185 148);
    }
}