@font-face {
    font-family: "Libertinus Sans";
    src: url("/fonts/Libertinus_Sans/LibertinusSans-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Libertinus Sans";
    src: url("/fonts/Libertinus_Sans/LibertinusSans-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Libertinus Serif Display";
    src: url("/fonts/Libertinus_Serif_Display/LibertinusSerifDisplay-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

:root {
    --color-ink: #2d261d;
    --color-ink-muted: #6f5e48;
    --color-parchment: #f3ecd8;
    --color-parchment-deep: #e9dfc3;
    --docs-header-height: 5rem;
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    color: var(--color-ink);
    background-color: var(--color-parchment);
    background-image:
        radial-gradient(circle at 18% 12%, rgb(255 255 255 / 45%), transparent 36%),
        radial-gradient(circle at 82% 88%, rgb(116 87 48 / 8%), transparent 42%),
        repeating-linear-gradient(3deg, transparent 0 4px, rgb(79 61 39 / 2%) 4px 5px, transparent 5px 9px);
    box-shadow: inset 0 0 clamp(4rem, 14vw, 11rem) rgb(82 59 31 / 12%);
    font-family: "Libertinus Sans", sans-serif;
}

.site-header {
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2rem);
    padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 3rem);
}

.site-header--home {
    position: absolute;
    top: 0;
}

.site-header--docs {
    position: sticky;
    top: 0;
    z-index: 20;
    height: var(--docs-header-height);
    padding-block: 0.75rem;
    border-bottom: 1px solid rgb(45 38 29 / 14%);
    background-color: var(--color-parchment);
    box-shadow: 0 0.25rem 1rem rgb(45 38 29 / 8%);
}

.logo {
    display: block;
    width: clamp(2.5rem, 5vw, 3.5rem);
    height: auto;
}

.site-header--docs .logo {
    max-height: 3.5rem;
}

.home-link {
    display: block;
    color: inherit;
}

.site-header a {
    color: inherit;
    font-size: 1.05rem;
    text-decoration: none;
}

.site-header a:hover,
.site-header a[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}