#banner {
    background: var(--color-primary);
    color: var(--color-text-contrast);
    padding: 30px 0;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 20px;
}

/* A `.container`, so the close button lines up with the page's right edge at
   every width. The side padding keeps the centred text clear of the button. */
#banner .banner-inner {
    position: relative;
    padding: 0 3.75rem;
}

#banner a {
    color: var(--color-text-contrast);
    border-bottom: 1px solid var(--color-text-contrast);
}

/* `banner.js` sets this from <head> for a banner dismissed on an earlier visit. */
.banner-dismissed #banner {
    display: none;
}

/* The `right` is `.container`'s own padding. The glyph sits at the right of its
   box, so the × itself is what meets the page's edge; the negative margin takes
   out the font's 2px side bearing. */
.banner-close {
    position: absolute;
    top: 50%;
    right: var(--space-4);
    margin-right: -2px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
}

.banner-close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Without JS the button couldn't do anything. */
:root:not(.js-animations) .banner-close {
    display: none;
}