/* One page header for every subpage.
   Before this the site had five: the home page and the Guessing Game at a full 100vh over the
   character art, HoellStream at 503px and HoellTracker at 380px inside a blurred glass panel over
   two different images, and Story Time at 404px over nothing. Same class name, .hero, meaning
   three different things.
   Now: the home page keeps its full-viewport hero, because a landing page earns one, and every
   subpage shares this. One height, one image, one scrim, one title scale. */

.page-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
    padding: calc(var(--nav-h, 73px) + 56px) 24px 64px;
    overflow: hidden;
    text-align: center;
}

/* The image is set inline on the element, per page, because the path depends on the folder and a
   url() inside a custom property resolves against this stylesheet rather than the document. */
.page-hero-art {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 30%;
}

/* the same scrim the home page uses, so the title sits on a readable ground */
.page-hero-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(10, 10, 15, 0.55) 0%, rgba(10, 10, 15, 0.72) 60%, rgba(10, 10, 15, 0.95) 100%);
}

.page-hero .hero-content,
.page-hero > .hero-inner {
    position: relative;
    z-index: 1;
    max-width: 860px;
    margin: 0 auto;
    padding: 0;
}

/* one title scale on every subpage: three of the four were already here */
.page-hero .hero-title,
.page-hero h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 16px;
    color: var(--nx-text-primary, #f0f4ff);
}

.page-hero .hero-subtitle,
.page-hero .hero-description,
.page-hero .tagline {
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.6;
    color: var(--nx-text-secondary, #a8b2d1);
    max-width: 62ch;
    margin: 0 auto 12px;
}

.page-hero .hero-cta,
.page-hero .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
}

.page-hero .last-updated {
    margin-top: 12px;
    font-size: 0.875rem;
    color: var(--nx-text-muted, #778599);
}

@media (max-width: 768px) {
    .page-hero {
        min-height: 300px;
        padding: calc(var(--nav-h, 77px) + 40px) 20px 48px;
    }
}