/* Difference-blended digits, with an independent Neon Red seconds pulse. */
.site-header.header-clock-managed {
  position: absolute;
  z-index: 30;
}

.header-clock-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
}

.header-clock,
.header-clock-red-pulse {
  position: fixed;
  z-index: 40;
  display: inline-flex;
  flex: none;
  align-items: baseline;
  margin: 0;
  text-shadow: none;
  font-family: var(--font);
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}

.header-clock {
  top: var(--header-clock-pin-top, 16px);
  left: var(--header-clock-left);
  color: var(--paper, #f2f0e9);
  mix-blend-mode: difference;
}

/* A body-level sibling: the red must never pass through the difference layer. */
.header-clock-red-pulse {
  z-index: 41;
  color: var(--red, #ff2201);
  mix-blend-mode: normal;
  opacity: 0;
}

.header-clock-digits { display: inline-flex; font-size: 12px; letter-spacing: .045em; }
.header-clock-colon { display: inline-block; padding: 0 1px; }
.header-clock-second-unit { display: inline-block; min-width: 1ch; }

@media (max-width: 800px) {
  .header-clock-digits { font-size: 10px; letter-spacing: .01em; }
}

@media (max-width: 380px) {
  .header-clock-digits { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .header-clock-second-unit { animation: none; }
  .header-clock-red-pulse { display: none; }
}