:root{
  --bg:#0b0b0c;
  --ink:#e9e9ec;
  --muted:#c6c6cc;
  --line:rgba(255,255,255,.12);
  --card:rgba(255,255,255,.04);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:Oswald, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height:1.55}

/* YouTube background */
.yt-bg{position:fixed; inset:0; z-index:-2; overflow:hidden; filter:grayscale(100%) contrast(110%) brightness(50%)}
.yt-bg iframe{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:177.78vh; height:100vh; min-width:100vw; min-height:56.25vw; pointer-events:none}
.yt-overlay{position:fixed; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.85))}

/* Centered nav */
.wrap{width:min(1600px,95vw); margin:0 auto; padding:0 10px}
.nav{position:sticky; top:0; z-index:10; backdrop-filter: blur(6px); background:rgba(8,8,10,.55); border-bottom:1px solid var(--line)}
.nav-bar{display:flex; justify-content:center; padding:10px 0}
.menu{display:flex; gap:22px; align-items:center}
.menu a{color:var(--ink); text-decoration:none; opacity:.95}
.menu a:hover{opacity:1}
.bg-toggle{opacity:.75}

/* Hero */
.hero-fullscreen{position:relative; width:100%; height:100vh; overflow:hidden}
.hero-fullscreen img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block; filter:grayscale(100%) contrast(110%)}

/* 3-column */
.sections-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; padding:40px 0}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px}
.card h2{font-family:Anton, Impact, sans-serif; letter-spacing:2px; margin:0 0 10px; font-size:28px}
.card p{color:var(--muted)}
#about p{font-size:18px; line-height:1.9}
#about p + p{margin-top:12px}

/* Gallery grid */
.grid.gallery{display:grid; grid-template-columns: repeat(2, 1fr); gap:12px}
.grid.gallery figure{margin:0; position:relative}
.grid.gallery img{
  width:100%; height:190px; object-fit:cover; filter:grayscale(100%) contrast(110%);
  border-radius:10px; transition:transform .25s ease, box-shadow .25s ease;
}

/* Wiggle + scale effect on hover */
@keyframes wiggle {
  0%{transform:rotate(0deg) scale(1)}
  25%{transform:rotate(-0.6deg) scale(1.02)}
  50%{transform:rotate(0.6deg) scale(1.03)}
  75%{transform:rotate(-0.4deg) scale(1.02)}
  100%{transform:rotate(0) scale(1.02)}
}
.grid.gallery img:hover{animation:wiggle .35s ease; transform:scale(1.04); box-shadow:0 10px 30px rgba(0,0,0,.5)}
.grid.gallery figcaption{font-size:12px; color:#aaa; margin-top:6px}

/* Shows accordion */
.shows{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.show{border:1px solid var(--line); border-radius:10px; overflow:hidden; background:rgba(255,255,255,.03)}
.show-head{
  width:100%; text-align:left; padding:12px 14px; background:transparent; border:none; color:var(--ink);
  font: inherit; cursor:pointer;
}
.show-body{display:none; padding:12px 14px; border-top:1px solid var(--line); color:var(--muted)}
.show.open .show-body{display:block}

/* Subhead inside cards */
.subhead{font-family:Anton, Impact, sans-serif; letter-spacing:1px; margin:6px 0 10px; font-size:22px}

/* Generic accordion (for Merch) — matches Shows look */
.accordion{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.acc{border:1px solid var(--line); border-radius:10px; overflow:hidden; background:rgba(255,255,255,.03)}
.acc-head{
  width:100%; text-align:left; padding:12px 14px; background:transparent; border:none; color:var(--ink);
  font:inherit; cursor:pointer;
}
.acc-body{display:none; padding:12px 14px; border-top:1px solid var(--line); color:var(--muted)}
.acc.open .acc-body{display:block}
.links{list-style:none; padding:0; margin:0 0 8px 0; display:grid; gap:6px}
.links a{color:var(--ink); text-decoration:none; border-bottom:1px dashed var(--line)}
.links a:hover{border-color:#fff}
.hint{font-size:12px; opacity:.7}

/* Stickers grid */
.stickers-grid{
  display:grid; gap:10px;
  grid-template-columns: repeat(2, minmax(120px,1fr));
}
.stickers-grid figure{margin:0}
.stickers-grid img{
  width:100%; height:150px; object-fit:contain;
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:10px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.stickers-grid img:hover{transform:scale(1.04); box-shadow:0 10px 30px rgba(0,0,0,.5)}
.stickers-grid figcaption{font-size:12px; color:#aaa; margin-top:4px}

@media (max-width:700px){
  .stickers-grid{grid-template-columns:1fr}
}

/* Contact */
#contact .card{margin-top:22px}
#contact form{display:grid; gap:12px; grid-template-columns: 1fr 1fr}
#contact textarea{grid-column:1 / -1}
#contact input, #contact textarea{width:100%; padding:10px; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--ink)}
.btn{background:#121216; color:var(--ink); border:1px solid var(--line); padding:10px 16px; border-radius:12px; cursor:pointer}
.btn.small{padding:6px 10px}

/* Footer */
footer{padding:60px 0 140px; color:#9a9aa0}

/* Player */
.player{position:fixed; left:0; right:0; bottom:0; z-index:20; background:rgba(8,8,10,.95); border-top:1px solid var(--line); display:flex; gap:14px; align-items:center; padding:10px 14px; flex-wrap:wrap}
.player .trackinfo{flex:1; min-width:240px}
#seek{width:100%}
.tracklist{display:flex; gap:10px; flex-wrap:wrap}
.chip{border:1px solid var(--line); border-radius:999px; padding:6px 10px; cursor:pointer}
.chip.active{border-color:#fff}

/* Lightbox modal */
.lightbox{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.9); z-index:50}
.lightbox.open{display:flex}
.lb-img{max-width:90vw; max-height:80vh; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.7)}
.lb-prev,.lb-next,.lb-close{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.08); border:1px solid var(--line); color:var(--ink);
  width:44px; height:44px; border-radius:10px; cursor:pointer; font-size:26px; line-height:40px;
}
.lb-prev{left:20px}
.lb-next{right:20px}
.lb-close{top:20px; right:20px; transform:none; width:40px; height:40px; line-height:36px; font-size:24px}

/* Responsive */
@media (max-width:1100px){
  .sections-3{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .sections-3{grid-template-columns:1fr}
  .grid.gallery{grid-template-columns:1fr}
  .wrap{width:96vw}
}

.bio-divider{border:0; height:1px; background:var(--line); margin:16px 0}
.bio-contacts .bio-line{margin:6px 0; color:var(--muted)}
.socials{display:flex; gap:14px; margin-top:10px; flex-wrap:wrap}
.social{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--line);
  border-radius:999px; color:var(--ink); text-decoration:none; background:rgba(255,255,255,.03)}
.social:hover{border-color:#fff}
.footer-line{display:flex; align-items:center; gap:10px; padding-bottom:140px}
.counter{display:inline-flex; align-items:center; gap:6px; opacity:.85; border:1px solid var(--line);
  padding:3px 8px; border-radius:999px; background:rgba(255,255,255,.03)}