:root {
  color-scheme: dark;
  --void: #050406;
  --stone: #1a1715;
  --parchment: #e9dfc7;
  --parchment-dim: #a89c84;
  --parchment-faint: rgba(233, 223, 199, .38);
  --gilt-1: #8c6a1d;
  --gilt-2: #c9a227;
  --gilt-3: #f1d479;
  --gilt-4: #fff3c4;
  --blood: #7a1b1b;
  --cobalt: #1c3a8a;
  --candle: #ffb45e;
  --flame: 1;          /* driven by js/light/candle.js, ~0.92–1.08 */
  --font-display: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --font-caps: 'Cinzel', Georgia, serif;
  --font-body: 'Cormorant Garamond', Georgia, serif;
  --font-black: 'UnifrakturMaguntia', 'Cinzel Decorative', serif;
  --gutter: clamp(16px, 4vw, 48px);
}

/* Gilt: gradient-filled text with a candle-driven brightness breath.
   Applied per digit in the odometer: a transformed column becomes its own
   compositing layer and can no longer clip its parent's background. */
.gilt, .odometer .roll span, .odometer .currency, .odometer .sep {
  background: linear-gradient(176deg, var(--gilt-4) 0%, var(--gilt-3) 20%, var(--gilt-2) 46%, var(--gilt-1) 72%, var(--gilt-3) 100%);
  background-size: 100% 220%;
  background-position: 50% var(--sheen, 30%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: sheen 9s ease-in-out infinite alternate;
}
/* Safari breaks background-clip:text when the same element carries a filter,
   so the glow + candle breath live on a wrapper. */
.glow { filter: brightness(var(--flame)) drop-shadow(0 0 22px rgba(241, 212, 121, .22)); will-change: filter; }
@keyframes sheen { from { --sheen: 10%; background-position: 50% 10%; } to { --sheen: 90%; background-position: 50% 90%; } }
@media (prefers-reduced-motion: reduce) { .gilt { animation: none; } }