/* ========================================
   Blog Post Page Styles
   ======================================== */

/* Blog Post Header */
.blog-post {
    background-color: var(--bg-white);
}

.blog-post-list {
    background-color: var(--bg-white);
}

/* Top padding clears the fixed black nav (breadcrumb used to do this). */
.post-header {
    background-color: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
    padding: 5rem 0 1.75rem;
}

.post-header .container {
    max-width: 1200px;
}

/* Striking black + red post header with the homepage's diagonal taper.
   Red base + black overlay raised 2.5px leaves the red hairline; the clipped
   triangle reveals the white article background below. */
.post-header--hero {
    position: relative;
    background-color: var(--hairline);
    border-bottom: none;
    padding: 5rem 0 calc(2rem + var(--slope-v));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--slope-v)));
}

.post-header--hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #0b0b0b;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5px), 0 calc(100% - var(--slope-v) - 2.5px));
}

.post-header--hero .container {
    position: relative;
    z-index: 1;
}

.post-header--hero .post-title {
    color: #fff;
}

.post-header--hero .post-description {
    color: #ffffff;
}

.post-header--hero .post-description strong {
    color: #fff;
}

.post-header--hero a {
    color: var(--name-red);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.post-header--hero a:hover {
    color: #fff;
}

.post-meta-top {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

.post-category {
    display: inline-block;
    background-color: var(--surface-alt);
    color: var(--accent-primary);
    padding: 0.375rem 0.875rem;
    border-radius: 0.375rem;
    font-weight: 500;
}

.post-date,
.reading-time {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
}

.post-date::before,
.reading-time::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background-color: var(--text-muted);
    border-radius: 50%;
    margin-right: 0.75rem;
}

.post-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .post-title {
        font-size: 3rem;
    }
}

.post-description {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.7;
}

.post-description.post-related {
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.post-description.post-pdf {
    font-size: 0.95rem;
    margin: 1rem 0 0;
}

.post-description.post-pdf .fa-file-pdf {
    margin-right: 0.4rem;
}

.post-description.post-categories {
    margin: 1.5rem 0 0;
}

.post-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.25rem;
    margin-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.author-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    object-fit: cover;
}

.author-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.author-title {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Post Content Layout */
.post-content {
    padding: 2.5rem 0 4rem;
}

@media (min-width: 1024px) {
    .post-content .container {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: 3rem;
        max-width: 1200px;
    }
}

.post-body {
    max-width: 800px;
    /* As the 1fr track of the post grid, this defaults to min-width:auto, which
       refuses to shrink below its content's min-content — long unbreakable code
       lines/URLs then force the grid (and sidebar) past the viewport. min-width:0
       lets the track shrink so `.post-body pre { overflow-x:auto }` can scroll. */
    min-width: 0;
}

/* Post Body Typography */
.post-body p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
    color: var(--text-primary);
}

/* Underline in-content links so they don't rely on colour alone (WCAG 1.4.1). */
.post-body a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.post-body h2 {
    font-size: 1.875rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.post-body h3 {
    font-size: 1.25rem;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

.post-body ul,
.post-body ol {
    margin-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.post-body li {
    margin-bottom: 0.5rem;
    line-height: 1.8;
}

.post-body code {
    background-color: var(--code-bg);
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: var(--code-inline);
}

.post-body pre {
    background-color: var(--code-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1.5rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.post-body pre code {
    background-color: transparent;
    padding: 0;
    color: inherit;
}

/* Blockquotes */
.post-body blockquote {
    margin: 2rem 0;
    background-color: var(--surface-alt);
    padding: 1.5rem;
    border-left: 4px solid var(--accent-deco);
}

.post-body blockquote p {
    color: var(--text-secondary);
    font-style: italic;
    margin: 0;
}

/* Tables.
   Header row uses a fixed near-black band in both themes to match the site's
   signature black bands; body cells follow the theme variables. */
.post-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.75rem 0 2rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.post-body th {
    background-color: #0b0b0b;
    color: #fff;
    text-align: left;
    font-weight: 600;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--border-color);
    vertical-align: top;
}

.post-body td {
    background-color: var(--bg-white);
    color: var(--text-primary);
    text-align: left;
    vertical-align: top;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--border-color);
}

/* Keep inline code legible on the black header row (red-on-black is unreadable);
   body-cell code keeps the site's red styling inherited from .post-body code. */
.post-body th code {
    background-color: rgba(255, 255, 255, 0.14);
    color: #fff;
}

/* Post Sidebar */
.post-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (max-width: 1023px) {
    .post-sidebar {
        margin-top: 3rem;
        padding-top: 3rem;
        border-top: 1px solid var(--border-color);
    }
}

.sidebar-widget {
    background-color: var(--bg-primary);
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid var(--border-color);
}

.sidebar-widget h3 {
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

/* Author widget (moved out of the post header) */
.sidebar-author {
    text-align: center;
}

.sidebar-author-avatar {
    display: block;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 0.75rem;
}

.sidebar-author-name {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.sidebar-author-title {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

/* Share Buttons */
.share-buttons {
    display: flex;
    gap: 0.75rem;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

button.share-btn {
    cursor: pointer;
    font: inherit;
}

.share-btn:hover {
    color: #fff;
    border-color: transparent;
}

/* Invisible extension so each button's tap target is ≥44x44px (WCAG 2.5.5). */
.share-btn::after {
    content: "";
    position: absolute;
    inset: -2px;
}

.share-twitter:hover {
    background-color: #1da1f2;
}

.share-mastodon:hover {
    background-color: #6364ff;
}

.share-linkedin:hover {
    background-color: #0a66c2;
}

.share-email:hover {
    background-color: var(--btn-bg);
}

/* Related Posts */
.related-posts {
    list-style: none;
}

.related-posts li {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.related-posts li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.related-posts a {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    transition: color 0.2s ease;
    /* ≥44px hit area (WCAG 2.5.5); the list's 2rem item pitch absorbs it. */
    padding: 0.65rem 0;
    margin-top: -0.65rem;
}

.related-posts a:hover {
    color: var(--accent-secondary);
}

.related-date {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Tags */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag {
    display: inline-block;
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.tag:hover {
    background-color: var(--btn-bg);
    color: #fff;
    border-color: var(--btn-bg);
}

/* Post Navigation */
.post-navigation {
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 3rem 0;
}

.post-navigation .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

@media (max-width: 767px) {
    .post-navigation .container {
        grid-template-columns: 1fr;
    }
}

.nav-post {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background-color: var(--bg-white);
    text-decoration: none;
    transition: all 0.3s ease;
}

.nav-post:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-0.25rem);
}

.nav-post.prev-post {
    text-align: left;
}

.nav-post.next-post {
    text-align: right;
}

.nav-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.nav-title {
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.4;
}

.nav-post:hover .nav-title {
    color: var(--accent-primary);
}

/* Comments Section */
.comments-section {
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    padding: 4rem 0;
}

.comments-section .container {
    max-width: 800px;
}

.comments-section h2 {
    margin-bottom: 2rem;
}

.comments-list {
    margin-bottom: 3rem;
}

.comment {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.comment:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.comment-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.comment-content {
    flex: 1;
}

.comment-header {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.comment-header strong {
    color: var(--text-primary);
}

.comment-date {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.comment-content p {
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.comment-reply {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--accent-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.comment-reply:hover {
    color: var(--accent-secondary);
}

/* Comment Form */
.comment-form {
    background-color: var(--bg-white);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid var(--border-color);
}

.comment-form h3 {
    margin-bottom: 1.5rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
    border-color: var(--accent-deco);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.comment-form .btn {
    width: 100%;
}

/* Syntax Highlighting.
   Token colours start from the swappable highlight.js themes
   (atom-one-light / atom-one-dark). We pin the code-block background to the
   page surface, then re-tune every token colour that falls short of WCAG
   AAA (7:1) against that surface. Hues stay in each theme's palette. */
.hljs {
    background: var(--code-bg) !important;
}

.hljs-comment,
.hljs-quote {
    color: #494e55 !important;
}

.hljs-doctag,
.hljs-keyword,
.hljs-formula {
    color: #7a1f78 !important;
}

.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
    color: #8f2011 !important;
}

.hljs-literal {
    color: #01547a !important;
}

.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta .hljs-string {
    color: #24581f !important;
}

.hljs-built_in,
.hljs-class .hljs-title,
.hljs-title.class_ {
    color: #6b4600 !important;
}

.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
    color: #6b4600 !important;
}

.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
    color: #21439a !important;
}

[data-theme="dark"] .hljs-comment,
[data-theme="dark"] .hljs-quote {
    color: #a3abb8 !important;
}

[data-theme="dark"] .hljs-doctag,
[data-theme="dark"] .hljs-keyword,
[data-theme="dark"] .hljs-formula {
    color: #d6a3e0 !important;
}

[data-theme="dark"] .hljs-section,
[data-theme="dark"] .hljs-name,
[data-theme="dark"] .hljs-selector-tag,
[data-theme="dark"] .hljs-deletion,
[data-theme="dark"] .hljs-subst {
    color: #f0928c !important;
}

[data-theme="dark"] .hljs-literal {
    color: #6fc6d4 !important;
}

[data-theme="dark"] .hljs-string,
[data-theme="dark"] .hljs-regexp,
[data-theme="dark"] .hljs-addition,
[data-theme="dark"] .hljs-attribute,
[data-theme="dark"] .hljs-meta .hljs-string {
    color: #a2cf8e !important;
}

[data-theme="dark"] .hljs-built_in,
[data-theme="dark"] .hljs-class .hljs-title,
[data-theme="dark"] .hljs-title.class_ {
    color: #ddc06a !important;
}

[data-theme="dark"] .hljs-attr,
[data-theme="dark"] .hljs-variable,
[data-theme="dark"] .hljs-template-variable,
[data-theme="dark"] .hljs-type,
[data-theme="dark"] .hljs-selector-class,
[data-theme="dark"] .hljs-selector-attr,
[data-theme="dark"] .hljs-selector-pseudo,
[data-theme="dark"] .hljs-number {
    color: #e0a35c !important;
}

[data-theme="dark"] .hljs-symbol,
[data-theme="dark"] .hljs-bullet,
[data-theme="dark"] .hljs-link,
[data-theme="dark"] .hljs-meta,
[data-theme="dark"] .hljs-selector-id,
[data-theme="dark"] .hljs-title {
    color: #7fb3f5 !important;
}

/* Post archive (post-index / category layouts).
   Years are h2 and titles h3 for a correct heading outline; these classes
   keep the original visual hierarchy (small year label, large title). */
.post-body h2.archive-year {
    font-size: 1.25rem;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

.post-body h3.archive-title {
    font-size: 1.875rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.post-body h2.archive-item {
    font-size: 1.25rem;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

/* Standalone archive links get a ≥44px hit area (WCAG 2.5.5); the large
   heading margins around them absorb the invisible padding. */
.post-body .archive-title a {
    display: inline-block;
    padding: 0.3rem 0;
    margin: -0.3rem 0;
}

.post-body .archive-item a {
    display: inline-block;
    padding: 0.65rem 0;
    margin: -0.65rem 0;
}

/* Category browsing: pills in the post hero, the /categories/ index, and
   per-category archive pages. */
.post-header--hero a.category-pill {
    display: inline-block;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    padding: 0.2rem 0.8rem;
    margin: 0 0.35rem 0.35rem 0;
    font-size: 0.9rem;
}

.post-header--hero a.category-pill:hover {
    background: var(--name-red);
    color: #fff;
}

.post-header .archive-browse {
    margin-top: 0.75rem;
}

/* Category pages list titles as h2 (no year headers between them); match the
   visual size of the h3 titles on the year-grouped archive. */
.post-body h2.archive-title {
    font-size: 1.875rem;
    margin-top: 2.5rem;
    margin-bottom: 0.25rem;
}

.post-body .archive-date,
.post-body .archive-count {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 0;
}

.category-intro {
    margin-bottom: 1.5rem;
}

.category-jump {
    line-height: 2;
    font-size: 1rem;
}

.post-body h2.category-section {
    font-size: 1.5rem;
    scroll-margin-top: 1rem;
}

.category-count {
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 1rem;
}

ul.category-post-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

ul.category-post-list li {
    padding: 0.35rem 0;
}

/* Responsive */
@media (max-width: 767px) {
    .post-title {
        font-size: 1.75rem;
    }

    .post-body h2 {
        font-size: 1.5rem;
    }

    .post-body h3 {
        font-size: 1.125rem;
    }

    .post-body pre {
        padding: 1rem;
        font-size: 0.875rem;
    }

    /* Tables: keep the black header band (inherited from .post-body th) but
       stop wide tables from overflowing the viewport. A fixed layout shares the
       width evenly and long, unbreakable content (URLs, inline code) wraps
       instead of forcing the table past the right edge. */
    .post-body table {
        table-layout: fixed;
        width: 100%;
    }

    .post-body th,
    .post-body td {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .post-body th code,
    .post-body td code {
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
    }

    .comment-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

/* ========================================
   Print / PDF (blog posts) — web view unchanged
   ======================================== */

/* The PDF title page only exists on paper. */
.print-cover {
    display: none;
}

@media print {
    /* --- Page geometry and running page numbers. Regular pages get a
       roomier, equal top/bottom margin with the page number top-right; the
       cover keeps its tight frame and no number. The count starts after the
       cover (the page counter is zeroed on .print-cover below). --- */
    @page {
        margin: 2.2cm 1cm;

        @top-right {
            content: counter(page);
            font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
            font-size: 9.5pt;
            color: #000;
        }
    }

    @page :first {
        margin: 1cm;
        /* Zero the counter on the cover so the first text page is "1".
           NB: this @page placement is the only page-counter manipulation
           Chromium honours — counter-reset/counter-set on content elements
           (e.g. .print-cover) are silently ignored. */
        counter-reset: page 0;

        @top-right {
            content: none;
        }
    }

    /* --- Title page: full first page, then the article proper. The title,
       author and date live here, so their on-screen duplicates in the header
       are suppressed below (the "Cite as" line stays at the top of page 2). --- */
    .print-cover {
        display: flex;
        flex-direction: column;
        min-height: 92vh;
        page-break-after: always;
        text-align: center;
        color: #000;
    }

    /* Links keep the imprint's black, but stay underlined: with colour ruled
       out on a monochrome cover, the underline is the non-colour cue that
       marks them as actionable (WCAG 1.4.1). */
    .print-cover a {
        color: #000 !important;
        text-decoration: underline;
        text-underline-offset: 2pt;
    }

    .print-cover-masthead {
        font-family: var(--font-serif);
        font-variant: small-caps;
        letter-spacing: 0.14em;
        font-size: 11pt;
        /* A roomy line box and a wide gap above the rule: with a tight box,
           some PDF viewers clip the glyphs at the padding edge. */
        line-height: 1.6;
        margin: 0 0 6pt;
        padding-bottom: 12pt;
        border-bottom: 1px solid #000;
    }

    .print-cover-main {
        margin: auto 0;   /* vertically centre between masthead and imprint */
    }

    .print-cover-title {
        font-family: var(--font-serif);
        font-weight: 600;
        font-size: 28pt;
        line-height: 1.15;
        margin: 0 0 16pt;
    }

    .print-cover-author {
        font-size: 13pt;
        margin: 0 0 2pt;
    }

    /* The affiliation(s) in force on the document's date: one centred block,
       or two side by side, split by a vertical rule, when a period carries
       dual affiliations — presented in parallel, neither subordinate. */
    .print-cover-affiliations {
        display: flex;
        justify-content: center;
        align-items: stretch;
        margin: 0 0 12pt;
    }

    /* Exact equal halves (border-box, so the padding stays inside the 50%):
       the dividing rule between dual affiliations must sit precisely on the
       page's centre line, aligned with the centred name, title and date. */
    .print-cover-affiliation-block {
        box-sizing: border-box;
        flex: 0 0 50%;
        min-width: 0;
        padding: 0 10pt;
    }

    .print-cover-affiliation-block + .print-cover-affiliation-block {
        border-left: 1px solid #000;
    }

    .print-cover-role {
        font-size: 10pt;
        color: #333;
        margin: 0 0 2pt;
        white-space: nowrap;   /* job titles never break across lines */
    }

    .print-cover-affiliation {
        font-size: 10pt;
        color: #333;
        margin: 0;
    }

    .print-cover-date {
        font-size: 11pt;
        margin: 0;
    }

    .print-cover-image {
        display: block;
        max-width: 65%;
        max-height: 32vh;
        width: auto;
        height: auto;
        margin: 18pt auto 0;
        border: 1px solid #000;
    }

    .print-cover-credit {
        font-size: 8pt;
        font-style: italic;
        color: #333;
        margin: 4pt 0 0;
    }

    .print-cover-imprint {
        font-size: 9pt;
        color: #333;
        border-top: 1px solid #000;
        padding-top: 6pt;
    }

    .print-cover-imprint p {
        margin: 0 0 2pt;
    }

    /* The whole header (title, cite-as, related-post links, author card) and
       the feature image are reproduced on the cover, so the article proper
       starts clean on page 2. */
    .post-header,
    .post-feature {
        display: none !important;
    }

    /* Always print on a light scheme, even if the reader is in dark mode.
       Everything else uses these tokens, so overriding them does most of the work. */
    :root,
    [data-theme="dark"] {
        --bg-primary: #ffffff;
        --bg-white: #ffffff;
        --surface-alt: #ffffff;
        --text-primary: #000000;
        --text-secondary: #1a1a1a;
        --text-muted: #333333;
        --border-color: #000000;
        --code-inline: #b3122a;
    }

    html,
    body,
    .blog-post,
    .post-content {
        background: #fff !important;
        color: #000 !important;
    }

    /* Close the gap between the header/metadata and the body, and use the full
       page width (the sidebar is hidden in print). */
    .post-content {
        padding: 0.9rem 0 0 !important;
    }

    .post-content .container {
        display: block !important;
        max-width: 100% !important;
    }

    .post-body {
        max-width: 100% !important;
    }

    /* Code blocks: wrap instead of scrolling off the page. */
    .post-body pre {
        white-space: pre-wrap !important;
        word-wrap: break-word !important;
        overflow-wrap: anywhere !important;
        overflow: visible !important;
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    .post-body pre code {
        white-space: pre-wrap !important;
        word-break: break-word;
    }

    /* Keep the web table styling in print (black header, white text) and stop the
       table overflowing past the right margin. */
    .post-body table {
        width: 100% !important;
        table-layout: fixed;
        border-collapse: collapse;
    }

    .post-body th,
    .post-body td {
        border: 1px solid #000 !important;
        word-wrap: break-word;
        overflow-wrap: anywhere;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .post-body th {
        background-color: #0b0b0b !important;
        color: #fff !important;
    }

    .post-body td {
        background-color: #fff !important;
        color: #000 !important;
    }

    .post-body th code {
        background: transparent !important;
        color: #fff !important;
    }

    .post-body code {
        background: transparent !important;
        color: #b3122a !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .post-body blockquote {
        border-left: 3px solid #000;
        background: none !important;
        color: #000 !important;
    }

    /* Scholarly polish: avoid awkward breaks, keep images in bounds. */
    .post-body img {
        max-width: 100% !important;
        height: auto !important;
    }

    .post-body h2,
    .post-body h3 {
        page-break-after: avoid;
    }

    .post-body tr,
    .post-body thead,
    .post-body blockquote,
    .post-body figure {
        page-break-inside: avoid;
    }

    .post-body p,
    .post-body li {
        orphans: 3;
        widows: 3;
    }
}

/* ========================================
   Featured-image banner
   Sits between the hero and the post content. Small reused graphics
   (oa.png, geek.png, …) render at natural size; only large photos are
   capped at 900px so nothing is ever upscaled / pixelated.
   ======================================== */
.post-feature {
    margin: 0;
    padding: 2.5rem 0 0;
}

.post-feature img {
    display: block;
    max-width: min(100%, 900px);   /* photos cap at 900px */
    width: auto;                   /* small graphics keep natural size */
    height: auto;
    margin: 0 auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: var(--shadow-md);
}

.post-feature-caption {
    max-width: 900px;
    margin: 0.6rem auto 0;
    text-align: right;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text-secondary);
}

.post-feature-caption a {
    color: var(--accent-primary);
    text-decoration: none;
}

.post-feature-caption a:hover {
    text-decoration: underline;
}

/* ========================================
   Drop cap — first paragraph of the post body
   Large red Fraunces cap on the first letter of the FIRST paragraph only.
   Implemented as a floated cap rather than `initial-letter`: the latter's
   metric-based alignment rides high in Fraunces (cap top above the text,
   gap below). The font-size / line-height / margin below are tuned so the
   cap's top sits level with the top of the adjacent body-text glyphs and it
   sinks ~2 lines. overflow:hidden + a reserved min-height keep the float
   contained so it can never bleed into the next paragraph after a short opener.
   ======================================== */
.post-body > p:first-of-type {
    min-height: 3.6em;   /* reserve ~2 lines so a short opener can't clip/leak the cap */
    overflow: hidden;    /* contain the floated cap within this paragraph */
}

.post-body > p:first-of-type::first-letter {
    float: left;
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--accent-primary);
    font-size: 5em;
    line-height: 0.8;    /* with margin-top:0, aligns the cap top to the text cap-height */
    margin: 0 0.08em 0 0;
}

/* ========================================
   Generated reference list (see _plugins/reference_list.rb): a quiet,
   rule-separated coda to the post. The disclaimer is deliberately small;
   entries hang-indent like a bibliography, and long URLs are allowed to
   break anywhere so bare-link citations cannot overflow on mobile.
   ======================================== */
.post-references {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color, rgba(128, 128, 128, 0.35));
}

.post-references-disclaimer {
    font-size: 0.8em;
    opacity: 0.75;
    font-style: italic;
}

.post-references-picker {
    font-size: 0.85em;
}

/* The PDF renderer executes page scripts, which reveal the style picker;
   print output is fixed-MHRA, so the picker (and any script-toggled
   alternate style list) must never survive into it. */
@media print {
    .post-references-picker {
        display: none !important;
    }

    .post-references-list[hidden] {
        display: none !important;
    }
}

.post-references-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.post-references-list li {
    padding-left: 2em;
    text-indent: -2em;
    margin-bottom: 0.6em;
    overflow-wrap: anywhere;
}