/* Storyteller — prologue + editorial reading screens */

#screen-prologue,
#screen-editorial-reading {
    padding: var(--st-page-pad-y) var(--st-page-pad-x) var(--st-space-7);
    align-items: flex-start;
}

/* Document scrollbar chrome is hidden via DesignSystem quiet-scroll. */

.prologue-layout {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    /* Reveal: title settles in the upper-middle, like Welcome — whitespace only */
    padding-top: clamp(72px, 16vh, 148px);
    padding-bottom: var(--st-space-6);
    text-align: left;
    animation: st-fade-in var(--st-duration-slow) var(--st-ease) both;
}

/*
 * Editorial answers already enter via .screen.is-active st-fade-in.
 * A second layout translate/fade stacked on top caused visible flicker
 * while long response HTML settled.
 */
#screen-editorial-reading .prologue-layout {
    animation: none;
}

/* Desktop Developmental Reading — same centered canvas as Read Manuscript */
@media (min-width: 1024px) {
    #screen-editorial-reading .prologue-layout.editorial-reading-layout {
        max-width: var(--st-desktop-canvas);
        margin-left: auto;
        margin-right: auto;
    }

    #screen-editorial-reading .prologue-header,
    #screen-editorial-reading .prologue-body,
    #screen-editorial-reading .prologue-footer {
        max-width: var(--st-desktop-prose);
        margin-left: auto;
        margin-right: auto;
    }

    #screen-editorial-reading .prologue-title {
        font-size: var(--st-size-title);
        font-weight: 400;
    }

    #screen-editorial-reading .prologue-paragraph {
        font-size: var(--st-size-body-lg);
        font-weight: 400;
    }
}

.prologue-header {
    margin-bottom: 56px;
}

.prologue-title {
    font-size: var(--st-size-title);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--st-text);
}

.prologue-body {
    margin-bottom: 80px;
}

.prologue-paragraph {
    font-size: var(--st-size-body-lg);
    line-height: 1.75;
    color: var(--st-text);
    font-weight: 400;
}

.prologue-paragraph + .prologue-paragraph {
    margin-top: 20px;
}

.prologue-footer {
    text-align: center;
    padding-top: var(--st-space-3);
    /* Reserve Continue height so revealing the button does not jump the page */
    min-height: calc(14px * 2 + 17px + 8px);
}

.btn-continue {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    font-size: 17px;
    padding: 14px 32px;
}

/* Hidden but space-reserved until response body is painted */
#screen-editorial-reading .btn-continue.is-response-pending {
    visibility: hidden;
}

@media (max-width: 768px) {
    .prologue-layout {
        padding-top: clamp(48px, 12vh, 96px);
    }

    .prologue-paragraph {
        font-size: 18px;
    }

    .prologue-header {
        margin-bottom: 40px;
    }

    .prologue-body {
        margin-bottom: 64px;
    }

    .prologue-footer {
        min-height: calc(14px * 2 + 16px + 8px);
    }

    .btn-continue {
        font-size: 16px;
        padding: 14px 28px;
    }
}