/* The header overlays artwork that fills the current viewport. */
.home-page > .site-header.on-home,
.home-page > main {
    grid-area: 1 / 1;
}

.home-page > .site-footer {
    grid-area: 2 / 1;
}

.home-page .hero-launch {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-height: none;
}

.hero-launch-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-launch-picture {
    display: block;
    height: 100%;
}

.hero-launch-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.home-page .hero-launch::before {
    height: clamp(96px, 12vw, 160px);
}

.hero-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 56px;
    height: 48px;
    color: #ef3829;
}

.hero-scroll-cue:hover {
    color: #ff5947;
}

.hero-scroll-cue:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/* The portrait artwork fills the mobile screen. */
@media (max-width: 650px) {
    .hero-launch-image {
        object-position: 15% center;
    }

    .home-page > .site-header.on-home {
        background: transparent;
        flex-direction: column;
        padding: 20px 12px 12px;
        gap: 12px;
    }

    .home-page .site-header .brand {
        margin-inline: auto;
    }

    .home-page .site-header .brand img {
        width: 156px;
    }

    .home-page .site-header nav a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .home-page .hero-launch::before {
        height: 210px;
    }

}