/* Minimal reset for cross-browser consistency */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: clamp(1em, 17px + 0.24vw, 1.125em);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

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

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* Aeonik Pro */
@font-face {
    font-family: "Aeonik Pro";
    src:
        url("fonts/AeonikPro-Regular.woff2") format("woff2"),
        url("fonts/AeonikPro-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Aeonik Pro";
    src:
        url("fonts/AeonikPro-Medium.woff2") format("woff2"),
        url("fonts/AeonikPro-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Aeonik Pro";
    src:
        url("fonts/AeonikPro-Bold.woff2") format("woff2"),
        url("fonts/AeonikPro-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Serrif VF — variable font, weight axis 100–900 */
@font-face {
    font-family: "Serrif VF";
    src:
        url("fonts/SerrifUprightsVF.woff2") format("woff2-variations"),
        url("fonts/SerrifUprightsVF.woff2") format("woff2"),
        url("fonts/SerrifUprightsVF.woff") format("woff-variations"),
        url("fonts/SerrifUprightsVF.woff") format("woff");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Page */
body {
    font-family: var(--font-sans);
    background-color: white;
    color: black;
    line-height: 1.5;
}

/* Design tokens. */
:root {
    --font-sans: "Aeonik Pro", system-ui, -apple-system, sans-serif;
    --font-serif: "Serrif VF", Georgia, serif;

    --size-sm: 0.875rem;
    --size-md: 1rem;
    --size-lg: 1.125rem;
    --size-xl: 1.5rem;

    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-xxl: 4rem;

    --gutter-x: 2rem;
    --gutter-y: 2rem;
}

@media (max-width: 600px) {
    :root {
        --gutter-x: 1.25rem;
        --gutter-y: 1.5rem;
    }
}

main {
    display: grid;
    grid-template-columns:
        [content-start] minmax(0, 600px) [content-end]
        minmax(0, 1fr) [wide-end];
    row-gap: 1.5rem;
    padding-block: var(--gutter-y);
    padding-inline: var(--gutter-x);
}

main > * {
    grid-column: content;
    min-width: 0; /* prevent intrinsic-width children from blowing out the column */
}

main > .wide {
    grid-column: content-start / wide-end;
}

main > .full {
    grid-column: content-start / wide-end;
    margin-inline: calc(-1 * var(--gutter-x));
}

/* Sections — used to group related content on the home page.
   Children flow normally inside; `* + *` gives them rhythm since
   the global reset has zero'd default margins. Sections get extra
   breathing room from each other on top of main's row-gap. */
section > * + * {
    margin-top: var(--space-md);
}

main > section + section {
    margin-top: var(--space-lg);
}

h1 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: var(--size-xl);
    line-height: 1.2;
}

h2 {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: var(--size-lg);
}

main > section > h2,
main > h2 {
    scroll-margin-top: var(--space-md);
}

p {
    line-height: 1.5;
}

a,
a:visited,
a:hover,
a:active {
    color: black;
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

ul {
    list-style: none;
}

.book {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.book + .book {
    margin-top: 1.5rem;
}

.book img {
    width: 60px;
    height: auto;
}

.book .author {
    margin-top: 0.25rem;
}

/* Styleguide — scoped so it doesn't affect the rest of the site.
   Vertical spacing between top-level elements is handled by main's
   row-gap; these rules only style elements internally or apply to
   nested elements (li, dt, dd, cite) that aren't grid items. */
.styleguide ul,
.styleguide ol {
    padding-left: 1.5rem;
    list-style: revert;
}

.styleguide li {
    margin-top: 0.25rem;
}

.styleguide dl dt {
    font-weight: 700;
    margin-top: 0.5rem;
}

.styleguide dl dt:first-child {
    margin-top: 0;
}

.styleguide dl dd {
    margin-left: 1.5rem;
}

.styleguide blockquote {
    border-left: 2px solid black;
    padding-left: 1rem;
}

.styleguide blockquote cite {
    display: block;
    margin-top: 0.5rem;
    font-style: normal;
}

.styleguide code,
.styleguide pre,
.styleguide kbd {
    font-family:
        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.styleguide pre {
    border: 1px solid black;
    padding: 1rem;
    overflow-x: auto;
    white-space: pre;
    line-height: 1.5;
}

.styleguide kbd {
    border: 1px solid black;
    padding: 0 0.25rem;
    font-size: 0.875rem;
}

.styleguide mark {
    background: black;
    color: white;
    padding: 0 0.15rem;
}

.styleguide abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
}

.styleguide figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

.styleguide table {
    border-collapse: collapse;
}

.styleguide caption {
    text-align: left;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.styleguide th,
.styleguide td {
    border: 1px solid black;
    padding: 0.5rem 0.75rem;
    text-align: left;
    overflow-wrap: break-word;
}

.styleguide hr {
    border: 0;
    border-top: 1px solid black;
}

.styleguide summary {
    cursor: pointer;
}