/* Story 4 page foundation: document layout, typography, and link roles. */

/* Story 4 presentation, scenes, and resources. */
html {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    /* clip, not hidden: hidden would make the root a scroll container and stop
       the sticky scene stages from sticking. */
    overflow-x: clip;
    scroll-behavior: smooth;
}

#four {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: var(--font-body);
}

/* Metropolis for headings, matching the other stories. */
#four :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-heading);
}

/*
 * Story prose uses the shared body-large role, like every other story. The
 * 1.125rem here was carried over from Story 4's original Inter design and
 * outlived the migration to the house Nunito Sans, leaving this the only story
 * whose paragraphs did not match the type scale.
 */
#four main p {
    color: var(--story4-text);
    font-size: var(--type-body-large-size);
    line-height: var(--type-body-large-line-height);
    letter-spacing: var(--type-body-large-letter-spacing);
}

#four main a {
    color: var(--story4-text);
    text-decoration: none;
}

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