/* Countdown page. Colours, fonts and spacing come from /assets/tokens.css only. The clock is a split-flap display:
   each digit is a flap unit (countdown.js builds them). With prefers-reduced-motion the script swaps values with no
   rotation and no wheel spin. */
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); }
body { margin: 0; min-height: 100svh; display: grid; align-items: center; justify-items: start; font: var(--fs-base)/var(--lh-body) var(--font-body); }
main { width: min(100% - 2 * var(--gutter), 40rem); margin-left: var(--gutter); padding: var(--section-pad) 0 calc(var(--section-pad) + 64px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 32px; justify-items: start; }
@media (min-width: 720px) { main { margin-left: 12vw; } }
/* wordmark: the letters follow the text colour (currentColor), the dot is always #ffc70a (set in the SVG) */
svg.wordmark { display: block; height: 28px; width: auto; aspect-ratio: 522.85 / 99.72; color: var(--mark-ink); }
/* headline stays serif (as on main, see --font-serif); everything else is Plex */
h1 { margin: 0; font: var(--fw-display-md) clamp(32px, 6vw, 52px)/1.1 var(--font-serif); letter-spacing: var(--ls-display-md); text-wrap: balance; }

/* ---- split-flap clock ---- */
.clock { display: flex; gap: clamp(10px, 2.6vw, 28px); font-size: clamp(30px, 8.4vw, 64px); }
.unit { display: grid; gap: 10px; justify-items: center; }
.unit small { font: 500 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.digits { display: flex; gap: .09em; font: 500 1em/1 var(--font-mono); color: var(--flap-ink); font-variant-numeric: tabular-nums; }
/* before the script runs (and without it) the digits show as plain text */
.digits:not(.ready) { padding: .12em .3em; }

.flap { --H: 1.4em; position: relative; display: block; width: .98em; height: var(--H); perspective: 5em; border-radius: 3px; background: var(--flap-split); }
.half, .leaf { position: absolute; left: 0; right: 0; overflow: hidden; backface-visibility: hidden; }
.half.top, .leaf.top { top: 0; height: calc(50% - .5px); border-radius: 3px 3px 0 0; background: var(--flap-top); }
.half.bottom, .leaf.bottom { bottom: 0; height: calc(50% - .5px); border-radius: 0 0 3px 3px; background: var(--flap-bot); }
.half i, .leaf i { position: absolute; left: 0; right: 0; height: var(--H); line-height: var(--H); text-align: center; font-style: normal; }
.top i { top: 0; }
.bottom i { top: calc(-1 * (var(--H) / 2 + .5px)); }
/* moving parts */
.leaf { visibility: hidden; will-change: transform; }
.leaf.top { transform-origin: 50% 100%; z-index: 2; }
.leaf.bottom { transform-origin: 50% 0; transform: rotateX(90deg); z-index: 2; }
.flap.moving .leaf.top { visibility: visible; }
.flap.landing .leaf.top { visibility: hidden; }
.flap.landing .leaf.bottom { visibility: visible; }
.leaf b, .half b { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.leaf b { background: #000; }                                   /* darkens the leaf as it turns away from the light */
.half.bottom b { background: linear-gradient(to bottom, #000, transparent 70%); } /* shadow cast by the falling flap */

/* ---- sound button: fixed, bottom centre ---- */
.sound { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); transform: translateX(-50%);
  width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--sound-line); background: transparent; color: var(--sound-line); cursor: pointer;
  transition: background-color .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
.sound:hover { background: color-mix(in srgb, var(--sound-line) 12%, transparent); }
.sound:active { background: color-mix(in srgb, var(--sound-line) 20%, transparent); }
.sound:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.sound[aria-pressed="true"] .slash, .sound[aria-pressed="false"] .waves { display: none; }
@media (prefers-reduced-motion: reduce) { .sound { transition: none; } }

.live { margin: 0; font: 600 clamp(32px, 8vw, 56px)/1 var(--font-mono); }
.live[hidden], .clock[hidden] { display: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
p { margin: 0; }
a { color: var(--accent-text); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-focus); }
::selection { background: var(--select-bg); color: var(--select-fg); }