@font-face { font-family: 'Oxanium Banner'; src: url('../fonts/oxanium/Oxanium.ttf') format('truetype'); font-weight: 200 800; font-style: normal; font-display: swap; }
.announcement-banner { display: grid; grid-template-columns: 6rem minmax(0, 1fr) 6rem; align-items: center; gap: .75rem; padding: .5rem clamp(1rem, 3vw, 2rem); background-color: #7b2116; background-image: linear-gradient(rgba(29, 8, 6, .58), rgba(29, 8, 6, .58)), url('../images/announcement-background.png'); background-position: center; background-size: cover; color: #fff8e7; border-block: 1px solid #ffc04d; font-family: 'Oxanium Banner', 'Oxanium', system-ui, sans-serif; }
.announcement-viewport { grid-column: 2; }
.announcement-viewport { display: grid; min-width: 0; overflow: hidden; }
.announcement-message { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; text-align: center; min-width: 0; min-height: 44px; font-size: 1.8rem; line-height: 1.35; overflow-wrap: anywhere; }
.announcement-message > span { width: 100%; padding-block: .65rem; }
.announcement-message[aria-hidden='true'] { visibility: hidden; pointer-events: none; }
.announcement-message a { display: block; width: 100%; padding-block: .65rem; color: inherit; text-decoration: none; font-weight: 600; }
.announcement-message a:hover { text-decoration: underline; }
.announcement-message a:focus-visible { outline: 2px solid #fff8e7; outline-offset: -2px; }
.announcement-message.is-entering { animation: announcement-enter 500ms ease-out; }
.announcement-arrow { width: 44px; min-height: 44px; justify-self: center; padding: .5rem; border: 1px solid #ffc04d; color: #fff8e7; background: rgba(29, 8, 6, .6); font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.announcement-arrow[hidden] { display: none; }
.announcement-arrow:hover { background: rgba(29, 8, 6, .85); }
.announcement-arrow:focus-visible { outline: 2px solid #fff8e7; outline-offset: 2px; }
.announcement-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 600px) {
    .announcement-banner { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: .5rem; }
}
@keyframes announcement-enter { from { transform: translateX(var(--announcement-direction, 100%)); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .announcement-message.is-entering { animation: none; } }