:root{--bg:#0d1117;--fg:#e6edf3;--muted:#8b949e;--accent:#7ee787;--card:#161b22;--border:#30363d}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;line-height:1.6}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
header,footer{padding:1.25rem 2rem;border-bottom:1px solid var(--border)}
footer{border-top:1px solid var(--border);border-bottom:none;color:var(--muted);font-size:.9rem}
main{max-width:960px;margin:0 auto;padding:2rem}
h1,h2,h3{line-height:1.25}
.card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:1.25rem;margin:1rem 0}
nav a{margin-right:1rem}
/* Establishing the neon shrine aesthetic — deep black backgrounds, neon magenta/cyan/yellow accents, Bebas Neue for display headings, Space Mono for mono/label text, Inter for body. Glow effects on headings and hover states. Concert-poster energy with clean readability. */
/* ========== UTAH VALLEY SOUND — NEON SHRINE THEME ========== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --neon-magenta: #ff2d78;
  --neon-cyan: #00f5ff;
  --neon-yellow: #f5e642;
  --neon-violet: #bf5fff;
  --deep-black: #080810;
  --coal: #0f0f1a;
  --dark-surface: #141428;
  --mid-surface: #1c1c35;
  --text-primary: #f0eeff;
  --text-muted: #8888aa;
  --glow-magenta: 0 0 12px #ff2d78, 0 0 40px rgba(255,45,120,0.3);
  --glow-cyan: 0 0 12px #00f5ff, 0 0 40px rgba(0,245,255,0.3);
}

/* BASE */
body {
  background-color: var(--deep-black);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.75;
  margin: 0;
  padding: 0;
}

/* HEADER */
header, .site-header {
  background: var(--coal);
  border-bottom: 2px solid var(--neon-magenta);
  box-shadow: var(--glow-magenta);
  padding: 1rem 2rem;
}

header a, .site-header a {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  letter-spacing: 0.12em;
  color: var(--neon-cyan) !important;
  text-shadow: var(--glow-cyan);
  text-decoration: none;
}

nav a {
  color: var(--text-muted) !important;
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  margin: 0 0.75rem;
  transition: color 0.2s, text-shadow 0.2s;
}

nav a:hover {
  color: var(--neon-magenta) !important;
  text-shadow: var(--glow-magenta);
}

/* MAIN CONTENT */
main, .content, article {
  max-width: 860px;
  margin: 0 auto;
  padding: 3rem 2rem;
}

/* HEADINGS */
h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.8rem, 6vw, 5rem);
  letter-spacing: 0.06em;
  line-height: 1.05;
  color: var(--neon-yellow);
  text-shadow: 0 0 20px rgba(245,230,66,0.5);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  letter-spacing: 0.05em;
  color: var(--neon-cyan);
  text-shadow: var(--glow-cyan);
  margin-top: 3rem;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(0, 245, 255, 0.2);
  padding-bottom: 0.25rem;
}

h3 {
  font-family: 'Space Mono', monospace;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--neon-magenta);
  text-shadow: var(--glow-magenta);
  text-transform: uppercase;
  margin-top: 2rem;
}

/* PARAGRAPHS */
p {
  color: var(--text-primary);
  margin-bottom: 1.25rem;
}

/* LINKS */
a {
  color: var(--neon-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,245,255,0.3);
  transition: color 0.2s, border-color 0.2s, text-shadow 0.2s;
}

a:hover {
  color: var(--neon-magenta);
  border-bottom-color: var(--neon-magenta);
  text-shadow: var(--glow-magenta);
}

/* HERO SECTION */
.hero, section:first-of-type {
  background: linear-gradient(135deg, var(--coal) 0%, #0a0a20 50%, #150010 100%);
  border: 1px solid rgba(255,45,120,0.2);
  border-radius: 4px;
  padding: 3rem 2.5rem;
  margin-bottom: 3rem;
  position: relative;
  overflow: hidden;
}

.hero::before, section:first-of-type::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-magenta), var(--neon-cyan), transparent);
}

/* CARDS / GRID */
.card, .artist-card, .venue-card {
  background: var(--dark-surface);
  border: 1px solid rgba(0,245,255,0.15);
  border-radius: 4px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.card:hover, .artist-card:hover, .venue-card:hover {
  border-color: var(--neon-magenta);
  box-shadow: 0 0 20px rgba(255,45,120,0.15);
}

/* BLOCKQUOTE */
blockquote {
  border-left: 3px solid var(--neon-magenta);
  background: var(--mid-surface);
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  color: var(--text-primary);
  font-style: italic;
  font-family: 'Space Mono', monospace;
  font-size: 0.9rem;
  box-shadow: inset 0 0 30px rgba(255,45,120,0.05);
}

blockquote cite {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--neon-magenta);
  font-style: normal;
  letter-spacing: 0.05em;
}

/* LISTS */
ul, ol {
  padding-left: 1.5rem;
  color: var(--text-primary);
}

li {
  margin-bottom: 0.5rem;
}

li::marker {
  color: var(--neon-magenta);
}

/* STRONG / EM */
strong {
  color: var(--neon-yellow);
  font-weight: 700;
}

em {
  color: var(--neon-violet);
  font-style: italic;
}

/* FOOTER */
footer, .site-footer {
  background: var(--coal);
  border-top: 1px solid rgba(255,45,120,0.3);
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  margin-top: 4rem;
}

/* NEON DIVIDER */
hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), var(--neon-magenta), transparent);
  margin: 3rem 0;
  opacity: 0.5;
}

/* BADGE / TAG */
.tag, .label {
  display: inline-block;
  background: rgba(255,45,120,0.15);
  border: 1px solid var(--neon-magenta);
  color: var(--neon-magenta);
  font-family: 'Space Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
  margin-right: 0.4rem;
}

/* RESPONSIVE */
@media (max-width: 640px) {
  main, .content, article { padding: 2rem 1.25rem; }
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.6rem; }
}