:root{
  --header-h:64px;
  --bg: #0a0a0a;
  --fg: #e7e7e7;
  --muted: #9aa0a6;
  --accent: #00FFD1;
  --alt: #111113;
  --maxw: 980px;
  --radius: 10px;
  
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}
a{color:var(--fg);text-decoration:none}
a:hover{text-decoration:underline}
img,iframe{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
.narrow{max-width:760px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:#fff;color:#000;padding:8px;border-radius:6px}

.site-header{position:sticky;top:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,.08);z-index: 1000;}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:"Press Start 2P",monospace;font-size:16px;letter-spacing:1px;display:inline-block}

.nav__toggle{display:none;background:none;border:1px solid rgba(255,255,255,.3);color:var(--fg);padding:8px 10px;border-radius:8px}
.nav__list{display:flex;gap:14px;list-style:none;margin:0;padding:0 z-index:1100;}
.nav__list a{padding:8px 10px;border-radius:8px}
.nav__list a:hover{background:rgba(255,255,255,.08);text-decoration:none}

.hero{display:grid;place-items:center;min-height:72vh;background:transparent}
.hero .title-glitch{font-family:"Press Start 2P",monospace;font-size: clamp(20px, 3vw, 36px);line-height:1.2;text-transform:uppercase;letter-spacing:2px;text-align:center}
.hero .title-glitch span:first-child{text-shadow:2px 0 var(--accent)}
.hero .title-glitch span:last-child{text-shadow:-2px 0 #ff2a6d}
.lede{color:var(--muted);text-align:center;margin-top:8px}
.cta-row{display:flex;gap:10px;justify-content:center;margin-top:16px}

.section{padding:48px 0}
.mono{font-family:"Press Start 2P",monospace;font-size:12px;line-height:1.8;letter-spacing:.4px}
.muted{color:var(--muted)}

.embed iframe{border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#000}
.btn{background:var(--accent);color:#111;font-weight:800;padding:10px 14px;border-radius:999px;border:0;display:inline-block}
.btn--ghost{background:transparent;color:var(--fg);border:1px solid rgba(255,255,255,.25)}

.site-footer{border-top:1px solid rgba(255,255,255,.08)}
.site-footer .wrap{padding:20px 18px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.icons{display:flex;gap:10px;list-style:none;margin:0;padding:0}
.icons a{display:inline-flex;line-height:0;padding:4px;border-radius:6px;border:1px solid rgba(255,255,255,.12)}
.icons svg{width:22px;height:22px}

@media (max-width:820px){
  :root{--header-h:56px}
  .nav__toggle{display:block}
  .nav__list{position:absolute;right:18px;top: var(--header-h);background:rgba(17,17,17,.98);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px;display:none;flex-direction:column z-index:1100;}
  .nav__list.open{display:flex}
}


.logo-home {
  max-width: 220px;
  margin: 0 auto 16px;
  display: block;
}
.band-photo {
  max-width: 100%;
  border-radius: 12px;
  margin-bottom: 20px;
}


/* Punk flicker background */
@keyframes flickerBg {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    background-color: var(--bg);
    background-image: radial-gradient(1000px 400px at 50% 20%, rgba(0,255,209,.12), transparent 60%);
  }
  20%, 24%, 55% {
    background-color: #0d0d0d;
    background-image: radial-gradient(1000px 400px at 50% 20%, rgba(255,42,109,.2), transparent 60%);
  }
}

body {
  animation: flickerBg 6s infinite;
}

body{ background:#000; }


/* Disco-tile wallpaper */
html {
  background: #000 url('assets/logo.jpg') repeat;
  background-size: 48px 48px; /* smaller, pixel-wallpaper style */
}
body { background: transparent; }

/* === Disco wallpaper across entire site === */
html, body { min-height: 100%; }
body{ background:#000; }
/* Darken the wallpaper slightly so white text remains readable */
body::before{content:"";position:fixed;left:0;right:0;top:var(--header-h);bottom:0;background:rgba(0,0,0,.58);pointer-events:none;z-index:0;}
/* Keep content above the overlay */
.site-header, main, .site-footer { position: relative; z-index: 1; }

.logo .invert{
  background: var(--accent);
  color:#111;
  padding:4px 8px;
  border-radius:6px;
  display:inline-block;
}
/* Hero title with single span now */
.title-glitch span{display:inline-block}
/* About page readability panel */
.text-panel{
  background: rgba(0,0,0,.62);
  padding: 14px 16px;
  border-radius: 10px;
  margin-top: 10px;
}
/* Music subsections */
.subhead{
  font-family:"Press Start 2P",monospace;
  font-size:12px;
  letter-spacing:.4px;
  margin:20px 0 8px;
  color: var(--fg);
}

/* Wallpaper tiled below header, fixed so it never overlaps footer on short pages */
html::before{
  content:"";
  position: fixed;
  left: 0; right: 0;
  top: var(--header-h); bottom: 0;
  background: #000 url('assets/logo.jpg') repeat 0 0 / 48px 48px;
  z-index: 0;
}

/* Home lede panel tweaks */
.hero .text-panel {
  display: inline-block;
  margin: 12px auto 0;
  padding: 4px 8px;
}
.hero .text-panel .lede {
  text-align: center;
  display: block;
  font-size: 14px;
  font-family: "Press Start 2P", monospace;
}

/* Refine home lede alignment */
.hero .text-panel {
  display: table;
  margin: 12px auto 0 auto; /* center horizontally */
  padding: 4px 8px;
}
.hero .text-panel .lede {
  text-align: center;
  font-size: 14px;
  font-family: "Press Start 2P", monospace;
}


@media (max-width: 480px) {
  html::before{
    background-size: calc(100vw / 8) calc(100vw / 8);
    background-position: 0 var(--header-h);
  }
}


/* === FINAL MOBILE NAV OVERRIDES (force vertical, clickable) === */
@media (max-width: 820px) {
  .nav__toggle { display: block !important; }
  .nav__list {
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    top: var(--header-h) !important;
    width: 100% !important;
    background: rgba(17,17,17,.98) !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    padding: 12px !important;
    display: none !important;
    flex-direction: column !important;
    gap: 10px !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
  }
  .nav__list.open { display: flex !important; }
  .nav__list li { display: block !important; }
  .nav__list a {
    display: block !important;
    width: 100% !important;
    padding: 14px 10px !important;
    background: transparent !important;
    border-radius: 8px !important;
  }
  .nav__list a:active,
  .nav__list a:focus,
  .nav__list a:hover { background: rgba(255,255,255,.08) !important; text-decoration: none !important; }
}

/* === Mobile nav: right-aligned vertical dropdown & top-most layer === */
@media (max-width: 820px) {
  .nav__list {
    align-items: flex-end !important; /* right-align items */
    z-index: 2147483647 !important;   /* sit above everything */
  }
  .nav__list a {
    text-align: right !important;
    width: auto !important;
    min-width: 160px;
  }
}

/* Prevent background scroll when mobile menu is open */
.no-scroll {
  overflow: hidden !important;
  height: 100vh !important;
  touch-action: none !important;
}


/* Replaced with fade-in-out animation */
@media (max-width: 820px) {
  .nav__list {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .nav__list.open {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Mobile menu fade-in-out animation */
@media (max-width: 820px) {
  .nav__list {
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .nav__list.open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
}