html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-x: clip;
    height: 100%;
}

:where(body.story-narrative) {
    /* Narrative color roles */
    --narrative-color-text: #0e1825;
    --narrative-color-page: #fff;
    --narrative-color-inverse-surface: #000;
    --narrative-color-on-inverse: #fff;
    --narrative-color-on-inverse-muted: #d4dde6;
    --narrative-color-intro-shadow: #fff;

    /*
     * Dark appearance.
     *
     * Only the reading surface and its text follow the theme. The scene roles
     * below stay black-on-white in both themes on purpose: the full-bleed
     * scenes are cinematic backdrops for illustration artwork, and inverting
     * them would invert the artwork's own contrast.
     */

    /* Stable enhanced-scene geometry */
    --narrative-viewport-height: 100vh;

    /* Shared type hierarchy */
    --narrative-type-body: var(--type-body-primary-weight) var(--type-body-large-size) / var(--type-body-large-line-height)
        var(--font-body);
    --narrative-type-dialogue: var(--type-body-primary-weight) clamp(1.125rem, 1.075rem + 0.25vw, 1.25rem) / 1.5
        var(--font-body);
    --narrative-color-episode-accent: var(--hra-dark-primary);
    --narrative-color-episode-rule: color-mix(in srgb, var(--narrative-color-on-inverse) 32%, transparent);
    --narrative-type-intro-lead: var(--type-headline-primary-weight) var(--type-headline-small-size) /
        var(--type-headline-small-line-height) var(--font-heading);
    --narrative-type-episode-title: var(--type-display-primary-weight) clamp(2rem, 5vw, var(--type-display-medium-size)) /
        1.2 var(--font-heading);
    --narrative-type-overlay: var(--type-display-emphasized-weight) clamp(2rem, 6vw, var(--type-display-large-size)) / 1.2
        var(--font-heading);
    --narrative-type-section-heading: var(--type-headline-primary-weight) clamp(1.75rem, 4vw, 2.5rem) / 1.2
        var(--font-heading);

    height: 100%;
    margin: 0;
    font: var(--narrative-type-body);
    letter-spacing: var(--type-body-large-letter-spacing);
}

:root[data-theme="dark"] :where(body.story-narrative) {
    --narrative-color-text: var(--hra-dark-on-surface);
    --narrative-color-page: var(--hra-dark-surface);
    --narrative-color-intro-shadow: var(--hra-dark-surface-container-lowest);
}

/* System-theme fallback when JavaScript is unavailable. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) :where(body.story-narrative) {
        --narrative-color-text: var(--hra-dark-on-surface);
        --narrative-color-page: var(--hra-dark-surface);
        --narrative-color-intro-shadow: var(--hra-dark-surface-container-lowest);
    }
}

@supports (height: 100svh) {
    :where(body.story-narrative) {
        --narrative-viewport-height: 100svh;
    }
}

:where(body.story-narrative) p {
    color: var(--narrative-color-text);
    font: var(--narrative-type-body);
    letter-spacing: var(--type-body-large-letter-spacing);
    text-wrap: pretty;
}

/*
 * The intro is exactly one viewport tall, so it cannot also carry a top
 * margin: the margin pushed the total to 100vh + 70px and cropped the bottom
 * of the human image below the fold. Story 5 had overridden this to 0 for
 * itself; Stories 2 and 3 never did, which is why only they were affected.
 * The fixed Menu sits above the intro and needs no reserved space here.
 */
:where(body.story-narrative) .intro {
    margin-top: 0;
}

:where(.story-narrative) .section1,
:where(.story-narrative) .section13 {
    background: var(--narrative-color-inverse-surface);
    margin: 0;
    padding: 0;
    width: 100%;
}

:where(.story-narrative) .section2 {
    margin: 0;
    padding: 0;
    width: 100%;
    height: var(--narrative-viewport-height);
    background-color: var(--narrative-color-page);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

:where(.story-narrative) .talkbubble,
:where(.story-narrative) .container,
:where(.story-narrative) .container2 {
    width: 90%;
    height: auto;
    min-height: var(--narrative-viewport-height);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--narrative-color-on-inverse);
    visibility: hidden;
    text-align: center;
    flex-direction: column;
}

:where(.story-narrative) .container {
    max-width: 52rem;
    margin-inline: auto;
    font: var(--narrative-type-intro-lead);
    letter-spacing: var(--type-headline-small-primary-letter-spacing);
    text-wrap: balance;
}

:where(.story-narrative) .container2 {
    max-width: 52rem;
    margin-inline: auto;
    font: var(--narrative-type-body);
    letter-spacing: var(--type-body-large-letter-spacing);
}

/*
 * Episode title block.
 *
 * An editorial kicker / title / deck stack on an accent rule, following the
 * pattern Story 4's splash established. It was centred flow text in which the
 * kicker, the title and the deck all read at the same weight, so the block
 * had no entry point.
 */
:where(.story-narrative) .container2.introline {
    align-items: flex-start;
    justify-content: center;
    text-align: start;
}

/*
 * The eyebrow, title and description take the full intro column and then add an
 * inline-start padding and accent border. Without border-box those sit outside
 * the declared width, so each ran past the viewport and scrolled the page
 * sideways on phones.
 */
:where(.story-narrative) .introline > :where(p, h1) {
    box-sizing: border-box;
    width: 100%;
    max-width: 42rem;
}

:where(.story-narrative) .introline > p:first-of-type {
    margin-block: 0;
    padding-inline-start: clamp(0.875rem, 2.5vw, 1.5rem);
    border-inline-start: 0.25rem solid var(--narrative-color-episode-accent);
    color: var(--narrative-color-episode-accent);
    font-family: var(--font-body);
    font-size: var(--type-body-large-size);
    font-weight: var(--type-label-emphasized-weight);
    line-height: var(--type-body-large-line-height);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

:where(.story-narrative) .introline .story-episode-title {
    padding-inline-start: clamp(0.875rem, 2.5vw, 1.5rem);
    border-inline-start: 0.25rem solid var(--narrative-color-episode-accent);
}

:where(.story-narrative) .introline .descriptionsection {
    max-width: 42rem;
    padding-block-start: 1rem;
    padding-inline-start: clamp(0.875rem, 2.5vw, 1.5rem);
    margin-top: 0;
    border-block-start: 0.125rem solid var(--narrative-color-episode-rule);
    color: var(--narrative-color-on-inverse-muted);
    font: var(--narrative-type-body);
    letter-spacing: var(--type-body-large-letter-spacing);
    opacity: 1;
    text-wrap: pretty;
}

/* The characters keep their own centred row beneath the stack. */
:where(.story-narrative) .introline .popupsection {
    margin-top: clamp(1.5rem, 5vh, 3rem);
}

/*
 * CeCe and Squiggy.
 *
 * They were positioned absolutely from opposite edges at different offsets -
 * left: 10%/top: 25% against right: 10%/top: 31% - so the pair never sat
 * level, and on phones the 20% insets plus a 22% width put them off centre.
 * A flex row centres them as a pair at every width and keeps them level, so
 * only the entrance animation stays on the images themselves.
 */
:where(.story-narrative) .popupsection {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 12vw, 8rem);
}

:where(.story-narrative) .introlineimg {
    animation: pulse-white 3.5s infinite;
}

:where(.story-narrative) .introcharcece,
:where(.story-narrative) .introcharsquiggy {
    width: min(15%, 8rem);
    height: auto;
    flex: 0 0 auto;
}

@media all and (max-width: 750px) {
    :where(.story-narrative) .popupsection {
        gap: clamp(1rem, 8vw, 3rem);
    }

    :where(.story-narrative) .introcharcece,
    :where(.story-narrative) .introcharsquiggy {
        width: min(22%, 6rem);
    }
}

@keyframes pulse-white {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

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

    :where(.story-narrative) .introlineimg {
        animation: none;
    }
}

:where(.story-narrative) .container p,
:where(.story-narrative) .container2 p {
    color: var(--narrative-color-on-inverse);
}

:where(.story-narrative) .fadeimage {
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    height: var(--narrative-viewport-height);
    width: auto;
    display: flex;
    margin: auto;
    justify-content: center;
}

:where(.story-narrative) .imagepart,
:where(.story-narrative) .imageparts:not(.outsole) {
    position: absolute;
}

:where(.story-narrative) .imagepart,
:where(.story-narrative) .imageparts svg {
    height: var(--narrative-viewport-height);
}

:where(.story-narrative) .overtext {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(80vw, 42rem);
    transform: translateX(-50%);
    z-index: 200;
    font: var(--narrative-type-overlay);
    letter-spacing: var(--type-display-large-letter-spacing);
    margin: 0;
    text-align: left;
    text-shadow: 1px 1px 2px var(--narrative-color-intro-shadow);
    text-wrap: wrap;
}

:where(.story-narrative) .narrative-telescope {
    width: 8.75rem;
}

:where(.story-narrative) .narrative-intro-copy {
    left: 1.25rem;
}

:where(.story-narrative) .story-episode-title {
    max-width: 42rem;
    margin-block: 0 1rem;
    font: var(--narrative-type-episode-title);
    letter-spacing: var(--type-display-medium-letter-spacing);
    text-wrap: balance;
}