/* ============================================
   Blog - Public + Management Styles
   ============================================ */

/* Component-tier wash tokens (ADR core/012, blog.css unit). Resolve to
   primitives; named convergence debt for the light-authoring unit. */
:root {
    --blog-teal-a2p5: var(--color-teal-400-alpha-2p5);
    --blog-teal-a04:  var(--color-teal-400-alpha-04);
    --blog-teal-a05:  var(--color-teal-400-alpha-05);
    --blog-teal-a06:  var(--color-teal-400-alpha-06);
    --blog-teal-a07:  var(--color-teal-400-alpha-07);
    --blog-teal-a08:  var(--color-teal-400-alpha-08);
    --blog-teal-a18:  var(--color-teal-400-alpha-18);
    --blog-teal-a40:  var(--color-teal-400-alpha-40);
    --blog-teal-deep-a18: var(--color-teal-500-alpha-18);
    --blog-gold-a2p5: var(--color-gold-400-alpha-2p5);
    --blog-gold-a04:  var(--color-gold-400-alpha-04);
    --blog-gold-a06:  var(--color-gold-400-alpha-06);
    --blog-gold-a12:  var(--color-gold-400-alpha-12);
    --blog-gold-a18:  var(--color-gold-400-alpha-18);
    --blog-indigo-a06: var(--color-indigo-alpha-06);
    --blog-indigo-a18: var(--color-indigo-alpha-18);
    --blog-red-a06:   var(--color-red-450-alpha-06);
    --blog-red-a18:   var(--color-red-450-alpha-18);
    --blog-white-a1p5: var(--wash-1p5);
    --blog-black-a25:  var(--color-black-alpha-25);
}

/* ============================================================
   The Dispatch - editorial blog index
   ============================================================ */

/* Push the body to the dispatch dark so the area outside the 1200px
   container blends in instead of showing the storm.css body gray.
   Mirrors the same fix on .home and .guide-layout. */
body:has(.dispatch),
body:has(.reading) {
    background: var(--dispatch-bg);
}

.dispatch {
    /* --dispatch-* tokens come from the site-wide :root in
       dispatch-tokens.css (ADR core/012); the hand copy that lived
       here is deleted, not maintained. */

    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem 5rem;
    background: var(--dispatch-bg);
    color: var(--dispatch-text);
    font-feature-settings: 'tnum' 1, 'zero' 1;
}

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

.dispatch-sep { color: var(--dispatch-text-faint); margin: 0 0.4em; }
.dispatch-em  { color: var(--dispatch-gold); margin-right: 0.4em; font-family: var(--dispatch-mono); }

/* Masthead */
.dispatch-masthead { margin-bottom: 2.5rem; }
.dispatch-masthead-meta {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0;
    font-family: var(--dispatch-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--dispatch-text-muted);
    text-transform: uppercase;
    padding: 0.55rem 0.85rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--dispatch-border);
    border-left: 3px solid var(--dispatch-teal);
    border-radius: 2px;
    background: var(--dispatch-surface);
}
.dispatch-masthead-est { margin-left: auto; color: var(--dispatch-text-faint); }
.dispatch-title {
    font-family: var(--dispatch-editorial);
    font-weight: 500;
    font-size: clamp(2.8rem, 6vw, 4.2rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--dispatch-text-strong);
    margin: 0 0 1rem;
}
.dispatch-rule {
    border: 0;
    height: 1px;
    /* Softer: fades from teal to transparent instead of a flat 2px
       block. Keeps the dispatch identity without the wall-of-green. */
    background: linear-gradient(
        90deg,
        var(--dispatch-teal) 0%,
        var(--dispatch-teal) 30%,
        transparent 100%
    );
    margin: 0 0 0;
}

/* Cross-link card under the masthead - points readers at the Guide. */
.dispatch-masthead-cross {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0.55rem 0.85rem;
    background: var(--dispatch-surface);
    border: 1px solid var(--dispatch-border);
    border-left: 3px solid var(--dispatch-gold);
    border-radius: 2px;
    font-family: var(--dispatch-mono);
    font-size: 0.74rem;
    color: var(--dispatch-text-muted);
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s;
}
.dispatch-masthead-cross:hover {
    background: var(--blog-gold-a04);
    border-color: var(--dispatch-border-strong);
}
.dispatch-masthead-cross-label { color: var(--dispatch-text-muted); }
.dispatch-masthead-cross-link {
    color: var(--dispatch-gold);
    font-weight: 600;
}
.dispatch-masthead-cross:hover .dispatch-masthead-cross-link {
    color: var(--dispatch-text-strong);
}

/* Filter pills */
.dispatch-filters {
    display: flex; align-items: center; flex-wrap: wrap; gap: 1rem;
    margin: 1.75rem 0 2rem;
}
.dispatch-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dispatch-pill {
    display: inline-flex; align-items: center;
    padding: 0.4rem 0.9rem;
    font-family: var(--dispatch-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--dispatch-text-muted);
    border: 1px solid var(--dispatch-border-strong);
    border-radius: 2px;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.dispatch-pill:hover { color: var(--dispatch-text); border-color: var(--dispatch-text-muted); }
.dispatch-pill--active {
    color: var(--dispatch-teal);
    border-color: var(--dispatch-teal);
}
.dispatch-count {
    margin-left: auto;
    font-family: var(--dispatch-mono);
    font-size: 0.75rem;
    color: var(--dispatch-text-muted);
}

/* Hero row (hero post + activity feed) */
.dispatch-hero-row {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    gap: 2rem;
    border-top: 1px solid var(--dispatch-border);
    padding-top: 2rem;
}

.dispatch-hero {
    display: block;
    border-right: 1px solid var(--dispatch-border);
    padding-right: 2rem;
    transition: opacity 0.15s;
}
.dispatch-hero:hover { opacity: 0.85; }

.dispatch-hero-image {
    display: block;
    margin: 0 0 1.5rem;
    border: 1px solid var(--dispatch-border);
    border-radius: 1px;
    overflow: hidden;
    background: var(--dispatch-surface);
    aspect-ratio: 16 / 9;
}
.dispatch-hero-image img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
}

.dispatch-card-image {
    display: block;
    margin: 0 0 1.25rem;
    border: 1px solid var(--dispatch-border);
    border-radius: 1px;
    overflow: hidden;
    background: var(--dispatch-surface);
    aspect-ratio: 16 / 10;
}
.dispatch-card-image img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
}

.dispatch-hero-meta,
.dispatch-card-meta {
    display: flex; align-items: baseline; flex-wrap: wrap;
    font-family: var(--dispatch-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--dispatch-text-muted);
    margin-bottom: 1rem;
}

.dispatch-hero-title {
    font-family: var(--dispatch-editorial);
    font-weight: 500;
    font-size: clamp(1.85rem, 3.6vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--dispatch-text-strong);
    margin: 0 0 1.25rem;
    text-wrap: balance;
}

.dispatch-hero-excerpt {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--dispatch-text);
    margin: 0 0 1.5rem;
    max-width: 60ch;
    text-wrap: pretty;
}

.dispatch-hero-byline {
    display: flex; flex-wrap: wrap; align-items: baseline;
    font-family: var(--dispatch-mono);
    font-size: 0.74rem;
    color: var(--dispatch-text-muted);
}
.dispatch-tag-link { color: var(--dispatch-teal); }

/* Activity feed */
.dispatch-feed {
    display: flex; flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding-left: 0;
    font-family: var(--dispatch-mono);
}
.dispatch-feed-label {
    font-size: 0.7rem;
    color: var(--dispatch-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.dispatch-feed-stream {
    border: 1px solid var(--dispatch-teal);
    padding: 1rem 1.25rem;
    color: var(--dispatch-teal-bright);
    font-size: 0.78rem;
    line-height: 1.7;
    border-radius: 1px;
    align-self: stretch;
}
.dispatch-feed-line { white-space: pre; }
.dispatch-feed-status {
    border: 1px solid var(--dispatch-teal);
    padding: 0.5rem 1rem;
    color: var(--dispatch-teal);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    border-radius: 1px;
    align-self: stretch;
    text-align: center;
}

.dispatch-tag-graph-mount {
    border: 1px solid var(--dispatch-teal);
    border-radius: 1px;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    overflow: hidden;
}
.dispatch-tag-graph-mount :global(svg) { max-width: 100%; height: auto; }

/* Secondary cards */
.dispatch-secondary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--dispatch-border);
    border-bottom: 1px solid var(--dispatch-border);
    margin-top: 0;
}
.dispatch-card {
    display: block;
    padding: 1.5rem 1.5rem 1.75rem;
    border-right: 1px solid var(--dispatch-border);
    transition: opacity 0.15s, background 0.15s;
}
.dispatch-card:last-child { border-right: 0; }
.dispatch-card:hover { background: var(--blog-teal-a2p5); }
.dispatch-card-title {
    font-family: var(--dispatch-editorial);
    font-weight: 500;
    font-size: 1.15rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--dispatch-text-strong);
    margin: 0 0 1rem;
    text-wrap: balance;
}
.dispatch-card-byline {
    font-family: var(--dispatch-mono);
    font-size: 0.7rem;
    color: var(--dispatch-text-muted);
}

/* Category color tokens - per spec: dispatch = teal, release = gold,
   incident = red, deep-dive = blue. */
.dispatch-cat {
    font-family: var(--dispatch-mono);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--dispatch-text-muted);
}
.dispatch-cat--dispatch  { color: var(--dispatch-teal); }
.dispatch-cat--release   { color: var(--dispatch-gold); }
.dispatch-cat--incident  { color: var(--dispatch-red); }
.dispatch-cat--deep-dive { color: var(--dispatch-blue); }

/* Pill tints (tag-row) - same color tokens, on the pill border when active */
.dispatch-pill--dispatch.dispatch-pill--active  { color: var(--dispatch-teal); border-color: var(--dispatch-teal); }
.dispatch-pill--release.dispatch-pill--active   { color: var(--dispatch-gold); border-color: var(--dispatch-gold); }
.dispatch-pill--incident.dispatch-pill--active  { color: var(--dispatch-red);  border-color: var(--dispatch-red); }
.dispatch-pill--deep-dive.dispatch-pill--active { color: var(--dispatch-blue); border-color: var(--dispatch-blue); }

/* Archive table */
.dispatch-archive { margin-top: 3rem; }
.dispatch-archive-label {
    font-family: var(--dispatch-mono);
    font-size: 0.72rem;
    color: var(--dispatch-text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 1.25rem;
}
.dispatch-archive-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--dispatch-mono);
    font-size: 0.85rem;
}
.dispatch-archive-table thead th {
    text-align: left;
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dispatch-text-faint);
    border-bottom: 1px solid var(--dispatch-border);
    padding: 0.65rem 1rem;
}
.dispatch-archive-table tbody td {
    border-bottom: 1px solid var(--dispatch-border);
    padding: 1.1rem 1rem;
    vertical-align: middle;
    color: var(--dispatch-text);
}
.dispatch-archive-table tbody tr:last-child td { border-bottom: 0; }
.dispatch-archive-table tbody tr { transition: background 0.12s; }
.dispatch-archive-table tbody tr:hover { background: var(--blog-teal-a04); }
.dispatch-archive-table tbody tr:hover .dispatch-col-title a { color: var(--dispatch-teal-bright); }

.dispatch-col-date  { width: 7rem; color: var(--dispatch-text-muted); }
.dispatch-col-cat   { width: 8rem; }
.dispatch-col-ttr   { width: 4rem; color: var(--dispatch-text-muted); }
.dispatch-col-title { font-family: var(--dispatch-editorial); font-size: 1.05rem; }
.dispatch-col-title a { color: var(--dispatch-text-strong); transition: color 0.12s; }

.dispatch-empty {
    padding: 4rem 1rem;
    text-align: center;
    font-family: var(--dispatch-mono);
    color: var(--dispatch-text-muted);
    border: 1px dashed var(--dispatch-border);
    margin-top: 2rem;
}
.dispatch-empty a { color: var(--dispatch-teal); text-decoration: underline; }

/* Archive pagination */
.dispatch-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--dispatch-border);
    font-family: var(--dispatch-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
}
.dispatch-pagination-link {
    color: var(--dispatch-teal);
    text-decoration: none;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--dispatch-border-strong);
    border-radius: 2px;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.dispatch-pagination-link:hover {
    color: var(--dispatch-teal-bright);
    border-color: var(--dispatch-teal);
    background: var(--blog-teal-a04);
}
.dispatch-pagination-link--disabled {
    color: var(--dispatch-text-faint);
    border-color: var(--dispatch-border);
    pointer-events: none;
}
.dispatch-pagination-current {
    color: var(--dispatch-text-muted);
}

/* Responsive */
@media (max-width: 900px) {
    .dispatch { padding: 2rem 1.25rem 4rem; }
    .dispatch-hero-row { grid-template-columns: 1fr; gap: 1.5rem; }
    .dispatch-hero { border-right: 0; padding-right: 0; padding-bottom: 1.5rem; border-bottom: 1px solid var(--dispatch-border); }
    .dispatch-secondary { grid-template-columns: 1fr; }
    .dispatch-card { border-right: 0; border-bottom: 1px solid var(--dispatch-border); }
    .dispatch-card:last-child { border-bottom: 0; }
}

@media (max-width: 640px) {
    .dispatch-count { margin-left: 0; width: 100%; }
    .dispatch-archive-table { font-size: 0.78rem; }
    .dispatch-col-date  { width: auto; }
    .dispatch-col-cat   { display: none; }
    .dispatch-col-ttr   { width: auto; }
    .dispatch-col-title { font-size: 0.95rem; }
}

/* ============================================================
   Reading page - 3-column Dispatch article layout
   Uses --dispatch-* tokens declared on .dispatch above; we
   re-declare a scoped set on .reading so the article is
   self-contained even when it's the only thing on the page.
   ============================================================ */

.reading {
    /* --dispatch-* tokens come from the site-wide :root in
       dispatch-tokens.css (ADR core/012); the hand copy that lived
       here is deleted, not maintained. */

    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 2rem 5rem;
    background: var(--dispatch-bg);
    color: var(--dispatch-text);
    font-feature-settings: 'tnum' 1, 'zero' 1;
}

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

/* Top crumb bar - bordered, terminal-prompt vibe, edit button at right. */
.reading-crumbs {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0;
    font-family: var(--dispatch-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--dispatch-text-muted);
    padding: 0.55rem 0.85rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--dispatch-border);
    border-left: 3px solid var(--dispatch-teal);
    border-radius: 2px;
    background: var(--dispatch-surface);
}
.reading-crumb-back {
    color: var(--dispatch-teal);
    font-weight: 600;
    margin-right: 0.4em;
    transition: color 0.12s;
}
.reading-crumb-back:hover { color: var(--dispatch-teal-bright); }
.reading-crumbs > .dispatch-cat { font-weight: 600; }
.reading-edit-link {
    margin-left: auto;
    color: var(--dispatch-gold);
    border: 1px solid var(--dispatch-gold);
    padding: 0.2rem 0.6rem;
    border-radius: 2px;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background 0.12s;
}
.reading-edit-link:hover { background: var(--blog-gold-a12); }

/* Sub-tag row under crumb - proper chips, mirrors the right-rail style. */
.reading-tag-row {
    display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
    font-family: var(--dispatch-mono);
    margin-bottom: 1.5rem;
}
.reading-tag-row .dispatch-em { color: var(--dispatch-gold); }
.reading-tag-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    color: var(--dispatch-text-muted);
    background: var(--dispatch-surface);
    border: 1px solid var(--dispatch-border-strong);
    border-radius: 2px;
    transition: color 0.12s, border-color 0.12s;
}
.reading-tag-pill::before {
    content: '#';
    color: var(--dispatch-text-faint);
    margin-right: 0.2em;
}
.reading-tag-pill:hover {
    color: var(--dispatch-teal-bright);
    border-color: var(--dispatch-teal);
}
.reading-tag-pill:hover::before { color: var(--dispatch-teal); }

/* Headline + dek */
.reading-title {
    font-family: var(--dispatch-editorial);
    font-weight: 500;
    font-size: clamp(2.1rem, 4.4vw, 3.2rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--dispatch-text-strong);
    margin: 0 0 1.25rem;
    text-wrap: balance;
}
.reading-dek {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--dispatch-text);
    margin: 0 0 2rem;
    max-width: 70ch;
    text-wrap: pretty;
}

/* By-line strip - bordered editorial bar with vertical rules between cells. */
.reading-byline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
    gap: 0;
    padding: 0;
    margin-bottom: 0;
    font-family: var(--dispatch-mono);
    font-size: 0.78rem;
    border: 1px solid var(--dispatch-border);
    border-radius: 2px;
    background: var(--dispatch-surface);
    overflow: hidden;
}
.reading-byline-cell {
    display: flex; flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 1rem;
    min-width: 0;
    border-right: 1px solid var(--dispatch-border);
}
.reading-byline-cell:last-child { border-right: 0; }
.reading-byline-cell--tags {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-self: stretch;
    gap: 0.35rem;
}
.reading-byline-label {
    font-size: 0.6rem;
    color: var(--dispatch-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.reading-byline-value {
    color: var(--dispatch-text-strong);
    font-weight: 500;
}
.reading-byline-tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--dispatch-teal);
    color: var(--dispatch-teal);
    border-radius: 2px;
    transition: background 0.12s, color 0.12s;
}
.reading-byline-tag::before { content: '#'; margin-right: 0.2em; opacity: 0.6; }
.reading-byline-tag:hover {
    background: var(--blog-teal-a08);
    color: var(--dispatch-teal-bright);
}

.reading-rule {
    border: 0;
    height: 2px;
    background: var(--dispatch-teal);
    margin: 1.25rem 0 2.5rem;
}

/* 3-column grid */
.reading-grid {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 220px;
    gap: 2.5rem;
    align-items: start;
}

/* Left: TOC */
.reading-toc {
    position: sticky;
    top: 6rem;
    font-family: var(--dispatch-mono);
    font-size: 0.78rem;
    color: var(--dispatch-text-muted);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.reading-toc-label,
.reading-meta-label {
    font-size: 0.65rem;
    color: var(--dispatch-text-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.reading-progress {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--dispatch-border);
    border-radius: 2px;
    background: var(--dispatch-surface);
}
.reading-progress::before {
    content: '[';
    color: var(--dispatch-teal);
    font-size: 0.85rem;
}
.reading-progress::after {
    content: ']';
    color: var(--dispatch-teal);
    font-size: 0.85rem;
}
.reading-progress-track {
    flex: 1;
    height: 10px;
    border-radius: 0;
    background: var(--blog-teal-a08);
    overflow: hidden;
    position: relative;
}
.reading-progress-fill {
    height: 100%;
    width: 0%;
    background:
        repeating-linear-gradient(
            90deg,
            var(--dispatch-teal) 0 6px,
            var(--dispatch-teal-bright) 6px 7px,
            var(--dispatch-teal) 7px 12px
        );
    transition: width 0.1s linear;
}
.reading-progress-pct {
    font-size: 0.72rem;
    color: var(--dispatch-teal-bright);
    font-weight: 600;
    min-width: 3em;
    text-align: right;
}

/* Mobile-only fixed progress strip - pinned to top of viewport so the
   reader still gets a scroll indicator once the flattened TOC scrolls
   away. Hidden on desktop; activated in the ≤1024px breakpoint below. */
.reading-progress-mobile { display: none; }

/* TOC list - numbered (CSS counter), teal active state with left bar. */
.reading-toc-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column;
    counter-reset: toc-item;
    gap: 0;
}
.reading-toc-list li {
    margin: 0; padding: 0;
    counter-increment: toc-item;
    border-left: 2px solid var(--dispatch-border);
}
.reading-toc-list li:has(a.reading-toc-active) { border-left-color: var(--dispatch-teal); }
.reading-toc-list a {
    display: flex;
    gap: 0.5rem;
    color: var(--dispatch-text-muted);
    line-height: 1.35;
    padding: 0.45rem 0.75rem;
    transition: color 0.12s, background 0.12s;
}
.reading-toc-list a::before {
    content: counter(toc-item, decimal-leading-zero);
    color: var(--dispatch-text-faint);
    font-size: 0.68rem;
    flex-shrink: 0;
    padding-top: 0.05em;
    transition: color 0.12s;
}
.reading-toc-list a:hover {
    color: var(--dispatch-text);
    background: var(--blog-teal-a04);
}
.reading-toc-list a:hover::before { color: var(--dispatch-text-muted); }
.reading-toc-list a.reading-toc-active {
    color: var(--dispatch-teal-bright);
    background: var(--blog-teal-a06);
    font-weight: 500;
}
.reading-toc-list a.reading-toc-active::before { color: var(--dispatch-teal); }

.reading-toc-meta {
    color: var(--dispatch-text-faint);
    font-size: 0.72rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--dispatch-border);
}
.reading-toc-feed {
    display: inline-block;
    color: var(--dispatch-teal);
    font-size: 0.74rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--dispatch-border-strong);
    border-radius: 2px;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
    align-self: flex-start;
}
.reading-toc-feed:hover {
    color: var(--dispatch-teal-bright);
    border-color: var(--dispatch-teal);
    background: var(--blog-teal-a05);
}

/* Center: prose */
.reading-prose {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--dispatch-text);
    min-width: 0;
    max-width: 68ch;
    text-wrap: pretty;
}
.reading-prose h2 {
    font-family: var(--dispatch-editorial);
    font-size: 1.85rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--dispatch-text-strong);
    margin: 3.25rem 0 1.1rem;
    text-wrap: balance;
    scroll-margin-top: 6rem;
}
.reading-prose h2[data-section]::before {
    content: counter(reading-h2, decimal-leading-zero);
    display: inline-block;
    color: var(--dispatch-teal);
    font-family: var(--dispatch-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    border: 1px solid var(--dispatch-teal);
    padding: 0.15rem 0.45rem;
    margin-right: 0.7em;
    border-radius: 2px;
    vertical-align: middle;
    transform: translateY(-0.15em);
    counter-increment: reading-h2;
    transition: background 0.12s, color 0.12s;
}
.reading-prose { counter-reset: reading-h2; }
.reading-prose h2:hover[data-section]::before {
    background: var(--dispatch-teal);
    color: var(--dispatch-bg);
}

/* Self-anchor link inside every H2 - clicking the heading jumps to its
   section and updates the URL bar with the anchor (deep-linkable). */
.reading-prose h2 .reading-h2-anchor {
    color: inherit;
    text-decoration: none;
    border-bottom: 0;
    background: none;
    transition: color 0.12s;
}
.reading-prose h2 .reading-h2-anchor::after {
    content: '#';
    margin-left: 0.4em;
    color: var(--dispatch-text-faint);
    font-family: var(--dispatch-mono);
    font-size: 0.55em;
    font-weight: 400;
    opacity: 0;
    transition: opacity 0.12s, color 0.12s;
    vertical-align: 0.25em;
}
.reading-prose h2:hover .reading-h2-anchor { color: var(--dispatch-teal-bright); }
.reading-prose h2:hover .reading-h2-anchor::after { opacity: 1; color: var(--dispatch-teal); }
.reading-prose h3 {
    font-family: var(--dispatch-editorial);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dispatch-text-strong);
    margin: 1.75rem 0 0.6rem;
}
.reading-prose p { margin: 0 0 1.1rem; }
.reading-prose a {
    color: var(--dispatch-teal);
    border-bottom: 1px solid var(--blog-teal-a40);
}
.reading-prose a:hover { color: var(--dispatch-teal-bright); border-bottom-color: var(--dispatch-teal-bright); }
.reading-prose code {
    font-family: var(--dispatch-mono);
    font-size: 0.86em;
    color: var(--dispatch-teal-bright);
    background: var(--blog-teal-a07);
    padding: 0.1rem 0.35rem;
    border: 1px solid var(--blog-teal-a18);
    border-radius: 2px;
}
.reading-prose pre {
    position: relative;
    background: var(--dispatch-surface);
    border: 1px solid var(--dispatch-border);
    border-radius: 2px;
    padding: 2rem 1.25rem 1rem;
    overflow-x: auto;
    font-family: var(--dispatch-mono);
    font-size: 0.85rem;
    line-height: 1.55;
    margin: 1.75rem 0;
}
/* Tiny chrome bar across the top of every code block, like a terminal pane. */
.reading-prose pre::before {
    content: '- code';
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 0.3rem 0.85rem;
    background: var(--dispatch-bg);
    color: var(--dispatch-text-muted);
    font-family: var(--dispatch-mono);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--dispatch-border);
}
.reading-prose pre code {
    background: none; padding: 0; color: var(--dispatch-text);
    border: 0;
}

/* Code-block copy button - shared with guide.css via the .cb-copy-btn class.
   The button is appended to every <pre> by static/js/code-copy.js. */
.reading-prose pre,
.guide-content pre { position: relative; }
.cb-copy-btn {
    position: absolute;
    top: 0.3rem;
    right: 0.45rem;
    padding: 0.18rem 0.55rem;
    font-family: 'JetBrains Mono', 'Berkeley Mono', 'Consolas', monospace;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dispatch-text-muted);
    background: transparent;
    border: 1px solid var(--dispatch-border-strong);
    border-radius: 2px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s, color 0.12s, border-color 0.12s, background 0.12s;
}
.reading-prose pre:hover .cb-copy-btn,
.guide-content pre:hover .cb-copy-btn,
.cb-copy-btn:focus-visible {
    opacity: 1;
}
.cb-copy-btn:hover {
    color: var(--dispatch-teal-bright);
    border-color: var(--dispatch-teal);
    background: var(--blog-teal-a06);
}
.cb-copy-btn--ok {
    opacity: 1 !important;
    color: var(--dispatch-teal-bright);
    border-color: var(--dispatch-teal);
}
.cb-copy-btn--err {
    opacity: 1 !important;
    color: var(--dispatch-red);
    border-color: var(--dispatch-red);
}
.reading-prose blockquote {
    position: relative;
    border-left: 3px solid var(--dispatch-gold);
    padding: 1rem 1.25rem 1rem 1.5rem;
    margin: 2rem 0;
    color: var(--dispatch-text);
    font-style: italic;
    font-family: 'Georgia', serif;
    font-size: 1.05em;
    line-height: 1.6;
    background: var(--blog-gold-a2p5);
    border-radius: 0 2px 2px 0;
}
.reading-prose blockquote::before {
    content: '"';
    position: absolute;
    top: 0;
    left: 0.4rem;
    font-family: 'Georgia', serif;
    font-size: 2.6rem;
    color: var(--dispatch-gold);
    opacity: 0.35;
    line-height: 1;
    pointer-events: none;
}
.reading-prose blockquote p:last-child { margin-bottom: 0; }
.reading-prose ul, .reading-prose ol {
    margin: 0 0 1.1rem 1.5rem;
    padding: 0;
}
.reading-prose li { margin: 0 0 0.4rem; }
.reading-prose img {
    max-width: 100%; height: auto;
    border: 1px solid var(--dispatch-border);
    border-radius: 4px;
    margin: 1.5rem 0;
}

/* ---------- Markdown tables ---------- */
/* Tables authored in a dispatch's body. Scrollable on narrow viewports
   so wide tables don't blow out the prose column. */
.reading-prose .reading-table-wrap {
    margin: 2rem 0;
    overflow-x: auto;
    border: 1px solid var(--dispatch-border);
    border-radius: 2px;
}
.reading-prose table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--dispatch-mono);
    font-size: 0.85rem;
    line-height: 1.5;
}
.reading-prose thead th {
    text-align: left;
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dispatch-text-faint);
    background: var(--dispatch-sunken);
    border-bottom: 1px solid var(--dispatch-border);
    padding: 0.7rem 1rem;
}
.reading-prose tbody td {
    border-bottom: 1px solid var(--dispatch-border);
    padding: 0.8rem 1rem;
    vertical-align: top;
    color: var(--dispatch-text);
}
/* First column reads as a row label in comparison tables. */
.reading-prose tbody td:first-child {
    color: var(--dispatch-text-strong);
    font-weight: 500;
    background: var(--blog-white-a1p5);
    white-space: nowrap;
}
/* Column separators so wide comparison grids stay legible. */
.reading-prose thead th + th,
.reading-prose tbody td + td {
    border-left: 1px solid var(--dispatch-border);
}
.reading-prose tbody tr:last-child td { border-bottom: 0; }
.reading-prose tbody tr { transition: background 0.12s; }
.reading-prose tbody tr:hover { background: var(--blog-teal-a04); }
.reading-prose tbody tr:hover td:first-child { background: var(--blog-teal-a06); }
.reading-prose table code {
    font-size: 0.92em;
}

/* ---------- Spellbook block overrides ---------- */
/* Match the guide-side treatment so {~ card ~} and {~ alert ~} blocks
   feel consistent across docs and editorial. */
.reading-prose .sb-card,
.reading-prose .sb-alert {
    background: var(--dispatch-surface);
    border: 1px solid var(--dispatch-border);
    border-left: 3px solid var(--dispatch-teal);
    border-radius: 2px;
    box-shadow: none;
    margin: 1.75rem 0;
    overflow: hidden;
}
.reading-prose .sb-card-header {
    padding: 0.75rem 1rem;
    background: var(--dispatch-sunken);
    border-bottom: 1px solid var(--dispatch-border);
}
.reading-prose .sb-card-title {
    margin: 0;
    font-family: var(--dispatch-editorial);
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--dispatch-text-strong);
    letter-spacing: 0;
    text-transform: none;
}
.reading-prose .sb-card-body {
    padding: 1rem 1.25rem;
    color: var(--dispatch-text);
}
.reading-prose .sb-card-body > p:last-child { margin-bottom: 0; }

.reading-prose .sb-alert {
    padding: 0.85rem 1rem;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--dispatch-text);
}
.reading-prose .sb-alert > p:last-child { margin-bottom: 0; }
.reading-prose .sb-alert code { background: var(--blog-black-a25); }

.reading-prose .sb-alert-info {
    border-left-color: var(--dispatch-blue);
    background: linear-gradient(to right,
        var(--blog-indigo-a06) 0, var(--dispatch-surface) 16rem);
}
.reading-prose .sb-alert-success,
.reading-prose .sb-alert-primary {
    border-left-color: var(--dispatch-teal);
    background: linear-gradient(to right,
        var(--blog-teal-a06) 0, var(--dispatch-surface) 16rem);
}
.reading-prose .sb-alert-warning {
    border-left-color: var(--dispatch-gold);
    background: linear-gradient(to right,
        var(--blog-gold-a06) 0, var(--dispatch-surface) 16rem);
}
.reading-prose .sb-alert-danger,
.reading-prose .sb-alert-error {
    border-left-color: var(--dispatch-red);
    background: linear-gradient(to right,
        var(--blog-red-a06) 0, var(--dispatch-surface) 16rem);
}

/* {~ note ~} is guide/spellblocks.py's custom block (real line icon, no
   emoji); mirror static/css/guide.css's .guide-content .guide-note rules
   here so it also renders correctly outside .guide-content. */
.reading-prose .guide-note {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 1.75rem 0;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--dispatch-border);
    border-left: 3px solid var(--note-accent, var(--dispatch-blue));
    border-radius: 2px;
    background: color-mix(in srgb, var(--note-accent, var(--dispatch-blue)) 5%, var(--dispatch-surface));
}
.reading-prose .guide-note--info    { --note-accent: var(--dispatch-blue); }
.reading-prose .guide-note--success { --note-accent: var(--dispatch-teal); }
.reading-prose .guide-note-icon {
    flex: none;
    margin-top: 0.05rem;
    color: var(--note-accent, var(--dispatch-blue));
}
.reading-prose .guide-note-icon svg { display: block; width: 1.1rem; height: 1.1rem; }
.reading-prose .guide-note-body {
    font-family: 'Georgia', 'Times New Roman', serif;
    color: var(--dispatch-text);
    font-size: 1rem;
    line-height: 1.65;
}
.reading-prose .guide-note-body > p:last-child { margin-bottom: 0; }

/* Right: filed under + category */
.reading-notes {
    position: sticky;
    top: 6rem;
    display: flex; flex-direction: column;
    gap: 1rem;
    font-family: var(--dispatch-mono);
    font-size: 0.78rem;
    color: var(--dispatch-text);
}

.reading-meta-label {
    margin-top: 0.5rem;
    font-size: 0.65rem;
    color: var(--dispatch-text-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Filed-under tag pills - small bordered chips, one per line won't happen
   until the rail is narrow. */
.reading-meta-tags {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.reading-meta-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.6rem;
    font-family: var(--dispatch-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--dispatch-text);
    background: var(--dispatch-surface);
    border: 1px solid var(--dispatch-border-strong);
    border-radius: 2px;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.reading-meta-tag::before {
    content: '#';
    color: var(--dispatch-text-faint);
    margin-right: 0.25em;
    font-weight: 400;
}
.reading-meta-tag:hover {
    color: var(--dispatch-teal-bright);
    border-color: var(--dispatch-teal);
    background: var(--blog-teal-a06);
}
.reading-meta-tag:hover::before { color: var(--dispatch-teal); }

/* Category button - big, color-coded, arrow affordance. */
.reading-meta-category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    background: var(--dispatch-surface);
    border: 1px solid var(--dispatch-border-strong);
    border-left: 3px solid var(--dispatch-teal);
    border-radius: 2px;
    font-family: var(--dispatch-mono);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: var(--dispatch-text-strong);
    transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.reading-meta-category:hover {
    background: var(--blog-teal-a04);
    border-color: var(--dispatch-border);
}
.reading-meta-category:hover .reading-meta-category-arrow { transform: translateX(3px); }
.reading-meta-category-label {
    font-weight: 600;
}
.reading-meta-category-arrow {
    font-family: var(--dispatch-mono);
    color: var(--dispatch-text-muted);
    transition: transform 0.15s, color 0.15s;
}
.reading-meta-category:hover .reading-meta-category-arrow {
    color: var(--dispatch-text);
}

/* Category color variants - match the pill/tag colors used elsewhere. */
.reading-meta-category--dispatch  { border-left-color: var(--dispatch-teal); }
.reading-meta-category--dispatch .reading-meta-category-label { color: var(--dispatch-teal); }
.reading-meta-category--release   { border-left-color: var(--dispatch-gold); }
.reading-meta-category--release .reading-meta-category-label  { color: var(--dispatch-gold); }
.reading-meta-category--incident  { border-left-color: var(--dispatch-red); }
.reading-meta-category--incident .reading-meta-category-label { color: var(--dispatch-red); }
.reading-meta-category--deep-dive { border-left-color: var(--dispatch-blue); }
.reading-meta-category--deep-dive .reading-meta-category-label { color: var(--dispatch-blue); }

/* Recommended next-read card - sits at the bottom of the right rail. */
.reading-rec {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--dispatch-surface);
    border: 1px solid var(--dispatch-border-strong);
    border-left: 3px solid var(--dispatch-teal);
    border-radius: 2px;
    padding: 0;
    overflow: hidden;
    transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.reading-rec:hover {
    background: var(--blog-teal-a04);
    border-color: var(--dispatch-border);
    transform: translateY(-1px);
}
.reading-rec-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--dispatch-sunken);
}
.reading-rec-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.reading-rec-image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--dispatch-mono);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dispatch-text-strong);
}
.reading-rec-image--dispatch  { background: var(--blog-teal-deep-a18); color: var(--dispatch-teal-bright); }
.reading-rec-image--release   { background: var(--blog-gold-a18); color: var(--dispatch-gold); }
.reading-rec-image--incident  { background: var(--blog-red-a18); color: var(--dispatch-red); }
.reading-rec-image--deep-dive { background: var(--blog-indigo-a18); color: var(--dispatch-blue); }

.reading-rec-body {
    padding: 0.65rem 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.reading-rec-title {
    font-family: var(--dispatch-editorial);
    font-size: 0.95rem;
    line-height: 1.25;
    color: var(--dispatch-text-strong);
    font-weight: 600;
}
.reading-rec-excerpt {
    font-family: var(--dispatch-serif);
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--dispatch-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.reading-rec-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.15rem;
}
.reading-rec-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.45rem;
    font-family: var(--dispatch-mono);
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    color: var(--dispatch-text-muted);
    background: var(--dispatch-sunken);
    border: 1px solid var(--dispatch-border);
    border-radius: 2px;
}
.reading-rec-tag::before {
    content: '#';
    color: var(--dispatch-text-faint);
    margin-right: 0.2em;
}

/* Category-tinted left rail on the card. */
.reading-rec--dispatch  { border-left-color: var(--dispatch-teal); }
.reading-rec--release   { border-left-color: var(--dispatch-gold); }
.reading-rec--incident  { border-left-color: var(--dispatch-red); }
.reading-rec--deep-dive { border-left-color: var(--dispatch-blue); }

.reading-rec-more {
    font-family: var(--dispatch-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--dispatch-text-muted);
    text-decoration: none;
    align-self: flex-end;
    padding: 0.25rem 0.1rem;
    transition: color 0.12s;
}
.reading-rec-more:hover {
    color: var(--dispatch-teal-bright);
}

/* Prev/next nav */
.reading-nav {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    border-top: 1px solid var(--dispatch-border);
    border-bottom: 1px solid var(--dispatch-border);
    background: var(--dispatch-border);
}
.reading-nav-card {
    display: block;
    padding: 1.25rem 1.5rem;
    background: var(--dispatch-surface);
    transition: background 0.15s;
}
.reading-nav-card:hover { background: var(--blog-teal-a04); }
.reading-nav-card--next { text-align: right; }
.reading-nav-label {
    font-family: var(--dispatch-mono);
    font-size: 0.7rem;
    color: var(--dispatch-gold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.reading-nav-title {
    font-family: var(--dispatch-editorial);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--dispatch-text-strong);
    line-height: 1.25;
    text-wrap: balance;
}
.reading-nav-sub {
    margin-top: 0.4rem;
    font-family: var(--dispatch-mono);
    font-size: 0.7rem;
    color: var(--dispatch-text-muted);
}

/* Responsive: collapse to single column */
@media (max-width: 1024px) {
    .reading-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .reading-toc, .reading-notes {
        position: static;
        border: 1px solid var(--dispatch-border);
        border-radius: 4px;
        padding: 1rem;
    }
    .reading-toc { order: -1; }
    /* In-TOC bar is useless once the aside flattens - hide it and let
       the fixed top strip (below) carry scroll progress instead. */
    .reading-toc .reading-progress { display: none; }

    .reading-progress-mobile {
        display: block;
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 3px;
        background: var(--blog-teal-a08);
        z-index: 100;
    }
}

@media (max-width: 640px) {
    .reading { padding: 1.5rem 1rem 3rem; }
    .reading-byline { gap: 1rem; }
    .reading-prose { font-size: 1rem; }
    .reading-nav { grid-template-columns: 1fr; }
    .reading-nav-card--next { text-align: left; }
}