/* site-clock.css : date / era / JST clock shown at the top of the home page */
.site-clock {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 16px;
  margin: 0 0 12px;
  padding: 0 0 8px;
  border-bottom: 1px solid #e0e0e0;
  color: #555555;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Hidden until the script has produced a valid time, so a script failure leaves no empty box. */
.site-clock:not([data-ready]) {
  display: none;
}

.site-clock-time {
  color: #222222;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .site-clock {
    font-size: 0.82rem;
    gap: 0 12px;
  }
}