/* Event-day states for the hero clock — hand-authored additions.

   components/countdown.css is GENERATED from the design handoff and must not be edited;
   these are the three states the handoff does not cover, because it was drawn months before
   the day and shows the counting state only.

   They reuse the countdown's own frame deliberately: on the morning of the event the page
   should look like the page people already know, with different words in it. */

.countdown--live,
.countdown--today,
.countdown--done {
  /* No flip units in these states, so the row's grid does not apply. */
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.countdown__now {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.countdown__now b {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  line-height: 1.1;
  text-transform: uppercase;
}

.countdown__now span {
  font-family: var(--font-data);
  font-size: var(--fs-small);
  letter-spacing: .08em;
  color: var(--c-text-secondary);
}

/* Live is the only state that earns the accent: it is true for seven hours a year. */
.countdown--live .countdown__label {
  color: var(--c-action-primary);
}

.countdown--live .countdown__label::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .4rem;
  border-radius: 50%;
  background: var(--c-action-primary);
  /* Deliberately not animated: a pulsing dot on a page somebody reads while walking into a
     venue is noise, and prefers-reduced-motion would have to switch it off anyway. */
}

a.countdown__meta {
  text-decoration: none;
}