:root {
    /* Fonts */
    --sans-stack: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --serif-stack: 'Charter', 'Bitstream Charter', Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif;
    
    /* Colors */
    --color-background: snow;
    --color-primary: #1E1A2E;
    --color-secondary: #A0522D;
    --color-secondary-lighter: #F5DDD1;
    --color-alert: #8B1A1A;
    --border-color: darkgrey;

    /* Sizes and spacing */
    --size-base: 0.8rem;
    --size-0: clamp(var(--size-base), calc(var(--size-base) + 0.3vw), calc(var(--size-base) * 1.8));
    --size-1: clamp(calc(2 * var(--size-base)), calc(2 * var(--size-base) + 10vw), calc(var(--size-base) * 3.5));
    --size-2: clamp(calc(1.6 * var(--size-base)), calc(1.6 * var(--size-base) + 3vw), calc(var(--size-base) * 2.5));
    --size-3: clamp(calc(1.3 * var(--size-base)), calc(1.3 * var(--size-base) + 1vw), calc(var(--size-base) * 2.4));
    --size-4: clamp(calc(1.1 * var(--size-base)), calc(1.1 * var(--size-base) + 0.8vw), calc(var(--size-base) * 1.8));
    --size-5: clamp(calc(1 * var(--size-base)), calc(1 * var(--size-base) + 0.5vw), calc(var(--size-base) * 1.4));
    --size-6: clamp(calc(1 * var(--size-base)), calc(1 * var(--size-base) + 0.1vw), calc(var(--size-base) * 1.2));

    --space-base: 1rem;
    --space-md: 1.4rem;
    --space-lg: 3rem;
    --space-xl: 4rem;
    --space-xxl: 7rem;
    --gap: var(--space-base);
}

/* ── Reset ─────────────────────────────────────────────────── */

html, body {
    margin: 0;
    padding: 0;
}

body {
    position: relative;
    background-color: var(--color-background);
    color: var(--color-primary);
    font-family: var(--serif-stack);
}

/* ── Layout ─────────────────────────────────────────────────── */

#wrapper {
    max-width: 70ch;
    margin: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ── Nav ─────────────────────────────────────────────────────── */

nav {
    border-bottom: 1px dotted var(--border-color);
    padding-bottom: 1rem;
}

nav ul {
    list-style-type: none;
}

nav ul, nav li {
    margin: 0;
    padding: 0;
}

nav li {
    display: inline;
    font-weight: bold;
}

nav li::after {
    content: "|";
    padding-left: calc(var(--gap) / 2);
}

nav li:last-of-type::after {
    display: none;
}

/* ── Footer ─────────────────────────────────────────────────── */

footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px dotted var(--border-color);
}

/* ── Logline ─────────────────────────────────────────────────── */

#logline {
    margin-bottom: 0.6rem;
}

/* ── Buttons ─────────────────────────────────────────────────── */

button, input[type="submit"] {
    font-family: inherit;
    font-size: 0.8rem;
    border: 1px solid var(--border-color);
    cursor: pointer;
    letter-spacing: 1px;
    padding: .1rem .3rem .2rem;
    border-radius: .2rem;
    color: var(--color-primary);
    background-color: transparent;
}

button:hover, input[type="submit"]:hover {
    background-color: var(--color-secondary-lighter);
    border: 1px solid var(--border-color);
}

/* ── HR ─────────────────────────────────────────────────────── */

hr {
    height: 1px;
    color: var(--border-color);
    background: var(--border-color);
    font-size: 0;
    border: 0;
    margin: 1rem 0;
}

/* ── Typography ─────────────────────────────────────────────── */

:root {
    --line-height: 1.4;
}

p {
    line-height: 1.5;
    font-size: var(--size-0);
    margin-block-end: var(--gap);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    line-height: 1.2;
    margin-block-start: calc(var(--size-base) * 3);
    margin-block-end: calc(var(--size-base) / 2);
    color: var(--color-primary);
}

h1, h1 a { font-size: var(--size-1); margin-bottom: 0; }
h2, h2 a { font-size: var(--size-2); }
h3, h3 a { font-size: var(--size-3); }
h4, h4 a { font-size: var(--size-4); }
h5, h5 a { font-size: var(--size-5); }
h6, h6 a { font-size: var(--size-6); }

figure, img {
    display: block;
    margin: var(--space-base) 0;
    padding: 0;
    width: 100%;
}

figcaption {
    margin: 1em 0;
    font-size: calc(var(--size-0) * 0.8);
    font-weight: bold;
    text-align: center;
}

figure img {
    margin: 0;
}

strong, .strong, .bold {
    font-weight: bold;
}

em, .italic {
    font-style: italic;
}

small, small a {
    font-size: 0.9rem;
}

/* ── Links ─────────────────────────────────────────────────── */

a, a em, a strong {
    color: var(--color-secondary);
    font-size: var(--size-0);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.1em;
}

a:hover, a:hover em, a:hover strong {
    color: var(--color-alert);
    text-decoration-line: underline;
    text-decoration-style: solid;
}

/* ── Code ─────────────────────────────────────────────────── */

mark, code {
    border: 1px solid var(--border-color);
    background-color: rgb(231, 229, 229);
    font-family: monospace;
    font-size: 0.8rem;
    padding: .1rem .3rem .2rem;
    border-radius: .2rem;
    color: var(--color-primary);
}

pre code {
    display: block;
    white-space: pre;
    width: fit-content;
}

/* ── Blockquote ─────────────────────────────────────────────── */

blockquote {
    margin: max(calc(var(--gap) / 2), 3vw) 0;
    padding: 0;
    border-top: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
}

blockquote p {
    display: block;
    padding: calc(var(--gap) / 2) max(2vw, calc(var(--gap) * 1));
    font-size: var(--size-4);
}

blockquote cite {
    display: block;
    text-align: right;
    margin: var(--gap) 0;
    color: var(--color-primary);
}

blockquote cite::before {
    content: "—";
    margin-right: calc(var(--gap) / 2);
}

/* ── Lists ─────────────────────────────────────────────────── */

ol, ul {
    padding: 0;
    margin: 0;
    font-weight: bold;
    list-style-position: inside;
}

ol, ul, li {
    font-size: var(--size-6);
    line-height: 1.3;
    margin: 0;
    padding: 0;
    margin-block-end: calc(var(--size-base) / 2);
    margin-left: min(4vw, var(--gap));
    margin-right: min(4vw, var(--gap));
}

li {
    font-weight: normal;
}

li > p {
    display: inline;
    margin: 0;
    padding: 0;
}

/* ── Tables ─────────────────────────────────────────────────── */

table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border-color);
    table-layout: fixed;
    width: 100%;
    margin: 0;
    padding: 0;
    margin-block-end: calc(1.5em * 1.3);
    line-height: 1.4;
    font-size: var(--size-0);
}

th, tr, td {
    text-align: left;
    margin: 0;
    padding: 0;
    color: var(--color-primary);
}

th, td {
    padding: calc(var(--gap) / 2);
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

td:last-child, th:last-child { border-right: none; }
tr:last-child td              { border-bottom: none; }