:root {
  --accent: #ffd400;
  --brand-purple-light: #ffe562;
  --brand-purple-dark: #ffd400;
  --purple-light: #ffe562;
  --purple-dark: #ffd400;
  --gold-accent: #ffd400;
  --gold-accent-rgb: 255, 212, 0;
}

html { scroll-behavior: smooth; background: #050505; }

body {
  background-color: #050505;
  background-image:
    linear-gradient(rgba(255, 212, 0, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 48px 48px;
}

.dark body,
body.dark { background-color: #050505 !important; color: #fff !important; }

header {
  background: rgba(5, 5, 5, .92) !important;
  border-bottom-color: rgba(255, 212, 0, .34) !important;
}

.logo { filter: none !important; }

h1,
h2,
h3 {
  letter-spacing: -.025em;
  text-wrap: balance;
}

h1 { text-transform: uppercase; }

section { position: relative; }

section[id]::before {
  content: "CUE";
  position: absolute;
  top: 16px;
  left: max(16px, calc((100vw - 72rem) / 2));
  color: rgba(255, 212, 0, .65);
  font: 700 .65rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .18em;
}

.text-gold-accent,
.text-purple-accent,
.audio-link,
.doc-link { color: var(--accent) !important; }

.bg-purple-gradient,
.bg-gold-accent { background: var(--accent) !important; color: #000 !important; }

.dark .bg-dark-purple\/30,
.bg-dark-purple\/30 { background: #0a0a0a !important; }

.accordion-item {
  background: #0d0d0d !important;
  border-color: rgba(255, 255, 255, .14) !important;
  box-shadow: inset 0 3px 0 rgba(255, 212, 0, .62);
  border-radius: 10px !important;
}

.accordion-header { background: #101010 !important; }
.accordion-header:hover,
.accordion-item.active .accordion-header { background: #19170a !important; }

.gallery-thumb {
  border-radius: 8px;
  background: #111;
}

.gallery-thumb::after { border-radius: 8px; }

.aspect-\[4\/3\] {
  position: relative;
  overflow: hidden;
  background: #0b0b0b !important;
  border-color: rgba(255, 212, 0, .28) !important;
  border-radius: 12px !important;
}

.aspect-\[4\/3\]::after {
  content: "STAGE / PRODUCTION / LIVE";
  position: absolute;
  right: 16px;
  bottom: 14px;
  padding: 7px 9px;
  background: var(--accent);
  color: #000;
  font: 800 .68rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .08em;
}

.aspect-\[4\/3\] img { opacity: .72 !important; filter: grayscale(1) contrast(1.15); }

footer { background: #050505; border-top-color: rgba(255, 212, 0, .34) !important; }

button,
a { outline-offset: 4px; }

button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

button { min-height: 42px; }

#mobileNav {
  background: #090909;
  border-top-color: rgba(255, 212, 0, .28) !important;
}

#audioPlayerContainer { border-top: 2px solid var(--accent); }

@media (max-width: 767px) {
  body { background-size: 32px 32px; }
  section[id]::before { top: 10px; left: 16px; }
  h1 { font-size: clamp(2.35rem, 12vw, 4rem) !important; }
  #mobileNav nav a { min-height: 44px; display: flex; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}