/* VIDDYSLAP base styles — restyle per specs/style-guide.md (2026-07-21). */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  background: var(--vs-black);
  color: var(--vs-text);
  font-family: var(--vs-font-body); /* D-DIN body */
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--vs-font-display); /* Archivo */
  font-weight: 700;
}

a {
  color: var(--vs-nav); /* navigation = blue */
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: #6a9bff;
  text-decoration: underline;
}

img,
video,
canvas {
  max-width: 100%;
  display: block;
}

.vs-mark {
  font-family: var(--vs-font-display);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--vs-text);
}

/* --- style-guide utilities --- */

/* headliner / show-name highlight: green, engineered bold-italic (12deg + stroke) */
.vs-hl {
  font-family: var(--vs-font-body);
  font-weight: 700;
  color: var(--vs-live);
  display: inline-block;
  transform: skewX(-12deg);
  -webkit-text-stroke: 0.4px var(--vs-live);
}

/* CRT dot-triad phosphor title fill + bloom (apply to wordmark / big headings) */
.vs-crt {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(255, 55, 85, 0.95) 0, rgba(255, 55, 85, 0.95) 0.7px, transparent 1.2px),
    radial-gradient(circle at 55% 72%, rgba(60, 240, 110, 0.9) 0, rgba(60, 240, 110, 0.9) 0.7px, transparent 1.2px),
    radial-gradient(circle at 82% 30%, rgba(70, 130, 255, 0.95) 0, rgba(70, 130, 255, 0.95) 0.7px, transparent 1.2px),
    linear-gradient(#f4f4f6, #f4f4f6);
  background-size: 4px 4px, 4px 4px, 4px 4px, 100% 100%;
  filter: blur(0.5px);
  text-shadow:
    0 0 1px rgba(240, 245, 255, 0.7),
    0 0 6px rgba(205, 222, 255, 0.4),
    0 0 16px rgba(150, 180, 255, 0.22);
}

.vs-crt--xl {
  filter: blur(0.7px);
  text-shadow:
    0 0 2px rgba(240, 245, 255, 0.8),
    0 0 9px rgba(205, 222, 255, 0.5),
    0 0 20px rgba(150, 180, 255, 0.32),
    0 0 34px rgba(120, 150, 255, 0.18);
}