/* Carried over verbatim from jayfontanini-site
   jayfontanini-site/public/accelerator/curriculum/module-1/two-roads/index.html
   Every selector is prefixed with ".reading .essaybody" so this stylesheet cannot reach
   the Catalyst chrome. The source's global rules (*, :root, html, body) are
   collapsed onto .essaybody itself. Declarations are unchanged. */

        .reading .essaybody,
.reading .essaybody * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .reading .essaybody {

            /* Timeline track colors - warm palette */
            --color-unified: var(--rust);
            --color-symbolic: var(--frost-dark);
            --color-neural: var(--whiskey);
            --color-hybrid: var(--frost);

            --color-unified-bg: rgba(196, 93, 62, 0.12);
            --color-symbolic-bg: rgba(107, 134, 149, 0.12);
            --color-neural-bg: rgba(212, 165, 116, 0.12);
            --color-hybrid-bg: rgba(157, 180, 192, 0.12);

            --color-unified-border: rgba(196, 93, 62, 0.35);
            --color-symbolic-border: rgba(107, 134, 149, 0.35);
            --color-neural-border: rgba(212, 165, 116, 0.35);
            --color-hybrid-border: rgba(157, 180, 192, 0.35);
        }

        .reading .essaybody {
            font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--ink);
            color: var(--paper);
            min-height: 100vh;
            font-size: 16px;
            line-height: 1.7;
        }

        /* ── Navigation ── */
        .reading .essaybody .site-nav {
            padding: 24px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(247, 245, 242, 0.15);
        }

        .reading .essaybody .site-nav .brand {
            display: flex;
            align-items: center;
        }

        .reading .essaybody .site-nav .brand img {
            height: 30px;
            width: auto;
        }

        .reading .essaybody .site-nav .nav-label {
            font-size: 11px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: var(--rust);
        }

        /* ── Breadcrumb ── */
        .reading .essaybody .breadcrumb {
            max-width: 1000px;
            margin: 0 auto;
            padding: 24px 40px 0;
            font-size: 11px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: rgba(247, 245, 242, 0.6);
        }

        .reading .essaybody .breadcrumb a {
            color: rgba(247, 245, 242, 0.6);
            text-decoration: none;
        }

        .reading .essaybody .breadcrumb a:hover {
            color: var(--paper);
        }

        .reading .essaybody .breadcrumb span {
            margin: 0 8px;
        }

        /* ── Hero ── */
        .reading .essaybody .hero {
            background: var(--ink);
            padding: 80px 40px 80px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .reading .essaybody .hero::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(ellipse at 50% 70%, rgba(196, 93, 62, 0.15) 0%, transparent 60%);
            pointer-events: none;
        }

        .reading .essaybody .hero-label {
            font-size: 11px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: var(--rust);
            margin-bottom: 24px;
            position: relative;
        }

        .reading .essaybody h1 {
            font-family: 'DM Serif Display', serif;
            font-weight: 400;
            font-size: clamp(36px, 5vw, 56px);
            line-height: 1.1;
            color: var(--paper);
            margin-bottom: 20px;
            position: relative;
        }

        .reading .essaybody .hero .subtitle {
            font-size: 18px;
            color: rgba(247, 245, 242, 0.6);
            max-width: 560px;
            margin: 0 auto;
            line-height: 1.7;
            position: relative;
        }

        /* ── Legend ── */
        .reading .essaybody .legend {
            display: flex;
            justify-content: center;
            gap: 32px;
            padding: 32px 40px;
            flex-wrap: wrap;
            border-bottom: 1px solid rgba(247, 245, 242, 0.15);
        }

        .reading .essaybody .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .reading .essaybody .legend-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }

        .reading .essaybody .legend-dot.unified { background: var(--color-unified); }
        .reading .essaybody .legend-dot.symbolic { background: var(--color-symbolic); }
        .reading .essaybody .legend-dot.neural { background: var(--color-neural); }
        .reading .essaybody .legend-dot.hybrid { background: var(--color-hybrid); }

        .reading .essaybody .legend-label {
            font-size: 12px;
            font-weight: 500;
            color: rgba(247, 245, 242, 0.6);
            letter-spacing: 0.03em;
        }

        /* ── Container ── */
        .reading .essaybody .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 0 40px;
        }

        /* ── Timeline Structure ── */
        .reading .essaybody .timeline {
            position: relative;
            padding: 40px 0;
        }

        /* Continuous spine running full height */
        .reading .essaybody .timeline::before {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 0;
            bottom: 0;
            width: 2px;
            background: var(--rust);
            z-index: 0;
        }

        /* ── Era Headers ── */
        .reading .essaybody .era {
            position: relative;
            margin-bottom: 60px;
            z-index: 1;
        }

        .reading .essaybody .era-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .reading .essaybody .era-title {
            display: inline-block;
            background: var(--ink);
            border: 1px solid rgba(247, 245, 242, 0.15);
            border-radius: 2px;
            padding: 14px 32px;
            font-family: 'DM Serif Display', serif;
            font-size: 22px;
            font-weight: 400;
            color: var(--paper);
        }

        .reading .essaybody .era-years {
            display: block;
            font-family: 'Source Sans 3', sans-serif;
            font-size: 11px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: var(--rust);
            margin-top: 8px;
        }

        /* ── Event Cards ── */
        .reading .essaybody .event-row {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            margin-bottom: 28px;
            position: relative;
            z-index: 1;
        }

        /* Center dot on spine */
        .reading .essaybody .event-row::before {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 28px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--rust);
            border: 2px solid var(--ink);
            z-index: 2;
        }

        /* Connector line from card to spine */
        .reading .essaybody .event-row::after {
            content: '';
            position: absolute;
            top: 33px;
            height: 2px;
            background: var(--rust);
            z-index: 1;
            width: 6%;
        }

        /* Left card connector - from right edge of card (44%) to center (50%) */
        .reading .essaybody .event-row:has(.event-card.left:first-child)::after {
            left: 44%;
        }

        /* Right card connector - from center (50%) to left edge of card (56%) */
        .reading .essaybody .event-row:has(.event-card.right:last-child)::after {
            left: 50%;
        }

        .reading .essaybody .event-card {
            width: 44%;
            padding: 24px;
            border-radius: 2px;
            position: relative;
        }

        .reading .essaybody .event-card.left {
            margin-right: auto;
            margin-left: 0;
            text-align: right;
        }

        .reading .essaybody .event-card.right {
            margin-left: auto;
            margin-right: 0;
            text-align: left;
        }

        /* Placeholder card for opposite side */
        .reading .essaybody .event-card.placeholder {
            visibility: hidden;
        }

        /* Centered cards (like Dartmouth) - no connector or dot, card above spine */
        .reading .essaybody .event-row:has(.event-card[style*="margin: 0 auto"])::after,
.reading .essaybody .event-row:has(.event-card[style*="margin: 0 auto"])::before {
            display: none;
        }

        .reading .essaybody .event-card[style*="margin: 0 auto"] {
            z-index: 2;
        }

        /* Solid background for centered unified card (Dartmouth) */
        .reading .essaybody .event-card.unified[style*="margin: 0 auto"] {
            background: var(--ink);
        }

        .reading .essaybody .event-card.symbolic {
            background: var(--color-symbolic-bg);
            border: 1px solid var(--color-symbolic-border);
        }

        .reading .essaybody .event-card.neural {
            background: var(--color-neural-bg);
            border: 1px solid var(--color-neural-border);
        }

        .reading .essaybody .event-card.unified {
            background: var(--color-unified-bg);
            border: 1px solid var(--color-unified-border);
        }

        .reading .essaybody .event-card.hybrid {
            background: var(--color-hybrid-bg);
            border: 1px solid var(--color-hybrid-border);
        }

        .reading .essaybody .event-year {
            font-size: 11px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 8px;
        }

        .reading .essaybody .symbolic .event-year { color: var(--color-symbolic); }
        .reading .essaybody .neural .event-year { color: var(--color-neural); }
        .reading .essaybody .unified .event-year { color: var(--color-unified); }
        .reading .essaybody .hybrid .event-year { color: var(--color-hybrid); }

        .reading .essaybody .event-title {
            font-family: 'DM Serif Display', serif;
            font-size: 20px;
            font-weight: 400;
            margin-bottom: 8px;
            color: var(--paper);
        }

        .reading .essaybody .event-person {
            font-size: 13px;
            font-weight: 500;
            margin-bottom: 10px;
            color: var(--rust);
        }

        .reading .essaybody .event-description {
            font-size: 14px;
            line-height: 1.7;
            color: rgba(247, 245, 242, 0.6);
        }

        /* Hide old center-marker elements */
        .reading .essaybody .center-marker {
            display: none;
        }

        /* Type-based coloring for dots and connectors */
        .reading .essaybody .event-row:has(.symbolic)::before { background: var(--color-symbolic); }
        .reading .essaybody .event-row:has(.neural)::before { background: var(--color-neural); }
        .reading .essaybody .event-row:has(.unified)::before { background: var(--color-unified); }
        .reading .essaybody .event-row:has(.hybrid)::before { background: var(--color-hybrid); }

        .reading .essaybody .event-row:has(.symbolic)::after { background: var(--color-symbolic); }
        .reading .essaybody .event-row:has(.neural)::after { background: var(--color-neural); }
        .reading .essaybody .event-row:has(.unified)::after { background: var(--color-unified); }
        .reading .essaybody .event-row:has(.hybrid)::after { background: var(--color-hybrid); }

        /* ── Insight Quote ── */
        .reading .essaybody .insight-quote {
            text-align: center;
            margin: 60px 0;
            padding: 40px;
            background: var(--ink);
            border-left: 3px solid var(--rust);
            border-radius: 0 2px 2px 0;
            position: relative;
            z-index: 2;
        }

        .reading .essaybody .insight-quote blockquote {
            font-family: 'DM Serif Display', serif;
            font-size: 22px;
            font-style: italic;
            color: var(--paper);
            margin-bottom: 12px;
            line-height: 1.5;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        .reading .essaybody .insight-quote cite {
            font-family: 'Source Sans 3', sans-serif;
            font-size: 13px;
            color: rgba(247, 245, 242, 0.6);
            font-style: normal;
        }

        /* ── Divergence Section ── */
        .reading .essaybody .divergence-section {
            position: relative;
            margin: 80px 0;
            padding: 40px 0;
        }

        .reading .essaybody .divergence-visual {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            position: relative;
        }

        .reading .essaybody .divergence-visual::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 40px;
            background: var(--rust);
        }

        .reading .essaybody .divergence-visual::after {
            content: '';
            position: absolute;
            top: 40px;
            left: 18%;
            right: 18%;
            height: 2px;
            background: linear-gradient(90deg, var(--color-symbolic), var(--rust) 50%, var(--color-neural));
        }

        .reading .essaybody .branch {
            width: 46%;
            padding: 32px;
            border-radius: 2px;
            margin-top: 60px;
        }

        .reading .essaybody .branch.symbolic-branch {
            background: var(--color-symbolic-bg);
            border: 1px solid var(--color-symbolic-border);
            border-top: 3px solid var(--color-symbolic);
        }

        .reading .essaybody .branch.neural-branch {
            background: var(--color-neural-bg);
            border: 1px solid var(--color-neural-border);
            border-top: 3px solid var(--color-neural);
        }

        .reading .essaybody .branch-title {
            font-family: 'DM Serif Display', serif;
            font-size: 24px;
            font-weight: 400;
            margin-bottom: 6px;
        }

        .reading .essaybody .symbolic-branch .branch-title { color: var(--paper); }
        .reading .essaybody .neural-branch .branch-title { color: var(--paper); }

        .reading .essaybody .branch-subtitle {
            font-size: 13px;
            color: rgba(247, 245, 242, 0.6);
            margin-bottom: 24px;
        }

        .reading .essaybody .branch-items {
            list-style: none;
        }

        .reading .essaybody .branch-items li {
            padding: 10px 0;
            border-bottom: 1px solid rgba(247, 245, 242, 0.15);
            font-size: 14px;
            color: rgba(247, 245, 242, 0.6);
            line-height: 1.6;
        }

        .reading .essaybody .branch-items li:last-child {
            border-bottom: none;
        }

        .reading .essaybody .branch-items li strong {
            color: var(--paper);
            font-weight: 500;
        }

        /* ── Convergence Section (Light) ── */
        .reading .essaybody .convergence-wrapper {
            background: var(--paper);
            padding: 80px 40px;
        }

        .reading .essaybody .convergence-section {
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
        }

        .reading .essaybody .convergence-label {
            font-size: 11px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: var(--rust);
            margin-bottom: 16px;
        }

        .reading .essaybody .convergence-title {
            font-family: 'DM Serif Display', serif;
            font-size: clamp(28px, 3.5vw, 40px);
            font-weight: 400;
            color: var(--ink);
            margin-bottom: 16px;
        }

        .reading .essaybody .convergence-subtitle {
            font-size: 16px;
            color: var(--slate);
            max-width: 600px;
            margin: 0 auto 40px;
            line-height: 1.7;
        }

        .reading .essaybody .convergence-examples {
            display: flex;
            justify-content: center;
            gap: 16px;
            flex-wrap: wrap;
        }

        .reading .essaybody .convergence-example {
            background: rgba(26, 23, 21, 0.04);
            border: 1px solid rgba(26, 26, 26, 0.15);
            border-radius: 2px;
            padding: 20px 28px;
            text-align: left;
            min-width: 180px;
        }

        .reading .essaybody .convergence-example .year {
            font-size: 11px;
            font-weight: 500;
            color: var(--rust);
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        .reading .essaybody .convergence-example .name {
            font-family: 'DM Serif Display', serif;
            font-size: 18px;
            color: var(--ink);
            margin: 4px 0;
        }

        .reading .essaybody .convergence-example .desc {
            font-size: 12px;
            color: var(--slate);
        }

        /* ── Disclaimer Note ── */
        .reading .essaybody .disclaimer-note {
            max-width: 680px;
            margin: 0 auto;
            padding: 24px 32px;
            background: rgba(247, 245, 242, 0.02);
            border: 1px solid rgba(247, 245, 242, 0.08);
            border-radius: 2px;
        }

        .reading .essaybody .disclaimer-note .note-label {
            font-family: 'JetBrains Mono', monospace;
            font-size: 10px;
            font-weight: 500;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(247, 245, 242, 0.6);
            margin-bottom: 8px;
        }

        .reading .essaybody .disclaimer-note p {
            font-size: 14px;
            line-height: 1.6;
            color: rgba(247, 245, 242, 0.6);
            margin: 0;
        }

        /* ── Footer Insight ── */
        .reading .essaybody .footer-insight-wrapper {
            background: var(--ink);
            padding: 80px 40px;
        }

        .reading .essaybody .footer-insight {
            max-width: 700px;
            margin: 0 auto;
            text-align: center;
            position: relative;
        }

        .reading .essaybody .footer-insight::before {
            content: '';
            position: absolute;
            top: -40px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 1px;
            background: var(--rust);
        }

        .reading .essaybody .footer-insight p {
            font-size: 16px;
            color: rgba(247, 245, 242, 0.6);
            line-height: 1.8;
        }

        .reading .essaybody .footer-insight strong {
            color: var(--paper);
            font-weight: 500;
        }

        .reading .essaybody .footer-insight .break {
            display: block;
            height: 20px;
        }

        /* ── Module Navigation ── */
        .reading .essaybody .module-nav {
            background: var(--ink);
            border-top: 1px solid rgba(247, 245, 242, 0.15);
            padding: 40px;
            display: flex;
            justify-content: space-between;
            max-width: 1000px;
            margin: 0 auto;
        }

        .reading .essaybody .module-nav a {
            font-size: 12px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--rust);
            text-decoration: none;
        }

        .reading .essaybody .module-nav a:hover {
            color: var(--paper);
        }

        /* ── Responsive ── */
        @media (max-width: 900px) {
            .reading .essaybody .hero { padding: 60px 24px 60px; }
            .reading .essaybody .container { padding: 0 24px; }
            .reading .essaybody .convergence-wrapper { padding: 60px 24px; }
            .reading .essaybody .footer-insight-wrapper { padding: 60px 24px; }
            .reading .essaybody .breadcrumb { padding: 20px 24px 0; }
        }

        @media (max-width: 768px) {
            .reading .essaybody .site-nav { padding: 20px; }
            .reading .essaybody .hero { padding: 48px 20px 48px; }
            .reading .essaybody .container { padding: 0 20px; }
            .reading .essaybody .legend { gap: 16px; padding: 24px 20px; }
            .reading .essaybody .breadcrumb { padding: 16px 20px 0; }

            /* Hide timeline spine on mobile */
            .reading .essaybody .timeline::before { display: none; }

            .reading .essaybody .event-row {
                flex-direction: column;
            }

            /* Hide connectors and dots on mobile */
            .reading .essaybody .event-row::before,
.reading .essaybody .event-row::after {
                display: none;
            }

            .reading .essaybody .event-card {
                width: 100% !important;
                margin: 10px 0 !important;
                text-align: left !important;
            }

            .reading .essaybody .event-card.left { text-align: left; margin-right: 0; }
            .reading .essaybody .event-card.right { margin-left: 0; }

            /* Hide placeholder cards on mobile */
            .reading .essaybody .event-card[style*="visibility: hidden"] {
                display: none;
            }

            .reading .essaybody .divergence-visual {
                flex-direction: column;
            }

            .reading .essaybody .divergence-visual::before,
.reading .essaybody .divergence-visual::after {
                display: none;
            }

            .reading .essaybody .branch {
                width: 100%;
                margin-top: 16px;
            }

            .reading .essaybody .convergence-wrapper { padding: 48px 20px; }
            .reading .essaybody .footer-insight-wrapper { padding: 48px 20px; }

            .reading .essaybody .module-nav {
                flex-direction: column;
                gap: 16px;
                padding: 32px 20px;
            }
        }

        /* ── Fade-in ── */
        .reading .essaybody .fade-in {
            opacity: 0;
            transform: translateY(16px);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }

        .reading .essaybody .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

/* Wrapper reconciliation: the source rules above derive from a full-page
   body{}, which brought a viewport min-height with it. */
.reading .essaybody { min-height: 0; overflow-x: hidden; }