/*
 * style.css — xofblog / thebuild.com (tech-report refresh, 2026-05).
 *
 * Hand-crafted, framework-free. Single-column report aesthetic:
 *   - IBM Plex Sans for body and headings; IBM Plex Mono for metadata,
 *     section numbers, dates, captions, and code.
 *   - Warm-white paper (#FBF9F4) on near-black ink (#141414).
 *   - One accent: warm lab-orange (#C04A1F) used sparingly — section
 *     numerals, hover state, footnote markers, the "Read →" link.
 *   - § as the only ornament. No fleurons.
 *   - ISO date stamps everywhere (post.published_at|date:'Y-m-d').
 *   - Footnotes are styled by the markdown renderer's existing
 *     [^n] / <sup><a> / <ol><li id="fnN"> conventions; we add the
 *     mono backref pill below.
 *
 * Layout:
 *   - Single prose column, --prose-width = 42rem.
 *   - Banner image (figure under the H1) and sidebar image (hangs in
 *     left margin on wide viewports) are RETAINED from the prior
 *     design — these are content affordances, not chrome.
 *   - Code blocks still break out of the prose column to the right.
 *
 * Section order (preserve when editing):
 *   1. @font-face (Plex Sans + Mono via Google Fonts; @import keeps
 *      the file self-contained — no extra <link> in base.html).
 *   2. Reset + :root tokens.
 *   3. Top bar, header, header-rule, main wrapper, footer.
 *   4. Post list, post detail, abstract, footnotes, prev/next.
 *   5. Banner + sidebar image (retained, restyled).
 *   6. Code blocks, inline code, blockquotes.
 *   7. Search, comments, pagination, 404, tag-index.
 *   8. Dark-mode overrides — both the system-preference media query
 *      AND the explicit [data-theme="dark"] selector. Keep in sync.
 *   9. Theme-toggle, @media print, @media (max-width: 768px).
 *   10. Mermaid container.
 */

/* === Fonts === */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Tokens — light mode. Dark mode below replaces these wholesale. */
:root {
    --bg: #FBF9F4;
    --bg-soft: #F3EFE5;
    --text: #141414;
    --text-secondary: #3A3A38;
    --text-muted: #6E6A60;
    --accent: #C04A1F;
    --accent-warm: #A53D17;
    --rule: #1F1E1B;
    --rule-soft: #D8D2C2;
    --code-bg: #14130F;
    --code-text: #E7E2D2;
    --code-line-num: #6B6560;
    --inline-code-bg: #ECE7D9;
    --inline-code-text: #141414;
    --prose-width: 42rem;

    /* Editor palette tokens — consumed by author/static/author/css/author.css.
       The editor inherits theme typography and base colors, but its
       informational color encoding (calendar chips, save indicator, drop
       zones) needs a small fixed palette that themes provide. Keep these
       three variables defined; renaming or removing them silently breaks
       the editor (chip backgrounds become transparent, cell borders
       disappear). See themes/README.md for the contract. */
    --border: #D8D2C2;       /* editor cell/divider borders */
    --accent-light: #FBE0CC;  /* today-cell highlight, button hover, drop zones */
    --teal: #0F766E;          /* "published" chip + success indicator */
}

html { font-size: 16.5px; }

body {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* === Top bar — single hairline of accent === */
.top-bar {
    height: 2px;
    background: var(--accent);
}

/* === Preview banner === */
.preview-banner {
    max-width: var(--prose-width);
    margin: 1.25rem auto 0;
    padding: 0.625rem 1rem;
    border: 1px solid var(--accent);
    border-left: 3px solid var(--accent);
    background: var(--bg-soft);
    color: var(--text);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.82rem;
}

/* === Header — minimal wordmark + nav, single line === */
.site-header {
    max-width: var(--prose-width);
    margin: 0 auto;
    padding: 1.5rem 1.5rem 1rem;
}
.site-header nav {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
}
.site-name {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
    text-decoration: none;
}
.site-name::after {
    content: '.';
    color: var(--accent);
}
.site-nav {
    display: flex;
    gap: 1.5rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.site-nav a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s;
}
.site-nav a:hover { color: var(--accent); }

.header-rule {
    max-width: var(--prose-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}
.header-rule hr {
    border: none;
    height: 1px;
    background: var(--rule);
}

/* === Main === */
main {
    max-width: var(--prose-width);
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}

/* === § ornament — replaces fleuron everywhere it was used === */
.section-mark {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: block;
    margin-bottom: 0.6rem;
}
.section-mark::before {
    content: '§ ';
    color: var(--accent);
    margin-right: 0.2em;
}

/* === Post list === */
.post-entry {
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--rule-soft);
    position: relative;
}
.post-entry:last-of-type { border-bottom: none; }

.post-entry time {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
    font-variant-numeric: tabular-nums;
}
.post-entry h2 {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin-bottom: 0.55rem;
}
.post-entry h2 a {
    color: var(--text);
    text-decoration: none;
    transition: color 0.15s;
}
.post-entry h2 a:hover { color: var(--accent); }
.post-entry .excerpt {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}
.post-entry .meta {
    margin-top: 0.6rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

/* Read-more arrow */
.read-more {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.3em;
    color: var(--accent);
    transition: transform 0.15s;
}
.read-more:hover { transform: translateX(2px); }
.read-more svg { display: block; width: 0.85em; height: 0.85em; }

/* === Single post === */
.post-meta-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.6rem;
}
.post-header time {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}
.reading-time {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.post-header h1 {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 2.1rem;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.025em;
    margin-bottom: 1.5rem;
    color: var(--text);
}

/* Author/date/tags strip beneath title — bordered, mono. */
.post-header {
    margin-bottom: 2rem;
}
.post-header .post-categories,
.post-header .post-tags {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin: 0.2rem 0;
}
.post-header .post-categories a,
.post-header .post-tags a {
    color: var(--text-secondary);
    text-decoration: none;
}
.post-header .post-categories a:hover,
.post-header .post-tags a:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* === Banner image (retained from prior design) === */
.post-banner {
    margin: 0.75rem 0 1.75rem;
}
.post-banner img {
    display: block;
    max-width: min(100%, var(--prose-width));
    height: auto;
    border: 1px solid var(--rule-soft);
}
.post-banner figcaption {
    max-width: min(100%, var(--prose-width));
    margin-top: 0.45rem;
    text-align: left;
    color: var(--text-muted);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    line-height: 1.45;
    letter-spacing: 0.01em;
}
.post-banner figcaption::before {
    content: 'Fig. ';
    color: var(--accent);
    font-weight: 500;
}

/* === Sidebar image (retained — hangs in left margin) === */
.post-entry,
article {
    position: relative;
}
.post-image {
    position: absolute;
    left: -250px;
    top: 0;
    width: 220px;
    height: 220px;
    object-fit: contain;
    border: 1px solid var(--rule-soft);
    background: var(--bg-soft);
}

/* The sidebar image is absolutely positioned at top: 0 of its post-entry.
   If the entry's natural text content is shorter than the image height
   (220px), consecutive sidebar images would sit flush against each other
   — or worse, the previous image's bottom would visually overlap the
   following entry. Forcing each image-bearing entry to a min-height of
   220 + 10 = 230px gives a consistent 10px gap between consecutive
   sidebar images. Wide viewports only — at narrow widths the image
   flows inline (see the @media block below) and no min-height is needed. */
@media (min-width: 769px) {
    .post-entry:has(.post-image) {
        min-height: 230px;
    }
}

/* === Post content === */
.post-content { line-height: 1.72; font-size: 1rem; }
.post-content p { margin-bottom: 1.25rem; }
.post-content h2,
.post-content h3 {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
}
.post-content h2 {
    font-size: 1.2rem;
    line-height: 1.3;
    margin-top: 2.5rem;
    margin-bottom: 0.7rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule-soft);
}
.post-content h3 {
    font-size: 1.02rem;
    margin-top: 1.8rem;
    margin-bottom: 0.5rem;
}
.post-content a,
.excerpt a,
.related-posts a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var(--rule-soft);
    transition: text-decoration-color 0.15s;
}
.post-content a:hover,
.excerpt a:hover,
.related-posts a:hover {
    text-decoration-color: var(--accent);
}
.post-content strong { font-weight: 600; }
.post-content ul,
.post-content ol {
    padding-left: 1.4rem;
    margin-bottom: 1.25rem;
}
.post-content li { margin-bottom: 0.3rem; }
.post-content li::marker { color: var(--accent); }
.post-content blockquote {
    margin: 1.5rem 0;
    padding: 0.4rem 0 0.4rem 1.1rem;
    border-left: 2px solid var(--accent);
    color: var(--text-secondary);
    background: none;
    font-style: normal;
}

/* Inline code */
.post-content code {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.86em;
    background: var(--inline-code-bg);
    padding: 0.1em 0.4em;
    border-radius: 2px;
    color: var(--inline-code-text);
}

/* Footnotes — backref pill is mono accent. The renderer emits an
 * <ol> with id="fnN" items and a backref <a href="#fnrefN">. We
 * style what's there; we don't restructure. */
.post-content sup a,
.footnote-ref {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7em;
    color: var(--accent);
    text-decoration: none;
    padding: 0 0.15em;
}
.post-content sup a:hover { text-decoration: underline; }
.footnotes,
.post-content .footnotes {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-secondary);
}
.footnotes ol,
.post-content .footnotes ol {
    padding-left: 1.5rem;
}
.footnotes li,
.post-content .footnotes li {
    margin-bottom: 0.6rem;
}
.footnotes li::marker,
.post-content .footnotes li::marker {
    color: var(--accent);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85em;
}
.footnotes a.footnote-backref,
.post-content .footnotes a.footnote-backref {
    color: var(--text-muted);
    text-decoration: none;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8em;
    margin-left: 0.3em;
}
.footnotes a.footnote-backref:hover { color: var(--accent); }

/* === Related / prev-next / comments labels — mono § labels === */
.related-posts h2,
.legacy-comments h2,
.prev-next .nav-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.9rem;
}
.related-posts h2::before,
.legacy-comments h2::before {
    content: '§ ';
    color: var(--accent);
}

.related-posts {
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule-soft);
}
.related-posts ul {
    list-style: none;
    padding: 0;
}
.related-posts li {
    margin-bottom: 0.45rem;
    font-size: 0.95rem;
}
.related-posts li a { text-decoration: none; }
.related-posts li a:hover { text-decoration: underline; }

.prev-next {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule-soft);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    font-size: 0.95rem;
}
.prev-next a {
    color: var(--text);
    text-decoration: none;
    display: block;
}
.prev-next a:hover { color: var(--accent); }
.prev-next .next-post { text-align: right; }
.prev-next .nav-label { display: block; margin-bottom: 0.3rem; }

/* === Code blocks (preserved structure, restyled to Plex Mono) === */
.code-block {
    background: var(--code-bg);
    border-left: 2px solid var(--accent);
    margin: 1.75rem 0;
    margin-right: calc(-1.5rem - (100vw - var(--prose-width)) / 2);
    overflow: hidden;
}
.code-block-header {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 1rem 0;
}
.copy-btn {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: #A8A29E;
    background: transparent;
    border: 1px solid #4B4845;
    border-radius: 2px;
    padding: 0.2rem 0.65rem;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
}
.copy-btn:hover {
    color: #E7E5E4;
    border-color: #78716C;
    background: rgba(255,255,255,0.04);
}
.copy-btn.copied {
    color: #FBA66B;
    border-color: var(--accent);
}
.code-block pre {
    margin: 0;
    padding: 0.4rem 1.1rem 0.95rem 0.8rem;
    overflow-x: auto;
    line-height: 1.5;
}
.code-block code {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.82rem;
    color: var(--code-text);
    background: none;
    padding: 0;
}
.code-block table { border-collapse: collapse; }
.code-block .line-num {
    width: 2.5em;
    text-align: right;
    padding-right: 1em;
    color: var(--code-line-num);
    font-size: 0.78rem;
    user-select: none;
    pointer-events: none;
    vertical-align: top;
    white-space: nowrap;
}
.code-block .line-content { white-space: pre; vertical-align: top; }

/* === 404 === */
.not-found h1 {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}
.not-found p {
    margin-bottom: 1.1rem;
    color: var(--text-secondary);
}
.not-found-links { font-size: 0.95rem; }

/* === Search === */
.search-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2.25rem;
}
.search-form input {
    flex: 1;
    padding: 0.55rem 0.85rem;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.95rem;
    border: 1px solid var(--rule);
    border-radius: 0;
    background: var(--bg);
    color: var(--text);
    outline: none;
}
.search-form input:focus { border-color: var(--accent); }
.search-form button {
    padding: 0.55rem 1.1rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--bg);
    border-radius: 0;
    cursor: pointer;
    transition: background 0.15s;
}
.search-form button:hover { background: var(--accent-warm); border-color: var(--accent-warm); }
.search-attribution {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: -1.5rem;
    margin-bottom: 2rem;
    letter-spacing: 0.02em;
}
.search-attribution a {
    color: var(--text-muted);
    text-decoration: underline;
    text-decoration-color: var(--rule-soft);
}
.search-attribution a:hover { color: var(--accent); }

/* === Comments === */
.legacy-comments { padding-top: 0; margin-top: 2.5rem; }
.legacy-comments h2 { margin-bottom: 1.2rem; }
.comment { margin-bottom: 1.5rem; font-size: 0.92rem; }
.comment-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
    letter-spacing: 0.02em;
}
.comment-meta a { color: var(--text-secondary); text-decoration: none; }
.comment-meta a:hover { color: var(--accent); text-decoration: underline; }
.giscus-comments { margin-top: 1.75rem; }

/* === Pagination === */
.pagination {
    display: flex;
    justify-content: space-between;
    padding-top: 1.5rem;
    margin-top: 1rem;
    border-top: 1px solid var(--rule-soft);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}
.pagination a { color: var(--accent); text-decoration: none; }
.pagination a:hover { color: var(--accent-warm); text-decoration: underline; }

/* === Footer — ISSN-ish stamp on the right === */
.site-footer {
    max-width: var(--prose-width);
    margin: 0 auto;
    padding: 1.75rem 1.5rem 3rem;
    border-top: 1px solid var(--rule-soft);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.7;
    letter-spacing: 0.02em;
}
.site-footer a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s;
}
.site-footer a:hover { color: var(--accent); }
.site-footer .bio { margin-bottom: 0.35rem; }
.site-footer .legal { font-size: 0.68rem; color: var(--text-muted); opacity: 0.8; }

/* === Tag archive header / Categories index header === */
.tag-archive-header h1,
.category-archive-header h1 {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}
.tag-archive-header,
.category-archive-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--rule);
}

/* === Inline list-page metadata (categories, tags) === */
.post-categories-inline,
.post-tags-inline {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}
.post-categories-inline a,
.post-tags-inline a {
    color: var(--text-secondary);
    text-decoration: none;
}
.post-categories-inline a:hover,
.post-tags-inline a:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* === /blog/tags/ index === */
.tag-list {
    list-style: none;
    padding: 0;
    columns: 2;
    column-gap: 2rem;
    margin-top: 1rem;
}
.tag-list li {
    margin-bottom: 0.4rem;
    break-inside: avoid;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.95rem;
}
.tag-list li a {
    color: var(--text);
    text-decoration: none;
}
.tag-list li a:hover { color: var(--accent); text-decoration: underline; }
.tag-count {
    color: var(--text-muted);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    margin-left: 0.3rem;
}

/* Hide legacy fleuron divs if any historical pages still emit them. */
.fleuron, .fleuron-section, .fleuron-end { display: none; }

/* === Dark mode — keep both blocks in sync === */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #14130F;
        --bg-soft: #1F1D17;
        --text: #ECE7D9;
        --text-secondary: #B8B2A1;
        --text-muted: #837C68;
        --accent: #E07246;
        --accent-warm: #C04A1F;
        --rule: #B8B2A1;
        --rule-soft: #2F2C24;
        --code-bg: #0A0907;
        --code-text: #ECE7D9;
        --code-line-num: #4B4845;
        --inline-code-bg: #2A2720;
        --inline-code-text: #ECE7D9;
        /* Editor palette — see :root for the contract. Dark-mode values
           use a slightly lighter neutral for borders, a deeper warm tint
           for highlights, and a brighter teal for chip legibility. */
        --border: #44403C;
        --accent-light: #5C2A17;
        --teal: #2DD4BF;
    }
}
[data-theme="dark"] {
    --bg: #14130F;
    --bg-soft: #1F1D17;
    --text: #ECE7D9;
    --text-secondary: #B8B2A1;
    --text-muted: #837C68;
    --accent: #E07246;
    --accent-warm: #C04A1F;
    --rule: #B8B2A1;
    --rule-soft: #2F2C24;
    --code-bg: #0A0907;
    --code-text: #ECE7D9;
    --code-line-num: #4B4845;
    --inline-code-bg: #2A2720;
    --inline-code-text: #ECE7D9;
    /* Editor palette — kept in sync with the @media block above. */
    --border: #44403C;
    --accent-light: #5C2A17;
    --teal: #2DD4BF;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .search-form input { background: var(--bg-soft); }
    :root:not([data-theme="light"]) .copy-btn {
        color: #837C68;
        border-color: #2F2C24;
    }
    :root:not([data-theme="light"]) .copy-btn:hover {
        color: #B8B2A1;
        border-color: #4B4845;
    }
}
[data-theme="dark"] .search-form input { background: var(--bg-soft); }
[data-theme="dark"] .copy-btn {
    color: #837C68;
    border-color: #2F2C24;
}
[data-theme="dark"] .copy-btn:hover {
    color: #B8B2A1;
    border-color: #4B4845;
}

/* === Theme toggle === */
.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--text-muted);
    transition: color 0.15s;
}
.theme-toggle:hover { color: var(--accent); }

/* === Print === */
@media print {
    .top-bar,
    .site-header,
    .header-rule,
    .site-footer,
    .giscus-comments,
    .legacy-comments,
    .prev-next,
    .related-posts,
    .copy-btn,
    .code-block-header,
    .search-form,
    .pagination,
    .theme-toggle,
    .reading-time {
        display: none !important;
    }

    body {
        background: white;
        color: black;
        font-size: 11pt;
        line-height: 1.5;
        max-width: 100%;
    }
    main {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
    .post-header h1 { font-size: 18pt; margin-bottom: 0.5rem; }
    .post-header time { color: #333; }
    .post-content { line-height: 1.5; }
    .post-content a { color: black; text-decoration: underline; }
    .post-content a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #555;
    }
    .post-content a[href^="#"]::after,
    .post-content a[href^="javascript"]::after { content: none; }
    .code-block {
        background: #F5F5F0;
        border-left: 2px solid #999;
        margin-right: 0;
        break-inside: avoid;
    }
    .code-block code { color: black; }
    .code-block .line-num { color: #999; }
    .post-content code { background: #F0F0EC; color: black; }
    .post-image { position: static; max-width: 100%; height: auto; }
    .post-content blockquote {
        border-left-color: #999;
        background: none;
        color: #333;
    }
    h1, h2, h3 { break-after: avoid; }
    .code-block, blockquote, img { break-inside: avoid; }
}

/* === Responsive === */
@media (max-width: 768px) {
    html { font-size: 16px; }
    .site-header { padding: 1.25rem 1rem 0.85rem; }
    .header-rule { padding: 0 1rem; }
    main { padding: 1.75rem 1rem 3rem; }
    .site-name { font-size: 1rem; }
    .site-nav { gap: 1rem; font-size: 0.68rem; }
    .post-header h1 { font-size: 1.55rem; }
    .code-block { margin-right: -1rem; }
    .post-image {
        position: static;
        display: block;
        width: 100%;
        max-width: 220px;
        height: auto;
        margin: 0 0 1rem 0;
    }
    .prev-next { grid-template-columns: 1fr; }
    .prev-next .next-post { text-align: left; }
    .site-footer { padding: 1.25rem 1rem 2rem; }
    .tag-list { columns: 1; }
}

/* === Mermaid === */
.mermaid {
    text-align: center;
    margin: 1.75rem 0;
}
.mermaid svg { max-width: 100%; height: auto; }

/* ===========================================================================
 * Broken-link decoration (added by the link-checker template filter
 * `mark_broken_links`). A broken anchor is wrapped in:
 *
 *   <span class="linkcheck-broken" data-broken-note="(link returning 404…)">
 *     <a href="…">anchor text</a>
 *   </span>
 *
 * The wrap is purely presentational — the source Markdown is untouched
 * and the link remains clickable. When the link gets fixed (or the
 * post is rescanned and the URL recovers), the next render drops the
 * wrap automatically.
 * =========================================================================== */
.linkcheck-broken > a {
    text-decoration: line-through;
    text-decoration-color: var(--linkcheck-broken-color, #c0392b);
    text-decoration-thickness: 1px;
    color: var(--linkcheck-broken-color, #c0392b);
}
.linkcheck-broken > a:hover {
    text-decoration-color: var(--linkcheck-broken-color-hover, #7f1d1d);
    color: var(--linkcheck-broken-color-hover, #7f1d1d);
}
.linkcheck-broken::after {
    /* Python writes the note text into the data-broken-note attribute
       (e.g. "(link returning 404 as of last check)") so the user can
       see at a glance what's wrong without inspecting the page. */
    content: " " attr(data-broken-note);
    font-style: italic;
    font-size: .9em;
    color: var(--linkcheck-broken-note-color, #7f1d1d);
    margin-left: .25em;
}
[data-theme="dark"] .linkcheck-broken > a {
    color: #e57373;
    text-decoration-color: #e57373;
}
[data-theme="dark"] .linkcheck-broken > a:hover {
    color: #ffab91;
    text-decoration-color: #ffab91;
}
[data-theme="dark"] .linkcheck-broken::after {
    color: #ffab91;
}