/* index.html page */

.scenarios-figure {
    max-width: 890px;
    margin: 0;
}

.scenarios-figure figcaption {
    font-size: 1.5rem;
    font-style: italic;
    text-align: center;
    margin-top: 1em;
}

.scenarios {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
    max-width: 890px;
}

.scenarios img {
    display: block;
    width: 50%;
    height: auto;
    min-width: 0;
}

/* Stack on narrow screens
@media (max-width: 600px) {
    .scenarios {
        flex-direction: column;
    }

    .scenarios img {
        width: 100%;
    }
}
 */
 
/* Homepage headings and tagline */
.coming-soon {
    max-width: 890px;
    font-size: 1.5rem;
    font-style: italic;
    text-align: center;
    margin: 0.4em 0 2em;
}

main > h1,
.site-tagline,
.cast-directory > h2 {
    max-width: 890px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

 .site-tagline {
    font-size: 1.5rem;
    font-style: italic;
    margin: 1em 0 2em;
}

.cast-directory {
    margin: 2em 0;
}

.cast-gallery {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1.5em;
}

.cast-gallery a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4em;
    text-align: center;
    font-size: 1.2rem;
}

.cast-gallery img {
    display: block;
    width: auto;
    height: 150px;
    max-width: 100%;
    object-fit: contain;
}

.cast-gallery a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/* Individual cast member pages */

.cast-intro {
    display: flex;
    align-items: center;
    gap: 1.5em;
}

.cast-text {
    flex: 1;
    min-width: 0;
}

.cast-text h1 {
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 1em;
}

.cast-text p {
    font-size: 1.5rem;
    line-height: 1.4;
    margin: 0;
}




.cast-intro img {
    display: block;
    width: 30%;
    height: auto;
    flex-shrink: 0;
}

/* Narrow screens */
@media (max-width: 700px) {
    .cast-intro {
        flex-direction: column;
        align-items: stretch;
    }

    .cast-intro img {
        width: 70%;
        max-width: 320px;
        align-self: center;
    }
}

.back-navigation {
    font-size: 1.5rem;
}

.back-navigation a,
.back-navigation a:hover,
.back-navigation a:visited {
    text-decoration: underline;
}

.back-navigation a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}