.bv-announcement {
    --bv-announcement-display: "spalla", Georgia, "Times New Roman", serif;
    --bv-announcement-text: "trust-1a", "Helvetica Neue", Arial, sans-serif;
    align-items: center;
    background:
        linear-gradient(115deg, rgb(255 255 255 / 5%) 0 28%, rgb(255 255 255 / 0%) 28% 64%, rgb(255 255 255 / 3%) 64%),
        #0a0a0a;
    border-bottom: 1px solid #b28637;
    box-sizing: border-box;
    color: #fff;
    column-gap: 32px;
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
    padding: 10px clamp(16px, 4vw, 48px);
    width: 100%;
}

.bv-announcement__brand {
    align-items: center;
    display: flex;
    gap: 20px;
}

/*
 * The artwork sits on textured black. Contrast removes the texture and screen
 * blending removes the black, which leaves only the gold.
 */
.bv-announcement .bv-announcement__image {
    display: block;
    filter: contrast(1.3);
    height: 48px;
    max-width: none;
    mix-blend-mode: screen;
    width: auto;
}

.bv-announcement .bv-announcement__date,
.bv-announcement .bv-metallic .bv-metallic__label {
    font-family: var(--bv-announcement-display);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.bv-announcement .bv-announcement__date {
    border-left: 1px solid #b28637;
    color: #fff;
    display: block;
    font-size: 1.5rem;
    line-height: 1.1;
    padding-left: 20px;
    white-space: nowrap;
}

.bv-announcement__text {
    display: block;
    min-width: 0;
}

.bv-announcement .bv-announcement__message {
    color: #fff;
    display: block;
    font-family: var(--bv-announcement-text);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.2;
}

.bv-announcement .bv-announcement__detail {
    color: #f5d68a;
    display: block;
    font-family: var(--bv-announcement-text);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.25;
}

.bv-announcement__action {
    display: block;
}

@media (max-width: 980px) {
    /* Right padding keeps content clear of the site's floating menu button. */
    .bv-announcement {
        column-gap: 24px;
        padding-right: 64px;
    }

    /* Logo over date, the way the artwork's lockups stack them. */
    .bv-announcement__brand {
        flex-direction: column;
        gap: 4px;
    }

    .bv-announcement .bv-announcement__date {
        border-left: 0;
        font-size: 1.25rem;
        padding-left: 0;
    }
}

@media (max-width: 640px) {
    .bv-announcement {
        column-gap: 10px;
        grid-template-areas:
            "brand brand"
            "text action";
        grid-template-columns: auto auto;
        padding: 10px 56px 10px 12px;
        row-gap: 8px;
    }

    .bv-announcement .bv-announcement__message {
        font-size: 0.9375rem;
    }

    .bv-announcement .bv-announcement__detail {
        font-size: 0.8125rem;
    }

    .bv-announcement .bv-announcement__date {
        border-left: 1px solid #b28637;
        font-size: clamp(0.9375rem, 4.6vw, 1.0625rem);
        letter-spacing: 0;
        padding-left: 12px;
    }

    .bv-announcement .bv-metallic .bv-metallic__control {
        min-height: 36px;
        min-width: 0;
        padding: 6px 14px;
    }

    /* Keeps a 44px tap target around the smaller button. */
    .bv-announcement .bv-metallic .bv-metallic__control::after {
        content: "";
        inset: -4px 0;
        position: absolute;
    }

    .bv-announcement .bv-metallic .bv-metallic__label {
        font-size: 0.875rem;
        white-space: nowrap;
    }

    .bv-announcement__brand {
        flex-direction: row;
        gap: 12px;
        grid-area: brand;
        justify-content: center;
    }

    .bv-announcement .bv-announcement__image {
        height: 40px;
    }

    /* Hug the center so the row stays one block under the logo and date. */
    .bv-announcement__text {
        grid-area: text;
        justify-self: end;
        white-space: nowrap;
    }

    .bv-announcement__action {
        grid-area: action;
        justify-self: start;
    }
}