/* 00 — Announcement bar (Figma 862:5385 desktop / 862:5431 mobile) */
.announce {
  /* sticks to the top alongside the header; the header sits right under it (--announce-h) */
  position: sticky;
  top: 0;
  z-index: 51;
  background: var(--brand-accent);
  color: var(--text-ink);
  height: 44px;
  padding: 12px var(--page-pad);
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.announce.is-tucked { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .announce { transition: none; } }
.announce.is-hidden { display: none; }
.announce__inner { display: flex; align-items: center; gap: 16px; }
.announce__text { margin: 0; font: 600 16px/20px var(--font); letter-spacing: -0.04em; white-space: nowrap; }
.announce__link {
  display: inline-flex; align-items: center; gap: 8px;
  font: 400 14px/18px var(--font); letter-spacing: -0.04em; color: inherit;
  text-decoration: underline; text-underline-position: from-font; white-space: nowrap;
  transition: opacity .25s ease;
}
.announce__link-short { display: none; }
.announce__link img { width: 16px; height: 16px; transition: transform .25s ease; }
.announce__link:hover img { transform: translateX(3px); }
.announce__close {
  position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full); transition: background-color .25s ease;
}
.announce__close:hover { background: rgba(8,42,28,.1); }
.announce__close img { width: 16px; height: 16px; }

/* Figma 862:5431: 32px tall, 8/16 padding, one line, 12/16 type, 16px close */
@media (max-width: 767px) {
  .announce { height: 32px; padding: 8px 40px 8px 16px; justify-content: flex-start; }
  .announce__inner { gap: 8px; min-width: 0; }
  .announce__text { font: 600 12px/16px var(--font); overflow: hidden; text-overflow: ellipsis; }
  .announce__link { font: 400 12px/16px var(--font); gap: 4px; }
  .announce__link-full { display: none; }
  .announce__link-short { display: inline; }
  .announce__link img { width: 12px; height: 12px; }
  .announce__close { right: 8px; width: 24px; height: 24px; }
}