.narrative-layout {
    position: relative;
    /* Layout handled by .standard-layout .mixed-layout */
}

/* Theme-specific Narrative (High Contrast, Single Column) */
.theme-narrative-layout {
    display: block;
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 4% 6rem;
}

.theme-narrative-layout .narrative-content {
    width: 100%;
}

/* Annotations sidebar column */
.narrative-layout {
    display: grid;
    grid-template-columns: 1fr 390px;
    gap: 3rem;
    align-items: start;
}

.narrative-annotations {
    position: sticky;
    top: 120px;
    align-self: start;
    padding-top: 100px;
}

.annotation-item {
    font-family: var(--font-serif);
    font-size: var(--fs-tiny);
    line-height: var(--lh-normal);
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
    padding-left: 1.25rem;
    border-left: 2px solid var(--color-border-strong);
}

.annotation-item strong {
    display: block;
    color: var(--color-text);
    margin-bottom: 0.3rem;
    font-weight: 600;
    font-size: var(--fs-tiny);
}

.narrative-content {
    max-width: 100%;
}

.narrative-content p,
.narrative-content h2,
.narrative-content h3,
.narrative-content h4,
.narrative-content ul {
    max-width: 680px;
}

.narrative-content ul,
.narrative-content ol {
    margin-left: 1.25rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    padding-left: 0.25rem;
}

.narrative-content li {
    margin-bottom: 0.35rem;
}

.narrative-content li:last-child {
    margin-bottom: 0;
}

.narrative-content h2,
.narrative-content h3 {
    text-align: left;
    margin-bottom: 1rem;
    margin-top: 3rem;
}

.narrative-content h1 {
    margin-top: 0;
}

.narrative-content section {
    padding-bottom: 6rem;
    border-bottom: 1px solid var(--color-border-light);
}

.narrative-content section:last-of-type {
    border-bottom: none;
}

.narrative-content .hero-section {
    min-height: auto;
    border-bottom: none;
    padding-bottom: 4rem;
}

.narrative-inline-chart-frame {
    margin: 3rem 0;
    position: relative;
    width: 100%;
    height: min(70vh, 550px);
    max-width: 1000px;
    /* Slightly wider than text for visual rhythm */
}

.narrative-inline-chart {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.narrative-inline-chart-fallback {
    position: absolute;
    inset: 0;
    display: none;
}

.narrative-inline-chart-fallback img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
}

.narrative-inline-chart-frame.is-fallback .narrative-inline-chart {
    visibility: hidden;
}

.narrative-inline-chart-frame.is-fallback .narrative-inline-chart-fallback {
    display: block;
}

.page-research-all .narrative-content {
    max-width: none;
}

/* Right Column: Sticky Chart Panel */
.narrative-chart-column {
    position: sticky;
    top: 69px;
    height: calc(161vh - 40px);
    min-height: 800px;
    max-height: 1200px;
    align-self: start;
    min-width: 0;
}

/* Larger screens adjustment */
@media (min-width: 1440px) {
    .narrative-chart-column {
        height: calc(210vh - 40px);
        min-height: 1040px;
        max-height: 1560px;
    }
}

@media (min-width: 1920px) {
    .narrative-chart-column {
        height: calc(230vh - 40px);
        min-height: 1160px;
        max-height: 1760px;
    }
}

.page-home .narrative-sticky {
    margin-top: 44px;
}

/* Narrative Inline Figures (used in landing page) */
.narrative-inline-figure {
    width: 100%;
    max-width: var(--col-narrow);
    overflow: hidden;
    margin: 0 0 2rem 0;
}

.narrative-inline-figure img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 1.5rem 0;
    border-radius: 4px;
}

.narrative-inline-figure figcaption {
    font-size: var(--fs-tiny);
    color: var(--color-text-tertiary);
    font-style: italic;
}

.page-home .narrative-content {
    max-width: none;
}

.page-home .narrative-chart-column {
    height: auto;
}

.page-home .narrative-sticky {
    height: auto;
}

.page-home .narrative-chart-frame {
    height: auto;
    aspect-ratio: 1 / 1;
}

.page-home .narrative-chart {
    height: 100%;
}

.narrative-chart-caption {
    margin-top: 0.75rem;
    font-size: 0.7rem;
    line-height: 1.3;
    flex: 0 0 auto;
    text-align: left;
    padding-left: 3rem;
}

.narrative-chart-caption-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.narrative-sticky {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

.narrative-chart-frame {
    width: 100%;
    position: relative;
    height: 100%;
    flex: 1 1 auto;
    min-height: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    overflow: visible;
}

.narrative-chart {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}

.narrative-chart-fallback {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: none;
}

.narrative-chart-fallback img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
}

/* When falling back to static image, show the image ON TOP but keep the
   chart container in the flow so it retains layout dimensions.
   This prevents ECharts from initializing with offsetHeight 0. */
.narrative-chart-frame.is-fallback .narrative-chart {
    visibility: hidden;
    z-index: 1;
}

.narrative-chart-frame.is-fallback .narrative-chart-fallback {
    display: block;
    z-index: 3;
}

.chart-dock-close {
    display: none;
}

.chart-dock-reopen {
    display: none;
}

/* Mobile Responsive Overrides */
@media (max-width: 768px) {
    .narrative-layout {
        grid-template-columns: 1fr;
        max-width: 860px;
        padding-left: 2rem;
        padding-right: 2rem;
        gap: 2rem;
        padding-bottom: calc(33vh + 7rem);
    }

    .narrative-annotations {
        position: static;
        padding-top: 2rem;
        border-top: 1px solid var(--color-border-light);
    }

    .page-home .narrative-layout {
        grid-template-columns: 1fr;
        padding-left: 2rem;
        padding-right: 2rem;
        gap: 2rem;
    }

    .narrative-sidebar {
        display: none;
    }

    .narrative-chart-column {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 0;
        top: auto;
        z-index: 1200;
        background: var(--color-bg);
        border-top: 1px solid var(--color-border);
        /* Clean padding all around */
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
        height: 93vh;
        /* Slightly taller to ensure space */
        min-height: 300px;
        max-height: 1025px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    .narrative-sticky,
    .page-home .narrative-sticky {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        position: relative;
        margin-top: 0;
        /* Reset desktop margin */
        height: auto;
    }

    .narrative-chart-caption {
        order: -1;
        position: relative;
        top: auto;
        left: auto;
        margin: 0 0 12px 0;
        /* Space below title */
        padding-right: 40px;
        /* Space for close button */
        font-size: 0.475rem;
        font-weight: 400;
        text-align: left;
        width: 100%;
        line-height: normal;
        flex: 0 0 auto;
        /* Don't shrink */
    }

    /* Close Button at top-right of the sticky container */
    .chart-dock-close {
        display: inline-flex;
        position: absolute;
        right: -4px;
        /* Pull slightly to align with edge */
        top: -4px;
        /* Pull slightly to align with visual top */
        z-index: 20;
        width: 32px;
        height: 32px;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--color-border);
        background: transparent;
        border-radius: 999px;
        cursor: pointer;
        color: var(--color-text);
    }

    .narrative-chart-frame {
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;
        position: relative;
        /* Anchor for absolute chart */
        display: block;
        /* Reset flex center, let absolute positioning handle it */
    }

    /* Robust Chart Sizing: Absolute Fill */
    .narrative-chart,
    .narrative-chart-fallback {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
    }

    body.dock-closed .narrative-chart-column {
        display: none;
    }

    .chart-dock-reopen {
        display: none;
        position: fixed;
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom));
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--color-border);
        background: var(--color-bg);
        border-radius: 999px;
        cursor: pointer;
        z-index: 1300;
        color: var(--color-text);
    }

    body.dock-closed .chart-dock-reopen {
        display: inline-flex;
    }

    .page-home .narrative-chart-frame {
        aspect-ratio: auto;
    }

    .narrative-inline-chart-frame {
        height: 46vh;
        margin-top: 1rem;
    }

    .page-research-all .narrative-layout {
        grid-template-columns: 1fr;
        padding-bottom: 6rem;
    }

    /* Stack chart dock above audio player if present */
    body.has-audio-dock .narrative-chart-column {
        bottom: calc(48px + env(safe-area-inset-bottom));
        border-bottom: 1px solid var(--color-border);
        /* Add border to separate from audio player */
    }

    body.has-audio-dock .chart-dock-reopen {
        bottom: calc(64px + env(safe-area-inset-bottom));
    }
}