/* Auto detailing: graphite black, ice-blue studio light, a wide display face.
   Structure lives in /t/_base/base.css; this is only the palette, the type
   and the CSS stand-in for the wheel. */
:root {
  --bg: #07090b; --bg-rgb: 7, 9, 11; --bg-2: #0f1317;
  --ink: #eef3f7; --ink-2: #cfd9e1; --muted: #8d9aa6; --line: rgba(238, 243, 247, .12);
  --accent: #5fd4ff; --accent-rgb: 95, 212, 255; --accent-hi: #b8ecff; --on-accent: #031620;
  --card-1: #10161b; --card-2: #080b0e; --video-dim: .45;
  --display: "Unbounded", "Archivo Black", "Arial Black", sans-serif;
  --display-case: uppercase; --display-weight: 600; --display-leading: .98; --display-tracking: -.01em;
  --title-size: clamp(2.5rem, 7.2vw, 6.6rem);
  --serif: "Unbounded", "Arial Black", sans-serif;
}
em { font-style: normal; font-weight: 600; }
h2 { font-size: clamp(2rem, 5vw, 4.3rem); }
h3 { font-size: 1.2rem; letter-spacing: .01em; }
.craft__line { font-size: clamp(1.8rem, 4.8vw, 4rem); }
.band__quote { font-size: clamp(2.4rem, 7.6vw, 6.6rem); }
.steps span { font-size: 1.1rem; }
.proof__num b { font-size: clamp(5rem, 16vw, 11rem); }

/* no WebGL: a turning rim drawn in CSS */
html.no-webgl .hero__fallback {
  right: 10vw; top: 22vh; width: 42vh; height: 42vh; border-radius: 50%;
  border: 26px solid #0d0f11;
  background:
    radial-gradient(circle, #2b3137 0 14%, transparent 15%),
    repeating-conic-gradient(from 0deg, #cfd8e0 0 9deg, #20262c 9deg 72deg);
  box-shadow: 0 0 0 2px #3a424a, 0 30px 80px -20px rgba(95, 212, 255, .35);
  animation: rim 6s linear infinite;
}
@keyframes rim { to { transform: rotate(-360deg); } }
@media (max-width: 760px) {
  html.no-webgl .hero__fallback { top: 76px; right: 50%; width: 26svh; height: 26svh; border-width: 16px; translate: 50% 0; }
}