/* TERRA ICON — Chronicle / season-aware digital codex
   Frontend intentionally contains no parchment, scroll or physical-book UI. */

.chronicle-page {
    --chronicle-bg: #050606;
    --chronicle-surface: #0b0c0c;
    --chronicle-surface-alt: #121414;
    --chronicle-accent: #c9a761;
    --chronicle-accent-secondary: #7d7565;
    --chronicle-heading: #ead8a7;
    --chronicle-text: #e6dfd2;
    --chronicle-muted: #a49d91;
    --chronicle-overlay-opacity: .70;
    --chronicle-accent-rgb: 201, 167, 97;
    --chronicle-secondary-rgb: 125, 117, 101;

    --color-gold: var(--chronicle-accent);
    --color-gold-light: var(--chronicle-heading);

    color: var(--chronicle-text);
    background: var(--chronicle-bg);
}

.chronicle-page .site-main {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: clip;
    background: var(--chronicle-bg);
}

.chronicle-page .site-glow {
    display: none;
}

/* The global site chrome follows the selected season without becoming a
   second, Chronicle-specific header. */
.chronicle-page .site-header {
    border-color: rgba(var(--chronicle-accent-rgb), .28);
    background: var(--chronicle-surface);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .22);
}

.chronicle-page .site-header .brand-name,
.chronicle-page .site-header .nav-chronicle-link {
    color: var(--chronicle-heading);
}

.chronicle-page .site-header .desktop-nav a:hover,
.chronicle-page .site-header .desktop-nav a:focus-visible,
.chronicle-page .site-header .nav-chronicle-link {
    color: var(--chronicle-accent);
}

.chronicle-page .mobile-menu {
    border-color: rgba(var(--chronicle-accent-rgb), .25);
    background: var(--chronicle-surface);
}

.chronicle-page .app-bottom-nav {
    border-color: rgba(var(--chronicle-accent-rgb), .18);
    background: var(--chronicle-surface);
}

.chronicle-codex {
    position: relative;
    min-height: 100vh;
    color: var(--chronicle-text);
    background:
        radial-gradient(circle at 50% 12%, rgba(var(--chronicle-secondary-rgb), .08), transparent 34%),
        var(--chronicle-bg);
    isolation: isolate;
}

.chronicle-status-bar {
    position: relative;
    z-index: 20;
    display: flex;
    width: min(1180px, calc(100% - 32px));
    margin: 16px auto 0;
    padding: 12px 16px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid rgba(var(--chronicle-accent-rgb), .36);
    border-radius: 14px;
    color: var(--chronicle-text);
    background: var(--chronicle-surface-alt);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
}

.chronicle-status-bar div {
    display: grid;
    gap: 2px;
}

.chronicle-status-bar strong {
    color: var(--chronicle-heading);
}

.chronicle-status-bar span {
    color: var(--chronicle-muted);
    font-size: 13px;
}

.chronicle-status-bar a {
    color: var(--chronicle-accent);
    font-weight: 800;
    text-decoration: none;
}

.chronicle-stage {
    position: relative;
    min-height: 100vh;
    padding: clamp(56px, 7vw, 104px) 0 clamp(112px, 9vw, 156px);
    background: var(--chronicle-bg);
}

.chronicle-stage__media {
    position: absolute;
    inset: 0 0 auto;
    z-index: -4;
    display: block;
    width: 100%;
    height: clamp(620px, 78vh, 860px);
    overflow: hidden;
    pointer-events: none;
}

.chronicle-stage__media::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 48%,
        var(--chronicle-bg) 100%
    );
    content: '';
}

.chronicle-stage__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.chronicle-stage__veil {
    position: absolute;
    inset: 0 0 auto;
    z-index: -3;
    height: clamp(620px, 78vh, 860px);
    background: var(--chronicle-bg);
    opacity: var(--chronicle-overlay-opacity);
    pointer-events: none;
}

.chronicle-stage__accent {
    position: absolute;
    inset: 0 0 auto;
    z-index: -2;
    height: clamp(620px, 78vh, 860px);
    opacity: .7;
    background:
        radial-gradient(circle at 50% 24%, rgba(var(--chronicle-accent-rgb), .12), transparent 26%),
        linear-gradient(90deg, rgba(var(--chronicle-secondary-rgb), .07), transparent 28% 72%, rgba(var(--chronicle-secondary-rgb), .07));
    pointer-events: none;
}

.chronicle-theme-amazons .chronicle-stage__accent {
    background:
        radial-gradient(circle at 50% 22%, rgba(var(--chronicle-accent-rgb), .14), transparent 24%),
        radial-gradient(circle at 12% 56%, rgba(var(--chronicle-secondary-rgb), .12), transparent 24%),
        radial-gradient(circle at 88% 44%, rgba(var(--chronicle-secondary-rgb), .09), transparent 25%);
}

.chronicle-theme-daughters-of-nile .chronicle-stage__accent {
    background:
        linear-gradient(90deg, transparent 8%, rgba(var(--chronicle-accent-rgb), .05) 8.2% 8.4%, transparent 8.6% 91.4%, rgba(var(--chronicle-accent-rgb), .05) 91.6% 91.8%, transparent 92%),
        radial-gradient(circle at 50% 20%, rgba(var(--chronicle-accent-rgb), .13), transparent 22%),
        radial-gradient(circle at 50% 55%, rgba(var(--chronicle-secondary-rgb), .11), transparent 32%);
}

.chronicle-shell {
    position: relative;
    z-index: 2;
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.chronicle-heading {
    display: grid;
    max-width: 900px;
    margin: 0 auto clamp(36px, 4.8vw, 58px);
    justify-items: center;
    text-align: center;
}

.chronicle-heading__section,
.chronicle-heading__season,
.chronicle-story__source,
.chronicle-story__chapter-number {
    margin: 0;
    color: var(--chronicle-accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .32em;
    text-transform: uppercase;
}

.chronicle-heading__section {
    margin-bottom: 13px;
    color: var(--chronicle-heading);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 14px;
    letter-spacing: .38em;
    text-indent: .38em;
}

.chronicle-heading__mark {
    position: relative;
    display: block;
    width: 124px;
    height: 14px;
    margin: 18px 0 20px;
}

.chronicle-heading__mark::before,
.chronicle-heading__mark::after {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 1px;
    background: var(--chronicle-accent);
    opacity: .58;
    content: '';
}

.chronicle-heading__mark::before { left: 0; }
.chronicle-heading__mark::after { right: 0; }

.chronicle-heading__mark {
    background: radial-gradient(circle, var(--chronicle-accent) 0 2px, transparent 2.5px);
}

.chronicle-heading h1 {
    max-width: 100%;
    margin: 0;
    color: var(--chronicle-heading);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(42px, 6.2vw, 80px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: .10em;
    text-indent: .10em;
    text-transform: uppercase;
    text-wrap: balance;
}

.chronicle-heading__theme {
    margin: 16px 0 0;
    color: var(--chronicle-accent);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(17px, 1.8vw, 24px);
    letter-spacing: .22em;
    text-indent: .22em;
    text-transform: uppercase;
}

.chronicle-heading__tagline {
    max-width: 680px;
    margin: 14px 0 0;
    color: var(--chronicle-muted);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(15px, 1.35vw, 18px);
    font-style: italic;
    line-height: 1.65;
}

/* Chapter navigation is intentionally horizontal rather than a large dropdown. */
.chronicle-chapters {
    display: flex;
    width: min(100%, 1040px);
    margin: 0 auto clamp(20px, 2.4vw, 30px);
    padding: 6px 2px 10px;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--chronicle-accent-rgb), .38) transparent;
}

.chronicle-chapters__item {
    display: inline-flex;
    min-width: max-content;
    min-height: 46px;
    padding: 9px 15px;
    align-items: center;
    gap: 10px;
    scroll-snap-align: center;
    border: 1px solid rgba(var(--chronicle-accent-rgb), .24);
    border-radius: 10px;
    color: var(--chronicle-muted);
    background: var(--chronicle-surface);
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.chronicle-chapters__item:hover,
.chronicle-chapters__item:focus-visible {
    border-color: rgba(var(--chronicle-accent-rgb), .62);
    color: var(--chronicle-heading);
    outline: none;
}

.chronicle-chapters__item.is-active {
    border-color: var(--chronicle-accent);
    color: var(--chronicle-heading);
    background: var(--chronicle-surface-alt);
    box-shadow: 0 0 22px rgba(var(--chronicle-accent-rgb), .08);
}

.chronicle-chapters__number {
    display: grid;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    place-items: center;
    border-right: 1px solid rgba(var(--chronicle-accent-rgb), .24);
    color: var(--chronicle-accent);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 14px;
    font-weight: 700;
}

.chronicle-chapters__title {
    max-width: 280px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Digital-codex surface: an interface panel, not a physical page. */
.chronicle-story {
    position: relative;
    width: min(100%, 1040px);
    margin: 0 auto;
    padding: clamp(52px, 5.6vw, 72px) clamp(30px, 6.4vw, 78px) clamp(66px, 7vw, 88px);
    border: 1px solid rgba(var(--chronicle-accent-rgb), .28);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(var(--chronicle-secondary-rgb), .045), transparent 260px),
        var(--chronicle-surface);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
    scroll-margin-top: 110px;
}

.chronicle-story::before,
.chronicle-story::after {
    position: absolute;
    left: 50%;
    width: 1px;
    height: 44px;
    background: linear-gradient(180deg, transparent, var(--chronicle-accent), transparent);
    opacity: .34;
    content: '';
}

.chronicle-story::before { top: -23px; }
.chronicle-story::after { bottom: -23px; }

.chronicle-story__corner {
    position: absolute;
    width: 34px;
    height: 34px;
    pointer-events: none;
}

.chronicle-story__corner::before,
.chronicle-story__corner::after {
    position: absolute;
    background: var(--chronicle-accent);
    opacity: .62;
    content: '';
}

.chronicle-story__corner::before {
    width: 28px;
    height: 1px;
}

.chronicle-story__corner::after {
    width: 1px;
    height: 28px;
}

.chronicle-story__corner--tl { top: 12px; left: 12px; }
.chronicle-story__corner--tr { top: 12px; right: 12px; transform: rotate(90deg); }
.chronicle-story__corner--br { right: 12px; bottom: 12px; transform: rotate(180deg); }
.chronicle-story__corner--bl { bottom: 12px; left: 12px; transform: rotate(270deg); }

.chronicle-story__header {
    display: grid;
    width: min(100%, 790px);
    margin: 0 auto;
    justify-items: center;
    text-align: center;
}

.chronicle-story__source {
    margin-bottom: 26px;
    color: var(--chronicle-muted);
    font-size: 10px;
    letter-spacing: .28em;
}

.chronicle-story__chapter-number {
    margin-bottom: 14px;
}

.chronicle-story__header h2 {
    margin: 0;
    color: var(--chronicle-heading);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(36px, 4.4vw, 58px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: .08em;
    text-indent: .08em;
    text-transform: uppercase;
    text-wrap: balance;
}

.chronicle-divider,
.chronicle-ending-divider {
    position: relative;
    display: block;
    width: min(220px, 60%);
    height: 13px;
    margin: 24px auto 28px;
    background: linear-gradient(90deg, transparent, rgba(var(--chronicle-accent-rgb), .65), transparent) center / 100% 1px no-repeat;
}

.chronicle-divider::after,
.chronicle-ending-divider::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border: 1px solid var(--chronicle-accent);
    background: var(--chronicle-surface);
    content: '';
    transform: translate(-50%, -50%) rotate(45deg);
}

.chronicle-story__intro {
    max-width: 720px;
    margin: 0;
    color: var(--chronicle-heading);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(19px, 1.9vw, 25px);
    font-style: italic;
    line-height: 1.72;
    text-wrap: pretty;
}

.chronicle-emblem {
    display: grid;
    width: 82px;
    height: 82px;
    margin: clamp(38px, 5vw, 62px) auto;
    place-items: center;
    border: 1px solid rgba(var(--chronicle-accent-rgb), .32);
    border-radius: 50%;
    background: var(--chronicle-surface-alt);
}

.chronicle-emblem span {
    position: relative;
    width: 30px;
    height: 30px;
    border: 1px solid var(--chronicle-accent);
    transform: rotate(45deg);
}

.chronicle-emblem span::before,
.chronicle-emblem span::after {
    position: absolute;
    inset: 7px;
    border: 1px solid var(--chronicle-accent-secondary);
    content: '';
}

.chronicle-emblem span::after {
    inset: 13px -10px;
    border-width: 1px 0 0;
    transform: rotate(-45deg);
}

.chronicle-theme-amazons .chronicle-emblem {
    border-radius: 50% 46% 50% 44%;
}

.chronicle-theme-amazons .chronicle-emblem span {
    border-radius: 70% 0 70% 0;
}

.chronicle-theme-daughters-of-nile .chronicle-emblem {
    border-radius: 4px;
    transform: rotate(45deg);
}

.chronicle-theme-daughters-of-nile .chronicle-emblem span {
    transform: rotate(0);
}

.chronicle-story__content {
    width: min(100%, 790px);
    margin: 0 auto;
    color: var(--chronicle-text);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(17.5px, 1.42vw, 20px);
    line-height: 1.84;
}

.chronicle-story__content p {
    margin: 0 0 1.4em;
    text-align: left;
    text-wrap: pretty;
}

.chronicle-story__content p:last-child {
    margin-bottom: 0;
}

.chronicle-story__content blockquote {
    position: relative;
    margin: clamp(38px, 5vw, 56px) 0;
    padding: 24px clamp(20px, 4vw, 38px);
    border: 0;
    border-left: 2px solid var(--chronicle-accent);
    color: var(--chronicle-heading);
    background: var(--chronicle-surface-alt);
    font-size: 1.08em;
    font-style: italic;
    line-height: 1.7;
}

.chronicle-story__ending {
    display: grid;
    width: min(100%, 720px);
    margin: clamp(52px, 6.5vw, 76px) auto 0;
    justify-items: center;
    text-align: center;
}

.chronicle-story__ending > p {
    max-width: 700px;
    margin: 0;
    color: var(--chronicle-heading);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(21px, 2.25vw, 30px);
    font-style: italic;
    line-height: 1.55;
    text-wrap: balance;
}

.chronicle-ending-divider {
    width: min(250px, 62%);
    margin: 0 auto 26px;
}

.chronicle-ending-divider--reverse {
    margin: 26px auto 0;
}

.chronicle-story__terra-mark {
    width: 48px;
    height: auto;
    margin-top: 34px;
    opacity: .68;
}

.chronicle-story__action {
    display: inline-flex;
    min-height: 46px;
    margin-top: 26px;
    padding: 11px 24px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--chronicle-accent);
    border-radius: 9px;
    color: var(--chronicle-heading);
    background: transparent;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .16em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color .2s ease, color .2s ease;
}

.chronicle-story__action:hover,
.chronicle-story__action:focus-visible {
    color: var(--chronicle-bg);
    background: var(--chronicle-accent);
    outline: none;
}

.chronicle-empty {
    min-height: 260px;
    display: grid;
    place-items: center;
    color: var(--chronicle-muted);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 19px;
    text-align: center;
}

@media (max-width: 900px) {
    .chronicle-stage {
        padding-top: 52px;
    }

    .chronicle-shell {
        width: min(100% - 28px, 1180px);
    }

    .chronicle-heading {
        margin-bottom: 38px;
    }

    .chronicle-heading h1 {
        letter-spacing: .09em;
        text-indent: .09em;
    }

    .chronicle-story {
        padding: 46px 34px 60px;
    }
}

@media (max-width: 699px) {
    .chronicle-page .site-main {
        padding-bottom: 78px;
    }

    .chronicle-status-bar {
        width: calc(100% - 24px);
        margin-top: 10px;
        padding: 11px 12px;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .chronicle-stage {
        min-height: auto;
        padding: 42px 0 84px;
    }

    .chronicle-stage__media,
    .chronicle-stage__veil,
    .chronicle-stage__accent {
        height: min(690px, 80vh);
    }

    .chronicle-stage__media img {
        object-position: center top;
    }

    .chronicle-shell {
        width: calc(100% - 24px);
    }

    .chronicle-heading {
        margin-bottom: 28px;
    }

    .chronicle-heading__season,
    .chronicle-story__chapter-number {
        font-size: 10px;
        letter-spacing: .24em;
    }

    .chronicle-heading__mark {
        margin: 14px 0 17px;
    }

    .chronicle-heading h1 {
        font-size: clamp(32px, 9.8vw, 48px);
        line-height: 1;
        letter-spacing: .055em;
        text-indent: .055em;
    }

    .chronicle-heading__theme {
        margin-top: 15px;
        font-size: clamp(15px, 4.5vw, 20px);
        letter-spacing: .16em;
        text-indent: .16em;
    }

    .chronicle-heading__tagline {
        margin-top: 13px;
        font-size: 14.5px;
        line-height: 1.55;
    }

    .chronicle-chapters {
        width: calc(100% + 24px);
        margin-left: -12px;
        padding: 4px 12px 10px;
        gap: 8px;
        scrollbar-width: none;
    }

    .chronicle-chapters::-webkit-scrollbar {
        display: none;
    }

    .chronicle-chapters__item {
        min-height: 42px;
        padding: 8px 11px;
    }

    .chronicle-chapters__title {
        max-width: 180px;
        font-size: 11px;
    }

    .chronicle-story {
        padding: 36px 20px 52px;
        border-radius: 16px;
        scroll-margin-top: 92px;
    }

    .chronicle-story__corner {
        width: 26px;
        height: 26px;
    }

    .chronicle-story__corner::before { width: 22px; }
    .chronicle-story__corner::after { height: 22px; }

    .chronicle-story__source {
        margin-bottom: 26px;
        font-size: 8px;
        letter-spacing: .2em;
        line-height: 1.6;
    }

    .chronicle-story__header h2 {
        font-size: clamp(30px, 8.8vw, 42px);
        letter-spacing: .055em;
        text-indent: .055em;
    }

    .chronicle-divider {
        margin: 20px auto 23px;
    }

    .chronicle-story__intro {
        font-size: clamp(17px, 4.9vw, 21px);
        line-height: 1.68;
    }

    .chronicle-emblem {
        width: 60px;
        height: 60px;
        margin: 30px auto 34px;
    }

    .chronicle-emblem span {
        width: 24px;
        height: 24px;
    }

    .chronicle-story__content {
        font-size: clamp(16px, 4.25vw, 17.5px);
        line-height: 1.76;
    }

    .chronicle-story__content p {
        margin-bottom: 1.3em;
    }

    .chronicle-story__content blockquote {
        margin: 34px 0;
        padding: 19px 18px;
    }

    .chronicle-story__ending {
        margin-top: 48px;
    }

    .chronicle-story__ending > p {
        font-size: clamp(19px, 5.7vw, 25px);
        line-height: 1.5;
    }

    .chronicle-story__terra-mark {
        width: 42px;
    }
}

@media (max-width: 480px) {
    .chronicle-stage {
        padding-top: 38px;
    }

    .chronicle-heading__section {
        font-size: 12px;
        letter-spacing: .30em;
        text-indent: .30em;
    }

    .chronicle-story {
        box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
    }
}

@media (max-width: 430px) {
    .chronicle-shell {
        width: calc(100% - 22px);
    }

    .chronicle-heading h1 {
        font-size: clamp(31px, 9.4vw, 42px);
        letter-spacing: .045em;
        text-indent: .045em;
    }

    .chronicle-heading__tagline {
        max-width: 340px;
    }

    .chronicle-story {
        padding-right: 18px;
        padding-left: 18px;
    }

    .chronicle-story__corner {
        transform: scale(.88);
        transform-origin: center;
    }

    .chronicle-chapters__title {
        max-width: 156px;
    }
}

@media (max-width: 390px) {
    .chronicle-heading__theme {
        letter-spacing: .12em;
        text-indent: .12em;
    }

    .chronicle-story__source {
        letter-spacing: .16em;
    }

    .chronicle-chapters__item {
        gap: 8px;
    }
}

@media (max-width: 360px) {
    .chronicle-shell {
        width: calc(100% - 18px);
    }

    .chronicle-heading h1 {
        font-size: clamp(29px, 9vw, 38px);
    }

    .chronicle-story {
        padding-right: 16px;
        padding-left: 16px;
    }

    .chronicle-chapters__title {
        max-width: 142px;
    }
}

@media (max-width: 320px) {
    .chronicle-shell {
        width: calc(100% - 16px);
    }

    .chronicle-heading {
        margin-bottom: 24px;
    }

    .chronicle-heading__section {
        font-size: 11px;
    }

    .chronicle-heading h1 {
        font-size: 28px;
    }

    .chronicle-chapters {
        width: calc(100% + 16px);
        margin-left: -8px;
        padding-right: 8px;
        padding-left: 8px;
    }

    .chronicle-chapters__item {
        min-height: 40px;
        padding: 7px 9px;
    }

    .chronicle-chapters__title {
        max-width: 126px;
        font-size: 10px;
    }

    .chronicle-story {
        padding: 32px 14px 46px;
    }

    .chronicle-story__header h2 {
        font-size: 28px;
    }

    .chronicle-story__intro {
        font-size: 17px;
    }

    .chronicle-story__content {
        font-size: 16px;
        line-height: 1.74;
    }
}


/* Stage 4 final layout safeguards. */
.chronicle-heading,
.chronicle-heading h1,
.chronicle-heading__theme,
.chronicle-heading__tagline,
.chronicle-story,
.chronicle-story__header,
.chronicle-story__content {
    min-width: 0;
    max-width: 100%;
}

.chronicle-stage__media img {
    contain: paint;
}

.chronicle-story__content img,
.chronicle-story__content video,
.chronicle-story__content iframe {
    max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .chronicle-chapters,
    .chronicle-chapters__item,
    .chronicle-story__action {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

@media print {
    .chronicle-page .site-header,
    .chronicle-page .app-bottom-nav,
    .chronicle-chapters,
    .chronicle-status-bar,
    .chronicle-stage__media,
    .chronicle-stage__veil,
    .chronicle-stage__accent,
    .chronicle-story__action {
        display: none !important;
    }

    .chronicle-page,
    .chronicle-page .site-main,
    .chronicle-codex,
    .chronicle-stage,
    .chronicle-story {
        color: #111 !important;
        background: #fff !important;
    }

    .chronicle-story {
        border: 0;
        box-shadow: none;
    }
}

/* ========================================================================
   Redesign Stage 3 — premium theme refinement
   One semantic layout, stronger visual identity per season without heavy JS.
   ======================================================================== */

.chronicle-heading {
    max-width: 980px;
}

.chronicle-heading h1,
.chronicle-story__header h2 {
    overflow-wrap: anywhere;
}

.chronicle-chapters {
    width: min(100%, 1080px);
    justify-content: safe center;
    scroll-padding-inline: 24px;
}

.chronicle-chapters__item {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.chronicle-chapters__item::after {
    position: absolute;
    right: 12px;
    bottom: 5px;
    left: 12px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--chronicle-accent-rgb), .35), transparent);
    opacity: 0;
    content: '';
    transition: opacity .2s ease;
}

.chronicle-chapters__item.is-active::after,
.chronicle-chapters__item:hover::after,
.chronicle-chapters__item:focus-visible::after {
    opacity: 1;
}

.chronicle-story {
    width: min(100%, 1020px);
    overflow: hidden;
}

.chronicle-story__content {
    width: min(100%, 760px);
}

.chronicle-story__content p {
    hanging-punctuation: first last;
}

/* AMAZON preset — organic, restrained, warrior / forest character. */
.chronicle-theme-amazons .chronicle-stage__accent {
    opacity: .78;
    background:
        radial-gradient(ellipse at 9% 32%, rgba(var(--chronicle-secondary-rgb), .13), transparent 22%),
        radial-gradient(ellipse at 91% 42%, rgba(var(--chronicle-secondary-rgb), .10), transparent 24%),
        radial-gradient(circle at 50% 18%, rgba(var(--chronicle-accent-rgb), .14), transparent 24%);
}

.chronicle-theme-amazons .chronicle-heading__mark {
    width: 148px;
    background:
        linear-gradient(90deg, transparent 0 7%, rgba(var(--chronicle-accent-rgb), .55) 7% 39%, transparent 39% 61%, rgba(var(--chronicle-accent-rgb), .55) 61% 93%, transparent 93%) center / 100% 1px no-repeat,
        radial-gradient(ellipse at 47% 50%, var(--chronicle-accent) 0 3px, transparent 3.5px),
        radial-gradient(ellipse at 53% 50%, var(--chronicle-accent-secondary) 0 3px, transparent 3.5px);
}

.chronicle-theme-amazons .chronicle-heading__mark::before,
.chronicle-theme-amazons .chronicle-heading__mark::after {
    display: none;
}

.chronicle-theme-amazons .chronicle-chapters__item {
    border-radius: 12px 4px 12px 4px;
    background:
        linear-gradient(135deg, rgba(var(--chronicle-secondary-rgb), .05), transparent 45%),
        var(--chronicle-surface);
}

.chronicle-theme-amazons .chronicle-chapters__item.is-active {
    background:
        linear-gradient(135deg, rgba(var(--chronicle-secondary-rgb), .14), transparent 48%),
        var(--chronicle-surface-alt);
}

.chronicle-theme-amazons .chronicle-story {
    border-radius: 24px 8px 24px 8px;
    background:
        radial-gradient(ellipse at 4% 8%, rgba(var(--chronicle-secondary-rgb), .09), transparent 22%),
        radial-gradient(ellipse at 96% 92%, rgba(var(--chronicle-secondary-rgb), .07), transparent 25%),
        linear-gradient(180deg, rgba(var(--chronicle-accent-rgb), .025), transparent 240px),
        var(--chronicle-surface);
}

.chronicle-theme-amazons .chronicle-story__corner::before,
.chronicle-theme-amazons .chronicle-story__corner::after {
    opacity: .72;
}

.chronicle-theme-amazons .chronicle-story__corner::before {
    clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%);
}

.chronicle-theme-amazons .chronicle-emblem {
    border-radius: 50% 43% 50% 43%;
    background:
        radial-gradient(circle, rgba(var(--chronicle-secondary-rgb), .12), transparent 64%),
        var(--chronicle-surface-alt);
    transform: rotate(-5deg);
}

.chronicle-theme-amazons .chronicle-emblem span {
    width: 20px;
    height: 38px;
    border: 1px solid var(--chronicle-accent);
    border-radius: 100% 0 100% 0;
    transform: rotate(38deg);
}

.chronicle-theme-amazons .chronicle-emblem span::before {
    inset: 3px 8px 3px 9px;
    border: 0;
    border-left: 1px solid var(--chronicle-accent-secondary);
}

.chronicle-theme-amazons .chronicle-emblem span::after {
    inset: 18px -12px auto 4px;
    width: 28px;
    height: 1px;
    border: 0;
    background: var(--chronicle-accent);
    transform: rotate(-38deg);
}

/* DAUGHTERS OF NILE preset — temple geometry, sun disk, gold + Nile blue. */
.chronicle-theme-daughters-of-nile .chronicle-stage__accent {
    opacity: .82;
    background:
        linear-gradient(90deg,
            transparent 7.7%, rgba(var(--chronicle-accent-rgb), .07) 7.8% 8%, transparent 8.1% 91.9%,
            rgba(var(--chronicle-accent-rgb), .07) 92% 92.2%, transparent 92.3%),
        radial-gradient(circle at 50% 18%, rgba(var(--chronicle-accent-rgb), .17), transparent 20%),
        radial-gradient(ellipse at 50% 48%, rgba(var(--chronicle-secondary-rgb), .13), transparent 34%);
}

.chronicle-theme-daughters-of-nile .chronicle-heading__mark {
    width: 156px;
    height: 18px;
    background:
        radial-gradient(circle at 50% 50%, var(--chronicle-accent) 0 5px, transparent 5.5px),
        linear-gradient(90deg, transparent, rgba(var(--chronicle-accent-rgb), .62) 25% 44%, transparent 44% 56%, rgba(var(--chronicle-accent-rgb), .62) 56% 75%, transparent) center / 100% 1px no-repeat;
}

.chronicle-theme-daughters-of-nile .chronicle-heading__mark::before,
.chronicle-theme-daughters-of-nile .chronicle-heading__mark::after {
    top: 2px;
    width: 12px;
    height: 12px;
    border: 1px solid var(--chronicle-accent-secondary);
    background: transparent;
    opacity: .75;
    transform: rotate(45deg);
}

.chronicle-theme-daughters-of-nile .chronicle-heading__mark::before { left: 21px; }
.chronicle-theme-daughters-of-nile .chronicle-heading__mark::after { right: 21px; }

.chronicle-theme-daughters-of-nile .chronicle-chapters__item {
    border-radius: 2px;
    background:
        linear-gradient(90deg, rgba(var(--chronicle-secondary-rgb), .055), transparent 32% 68%, rgba(var(--chronicle-secondary-rgb), .055)),
        var(--chronicle-surface);
}

.chronicle-theme-daughters-of-nile .chronicle-chapters__item.is-active {
    box-shadow:
        inset 0 2px 0 rgba(var(--chronicle-accent-rgb), .68),
        inset 0 -2px 0 rgba(var(--chronicle-accent-rgb), .25),
        0 0 22px rgba(var(--chronicle-secondary-rgb), .07);
}

.chronicle-theme-daughters-of-nile .chronicle-story {
    border-radius: 3px;
    background:
        linear-gradient(90deg,
            transparent 5.4%, rgba(var(--chronicle-accent-rgb), .035) 5.5% 5.65%, transparent 5.75% 94.25%,
            rgba(var(--chronicle-accent-rgb), .035) 94.35% 94.5%, transparent 94.6%),
        repeating-linear-gradient(90deg, transparent 0 54px, rgba(var(--chronicle-secondary-rgb), .012) 54px 55px),
        linear-gradient(180deg, rgba(var(--chronicle-secondary-rgb), .055), transparent 260px),
        var(--chronicle-surface);
}

.chronicle-theme-daughters-of-nile .chronicle-story__corner {
    width: 42px;
    height: 42px;
}

.chronicle-theme-daughters-of-nile .chronicle-story__corner::before {
    width: 34px;
    box-shadow: 0 5px 0 -4px rgba(var(--chronicle-secondary-rgb), .75);
}

.chronicle-theme-daughters-of-nile .chronicle-story__corner::after {
    height: 34px;
    box-shadow: 5px 0 0 -4px rgba(var(--chronicle-secondary-rgb), .75);
}

.chronicle-theme-daughters-of-nile .chronicle-emblem {
    width: 88px;
    height: 88px;
    border-radius: 2px;
    background:
        radial-gradient(circle at 50% 36%, var(--chronicle-accent) 0 7px, rgba(var(--chronicle-accent-rgb), .24) 7.5px 9px, transparent 9.5px),
        linear-gradient(135deg, transparent 46%, rgba(var(--chronicle-secondary-rgb), .15) 46.5% 53.5%, transparent 54%),
        var(--chronicle-surface-alt);
    transform: rotate(45deg);
}

.chronicle-theme-daughters-of-nile .chronicle-emblem span {
    width: 32px;
    height: 23px;
    border: 0;
    border-right: 1px solid var(--chronicle-accent);
    border-bottom: 1px solid var(--chronicle-accent);
    border-left: 1px solid var(--chronicle-accent);
    transform: rotate(-45deg) translate(5px, 6px);
}

.chronicle-theme-daughters-of-nile .chronicle-emblem span::before,
.chronicle-theme-daughters-of-nile .chronicle-emblem span::after {
    top: 4px;
    bottom: auto;
    width: 13px;
    height: 19px;
    border: 1px solid var(--chronicle-accent-secondary);
    border-top: 0;
    border-radius: 0 0 90% 90%;
}

.chronicle-theme-daughters-of-nile .chronicle-emblem span::before {
    right: 16px;
    left: auto;
    transform: rotate(22deg);
}

.chronicle-theme-daughters-of-nile .chronicle-emblem span::after {
    right: 2px;
    left: auto;
    transform: rotate(-22deg);
}

/* Neutral / custom themes deliberately stay architectural and non-specific. */
.chronicle-theme-terra .chronicle-story,
.chronicle-theme-custom .chronicle-story {
    background:
        radial-gradient(circle at 50% 0, rgba(var(--chronicle-accent-rgb), .045), transparent 28%),
        var(--chronicle-surface);
}

@media (max-width: 699px) {
    .chronicle-chapters {
        justify-content: flex-start;
    }

    .chronicle-story {
        width: 100%;
    }

    .chronicle-theme-amazons .chronicle-story {
        border-radius: 18px 6px 18px 6px;
    }

    .chronicle-theme-daughters-of-nile .chronicle-story {
        background:
            linear-gradient(90deg,
                transparent 4.5%, rgba(var(--chronicle-accent-rgb), .035) 4.6% 4.8%, transparent 4.9% 95.1%,
                rgba(var(--chronicle-accent-rgb), .035) 95.2% 95.4%, transparent 95.5%),
            linear-gradient(180deg, rgba(var(--chronicle-secondary-rgb), .045), transparent 210px),
            var(--chronicle-surface);
    }

    .chronicle-theme-daughters-of-nile .chronicle-emblem {
        width: 68px;
        height: 68px;
    }
}

/* ========================================================================
   Redesign Stage 5 — chapter rail UX
   Native horizontal scrolling, compact long-title handling and predictable
   active-chapter positioning on 320–699px screens. No scroll listeners.
   ======================================================================== */

.chronicle-chapters__item {
    flex: 0 0 auto;
}

@media (max-width: 699px) {
    .chronicle-chapters {
        width: calc(100% + 24px);
        margin-right: -12px;
        margin-left: -12px;
        padding: 6px 18px 14px;
        gap: 8px;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-padding-inline: 18px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9px, #000 calc(100% - 9px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 9px, #000 calc(100% - 9px), transparent 100%);
    }

    .chronicle-chapters::-webkit-scrollbar {
        display: none;
    }

    .chronicle-chapters__item {
        max-width: min(82vw, 300px);
        min-height: 46px;
        padding: 8px 12px;
        gap: 9px;
        scroll-snap-align: center;
        scroll-margin-inline: 18px;
    }

    .chronicle-chapters__number {
        flex: 0 0 auto;
        min-width: 30px;
        height: 30px;
        padding-inline: 6px;
        font-size: 13px;
    }

    .chronicle-chapters__title {
        display: block;
        max-width: min(62vw, 220px);
        overflow: hidden;
        font-size: 11px;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* The selected chapter can use two lines, so a long title remains useful
       on touch screens instead of being reduced to a few characters. */
    .chronicle-chapters__item.is-active .chronicle-chapters__title {
        display: -webkit-box;
        overflow: hidden;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

@media (max-width: 430px) {
    .chronicle-chapters {
        width: calc(100% + 22px);
        margin-right: -11px;
        margin-left: -11px;
        padding-right: 15px;
        padding-left: 15px;
        scroll-padding-inline: 15px;
    }

    .chronicle-chapters__item {
        max-width: min(84vw, 286px);
        scroll-margin-inline: 15px;
    }

    .chronicle-chapters__title {
        max-width: min(64vw, 210px);
    }
}

@media (max-width: 390px) {
    .chronicle-chapters__item {
        max-width: 84vw;
        padding-right: 11px;
        padding-left: 10px;
    }

    .chronicle-chapters__title {
        max-width: 63vw;
        font-size: 10.5px;
    }
}

@media (max-width: 360px) {
    .chronicle-chapters {
        gap: 7px;
        padding-right: 13px;
        padding-left: 13px;
        scroll-padding-inline: 13px;
    }

    .chronicle-chapters__item {
        max-width: 86vw;
        min-height: 44px;
        padding-top: 7px;
        padding-bottom: 7px;
        scroll-margin-inline: 13px;
    }

    .chronicle-chapters__number {
        min-width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .chronicle-chapters__title {
        max-width: 64vw;
        font-size: 10px;
    }
}

@media (max-width: 320px) {
    .chronicle-chapters {
        width: calc(100% + 16px);
        margin-right: -8px;
        margin-left: -8px;
        padding-right: 11px;
        padding-left: 11px;
        scroll-padding-inline: 11px;
    }

    .chronicle-chapters__item {
        max-width: 88vw;
        min-height: 42px;
        padding: 7px 9px;
        gap: 7px;
        scroll-margin-inline: 11px;
    }

    .chronicle-chapters__number {
        min-width: 27px;
        height: 27px;
        padding-inline: 5px;
    }

    .chronicle-chapters__title {
        max-width: 65vw;
        font-size: 9.8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chronicle-chapters {
        scroll-behavior: auto;
    }
}

/* ========================================================================
   Redesign Stage 9 — visible season background + immersive theme silhouettes
   The uploaded desktop/mobile background now sits inside the stage stacking
   context instead of behind the opaque stage background. Story silhouettes
   are lightweight SVG masks and never intercept pointer events or scrolling.
   ======================================================================== */

.chronicle-page {
    --chronicle-surface-rgb: 11, 12, 12;
    --chronicle-decor-opacity: .06;
}

.chronicle-stage {
    isolation: isolate;
    background: transparent;
}

.chronicle-stage__media {
    z-index: 0;
}

.chronicle-stage__veil {
    z-index: 1;
}

.chronicle-stage__accent {
    z-index: 2;
}

.chronicle-shell {
    z-index: 3;
}

/* Keep the photograph visible, but let it dissolve naturally into the
   season colour before the long-form text continues. */
.chronicle-stage__media::after {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 42%,
        rgba(var(--chronicle-surface-rgb), .22) 63%,
        var(--chronicle-bg) 100%
    );
}

/* A slightly translucent digital surface lets the season atmosphere breathe
   through near the top while preserving high text contrast. */
.chronicle-story {
    background-color: rgba(var(--chronicle-surface-rgb), .965);
}

.chronicle-story__atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    opacity: var(--chronicle-decor-opacity);
    pointer-events: none;
    user-select: none;
}

.chronicle-story__silhouette,
.chronicle-story__haze {
    position: absolute;
    display: block;
    pointer-events: none;
}

.chronicle-story__silhouette {
    background: linear-gradient(
        180deg,
        var(--chronicle-accent),
        var(--chronicle-accent-secondary)
    );
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.chronicle-story__haze {
    inset: 0;
    background:
        radial-gradient(circle at 8% 31%, rgba(var(--chronicle-secondary-rgb), .32), transparent 23%),
        radial-gradient(circle at 91% 69%, rgba(var(--chronicle-accent-rgb), .23), transparent 27%);
}

.chronicle-story__header,
.chronicle-emblem,
.chronicle-story__content,
.chronicle-story__ending,
.chronicle-empty {
    position: relative;
    z-index: 2;
}

.chronicle-story__corner {
    z-index: 3;
}

/* AMAZON season: warrior and shield/spear forms stay in the side gutters,
   so the 760px reading column remains visually clean. */
.chronicle-theme-amazons .chronicle-story__silhouette--primary {
    top: 14%;
    left: -20px;
    width: 190px;
    height: 470px;
    -webkit-mask-image: url('/assets/images/chronicle/themes/amazons/warrior.svg');
    mask-image: url('/assets/images/chronicle/themes/amazons/warrior.svg');
}

.chronicle-theme-amazons .chronicle-story__silhouette--secondary {
    right: -46px;
    bottom: 10%;
    width: 255px;
    height: 255px;
    -webkit-mask-image: url('/assets/images/chronicle/themes/amazons/shield-spear.svg');
    mask-image: url('/assets/images/chronicle/themes/amazons/shield-spear.svg');
    transform: rotate(-8deg);
}

/* Daughters of Nile: pyramids sit low like a horizon; Anubis remains a faint
   vertical guardian at the outer edge rather than behind the paragraph text. */
.chronicle-theme-daughters-of-nile .chronicle-story__silhouette--primary {
    right: -18px;
    bottom: 3%;
    width: 62%;
    height: 310px;
    background: var(--chronicle-accent-secondary);
    -webkit-mask-image: url('/assets/images/chronicle/themes/daughters-of-nile/pyramids.svg');
    mask-image: url('/assets/images/chronicle/themes/daughters-of-nile/pyramids.svg');
}

.chronicle-theme-daughters-of-nile .chronicle-story__silhouette--secondary {
    top: 16%;
    left: -28px;
    width: 170px;
    height: 420px;
    background: linear-gradient(180deg, var(--chronicle-accent), var(--chronicle-accent-secondary));
    -webkit-mask-image: url('/assets/images/chronicle/themes/daughters-of-nile/anubis.svg');
    mask-image: url('/assets/images/chronicle/themes/daughters-of-nile/anubis.svg');
}

/* Neutral/custom themes keep only the subtle ambient haze. */
.chronicle-theme-terra .chronicle-story__silhouette,
.chronicle-theme-custom .chronicle-story__silhouette {
    display: none;
}

@media (max-width: 900px) {
    .chronicle-theme-amazons .chronicle-story__silhouette--primary {
        left: -50px;
        width: 165px;
        height: 420px;
    }

    .chronicle-theme-amazons .chronicle-story__silhouette--secondary {
        right: -72px;
        width: 220px;
        height: 220px;
    }

    .chronicle-theme-daughters-of-nile .chronicle-story__silhouette--secondary {
        left: -55px;
        width: 145px;
        height: 360px;
    }
}

@media (max-width: 699px) {
    /* On phones the uploaded mobile image remains visible behind the heading.
       The story itself stays darker for maximum readability. */
    .chronicle-stage__media::after {
        background: linear-gradient(
            180deg,
            transparent 0%,
            transparent 38%,
            rgba(var(--chronicle-surface-rgb), .28) 63%,
            var(--chronicle-bg) 100%
        );
    }

    .chronicle-story {
        background-color: rgba(var(--chronicle-surface-rgb), .982);
    }

    .chronicle-story__atmosphere {
        opacity: var(--chronicle-decor-opacity);
    }

    .chronicle-theme-amazons .chronicle-story__silhouette--primary {
        top: 17%;
        left: -69px;
        width: 135px;
        height: 350px;
    }

    .chronicle-theme-amazons .chronicle-story__silhouette--secondary {
        right: -72px;
        bottom: 8%;
        width: 180px;
        height: 180px;
    }

    .chronicle-theme-daughters-of-nile .chronicle-story__silhouette--primary {
        right: -28px;
        bottom: 3%;
        width: 78%;
        height: 215px;
    }

    .chronicle-theme-daughters-of-nile .chronicle-story__silhouette--secondary {
        top: 17%;
        left: -58px;
        width: 118px;
        height: 300px;
    }

    .chronicle-story__haze {
        background:
            radial-gradient(circle at 5% 28%, rgba(var(--chronicle-secondary-rgb), .25), transparent 18%),
            radial-gradient(circle at 96% 74%, rgba(var(--chronicle-accent-rgb), .18), transparent 22%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chronicle-story__atmosphere,
    .chronicle-story__silhouette,
    .chronicle-story__haze {
        transition: none !important;
        animation: none !important;
    }
}

/* ========================================================================
   Redesign Stage 10 — viewport-level season background + seamless fade
   The season artwork now begins at the very top of the document, behind the
   global site header. It scrolls normally with the page and dissolves into
   the selected season background before the long-form chapter continues.
   Long-form paragraph alignment intentionally remains LEFT aligned.
   ======================================================================== */

.chronicle-page {
    position: relative;
    min-height: 100%;
    overflow-x: clip;
    background: var(--chronicle-bg);
}

/* The backdrop is a direct child of <body>, so it is no longer constrained by
   the start of .site-main / .chronicle-stage. This removes the hard dark band
   above the uploaded season image. */
.chronicle-page-backdrop {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 0;
    height: clamp(900px, 112svh, 1260px);
    overflow: hidden;
    background: var(--chronicle-bg);
    pointer-events: none;
    user-select: none;
}

.chronicle-page-backdrop__media,
.chronicle-page-backdrop__media img,
.chronicle-page-backdrop__veil,
.chronicle-page-backdrop__fade {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.chronicle-page-backdrop__media img {
    object-fit: cover;
    object-position: center top;
}

/* Existing admin slider still controls the darkness of the photograph. */
.chronicle-page-backdrop__veil {
    z-index: 1;
    background: var(--chronicle-bg);
    opacity: var(--chronicle-overlay-opacity);
}

/* Wide dissolve instead of a visible horizontal image boundary. The final
   20–25% is already the exact season background colour. */
.chronicle-page-backdrop__fade {
    z-index: 2;
    background:
        linear-gradient(
            180deg,
            transparent 0%,
            transparent 48%,
            rgba(0, 0, 0, .06) 58%,
            color-mix(in srgb, var(--chronicle-bg) 28%, transparent) 68%,
            color-mix(in srgb, var(--chronicle-bg) 72%, transparent) 82%,
            var(--chronicle-bg) 100%
        ),
        radial-gradient(
            ellipse at 50% 26%,
            transparent 0 48%,
            color-mix(in srgb, var(--chronicle-bg) 22%, transparent) 72%,
            transparent 100%
        );
}

/* All actual interface layers stay above the backdrop. */
.chronicle-page .site-main {
    position: relative;
    z-index: 1;
    background: transparent;
}

.chronicle-page .site-header {
    background: rgba(var(--chronicle-surface-rgb), .90);
}

.chronicle-codex,
.chronicle-stage {
    background: transparent;
}

/* Stage 9's old local media/veil are no longer rendered by show.php. Keep
   these defensive rules so stale cached markup cannot create a second image. */
.chronicle-stage__media,
.chronicle-stage__veil {
    display: none !important;
}

/* Theme accent stays local to the Chronicle content, but the fade itself is
   now handled by the body-level backdrop. */
.chronicle-stage__accent {
    height: clamp(620px, 78vh, 860px);
}

/* Explicitly preserve readable book-style paragraph alignment requested for
   long chapters. Intro/ending may remain centred by their existing design. */
.chronicle-story__content,
.chronicle-story__content p {
    text-align: left;
}

@media (max-width: 699px) {
    .chronicle-page-backdrop {
        height: clamp(780px, 110svh, 1040px);
    }

    .chronicle-page-backdrop__media img {
        object-position: center top;
    }

    .chronicle-page-backdrop__fade {
        background: linear-gradient(
            180deg,
            transparent 0%,
            transparent 42%,
            rgba(0, 0, 0, .05) 54%,
            color-mix(in srgb, var(--chronicle-bg) 34%, transparent) 66%,
            color-mix(in srgb, var(--chronicle-bg) 78%, transparent) 84%,
            var(--chronicle-bg) 100%
        );
    }

    /* The mobile header remains slightly denser for contrast while the image
       is now visible in the safe-area/top gutters around it. */
    .chronicle-page .site-header {
        background: rgba(var(--chronicle-surface-rgb), .94);
    }
}

/* Graceful fallback for browsers without color-mix(). */
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .chronicle-page-backdrop__fade {
        background: linear-gradient(
            180deg,
            transparent 0%,
            transparent 48%,
            rgba(0, 0, 0, .10) 62%,
            var(--chronicle-bg) 100%
        );
    }

    @media (max-width: 699px) {
        .chronicle-page-backdrop__fade {
            background: linear-gradient(
                180deg,
                transparent 0%,
                transparent 42%,
                rgba(0, 0, 0, .10) 60%,
                var(--chronicle-bg) 100%
            );
        }
    }
}

/* ========================================================================
   Chronicle redesign · Stage 11 — safe rich text + inline chapter images
   ======================================================================== */
.chronicle-richtext h3 {
    margin: clamp(34px, 4.5vw, 48px) 0 18px;
    color: var(--chronicle-heading);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(20px, 1.9vw, 25px);
    font-weight: 600;
    line-height: 1.45;
}

.chronicle-richtext strong {
    color: var(--chronicle-heading);
    font-weight: 700;
}

.chronicle-richtext ul,
.chronicle-richtext ol {
    margin: 0 0 1.45em;
    padding-left: 1.55em;
}

.chronicle-richtext li {
    margin: .35em 0;
    padding-left: .15em;
}

.chronicle-richtext hr {
    width: min(100%, 300px);
    height: 1px;
    margin: clamp(38px, 5vw, 58px) auto;
    border: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(var(--chronicle-accent-rgb), .58),
        transparent
    );
}

.chronicle-richtext img {
    display: block;
    width: auto;
    max-width: min(100%, 760px);
    max-height: min(72vh, 760px);
    margin: clamp(30px, 5vw, 52px) auto;
    border: 1px solid rgba(var(--chronicle-accent-rgb), .34);
    border-radius: 4px;
    object-fit: contain;
    background: rgba(var(--chronicle-surface-rgb), .3);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .24);
}

.chronicle-theme-amazons .chronicle-richtext img {
    border-radius: 12px 4px 12px 4px;
}

.chronicle-theme-daughters-of-nile .chronicle-richtext img {
    border-radius: 2px;
    box-shadow:
        0 18px 48px rgba(0, 0, 0, .24),
        0 0 0 1px rgba(var(--chronicle-secondary-rgb), .10);
}

@media (max-width: 699px) {
    .chronicle-richtext h3 {
        margin-top: 30px;
        font-size: 19px;
    }

    .chronicle-richtext img {
        max-height: 68svh;
        margin: 26px auto 30px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, .20);
    }
}

/* ========================================================================
   Chronicle redesign · Stage 12 — figure sizes + optional captions
   ======================================================================== */
.chronicle-richtext .chronicle-media {
    display: block;
    width: 100%;
    margin: clamp(32px, 5vw, 56px) auto;
    text-align: center;
}

.chronicle-richtext .chronicle-media--compact {
    max-width: 420px;
}

.chronicle-richtext .chronicle-media--regular {
    max-width: 720px;
}

/* Wide illustrations deliberately break out of the 790px reading column on
   desktop, but remain inside the 1040px codex surface. */
.chronicle-richtext .chronicle-media--wide {
    width: min(940px, calc(100vw - 96px));
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
}

.chronicle-richtext .chronicle-media img {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: min(76vh, 860px);
    margin: 0;
    border: 1px solid rgba(var(--chronicle-accent-rgb), .34);
    border-radius: 4px;
    object-fit: contain;
    background: rgba(var(--chronicle-surface-rgb), .3);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .24);
}

.chronicle-richtext .chronicle-media figcaption {
    max-width: 680px;
    margin: 11px auto 0;
    color: var(--chronicle-muted);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 13px;
    font-style: italic;
    line-height: 1.55;
    letter-spacing: .01em;
    text-align: center;
}

.chronicle-theme-amazons .chronicle-richtext .chronicle-media img {
    border-radius: 12px 4px 12px 4px;
}

.chronicle-theme-daughters-of-nile .chronicle-richtext .chronicle-media img {
    border-radius: 2px;
    box-shadow:
        0 18px 48px rgba(0, 0, 0, .24),
        0 0 0 1px rgba(var(--chronicle-secondary-rgb), .10);
}

@media (max-width: 699px) {
    .chronicle-richtext .chronicle-media,
    .chronicle-richtext .chronicle-media--compact,
    .chronicle-richtext .chronicle-media--regular,
    .chronicle-richtext .chronicle-media--wide {
        width: 100%;
        max-width: 100%;
        margin: 28px auto 32px;
        transform: none;
    }

    .chronicle-richtext .chronicle-media--compact {
        width: min(82%, 360px);
    }

    .chronicle-richtext .chronicle-media img {
        max-height: 70svh;
        box-shadow: 0 12px 30px rgba(0, 0, 0, .20);
    }

    .chronicle-richtext .chronicle-media figcaption {
        margin-top: 8px;
        padding: 0 6px;
        font-size: 12px;
    }
}