/* ══════════════════════════════════════════════════════════════════════════════
   THE WARMTH OF ENTROPY - Cosmic Edition
   Inspired by finaloffshoring.com
   Dark-first design with constellation background
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   CSS CUSTOM PROPERTIES
   ───────────────────────────────────────────────────────────────────────────── */
:root {
    /* Dark mode (default) */
    --bg-deep: #07080c;
    --bg-primary: #0a0b10;
    --bg-elevated: #0f1117;
    --bg-surface: #141620;

    --text-primary: #f0ece4;
    --text-secondary: #c4b89e;
    --text-muted: #a0947e;
    --text-heading: #f8f4ec;

    --accent-gold: #c9a666;
    --accent-gold-bright: #e4c77b;
    --accent-gold-dim: #8a7340;
    --accent-blue: #4a6fa5;
    --accent-blue-bright: #6b94d1;

    --border-subtle: rgba(201, 166, 102, 0.08);
    --border-medium: rgba(201, 166, 102, 0.15);

    --constellation-dot: transparent;
    --constellation-line: transparent;

    --toc-width: 340px;
    --content-max: 720px;
    /* Font stacks with robust fallbacks for offline/blocked CDN scenarios */
    --reading-font: 'Cormorant Garamond', Palatino, 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    --display-font: 'Cinzel', Trajan, 'Times New Roman', Times, serif;
}

/* Pandoc emits native MathML, avoiding a third-party renderer and network call. */
math[display="block"] {
    display: block;
    max-width: 100%;
    margin: 1.25rem auto;
    overflow-x: auto;
    text-align: center;
}

/* Light mode overrides - MAXIMUM contrast, no stars */
html:not(.dark) {
    --bg-deep: #ffffff;
    --bg-primary: #ffffff;
    --bg-elevated: #f5f5f5;
    --bg-surface: #eeeeee;

    --text-primary: #000000;
    --text-secondary: #000000;
    --text-muted: #222222;
    --text-heading: #000000;

    --accent-gold: #4a3500;
    --accent-gold-bright: #5a4200;
    --accent-gold-dim: #5c4400;

    --border-subtle: rgba(0, 0, 0, 0.15);
    --border-medium: rgba(0, 0, 0, 0.25);

    --constellation-dot: transparent;
    --constellation-line: transparent;
}

/* Constellation disabled — CSS hidden, JS skipped */
.constellation-container {
    display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BASE STYLES
   ───────────────────────────────────────────────────────────────────────────── */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

/* ─────────────────────────────────────────────────────────────────────────────
   SCROLLBARS — every scrollable surface, both themes
   ───────────────────────────────────────────────────────────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-gold-dim);
    background-clip: padding-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* ─────────────────────────────────────────────────────────────────────────────
   OFFSCREEN RENDERING — chapters far from the viewport skip style/layout/paint
   (the build wraps each h1-delimited chapter in a section.cv-chapter element)
   ───────────────────────────────────────────────────────────────────────────── */
.cv-chapter {
    content-visibility: auto;
    contain-intrinsic-size: auto 2400px;
}

@media print {
    .cv-chapter {
        content-visibility: visible;
    }
}

/* Temporarily set by features that must measure the whole document
   (line-number computation) */
.force-render-chapters .cv-chapter {
    content-visibility: visible;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 999;
    padding: 1rem;
    background: var(--accent-gold);
    color: var(--bg-deep);
    font-weight: 600;
    text-decoration: none;
    border-bottom: none;
}
.skip-link:focus {
    top: 0;
}

html {
    font-size: 18px;
    scroll-behavior: smooth;
    height: 100%;
    background: var(--bg-deep);
}

body {
    font-family: var(--reading-font);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.85;
    color: var(--text-primary);
    background: var(--bg-deep);
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CONSTELLATION BACKGROUND
   ───────────────────────────────────────────────────────────────────────────── */
.constellation-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.constellation-canvas {
    width: 100%;
    height: 100%;
}

/* Static fallback pattern */
.constellation-static {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(1px 1px at 10% 20%, var(--constellation-dot) 1px, transparent 1px),
        radial-gradient(1px 1px at 25% 45%, var(--constellation-dot) 1px, transparent 1px),
        radial-gradient(2px 2px at 40% 15%, var(--constellation-dot) 1px, transparent 1px),
        radial-gradient(1px 1px at 55% 70%, var(--constellation-dot) 1px, transparent 1px),
        radial-gradient(1px 1px at 70% 35%, var(--constellation-dot) 1px, transparent 1px),
        radial-gradient(2px 2px at 85% 60%, var(--constellation-dot) 1px, transparent 1px),
        radial-gradient(1px 1px at 15% 85%, var(--constellation-dot) 1px, transparent 1px),
        radial-gradient(1px 1px at 90% 10%, var(--constellation-dot) 1px, transparent 1px),
        radial-gradient(1px 1px at 35% 90%, var(--constellation-dot) 1px, transparent 1px),
        radial-gradient(2px 2px at 60% 5%, var(--constellation-dot) 1px, transparent 1px),
        radial-gradient(1px 1px at 5% 55%, var(--constellation-dot) 1px, transparent 1px),
        radial-gradient(1px 1px at 95% 85%, var(--constellation-dot) 1px, transparent 1px);
    opacity: 0.6;
}

/* ─────────────────────────────────────────────────────────────────────────────
   NAVIGATION SIDEBAR
   ───────────────────────────────────────────────────────────────────────────── */
.toc-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--toc-width);
    height: 100vh;
    background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-deep) 100%);
    border-right: 1px solid var(--border-subtle);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.toc-sidebar.collapsed {
    transform: translateX(-100%);
}

/* Logo/Brand area */
.toc-brand {
    padding: 2rem 1.5rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
}

.toc-logo {
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    display: block;
}

.toc-logo img {
    width: 100%;
    height: 100%;
}

.toc-brand-title {
    font-family: var(--display-font);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Table of Contents */
.toc-label {
    padding: 1.5rem 1.5rem 0.75rem;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 500;
}

.toc-content {
    flex: 1;
    padding: 0 0 2rem;
    overflow-y: auto;
}

.toc-content::-webkit-scrollbar {
    width: 4px;
}

.toc-content::-webkit-scrollbar-track {
    background: transparent;
}

.toc-content::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 2px;
}

.toc-content ul {
    list-style: none;
}

/* Part-level navigation */
.toc-part {
    margin-bottom: 0.25rem;
}

.toc-part > a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.5rem 0.9rem 1rem;
    text-decoration: none;
    transition: all 0.25s ease;
    border-left: 2px solid transparent;
    cursor: pointer;
}

.toc-part > a:hover {
    background: rgba(201, 166, 102, 0.05);
    border-left-color: var(--accent-gold-dim);
}

.toc-part > a.active {
    background: rgba(201, 166, 102, 0.08);
    border-left-color: var(--accent-gold);
}

.toc-numeral {
    font-family: var(--display-font);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--accent-gold-dim);
    min-width: 1.5rem;
}

.toc-part > a.active .toc-numeral {
    color: var(--accent-gold);
}

.toc-title {
    font-family: var(--reading-font);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.4;
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.toc-part > a:hover .toc-title,
.toc-part > a.active .toc-title {
    color: var(--text-primary);
}

.toc-toggle-icon {
    margin-left: auto;
    font-size: 1.1rem;
    color: var(--text-muted);
    transition: transform 0.3s ease;
}

.toc-part.expanded .toc-toggle-icon {
    transform: rotate(90deg);
}

.toc-part > a:hover .toc-toggle-icon {
    color: var(--text-secondary);
}

/* Interlude entries — visually distinct inter-section transitions */
.toc-interlude > a {
    padding: 0.5rem 1.5rem 0.5rem 1rem;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.toc-interlude .toc-title {
    font-style: italic;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.toc-interlude > a:hover .toc-title {
    color: var(--accent-gold);
}

/* Dialogue entries — Candle & Flame thread, warmer and more intimate */
.toc-ch-dialogue > a {
    font-style: italic;
    color: var(--accent-gold-dim);
    letter-spacing: 0.02em;
}

.toc-ch-dialogue > a:hover {
    color: var(--accent-gold);
}

/* Chapter-level navigation */
.toc-chapters {
    padding-left: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
}

.toc-part.expanded .toc-chapters {
    max-height: 20000px;
}

.toc-chapter {
    border-left: 2px solid transparent;
}

.toc-chapter a {
    display: block;
    padding: 0.5rem 2rem 0.5rem 1.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.2s ease;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    white-space: normal;
}

.toc-chapter a:hover {
    color: var(--text-secondary);
    background: rgba(201, 166, 102, 0.03);
}

.toc-chapter a.active {
    color: var(--accent-gold);
    border-left-color: var(--accent-gold);
}

/* Chapter with sections - expandable */
.toc-chapter.has-sections > a {
    display: flex;
    align-items: center;
}

.toc-chapter.has-sections > a .toc-toggle-icon {
    margin-left: auto;
    margin-right: 0.5rem;
}

/* Section level (3rd level) */
.toc-sections {
    list-style: none;
    padding-left: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
}

.toc-chapter.expanded .toc-sections {
    max-height: 20000px;
}

.toc-chapter.expanded > a .toc-toggle-icon {
    transform: rotate(90deg);
}

.toc-section a {
    display: block;
    padding: 0.35rem 1.5rem 0.35rem 2.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.2s ease;
    opacity: 0.8;
}

.toc-section a:hover {
    color: var(--text-secondary);
    opacity: 1;
}

.toc-section a.active {
    color: var(--accent-gold);
}

/* Theme Toggle */
.toc-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--border-subtle);
    margin-top: auto;
}

.theme-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: none;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    padding: 0.6rem 1rem;
    cursor: pointer;
    width: 100%;
    color: var(--text-muted);
    font-family: var(--reading-font);
    font-size: 0.8rem;
    transition: all 0.25s ease;
}

.theme-toggle:hover {
    background: rgba(201, 166, 102, 0.05);
    border-color: var(--accent-gold-dim);
    color: var(--text-secondary);
}

.theme-toggle svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Sidebar collapse toggle button */
.toc-collapse-btn {
    position: fixed;
    top: 1.5rem;
    left: var(--toc-width);
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: 50%;
    cursor: pointer;
    z-index: 102;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-gold);
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.toc-collapse-btn:hover {
    background: var(--bg-surface);
    transform: translateX(-50%) scale(1.1);
}

.toc-collapse-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    transition: transform 0.3s ease;
}

/* When sidebar is collapsed */
body.sidebar-collapsed .toc-collapse-btn {
    left: 0;
    transform: translateX(50%);
}

body.sidebar-collapsed .toc-collapse-btn svg {
    transform: rotate(180deg);
}

body.sidebar-collapsed .toc-sidebar {
    transform: translateX(-100%);
}

body.sidebar-collapsed .main-wrapper {
    margin-left: 0;
}

/* Mobile TOC toggle */
.toc-mobile-toggle {
    position: fixed;
    top: 1rem;
    left: 1rem;
    width: 44px;
    height: 44px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: 10px;
    cursor: pointer;
    z-index: 101;
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--accent-gold);
    transition: all 0.25s ease;
}

.toc-mobile-toggle:hover {
    background: var(--bg-surface);
}

.toc-mobile-toggle svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

@media (max-width: 768px) {
    .toc-collapse-btn {
        display: none;
    }
}

/* Font size controls */
.font-controls {
    position: fixed;
    top: 1.5rem;
    right: 2rem;
    display: flex;
    gap: 0;
    z-index: 100;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: 10px;
    padding: 3px;
}

.font-btn {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display-font);
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
}

.font-btn:hover {
    background: var(--bg-surface);
    color: var(--accent-gold);
}

.font-btn.decrease { font-size: 0.75rem; }
.font-btn.increase { font-size: 1.1rem; }

/* Chapter navigation */
.chapter-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3rem 0;
    margin-top: 4rem;
    border-top: 1px solid var(--border-subtle);
}

.chapter-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-secondary);
    transition: all 0.25s ease;
    max-width: 45%;
}

.chapter-nav-link:hover {
    background: var(--bg-elevated);
    border-color: var(--accent-gold-dim);
    color: var(--text-primary);
}

.chapter-nav-link svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    flex-shrink: 0;
}

.chapter-nav-link.prev svg {
    transform: rotate(180deg);
}

.chapter-nav-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.chapter-nav-title {
    font-family: var(--reading-font);
    font-size: 0.95rem;
    font-weight: 500;
}

.chapter-nav-link.disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* Copy link indicator */
h1[id], h2[id], h3[id] {
    cursor: pointer;
    position: relative;
}

h1[id]:hover::after,
h2[id]:hover::after,
h3[id]:hover::after {
    content: '#';
    position: absolute;
    margin-left: 0.5rem;
    color: var(--accent-gold-dim);
    font-weight: normal;
    opacity: 0.5;
}

.copy-toast {
    position: fixed;
    bottom: 6rem;
    right: 2rem;
    background: var(--bg-surface);
    border: 1px solid var(--accent-gold);
    color: var(--text-primary);
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-size: 0.85rem;
    z-index: 200;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.copy-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* Line Numbers */
body.show-line-numbers .manuscript-content {
    position: relative;
}

body.show-line-numbers .manuscript-content p,
body.show-line-numbers .manuscript-content li,
body.show-line-numbers .manuscript-content blockquote,
body.show-line-numbers .manuscript-content pre,
body.show-line-numbers .manuscript-content figcaption,
body.show-line-numbers .manuscript-content h1,
body.show-line-numbers .manuscript-content h2,
body.show-line-numbers .manuscript-content h3,
body.show-line-numbers .manuscript-content h4 {
    position: relative;
}

.ln {
    position: absolute;
    left: -3.8em;
    top: 0;
    width: 3.2em;
    text-align: right;
    font-size: 0.7rem;
    color: var(--text-muted);
    opacity: 0.45;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    pointer-events: none;
    user-select: none;
    line-height: inherit;
}

body:not(.show-line-numbers) .ln {
    display: none;
}

/* Paragraph Numbers */
body.show-para-numbers .manuscript-content p,
body.show-para-numbers .manuscript-content li,
body.show-para-numbers .manuscript-content blockquote,
body.show-para-numbers .manuscript-content pre,
body.show-para-numbers .manuscript-content figcaption,
body.show-para-numbers .manuscript-content h1,
body.show-para-numbers .manuscript-content h2,
body.show-para-numbers .manuscript-content h3,
body.show-para-numbers .manuscript-content h4 {
    position: relative;
}

.pn {
    position: absolute;
    right: -3.5em;
    top: 0;
    width: 3em;
    text-align: left;
    font-size: 0.7rem;
    color: var(--accent-gold-dim);
    opacity: 0.55;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    pointer-events: none;
    user-select: none;
}

body:not(.show-para-numbers) .pn {
    display: none;
}

/* Hide line/para numbers on small screens — not enough margin */
@media (max-width: 768px) {
    .ln, .pn { display: none !important; }
}

/* Focus Mode */
body.focus-mode .toc-sidebar,
body.focus-mode .toc-collapse-btn,
body.focus-mode .fab-container,
body.focus-mode .progress-bar,
body.focus-mode .chapter-nav,
body.focus-mode .key-terms-panel,
body.focus-mode .ln,
body.focus-mode .pn {
    opacity: 0;
    pointer-events: none;
}

body.focus-mode .main-wrapper {
    margin-left: 0;
}

body.focus-mode .content-container {
    max-width: 680px;
}

body.focus-mode .font-controls {
    background: transparent;
    border-color: transparent;
    padding: 0;
}

body.focus-mode .font-controls .font-btn:not(#focusBtn) {
    display: none;
}

body.focus-mode #focusBtn {
    opacity: 0.3;
}

body.focus-mode #focusBtn:hover {
    opacity: 1;
}

/* Exit focus mode hint */
.focus-hint {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    color: var(--text-muted);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 100;
}

body.focus-mode .focus-hint {
    opacity: 1;
}

/* TOC Progress Dots */
.toc-chapter a {
    position: relative;
}

.toc-progress-dot {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border-medium);
    transition: all 0.3s ease;
}

.toc-progress-dot.read {
    background: var(--accent-gold);
}

.toc-progress-dot.reading {
    background: var(--accent-gold);
    box-shadow: 0 0 6px var(--accent-gold);
}

/* Footnote Popovers — styled in FOOTNOTE TOOLTIPS section below */
.footnote-ref {
    cursor: pointer;
    color: var(--accent-gold);
    font-size: 0.75rem;
    vertical-align: super;
    text-decoration: none;
    position: relative;
}

.footnote-ref:hover {
    color: var(--accent-gold-bright);
}

/* Image Lightbox */
figure img {
    cursor: zoom-in;
}

.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    cursor: zoom-out;
}

.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.lightbox-overlay img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 4px;
    box-shadow: 0 10px 50px rgba(0,0,0,0.5);
}

.lightbox-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.lightbox-close:hover {
    background: rgba(255,255,255,0.2);
}

.lightbox-caption {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
    text-align: center;
    max-width: 600px;
}

/* Keyboard shortcut hint */
.shortcut-hint {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 100;
}

.shortcut-hint.show {
    opacity: 1;
}

.shortcut-hint kbd {
    background: var(--bg-elevated);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    margin: 0 0.2rem;
    font-family: inherit;
}

/* Manuscript Info Modal */
.info-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.info-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.info-modal {
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: 16px;
    padding: 2.5rem;
    max-width: 480px;
    width: 90%;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.info-modal-overlay.active .info-modal {
    transform: translateY(0);
}

.info-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.info-modal-close:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
}

.info-modal-logo {
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
}

.info-modal-logo img {
    width: 100%;
    height: 100%;
}

.info-modal-title {
    font-family: var(--display-font);
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    color: var(--text-heading);
    margin-bottom: 0.5rem;
}

.info-modal-subtitle {
    font-family: var(--reading-font);
    font-style: italic;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.info-modal-details {
    text-align: left;
    border-top: 1px solid var(--border-subtle);
    padding-top: 1.5rem;
}

.info-modal-row {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.9rem;
}

.info-modal-row:last-child {
    border-bottom: none;
}

.info-modal-label {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-modal-value {
    color: var(--text-primary);
    font-weight: 500;
}

.info-modal-value a {
    color: var(--accent-gold);
}

.info-modal-copyright {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Loading State */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-deep);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.page-loader.loaded {
    opacity: 0;
    pointer-events: none;
}

.loader-content {
    text-align: center;
}

.loader-logo {
    width: 160px;
    height: 160px;
    margin: 0 auto 1.5rem;
    animation: pulse 1.5s ease-in-out infinite;
}

.loader-logo img {
    width: 100%;
    height: 100%;
}

@keyframes pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1); }
}

.loader-text {
    font-family: var(--display-font);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Resume Reading Banner */
.resume-banner {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--bg-elevated);
    border: 1px solid var(--accent-gold-dim);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    z-index: 150;
    opacity: 0;
    transition: all 0.4s ease;
}

.resume-banner.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.resume-banner-text {
    font-size: 0.9rem;
    color: var(--text-primary);
}

.resume-banner-text span {
    color: var(--text-muted);
    font-size: 0.8rem;
    display: block;
    margin-top: 0.25rem;
}

.resume-banner-btn {
    padding: 0.5rem 1rem;
    background: var(--accent-gold);
    color: var(--bg-deep);
    border: none;
    border-radius: 6px;
    font-family: var(--display-font);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.resume-banner-btn:hover {
    background: var(--accent-gold-bright);
}

.resume-banner-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    font-size: 1.25rem;
    line-height: 1;
    transition: color 0.2s ease;
}

.resume-banner-close:hover {
    color: var(--text-primary);
}

/* Make logo and version clickable */
.toc-logo {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.toc-logo:hover {
    transform: scale(1.05);
}

.title-version {
    cursor: pointer;
    transition: color 0.2s ease;
}

.title-version:hover {
    color: var(--accent-gold);
}

/* Floating action buttons (Print, To Top) */
.fab-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    z-index: 100;
}

.fab-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-medium);
    background: var(--bg-elevated);
    color: var(--accent-gold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.fab-btn:hover {
    background: var(--bg-surface);
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.fab-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Hide to-top button when at top */
.fab-btn.to-top {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
}

.fab-btn.to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.fab-btn.to-top.visible:hover {
    transform: scale(1.1);
}

/* fab-container hidden in main @media print block below */

@media (max-width: 768px) {
    .fab-container {
        bottom: 1.5rem;
        right: 1.5rem;
    }

    .fab-btn {
        width: 40px;
        height: 40px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   MAIN CONTENT AREA
   ───────────────────────────────────────────────────────────────────────────── */
.main-wrapper {
    margin-left: var(--toc-width);
    min-height: 100vh;
    position: relative;
    /* clip, not hidden: hidden computes overflow-y to auto, making this a
       latent scroll container that would grow a second vertical scrollbar
       if a height were ever set on it */
    overflow-x: clip;
}

body.toc-hidden .main-wrapper {
    margin-left: 0;
}

.content-container {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 4rem 2.5rem 6rem;
}

/* Routed edition: the catalogue and chapter pages should reveal their own
   content immediately. The complete single-page reader retains the title page. */
body.reader-catalog .title-page,
body.reader-route .title-page {
    display: none;
}

body.reader-route .chapter-opener {
    margin-top: 1rem;
}

.reader-catalog-intro {
    max-width: 760px;
    margin: 2rem auto 4rem;
    text-align: center;
}

.reader-catalog-intro h1 {
    margin-bottom: 1rem;
}

.reader-catalog-intro p {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.reader-route-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    max-width: 920px;
    margin: 0 auto 5rem;
    padding: 0;
    list-style: none;
}

.reader-route-list li {
    margin: 0;
}

.reader-route-list a {
    display: flex;
    min-height: 100%;
    align-items: center;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    text-decoration: none;
}

.reader-route-list a:hover,
.reader-route-list a:focus-visible {
    border-color: var(--accent-gold-dim);
    color: var(--text-primary);
}

@media (max-width: 680px) {
    .reader-route-list {
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   TITLE PAGE
   ───────────────────────────────────────────────────────────────────────────── */
.title-page {
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 4rem 2rem;
    position: relative;
}

.title-page::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(201, 166, 102, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

.title-label {
    font-family: var(--display-font);
    font-size: 0.7rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--accent-gold);
    margin-bottom: 2rem;
    opacity: 0.8;
}

.title-main {
    font-family: var(--display-font);
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-heading);
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.title-main span {
    display: block;
}

.title-divider {
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
    margin: 2rem auto;
}

.title-subtitle {
    font-family: var(--reading-font);
    font-size: 1.4rem;
    font-style: italic;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    margin-bottom: 3rem;
}

.title-author {
    font-family: var(--display-font);
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.title-collaborator {
    font-family: var(--reading-font);
    font-size: 0.95rem;
    font-style: italic;
    color: var(--text-muted);
    max-width: 400px;
    line-height: 1.6;
}

.title-version {
    margin-top: 4rem;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    opacity: 0.6;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TYPOGRAPHY - HEADINGS
   ───────────────────────────────────────────────────────────────────────────── */

/* Part Headings (H1) */
h1, .part-heading {
    font-family: var(--display-font);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-heading);
    text-align: center;
    padding: 4rem 0 3rem;
    margin: 5rem 0 2rem;
    position: relative;
    line-height: 1.2;
}

h1::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: var(--accent-gold);
}

/* Chapter Separators - visual break between chapters in manuscript content */
.content-container > h1,
.manuscript-content > h1 {
    margin-top: 5rem;
    padding-top: 3rem;
    position: relative;
}
.content-container > h1::before,
.manuscript-content > h1::before {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
    margin: 0 auto 2rem;
}

/* Chapter Headings (H2) */
h2, .chapter-heading {
    font-family: var(--display-font);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-heading);
    margin: 4rem 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-subtle);
    line-height: 1.3;
    text-align: center;
}

/* Section Headings (H3) */
h3, .section-heading {
    font-family: var(--display-font);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--accent-gold);
    margin: 3rem 0 1rem;
    line-height: 1.4;
}

/* Subsection Headings (H4) */
h4 {
    font-family: var(--reading-font);
    font-size: 1.1rem;
    font-weight: 600;
    font-style: italic;
    color: var(--text-primary);
    margin: 2rem 0 0.75rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TYPOGRAPHY - BODY
   ───────────────────────────────────────────────────────────────────────────── */
p {
    margin-bottom: 1.5rem;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* First paragraph after heading - no indent, drop cap option */
h1 + p, h2 + p, h3 + p,
.chapter-heading + p {
    text-indent: 0;
}

/* Opening paragraph styling */
.opening-para {
    font-size: 1.2rem;
    line-height: 1.9;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.opening-para::first-letter {
    font-family: var(--display-font);
    font-size: 4rem;
    float: left;
    line-height: 0.8;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    color: var(--accent-gold);
}

/* Links */
a {
    color: var(--accent-gold);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

a:hover {
    color: var(--accent-gold-bright);
    border-bottom-color: var(--accent-gold-dim);
}

/* Pandoc marks visibly printed URLs as .uri. Long source URLs must wrap inside
   the reading column rather than forcing the page wider than the viewport. */
.manuscript-content a.uri {
    overflow-wrap: anywhere;
    word-break: break-word;
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: 0.14em;
}

/* Strong & Emphasis */
strong, b {
    font-weight: 600;
    color: var(--text-heading);
}

em, i {
    font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BLOCKQUOTES — Large Opening Mark Style
   ───────────────────────────────────────────────────────────────────────────── */
blockquote {
    margin: 2.5rem 0;
    padding: 2rem 2rem 1.5rem 2rem;
    background: transparent;
    border: none;
    position: relative;
    font-style: italic;
    color: var(--text-secondary);
    text-align: center;
}

blockquote::before {
    content: '\201C';
    font-family: var(--display-font);
    font-size: 4rem;
    line-height: 1;
    color: var(--accent-gold);
    opacity: 0.3;
    position: absolute;
    top: 0.5rem;
    left: 0;
}

blockquote p {
    text-align: center;
    margin-bottom: 0.75rem;
}

blockquote p:last-child {
    margin-bottom: 0;
}

blockquote cite,
blockquote footer {
    display: block;
    margin-top: 1rem;
    font-size: 0.85rem;
    font-style: normal;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    text-align: center;
}

blockquote cite::before {
    content: '— ';
}

/* Pull quotes — centred with large quotation mark */
.pull-quote {
    margin: 3.5rem 0;
    padding: 2.5rem 2rem 2rem;
    text-align: center;
    position: relative;
    border: none;
    background: transparent;
}

.pull-quote::before {
    content: '\201C';
    font-family: var(--display-font);
    font-size: 6rem;
    line-height: 1;
    color: var(--accent-gold);
    opacity: 0.25;
    position: absolute;
    top: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
}

.pull-quote p {
    font-size: 1.35rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--accent-gold-bright);
    text-align: center;
    position: relative;
    z-index: 1;
}

.pull-quote cite {
    display: block;
    margin-top: 1.25rem;
    font-size: 0.85rem;
    font-style: normal;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LISTS
   ───────────────────────────────────────────────────────────────────────────── */
ul, ol {
    margin: 1.5rem 0 1.5rem 1.5rem;
    padding-left: 1rem;
}

li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
}

li::marker {
    color: var(--accent-gold-dim);
}

/* Definition lists */
dl {
    margin: 2rem 0;
}

dt {
    font-weight: 600;
    color: var(--accent-gold);
    margin-top: 1.5rem;
}

dd {
    margin-left: 1.5rem;
    margin-top: 0.25rem;
    color: var(--text-secondary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   CODE & TECHNICAL
   ───────────────────────────────────────────────────────────────────────────── */
code {
    font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
    font-size: 0.85rem;
    padding: 0.2em 0.4em;
    background: var(--bg-surface);
    border-radius: 4px;
    color: var(--accent-gold);
}

pre {
    margin: 2rem 0;
    padding: 1.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    overflow-x: auto;
}

pre code {
    padding: 0;
    background: none;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COLLAPSIBLE DETAILS/SUMMARY (Code Companion)
   ───────────────────────────────────────────────────────────────────────────── */
details {
    margin: 1.5rem 0;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    overflow: hidden;
}

details[open] {
    border-color: var(--accent-gold-dim);
}

summary {
    padding: 1rem 1.5rem;
    background: var(--bg-surface);
    cursor: pointer;
    font-family: var(--display-font);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--accent-gold);
    letter-spacing: 0.03em;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: background 0.2s ease;
}

summary::-webkit-details-marker {
    display: none;
}

summary::before {
    content: '▸';
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 0.85rem;
    color: var(--accent-gold-dim);
}

details[open] > summary::before {
    transform: rotate(90deg);
}

summary:hover {
    background: var(--bg-elevated);
}

details > :not(summary) {
    padding: 0 1.5rem;
}

details > p:last-child,
details > table:last-child,
details > pre:last-child {
    margin-bottom: 1.5rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   KEY TERMS PANEL (per-chapter glossary preview)
   ───────────────────────────────────────────────────────────────────────────── */
.key-terms-panel {
    margin: 1.5rem 0 2rem;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    padding: 0;
    font-size: 0.85rem;
}
.key-terms-panel > summary {
    padding: 0.6rem 1rem;
    cursor: pointer;
    color: var(--accent-gold);
    font-family: var(--display-font);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: transparent;
}
.key-terms-panel .term-count {
    color: var(--text-muted);
}
.key-terms-list {
    padding: 0 1rem 0.8rem;
    columns: 2;
    column-gap: 2rem;
    margin: 0;
}
.key-terms-list dt {
    color: var(--accent-gold-bright);
    font-weight: 600;
    margin-top: 0.4rem;
}
.key-terms-list dt a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--accent-gold-dim);
}
.key-terms-list dt a:hover {
    color: var(--accent-gold);
    border-bottom-style: solid;
}
.key-terms-list dd {
    margin: 0 0 0.2rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    break-inside: avoid;
}
@media (max-width: 600px) {
    .key-terms-list { columns: 1; }
}

.code-companion-intro {
    font-style: italic;
    color: var(--text-secondary);
    margin: 0.5rem 0 1rem;
    font-size: 0.92rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TABLES — Elegant Redesign
   ───────────────────────────────────────────────────────────────────────────── */
table {
    width: 100%;
    margin: 2rem 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.95rem;
    border: 1px solid var(--border-medium);
    border-radius: 10px;
    overflow: hidden;
    display: table;
}

/* Scrollable wrapper added by JS for wide tables */
.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 2rem 0;
    border-radius: 10px;
}

.table-scroll-wrapper table {
    margin: 0;
}

th, td {
    padding: 0.85rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
}

th {
    font-family: var(--display-font);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-gold);
    background: rgba(201, 166, 102, 0.06);
    border-bottom: 1px solid var(--border-medium);
}

td {
    color: var(--text-secondary);
}

tr:last-child td {
    border-bottom: none;
}

tr:hover td {
    background: rgba(201, 166, 102, 0.02);
}

/* ─────────────────────────────────────────────────────────────────────────────
   FIGURES & IMAGES
   ───────────────────────────────────────────────────────────────────────────── */
figure {
    margin: 2rem 0;
    text-align: center;
}

figure img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

figcaption {
    font-family: var(--reading-font);
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 1rem;
    font-style: italic;
    text-align: center;
}

.diagram-iframe-wrapper {
    position: relative;
    width: calc(100% + 200px);
    /* Constrain to space actually available to the content column — 100vw
       includes the sidebar, so a vw-based cap overflows at mid widths */
    max-width: min(960px, calc(100% + 200px));
    margin-left: -100px;
    margin-right: -100px;
    height: 480px;
    border-radius: 8px;
    border: 1px solid rgba(184, 134, 11, 0.15);
    background: var(--bg-deep, #07080c);
}

.diagram-iframe-wrapper::before {
    content: 'Loading diagram\2026';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(184, 134, 11, 0.4);
    font-size: 0.9rem;
    font-style: italic;
    letter-spacing: 0.05em;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.4s ease;
}

.diagram-iframe-wrapper.loaded::before {
    opacity: 0;
}

.diagram-iframe {
    position: relative;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
    background: transparent;
    z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SPECIAL ELEMENTS
   ───────────────────────────────────────────────────────────────────────────── */

/* Horizontal rules / Section breaks — Star with Lines */
hr {
    border: none;
    height: auto;
    background: none;
    margin: 4rem auto;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    overflow: visible;
    color: var(--accent-gold-dim);
}

hr::before,
hr::after {
    content: '';
    flex: 1;
    max-width: 100px;
    height: 1px;
}

hr::before {
    background: linear-gradient(90deg, transparent, var(--accent-gold-dim));
}

hr::after {
    background: linear-gradient(90deg, var(--accent-gold-dim), transparent);
}

/* Decorative section break */
.section-break {
    text-align: center;
    margin: 4rem 0;
    color: var(--accent-gold-dim);
    font-size: 1.5rem;
    letter-spacing: 1em;
}

.section-break::before {
    content: '· · ·';
}

/* Footnotes */
.footnote {
    font-size: 0.85rem;
    color: var(--text-muted);
    vertical-align: super;
    line-height: 0;
}

.footnotes {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.footnote-back {
    border-bottom: 1px solid currentColor;
    font-weight: 700;
}

/* Epigraph */
.epigraph {
    margin: 3rem auto 4rem;
    max-width: 85%;
    text-align: center;
    font-style: italic;
    color: var(--text-secondary);
}

.epigraph cite {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    font-style: normal;
    color: var(--text-muted);
}

/* Key concept highlight */
.concept {
    display: inline-block;
    padding: 0.1em 0.4em;
    background: rgba(201, 166, 102, 0.1);
    border-radius: 4px;
    font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DROP CAPS — Glowing Ornamental
   Auto-applied to first paragraph after chapter headings
   ───────────────────────────────────────────────────────────────────────────── */
.drop-cap-auto::first-letter {
    font-family: var(--display-font);
    font-size: 5.5rem;
    float: left;
    line-height: 0.75;
    padding-right: 0.6rem;
    padding-top: 0.1rem;
    margin-top: 0.1rem;
    color: var(--accent-gold);
    text-shadow:
        0 0 40px rgba(201, 166, 102, 0.15),
        0 0 80px rgba(201, 166, 102, 0.05);
}

/* ─────────────────────────────────────────────────────────────────────────────
   DECORATIVE SECTION DIVIDERS — Ornament with Lines
   Replaces plain <hr> elements between major sections
   ───────────────────────────────────────────────────────────────────────────── */
.divider-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4rem 0;
    gap: 1.5rem;
    opacity: 0.6;
}

.divider-ornament::before,
.divider-ornament::after {
    content: '';
    flex: 1;
    height: 1px;
}

.divider-ornament::before {
    background: linear-gradient(90deg, transparent, var(--accent-gold-dim));
}

.divider-ornament::after {
    background: linear-gradient(90deg, var(--accent-gold-dim), transparent);
}

.divider-ornament svg {
    width: 24px;
    height: 24px;
    color: var(--accent-gold-dim);
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CHAPTER OPENING PAGES
   Full-viewport chapter introductions with number, title, epigraph
   ───────────────────────────────────────────────────────────────────────────── */
.chapter-opener {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 4rem 2rem;
    position: relative;
    margin: 6rem 0 3rem;
}

.chapter-opener::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(201, 166, 102, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

.chapter-number {
    font-family: var(--display-font);
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--accent-gold-dim);
    margin-bottom: 2rem;
}

.chapter-opener h1 {
    margin: 0;
    padding: 0 0 2rem;
}

.chapter-epigraph {
    max-width: 450px;
    font-style: italic;
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
}

.chapter-epigraph cite {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    font-style: normal;
    color: var(--text-muted);
}

/* Reading time & chapter metadata */
.chapter-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

.chapter-meta-dot {
    width: 3px;
    height: 3px;
    background: var(--accent-gold-dim);
    border-radius: 50%;
}

.chapter-meta svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    vertical-align: -2px;
    margin-right: 0.35rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MARGIN NOTES / SIDENOTES — Tufte-style
   ───────────────────────────────────────────────────────────────────────────── */
.sidenote-ref {
    font-size: 0.75rem;
    vertical-align: super;
    color: var(--accent-gold);
    cursor: pointer;
    font-weight: 600;
}

.sidenote-inline {
    display: block;
    margin: 1rem 0 1rem 2rem;
    padding: 1rem 1.25rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-muted);
    border-left: 2px solid var(--accent-gold-dim);
    background: rgba(201, 166, 102, 0.03);
    border-radius: 0 6px 6px 0;
    font-style: italic;
}

.sidenote-number {
    color: var(--accent-gold-dim);
    font-size: 0.75rem;
    vertical-align: super;
    margin-right: 0.25rem;
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CONCEPT CARDS / KEY IDEA CALLOUTS
   ───────────────────────────────────────────────────────────────────────────── */
.concept-card {
    margin: 2.5rem 0;
    padding: 2rem 2rem 2rem 2.5rem;
    background: rgba(201, 166, 102, 0.03);
    border: 1px solid var(--border-medium);
    border-left: 3px solid var(--accent-gold);
    border-radius: 0 10px 10px 0;
    position: relative;
}

.concept-card-label {
    font-family: var(--display-font);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-gold);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.concept-card-label svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.concept-card p {
    margin-bottom: 0;
    color: var(--text-primary);
}

.concept-card p:not(:last-child) {
    margin-bottom: 0.75rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PART TRANSITION PAGES
   Grand visual breaks between major manuscript parts
   ───────────────────────────────────────────────────────────────────────────── */
.part-transition {
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 8rem 0;
    padding: 4rem 2rem;
    position: relative;
}

.part-transition::before,
.part-transition::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 60px;
}

.part-transition::before {
    top: 0;
    background: linear-gradient(to bottom, transparent, var(--accent-gold-dim));
}

.part-transition::after {
    bottom: 0;
    background: linear-gradient(to top, transparent, var(--accent-gold-dim));
}

.part-number {
    font-family: var(--display-font);
    font-size: 0.6rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--accent-gold-dim);
    margin-bottom: 1rem;
}

.part-transition h1 {
    margin: 0;
    padding: 0;
}

.part-transition h1::before {
    display: none;
}

.part-subtitle {
    margin-top: 1.5rem;
    font-style: italic;
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 400px;
}

.part-transition .part-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(201, 166, 102, 0.04) 0%, transparent 60%);
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FOOTNOTE TOOLTIPS — Enhanced
   Sleek hover tooltips with source attribution
   ───────────────────────────────────────────────────────────────────────────── */
.footnote-popover {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    width: 300px;
    padding: 1.25rem 1.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: 10px;
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(201, 166, 102, 0.05);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-primary);
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    z-index: 200;
    pointer-events: none;
    font-style: normal;
    text-align: left;
}

.footnote-popover::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--bg-elevated);
}

.footnote-ref:hover .footnote-popover,
.footnote-ref.active .footnote-popover {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FOOTNOTE NAVIGATION — Bidirectional links
   Superscript footnote numbers link to definitions; definitions link back
   ───────────────────────────────────────────────────────────────────────────── */
.fn-nav-ref {
    color: var(--accent-gold);
    text-decoration: none;
    cursor: pointer;
    border-bottom: none;
    transition: color 0.2s ease;
}

.fn-nav-ref:hover {
    color: var(--accent-gold-bright);
}

.fn-nav-backlink {
    display: inline-block;
    margin-left: 0.4em;
    color: var(--accent-gold-dim);
    text-decoration: none;
    font-size: 0.8em;
    vertical-align: baseline;
    cursor: pointer;
    border-bottom: none;
    transition: color 0.2s ease;
}

.fn-nav-backlink:hover {
    color: var(--accent-gold-bright);
}

@keyframes fn-flash {
    0%   { background-color: rgba(201, 166, 102, 0.25); }
    100% { background-color: transparent; }
}

.fn-flash {
    animation: fn-flash 1.5s ease-out;
    border-radius: 4px;
}

/* Chapter progress track — vertical indicator */
.chapter-progress-track {
    position: fixed;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 120px;
    background: var(--border-subtle);
    border-radius: 2px;
    z-index: 50;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

.chapter-progress-fill {
    width: 100%;
    background: var(--accent-gold);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(201, 166, 102, 0.3);
}

body.focus-mode .chapter-progress-track {
    opacity: 0;
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   READING PROGRESS
   ───────────────────────────────────────────────────────────────────────────── */
.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-gold-dim), var(--accent-gold));
    z-index: 200;
}

/* ─────────────────────────────────────────────────────────────────────────────
   GLOSSARY TOOLTIPS
   Auto-linked from glossary chapter content
   ───────────────────────────────────────────────────────────────────────────── */
.glossary-term {
    border-bottom: 1px dotted var(--accent-gold-dim);
    cursor: pointer;
    position: relative;
    display: inline;
}

.glossary-term:hover {
    color: var(--accent-gold);
    border-bottom-color: var(--accent-gold);
}

.glossary-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    width: min(480px, calc(100vw - 2rem));
    max-height: 80vh;
    overflow-y: hidden;
    padding: 1.25rem 1.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(201, 166, 102, 0.06);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-primary);
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    z-index: 160;
    pointer-events: none;
    text-align: left;
    font-style: normal;
    hyphens: none;
}

.glossary-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--bg-elevated);
}

.glossary-term:hover .glossary-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.glossary-tooltip-title {
    font-family: var(--display-font);
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent-gold);
    margin-bottom: 0.5rem;
}

.glossary-tooltip-body {
    color: var(--text-secondary);
}

.glossary-tooltip-ref {
    display: block;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
   BIBLIOGRAPHY HOVER PREVIEWS
   ───────────────────────────────────────────────────────────────────────────── */
.cite-ref {
    color: var(--accent-gold);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
}

.cite-ref:hover {
    color: var(--accent-gold-bright);
}

.cite-preview {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    width: 360px;
    padding: 1.25rem 1.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(201, 166, 102, 0.06);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-primary);
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    z-index: 160;
    pointer-events: none;
    text-align: left;
    font-style: normal;
    hyphens: none;
    white-space: normal;
}

.cite-preview::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--bg-elevated);
}

.cite-ref:hover .cite-preview {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.cite-preview-authors {
    display: block;
    color: var(--text-heading);
    font-weight: 500;
}

.cite-preview-title {
    display: block;
    font-style: italic;
    color: var(--text-primary);
    margin: 0.35rem 0;
}

.cite-preview-journal {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
   FULL-TEXT SEARCH OVERLAY
   ───────────────────────────────────────────────────────────────────────────── */
.search-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 500;
    background: rgba(7, 8, 12, 0.92);
}

html:not(.dark) .search-overlay {
    background: rgba(252, 250, 245, 0.95);
}

.search-overlay {
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 12vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* Explicit rules after all inherited transition declarations ensure dialog
   controls become focusable in the same frame that the surface opens. */
.search-overlay.active,
.info-modal-overlay.active,
.lightbox-overlay.active {
    visibility: visible !important;
    transition-property: opacity !important;
    transition-delay: 0s !important;
}

.search-container {
    width: 100%;
    max-width: 600px;
    padding: 0 2rem;
}

.search-input-wrapper {
    position: relative;
    margin-bottom: 1.5rem;
}

.search-input {
    width: 100%;
    padding: 1.25rem 1.5rem 1.25rem 3.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: 14px;
    color: var(--text-primary);
    font-family: var(--reading-font);
    font-size: 1.15rem;
    outline: none;
    transition: all 0.3s ease;
}

.search-input:focus {
    border-color: var(--accent-gold-dim);
    box-shadow: 0 0 0 3px rgba(201, 166, 102, 0.08);
}

.search-input::placeholder {
    color: var(--text-muted);
    font-style: italic;
}

.search-icon {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.search-close {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.2s ease;
}

.search-close:hover { color: var(--text-primary); }

.search-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    display: flex;
    gap: 1rem;
}

.search-hint kbd {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    font-family: var(--reading-font);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.search-results {
    max-height: 50vh;
    overflow-y: auto;
}

.search-results::-webkit-scrollbar { width: 4px; }
.search-results::-webkit-scrollbar-track { background: transparent; }
.search-results::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 2px; }

.search-result {
    display: block;
    padding: 1.25rem 1.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    transition: all 0.2s ease;
}

.search-result:hover {
    background: var(--bg-elevated);
    border-color: var(--accent-gold-dim);
}

.search-result:focus-visible {
    outline: 2px solid var(--accent-gold-bright);
    outline-offset: 2px;
}

.search-result-chapter {
    font-family: var(--display-font);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent-gold-dim);
    margin-bottom: 0.4rem;
}

.search-result-text {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.search-result-text mark {
    background: rgba(201, 166, 102, 0.2);
    color: var(--accent-gold-bright);
    padding: 0.1em 0.2em;
    border-radius: 3px;
}

.search-result-count {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.search-no-results {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BOOKMARK / HIGHLIGHT SYSTEM
   ───────────────────────────────────────────────────────────────────────────── */
.bookmark-icon {
    position: absolute;
    left: -2.5rem;
    top: 0.15rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
    color: var(--border-medium);
    opacity: 0;
    transition: all 0.2s ease;
    background: none;
    border: none;
    padding: 0;
}

.bookmarkable {
    position: relative;
}

.bookmarkable:hover .bookmark-icon {
    opacity: 1;
}

.bookmark-icon:hover {
    color: var(--accent-gold) !important;
    transform: scale(1.15);
}

.bookmark-icon.active {
    opacity: 1;
    color: var(--accent-gold);
}

.bookmark-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.text-highlight {
    background: rgba(201, 166, 102, 0.12);
    border-bottom: 2px solid var(--accent-gold-dim);
    padding: 0.05em 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SMALL CAPS FOR ACRONYMS
   ───────────────────────────────────────────────────────────────────────────── */
.smallcaps {
    font-variant: small-caps;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.05em;
    font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HANGING PUNCTUATION
   Applied to blockquotes for cleaner optical alignment
   ───────────────────────────────────────────────────────────────────────────── */
.hanging-punct {
    hanging-punctuation: first allow-end last;
}

/* ─────────────────────────────────────────────────────────────────────────────
   VERSE / POETRY FORMATTING — Left-aligned with border
   ───────────────────────────────────────────────────────────────────────────── */
.verse {
    margin: 3rem 0 3rem 3rem;
    text-align: left;
    font-style: italic;
    color: var(--text-secondary);
    line-height: 2.2;
    font-size: 1.1rem;
    border-left: 1px solid var(--border-subtle);
    padding-left: 2rem;
}

.verse p {
    text-align: left;
    margin-bottom: 0.5rem;
    hyphens: none;
}

.verse .stanza {
    margin-bottom: 1.5rem;
}

.verse .stanza:last-child {
    margin-bottom: 0;
}

.verse-attribution {
    display: block;
    margin-top: 1rem;
    font-size: 0.85rem;
    font-style: normal;
    color: var(--text-muted);
    letter-spacing: 0.03em;
}

.verse-attribution::before {
    content: '— ';
}

/* ─────────────────────────────────────────────────────────────────────────────
   PAPER GRAIN TEXTURE
   Canvas-generated noise applied as page overlay
   ───────────────────────────────────────────────────────────────────────────── */
.grain-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: overlay;
    background-repeat: repeat;
    opacity: 0.04;
}

html:not(.dark) .grain-overlay {
    opacity: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   NEBULA ACCENT GLOW
   For title page and part transitions
   ───────────────────────────────────────────────────────────────────────────── */
.nebula-bg {
    position: absolute;
    top: -30%; left: -20%; right: -20%; bottom: -30%;
    pointer-events: none;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 70%);
}

.nebula-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    animation: nebula-drift 20s ease-in-out infinite;
}

.nebula-orb-1 {
    width: 350px;
    height: 350px;
    background: rgba(201, 166, 102, 0.18);
    top: 5%;
    left: 10%;
}

.nebula-orb-2 {
    width: 300px;
    height: 300px;
    background: rgba(74, 111, 165, 0.15);
    top: 30%;
    right: 5%;
    animation-delay: -7s;
    animation-duration: 25s;
}

.nebula-orb-3 {
    width: 250px;
    height: 250px;
    background: rgba(201, 166, 102, 0.12);
    bottom: 5%;
    left: 30%;
    animation-delay: -14s;
    animation-duration: 22s;
}

@keyframes nebula-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -20px) scale(1.1); }
    50% { transform: translate(-20px, 15px) scale(0.95); }
    75% { transform: translate(15px, 25px) scale(1.05); }
}

html:not(.dark) .nebula-bg {
    display: none;
}

/* ─── READING TIME METADATA ─── */
.chapter-heading-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 0.75rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}
.chapter-heading-meta svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    vertical-align: -2px;
    margin-right: 0.3rem;
    opacity: 0.6;
}
.chapter-heading-meta .meta-separator {
    width: 3px;
    height: 3px;
    background: var(--accent-gold-dim);
    border-radius: 50%;
}

/* ─── BOOKMARK SIDEBAR PANEL ─── */
.bookmark-sidebar-panel {
    position: fixed;
    top: 0;
    right: -360px;
    width: 340px;
    height: 100%;
    background: var(--bg-elevated);
    border-left: 1px solid var(--border-medium);
    z-index: 180;
    /* visibility keeps the off-screen panel out of the tab order */
    visibility: hidden;
    transition: right 0.3s ease, visibility 0s 0.3s;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.3);
}
.bookmark-sidebar-panel.open {
    right: 0;
    visibility: visible;
    transition-delay: 0s;
}
.bookmark-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.bookmark-sidebar-title {
    font-family: var(--display-font);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-gold);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.bookmark-sidebar-title svg {
    width: 16px;
    height: 16px;
    fill: var(--accent-gold);
}
.bookmark-sidebar-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0.3rem;
    transition: color 0.2s ease;
}
.bookmark-sidebar-close:hover { color: var(--text-primary); }
.bookmark-sidebar-count {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.bookmark-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}
.bookmark-sidebar-body::-webkit-scrollbar { width: 4px; }
.bookmark-sidebar-body::-webkit-scrollbar-track { background: transparent; }
.bookmark-sidebar-body::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 2px; }
.bm-panel-entry {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 0.25rem;
    position: relative;
}
.bm-panel-entry:hover {
    background: rgba(201, 166, 102, 0.04);
}
.bm-panel-entry-chapter {
    font-family: var(--display-font);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent-gold-dim);
    margin-bottom: 0.4rem;
}
.bm-panel-entry-text {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bm-panel-entry-date {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
}
.bm-panel-entry-remove {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    opacity: 0;
    transition: all 0.2s ease;
    border-radius: 4px;
}
.bm-panel-entry:hover .bm-panel-entry-remove { opacity: 1; }
.bm-panel-entry-remove:hover { color: #c66; background: rgba(200, 100, 100, 0.1); }
.bookmark-sidebar-empty {
    padding: 3rem 2rem;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.9rem;
}
#bmPanelBtn {
    position: relative;
}
.bm-trigger-badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 6px;
    height: 6px;
    line-height: 1;
    background: var(--accent-gold);
    border-radius: 50%;
    padding: 0;
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0;
    overflow: hidden;
}

/* ─── GLOSSARY ECHO (subsequent occurrences) ─── */
.glossary-echo {
    border-bottom: 1px dotted rgba(201, 166, 102, 0.25);
    cursor: pointer;
    position: relative;
    display: inline;
}
.glossary-echo:hover {
    border-bottom-color: rgba(201, 166, 102, 0.5);
    color: var(--text-primary);
}
.glossary-echo .glossary-tooltip {
    /* Same tooltip but slightly more transparent */
    opacity: 0;
    visibility: hidden;
}
.glossary-echo:hover .glossary-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* ─── CROSS-REFERENCE TOOLTIPS ─── */
.xref-link {
    color: var(--accent-gold);
    cursor: pointer;
    position: relative;
    text-decoration: none;
    border-bottom: 1px dotted var(--accent-gold-dim);
}
.xref-link:hover {
    color: var(--accent-gold-bright);
    border-bottom-color: var(--accent-gold-bright);
}
.xref-tooltip {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    width: 320px;
    padding: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(201, 166, 102, 0.06);
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    z-index: 160;
    pointer-events: none;
    text-align: left;
    font-style: normal;
    white-space: normal;
    overflow: hidden;
}
.xref-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--bg-elevated);
}
.xref-link:hover .xref-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.xref-tooltip-header {
    padding: 0.9rem 1.25rem 0.7rem;
    border-bottom: 1px solid var(--border-subtle);
}
.xref-tooltip-label {
    font-family: var(--display-font);
    font-size: 0.55rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--accent-gold-dim);
    margin-bottom: 0.35rem;
}
.xref-tooltip-title {
    font-family: var(--display-font);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: var(--text-heading);
    line-height: 1.3;
}
.xref-tooltip-excerpt {
    padding: 0.9rem 1.25rem;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* ─── KEYBOARD NAVIGATION ─── */
.keynav-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 0.5rem 1.1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}
.keynav-toast.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.keynav-toast kbd {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    font-family: var(--reading-font);
    font-size: 0.7rem;
    color: var(--accent-gold);
    min-width: 20px;
    text-align: center;
}
.keynav-highlight {
    transition: all 0.3s ease;
    border-left: 2px solid var(--accent-gold-dim);
    padding-left: 1rem;
    background: rgba(201, 166, 102, 0.03);
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE DESIGN
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    :root {
        --toc-width: 240px;
    }

    .content-container {
        padding: 3rem 2rem 5rem;
    }
}

@media (max-width: 768px) {
    :root {
        --toc-width: 280px;
    }

    html {
        font-size: 16px;
    }

    .toc-sidebar {
        transform: translateX(-100%);
    }

    .toc-sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 30px rgba(0, 0, 0, 0.5);
    }

    .toc-mobile-toggle {
        display: flex;
    }

    .main-wrapper {
        margin-left: 0;
    }

    .content-container {
        padding: 4rem 1.5rem 4rem;
    }

    h1 {
        font-size: 1.75rem;
        padding: 2.5rem 0 2rem;
        margin: 3rem 0 1.5rem;
    }

    h2 {
        font-size: 1.35rem;
    }

    .title-main {
        font-size: 2.25rem;
    }

    blockquote {
        margin: 2rem 0;
        padding: 1.5rem 1.5rem 1.25rem 2.5rem;
    }

    blockquote::before {
        font-size: 3rem;
    }

    .pull-quote {
        margin: 2rem 0;
        padding: 2rem 1rem 1.5rem;
    }

    .pull-quote::before {
        font-size: 4rem;
    }

    .pull-quote p {
        font-size: 1.15rem;
    }

    .drop-cap-auto::first-letter {
        font-size: 4rem;
    }

    .chapter-opener {
        min-height: 40vh;
        margin: 3rem 0 2rem;
    }

    .part-transition {
        min-height: 30vh;
        margin: 4rem 0;
    }

    .chapter-progress-track {
        display: none;
    }

    .diagram-iframe-wrapper {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .glossary-tooltip,
    .cite-preview,
    .footnote-popover {
        width: min(260px, calc(100vw - 2rem));
        left: 0;
        transform: translateX(0) translateY(5px);
    }

    .glossary-term:hover .glossary-tooltip,
    .cite-ref:hover .cite-preview {
        transform: translateX(0) translateY(0);
    }

    .glossary-tooltip::after,
    .cite-preview::after {
        left: 2rem;
    }

    .verse {
        margin-left: 1rem;
        padding-left: 1.25rem;
    }

    .search-overlay {
        padding-top: 5vh;
    }

    .bookmark-icon {
        left: -1.75rem;
    }

    .font-controls {
        top: max(1rem, env(safe-area-inset-top, 0px));
        right: max(1rem, env(safe-area-inset-right, 0px));
    }

    /* focus button is now inside .font-controls group */

    .bookmark-sidebar-panel {
        width: 100%;
        right: -100%;
    }
    .xref-tooltip {
        width: 260px;
        left: 0;
        transform: translateX(0) translateY(5px);
    }
    .xref-link:hover .xref-tooltip {
        transform: translateX(0) translateY(0);
    }
    .xref-tooltip::after {
        left: 2rem;
    }
    .keynav-toast {
        bottom: 1rem;
        font-size: 0.7rem;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRINT STYLES
   ───────────────────────────────────────────────────────────────────────────── */
@media print {
    /* --- Hide all interactive / decorative UI --- */
    .toc-sidebar,
    .toc-mobile-toggle,
    .theme-toggle,
    .progress-bar,
    .constellation-container,
    .font-controls,
    .fab-container,
    .chapter-nav,
    .info-modal-overlay,
    .keyboard-shortcuts,
    .search-overlay,
    .key-terms-panel,
    .ln,
    .pn,
    .chapter-heading-meta {
        display: none !important;
    }

    /* --- Reset layout for print --- */
    .main-wrapper {
        margin-left: 0 !important;
        min-height: auto !important;
    }

    .content-container {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .manuscript-content {
        max-width: 100% !important;
    }

    /* --- Base typography --- */
    html,
    body,
    .main-wrapper,
    .content-container,
    .manuscript-content {
        background: white !important;
    }

    body {
        color: black !important;
        font-size: 11pt;
        line-height: 1.5;
    }

    /* Descendant screen colours otherwise override the inherited black body
       colour in print, leaving bibliography and note text pale on white. */
    .manuscript-content,
    .manuscript-content p,
    .manuscript-content li,
    .manuscript-content dt,
    .manuscript-content dd,
    .manuscript-content figcaption,
    .manuscript-content td,
    .manuscript-content th,
    .manuscript-content sup,
    .footnotes {
        color: #111 !important;
    }

    /* --- Title page: one page, no viewport units --- */
    .title-page {
        min-height: auto !important;
        height: auto !important;
        page-break-after: always;
        padding: 4cm 0 2cm;
    }

    .title-page::before {
        display: none !important;
    }

    .title-main {
        font-size: 28pt !important;
    }

    .title-subtitle {
        color: #333 !important;
    }

    .title-author {
        color: #333 !important;
    }

    .title-version {
        color: #666 !important;
        opacity: 1 !important;
    }

    .title-label {
        color: #333 !important;
        opacity: 1 !important;
    }

    .title-divider {
        background: #999 !important;
    }

    /* --- Headings: black, no vw units, proper page breaks --- */
    h1, h2, h3, h4 {
        color: black !important;
        page-break-after: avoid;
    }

    /* Part headings start new pages */
    .content-container > h1,
    .manuscript-content > h1 {
        page-break-before: always;
        margin-top: 2rem !important;
        padding-top: 2rem !important;
    }

    h1, .part-heading {
        font-size: 20pt !important;
    }

    h1::before,
    .content-container > h1::before,
    .manuscript-content > h1::before {
        background: #999 !important;
    }

    h2, .chapter-heading {
        font-size: 16pt !important;
        border-bottom-color: #ccc !important;
    }

    h3, .section-heading {
        color: #333 !important;
    }

    /* --- Body text --- */
    p {
        orphans: 3;
        widows: 3;
    }

    /* --- Block elements: avoid splitting --- */
    blockquote {
        border-left-color: #666 !important;
        background: #f5f5f5 !important;
        color: black !important;
        page-break-inside: avoid;
    }

    figure {
        page-break-inside: avoid;
    }

    table {
        page-break-inside: avoid;
    }

    pre, code {
        page-break-inside: avoid;
        background: #f5f5f5 !important;
        color: black !important;
        border-color: #ccc !important;
    }

    /* --- Links: show URL for print --- */
    a {
        color: black !important;
        text-decoration: underline;
    }

    /* Don't show URL for internal/TOC links */
    a[href^="#"]::after {
        content: none;
    }

    /* --- Remove decorative pseudo-elements --- */
    *::before, *::after {
        background-image: none !important;
        box-shadow: none !important;
    }

    /* Restore heading underlines we still want */
    h1::before,
    .content-container > h1::before,
    .manuscript-content > h1::before {
        background: #999 !important;
        display: block !important;
    }

    /* --- Kill animations and transitions --- */
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }

    /* --- Footnotes --- */
    .footnotes {
        page-break-before: avoid;
        font-size: 9pt;
    }

    /* --- Pull quotes --- */
    .pull-quote {
        color: #333 !important;
        border-color: #999 !important;
    }

    /* --- New enhancements --- */
    .chapter-opener {
        min-height: auto !important;
        page-break-before: always;
        padding: 3cm 0 1cm;
    }

    .chapter-opener::before,
    .part-transition .part-glow {
        display: none !important;
    }

    .part-transition {
        min-height: auto !important;
        page-break-before: always;
        padding: 4cm 0 1cm;
    }

    .part-transition::before,
    .part-transition::after {
        display: none !important;
    }

    .chapter-progress-track {
        display: none !important;
    }

    .drop-cap-auto::first-letter {
        color: #333 !important;
        text-shadow: none !important;
    }

    .concept-card {
        border-color: #ccc !important;
        border-left-color: #666 !important;
        background: #f9f9f9 !important;
        page-break-inside: avoid;
    }

    .concept-card-label {
        color: #333 !important;
    }

    blockquote::before {
        color: #999 !important;
        opacity: 0.5 !important;
    }

    .glossary-term {
        border-bottom: none !important;
    }

    .glossary-tooltip,
    .cite-preview,
    .search-overlay,
    .grain-overlay,
    .nebula-bg,
    .bookmark-icon {
        display: none !important;
    }

    .smallcaps {
        font-variant: small-caps !important;
        letter-spacing: 0.03em !important;
    }

    .verse {
        border-left-color: #ccc !important;
        color: #333 !important;
        page-break-inside: avoid;
    }

    /* --- Images --- */
    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    .diagram-iframe-wrapper {
        break-inside: avoid;
        max-height: none;
        overflow: visible;
        border: 1px solid #ccc;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ANIMATIONS
   ───────────────────────────────────────────────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.content-container > *:first-child {
    animation: fadeIn 0.5s ease-out;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   CHAPTER SUMMARIES (collapsible per-chapter)
   ═══════════════════════════════════════════════════════════════════════ */
.ch-summary-wrapper {
    margin: 1rem 0 2rem;
    border-left: 2px solid var(--accent-gold-dim);
    padding-left: 1.2rem;
}

.ch-summary-toggle {
    background: none;
    border: none;
    color: var(--accent-gold);
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    padding: 0.3rem 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s;
}

.ch-summary-toggle:hover {
    color: var(--accent-gold-bright);
}

.ch-summary-toggle-icon {
    display: inline-block;
    transition: transform 0.2s;
    font-size: 0.75rem;
}

.ch-summary-toggle[aria-expanded="true"] .ch-summary-toggle-icon {
    transform: rotate(90deg);
}

.ch-summary-content {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: opacity 0.25s ease;
    margin-top: 0;
}

.ch-summary-content[hidden] {
    display: block !important; /* override UA hidden for animation */
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}

.ch-summary-content.ch-summary-open {
    max-height: 600px;
    opacity: 1;
    margin-top: 0.8rem;
}

.ch-summary-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0.8rem;
}

.ch-summary-concepts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.ch-summary-tag {
    background: rgba(201, 166, 102, 0.1);
    border: 1px solid rgba(201, 166, 102, 0.2);
    color: var(--accent-gold);
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.04em;
}

.ch-summary-connects {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.ch-summary-connects-label {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.04em;
}

.ch-summary-xref {
    color: var(--accent-gold-dim);
    text-decoration: none;
    transition: color 0.2s;
}

.ch-summary-xref:hover {
    color: var(--accent-gold-bright);
}

/* Light mode overrides */
html:not(.dark) .ch-summary-text {
    color: #4a4a4a;
}

html:not(.dark) .ch-summary-tag {
    background: rgba(140, 100, 40, 0.08);
    border-color: rgba(140, 100, 40, 0.2);
    color: #7a5c20;
}

html:not(.dark) .ch-summary-wrapper {
    border-left-color: #c4a04e;
}

/* ═══════════════════════════════════════════════════════════════════════
   CHAPTER MAP (overlay)
   ═══════════════════════════════════════════════════════════════════════ */
.ch-map-btn {
    display: block;
    width: calc(100% - 1.6rem);
    margin: 0 0.8rem 0.8rem;
    padding: 0.5rem 0.8rem;
    background: rgba(201, 166, 102, 0.08);
    border: 1px solid rgba(201, 166, 102, 0.2);
    color: var(--accent-gold);
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s, border-color 0.2s;
    text-align: center;
}

.ch-map-btn:hover {
    background: rgba(201, 166, 102, 0.15);
    border-color: rgba(201, 166, 102, 0.4);
}

.ch-map-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(7, 8, 12, 0.92);
    backdrop-filter: blur(8px);
    overflow-y: auto;
    padding: 2rem;
}

.ch-map-overlay.ch-map-visible {
    display: block;
}

.ch-map-inner {
    max-width: 900px;
    margin: 0 auto;
}

.ch-map-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(201, 166, 102, 0.2);
    padding-bottom: 1rem;
}

.ch-map-title {
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    color: var(--accent-gold);
    letter-spacing: 0.1em;
}

.ch-map-close {
    background: none;
    border: 1px solid rgba(201, 166, 102, 0.3);
    color: var(--accent-gold);
    font-size: 1.2rem;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.ch-map-close:hover {
    background: rgba(201, 166, 102, 0.15);
}

.ch-map-paths {
    margin-bottom: 2.5rem;
}

.ch-map-paths-title {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: var(--accent-gold-dim);
    letter-spacing: 0.1em;
    margin-bottom: 0.8rem;
}

.ch-map-path {
    background: rgba(201, 166, 102, 0.05);
    border: 1px solid rgba(201, 166, 102, 0.12);
    border-radius: 6px;
    padding: 0.8rem 1rem;
    margin-bottom: 0.6rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.ch-map-path:hover {
    border-color: rgba(201, 166, 102, 0.3);
    background: rgba(201, 166, 102, 0.08);
}

.ch-map-path-label {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: var(--accent-gold);
    letter-spacing: 0.06em;
    margin-bottom: 0.3rem;
}

.ch-map-path-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.ch-map-path-chapters {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.ch-map-section {
    margin-bottom: 1.5rem;
}

.ch-map-section-title {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    color: var(--accent-gold-dim);
    letter-spacing: 0.08em;
    margin-bottom: 0.8rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(201, 166, 102, 0.1);
}

.ch-map-card {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 0.8rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(201, 166, 102, 0.06);
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 4px;
    padding-left: 0.4rem;
}

.ch-map-card:hover {
    background: rgba(201, 166, 102, 0.05);
}

.ch-map-card-num {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    color: var(--accent-gold-dim);
    text-align: center;
    padding-top: 0.15rem;
}

.ch-map-card-title {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
}

.ch-map-card-summary {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.ch-map-card-concepts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.4rem;
}

/* Day mode chapter map */
html:not(.dark) .ch-map-overlay {
    background: rgba(252, 250, 245, 0.95);
}

html:not(.dark) .ch-map-card-summary {
    color: #5a5a5a;
}

html:not(.dark) .ch-map-path-desc {
    color: #5a5a5a;
}

@media (max-width: 768px) {
    .ch-map-overlay {
        padding: 1rem;
    }
    .ch-map-card {
        grid-template-columns: 2.5rem 1fr;
    }
}