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

html {
    scroll-padding-top:
        calc(
            var(--site-header-height)
            + var(--space-4)
        );

    font-family: var(--font-sans);
    line-height: 1.5;

    background: var(--color-background);

    text-rendering: optimizeLegibility;
}

body {
    margin: 0;

    padding-top: var(--site-header-height);

    background: var(--color-background);
    color: var(--color-text);
}

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

a {
    color: inherit;
}

img {
    display: block;

    max-width: 100%;
}

button {
    color: inherit;
}

::selection {
    background: var(--color-gold);
    color: var(--color-ink);
}

.container {
    width: min(
        calc(100% - (var(--container-padding) * 2)),
        var(--container-width)
    );

    margin-inline: auto;
}

.skip-link {
    position: fixed;
    top: var(--site-header-height);
    left: var(--container-padding);
    z-index: var(--layer-skip-link);

    padding:
        var(--space-3)
        var(--space-4);

    background: var(--color-ink);
    color: var(--color-off-white);

    transform: translateY(-150%);
}

.skip-link:focus {
    transform: translateY(0);
}