:root {
  --shs-ink: #060a1a;
  --shs-cream: #eef1e0;
  --shs-cobalt: #2a4fd6;
  --shs-cobalt-light: #4672ff;
  --shs-cobalt-deep: #1f3cb4;
  --shs-cobalt-edge: #142a8c;
  --shs-slot: #0b1748;
  --shs-phosphor: #baf86b;
  --shs-sticker-green: #a5e352;
  --shs-phosphor-deep: #8fd63a;
  --shs-gold: #ffd457;
  --shs-gold-mid: #e2a21c;
  --shs-gold-deep: #9c6510;
  --shs-paper: #fbf8ee;
  --shs-paper-shade: #d6d0bf;
  --shs-font-display: "Russo One", system-ui, sans-serif;
}


.shs-brand { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 1; min-width: 0; color: #eef1e0; text-decoration: none; }
.shs-brand--light { color: #060a1a; }
.shs-brand--light .shs-keyline { display: none; }
.shs-brand .shs-mark { flex: none; display: block; height: 32px; width: auto; aspect-ratio: 56 / 71; }
.shs-brand .shs-wordmark { display: block; width: clamp(120px, 19vw, 200px); height: auto; min-width: 0; }
.shs-brand .shs-fresh { transform-box: fill-box; transform-origin: center; animation: shs-reprice-slap 360ms cubic-bezier(.2, .65, .26, 1) both; }
.hand-tick { animation: brand-tick 60s steps(60, end) 360ms infinite; }
@keyframes shs-reprice-slap {
  0% { transform: translate(8px, -13px) rotate(-11deg) scale(1.13); opacity: 0; }
  55% { opacity: 1; }
  76% { transform: translate(0, 0) rotate(0) scale(1.04, .94); }
  100% { transform: none; opacity: 1; }
}
@keyframes brand-tick { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .shs-brand .shs-fresh, .hand-tick { animation: none; } }

:root[data-effects="off"] .shs-brand :is(.shs-fresh,.hand-tick){animation:none}