.hero-clock {
  position: absolute;
  right: var(--gutter);
  bottom: 20px;
  display: grid;
  justify-items: end;
  gap: 4px;
  min-width: 10ch;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hero-clock-date {
  color: var(--muted);
  font-size: clamp(12px, 1vw, 14px);
  line-height: 16px;
  font-weight: 400;
  letter-spacing: .08em;
}
.hero-clock-time {
  font-size: clamp(38px, 4.5vw, 64px);
  line-height: .95;
  font-weight: 200;
  letter-spacing: -.045em;
}
.hero-clock-time.is-ticking {
  animation: clock-tick 180ms ease-out;
}
@keyframes clock-tick {
  from { opacity: .6; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}