/* =========================================================
   09-countdown.css — COUNTDOWN TIMER COMPONENT
   Depends on: 01-tokens.css
   ========================================================= */

.countdown-wrapper { text-align: center; width: 100%; }
.countdown-wrapper__label {
  font-family: var(--font-serif);
  font-size: var(--fs-xs); letter-spacing: .42em;
  color: var(--clr-muted); text-transform: uppercase;
  margin-bottom: var(--sp-6);
}

.cd-unit { text-align: center; min-width: 60px; }
.cd-unit__number {
  font-family: 'Cinzel Decorative', cursive;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 700; line-height: 1; display: block;
  background: linear-gradient(160deg, var(--clr-gold-200), var(--clr-gold-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-variant-numeric: tabular-nums;
}
.cd-unit__label {
  font-family: var(--font-serif);
  font-size: var(--fs-xs); letter-spacing: .28em;
  color: var(--clr-muted); text-transform: uppercase;
  margin-top: var(--sp-2); display: block;
}
.cd-sep {
  font-size: 2.2rem; color: var(--clr-gold-600);
  line-height: 1; align-self: flex-start; padding-top: .15em;
}