/*
 * SplatTop Blog — Console + series
 *
 * The page is the surface. Structural hairlines, not floating cards, organize
 * the public site. The series components are defined here so CES-670 can layer
 * data and routing on the same visual contract without reintroducing one-off
 * styling.
 */

@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-500-latin.562c73adab45.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-600-latin.7ab89eedd1b0.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-700-latin.8574a5d7eebc.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-400-latin.77bc02670657.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-500-latin.f7016cd446d2.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-600-latin.196e3cbc5fee.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-700-latin.c277d7b83f8a.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/ibm-plex-mono-400-latin.79936b18df9f.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/ibm-plex-mono-500-latin.b1c8a895f5fd.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/ibm-plex-mono-600-latin.5a2ce7798732.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

:root {
    --color-bg: #0b1020;
    --color-surface: #111827;
    --color-surface-2: #121a2e;
    --color-surface-sunk: #080d19;
    --color-surface-rail: #0d1426;

    --rule: rgba(255, 255, 255, 0.09);
    --rule-soft: rgba(255, 255, 255, 0.06);

    --color-text-primary: #ffffff;
    --color-text-secondary: #c9d1d9;
    --color-text-muted: #8b949e;
    --color-text-disabled: #4a5164;

    --accent: #d946ef;
    --accent-bright: #e879f9;
    --accent-deep: #c026d3;
    --accent-on: #14071a;
    --accent-wash: rgba(217, 70, 239, 0.1);
    --accent-line: rgba(217, 70, 239, 0.28);

    --series: #c183e1;
    --series-bright: #d8b4f8;
    --series-on: #14071a;
    --series-wash: rgba(193, 131, 225, 0.08);
    --series-line: rgba(193, 131, 225, 0.28);
    --series-track: rgba(255, 255, 255, 0.12);

    --cat-explainer: #7dd3fc;
    --cat-technical: #c183e1;
    --cat-extra: #f472b6;
    --cat-subquest: #fcd34d;

    --font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-head: "Archivo", "IBM Plex Sans", sans-serif;
    --font-mono: "IBM Plex Mono", source-code-pro, Menlo, Monaco, Consolas, monospace;
    --font-display: var(--font-head);
    --font-body: var(--font-ui);
    --font-code: var(--font-mono);

    --radius: 2px;
    --radius-none: 0;
    --measure-reading: 62ch;
    --site-width: 1120px;
    --site-header-offset: 64px;
    --scrollbar-offset: 0px;

    /* Compatibility aliases used by retained rich content and applets. */
    --color-bg-primary: var(--color-bg);
    --color-bg-secondary: var(--color-surface);
    --color-text: var(--color-text-primary);
    --color-muted: var(--color-text-muted);
    --color-border: var(--rule);
    --color-purple: var(--accent);
    --color-purple-light: var(--accent-bright);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --color-bg: #f4f4f7;
        --color-surface: #ffffff;
        --color-surface-2: #ffffff;
        --color-surface-sunk: #ffffff;
        --color-surface-rail: #ffffff;
        --rule: rgba(15, 20, 36, 0.12);
        --rule-soft: rgba(15, 20, 36, 0.08);
        --color-text-primary: #0f1424;
        --color-text-secondary: #4c5163;
        --color-text-muted: #7c8195;
        --color-text-disabled: #b3b6c2;
        --accent: #a21caf;
        --accent-bright: #a21caf;
        --accent-deep: #a21caf;
        --accent-on: #ffffff;
        --accent-wash: rgba(162, 28, 175, 0.08);
        --accent-line: rgba(162, 28, 175, 0.3);
        --cat-explainer: #0284c7;
        --series-track: rgba(15, 20, 36, 0.12);
    }
}

:root[data-theme="light"] {
    --color-bg: #f4f4f7;
    --color-surface: #ffffff;
    --color-surface-2: #ffffff;
    --color-surface-sunk: #ffffff;
    --color-surface-rail: #ffffff;
    --rule: rgba(15, 20, 36, 0.12);
    --rule-soft: rgba(15, 20, 36, 0.08);
    --color-text-primary: #0f1424;
    --color-text-secondary: #4c5163;
    --color-text-muted: #7c8195;
    --color-text-disabled: #b3b6c2;
    --accent: #a21caf;
    --accent-bright: #a21caf;
    --accent-deep: #a21caf;
    --accent-on: #ffffff;
    --accent-wash: rgba(162, 28, 175, 0.08);
    --accent-line: rgba(162, 28, 175, 0.3);
    --cat-explainer: #0284c7;
    --series-track: rgba(15, 20, 36, 0.12);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    background: var(--color-bg);
    color-scheme: dark light;
    scroll-behavior: smooth;
    scroll-padding-top: var(--site-header-offset);
    -webkit-text-size-adjust: 100%;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background: var(--color-bg);
    color: var(--color-text-secondary);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.toc-drawer-open {
    overflow: hidden;
    padding-right: var(--scrollbar-offset);
}

a {
    color: inherit;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    color: inherit;
}

img,
svg,
video,
canvas,
iframe {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-text-primary);
    font-family: var(--font-head);
}

.container {
    width: min(100%, var(--site-width));
    margin-inline: auto;
}

.page-shell {
    min-height: 100vh;
}

.site-main {
    min-height: calc(100vh - 124px);
    border-right: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
}

.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 200;
    padding: 10px 14px;
    border: 1px solid var(--accent-line);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    font-size: 11px;
    text-decoration: none;
    text-transform: lowercase;
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: translateY(0);
}

:focus-visible {
    outline: 2px solid var(--accent-line);
    outline-offset: 2px;
}

::selection {
    background: var(--accent);
    color: var(--accent-on);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 80;
    border-bottom: 1px solid var(--rule);
    background: var(--color-surface);
}

.site-header__inner {
    display: flex;
    min-height: 54px;
    align-items: stretch;
    justify-content: space-between;
}

.site-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 32px;
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1;
    text-decoration: none;
    text-transform: lowercase;
    white-space: nowrap;
}

.site-title__secondary {
    color: var(--color-text-muted);
    font-weight: 400;
}

.site-header__right {
    display: flex;
    min-width: 0;
    align-items: stretch;
}

.site-nav {
    display: flex;
    min-width: 0;
    align-items: stretch;
}

.site-nav__link {
    display: flex;
    min-width: 56px;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    line-height: 1;
    text-decoration: none;
    text-transform: lowercase;
    transition: color 160ms ease;
}

.site-nav__link:last-child {
    padding-right: 32px;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
    color: var(--color-text-primary);
}

.site-nav__link[aria-current="page"] {
    border-bottom: 2px solid var(--accent);
}

.site-header__actions {
    display: flex;
    align-items: center;
}

.reading-status {
    display: flex;
    margin: 0;
    align-items: center;
    padding: 0 32px;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: lowercase;
    white-space: nowrap;
}

.reading-progress {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.07);
}

.reading-progress__bar {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #c026d3, #f472b6);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .reading-progress__bar {
        background: linear-gradient(90deg, #a21caf, #db2777);
    }
}

:root[data-theme="light"] .reading-progress__bar {
    background: linear-gradient(90deg, #a21caf, #db2777);
}

.site-footer {
    border-top: 1px solid var(--rule);
    background: var(--color-surface);
}

.site-footer__inner {
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    padding: 22px 32px;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    line-height: 1.4;
    text-transform: lowercase;
}

.site-footer__identity {
    display: flex;
    margin: 0;
    gap: 8px;
}

.site-footer__proper {
    text-transform: none;
}

.site-footer__nav {
    display: flex;
    gap: 10px;
}

.site-footer__nav a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 160ms ease;
}

.site-footer__nav a:hover {
    color: var(--color-text-primary);
}

.eyebrow,
.post-meta,
.index-divider,
.post-rail__label {
    font-family: var(--font-mono);
    text-transform: lowercase;
}

.eyebrow {
    margin: 0;
    color: var(--accent);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    line-height: 1.4;
}

.post-meta {
    display: flex;
    margin: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    color: var(--color-text-muted);
    font-size: 10px;
    letter-spacing: 0.11em;
    line-height: 1.5;
}

.post-meta__proper {
    color: var(--color-text-secondary);
    text-transform: none;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: lowercase;
}

.badge--latest {
    background: var(--accent);
    color: var(--accent-on);
}

.badge--series {
    padding-block: 2px;
    background: var(--series);
    color: var(--series-on);
}

/* Index */

.index-hero {
    padding: 46px 32px 32px;
    border-bottom: 1px solid var(--rule);
}

.index-hero h1 {
    max-width: 20ch;
    margin: 17px 0 16px;
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.02;
}

.index-hero > p:last-child {
    max-width: 60ch;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 15.5px;
    line-height: 1.7;
}

.index-stats {
    display: flex;
    min-height: 56px;
    margin: 0;
    border-bottom: 1px solid var(--rule);
}

.index-stats__cell {
    display: flex;
    align-items: baseline;
    padding: 14px 24px;
    border-right: 1px solid var(--rule);
}

.index-stats__cell:first-child {
    padding-left: 32px;
}

.index-stats dt {
    order: 2;
    margin-left: 8px;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: lowercase;
}

.index-stats dd {
    order: 1;
    margin: 0;
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    font-size: 18px;
    line-height: 1;
}

.index-stats__sort {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
    padding: 14px 32px;
    color: var(--color-text-disabled);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: lowercase;
}

.lead-post {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    border-bottom: 1px solid var(--rule);
}

.lead-post__media {
    display: flex;
    min-height: 250px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-right: 1px solid var(--rule);
    color: var(--color-text-disabled);
    text-decoration: none;
}

.lead-post__media img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.lead-post__media--empty {
    background: var(--color-surface-2);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: lowercase;
}

.lead-post__body {
    padding: 26px 32px 26px 28px;
}

.lead-post__body h2 {
    max-width: 24ch;
    margin: 12px 0;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.12;
}

.lead-post__body h2 a,
.post-cell h2 a {
    color: var(--color-text-primary);
    text-decoration: none;
}

.lead-post__excerpt {
    max-width: 52ch;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 15px;
    line-height: 1.65;
}

.lead-post__actions {
    display: flex;
    margin: 14px 0 0;
    align-items: center;
    gap: 10px;
    color: var(--color-text-disabled);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: lowercase;
}

.lead-post__actions a {
    color: var(--accent-bright);
    text-decoration: none;
    transition: color 160ms ease;
}

.lead-post__actions a:hover {
    color: var(--color-text-primary);
}

.index-divider {
    display: flex;
    min-height: 44px;
    align-items: center;
    padding: 13px 32px;
    border-bottom: 1px solid var(--rule);
    color: var(--color-text-muted);
    font-size: 10px;
    letter-spacing: 0.16em;
    line-height: 1.4;
}

.index-divider--heading {
    justify-content: space-between;
    background: var(--color-surface);
}

.index-divider h2 {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
}

.post-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.post-cell {
    min-width: 0;
    padding: 22px 32px;
    border-bottom: 1px solid var(--rule);
    transition: background 160ms ease;
}

.post-cell:nth-child(odd) {
    border-right: 1px solid var(--rule);
}

.post-cell:hover {
    background: rgba(255, 255, 255, 0.02);
}

.post-cell h2 {
    margin: 9px 0 8px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

.post-cell > p:last-child {
    max-width: 52ch;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.pagination {
    display: grid;
    grid-template-columns: 1fr auto auto;
    min-height: 52px;
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: lowercase;
}

.pagination > * {
    display: flex;
    align-items: center;
    padding: 0 24px;
    border-left: 1px solid var(--rule);
}

.pagination > :first-child {
    border-left: 0;
}

.pagination__direction {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 160ms ease;
}

.pagination__direction:hover,
.pagination__direction--older {
    color: var(--accent-bright);
}

.pagination__direction--disabled {
    color: var(--color-text-disabled);
}

.pagination__status {
    color: var(--color-text-muted);
}

.applet-index__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.applet-index__item {
    display: grid;
    min-height: 94px;
    grid-template-columns: auto 1fr;
    gap: 5px 14px;
    align-content: center;
    padding: 18px 24px;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease;
}

.applet-index__item:last-child {
    border-right: 0;
}

.applet-index__item:hover {
    background: rgba(255, 255, 255, 0.02);
    color: var(--color-text-primary);
}

.applet-index__number,
.applet-index__action {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: lowercase;
}

.applet-index__title {
    color: var(--color-text-primary);
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 600;
}

.applet-index__action {
    grid-column: 2;
    color: var(--cat-explainer);
}

.empty-state {
    padding: 48px 32px;
    border-bottom: 1px solid var(--rule);
}

.empty-state h2 {
    margin: 10px 0 6px;
    font-size: 24px;
}

.empty-state p:last-child {
    margin: 0;
}

/* Series primitives */

.series-progress {
    display: flex;
    width: 116px;
    flex: none;
    gap: 3px;
}

.series-progress span {
    height: 4px;
    flex: 1;
    background: var(--series-track);
}

.series-progress span.is-filled {
    background: var(--series);
}

.series-progress span.is-read {
    background: rgba(216, 180, 248, 0.45);
}

.series-progress span.is-current {
    background: var(--series-bright);
}

.series-group {
    border-bottom: 1px solid var(--rule);
}

.series-group__header {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 32px;
    border-bottom: 1px solid var(--rule);
    background: var(--color-surface);
}

.series-group__identity,
.series-group__action {
    display: flex;
    align-items: center;
    gap: 10px;
}

.series-group__identity h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: none;
}

.series-group__identity h2 a {
    color: inherit;
    text-decoration: none;
}

.series-group__meta,
.series-group__action {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-transform: lowercase;
}

.series-group__action a {
    color: var(--series-bright);
    text-decoration: none;
}

.series-part-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.series-part {
    display: grid;
    min-height: 47px;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 12px 32px;
    border-bottom: 1px solid var(--rule-soft);
    transition: background 160ms ease;
}

.series-part:last-child {
    border-bottom: 0;
}

.series-part:hover {
    background: rgba(255, 255, 255, 0.02);
}

.series-part.is-current {
    background: var(--series-wash);
}

.series-part__number,
.series-part__meta {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.05em;
}

.series-part.is-current .series-part__number,
.series-part__newest {
    color: var(--series-bright);
}

.series-part__title {
    color: var(--color-text-secondary);
    font-family: var(--font-head);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.series-part:hover .series-part__title {
    color: var(--color-text-primary);
}

.series-part__meta {
    display: flex;
    gap: 10px;
    align-items: center;
    text-transform: lowercase;
}

.series-hero {
    padding: 36px 32px 28px;
    border-bottom: 1px solid var(--rule);
}

.series-hero h1 {
    margin: 13px 0 12px;
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.04;
}

.series-hero > p:last-child {
    max-width: 58ch;
    margin: 0;
    font-size: 15.5px;
    line-height: 1.7;
}

.series-hero .eyebrow {
    color: var(--series);
}

.series-card {
    border-bottom: 1px solid var(--rule);
}

.series-card__title-row {
    display: grid;
    grid-template-columns: 24px auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 18px 32px 14px;
}

.series-card__ordinal,
.series-card__meta {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: lowercase;
}

.series-card h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.series-card h2 a {
    color: var(--color-text-primary);
    text-decoration: none;
}

.series-card__description {
    max-width: 66ch;
    margin: 0 32px 14px;
    font-size: 14.5px;
    line-height: 1.65;
}

.series-card__parts {
    border-top: 1px solid var(--rule);
}

.series-card__more {
    display: block;
    padding: 11px 32px;
    color: var(--series-bright);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: lowercase;
}

.series-detail__actions {
    display: flex;
    margin-top: 16px;
    gap: 12px;
}

.series-detail__actions a {
    color: var(--series-bright);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: lowercase;
}

.series-detail__next-up {
    margin: 0;
    padding: 12px 32px;
}

.post-series-band {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 11px 32px;
    border-bottom: 1px solid var(--series-line);
    background: var(--series-wash);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    line-height: 1.4;
    text-transform: lowercase;
}

.post-series-band__identity,
.post-series-band__action {
    display: flex;
    align-items: center;
    gap: 10px;
}

.post-series-band__label,
.post-series-band__part,
.post-series-band a {
    color: var(--series-bright);
}

.post-series-band__name {
    color: var(--color-text-primary);
    text-transform: none;
}

.post-series-band__separator {
    color: #6b5580;
}

.post-series-band a {
    text-decoration: none;
}

/* Article */

.post-header {
    padding: 36px 32px 28px;
    border-bottom: 1px solid var(--rule);
}

.post-header h1 {
    max-width: 24ch;
    margin: 14px 0 14px;
    font-size: 46px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.02;
}

.post-header__abstract {
    max-width: 62ch;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 16.5px;
    line-height: 1.7;
}

.post-readtime__deep {
    color: var(--color-text-disabled);
}

.post-layout {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    align-items: start;
}

.post-sidebar {
    min-width: 0;
    border-right: 1px solid var(--rule);
}

.post-rail {
    position: sticky;
    top: var(--site-header-offset);
    max-height: calc(100vh - var(--site-header-offset));
    overflow-y: auto;
    padding: 26px 22px;
}

.post-rail__section + .post-rail__section,
.post-rail__actions,
.post-series-rail + .post-rail__section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
}

.post-rail__label {
    margin: 0 0 8px;
    color: var(--color-text-muted);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    line-height: 1.4;
}

.post-toc__crumb {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.post-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
}

.post-toc__item {
    counter-increment: toc;
}

.post-toc__item.is-hidden {
    display: none;
}

.post-toc__link {
    display: grid;
    min-height: 34px;
    grid-template-columns: 22px 1fr;
    gap: 6px;
    align-items: start;
    padding: 7px 10px;
    color: var(--color-text-muted);
    font-size: 12.5px;
    line-height: 1.4;
    text-decoration: none;
    transition: color 160ms ease, background 160ms ease;
}

.post-toc__link::before {
    content: counter(toc, decimal-leading-zero);
    color: var(--color-text-disabled);
    font-family: var(--font-mono);
    font-size: 10px;
}

.post-toc__item--h3 {
    counter-increment: none;
}

.post-toc__item--h3 .post-toc__link {
    display: block;
    padding-left: 32px;
}

.post-toc__item--h3 .post-toc__link::before {
    content: none;
}

.post-toc__link:hover,
.post-toc__link.is-active {
    background: var(--accent-wash);
    color: var(--color-text-primary);
}

.post-toc__link.is-active {
    border-left: 2px solid var(--accent);
}

.post-rail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.post-rail__actions button,
.post-rail__actions a {
    min-height: 32px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-decoration: none;
    text-transform: lowercase;
    transition: color 160ms ease;
}

.post-rail__actions button:hover,
.post-rail__actions a:hover {
    color: var(--color-text-primary);
}

.post-rail__actions > * + *::before {
    content: "·";
    margin-right: 7px;
    color: var(--color-text-disabled);
}

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

.post-series-rail__item {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 4px;
    padding: 7px 10px;
    color: var(--color-text-muted);
    font-size: 12.5px;
    line-height: 1.4;
}

.post-series-rail__item a {
    color: inherit;
    text-decoration: none;
}

.post-series-rail__item.is-current {
    background: var(--series-wash);
    border-left: 2px solid var(--series);
    color: var(--color-text-primary);
}

.post-series-rail__number {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 10px;
}

.post-series-rail__next-up {
    margin: 10px 0 0;
    padding: 10px 10px 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.14);
    color: #6f7788;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    text-transform: lowercase;
}

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

.post-series-also__list li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 10px;
    color: var(--color-text-muted);
    font-size: 12px;
}

.post-series-also__list a {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.post-series-also__list span {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 10px;
}

.post {
    min-width: 0;
    padding: 30px 40px 40px;
}

.featured-image {
    width: 100%;
    margin: 0 0 30px;
}

.featured-image img {
    width: 100%;
    height: 280px;
    border-radius: var(--radius-none);
    object-fit: cover;
}

.post-content {
    min-width: 0;
    color: var(--color-text-secondary);
    font-size: 16px;
    line-height: 1.8;
}

.post-content svg.ge-export-svg-dark:not(mjx-container > svg) {
    filter: invert(100%) hue-rotate(180deg);
}

.post-content > *,
.post-content .markdown-content > *,
.post-content .rich-text > * {
    max-width: var(--measure-reading);
}

.post-content > .markdown-content,
.post-content > .rich-text,
.post-content > .post-image,
.post-content > .code-block,
.post-content > .applet-embed,
.post-content > .collapsible-block,
.post-content > .takeaway,
.post-content > .glossary-list,
.post-content > table,
.post-content > .table-wrapper {
    max-width: 100%;
}

.post-content p,
.post-content ul,
.post-content ol,
.post-content blockquote,
.post-content pre,
.post-content table,
.post-content figure {
    margin-top: 0;
    margin-bottom: 22px;
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4 {
    position: relative;
    scroll-margin-top: var(--site-header-offset);
}

.post-content h1,
.post-content h2 {
    margin: 42px 0 14px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.post-content h3 {
    margin: 32px 0 10px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
}

.post-content h4 {
    margin: 26px 0 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.post-content > :first-child,
.post-content > .markdown-content:first-child > :first-child,
.post-content > .rich-text:first-child > :first-child {
    margin-top: 0;
}

.post-content a:not(.para-anchor) {
    border-bottom: 1px solid rgba(217, 70, 239, 0.6);
    color: #f0d5ff;
    text-decoration: none;
    transition: color 160ms ease, border-color 160ms ease;
}

.post-content a:not(.para-anchor):hover {
    border-color: rgba(217, 70, 239, 0.95);
    color: var(--color-text-primary);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .post-content a:not(.para-anchor) {
        border-color: rgba(162, 28, 175, 0.5);
        color: #6b1178;
    }
}

:root[data-theme="light"] .post-content a:not(.para-anchor) {
    border-color: rgba(162, 28, 175, 0.5);
    color: #6b1178;
}

.para-anchor {
    position: absolute;
    right: 100%;
    width: 26px;
    margin-right: 6px;
    color: var(--color-text-disabled);
    font-family: var(--font-mono);
    font-size: 13px;
    text-align: center;
    text-decoration: none;
    opacity: 0;
    transition: color 160ms ease, opacity 160ms ease;
}

.para-anchor::before {
    content: "¶";
}

.post-content :is(h1, h2, h3, h4):hover .para-anchor,
.para-anchor:focus-visible {
    color: var(--accent);
    opacity: 1;
}

.post-content ul,
.post-content ol {
    padding-left: 1.35em;
}

.post-content li + li {
    margin-top: 7px;
}

.post-content hr {
    max-width: 100%;
    margin: 34px 0;
    border: 0;
    border-top: 1px solid var(--rule);
}

.post-content strong {
    color: var(--color-text-primary);
    font-weight: 600;
}

.post-content blockquote {
    padding: 14px 18px;
    border-radius: var(--radius);
    background: var(--color-surface-2);
    color: var(--color-text-secondary);
    font-size: 16px;
    font-style: normal;
    line-height: 1.65;
}

.post-content blockquote > :last-child {
    margin-bottom: 0;
}

.post-image {
    width: 100%;
    margin: 30px 0;
}

.post-image img {
    width: 100%;
    max-height: 720px;
    object-fit: contain;
}

.post-image figcaption,
.post-content figcaption {
    margin-top: 8px;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.03em;
    line-height: 1.5;
}

.code-block {
    width: 100%;
    margin: 26px 0;
    overflow: hidden;
    border: 1px solid var(--rule);
    border-radius: var(--radius-none);
    background: var(--color-surface-sunk);
}

.code-block > figcaption {
    display: flex;
    min-height: 38px;
    margin: 0;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--rule);
    background: var(--color-surface-2);
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.4;
    text-transform: lowercase;
}

.code-block button,
.applet-embed button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: lowercase;
    transition: color 120ms ease;
}

.code-block button:hover,
.applet-embed button:hover {
    color: var(--color-text-primary);
}

.code-block pre,
.post-content > pre,
.markdown-content > pre {
    width: 100%;
    max-width: 100%;
    margin: 0 0 26px;
    overflow-x: auto;
    border: 1px solid var(--rule);
    border-radius: var(--radius-none);
    background: var(--color-surface-sunk);
}

.code-block pre {
    margin: 0;
    border: 0;
}

.code-block code,
.post-content > pre code,
.markdown-content > pre code {
    display: block;
    min-width: max-content;
    padding: 16px;
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.7;
    tab-size: 4;
}

.post-content code:not(pre code) {
    padding: 2px 4px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--color-surface-2);
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    font-size: 0.88em;
}

.post-content table {
    width: 100%;
    max-width: 100%;
    margin: 28px 0;
    border-collapse: collapse;
    border: 1px solid var(--rule);
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.5;
}

.post-content table thead {
    background: var(--color-surface-2);
}

.post-content table th {
    padding: 10px 14px;
    border-bottom: 1px solid var(--rule);
    color: var(--color-text-muted);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-align: left;
    text-transform: lowercase;
}

.post-content table td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--rule-soft);
}

.post-content table tbody tr:last-child td {
    border-bottom: 0;
}

.post-content table td:first-child {
    color: var(--color-text-primary);
}

.post-content table :is(th, td)[align="right"],
.post-content table :is(th, td):not(:first-child) {
    font-variant-numeric: tabular-nums;
}

.post-content .table-wrapper {
    max-width: 100%;
    overflow-x: auto;
}

.post-content .katex-display,
.post-content .latex-block {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0;
}

.takeaway {
    --takeaway-color: var(--cat-explainer);
    --takeaway-wash: rgba(56, 189, 248, 0.08);
    --takeaway-line: rgba(56, 189, 248, 0.24);
    width: 100%;
    margin: 26px 0;
    padding: 16px 18px;
    border: 1px solid var(--takeaway-line);
    border-radius: var(--radius);
    background: var(--takeaway-wash);
}

.takeaway--purple {
    --takeaway-color: var(--cat-technical);
    --takeaway-wash: rgba(193, 131, 225, 0.1);
    --takeaway-line: rgba(193, 131, 225, 0.3);
}

.takeaway--pink {
    --takeaway-color: var(--cat-extra);
    --takeaway-wash: rgba(236, 72, 153, 0.1);
    --takeaway-line: rgba(236, 72, 153, 0.28);
}

.takeaway--gold {
    --takeaway-color: var(--cat-subquest);
    --takeaway-wash: rgba(253, 230, 138, 0.09);
    --takeaway-line: rgba(253, 230, 138, 0.28);
}

.takeaway--series {
    --takeaway-color: var(--series-bright);
    --takeaway-wash: var(--series-wash);
    --takeaway-line: var(--series-line);
}

.takeaway__title {
    margin-bottom: 6px;
    color: var(--takeaway-color);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: lowercase;
}

.takeaway__body {
    color: var(--color-text-secondary);
    font-size: 15.5px;
    line-height: 1.65;
}

.takeaway__body > :last-child {
    margin-bottom: 0;
}

.collapsible-block {
    --collapsible-color: var(--cat-technical);
    --collapsible-wash: rgba(193, 131, 225, 0.1);
    --collapsible-wash-hover: rgba(193, 131, 225, 0.14);
    --collapsible-line: rgba(193, 131, 225, 0.3);
    --collapsible-badge-text: #2a1132;
    width: 100%;
    margin: 20px 0;
    overflow: hidden;
    border: 1px solid var(--collapsible-line);
    border-radius: var(--radius);
}

.collapsible-block--explainer {
    --collapsible-color: var(--cat-explainer);
    --collapsible-wash: rgba(56, 189, 248, 0.08);
    --collapsible-wash-hover: rgba(56, 189, 248, 0.14);
    --collapsible-line: rgba(56, 189, 248, 0.24);
    --collapsible-badge-text: #0a1a24;
}

.collapsible-block--extra {
    --collapsible-color: var(--cat-extra);
    --collapsible-wash: rgba(236, 72, 153, 0.1);
    --collapsible-wash-hover: rgba(236, 72, 153, 0.14);
    --collapsible-line: rgba(236, 72, 153, 0.28);
    --collapsible-badge-text: #2a1132;
}

.collapsible-block--subquest {
    --collapsible-color: var(--cat-subquest);
    --collapsible-wash: rgba(253, 230, 138, 0.09);
    --collapsible-wash-hover: rgba(253, 230, 138, 0.14);
    --collapsible-line: rgba(253, 230, 138, 0.28);
    --collapsible-badge-text: #241c05;
}

.collapsible-block__summary {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--collapsible-wash);
    cursor: pointer;
    list-style: none;
    transition: background 200ms ease;
}

.collapsible-block__summary::-webkit-details-marker {
    display: none;
}

.collapsible-block__summary:hover {
    background: var(--collapsible-wash-hover);
}

.collapsible-block[open] > .collapsible-block__summary {
    border-bottom: 1px solid var(--collapsible-line);
}

.collapsible-block__heading {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.collapsible-block__badge {
    flex: none;
    padding: 2px 6px;
    border-radius: var(--radius);
    background: var(--collapsible-color);
    color: var(--collapsible-badge-text);
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.4;
    text-transform: lowercase;
    white-space: nowrap;
}

.collapsible-block__title {
    color: var(--color-text-primary);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.4;
}

.collapsible-block__readtime {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 9.5px;
    line-height: 1.4;
    text-transform: lowercase;
}

.collapsible-block__icon {
    flex: none;
    color: var(--collapsible-color);
    font-family: var(--font-mono);
    font-size: 16px;
    line-height: 1;
}

.collapsible-block__icon::before {
    content: "+";
}

.collapsible-block[open] > .collapsible-block__summary .collapsible-block__icon::before {
    content: "−";
}

.collapsible-block__content {
    padding: 14px 16px;
    color: var(--color-text-secondary);
    font-size: 15px;
    line-height: 1.7;
}

.collapsible-block__content > :first-child {
    margin-top: 0;
}

.collapsible-block__content > :last-child {
    margin-bottom: 0;
}

.collapsible-block .collapsible-block {
    margin: 14px 0 0;
}

.glossary-data {
    display: none;
}

.glossary-term {
    padding: 0;
    border: 0;
    border-bottom: 1px dashed rgba(217, 70, 239, 0.55);
    background: transparent;
    color: #f0d5ff;
    cursor: help;
}

.glossary-tooltip {
    position: fixed;
    z-index: 120;
    width: min(300px, calc(100vw - 16px));
    padding: 11px 13px;
    border: 1px solid var(--accent-line);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.5;
    pointer-events: none;
    opacity: 0;
}

.glossary-tooltip.is-visible {
    opacity: 1;
}

.glossary-tooltip__term {
    margin-bottom: 5px;
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: lowercase;
}

.glossary-list {
    width: 100%;
    margin: 28px 0;
    padding: 16px 18px;
    border: 1px solid var(--rule);
}

.glossary-list h3 {
    margin-top: 0;
}

.glossary-list dl {
    margin: 0;
}

.glossary-list dt {
    color: var(--color-text-primary);
    font-weight: 600;
}

.glossary-list dd {
    margin: 3px 0 14px;
}

.applet-embed {
    width: 100%;
    margin: 28px 0;
    border: 1px solid var(--rule);
    border-radius: var(--radius-none);
}

.applet-embed__chrome {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--rule);
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.4;
}

.applet-embed__chrome > span {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.applet-embed__chrome strong {
    padding: 2px 6px;
    border-radius: var(--radius);
    background: var(--cat-explainer);
    color: #0a1a24;
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-transform: lowercase;
}

.applet-embed__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.applet-embed__actions {
    flex: none;
}

.applet-frame,
.post-content iframe[src^="/static/applets/"] {
    width: 100%;
    min-height: var(--applet-frame-height, 240px);
    border: 0;
    background: var(--color-surface-sunk);
}

.applet-frame[data-applet-full-height="true"] {
    max-height: none;
}

.applet-frame::-webkit-scrollbar {
    display: none;
}

.applet-embed figcaption {
    min-height: 36px;
    margin: 0;
    padding: 9px 16px;
    border-top: 1px solid var(--rule);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 10.5px;
    line-height: 1.5;
    text-transform: lowercase;
}

.copy-toast {
    position: fixed;
    z-index: 150;
    padding: 6px 9px;
    border: 1px solid var(--accent-line);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    text-transform: lowercase;
}

.copy-toast.is-visible {
    opacity: 1;
}

.post-tags {
    display: flex;
    margin: 30px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--rule);
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
}

.post-tags li {
    padding: 4px 9px;
    border: 1px solid var(--rule);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: lowercase;
}

.post-series-end {
    margin-top: 32px;
    border: 1px solid var(--series-line);
}

.post-series-end__header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--series-line);
    background: var(--series-wash);
    color: var(--series-bright);
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.4;
    text-transform: lowercase;
}

.post-series-end__proper {
    text-transform: none;
}

.post-series-end__count {
    color: var(--color-text-muted);
}

.post-series-end__body {
    padding: 15px 16px;
}

.post-series-end__body h2 {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 700;
}

.post-series-end__body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.post-series-end__body a {
    display: inline-block;
    margin-top: 8px;
    color: var(--series-bright);
    font-family: var(--font-mono);
    font-size: 10px;
    text-decoration: none;
    text-transform: lowercase;
}

.post-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 30px;
}

.post-nav__item {
    display: flex;
    min-width: 0;
    min-height: 76px;
    flex-direction: column;
    justify-content: center;
    padding: 13px 16px;
    border: 1px solid var(--rule);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: background 160ms ease;
}

.post-nav__item:hover {
    background: rgba(255, 255, 255, 0.02);
}

.post-nav__item > span {
    margin-bottom: 4px;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: lowercase;
}

.post-nav__item strong {
    overflow: hidden;
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
}

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

.post-nav__item--empty {
    border-color: transparent;
}

.post-toc-drawer-toggle {
    display: none;
    min-height: 44px;
    margin: 5px 16px 5px 0;
    padding: 0 12px;
    border: 1px solid var(--accent-line);
    border-radius: var(--radius);
    background: var(--accent-wash);
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: lowercase;
}

.post-toc-backdrop {
    display: none;
}

/* Static and directory pages */

.content-page__header,
.directory-hero {
    padding: 42px 32px 30px;
    border-bottom: 1px solid var(--rule);
}

.content-page__header h1,
.directory-hero h1 {
    margin: 14px 0 10px;
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.04;
}

.content-page__header > p:last-child,
.directory-hero > p:last-child {
    max-width: 60ch;
    margin: 0;
}

.content-page {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    align-items: start;
}

.content-page__rail {
    display: flex;
    min-height: 120px;
    flex-direction: column;
    gap: 10px;
    padding: 26px 22px;
    border-right: 1px solid var(--rule);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: lowercase;
}

.content-page__rail a {
    color: var(--accent-bright);
    text-decoration: none;
}

.content-page__body {
    min-width: 0;
    padding: 30px 40px 40px;
}

.directory-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.directory-grid__item {
    display: grid;
    min-height: 110px;
    grid-template-columns: 28px 1fr;
    gap: 6px 12px;
    align-content: center;
    padding: 22px 32px;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background 160ms ease;
}

.directory-grid__item:nth-child(even) {
    border-right: 0;
}

.directory-grid__item:hover {
    background: rgba(255, 255, 255, 0.02);
}

.directory-grid__item strong {
    color: var(--color-text-primary);
    font-family: var(--font-head);
    font-size: 18px;
}

.directory-grid__index,
.directory-grid__item > span:last-child {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: lowercase;
}

.directory-grid__item > span:last-child {
    grid-column: 2;
    color: var(--accent-bright);
}

/* Error pages */

.error-page {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.error-header {
    min-height: 54px;
    border-bottom: 1px solid var(--rule);
    background: var(--color-surface);
}

.error-header a {
    display: flex;
    width: min(100%, 760px);
    min-height: 54px;
    margin-inline: auto;
    align-items: center;
    gap: 10px;
    padding: 0 32px;
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    font-size: 12.5px;
    text-decoration: none;
    text-transform: lowercase;
}

.error-header span {
    color: var(--color-text-muted);
}

.error-shell {
    width: min(100%, 760px);
    min-height: 360px;
    margin-inline: auto;
    border-right: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
}

.error-band {
    display: flex;
    gap: 7px;
    padding: 9px 32px;
    background: var(--accent);
    color: var(--accent-on);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: lowercase;
}

.error-state {
    padding: 32px;
}

.error-state h1 {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.error-state p {
    max-width: 48ch;
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.65;
}

.error-state a {
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: lowercase;
}

@media (max-width: 1099px) {
    .post-layout,
    .content-page {
        grid-template-columns: minmax(0, 1fr);
    }

    .post-sidebar {
        position: fixed;
        top: var(--site-header-offset);
        right: 0;
        bottom: 0;
        z-index: 100;
        width: min(85vw, 320px);
        overflow-y: auto;
        border: 0;
        border-left: 1px solid var(--rule);
        background: var(--color-surface-rail);
        transform: translateX(100%);
        transition: transform 180ms ease;
    }

    .post-rail {
        position: static;
        max-height: none;
    }

    .toc-drawer-open .post-sidebar {
        transform: translateX(0);
    }

    .post-toc-backdrop {
        position: fixed;
        inset: var(--site-header-offset) 0 0;
        z-index: 90;
        background: rgba(2, 6, 23, 0.62);
    }

    .toc-drawer-open .post-toc-backdrop {
        display: block;
    }

    .post-toc-drawer-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .content-page__rail {
        display: none;
    }

    .post-grid,
    .directory-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .post-cell,
    .directory-grid__item {
        border-right: 0;
    }
}

@media (max-width: 699px) {
    :root {
        --site-header-offset: 55px;
    }

    body {
        font-size: 15px;
    }

    .site-title {
        gap: 7px;
        padding: 14px 16px;
        font-size: 11px;
    }

    .site-nav__link {
        min-width: 0;
        padding: 0 9px;
        font-size: 9.5px;
        letter-spacing: 0.06em;
    }

    .site-nav__link:last-child {
        padding-right: 12px;
    }

    .site-footer__inner {
        min-height: 84px;
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        padding: 18px 16px;
    }

    .reading-status {
        padding: 0 10px;
        font-size: 9px;
    }

    .post-toc-drawer-toggle {
        margin-right: 8px;
        padding: 0 9px;
    }

    .index-hero,
    .post-header,
    .series-hero,
    .content-page__header,
    .directory-hero {
        padding: 28px 16px 24px;
    }

    .index-hero h1,
    .post-header h1,
    .content-page__header h1,
    .directory-hero h1,
    .series-hero h1 {
        margin-top: 12px;
        font-size: 27px;
        line-height: 1.08;
    }

    .index-stats {
        overflow-x: auto;
    }

    .index-stats__cell,
    .index-stats__cell:first-child {
        flex: none;
        padding: 13px 16px;
    }

    .index-stats__sort {
        min-width: 128px;
        padding: 13px 16px;
    }

    .lead-post {
        grid-template-columns: minmax(0, 1fr);
    }

    .lead-post__media {
        min-height: 150px;
        border-right: 0;
        border-bottom: 1px solid var(--rule);
    }

    .lead-post__media img {
        height: 150px;
    }

    .lead-post__body,
    .post-cell,
    .directory-grid__item {
        padding: 20px 16px;
    }

    .lead-post__body h2 {
        font-size: 20px;
    }

    .index-divider {
        padding-inline: 16px;
    }

    .pagination {
        grid-template-columns: 1fr auto 1fr;
    }

    .pagination > * {
        padding: 0 12px;
    }

    .pagination__direction--older {
        justify-content: flex-end;
    }

    .applet-index__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .applet-index__item {
        min-height: 78px;
        padding: 16px;
        border-right: 0;
    }

    .series-group__header {
        align-items: flex-start;
        flex-direction: column;
        padding-inline: 16px;
    }

    .series-card__title-row {
        grid-template-columns: 22px minmax(0, 1fr);
        padding-inline: 16px;
    }

    .series-group__identity {
        flex-wrap: wrap;
    }

    .series-group__action {
        width: 100%;
        justify-content: space-between;
    }

    .series-card__title-row .series-progress {
        grid-column: 2;
    }

    .series-card__meta {
        grid-column: 2;
    }

    .series-card__description {
        margin-inline: 16px;
    }

    .series-part {
        grid-template-columns: 22px minmax(0, 1fr);
        gap: 10px;
        padding: 12px 16px;
    }

    .series-part__meta {
        grid-column: 2;
        justify-content: flex-start;
    }

    .post-series-band {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding: 10px 16px;
    }

    .post-series-band__identity {
        flex-wrap: wrap;
    }

    .post-series-band__action {
        width: 100%;
        justify-content: space-between;
    }

    .post {
        padding: 24px 16px 30px;
    }

    .featured-image img {
        height: 150px;
    }

    .post-content {
        font-size: 15px;
    }

    .post-content h1,
    .post-content h2 {
        margin-top: 34px;
        font-size: 20px;
    }

    .post-content h3 {
        font-size: 17px;
    }

    .para-anchor {
        position: static;
        display: inline-block;
        width: 20px;
        margin: 0 3px 0 0;
        opacity: 1;
    }

    .post-nav {
        grid-template-columns: minmax(0, 1fr);
    }

    .post-nav__item--empty {
        display: none;
    }

    .content-page__body {
        padding: 24px 16px 30px;
    }

    .applet-embed__chrome {
        align-items: flex-start;
        flex-direction: column;
    }

    .applet-embed__actions {
        min-height: 30px;
    }

    .error-header a,
    .error-band,
    .error-state {
        padding-right: 16px;
        padding-left: 16px;
    }
}

@media (max-width: 420px) {
    .site-title__secondary {
        display: none;
    }

    .reading-status {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
}

@media print {
    .site-header,
    .site-footer,
    .post-sidebar,
    .post-toc-backdrop,
    .post-nav,
    .post-series-band {
        display: none !important;
    }

    .site-main {
        border: 0;
    }

    .post-layout {
        display: block;
    }

    .post {
        padding: 0;
    }
}