.post-preview {
    display: grid;
    grid-template-columns: 155px minmax(0, 1fr);
    gap: 40px;
    border-top: 1px solid var(--line);
    padding: 30px 0;
}
.post-meta {
    padding-top: 5px;
    color: var(--muted);
    font:
        0.75rem/1.7 'Courier New',
        monospace;
}
.post-meta span,
.post-meta time {
    display: block;
}
.post-preview :is(h2, h3) {
    margin: 0 0 12px;
    font:
        400 clamp(1.45rem, 2.8vw, 1.9rem)/1.2 Georgia,
        serif;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}
.post-preview :is(h2, h3) a {
    text-decoration: none;
}
.post-preview :is(h2, h3) a:hover {
    text-decoration: underline;
}
.post-preview p {
    margin: 0 0 12px;
    max-width: 64ch;
    color: var(--muted);
}
.post-read {
    display: inline-block;
    padding: 8px 0;
    font-size: 0.875rem;
    text-decoration: none;
}
.post-read:hover {
    text-decoration: underline;
}
.post-read span {
    padding-left: 8px;
    color: var(--accent);
}
.blog-more {
    border-top: 1px solid var(--line);
    padding-top: 22px;
    font-size: 0.875rem;
}
.blog-more a {
    display: inline-block;
    padding: 8px 0;
}
.blog-empty {
    border-top: 1px solid var(--line);
    padding: 28px 0;
    color: var(--muted);
}
.writing-page {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}
.writing-header,
.writing-main,
.writing-footer {
    width: min(100%, 1180px);
    margin: 0 auto;
    padding-left: 4vw;
    padding-right: 4vw;
}
.writing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding-top: 32px;
    padding-bottom: 32px;
}
.writing-header nav {
    display: flex;
    gap: 28px;
    font-size: 0.875rem;
}
.writing-header nav a {
    text-decoration: none;
    padding: 8px 0;
    border-bottom: 1px solid transparent;
}
.writing-header nav a:hover,
.writing-header [aria-current] {
    border-bottom-color: var(--accent);
}
.writing-main {
    flex: 1;
    padding-top: 64px;
    padding-bottom: 90px;
}
.writing-page .eyebrow {
    font-size: 0.75rem;
}
.writing-page h1 {
    font:
        400 clamp(2.25rem, 5vw, 3.65rem)/1.1 Georgia,
        serif;
    letter-spacing: -0.035em;
    margin: 12px 0 22px;
    text-wrap: balance;
    overflow-wrap: anywhere;
}
.archive-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 40px;
    margin-bottom: 50px;
}
.archive-intro h1 {
    margin-bottom: 0;
}
.archive-intro > p {
    color: var(--muted);
    max-width: 44ch;
    margin: 0;
}
.reading-column {
    max-width: 700px;
    margin: 0 auto;
    min-width: 0;
}
.back-link {
    display: inline-block;
    margin-bottom: 40px;
    padding: 8px 0;
    color: var(--muted);
    font-size: 0.875rem;
    text-decoration: none;
}
.back-link:hover {
    color: var(--paper);
    text-decoration: underline;
}
.article-header {
    margin-bottom: 38px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--line);
}
.article-byline,
.article-updated {
    color: var(--muted);
    font-size: 0.8125rem;
    margin: 0;
}
.article-updated {
    margin-top: 8px;
}
.article-body {
    font-size: 1.125rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
}
.article-body p,
.article-body ul,
.article-body ol,
.article-body blockquote {
    margin: 0 0 1.5em;
}
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 {
    font-family: Georgia, serif;
    font-weight: 400;
    line-height: 1.25;
    margin: 1.7em 0 0.7em;
}
.article-body h2 {
    font-size: 1.8em;
}
.article-body h3 {
    font-size: 1.4em;
}
.article-body :is(h2, h3, h4, h5, h6) a {
    text-decoration: none;
}
.article-body :is(h2, h3, h4, h5, h6) a:hover {
    text-decoration: underline;
}
.article-body a {
    text-decoration-color: var(--accent);
}
.article-body blockquote {
    margin-left: 0;
    padding-left: 24px;
    border-left: 2px solid var(--accent);
    color: var(--muted);
}
.article-body blockquote p:last-child {
    margin-bottom: 0;
}
.article-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 30px auto;
}
.article-body hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 40px 0;
}
.article-body pre {
    max-width: 100%;
    overflow-x: auto;
    padding: 22px;
    background: #0d0b0d;
    border: 1px solid var(--line);
    font-size: 0.875rem;
    line-height: 1.7;
    tab-size: 4;
}
.article-body code {
    font-family: Consolas, 'Courier New', monospace;
}
.article-body :not(pre) > code {
    font-size: 0.9em;
    background: #ffffff09;
    padding: 0.1em 0.3em;
}
.article-body pre code {
    overflow-wrap: normal;
}
.article-table {
    overflow-x: auto;
    max-width: 100%;
    margin-bottom: 1.5em;
}
.article-body table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9375rem;
}
.article-body th,
.article-body td {
    min-width: 7rem;
    overflow-wrap: normal;
    border-bottom: 1px solid var(--line);
    text-align: left;
    padding: 12px 18px 12px 0;
}
.article-body th {
    color: var(--muted);
    font-weight: 500;
}
.article-body input[type='checkbox'] {
    margin-right: 0.5em;
    accent-color: var(--accent);
}
.hljs-comment,
.hljs-quote {
    color: #b5a7b1;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal {
    color: #f17b7a;
}
.hljs-string,
.hljs-regexp,
.hljs-addition {
    color: #bad4b2;
}
.hljs-number,
.hljs-symbol,
.hljs-attr {
    color: #dfb892;
}
.hljs-title,
.hljs-type,
.hljs-built_in {
    color: #c5b1df;
}
.article-footer,
.writing-footer {
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.875rem;
}
.article-footer {
    padding-top: 26px;
    margin-top: 52px;
}
.article-footer a,
.writing-footer a {
    display: inline-block;
    padding: 8px 0;
}
.writing-footer {
    padding-top: 25px;
    padding-bottom: 32px;
    color: var(--muted);
}
.draft-banner {
    padding: 14px 18px;
    background: #4b2c37;
    border-left: 2px solid var(--accent);
    margin: 0 0 30px;
}
@media (max-width: 700px) {
    .post-preview {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 25px 0;
    }
    .post-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }
    .writing-header,
    .writing-main,
    .writing-footer {
        padding-left: 22px;
        padding-right: 22px;
    }
    .writing-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
        padding-top: 22px;
        padding-bottom: 22px;
    }
    .writing-header .wordmark {
        font-size: 35px;
    }
    .writing-header nav {
        gap: 24px;
    }
    .writing-main {
        padding-top: 36px;
        padding-bottom: 60px;
    }
    .archive-intro {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 32px;
    }
    .back-link {
        margin-bottom: 28px;
    }
    .article-body {
        font-size: 1.0625rem;
    }
    .article-body pre {
        padding: 16px;
    }
    .writing-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}
@media print {
    .writing-page {
        display: block;
        background: white;
        color: black;
    }
    .writing-header,
    .writing-footer,
    .back-link,
    .article-footer,
    .skip-link {
        display: none;
    }
    .writing-main {
        padding: 0;
    }
    .article-body pre {
        white-space: pre-wrap;
        overflow: visible;
        background: transparent;
    }
    .article-body,
    .article-body code,
    .article-body span {
        color: black;
    }
}