@font-face {
    font-family: "Latin Modern Roman";
    src: url("/assets/fonts/latin-modern-roman.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Latin Modern Roman";
    src: url("/assets/fonts/latin-modern-roman-italic.otf") format("opentype");
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Latin Modern Mono";
    src: url("/assets/fonts/latin-modern-mono.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

:root {
    --background: #09121f;
    --text: #e7e9e6;
    --muted: #9ba2a8;
    --line: #39424b;
    --paper: #f4f3ed;
    --ink: #17191b;
    --paper-muted: #656565;
    --max-width: 900px;
    --serif: "Latin Modern Roman", "Computer Modern Serif", serif;
    --mono: "Latin Modern Mono", "Computer Modern Typewriter", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.55;
}

a { color: inherit; text-decoration: none; }

.site-header,
main {
    width: min(calc(100% - 48px), var(--max-width));
    margin-inline: auto;
}

.site-header {
    padding: 28px 0 24px;
    border-bottom: 1px solid var(--line);
}

.logo {
    font-family: var(--serif);
    font-size: 26px;
}

.header-path {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 18px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.4;
}

.header-path nav {
    display: flex;
    gap: .6em;
    min-width: 0;
}

.header-path a:hover { text-decoration: underline; text-underline-offset: 3px; }
.header-path time { flex: none; }

.eyebrow,
.index {
    color: var(--muted);
    font-family: var(--mono);
    font-size: 12px;
    text-transform: lowercase;
}

/* Home directory */
.directory {
    max-width: 680px;
    padding: 90px 0 150px;
    font-family: var(--mono);
    font-size: 15px;
}

.tree-root { margin-bottom: 9px; }
.tree-branch { margin: 0; }
.tree-branches {
    line-height: 1;
}

.tree-spacer {
    height: 1em;
    color: var(--muted);
    white-space: pre;
}

.folder-row,
.file-row {
    display: flex;
    align-items: baseline;
    min-height: 1em;
}

.branch-line {
    margin-right: .65em;
    color: var(--muted);
    white-space: pre;
}
.folder-name { font-weight: normal; }
.file-row time { margin-left: auto; color: var(--muted); font-size: 12px; }

.folder-row:hover .folder-name,
.file-row:hover span:nth-child(2) { text-decoration: underline; text-underline-offset: 4px; }

/* Category indexes */
.category-page { padding: 80px 0 130px; }

.category-page h1 {
    margin: 12px 0 65px;
    font-size: clamp(42px, 7vw, 64px);
    font-weight: 400;
    line-height: 1;
}

.post-list { border-top: 1px solid var(--line); }

.post-row {
    position: relative;
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 30px;
    padding: 24px 32px 24px 0;
    border-bottom: 1px solid var(--line);
}

.post-row:hover h2 { text-decoration: underline; text-underline-offset: 4px; }
.post-date { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.post-row h2 { margin: 0 0 7px; font-size: 24px; font-weight: 400; line-height: 1.2; }
.post-row p { max-width: 580px; margin: 0; color: var(--muted); font-size: 16px; }
.arrow { position: absolute; top: 24px; right: 0; color: var(--muted); }

/* Posts */
.article {
    max-width: 780px;
    margin: 36px auto 110px;
    padding: 34px clamp(28px, 7vw, 72px) 62px;
    background: var(--paper);
    color: var(--ink);
}

.article-header {
    max-width: 640px;
    margin: 20px auto 68px;
    text-align: center;
}

.article-header .eyebrow { color: var(--paper-muted); }
.article-header h1 {
    margin: 22px 0 14px;
    font-family: var(--serif);
    font-size: clamp(46px, 7vw, 65px);
    font-weight: 400;
    line-height: 1;
}

.article-subtitle {
    margin: 0 auto;
    color: var(--paper-muted);
    font-family: var(--serif);
    font-size: 18px;
    font-style: italic;
}

.article-body {
    max-width: 590px;
    margin: auto;
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.72;
    text-rendering: optimizeLegibility;
}

.article-body p { margin: 0 0 2em; }
.article-body h2,
.article-body h3 { font-family: var(--serif); font-weight: 400; }
.article-body h2 { margin: 2.6em 0 1em; font-size: 28px; }
.article-body h3 { margin: 2.2em 0 .9em; font-size: 22px; }
.article-body blockquote { margin: 2.5em 0; padding-left: 22px; border-left: 1px solid var(--ink); color: var(--paper-muted); font-style: italic; }
.article-body img { max-width: 100%; height: auto; }
.article-body a { text-decoration: underline; text-underline-offset: 3px; }
.article-body hr { width: 60px; margin: 3.5em auto; border: 0; border-top: 1px solid var(--ink); }

@media (max-width: 600px) {
    .site-header, main { width: calc(100% - 32px); }
    .site-header { padding: 20px 0 17px; }
    .logo { font-size: 23px; }
    .directory { padding: 65px 0 100px; font-size: 13px; }
    .file-row time { display: none; }
    .category-page { padding: 60px 0 100px; }
    .category-page h1 { margin-bottom: 45px; }
    .post-row { grid-template-columns: 1fr; gap: 7px; }
    .header-path {
        overflow-x: auto;
        white-space: nowrap;
    }
    .article { margin: 24px -6px 70px; padding: 30px 23px 48px; }
    .article-header { margin: 48px auto 58px; }
    .article-header h1 { font-size: 43px; }
    .article-body { font-size: 17px; }
}