:where(.l3-hero) {
    /* White wave overlay (same asset as the L2 hero) over a brand-blue gradient
       running from brand blue on the left to a light sky blue on the right.
       No photo — the gradient + waves are the whole background. */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 1440 598'%3E%3Cg fill='%23fff' fill-opacity='.3'%3E%3Cpath d='M773 466C377 274 168 363 26 405c125-84 338-192 705 7 328 178 577 140 683 65 51-35 81-88 81-141 0 0 0 83-94 110-240 71-420 11-711-154-468-267-632 72-792 70-64-19-106-92-81-210 7-32 66-182 282-140 0 0-212-76-324 152-73 148 38 363 219 352 84 130 399-41 771 46l123 30c-28-10-68-23-94-35-314-132-571-66-725-64 113-36 298-111 691 21 327 109 576 121 693-19-31 34-286 162-680-29'/%3E%3Cpath d='M1481 306c-98 104-400 110-809-55 289 200 780 279 809 55'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(
            105deg,
            var(--color-brand-blue) 0%,
            color-mix(in srgb, var(--color-brand-blue) 25%, white) 100%
        );
    background-repeat: no-repeat;
    background-size: cover;
    /* Wave crop matched to the l2 hero: pushed far enough down that the curves clear the
       eyebrow and heading instead of running behind them. */
    background-position: 0 calc(70% + 30rem), center;
    color: var(--color-primary-white);
    display: grid;
    align-content: center;
    min-height: 35rem;
    max-height: 35rem;
    padding-block: var(--size-large);
    padding-inline: var(--minimum-inline-padding);

    :where(.region) {
        width: 100%;
    }

    /* Eyebrow: white pill (shrinks to content) with a bold brand-red label + muted date. */
    :where(.l3-hero-eyebrow) {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: var(--size-x-small);
        margin: 0 0 var(--size-xx-small);
        padding: var(--size-x-small) var(--size-small);
        background: var(--color-primary-white);
        font-size: var(--font-size-body);
        line-height: 1.4;
    }

    :where(.l3-hero-eyebrow-label) {
        color: var(--color-brand-red);
        font-weight: var(--font-weight-bold);
    }

    :where(.l3-hero-eyebrow-date) {
        color: var(--color-brand-dark-grey);
    }

    :where(.heading) {
        margin: 0;
        max-width: 90rem;
        color: var(--color-primary-white);

        --local-font-weight-h1: var(--font-weight-bold);
    }

    /* Measured off the concept: 24px bold in the main (non-condensed) face, 20px under the
       headline. That is the h4 scale, so take the tokens rather than restating the numbers. */
    :where(.l3-hero-subheading) {
        margin: var(--size-small) 0 0;
        max-width: 90rem;
        color: var(--color-primary-white);
        font-family: var(--font-family-h4);
        font-size: var(--font-size-h4);
        font-weight: var(--font-weight-h4);
        line-height: var(--line-height-h4);
    }
}

/* The band is capped at 35rem, and on a narrow screen a long headline wraps to four or five
   lines — there the 8rem of block padding is what pushes the content past the cap. Trim it so
   long titles still sit inside the band. A media query, not a container query: the hero is
   its own container, and a container query never matches the container it is declared on.
   In px because a media query resolves rem against the initial 16px, not the root's 10px. */
@media screen and (width <= 600px) {
    :where(.l3-hero) {
        padding-block: var(--size-medium);

        /* Even with the trimmed padding a long news or event title wraps to five lines here and
           runs past 35rem — a capped band would spill it over the breadcrumb below. Let the band
           grow on phones instead; min-height still holds it at 35rem for ordinary titles. */
        max-height: none;
    }
}