/* TV-style news ticker: titles of the last 5 notices, endless right-to-left */
.notice-ticker{display:flex;align-items:stretch;margin:0 0 36px;border-radius:999px;overflow:hidden;
  background:var(--brand);color:#fff;text-decoration:none;box-shadow:0 12px 28px -16px rgba(20,32,61,.55);}
.notice-ticker-label{flex:0 0 auto;display:flex;align-items:center;padding:0 18px 0 20px;font-weight:700;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;background:var(--gold);color:#1b1b1b;position:relative;z-index:1;}
.notice-ticker-view{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center;height:48px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);}
.notice-ticker-track{display:flex;width:max-content;animation:notice-ticker-scroll var(--tk-dur,55s) linear infinite;}
.notice-ticker-group{display:flex;align-items:center;flex-shrink:0;white-space:nowrap;}
.notice-ticker-item{font-weight:600;font-size:.95rem;padding:0 4px;}
.notice-ticker-dot{font-size:.5rem;opacity:.55;padding:0 22px;}
@keyframes notice-ticker-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (hover:hover) and (pointer:fine){
  .notice-ticker:hover .notice-ticker-track{animation-play-state:paused;}
}
@media (max-width:640px){
  .notice-ticker-label{padding:0 12px;font-size:.7rem;}
  .notice-ticker-view{height:44px;}
}
@media (prefers-reduced-motion:reduce){
  .notice-ticker-track{animation:none;}
  .notice-ticker-group[aria-hidden="true"]{display:none;}
  .notice-ticker-view{overflow-x:auto;}
}

/* The strip is a link: keep its text white in every state (the site-wide a:hover colour is brand blue,
   which vanishes into this blue background). */
.notice-ticker,.notice-ticker:hover,.notice-ticker:focus,.notice-ticker:visited{color:#fff;text-decoration:none;}
.notice-ticker .notice-ticker-label,.notice-ticker:hover .notice-ticker-label{color:#1b1b1b;}
.notice-ticker .notice-ticker-item,.notice-ticker:hover .notice-ticker-item{color:#fff;}
.notice-ticker:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
@media (hover:hover) and (pointer:fine){
  .notice-ticker:hover .notice-ticker-item{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.55);}
}