/*
  The live-performance countdown, as one stylesheet.

  These rules were the homepage countdown's rules; they were lifted out of
  index.html verbatim so the member Live page can wear exactly the same
  countdown rather than a second one that looks almost the same. Both pages
  link this file, so the boxes, the numerals, the gold rules, the spacing and
  the responsive clamps can no longer drift apart.

  The colour and type tokens below (--serif, --gold-*, --text-*) are defined
  by each page's own :root, and are the same values on both.
*/

.countdown {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: clamp(0.35rem, 1.8vw, 0.9rem);
  margin-top: clamp(0.6rem, 2.2vw, 0.9rem);
}
.cd-cell {
  flex: 1 1 0;
  max-width: 7.5rem;
  padding: clamp(0.7rem, 3vw, 1.1rem) 0.3rem;
  background: linear-gradient(180deg, rgba(212,165,35,0.09), rgba(0,0,0,0.5));
  border: 1px solid rgba(212,165,35,0.28);
  border-radius: 2px;
  text-align: center;
}
.cd-num {
  display: block;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.9rem, 10vw, 3.4rem);
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.cd-lab {
  display: block;
  margin-top: 0.45rem;
  font-size: clamp(0.52rem, 2.3vw, 0.66rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.cd-sep {
  align-self: center;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 5vw, 1.8rem);
  color: var(--gold-600);
  padding-bottom: 1.2rem;
}
.cd-label {
  margin-top: clamp(1.3rem, 4.4vw, 1.9rem);
  font-size: clamp(0.62rem, 2.7vw, 0.72rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* The homepage centres the timer with its own .mid utility; this is the same
   58rem cap, carried in the shared file so the member card matches it on a
   wide screen without borrowing a homepage utility class. */
.cd-wrap { max-width: 58rem; margin-inline: auto; }

/* The timer is a flex row, which outranks the browser's own [hidden] rule, so
   hiding it has to be spelled out. Only the member page ever hides it — when
   the lobby opens and the evening itself takes over. */
.countdown[hidden] { display: none; }

/* What stands in its place at that moment. */
.cd-live {
  margin-top: clamp(0.6rem, 2.2vw, 0.9rem);
  font-size: clamp(0.74rem, 3.1vw, 0.88rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-300);
}