/* The palette is not declared here. It lives in assets/css/tokens.css,
           which every page links, because this file used to carry its own -
           indigo on near-black - and a link or a button therefore meant one
           colour on a briefing and a different one on every other page. */


        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.7;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 0 24px;
        }

        /* Header */
        header {
            padding: 20px 0;
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 0;
            background: var(--bg-primary);
            z-index: 100;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .back-link {
            color: var(--text-secondary);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.875rem;
            transition: color 0.2s;
        }

        .back-link:hover {
            color: var(--accent);
        }

        .theme-toggle {
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 8px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.2s;
        }

        .theme-toggle:hover {
            color: var(--text-primary);
            border-color: var(--accent);
        }

        .theme-toggle .sun { display: none; }
        .theme-toggle .moon { display: block; }
        [data-theme="light"] .theme-toggle .sun { display: block; }
        [data-theme="light"] .theme-toggle .moon { display: none; }

        /* Article */
        article {
            padding: 60px 0;
        }

        .post-header {
            margin-bottom: 48px;
        }

        /* Read-aloud controls - hidden until JS confirms speechSynthesis exists. */
        .listen-bar { display: flex; align-items: center; gap: 10px; margin: 22px 0 4px; }
        .listen-btn, .listen-stop {
            display: inline-flex; align-items: center; gap: 8px;
            background: var(--bg-card, rgba(255,255,255,0.05));
            border: 1px solid var(--border, rgba(255,255,255,0.12));
            color: var(--text-primary, #fff); font-family: inherit; font-size: 0.85rem;
            padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: .2s;
        }
        .listen-btn:hover, .listen-stop:hover { border-color: var(--accent, #4f7cff); color: var(--accent, #4f7cff); }
        .listen-stop { padding: 8px 12px; }
        .listen-icon { font-size: 0.7rem; }
        .listen-progress { font-size: 0.75rem; color: var(--text-secondary, #9aa4bf); font-variant-numeric: tabular-nums; }
        .post-content p.speaking { background: color-mix(in srgb, var(--accent, #4f7cff) 12%, transparent); border-radius: 4px; }

        /* Automated-analysis section: rendered from knowledgeGraph + structure/<id>.deep.json */
        .analysis { margin: 56px 0 0; padding-top: 32px; border-top: 1px solid var(--border); }
        .analysis-h { font-size: 1.4rem; margin-bottom: 20px; }
        .analysis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
        .an-card, .an-block { border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; background: var(--bg-secondary); }
        .an-block { margin-top: 16px; }
        .an-lab { display: block; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); }
        .an-score { font-size: 1.8rem; font-weight: 600; margin: 6px 0 10px; }
        .an-score span { font-size: 0.95rem; font-weight: 400; color: var(--text-secondary); }
        .an-checks, .an-bars, .an-findings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
        .an-checks li { font-size: 0.87rem; display: flex; gap: 8px; align-items: center; }
        .an-checks li.ok span { color: #3fa46a; }
        .an-checks li.no span { color: #d1616a; }
        .an-bars li { display: grid; grid-template-columns: 96px 1fr 34px; gap: 8px; align-items: center; font-size: 0.82rem; }
        .an-bars i { display: block; height: 6px; border-radius: 3px; background: var(--accent); opacity: 0.75; }
        .an-bars b { font-weight: 500; color: var(--text-secondary); text-align: right; font-variant-numeric: tabular-nums; }
        .an-fw { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
        .an-fw span { font-size: 0.72rem; border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; color: var(--text-secondary); }
        .an-note { font-size: 0.84rem; color: var(--text-secondary); margin: 6px 0 12px; }
        .an-findings li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.87rem; padding: 5px 0; border-bottom: 1px solid var(--border); }
        .an-findings li:last-child { border-bottom: 0; }
        .an-findings code { font-size: 0.78rem; color: var(--text-tertiary); }
        .an-sev { flex: none; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; color: #fff; margin-top: 2px; }
        .an-sev.sev-high { background: #a3323a; }
        .an-sev.sev-medium { background: #8a6520; }
        .an-sev.sev-low { background: #4a6b52; }
        .an-deps { width: 100%; margin-top: 8px; }
        .an-deps th { text-align: left; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
            color: var(--text-tertiary); font-weight: 500; padding: 4px 6px; border-bottom: 1px solid var(--border); }
        .an-deps td { font-size: 0.82rem; }
        .an-deps .beh { color: #d1616a; font-variant-numeric: tabular-nums; white-space: nowrap; }
        .an-links { display: flex; flex-wrap: wrap; gap: 18px; margin: 18px 0 0; font-size: 0.88rem; }
        .an-links a { color: var(--accent); text-decoration: none; }
        .an-links a:hover { text-decoration: underline; }

        .post-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            margin-bottom: 16px;
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        .post-meta span {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .post-language {
            background: var(--accent);
            color: white;
            padding: 2px 10px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .post-type {
            background: rgba(99, 102, 241, 0.1);
            color: var(--accent);
            padding: 2px 10px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 500;
            text-transform: capitalize;
        }

        h1 {
            font-size: 2.5rem;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 16px;
            background: var(--gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .post-description {
            font-size: 1.25rem;
            color: var(--text-secondary);
            margin-bottom: 16px;
        }

        .post-parent {
            font-size: 0.875rem;
            color: var(--text-tertiary);
        }

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

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

        .post-image {
            width: 100%;
            border-radius: 16px;
            margin-bottom: 48px;
            aspect-ratio: 16/9;
            object-fit: cover;
        }

        .post-content {
            font-size: 1.125rem;
        }

        .post-content p {
            margin-bottom: 24px;
        }

        .post-content .post-h {
            font-family: var(--font-display, Georgia, serif);
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--text-primary, #F3EBE2);
            margin: 40px 0 14px;
            text-wrap: balance;
        }
        .post-content .post-h:first-child { margin-top: 0; }

        .post-content .post-pending {
            font-size: 0.92rem;
            color: var(--text-tertiary, #6B5D51);
            border-left: 2px solid var(--border, rgba(255,240,228,0.14));
            padding-left: 14px;
        }

        .post-topics {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 48px;
            padding-top: 24px;
            border-top: 1px solid var(--border);
        }

        .topic-tag {
            background: rgba(99, 102, 241, 0.1);
            color: var(--accent);
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.875rem;
        }

        /* Actions */
        .post-actions {
            display: flex;
            gap: 16px;
            margin-top: 48px;
        }

        .post-actions a {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            border-radius: 10px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.2s;
        }

        .primary-btn {
            background: var(--gradient);
            color: var(--on-accent);
        }

        .primary-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
        }

        .secondary-btn {
            background: var(--bg-secondary);
            color: var(--text-primary);
            border: 1px solid var(--border);
        }

        .secondary-btn:hover {
            border-color: var(--accent);
        }

        /* Footer */
        footer {
            padding: 40px 0;
            border-top: 1px solid var(--border);
            text-align: center;
            color: var(--text-tertiary);
            font-size: 0.875rem;
        }

        footer a {
            color: var(--accent);
            text-decoration: none;
        }

        /* Mermaid diagram styling */
        .mermaid {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 24px;
            margin: 24px 0;
            overflow-x: auto;
        }

        .mermaid svg {
            max-width: 100%;
            height: auto;
        }

        /* Code blocks styling (GitNexus-inspired) */
        .post-content pre {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px 20px;
            overflow-x: auto;
            margin: 24px 0;
            font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
            font-size: 0.875rem;
            line-height: 1.6;
        }

        .post-content code {
            background: rgba(99, 102, 241, 0.1);
            color: #e6b450;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
            font-size: 0.875em;
        }

        .post-content pre code {
            background: none;
            color: inherit;
            padding: 0;
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: var(--bg-secondary);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--text-tertiary);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--accent);
        }

        @media (max-width: 768px) {
            h1 { font-size: 1.75rem; }
            .post-description { font-size: 1rem; }
            .post-content { font-size: 1rem; }
            .post-actions { flex-direction: column; }
            .post-actions a { justify-content: center; }
        }
/* ---- numbered sections ------------------------------------------
           Counters rather than numbers in the text, so the article source stays
           readable and renumbers itself when a section is added. h3 is a section
           because the renderer shifts markdown down one level: the page already
           owns the h1, so the article's own top-level heading is a section in it. */
        .post-content { counter-reset: section figure; }
        /* Numbering is gated on .numbered, which the generator adds only when it
           found at least three sections. Doing it by heading class instead was
           wrong twice over: it skipped the recovered headings, which now come from
           a specific pattern rather than a loose guess and are worth numbering,
           and it still printed a lone "1." on an article that happened to have
           exactly one. */
        .post-content.numbered h3 { counter-increment: section; counter-reset: subsection; }
        .post-content h4 { counter-increment: subsection; }
        .post-content.numbered h3::before,
        .post-content.numbered h4::before {
            color: var(--text-tertiary);
            font-variant-numeric: tabular-nums;
            font-weight: 500;
            margin-right: 0.5em;
        }
        .post-content.numbered h3::before { content: counter(section) "."; }
        .post-content.numbered h4::before { content: counter(section) "." counter(subsection); }

        .post-content h3 {
            font-size: 1.32rem;
            line-height: 1.3;
            margin: 2.6em 0 0.7em;
            letter-spacing: -0.01em;
        }
        .post-content h4 {
            font-size: 1.06rem;
            line-height: 1.35;
            margin: 2em 0 0.5em;
            color: var(--text-primary);
        }
        /* The first section should not be pushed away from the lede. */
        .post-content > h3:first-child,
        .post-content > h4:first-child { margin-top: 0.2em; }

        /* ---- abstract and contents ---------------------------------------
           A paper opens with both. The abstract is the repository's own one-line
           description, which was already on the page as small grey text; labelling
           and setting it apart is the whole change, and it introduces no content
           that could be wrong.

           The contents is one line rather than a stacked list. The median article
           here is 3,503 characters across six sections, and a bulleted list of six
           links is a screenful restating what a scroll already shows. */
        .post-abstract {
            border-left: 2px solid var(--border);
            padding: 0.1em 0 0.1em 1.1em;
            margin: 0 0 1.8em;
        }
        .post-abstract-lab {
            display: block;
            font-family: var(--font-mono, ui-monospace, monospace);
            font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
            color: var(--text-tertiary); margin-bottom: 0.35em;
        }
        .post-abstract .post-description { margin: 0; }

        .post-toc {
            display: flex; flex-wrap: wrap; align-items: baseline;
            gap: 0.35em 1.1em;
            margin: 0 0 2.4em;
            padding-bottom: 1em;
            border-bottom: 1px solid var(--border);
            font-size: 0.84rem;
        }
        .post-toc-lab {
            font-family: var(--font-mono, ui-monospace, monospace);
            font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
            color: var(--text-tertiary);
        }
        /* Numbered to match the headings they point at, from the same counter, so
           the strip and the body cannot disagree. */
        .post-content.numbered .post-toc { counter-reset: tocitem; }
        .post-content.numbered .post-toc a { counter-increment: tocitem; }
        .post-content.numbered .post-toc a::before {
            content: counter(tocitem) ". ";
            color: var(--text-tertiary);
            font-variant-numeric: tabular-nums;
        }
        .post-toc a {
            color: var(--text-secondary); text-decoration: none;
            border-bottom: 1px solid transparent;
        }
        .post-toc a:hover { color: var(--accent); border-bottom-color: var(--accent); }

        /* A heading linked from the strip should not land under the fixed nav. */
        .post-content h3, .post-content h4 { scroll-margin-top: 90px; }

        /* ---- the reading setting -----------------------------------------
           A serif at 19px on a 44rem column, chosen from a four-way comparison of
           the same real article on this exact ground.

           The size and the width travel together and neither is decorative. A
           serif fits more characters into a column than a sans of the same size,
           so keeping 18px and only swapping the face pushed the line to 84
           characters - past where the eye reliably finds the start of the next
           one. One extra pixel and a slightly narrower column bring it back to 74,
           inside the comfortable 65 to 75.

           No download: this is the system stack the headings already use, and
           these pages deliberately load no webfont at all. */
        .post-content {
            font-family: var(--font-display, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif);
            font-size: 19px;
            line-height: 1.72;
            max-width: 44rem;
        }

        /* ---- prose -------------------------------------------------------- */
        .post-content p { margin: 0 0 1.15em; }
        /* Identifiers are the nouns of this writing, and there are a great many of
           them: a paragraph naming six functions carried six coloured pills, which
           speckled the page and made the prose harder to read rather than easier.
           Monospace and a slight warmth is enough to mark a name as a name. */
        /* Monospace and the labelled strips keep their own faces: the serif is for
           running prose, and an identifier set in it stops looking like an
           identifier. */
        .post-content code,
        .post-content pre {
            font-family: 'JetBrains Mono', var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
        }
        .post-content .post-toc,
        .post-content .post-toc-lab {
            font-family: var(--font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
        }
        .post-content .post-toc-lab { font-family: var(--font-mono, ui-monospace, Menlo, monospace); }

        .post-content code {
            white-space: nowrap;
            background: none;
            padding: 0;
            border-radius: 0;
            color: #d8b489;
        }
        .post-content a code { color: inherit; }
        .post-content p > code,
        .post-content li > code,
        .post-content td > code { font-size: 0.84em; }

        .post-content ul,
        .post-content ol {
            margin: 0 0 1.3em;
            padding-left: 1.4em;
        }
        .post-content li { margin: 0 0 0.42em; line-height: 1.65; }
        .post-content li::marker { color: var(--text-tertiary); }
        .post-content ol { font-variant-numeric: tabular-nums; }

        /* A caveat, not a pull quote: a rule and quieter text, no large type. */
        .post-content blockquote {
            margin: 1.6em 0;
            padding: 0.1em 0 0.1em 1.1em;
            border-left: 2px solid var(--border);
            color: var(--text-secondary);
        }
        .post-content blockquote p:last-child { margin-bottom: 0; }

        .post-content hr {
            border: 0;
            border-top: 1px solid var(--border);
            margin: 2.4em 0;
        }

        /* ---- tables ------------------------------------------------------
           Horizontal rules only, which is the one typographic convention worth
           borrowing wholesale from papers: vertical lines add nothing a column
           of aligned numbers does not already say. */
        .post-content .table-scroll {
            overflow-x: auto;
            margin: 1.8em 0;
            /* A wide table scrolls inside its own box; the page never does. */
            max-width: 100%;
        }
        .post-content table {
            border-collapse: collapse;
            width: 100%;
            font-size: 0.9rem;
            font-variant-numeric: tabular-nums;
        }
        .post-content thead th {
            text-align: left;
            padding: 0.5em 0.9em;
            border-bottom: 1.5px solid var(--text-tertiary);
            color: var(--text-primary);
            font-weight: 600;
            white-space: nowrap;
        }
        .post-content tbody td {
            padding: 0.5em 0.9em;
            border-bottom: 1px solid var(--border);
            color: var(--text-secondary);
            vertical-align: top;
        }
        .post-content tbody tr:last-child td { border-bottom: 1.5px solid var(--text-tertiary); }
        /* A count reads better right-aligned, and the renderer marks which columns
           actually hold counts. Doing it by position instead - "the last column is
           a count" - flush-righted a column of prose on the first real table. */
        .post-content th.num,
        .post-content td.num { text-align: right; }

        /* ---- code --------------------------------------------------------
           The install commands are the one thing a reader will copy, so the block
           gets a label and enough room to be selected without care. */
        .post-content pre {
            position: relative;
            padding: 1.1em 1.2em;
            margin: 1.6em 0;
            tab-size: 2;
        }
        .post-content pre[data-lang]::before {
            content: attr(data-lang);
            position: absolute;
            top: 0.55em;
            right: 0.9em;
            font-size: 0.62rem;
            letter-spacing: 0.09em;
            text-transform: uppercase;
            color: var(--text-tertiary);
        }
        .post-content pre code { white-space: pre; }

        /* ---- numbered figures --------------------------------------------
           The analysis blocks are figures in the sense that matters: a reader
           refers to them, so they need numbers. The label already present becomes
           the caption. */
        /* Only blocks that actually contain a diagram. The findings list is not a
           figure and numbering it as one invites a reference that means nothing. */
        .post-analysis { counter-reset: figure; }
        .an-block:has(.mermaid) { counter-increment: figure; }
        .an-block:has(.mermaid) > .an-lab::before {
            content: "Figure " counter(figure) " ";
            color: var(--text-tertiary);
            font-variant-numeric: tabular-nums;
        }

        @media (max-width: 700px) {
            .post-content h3 { font-size: 1.2rem; margin-top: 2.1em; }
            .post-content table { font-size: 0.84rem; }
            .post-content pre { padding: 0.9em 1em; font-size: 0.8rem; }
        }