/* Barber: dark, cinematic, brass. Structure lives in /t/_base/base.css;
   this is only the palette, the type and the CSS stand-in for the pole. */
:root {
  --bg: #0b0a08; --bg-rgb: 11, 10, 8; --bg-2: #15130f;
  --ink: #f3ede2; --ink-2: #d8cfbf; --muted: #a39a8a; --line: rgba(243, 237, 226, .12);
  --accent: #c9a36a; --accent-rgb: 201, 163, 106; --accent-hi: #ecd09a; --on-accent: #1a140a;
  --card-1: #1c1812; --card-2: #0f0d0a; --video-dim: .42;
  --display: "Anton", "Oswald", Impact, "Arial Narrow", sans-serif;
  --display-case: uppercase; --display-weight: 400; --display-leading: .92; --display-tracking: .01em;
  --title-size: clamp(3.3rem, 10.5vw, 9.4rem);
  --serif: "Playfair Display", Georgia, serif;
  --red: #b3261e; --navy: #1f2f5c;
}

/* no WebGL: a CSS barber pole */
html.no-webgl .hero__fallback {
  right: 12vw; top: 20vh; width: 64px; height: 52vh; border-radius: 32px;
  background: repeating-linear-gradient(-45deg, #f3ede2 0 16px, var(--red) 16px 32px,
              #f3ede2 32px 48px, var(--navy) 48px 64px);
  background-size: 100% 90.5px; animation: pole 2.4s linear infinite;
  box-shadow: inset 8px 0 18px rgba(0, 0, 0, .35), inset -6px 0 12px rgba(255, 255, 255, .25),
              0 0 0 6px var(--accent);
}
@keyframes pole { to { background-position: 0 90.5px; } }
@media (max-width: 760px) {
  html.no-webgl .hero__fallback { top: 80px; right: 50%; height: 28svh; width: 48px; translate: 50% 0; }
}