.announcement {
  --_bg: var(--announcement-bg, var(--color-heading));
  --_fg: var(--announcement-text, var(--color-bg));
  display: block;
  background: var(--_bg);
  color: var(--_fg);
  font-size: var(--announcement-size, 14px);
  line-height: 1.3;
}
.announcement__inner {
  min-height: var(--announcement-height, 40px);
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .35rem 1.25rem;
  padding-block: .45rem;
  text-align: center;
}
.announcement { font-family: var(--font-nav); }
.announcement__message { margin: 0; font-weight: 600; letter-spacing: .04em; }
.announcement__link {
  display: inline-flex; align-items: center; gap: .4rem;
  color: inherit; text-decoration: none;
}
.announcement__link:hover .announcement__text { text-decoration: underline; text-underline-offset: 3px; }
.announcement__arrow { width: 1rem; height: 1rem; }
.announcement :focus-visible { outline-color: var(--_fg); }
.announcement__label { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; }
.announcement__countdown {
  display: inline-flex; align-items: baseline; gap: .15rem;
  padding: .2rem .9rem;
  border-radius: 999px;
  background: var(--announcement-capsule-bg, var(--_fg));
  color: var(--announcement-capsule-text, var(--_bg));
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}
.announcement__countdown[hidden], .announcement__label[hidden], .announcement__unit[hidden] { display: none; }
.announcement__unit + .announcement__unit::before {
  content: ""; display: inline-block; width: 1px; height: .9em; margin: 0 .5rem;
  background: currentColor; opacity: .35; vertical-align: -0.1em;
}
.announcement__unit b { font-size: 1.05rem; font-weight: 700; }

.announcement__text--mobile { display: none; }
@media (max-width: 749px) {
  .announcement { font-size: var(--announcement-size-m, 13px); }
  .announcement__text--desktop { display: none; }
  .announcement__text--mobile { display: inline; }
}