/*
 * Thought Cloud post pages — Atlas theme.
 * Shared by every essay at /thought-cloud/<slug>/, and by the standalone
 * "Too many exponents" post + its claude-derivations index. Single source
 * of truth: edit here, then mirror to too-many-exponents/post.css.
 * Palette / typography / cursor mirror the cloud index at /thought-cloud/.
 */

:root {
    /* Atlas palette — parchment background, warm dark-brown ink,
       sienna accent for the active state. Grey is gone. */
    --bg-warm: #f4efe5;
    --text-primary: #2b1f15;
    --text-muted: #6b5840;
    --text-faint: #a8967a;
    --text-active: #b8431f;
    --accent: #b8431f;
    --rule: rgba(43, 31, 21, 0.10);
    --rule-strong: rgba(43, 31, 21, 0.20);
    --tint-soft: rgba(43, 31, 21, 0.04);

    --header-height: 64px;
    --transition-fast: 0.15s ease;
    --transition-medium: 0.3s ease;
    --content-max-width: 836px;

    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-serif: 'EB Garamond', Georgia, serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

    /* 4-triangle plus cursor — sienna arrowheads on a transparent
       cross, with the center marking the hot-spot. Two variants:
       default (ink dot center) for body text, clickable (filled ink
       square center) for links and buttons. */
    --cursor-plus: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><g fill='%23b8431f'><polygon points='12,2 10,9.8 14,9.8'/><polygon points='22,12 14.2,10 14.2,14'/><polygon points='12,22 10,14.2 14,14.2'/><polygon points='2,12 9.8,10 9.8,14'/></g><circle cx='12' cy='12' r='1' fill='%232b1f15'/></svg>") 12 12, crosshair;
    --cursor-plus-click: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><g fill='%23b8431f'><polygon points='12,2 10,9.8 14,9.8'/><polygon points='22,12 14.2,10 14.2,14'/><polygon points='12,22 10,14.2 14,14.2'/><polygon points='2,12 9.8,10 9.8,14'/></g><rect x='10' y='10' width='4' height='4' fill='%232b1f15'/></svg>") 12 12, pointer;
}

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-serif);
    background-color: var(--bg-warm);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    cursor: var(--cursor-plus);
}

a, button, [role="button"],
input[type="range"], input[type="checkbox"], input[type="number"], input[type="radio"],
label, select, summary,
.nav-link, .post-link, .hamburger {
    cursor: var(--cursor-plus-click);
}

/* ===== Header Navigation ===== */
/* Pinned header, but hides on scroll-down and re-appears on scroll-up
   (directional show/hide). post-meta.js drives the toggle via the
   .hidden modifier. Translate-only animation — no layout shift. */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    height: var(--header-height);
    padding: 0 1.5rem;
    background: linear-gradient(to bottom, var(--bg-warm) 0%, var(--bg-warm) 80%, transparent 100%);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    transition: transform 0.25s ease;
}
.site-header.hidden {
    transform: translateY(-100%);
}
/* When the mobile menu is open, lift the header above the .mobile-menu overlay
   (z 999) so the hamburger — now morphed to an ✕ — stays visible and tappable. */
.site-header.menu-open {
    z-index: 1000;
    transform: none;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-link {
    color: var(--text-muted);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color var(--transition-fast);
    padding: 0.5rem 0;
    display: block;
}

.nav-link:hover {
    color: var(--text-primary);
    text-decoration: none;
}

.nav-link em { font-style: italic; }
.nav-link.active { color: var(--text-active); }

/* Static breadcrumb styles (for subpages like blog posts) */
.nav-item.static-breadcrumb {
    display: flex;
    align-items: center;
}

.breadcrumb-divider {
    margin: 0 0.5rem;
    color: var(--text-faint);
    flex-shrink: 0;
}

.breadcrumb-current {
    color: var(--text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 30vw;
    display: inline-block;
    padding: 0.5rem 0;
    font-style: italic;
}

/* Hamburger (hidden on desktop) */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    padding: 0;
    margin-left: auto;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-primary);
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--bg-warm);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-medium), visibility 0s var(--transition-medium);
}

.mobile-menu.open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--transition-medium), visibility 0s 0s;
}

.mobile-menu-content {
    padding: calc(var(--header-height) + 2rem) 1.5rem 2rem;
}

.mobile-menu .mobile-nav-item {
    margin-bottom: 1.5rem;
}

.mobile-menu .mobile-nav-link {
    display: block;
    font-size: 1.25rem;
    color: var(--text-primary);
    text-decoration: none;
}

.mobile-menu .mobile-nav-link em { font-style: italic; }
.mobile-menu .mobile-nav-link.active { color: var(--text-active); }

/* ===== Main Content ===== */
.content {
    padding: calc(var(--header-height) + 2.5rem) 1.5rem 5rem;
    margin: 0 auto;
    max-width: var(--content-max-width);
}

/* ===== Article ===== */
.article-header {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--rule);
}

.article-title {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.005em;
    margin-bottom: 0.6rem;
}

.article-subtitle {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    font-style: italic;
}

.article-date {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
}

/* Per-post meta strip — populated by post-meta.js from data.js.
   Same mono / faint / uppercase treatment as the cloud index card; date
   is folded in (long form, with day) so this replaces the standalone
   .article-date paragraph on posts that adopt the strip.

   Two placement modifiers:
     .post-meta-strip.above   — kicker above the title
     .post-meta-strip.below   — sits under the title where date used to */
.post-meta-strip {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: baseline;
}

.post-meta-strip.above { margin-bottom: 0.95rem; }
.post-meta-strip.below { margin-top: 0.1rem; }

.post-meta-type { font-weight: 500; }
.post-meta-sep  { color: var(--text-faint); }

.post-meta-technical { letter-spacing: 0; }

/* Same font-metrics correction as the index meta line in style.css:
   uppercase text + middot sit on the baseline; the em-centered BLACK/WHITE
   CIRCLE glyphs sit higher. Nudge text down ~0.2em and dots down ~0.1em so
   the pair settles on the row's optical center. Tweak in tandem if font
   changes. */
.post-meta-strip .post-meta-type,
.post-meta-strip .post-meta-word,
.post-meta-strip .post-meta-wordcount,
.post-meta-strip .post-meta-date,
.post-meta-strip .post-meta-sep {
    position: relative;
    top: 0.2em;
}
.post-meta-strip .post-meta-dots {
    position: relative;
    top: 0.1em;
    letter-spacing: 0.04em;
}
.post-meta-strip .post-meta-word {
    margin-left: 0.45em;
}

/* ===== Section navigation (right-side dots) =====
   Injected by post-meta.js for posts that have ≥2 headings in the body.
   Each heading gets a dot; dots fill in as the reader scrolls past their
   section (progress-bar model). The current section's dot is accented.
   On hover, the whole nav expands to show the section titles
   hierarchically (indented by heading level) and they become clickable
   anchors. Each heading is auto-assigned an `id` (slug of its text) so
   the URLs are deep-linkable too: /post/#some-section. */
.section-nav {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.6rem 0.85rem;
    cursor: default;
}

.section-nav-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    line-height: 1.2;
    padding: 0.1rem 0;
    cursor: var(--cursor-plus-click);
    transition: color var(--transition-fast);
}

/* Indent by heading-level depth relative to the shallowest heading in
   this post. data-level="0" = top-level; "1", "2" get progressively
   indented when the labels are visible. Indent applies to the LABEL
   only (via margin), not the dot — dots stay aligned in a clean column. */
.section-nav-item:hover {
    color: var(--text-primary);
}

.section-nav-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid currentColor;
    background: transparent;
    flex-shrink: 0;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.section-nav-item.passed .section-nav-dot {
    background: currentColor;
}

.section-nav-item.active {
    color: var(--text-primary);
}
.section-nav-item.active .section-nav-dot {
    background: var(--accent);
    border-color: var(--accent);
    transform: scale(1.25);
}

/* Labels hidden by default; revealed on hover/focus-within of the nav.
   Background panel also fades in then, to avoid the labels colliding
   with article text. */
.section-nav-label {
    opacity: 0;
    max-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition:
        opacity 0.22s ease,
        max-width 0.28s ease;
    pointer-events: none;
}

/* Heading-level demarcation. Each level steps down in size and weight and
   indents further, so the hierarchy reads clearly when labels are shown:
   level 0 = post title, 1 = H2 (section), 2 = H3, 3 = H4 (subsection).
   The dots stay a uniform progress rail — level is carried by the labels. */
.section-nav-item[data-level="0"] .section-nav-label {
    font-size: 0.85rem; font-weight: 600; padding-left: 0;
}
.section-nav-item[data-level="1"] .section-nav-label {
    font-size: 0.77rem; font-weight: 600; padding-left: 0.55rem;
}
.section-nav-item[data-level="2"] .section-nav-label {
    font-size: 0.72rem; font-weight: 400; padding-left: 1.5rem;
}
.section-nav-item[data-level="3"] .section-nav-label {
    font-size: 0.68rem; font-weight: 400; font-style: italic; padding-left: 2.45rem;
}

.section-nav-panel {
    position: absolute;
    inset: 0;
    background: rgba(244, 239, 229, 0.92);
    border: 1px solid var(--rule);
    border-radius: 4px;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.22s ease;
    pointer-events: none;
    z-index: -1;
}

.section-nav:hover .section-nav-label,
.section-nav:focus-within .section-nav-label {
    opacity: 1;
    max-width: min(36rem, 46vw);
    pointer-events: auto;
}
.section-nav:hover .section-nav-panel,
.section-nav:focus-within .section-nav-panel {
    opacity: 1;
}

@media (max-width: 768px) {
    /* Hide the section nav on narrow screens — not enough horizontal
       room to expand the labels without overlapping the article. */
    .section-nav { display: none; }
}

/* Article body */
.article-body {
    font-size: 1.05rem;
    /* Break long unbreakable strings (e.g. raw footnote URLs) so they can't
       widen the page and cause horizontal scroll on narrow screens. */
    overflow-wrap: break-word;
}

.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 {
    margin-top: 2.25rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    font-family: var(--font-serif);
    color: var(--text-primary);
    line-height: 1.3;
}

.article-body h2 { font-size: 1.55rem; }
.article-body h3 { font-size: 1.3rem; }
.article-body h4 {
    font-size: 1rem;
    font-variant: small-caps;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.article-body p {
    margin: 1.05rem 0;
    line-height: 1.7;
}

.article-body a {
    color: var(--text-primary);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
}

.article-body a:hover {
    color: var(--accent);
}

.article-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 2rem auto;
    border-radius: 2px;
    box-shadow: 0 1px 2px var(--rule-strong);
}

/* Iframes (interactive Plotly figures) — match the content column.
   Unlike <img>, iframes do *not* get an intrinsic aspect-ratio from
   their HTML width/height attributes via the UA stylesheet, so we set
   it explicitly per size combination we actually use. `max-width: 100%`
   then clamps each iframe to the content column, and `height: auto`
   recomputes the height from aspect-ratio. Adding a new iframe with a
   different aspect requires a new rule below. */
.article-body iframe {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 2rem auto;
    border: none;
}
.article-body iframe[width="800"][height="420"] { aspect-ratio: 800 / 420; }
.article-body iframe[width="800"][height="450"] { aspect-ratio: 800 / 450; }
.article-body iframe[width="800"][height="475"] { aspect-ratio: 800 / 475; }
.article-body iframe[width="800"][height="520"] { aspect-ratio: 800 / 520; }
.article-body iframe[width="800"][height="600"] { aspect-ratio: 800 / 600; }
.article-body iframe[width="800"][height="650"] { aspect-ratio: 800 / 650; }
.article-body iframe[width="800"][height="470"] { aspect-ratio: 800 / 470; }
.article-body iframe[width="800"][height="560"] { aspect-ratio: 800 / 560; }
.article-body iframe[width="600"][height="620"] { aspect-ratio: 600 / 620; }
.article-body iframe[width="700"][height="640"] { aspect-ratio: 700 / 640; }

.article-body figure {
    margin: 2rem 0;
}

/* Iframes (or imgs) nested in a <figure> shouldn't double up the outer
   2rem vertical margin or push the figcaption away — let the figure own
   the outer spacing and the figcaption sit immediately under the media. */
.article-body figure iframe,
.article-body figure img {
    margin: 0 auto;
}

.article-body figcaption {
    font-size: 0.88rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 0.6rem;
    text-align: center;
}

.article-body blockquote {
    margin: 1.75rem 0;
    padding: 0.75rem 1.5rem;
    border-left: 2px solid var(--accent);
    color: var(--text-muted);
    font-style: italic;
}

.article-body blockquote p { margin: 0; }

.article-body hr {
    border: none;
    border-top: 1px solid var(--rule-strong);
    margin: 2.5rem auto;
    width: 30%;
}

.article-body .katex { font-size: 1em; }

/* Tables. Markdown tables (and any inside <details> collapsibles) get
   Atlas-themed styling: hairline row separators, generous cell padding,
   header in bold ink, and `table-layout: auto` so the first (typically
   short / math) column shrink-wraps while the description column flows. */
.article-body table {
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-family: var(--font-serif);
    font-size: 0.98rem;
    line-height: 1.45;
    width: auto;
    max-width: 100%;
}
.article-body th,
.article-body td {
    padding: 0.45rem 1.1rem 0.45rem 0;
    text-align: left;
    border-bottom: 1px solid var(--rule);
    vertical-align: baseline;
}
.article-body th:last-child,
.article-body td:last-child { padding-right: 0; }
.article-body th {
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--rule-strong);
    padding-bottom: 0.5rem;
    letter-spacing: 0.01em;
}
.article-body tr:last-child td { border-bottom: none; }
.article-body td .katex { white-space: nowrap; }

/* Collapsibles. Default disclosure triangle replaced with a sienna chevron;
   summary line gets a subtle rule below it and the contents indent slightly. */
.article-body details {
    margin: 1.25rem 0;
}
.article-body summary {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--text-muted);
    padding: 0.3rem 0;
    list-style: none;
    border-bottom: 1px solid var(--rule);
}
.article-body summary::-webkit-details-marker { display: none; }
.article-body summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 0.55rem;
    color: var(--accent);
    transition: transform var(--transition-fast);
}
.article-body details[open] summary::before {
    transform: rotate(90deg);
}
.article-body details[open] summary {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.article-body details > *:not(summary) {
    margin-left: 1.3rem;
}

.article-body sup {
    font-size: 0.7rem;
    vertical-align: super;
    line-height: 0;
    color: var(--accent);
}

.article-body ul,
.article-body ol {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.article-body li { margin: 0.5rem 0; }

.article-body code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    background: var(--tint-soft);
    padding: 0.1rem 0.35rem;
    border-radius: 2px;
}

.article-body pre {
    background: var(--tint-soft);
    padding: 1rem 1.25rem;
    border-radius: 2px;
    overflow-x: auto;
    margin: 1.5rem 0;
    border-left: 2px solid var(--rule-strong);
}

.article-body pre code {
    background: none;
    padding: 0;
}

/* ===== Footnotes ===== */
p.footnote {
    font-size: 0.85em;
    color: var(--text-muted);
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
    padding-left: 1rem;
    line-height: 1.55;
}

p.footnote sup {
    color: var(--accent);
    margin-right: 0.2rem;
}

/* Marktext / Pandoc footnote section (kept visible as a fallback;
   styled to match the Substack p.footnote list above). */
.article-body section.footnotes {
    margin-top: 2rem;
    font-size: 0.85em;
    color: var(--text-muted);
    line-height: 1.55;
}

.article-body section.footnotes hr {
    margin: 1rem auto 1rem 0;
    width: 30%;
}

.article-body section.footnotes ol {
    padding-left: 1.5rem;
}

.article-body section.footnotes li {
    margin: 0.4rem 0;
}

.article-body a.footnote-back {
    margin-left: 0.35rem;
    text-decoration: none;
    color: var(--text-faint);
}

.article-body a.footnote-back:hover { color: var(--accent); }

/* Hoverable footnote reference. Wraps a <sup> in the body. */
.article-body a.footnote-anchor {
    position: relative;
    text-decoration: none;
    /* Defeat the global .article-body a underline so the sup reads cleanly. */
    border-bottom: none;
    cursor: var(--cursor-plus-click);
}

.article-body a.footnote-anchor sup {
    color: var(--accent);
    transition: color var(--transition-fast);
}

.article-body a.footnote-anchor:hover sup,
.article-body a.footnote-anchor:focus-visible sup {
    color: var(--text-primary);
}

.footnote-tooltip {
    /* Always rendered (so JS can measure it for viewport-aware positioning),
       but invisible until JS adds .is-visible. Show/hide is controlled in
       footnotes.js — only on hover-capable devices; touch falls through to
       the anchor href, which jumps to the bottom list. */
    position: absolute;
    bottom: calc(100% + 8px);
    top: auto;
    left: 50%;
    transform: translateX(calc(-50% + var(--footnote-nudge-x, 0px)));
    width: max-content;
    max-width: min(360px, calc(100vw - 32px));
    overflow-y: auto;
    z-index: 50;

    background: var(--bg-warm);
    color: var(--text-primary);
    border: 1px solid var(--rule-strong);
    border-radius: 3px;
    padding: 0.6rem 0.8rem;
    box-shadow: 0 6px 18px rgba(43, 31, 21, 0.12);

    font-family: var(--font-serif);
    font-size: 0.92rem;
    font-style: normal;
    line-height: 1.55;
    text-align: left;
    white-space: normal;

    opacity: 0;
    visibility: hidden;
    /* Allow pointer events when visible so the tooltip itself is hoverable
       and inner links are clickable. Hidden state blocks events so it
       doesn't intercept clicks on text behind it. */
    pointer-events: none;
    transition: opacity 0.12s ease, visibility 0s linear 0.12s;
}

.footnote-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.12s ease, visibility 0s linear 0s;
}

/* Flipped position: anchor's bottom edge instead of top. */
.footnote-tooltip.footnote-tooltip--below {
    bottom: auto;
    top: calc(100% + 8px);
}

.footnote-tooltip a {
    /* Links inside the tooltip stay legible against parchment. */
    color: var(--text-primary);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 2px;
}

.footnote-tooltip a:hover { color: var(--accent); }

.footnote-tooltip p { margin: 0.4rem 0; }
.footnote-tooltip p:first-child { margin-top: 0; }
.footnote-tooltip p:last-child { margin-bottom: 0; }

/* ===== Video Notice ===== */
.video-notice {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-top: 0.75rem;
    font-style: normal;
}

.video-notice a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.video-notice a:hover { color: var(--text-primary); }

/* ===== Video Placeholder (inline in article) ===== */
.video-placeholder {
    text-align: center;
    margin: 2rem 0;
    padding: 2.5rem 1rem;
    border: 1px dashed var(--rule-strong);
    border-radius: 2px;
    background: var(--tint-soft);
}

.video-placeholder a {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.video-placeholder a::before { content: "▶  "; }
.video-placeholder a:hover { color: var(--text-primary); }

/* ===== Inline article video ===== */
/* Mirrors the <figure><img> treatment so videos sit centered with the
   same margin / shadow / corner-radius as plot images. Use:
       <figure class="article-video"><video src="..." autoplay loop muted
           playsinline></video></figure>
   Add `controls` (and drop `autoplay loop muted`) per-essay if the
   clip warrants narration / scrub UI. */
.article-body figure.article-video {
    margin: 2rem 0;
    text-align: center;
}

.article-body video {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 2px;
    box-shadow: 0 1px 2px var(--rule-strong);
    background: var(--tint-soft);
}

/* ===== Mobile Responsive ===== */
@media (max-width: 768px) {
    :root { --header-height: 56px; }
    .site-header { padding: 0 1rem; }
    .site-nav { display: none; }
    .hamburger { display: flex; }
    .site-header.menu-open .hamburger span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .site-header.menu-open .hamburger span:nth-child(2) { opacity: 0; }
    .site-header.menu-open .hamburger span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
    .content { padding: calc(var(--header-height) + 1.5rem) 1.25rem 3rem; }
    .article-title { font-size: 1.9rem; }
}

@media (max-width: 480px) {
    .content { padding: calc(var(--header-height) + 1rem) 1rem 2rem; }
    .article-title { font-size: 1.65rem; }
}

/* ===== Post footer: subscribe + nearest artifacts ===== */
.post-footer {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--rule-strong);
}
.post-subscribe {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    padding-bottom: 2.5rem;
}
.post-subscribe-line {
    margin: 0;
    font-size: 1.08rem;
    color: var(--text-muted);
}
.post-subscribe-btn {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    color: var(--bg-warm);
    background: var(--accent);
    padding: 0.55rem 1.15rem;
    border-radius: 4px;
    text-decoration: none;
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.post-subscribe-btn:hover { background: #9c3517; transform: translateY(-1px); }

.post-nearest-head {
    font-family: var(--font-sans);
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-faint);
    margin: 0 0 1rem;
}
.post-nearest-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}
.pn-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "title type" "summary summary";
    gap: 0.2rem 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--rule);
    border-radius: 5px;
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.pn-item:hover { border-color: var(--rule-strong); background: var(--tint-soft); }
.pn-title { grid-area: title; font-size: 1.12rem; }
.pn-item:hover .pn-title { color: var(--text-active); }
.pn-ext { color: var(--text-faint); font-size: 0.85em; }
.pn-type {
    grid-area: type;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: lowercase;
    color: var(--text-faint);
    align-self: center;
    white-space: nowrap;
}
.pn-summary {
    grid-area: summary;
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.4;
}

@media (max-width: 480px) {
    .post-footer { padding-top: 1.5rem; }
}

/* ===== Print ===== */
@media print {
    body { cursor: auto; background: white; color: black; }
    .site-header, .mobile-menu, .cloud-hud, .post-footer { display: none; }
    .content { padding: 2rem; max-width: none; }
}