:root {
    --paper: #eeeae1;
    --surface: #fbf9f5;
    --surface-deep: #e4decf;
    --ink: #23201b;
    --ink-soft: #56504a;
    --ink-faint: #86807a;
    --brass: #a97d3d;
    --brass-deep: #8b6530;
    --clay: #9c4a32;
    --line: #d6cfbe;
    --serif: "IBM Plex Serif", Georgia, serif;
    --sans:
        "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, monospace;
    --max: 1180px;
    --radius: 4px;
    --header-h: 76px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;

    scrollbar-color: var(--brass) var(--paper);
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--paper);
}

::-webkit-scrollbar-thumb {
    background: var(--brass);
    border-radius: 8px;
    border: 3px solid var(--paper);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brass-deep);
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.15;
    margin: 0;
    color: var(--ink);
}

a {
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}