@font-face {
  font-family: Inter; src: url('/assets/InterVariable.woff2') format('woff2');
  font-style: normal; font-weight: 100 900; font-display: swap;
}
* { box-sizing: border-box; }
:root {
  color-scheme: dark;
  --edge: clamp(16px, 3.2vmin, 48px);
  --date-size: min(4vw, 4.5vmin, 40px);
  --date-gap: clamp(18px, 3.4vmin, 44px);
  --clock-size: min(28vw, 42vh);
}
html { width: 100%; height: 100%; background: #000; }
body {
  margin: 0; width: 100%; height: 100%; min-height: 100svh;
  background: #000; color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { text-align: center; }
.clock {
  /* Center the TIME itself, not the combined date/time group. */
  position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%);
  display: flex; align-items: baseline; justify-content: center;
  font-size: var(--clock-size); font-weight: 200;
  line-height: 1.05; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
#time {
  display: block;
  /* Case-sensitive punctuation centers the colon on the clock numerals. */
  font-feature-settings: "case" 1;
}
.period, .period-spacer {
  flex: 0 0 3.2em; width: 3.2em; font-size: .12em;
  font-weight: 400; letter-spacing: .06em;
}
.period { text-align: left; padding-left: .7em; }
.calendar {
  position: absolute;
  bottom: calc(50% + var(--clock-size) * .525 + var(--date-gap));
  left: 0; width: 100%;
  font-size: var(--date-size); font-weight: 300;
  line-height: 1.5; letter-spacing: .04em; white-space: nowrap;
}
.weekday, .date { font: inherit; letter-spacing: inherit; }
#brand {
  position: fixed;
  bottom: max(var(--edge), env(safe-area-inset-bottom));
  right: max(var(--edge), env(safe-area-inset-right));
  display: grid; place-items: center;
  width: clamp(60px, 8vw, 110px); padding: 8px;
}
#brand img { display: block; width: 100%; height: auto; filter: brightness(0) invert(1); opacity: .45; }
.notice { position: fixed; top: 0; width: 100%; text-align: center; }
/* Preserve comparison URLs, while above-clock is now the default. */
body[data-date="top-left"] .calendar,
body[data-date="top-right"] .calendar {
  top: max(var(--edge), env(safe-area-inset-top)); bottom: auto; width: auto;
}
body[data-date="top-left"] .calendar,
body[data-date="bottom-left"] .calendar { left: max(var(--edge), env(safe-area-inset-left)); width: auto; }
body[data-date="top-right"] .calendar { left: auto; right: max(var(--edge), env(safe-area-inset-right)); }
body[data-date="bottom-left"] .calendar { bottom: max(var(--edge), env(safe-area-inset-bottom)); }
body[data-date="below-clock"] .calendar { bottom: auto; top: calc(50% + var(--clock-size) * .525 + var(--date-gap)); }
@media (max-height: 400px) {
  :root { --date-gap: 10px; }
  #brand { width: 60px; }
}