:root {
  --clr-bg:       #0a0a0a;
  --clr-alt-bg:   #1a1a1a;
  --clr-text:     #f0f0f0;
  --clr-accent:   #00ff88;
  --ff-heading:   'Press Start 2P', cursive;
  --ff-body:      'Open Sans', sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--ff-body);
  color: var(--clr-text);
  background: var(--clr-bg);
}
/* Skip link */
.skip-link {
  position:absolute; top:-40px; left:0; background:#000; color:#fff;
  padding:.5rem; z-index:100; transition:top .3s;
}
.skip-link:focus { top:0; }

/* Container */
.container { max-width:960px; margin:0 auto; padding:0 1rem; }

/* Header */
.header {
  position: fixed; top:0; width:100%; background:transparent;
  padding:1rem; z-index:10;
  display:flex; justify-content:center;
}
.header__inner {
  width:100%; max-width:960px; display:flex;
  justify-content:space-between; align-items:center;
}
.logo {
  font-family: var(--ff-heading); font-size:1.2rem;
  color: var(--clr-text);
}
.logo span { color: var(--clr-accent); }
.nav a {
  margin-left:1.5rem; font-family: var(--ff-heading);
  color: var(--clr-text); text-decoration:none;
  transition: color .2s;
}
.nav a:hover { color: var(--clr-accent); }

/* Hero */
.hero {
  position: relative; height:100vh; display:flex;
  align-items:center; justify-content:center; text-align:center;
  overflow:hidden;
}
.hero__bg {
  position:absolute; inset:0;
  background: url('../images/hero-rap.jpg') center/cover no-repeat;
  filter: brightness(0.4);
}
.hero__content {
  position:relative; z-index:1;
}
.hero__content h1 {
  font-family: var(--ff-heading); font-size:2rem; margin-bottom:1rem;
  color: var(--clr-accent);
}
.hero__content p { font-size:1rem; margin-bottom:1.5rem; }

/* Button */
.btn {
  display:inline-block; padding:.75rem 1.5rem;
  background: var(--clr-accent); color: var(--clr-bg);
  text-transform:uppercase; font-weight:600; letter-spacing:.5px;
  transition: background .3s, transform .2s;
}
.btn:hover { background: #00e676; transform: translateY(-2px); }

/* Sections */
.section {
  padding:4rem 0;
}
.section--alt { background: var(--clr-alt-bg); }
.section h2 {
  font-family: var(--ff-heading); font-size:1.5rem;
  text-align:center; margin-bottom:2rem;
}

/* Grid utilities */
.fade-in { opacity:0; transform: translateY(20px); }
.grid { display:grid; gap:1.5rem; }

/* Biographie */
#about p { max-width: 800px; margin:0 auto; line-height:1.6; }

/* Shows */
.shows-list {
  list-style:none; max-width:600px; margin:0 auto;
}
.shows-list li {
  padding:.75rem; border-bottom:1px solid #333;
  display:flex; justify-content:space-between;
}

/* Music */
.music-grid {
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  padding:0 1rem; display:grid;
}
.music-card {
  background:#111; padding:1rem; border-radius:6px;
  text-align:center;
}
.music-card img { width:100%; border-radius:4px; margin-bottom:.5rem; }
.music-card h3 { font-size:.9rem; margin:0.5rem 0; color:var(--clr-accent); }
.music-card audio { width:100%; }

/* Videos */
.video-grid {
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  display:grid; padding:0 1rem;
}
.video-grid iframe {
  width:100%; height:180px; border:none; border-radius:6px;
}

/* Contact */
.social-list {
  list-style:none; display:flex; justify-content:center; gap:1rem;
}
.social-list a {
  display:inline-block; width:40px; height:40px;
  background: var(--clr-accent); color: var(--clr-bg);
  font-family: var(--ff-heading); font-size:.8rem;
  line-height:40px; text-align:center; border-radius:50%;
  transition: background .2s;
}
.social-list a:hover { background: #00e676; }

/* Footer */
.footer {
  text-align:center; padding:2rem 0; font-size:.8rem;
}

/* Responsive */
@media(max-width:600px) {
  .header__inner { flex-direction:column; }
  .nav a { margin: .5rem 0; }
}