@font-face {
    font-family: "Benne";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/benne-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Benne";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/benne-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    color-scheme: light;
    --paper: #fbfaf7;
    --ink: #191817;
    --body: #3f3b37;
    --muted: #716a63;
    --rule-red: rgba(129, 31, 23, 0.44);
    --measure: 760px;
    --wide: 1120px;
    --serif: "Benne", Georgia, "Times New Roman", serif;
    --heading: Georgia, "Times New Roman", serif;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--paper);
    color: var(--body);
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--paper);
    color: var(--body);
    font-family: var(--serif);
    font-size: 20px;
    line-height: 1.62;
}

a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: rgba(129, 31, 23, 0.45);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
    transition: color 140ms ease, background-color 140ms ease, text-decoration-color 140ms ease;
}

a:hover,
a:focus-visible {
    color: #811f17;
    background: rgba(129, 31, 23, 0.055);
    text-decoration-color: currentColor;
}

strong,
b {
    color: var(--ink);
    font-weight: 700;
}

u {
    text-decoration-color: var(--rule-red);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.11em;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

.site-header {
    width: min(var(--wide), calc(100% - 32px));
    margin: 0 auto;
    padding: 28px 0 18px;
    text-align: center;
}

.brand-link {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    background: transparent;
    text-decoration: none;
}

.brand-link:hover,
.brand-link:focus-visible {
    background: transparent;
}

.brand-art {
    width: clamp(250px, 38vw, 520px);
    margin: 0 auto 0.35rem;
}

.brand-byline {
    margin: 0;
    color: var(--muted);
    font-size: clamp(18px, 2.2vw, 24px);
    line-height: 1.1;
}

.home-main {
    width: min(var(--wide), calc(100% - 34px));
    margin: 0 auto;
}

.home-intro {
    width: min(var(--measure), 100%);
    margin: 1.15rem auto 1.7rem;
    text-align: center;
}

.home-intro p {
    max-width: 720px;
    margin: 0 auto;
    color: var(--ink);
    font-size: clamp(23px, 2.6vw, 30px);
    line-height: 1.34;
}

.rustic-divider {
    width: min(240px, 42vw);
    height: 1px;
    margin: 0 auto 1.05rem;
    background: linear-gradient(90deg, transparent, var(--rule-red), transparent);
}

.section-links {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 1.35rem;
    margin: 0 auto 3.05rem;
    color: var(--ink);
    font-family: var(--heading);
    font-size: 18px;
    line-height: 1;
}

.section-links a {
    display: inline-block;
    color: var(--ink);
    line-height: 1.05;
    text-decoration-color: var(--rule-red);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.section-links a[aria-current="page"] {
    color: #811f17;
}

.prose {
    width: min(var(--measure), 100%);
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 5.6rem;
}

.prose p,
.prose ul,
.prose ol,
.prose blockquote,
.prose pre,
.prose figure {
    margin: 0 0 1.18em;
}

.prose p {
    text-wrap: pretty;
}

.prose.dropcap > p:first-of-type {
    margin-top: 0.15em;
}

.prose.dropcap > p:first-of-type::first-letter {
    float: left;
    margin: 0.06em 0.14em 0 0;
    color: rgba(25, 24, 23, 0.86);
    font-family: var(--heading);
    font-size: 4.35em;
    font-style: normal;
    font-weight: 400;
    line-height: 0.78;
}

.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    color: var(--ink);
    font-family: var(--heading);
    font-weight: 700;
    letter-spacing: 0;
}

.prose h2 {
    margin: 1.75em 0 0.48em;
    font-size: clamp(30px, 4.3vw, 44px);
    line-height: 1.05;
}

.prose h3 {
    margin: 1.45em 0 0.36em;
    font-size: clamp(25px, 3.6vw, 34px);
    line-height: 1.1;
}

.prose h4 {
    margin: 1.2em 0 0.2em;
    font-size: clamp(22px, 3vw, 28px);
    line-height: 1;
}

.prose ul,
.prose ol {
    padding-left: 1.05em;
}

.prose li + li {
    margin-top: 0.35em;
}

.prose a {
    text-decoration-color: rgba(129, 31, 23, 0.55);
}

.prose a:hover,
.prose a:focus-visible {
    background: rgba(129, 31, 23, 0.07);
}

.page-about .prose ul {
    list-style: none;
    padding-left: 0;
    margin-top: 1.35em;
}

.page-about .prose li {
    margin: 0;
    padding: 0.78em 0;
    border-top: 1px solid rgba(25, 24, 23, 0.13);
    font-size: 0.96em;
    line-height: 1.48;
}

.page-about .prose li:last-child {
    border-bottom: 1px solid rgba(25, 24, 23, 0.13);
}

.writing-index {
    width: min(var(--measure), 100%);
    margin: 0 auto 3.35em;
}

.writing-list {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.7em 1.35em;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.writing-entry {
    line-height: 1.12;
}

.writing-entry a {
    width: fit-content;
    color: var(--ink);
    font-family: var(--heading);
    font-size: 18px;
    line-height: 1.12;
    text-decoration-color: var(--rule-red);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.prose hr {
    width: min(210px, 36vw);
    border: 0;
    border-top: 1px solid var(--rule-red);
    margin: 3.2em auto;
}

.prose blockquote {
    padding-left: 1.05em;
    border-left: 2px solid var(--rule-red);
    color: var(--ink);
    font-style: italic;
}

.prose code,
.prose pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.78em;
}

.prose code {
    padding: 0.04rem 0.18rem;
    background: rgba(25, 24, 23, 0.055);
}

.prose pre {
    overflow-x: auto;
    padding: 1em;
    border: 1px solid rgba(25, 24, 23, 0.16);
    background: rgba(255, 255, 255, 0.45);
}

.prose figure {
    max-width: 100%;
    margin: 1.7em 0 1.8em;
}

.prose figure img {
    width: auto;
    max-height: 78vh;
    margin: 0 auto;
}

.prose figcaption {
    max-width: 680px;
    margin: 0.55em auto 0;
    color: var(--muted);
    font-size: 18px;
    font-style: italic;
    line-height: 1.42;
    text-align: center;
}

@media (max-width: 720px) {
    body {
        font-size: 19px;
        line-height: 1.58;
    }

    .site-header {
        width: min(100% - 24px, var(--wide));
        padding-top: 22px;
        padding-bottom: 18px;
    }

    .brand-art {
        width: min(90vw, 340px);
    }

    .home-main {
        width: min(100% - 28px, var(--wide));
    }

    .home-intro {
        margin-top: 1rem;
        margin-bottom: 1.55rem;
    }

    .rustic-divider {
        margin-bottom: 0.95rem;
    }

    .section-links {
        margin-bottom: 2.45rem;
        font-size: 17px;
    }

    .writing-index {
        margin-bottom: 3.15em;
    }

    .writing-list {
        gap: 0.65em 1.05em;
    }

    .prose.dropcap > p:first-of-type::first-letter {
        font-size: 3.55em;
    }
}