/* Mote Theme - Phase 2D: Modern serif + monospace hybrid system */

/* Load MgOpenModernaRegular font */
@font-face {
    font-family: 'MgOpenModernaRegular';
    src: url('https://cdn.pinecone.website/fonts/MgOpenModernaRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Two-color palette: Cream + Charcoal + Accent (warm clay/bronze) */
    --color-cream: #f5f1e8;
    --color-charcoal: #2a2a28;
    --color-accent: #d4a574;
    --color-border: #e8e3d8;
    --color-muted: #666660;
    
    /* Typography system: Modern serif for body text, monospace for code/technical */
    --font-family-serif: "MgOpenModernaRegular", Georgia, Times, serif;
    --font-family-mono: "Space Mono", Monaco, "Courier New", monospace;
    
    /* Typography constraints */
    --line-height: 1.65;
    --max-line-width: 42rem;  /* ~720px for wider content column, better text wrapping around floated faces */
    
    /* Visual line weight */
    --border-weight: 1px;
    --border-style: solid;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-cream: #1f1d1a;
        --color-charcoal: #e8e8e6;
        --color-border: #3a3a38;
    }
}

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

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

body {
    font-family: var(--font-family-serif);
    background-color: var(--color-cream);
    color: var(--color-charcoal);
    line-height: var(--line-height);
    transition: background-color 0.2s, color 0.2s;
    text-align: left;
    
    /* Subtle page load animation */
    opacity: 0.9;
    animation: pageArrive 300ms ease-out forwards;
}

@keyframes pageArrive {
    from {
        opacity: 0.9;
    }
    to {
        opacity: 1.0;
    }
}

/* Monospace contexts - keep the distinctive technical feel */
code, pre, kbd, samp, tt,
.monospace,
nav,
.navigation,
.meta,
.technical,
.timestamp,
.url {
    font-family: var(--font-family-mono);
}

/* Serif contexts - elegant, readable body text */
h1, h2, h3, h4, h5, h6,
p, blockquote, 
.content-body,
.synthesis-content,
.research-content,
.wandering-content,
.vigil-content,
.description,
.excerpt,
.hero-title,
.hero-tagline,
.hero-explainer,
.featured-thread-title,
.featured-thread-question,
.featured-thread-statement,
.section-title,
.article-content p,
.article-content blockquote,
.post-summary,
.reading-path p {
    font-family: var(--font-family-serif);
}

/* Enhanced typography for key elements using MgOpenModernaRegular */
.hero-title {
    font-family: var(--font-family-serif);
    font-size: 48px;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.featured-thread-title {
    font-family: var(--font-family-serif);
    font-size: 36px;
    font-weight: 400;
    letter-spacing: -0.005em;
}

.section-title {
    font-family: var(--font-family-serif);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--color-charcoal);
    margin-bottom: 8px;
}

.article-title {
    font-family: var(--font-family-serif);
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Keep distinctive monospace for technical/meta elements */
.article-date,
.post-date,
.piece-meta,
.activity-date,
.rotation-notice,
.featured-thread-label,
.section-descriptor,
.synthesis-label,
.synthesis-descriptor {
    font-family: var(--font-family-mono);
}

/* Removed: .clay-block (unused) */

/* Inverted style block */
.inverted {
    background: #2a2a28;
    color: #f5f1e8;
    padding: 32px;
}

/* Removed: .code-block (unused) */

/* Apply line-width constraint to main content areas */
.container {
    width: 100%;
    max-width: var(--max-line-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    overflow-x: hidden;
}

/* Constrain all images and SVGs within content */
.container img,
.container svg,
.article-content img,
.article-content svg {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--color-accent);
    text-decoration: none;
    border-bottom: var(--border-weight) var(--border-style) transparent;
    transition: border-color 0.2s, opacity 0.2s;
}

a:hover {
    border-bottom-color: var(--color-accent);
    opacity: 0.8;
}

/* Triangular Navigation - Three Research Threads as Vertices */
.header {
    border-bottom: var(--border-weight) var(--border-style) var(--color-border);
    padding: 1.5rem 0 1rem;
    margin-bottom: 2.5rem;
}

.header .container {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 2rem;
}

.header .header-content {
    flex-shrink: 0;
}

.site-title {
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    color: var(--color-charcoal);
}

.site-subtitle {
    font-size: 0.85rem;
    color: var(--color-muted);
    font-style: italic;
    letter-spacing: 0.02em;
    margin-bottom: 0.75rem;
}

.site-title a {
    color: var(--color-charcoal);
    border-bottom: none;
}

/* Triangular Navigation Structure */
.nav-triangular {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.nav-triangle-vertex {
    text-align: center;
    padding: 1rem 0;
    border: var(--border-weight) var(--border-style) var(--color-border);
    transition: border-color 0.2s, background-color 0.2s;
}

.nav-triangle-vertex:hover {
    border-color: var(--color-accent);
    background-color: rgba(212, 165, 116, 0.05);
}

.nav-triangle-vertex a {
    display: block;
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    border: none;
}

.nav-triangle-vertex a:hover {
    border: none;
}

/* Secondary Navigation */
.nav-secondary {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 0.9rem;
}

.nav-secondary li {
    border-right: var(--border-weight) var(--border-style) var(--color-border);
    padding-right: 1.5rem;
}

.nav-secondary li:last-child {
    border-right: none;
}

/* Main Content */
main {
    flex: 1;
    margin: 2rem 0;
}

/* Home Page - Sections */
.home-header {
    margin-bottom: 3rem;
    text-align: center;
}

.home-header h1 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.home-header .tagline {
    font-size: 0.95rem;
    color: var(--color-muted);
    font-style: italic;
}

/* Section Introductions */
.section-intro {
    margin-top: 64px;
    margin-bottom: 12px;
    padding-bottom: 1.5rem;
    border-bottom: var(--border-weight) var(--border-style) var(--color-border);
}

.section-intro h2 {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.section-intro p {
    color: var(--color-muted);
    font-size: 0.95rem;
    line-height: var(--line-height);
}

/* Daily Rotating Vigil */
.vigil-today {
    background-color: rgba(212, 165, 116, 0.08);
    border: var(--border-weight) var(--border-style) var(--color-accent);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.vigil-today h3 {
    color: var(--color-accent);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.vigil-today h4 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.vigil-today p {
    font-size: 0.95rem;
    color: var(--color-muted);
    margin-bottom: 1rem;
}

.vigil-today a {
    font-weight: bold;
}

/* Wanderings Portal */
.wanderings-portal {
    border: var(--border-weight) var(--border-style) var(--color-border);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.wanderings-portal h3 {
    color: var(--color-accent);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.wanderings-portal h4 {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.wanderings-portal p {
    font-size: 0.9rem;
    color: var(--color-muted);
    margin-bottom: 1rem;
}

.wanderings-portal-cta {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: var(--border-weight) var(--border-style) var(--color-accent);
    color: var(--color-accent);
    font-weight: bold;
    font-size: 0.9rem;
    transition: background-color 0.2s;
}

.wanderings-portal-cta:hover {
    background-color: rgba(212, 165, 116, 0.1);
    border-bottom: none;
}

/* Research Threads Display */
.research-threads {
    margin: 3rem 0;
}

.threads {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.thread {
    border-left: 3px solid var(--color-accent);
    padding-left: 1rem;
}

.thread h3 {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.thread > p {
    color: var(--color-muted);
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.thread-pieces {
    list-style: none;
    font-size: 0.9rem;
}

.thread-pieces li {
    margin-bottom: 0.4rem;
}

/* Article Display */
.article {
    margin: 2rem 0;
}

.article-header {
    margin-bottom: 2rem;
    border-bottom: var(--border-weight) var(--border-style) var(--color-border);
    padding-bottom: 1rem;
}

.article-title {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.article-date {
    color: var(--color-muted);
    font-size: 0.85rem;
}

.article-content {
    font-size: 1rem;
    line-height: 1.65;
    text-align: left;
}

.article-content h2,
.article-content h3 {
    margin: 2.5rem 0 1rem 0;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.3;
}

.article-content p {
    margin-bottom: 1.5rem;
    line-height: 1.65;
}

.article-content blockquote {
    border-left: 3px solid var(--color-accent);
    padding-left: 1rem;
    margin: 1rem 0;
    color: var(--color-muted);
    font-style: italic;
}

.article-content code {
    background: var(--color-border);
    padding: 0.2em 0.4em;
    border-radius: 2px;
    font-family: var(--font-family-mono);
    font-size: 0.9em;
}

.article-content pre {
    background: var(--color-border);
    padding: 1rem;
    border-left: 3px solid var(--color-accent);
    overflow-x: auto;
    margin: 1rem 0;
    font-size: 0.9rem;
}

.article-content ul,
.article-content ol {
    margin: 1rem 0 1.5rem 1.5rem;
    line-height: 1.65;
}

.article-content li {
    margin-bottom: 0.5rem;
    line-height: 1.65;
}

/* List Pages */
.list-page {
    margin: 2rem 0;
}

.page-header {
    margin-bottom: 2rem;
    border-bottom: var(--border-weight) var(--border-style) var(--color-border);
    padding-bottom: 1rem;
}

.page-title {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.page-description {
    color: var(--color-muted);
    font-size: 0.95rem;
}

/* Post List */
.post-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.post-card {
    padding: 1rem;
    border-left: 3px solid var(--color-border);
    transition: border-color 0.2s;
}

.post-card:hover {
    border-left-color: var(--color-accent);
}

.post-card h2 {
    margin-bottom: 0.3rem;
}

.post-card h2 a {
    color: var(--color-charcoal);
}

.post-title {
    font-size: 1.1rem;
    font-weight: bold;
}

.post-date {
    display: block;
    font-size: 0.8rem;
    color: var(--color-muted);
    margin-bottom: 0.3rem;
}

.post-summary {
    color: var(--color-muted);
    margin: 0.5rem 0;
    font-size: 0.9rem;
}

/* Footer */
.footer {
    border-top: var(--border-weight) var(--border-style) var(--color-border);
    padding: 2rem 0;
    margin-top: 3rem;
    text-align: center;
    color: var(--color-muted);
    font-size: 0.85rem;
}

.footer p {
    margin: 0.5rem 0;
}

.footer a {
    color: var(--color-muted);
}

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

/* Removed: .content-block (unused) */

/* Pre-formatted structure blocks */
.structure-block {
    background-color: rgba(42, 42, 40, 0.04);
    border-left: 3px solid var(--color-accent);
    border-right: 1px solid var(--color-border);
    padding: 1.5rem;
    margin: 2rem 0;
    overflow-x: auto;
}

.structure-block pre {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-charcoal);
    line-height: 1.6;
}

.structure-block code {
    background: transparent;
    padding: 0;
    border-radius: 0;
    color: var(--color-muted);
}

/* Inverted page layout */
.inverted-page {
    background-color: var(--color-charcoal);
    color: var(--color-cream);
    padding: 3rem 1.5rem;
    margin: 0 -1.5rem;
}

.inverted-page h1,
.inverted-page h2,
.inverted-page h3,
.inverted-page h4,
.inverted-page h5,
.inverted-page h6 {
    color: #f5f1e8;
}

.inverted-page p {
    color: #f5f1e8;
}

.inverted-page a {
    color: var(--color-accent);
}

/* Removed: .inverted-page .content-block (unused) */

/* Aggressive spacing architecture */
.spacing-micro {
    margin: 12px 0;
}

.spacing-small {
    margin: 24px 0;
}

.spacing-medium {
    margin: 48px 0;
}

.spacing-large {
    margin: 64px 0;
}

/* Removed: .architecture-section (unused) */

/* Responsive Design */
@media (max-width: 640px) {
    .container {
        padding: 0 1rem;
    }

    .site-title {
        font-size: 1.2rem;
    }

    .nav-triangular {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .nav-secondary {
        flex-direction: column;
        gap: 0.75rem;
    }

    .nav-secondary li {
        border-right: none;
        border-bottom: var(--border-weight) var(--border-style) var(--color-border);
        padding-right: 0;
        padding-bottom: 0.75rem;
    }

    .nav-secondary li:last-child {
        border-bottom: none;
    }

    .home-header h1 {
        font-size: 1.5rem;
    }

    .article-title {
        font-size: 1.4rem;
    }

    .page-title {
        font-size: 1.4rem;
    }
}

/* Print Styles */
@media print {
    body {
        background-color: white;
        color: black;
    }

    a {
        color: black;
    }

    .header,
    .footer,
    .nav-triangular,
    .nav-secondary {
        display: none;
    }
}

/* Vigil Excerpts - Clay Border Style */
.vigil-excerpt {
    border: 3px solid #d4a574;
    border-radius: 4px;
    padding: 24px 20px;
    margin: 40px 0 48px 0;
    background: transparent;
    font-style: italic;
}

.vigil-excerpt blockquote,
.vigil-excerpt > blockquote {
    border: none;
    padding: 0;
    margin: 0;
    font-style: italic;
    color: var(--color-charcoal);
    line-height: 1.7;
}

.vigil-excerpt blockquote p {
    margin-bottom: 12px;
    font-size: 0.95em;
}

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

/* Research Pages with Asides - Two-Column Layout */
.research-with-asides {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 40px;
    align-items: start;
}

.research-with-asides .vigil-excerpt {
    grid-column: 1 / -1;
    margin-top: 0;
}

.research-with-asides .main-col {
    grid-column: 1;
}

.research-with-asides > * {
    grid-column: 1;
}

.research-with-asides .wandering-aside {
    grid-column: 2;
    grid-row: 3 / span 10;
}

/* Wandering Asides */
.wandering-aside {
    font-size: 0.85em;
    color: #888880;
    line-height: 1.6;
    padding: 16px;
    border-left: 2px solid #d4a574;
    padding-left: 16px;
    margin: 20px 0;
    background: rgba(212, 165, 116, 0.03);
}

.wandering-aside p {
    margin: 0 0 12px 0;
    font-size: 0.85em;
}

.wandering-aside p:last-child {
    margin-bottom: 0;
}

.wandering-aside strong {
    color: #d4a574;
    font-weight: normal;
}

/* Research Container with support for grid */
.research-container {
    max-width: 90%;
}

/* Responsive: Stack on smaller screens */
@media (max-width: 1000px) {
    .research-with-asides {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .research-with-asides .wandering-aside {
        grid-column: 1;
        grid-row: auto;
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid #e8e3d8;
        border-left: none;
        padding-left: 0;
    }
}

/* Archive Section Styling */
.archive {
    margin: 80px 0 40px 0;
    padding: 40px 0;
    border-top: 2px solid var(--color-border);
    border-bottom: 2px solid var(--color-border);
}

.archive h2 {
    font-size: 1.5em;
    margin-bottom: 32px;
    font-weight: normal;
    letter-spacing: 0.05em;
}


/* ─────────────────────────────────────────────────── */
/* PHASE 2D: FEATURED THREAD & RESPONSIVE REDESIGN   */
/* ─────────────────────────────────────────────────── */

:root {
    /* Phase 2D color additions */
    --color-threshold-bg: #ebe7de;
    --color-indigo: #3d3d5c;      /* Week 1: Attention */
    --color-gold: #c9964f;         /* Week 2: Tools */
    --color-silver: #a8a8a8;       /* Week 3: Closure */
    --color-copper: #8b6f47;       /* O/O Lens */
}

/* ───────── HERO SECTION ───────── */
.hero {
    background-color: var(--color-cream);
    padding: 80px 40px;
    text-align: center;
    margin-bottom: 60px;
}

.hero-content {
    max-width: var(--max-line-width);
    margin: 0 auto;
}

.hero-title {
    font-size: 48px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-charcoal);
    margin-bottom: 20px;
}

.hero-tagline {
    font-size: 18px;
    font-style: italic;
    line-height: 1.4;
    color: var(--color-charcoal);
    margin-bottom: 30px;
}

.hero-explainer {
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-charcoal);
    max-width: 600px;
    margin: 0 auto 30px;
}

.hero-divider {
    margin-top: 20px;
    color: var(--color-accent);
    font-size: 14px;
    letter-spacing: 0.2em;
}

/* ───────── FEATURED THREAD SECTION ───────── */
.featured-thread {
    max-width: var(--max-line-width);
    margin: 0 auto 80px;
    padding: 40px;
    background: transparent;
    border-top: 2px solid var(--color-border);
    border-bottom: 2px solid var(--color-border);
}

.featured-thread-header {
    margin-bottom: 40px;
}

.featured-thread-label {
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 12px;
}

.featured-thread-divider {
    height: 1px;
    background: linear-gradient(to right, var(--color-border), transparent);
    margin: 20px 0;
}

.featured-thread-title {
    font-size: 36px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-charcoal);
    margin: 20px 0 16px 0;
}

.featured-thread-question {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-charcoal);
    margin-bottom: 20px;
    font-style: italic;
}

.featured-thread-statement {
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-charcoal);
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(212, 165, 116, 0.05);
    border-left: 4px solid var(--color-accent);
}

.featured-thread-color-bar {
    height: 0;
    margin-bottom: 30px;
}

.featured-thread-content {
    margin: 30px 0;
}

/* Featured Thread Sections */
.featured-thread-section {
    margin-bottom: 40px;
}

.featured-thread-section-label {
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 16px;
    display: block;
}

/* Research Section */
.research-section .featured-piece {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
}

.research-section .featured-piece h4 {
    font-size: 18px;
    margin: 0 0 8px 0;
}

.research-section .featured-piece h4 a {
    color: var(--color-charcoal);
}

.research-section .featured-piece h4 a:hover {
    color: var(--color-accent);
}

/* Synthesis Section */
.synthesis-section .featured-piece {
    background: rgba(212, 165, 116, 0.08);
    padding: 16px;
    border-left: 4px solid var(--color-accent);
    margin-bottom: 20px;
}

.synthesis-descriptor {
    font-size: 13px;
    color: var(--color-muted);
    margin: 8px 0 12px 0;
    font-style: italic;
}

/* Vigils & Wanderings Grid */
.featured-vigils,
.featured-wanderings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.featured-piece {
    font-size: 14px;
    line-height: 1.55;
}

.featured-piece h4 {
    font-size: 16px;
    margin: 0 0 8px 0;
    font-weight: normal;
}

.featured-piece h4 a {
    color: var(--color-charcoal);
}

.featured-piece h4 a:hover {
    color: var(--color-accent);
}

.featured-piece-summary {
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 12px;
    color: var(--color-charcoal);
}

.featured-piece-meta {
    margin-top: 12px;
}

.read-more {
    font-size: 13px;
    color: var(--color-accent);
    text-decoration: none;
}

.read-more:hover {
    text-decoration: underline;
}

/* Featured Thread Callout */
.featured-thread-callout {
    margin-top: 40px;
    padding: 30px;
    background: rgba(212, 165, 116, 0.1);
    border: 1px solid rgba(212, 165, 116, 0.3);
}

.featured-thread-callout blockquote {
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-charcoal);
    margin: 0;
    font-style: italic;
}

.featured-thread-footer {
    margin-top: 30px;
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

.rotation-notice {
    font-size: 14px;
    color: var(--color-muted);
}

/* ───────── THRESHOLD ZONE ───────── */
.threshold-zone {
    max-width: var(--max-line-width);
    margin: 0 auto 80px;
    padding: 40px;
    background-color: var(--color-threshold-bg);
}

.threshold-header {
    margin-bottom: 30px;
}

.section-descriptor {
    font-size: 14px;
    color: var(--color-muted);
    font-style: italic;
}

.threshold-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.threshold-piece {
    padding: 16px;
    background: var(--color-cream);
    border-left: 2px solid var(--color-silver);
}

.threshold-piece h3 {
    font-size: 16px;
    margin: 0 0 8px 0;
}

.threshold-piece h3 a {
    color: var(--color-charcoal);
}

.threshold-piece-summary {
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 12px;
}

.piece-meta {
    font-size: 12px;
    color: var(--color-muted);
}

/* ───────── RESEARCH THREADS GRID ───────── */
.research-threads {
    max-width: var(--max-line-width);
    margin: 0 auto 80px;
    padding: 40px;
}

.research-threads-header {
    margin-bottom: 40px;
}

.research-threads-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}

.research-thread-column {
    display: flex;
    flex-direction: column;
}

.thread-name {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-charcoal);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}

.research-opener {
    margin-bottom: 20px;
}

.research-question {
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-muted);
    margin-bottom: 12px;
    font-style: italic;
}

.research-summary {
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 12px;
}

.thread-link {
    font-size: 13px;
    color: var(--color-accent);
}

.related-synthesis {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.synthesis-label {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 8px;
    display: block;
}

.related-synthesis p {
    font-size: 14px;
    color: var(--color-charcoal);
    margin: 0;
    font-style: italic;
}

/* ───────── O/O LENS SECTION ───────── */
.oo-lens-section {
    max-width: var(--max-line-width);
    margin: 0 auto 80px;
    padding: 40px;
    background: transparent;
    border-left: 4px solid var(--color-copper);
}

.oo-lens-header {
    margin-bottom: 30px;
}

.oo-lens-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.oo-lens-piece {
    padding: 16px;
    border: 1px solid var(--color-copper);
}

.oo-lens-piece h3 {
    font-size: 16px;
    margin: 0 0 8px 0;
}

.oo-lens-piece h3 a {
    color: var(--color-charcoal);
}

.oo-piece-summary {
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 12px;
}

/* ───────── RECENT ACTIVITY SECTION ───────── */
.recent-activity {
    max-width: var(--max-line-width);
    margin: 0 auto 80px;
    padding: 40px;
    background: transparent;
}

.recent-activity-header {
    margin-bottom: 30px;
}

.recent-activity-timeline {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    color: var(--color-accent);
}

/* ───────── HOW TO READ SECTION ───────── */
.how-to-read {
    max-width: var(--max-line-width);
    margin: 0 auto 80px;
    padding: 40px;
    background: rgba(212, 165, 116, 0.05);
}

.how-to-read-header {
    margin-bottom: 30px;
}

.how-to-read-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.reading-path {
    padding: 16px;
    background: var(--color-cream);
    border-left: 2px solid var(--color-accent);
}

.reading-path h3 {
    font-size: 14px;
    font-weight: normal;
    color: var(--color-charcoal);
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.reading-path p {
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
    color: var(--color-muted);
}

/* ───────── RESPONSIVE DESIGN ───────── */

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
    .hero {
        padding: 60px 30px;
    }
    
    .hero-title {
        font-size: 36px;
    }
    
    .featured-thread {
        padding: 30px;
    }
    
    .research-threads-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    
    .featured-vigils,
    .featured-wanderings {
        grid-template-columns: 1fr;
    }
    
    .threshold-content {
        grid-template-columns: 1fr;
    }
    
    .oo-lens-content {
        grid-template-columns: 1fr;
    }
    
    .how-to-read-content {
        grid-template-columns: 1fr;
    }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
    :root {
        --max-line-width: 100%;
    }
    
    .hero {
        padding: 40px 20px;
    }
    
    .hero-title {
        font-size: 28px;
    }
    
    .hero-tagline {
        font-size: 16px;
    }
    
    .featured-thread,
    .research-threads,
    .threshold-zone,
    .oo-lens-section,
    .recent-activity,
    .how-to-read {
        padding: 24px 16px;
        margin: 0 auto 40px;
    }
    
    .featured-thread-title {
        font-size: 24px;
    }
    
    .research-threads-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .featured-vigils,
    .featured-wanderings {
        grid-template-columns: 1fr;
    }
    
    .threshold-content {
        grid-template-columns: 1fr;
    }
    
    .oo-lens-content {
        grid-template-columns: 1fr;
    }
    
    .how-to-read-content {
        grid-template-columns: 1fr;
    }
    
    .archive {
        margin: 40px 0 20px 0;
        padding: 20px 0;
    }
}

/* === Agent 2: Constellation === */

#constellation-container {
    width: 100%;
    overflow: hidden;
}

#constellation-container svg {
    display: block;
    width: 100%;
}

.constellation-tooltip {
    position: absolute;
    background: var(--color-charcoal);
    color: var(--color-cream);
    padding: 8px 12px;
    font-size: 12px;
    max-width: 220px;
    pointer-events: none;
    z-index: 100;
    border: 1px solid var(--color-accent);
    font-family: var(--font-family-mono);
    transform: translate(-50%, -100%);
    white-space: pre-wrap;
    word-break: break-word;
}

.constellation-loading {
    color: var(--color-muted);
    font-size: 12px;
    font-style: italic;
    padding: 20px 0;
}

/* === Agent 1: Grain & Atmosphere === */

@keyframes glitch-offset {
    0%, 90% {
        text-shadow: none;
    }
    91% {
        text-shadow: -2px 0 #ff0000, 2px 0 #00ff00;
    }
    92% {
        text-shadow: 1px -1px #ff0000, -1px 1px #0000ff;
    }
    93% {
        text-shadow: -1px 1px #00ff00, 1px -1px #ff0000;
    }
    94% {
        text-shadow: 2px 0 #0000ff, -2px 0 #00ff00;
    }
    95% {
        text-shadow: -1px -1px #ff0000, 1px 1px #0000ff;
    }
    96% {
        text-shadow: 1px 0 #00ff00, -1px 0 #ff0000;
    }
    97% {
        text-shadow: 0 1px #0000ff, 0 -1px #00ff00;
    }
    100% {
        text-shadow: none;
    }
}

.vigil-page .article-title {
    animation: glitch-offset 4s ease-in-out 0.5s 1 forwards;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

.hero-tagline::after {
    content: "_";
    animation: blink 1.2s step-end infinite;
    color: var(--color-accent);
}

/* === Agent 4: Vigil Illustrations === */

.vigil-illustration {
    display: block;
    margin: 0 auto 2rem;
    max-width: 320px;
}

.vigil-illustration img {
    max-width: 100%;
    display: block;
    filter: grayscale(100%) contrast(1.4) brightness(0.9);
    image-rendering: pixelated;
    border: 1px solid var(--color-border);
}

@media (max-width: 767px) {
    .vigil-illustration {
        max-width: 100%;
    }
}

/* === Illustration and Diagram Styling === */

.illustration-block {
    border: 2px solid var(--color-accent);
    padding: 1rem;
    margin: 2rem 0;
    background-color: rgba(212, 165, 116, 0.02);
    box-sizing: border-box;
}

.illustration-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border: 1px solid var(--color-border);
}

.illustration-caption {
    font-size: 0.9rem;
    font-style: italic;
    color: var(--color-muted);
    margin-top: 0.75rem;
    text-align: center;
    line-height: 1.4;
}

.illustration-left {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
    max-width: 350px;
}

.illustration-right {
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
    max-width: 350px;
}

.illustration-center {
    clear: both;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.diagram-interactive {
    margin: 2rem 0;
    padding: 1rem 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background-color: rgba(212, 165, 116, 0.02);
}

.diagram-interactive svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Mobile responsiveness for illustrations and diagrams */
@media (max-width: 768px) {
    .illustration-left,
    .illustration-right {
        float: none;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }

    .illustration-block {
        max-width: 85%;
        margin: 1.5rem auto;
    }

    .illustration-block img {
        max-width: 100%;
        height: auto;
    }

    .diagram-interactive {
        margin: 1.5rem 0;
        padding: 0.5rem 0;
    }
}

/* ──────── TEXT SPACING FIX ──────── */
/* Ensure proper spacing and prevent text overlap */

.article-content p,
.article-content div,
.article-content span {
    line-height: 1.65;
    margin-bottom: 1.5rem;
}

.article-content li {
    line-height: 1.65;
}

.article-content p:last-child {
    margin-bottom: 0;
}

/* Ensure proper spacing for hidden link injection */
.article-content span a {
    line-height: inherit;
    display: inline;
    margin: 0;
    padding: 0;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    line-height: 1.3;
    margin: 2rem 0 1rem 0;
}

.article-content h1:first-child,
.article-content h2:first-child,
.article-content h3:first-child {
    margin-top: 0;
}

/* Secondary Navigation (section browsing bar) */
nav.nav-secondary {
    border-top: var(--border-weight) var(--border-style) var(--color-border);
    padding: 0.6rem 0 0;
    margin-top: 0.75rem;
}

.nav-secondary-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.nav-secondary-list li {
    border-right: var(--border-weight) var(--border-style) var(--color-border);
    padding: 0 1.25rem;
}

.nav-secondary-list li:last-child {
    border-right: none;
}

.nav-secondary-list a {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
    border-bottom: none;
    transition: color 0.15s;
}

.nav-secondary-list a:hover {
    color: var(--color-accent);
    border-bottom: none;
}

/* Breadcrumb */
.breadcrumb {
    margin-bottom: 1.5rem;
}

.breadcrumb .container {
    font-family: 'Space Mono', 'Courier New', monospace;
    font-size: 0.72rem;
    color: var(--color-muted);
    line-height: 1;
}

.breadcrumb a {
    color: var(--color-muted);
    border-bottom: none;
}

.breadcrumb a:hover {
    color: var(--color-accent);
    border-bottom: none;
}

.breadcrumb-sep {
    margin: 0 0.4rem;
    color: var(--color-accent);
}

.breadcrumb-current {
    color: var(--color-charcoal);
}

/* Narrative breadcrumbs */
.narrative-breadcrumb {
    margin-bottom: 1.5rem;
}

.narrative-breadcrumb .container {
    font-family: var(--font-family-serif);
    font-size: 0.85rem;
    color: var(--color-muted);
    line-height: 1.4;
    font-style: italic;
    letter-spacing: 0.3px;
}

/* Prev/Next Navigation */
.prev-next {
    border-top: var(--border-weight) var(--border-style) var(--color-border);
    padding: 1.5rem 0;
    margin-top: 2rem;
}

.prev-next .container {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 2rem;
}

.prev-next-link {
    font-size: 0.82rem;
    color: var(--color-muted);
    border-bottom: none;
    max-width: 45%;
    transition: color 0.15s;
}

.prev-next-link:hover {
    color: var(--color-accent);
    border-bottom: none;
}

.next-link {
    margin-left: auto;
    text-align: right;
}

/* ASCII Art */
pre.ascii-art {
  font-family: 'Space Mono', 'Courier New', monospace;
  font-size: 0.75rem;
  line-height: 1.3;
  background: var(--color-charcoal, #2a2a28);
  color: var(--color-cream, #f5f1e8);
  padding: 2rem;
  overflow-x: auto;
  border-radius: 2px;
  margin: 2rem 0;
  white-space: pre;
}

/* Visual Hero Blocks — Multi-language visual support */

.visual-hero {
  margin: 2rem 0;
  position: relative;
  overflow: hidden;
}

.visual-hero img,
.visual-hero .interactive-embed {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* Style variants for different visual languages */

/* Clip art / relief blocks */
.visual-hero--clipart {
  filter: contrast(1.15) saturate(0.85);
  border: 2px solid var(--color-charcoal);
  padding: 1rem;
  background: var(--color-threshold-bg, #ebe7de);
}

/* Fever dream / surreal blocks */
.visual-hero--fever-dream {
  filter: brightness(1.05) blur(0.3px);
  aspect-ratio: 16 / 9;
  margin: 3rem 0;
}

.visual-hero--fever-dream img {
  object-fit: cover;
  height: 100%;
}

/* New Yorker cartoon style */
.visual-hero--cartoon {
  filter: saturate(0.9) brightness(1.02);
  max-width: 600px;
  margin: 2rem auto;
}

/* Blueprint / technical schematic */
.visual-hero--blueprint {
  filter: hue-rotate(200deg) saturate(0.6) brightness(0.95);
  background: #001a33;
  padding: 1.5rem;
  border: 1px dashed var(--color-accent);
}

/* Zine / DIY aesthetic */
.visual-hero--zine {
  filter: contrast(1.3) grayscale(1);
  border: 1px solid var(--color-charcoal);
  transform: rotate(-0.5deg);
  margin: 2rem 0.5rem;
}

/* Interactive embed container */
.visual-hero--interactive .interactive-embed {
  min-height: 600px;
  background: var(--color-threshold-bg, #ebe7de);
  border: 1px solid var(--color-border);
  border-radius: 2px;
}

/* Caption styling */
.visual-hero__caption {
  font-size: 0.95rem;
  color: var(--color-muted);
  margin-top: 0.75rem;
  padding: 0 0.5rem;
  font-style: italic;
  line-height: var(--line-height);
}

/* Responsive: ensure images don't break layout on mobile */
@media (max-width: 768px) {
  .visual-hero {
    margin: 1.5rem 0;
  }

  .visual-hero--fever-dream {
    aspect-ratio: auto;
    max-height: 400px;
  }

  .visual-hero--interactive .interactive-embed {
    min-height: 400px;
  }
}

/* Redact shortcode */
.redacted {
    background-color: var(--color-charcoal);
    color: transparent;
    transition: color 0.3s ease;
    padding: 0 0.15em;
    border-radius: 2px;
    cursor: default;
}
.redacted::selection {
    color: var(--color-cream);
    background-color: var(--color-charcoal);
}
.redacted:hover {
    color: var(--color-charcoal);
    background-color: var(--color-border);
}

/* Reading tempo labels */
.reading-tempo {
    font-family: var(--font-family-mono);
    font-size: 0.75rem;
    color: var(--color-muted);
    display: block;
    margin-top: 0.25rem;
    letter-spacing: 0.05em;
}

/* Resonance cross-links */
.resonance-links {
    margin-top: 4rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}
.resonance-label {
    font-family: var(--font-family-mono);
    font-size: 0.8rem;
    color: var(--color-muted);
    letter-spacing: 0.03em;
}
.resonance-links ul {
    list-style: none;
    padding: 0;
    margin-top: 0.5rem;
}
.resonance-links li {
    margin-bottom: 0.25rem;
}
.resonance-links a {
    font-family: var(--font-family-mono);
    font-size: 0.8rem;
    color: var(--color-muted);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border);
}
.resonance-links a:hover {
    color: var(--color-charcoal);
    border-bottom-color: var(--color-accent);
}


/* === Vintage Face Portraits === */
/* Crude polygon clip-paths isolating heads from vintage portraits */
/* These are deliberately rough — scissor-cut, not Photoshop */

.face-portrait {
    display: inline-block;
    max-width: 80px;
    height: auto;
    mix-blend-mode: multiply;
    opacity: 0.85;
    filter: grayscale(30%) contrast(1.1);
    transition: opacity 0.3s ease;
}

.face-portrait:hover {
    opacity: 1;
    filter: grayscale(0%) contrast(1);
}

/* Crude polygon masks — each one slightly different, like hand-cut */
.face-clip-1 { clip-path: polygon(18% 5%, 85% 3%, 92% 42%, 88% 78%, 72% 95%, 30% 92%, 8% 75%, 5% 38%); }
.face-clip-2 { clip-path: polygon(22% 2%, 80% 6%, 95% 35%, 90% 72%, 78% 98%, 25% 95%, 5% 70%, 10% 30%); }
.face-clip-3 { clip-path: polygon(15% 8%, 82% 2%, 90% 45%, 85% 80%, 70% 97%, 28% 93%, 10% 68%, 8% 32%); }
.face-clip-4 { clip-path: polygon(20% 0%, 78% 5%, 93% 38%, 88% 75%, 75% 95%, 22% 98%, 5% 72%, 12% 28%); }
.face-clip-5 { clip-path: polygon(25% 4%, 83% 0%, 92% 40%, 85% 82%, 68% 96%, 32% 94%, 8% 65%, 15% 25%); }
.face-clip-6 { clip-path: polygon(12% 6%, 88% 8%, 94% 48%, 82% 85%, 65% 98%, 35% 95%, 10% 78%, 6% 35%); }
.face-clip-7 { clip-path: polygon(20% 3%, 85% 7%, 90% 42%, 92% 80%, 70% 96%, 28% 90%, 5% 68%, 8% 30%); }
.face-clip-8 { clip-path: polygon(18% 5%, 80% 0%, 95% 32%, 88% 78%, 75% 95%, 30% 98%, 12% 72%, 5% 40%); }
.face-clip-9 { clip-path: polygon(22% 8%, 82% 4%, 88% 50%, 90% 82%, 68% 94%, 25% 96%, 8% 70%, 15% 28%); }

/* Float variations for inline placement with organic text wrapping */
.face-float-left {
    float: left;
    margin: 0.5rem 1.5rem 0.5rem 0;
}

.face-float-right {
    float: right;
    margin: 0.5rem 0 0.5rem 1.5rem;
}

/* Apply shape-outside for organic text wrapping based on clip-path */
.face-float-left.face-clip-1,
.face-float-right.face-clip-1 {
    shape-outside: polygon(18% 5%, 85% 3%, 92% 42%, 88% 78%, 72% 95%, 30% 92%, 8% 75%, 5% 38%);
    shape-margin: 0.75rem;
}

.face-float-left.face-clip-2,
.face-float-right.face-clip-2 {
    shape-outside: polygon(22% 2%, 80% 6%, 95% 35%, 90% 72%, 78% 98%, 25% 95%, 5% 70%, 10% 30%);
    shape-margin: 0.75rem;
}

.face-float-left.face-clip-3,
.face-float-right.face-clip-3 {
    shape-outside: polygon(15% 8%, 82% 2%, 90% 45%, 85% 80%, 70% 97%, 28% 93%, 10% 68%, 8% 32%);
    shape-margin: 0.75rem;
}

.face-float-left.face-clip-4,
.face-float-right.face-clip-4 {
    shape-outside: polygon(20% 0%, 78% 5%, 93% 38%, 88% 75%, 75% 95%, 22% 98%, 5% 72%, 12% 28%);
    shape-margin: 0.75rem;
}

.face-float-left.face-clip-5,
.face-float-right.face-clip-5 {
    shape-outside: polygon(25% 4%, 83% 0%, 92% 40%, 85% 82%, 68% 96%, 32% 94%, 8% 65%, 15% 25%);
    shape-margin: 0.75rem;
}

.face-float-left.face-clip-6,
.face-float-right.face-clip-6 {
    shape-outside: polygon(12% 6%, 88% 8%, 94% 48%, 82% 85%, 65% 98%, 35% 95%, 10% 78%, 6% 35%);
    shape-margin: 0.75rem;
}

.face-float-left.face-clip-7,
.face-float-right.face-clip-7 {
    shape-outside: polygon(20% 3%, 85% 7%, 90% 42%, 92% 80%, 70% 96%, 28% 90%, 5% 68%, 8% 30%);
    shape-margin: 0.75rem;
}

.face-float-left.face-clip-8,
.face-float-right.face-clip-8 {
    shape-outside: polygon(18% 5%, 80% 0%, 95% 32%, 88% 78%, 75% 95%, 30% 98%, 12% 72%, 5% 40%);
    shape-margin: 0.75rem;
}

.face-float-left.face-clip-9,
.face-float-right.face-clip-9 {
    shape-outside: polygon(22% 8%, 82% 4%, 88% 50%, 90% 82%, 68% 94%, 25% 96%, 8% 70%, 15% 28%);
    shape-margin: 0.75rem;
}


/* For embedding in SVG contexts */
.face-inline {
    display: inline;
    vertical-align: middle;
    max-width: 80px;
    margin: 0 0.5rem;
}

/* Smaller variant for margin placement */
.face-margin {
    position: absolute;
    right: -140px;
    max-width: 100px;
    opacity: 0.6;
}

/* Responsive face portrait sizing - multiple breakpoints */
@media (max-width: 1024px) {
    .face-portrait { max-width: 75px; }
}

@media (max-width: 768px) {
    .face-portrait { max-width: 60px; }
    .face-float-left, .face-float-right { 
        margin: 0.5rem 1rem 0.5rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .face-portrait { max-width: 50px; }
    .face-margin { display: none; }
    .face-float-left, .face-float-right { 
        float: none;
        display: block;
        margin: 1rem auto;
        max-width: 60px;
    }
}

/* See-also cross-links */
.see-also {
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
    margin: 1.5rem 0;
    padding: 0.5rem 0.75rem;
    border-left: 2px solid var(--color-accent);
    background: rgba(212, 165, 116, 0.04);
    line-height: 1.5;
}

.see-also-label {
    color: var(--color-accent);
    margin-right: 0.25rem;
}

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

.see-also a:hover {
    color: var(--color-accent);
}

.see-also-reason {
    color: var(--color-muted);
    font-style: italic;
}

/* See-also block styling */
.see-also-block {
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
    margin: 1.5rem 0;
    padding: 0.5rem 0.75rem;
    border-left: 2px solid var(--color-accent);
    background: rgba(212, 165, 116, 0.04);
    line-height: 1.5;
}

/* Group consecutive see-also blocks */
.see-also-block + .see-also-block .see-also-header {
    display: none;
}

.see-also-block + .see-also-block {
    border-top: none;
    margin-top: 0;
    padding-top: 0.5rem;
}

/* Handle empty paragraphs between see-also blocks */
.see-also-block + p:empty + .see-also-block .see-also-header {
    display: none;
}

.see-also-block + p:empty + .see-also-block {
    border-top: none;
    margin-top: 0;
    padding-top: 0.5rem;
}

.see-also-header {
    margin-bottom: 0.25rem;
}

.see-also-link {
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-underline-offset: 2px;
}

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

.see-also-content {
    margin-bottom: 0.5rem;
}

.see-also-content:last-child {
    margin-bottom: 0;
}

/* Footnotes */
.footnotes {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-charcoal);
    font-size: 0.85rem;
}

.footnotes hr {
    display: none; /* Hugo adds an hr we don't need since we have border-top */
}

.footnotes ol {
    margin: 0;
    padding-left: 1.5rem;
}

.footnotes li {
    margin-bottom: 0.5rem;
    color: var(--color-muted);
}

.footnote-ref {
    color: var(--color-accent);
    text-decoration: none;
    font-size: 0.8em;
    vertical-align: super;
    line-height: 0;
}

.footnote-ref:hover {
    color: var(--color-text);
}

.footnote-backref {
    color: var(--color-accent);
    text-decoration: none;
    margin-left: 0.25rem;
}

.footnote-backref:hover {
    color: var(--color-text);
}



/* ── Context-Aware ── */

.context-whisper {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-muted);
    letter-spacing: 0.15em;
    text-transform: lowercase;
    opacity: 0;
    transition: opacity 2s ease-in;
    margin: 0.5rem 0;
    text-align: center;
}

.context-whisper:not(:empty) {
    opacity: 0.4;
}



/* ───────── MOBILE NAVIGATION ENHANCEMENTS ───────── */

/* Improved touch targets for mobile navigation */
@media (max-width: 767px) {
    .nav-triangle-vertex a,
    .nav-secondary a {
        min-height: 44px; /* Accessibility guideline for touch targets */
        display: flex;
        align-items: center;
        padding: 0.75rem 1rem;
    }
    
    .nav-secondary {
        gap: 0; /* Remove gap since we're adding padding to links */
    }
    
    .nav-secondary li {
        border-bottom: 1px solid var(--color-border);
    }
    
    .nav-secondary li:last-child {
        border-bottom: none;
    }
}

/* Ensure constellation pages remain readable on mobile */
@media (max-width: 768px) {
    .constellation-connections {
        font-size: 0.8rem;
        line-height: 1.3;
    }
    
    .constellation-node {
        padding: 0.5rem;
        margin: 0.25rem;
    }
}

/* ───────── TEMPORAL MARKERS ───────── */

/* Styling for "as of [date]" and "v2 of this thinking" markers */
*[title*="as of"] {
    font-family: var(--font-family-mono);
    font-size: 0.85em;
    color: var(--color-muted);
    font-weight: normal;
    opacity: 0.8;
    position: relative;
}

/* More specific selectors for temporal markers */
em[title*="temporal"],
.temporal-marker {
    font-family: var(--font-family-mono);
    font-size: 0.85em;
    color: var(--color-muted);
    opacity: 0.8;
    font-style: normal;
}

.temporal-marker:hover {
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* Last touched footer */
.last-modified {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.last-touched {
    font-family: var(--font-family-mono);
    font-size: 0.85rem;
    color: var(--color-muted);
    text-align: center;
    font-style: italic;
    opacity: 0.7;
    margin: 0;
}

/* Print stylesheet - clean reading experience */
@media print {
    /* Hide navigation and interactive elements */
    .nav, 
    .breadcrumb, 
    .prev-next,
    .grain-canvas,
    .scroll-reveal,
    .margin-note-toggle,
    .redacted-text,
    script,
    .canvas-element {
        display: none !important;
    }

    /* Hide face portraits */
    .face-portrait,
    .featured-image img,
    .article-illustration img {
        display: none !important;
    }

    /* Show all hidden/redacted content */
    .redacted-text .reveal {
        background: none !important;
        color: var(--color-charcoal) !important;
        display: inline !important;
    }

    .redacted-text {
        background: none !important;
    }

    /* Clean typography for print */
    body {
        background: white !important;
        color: #000 !important;
        font-family: Georgia, Times, serif !important;
        font-size: 12pt;
        line-height: 1.5;
    }

    .article-title {
        color: #000 !important;
        font-size: 20pt;
        font-weight: bold;
        margin-bottom: 12pt;
    }

    .article-content {
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .article-content p {
        margin-bottom: 12pt;
    }

    .article-content h2,
    .article-content h3 {
        color: #000 !important;
        margin-top: 18pt;
        margin-bottom: 6pt;
        font-weight: bold;
    }

    .article-content h2 {
        font-size: 16pt;
    }

    .article-content h3 {
        font-size: 14pt;
    }

    /* Clean up code blocks for print */
    .article-content code,
    .article-content pre {
        font-family: "Courier New", monospace !important;
        font-size: 10pt;
        background: #f8f8f8 !important;
        border: 1px solid #ddd !important;
        padding: 3pt;
    }

    .article-content pre {
        margin: 12pt 0;
        padding: 6pt;
        overflow: visible !important;
        word-wrap: break-word;
    }

    /* Page breaks */
    .article {
        page-break-inside: avoid;
    }

    .article-content h2,
    .article-content h3 {
        page-break-after: avoid;
    }

    /* Remove decorative elements */
    .tags,
    .article-date,
    .reading-tempo {
        display: none !important;
    }

    /* Ensure links are readable */
    a {
        color: #000 !important;
        text-decoration: underline !important;
    }

    /* Show link URLs after links for reference */
    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #666;
    }
}

/* ─────────────────────────────────────────────────── */
/* DARK MODE TOGGLE                                     */
/* ─────────────────────────────────────────────────── */

/* Dark mode toggle button - minimal mote dot in corner */
.dark-mode-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: opacity 0.2s ease;
    z-index: 100;
}

.dark-mode-toggle:hover {
    opacity: 0.7;
}

.toggle-dot {
    display: block;
    width: 8px;
    height: 8px;
    background-color: var(--color-accent);
    border-radius: 50%;
    transition: opacity 0.2s ease;
}

/* Retro visitor counter styling */
.retro-counter {
    font-family: var(--font-family-mono);
    font-size: 0.85rem;
    line-height: 1.4;
    background: var(--color-cream);
    border: var(--border-weight) var(--border-style) var(--color-charcoal);
    padding: 0.75rem;
    margin: 1.5rem 0;
    max-width: fit-content;
    letter-spacing: 0.5px;
}

.counter-digits {
    font-weight: bold;
    color: var(--color-accent);
    font-size: 1rem;
}

/* Position relative to header container */
.header {
    position: relative;
}

/* Dark mode color overrides - inverts cream/charcoal */
body.dark-mode {
    --color-cream: #2a2a28;
    --color-charcoal: #f5f1e8;
    --color-border: #3a3a38;
    --color-muted: #999999;
}

/* Special handling for elements that need contrast in dark mode */
body.dark-mode .featured-thread-statement {
    background: rgba(212, 165, 116, 0.12);
}

body.dark-mode .synthesis-section .featured-piece {
    background: rgba(212, 165, 116, 0.12);
}

body.dark-mode .color-threshold {
    --color-threshold-bg: #363632;
}

body.dark-mode .toggle-dot {
    opacity: 0.6;
}