html {
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-ui);
    font-size: 100%;
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-block-size: 100vh;
    display: flex;
    flex-direction: column;
    font-size: var(--text-body);
    font-weight: 400;
    text-align: start;
    overflow-wrap: break-word;
}

main {
    flex: 1;
}

a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--color-stone);
    transition: text-decoration-color var(--transition), color var(--transition), opacity var(--transition);
}

a:hover {
    text-decoration-color: currentColor;
}

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

.section--ink :focus-visible,
.site-footer :focus-visible {
    outline-color: var(--color-paper);
}

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

hr {
    border: 0;
    border-block-start: 1px solid var(--color-border);
    margin: 0;
}

.skip-link {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    z-index: 100;
    padding: var(--space-3) var(--space-4);
    background: var(--color-ink);
    color: var(--color-paper);
    text-decoration: none;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

.visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Content that is always left-to-right, even on RTL pages: emails, URLs, membership numbers. */
.ltr {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}