/* ─── Aspen page banner ───
 * Centered H1, description and (detail pages) actions, then a shallow roof triangle (.aspen-roof in
 * global.css) rising from the bottom edge in the next section's surface. With a photo (.ocf-page-header--photo) the
 * featured image fills the banner under a charcoal shade; without one it stays cream. */
.ocf-page-header {
    position: relative;
    padding: clamp(56px, 36px + 4.7vw, 104px) 0 calc(var(--aspen-roof) + clamp(64px, 46px + 3.4vw, 96px)); /* roomier (Bennett, 10-31) */
    background: var(--aspen-bg-alt);
    color: var(--ocf-body);
    text-align: center;
}

.ocf-page-header__content { position: relative; }

/* Photo banner: the image covers the section, a charcoal shade (a touch of the primary) keeps the copy readable. */
.ocf-page-header--photo {
    isolation: isolate;
    background: var(--aspen-charcoal-deep);
    color: var(--aspen-on-dark-muted);
}

.ocf-page-header__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ocf-page-header__shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, color-mix(in srgb, var(--aspen-base) 88%, var(--ocf-primary)) 70%, transparent) 0%,
            color-mix(in srgb, color-mix(in srgb, var(--aspen-base) 88%, var(--ocf-primary)) 80%, transparent) 100%);
}

.ocf-page-header--photo .ocf-page-header__headline { color: var(--aspen-on-dark); }
.ocf-page-header--photo .ocf-page-header__subtitle { color: var(--aspen-on-dark-muted); }

.ocf-page-header__headline {
    max-width: 1000px;
    margin: 0 auto;
    font-size: var(--field-font-size, var(--font-h1-size));
}

.ocf-page-header__subtitle {
    max-width: 700px;
    margin: 22px auto 0;
    font-size: calc(var(--font-body-size) * 1.111);
}

.ocf-page-header__actions { justify-content: center; gap: 16px; margin-top: 34px; }