/* Total Illusion — shared styles (design system from v1 prototype) */
:root{
  --bg:#0b0910;
  --bg-2:#171320;
  --panel:#1d1826;
  --plum:#4a3f5c;
  --teal:#4b7a7b;
  --teal-light:#8fcac2;
  --chrome:#dfe9e6;
  --ink:#050506;
  --text:#e9e6ea;
  --font-display:'Orbitron', sans-serif;
  --font-body:'Space Grotesk', sans-serif;
  --font-mono:'Space Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.55;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{flex:1;}
a{color:inherit;}
button{font-family:inherit; cursor:pointer;}
img{max-width:100%;}
:focus-visible{outline:3px solid var(--teal-light); outline-offset:3px;}

/* Nav */
nav{
  position:sticky; top:0; z-index:99;
  background:rgba(11,9,16,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(223,233,230,0.15);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; flex-wrap:wrap; gap:10px;
}
.nav-brand img{height:26px; display:block;}
.nav-links{display:flex; gap:2px; flex-wrap:wrap;}
.nav-links a{
  text-decoration:none;
  border:1px solid transparent;
  color:var(--text);
  font-family:var(--font-mono);
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  padding:8px 10px;
  border-radius:2px;
  transition:border-color 0.15s ease, color 0.15s ease;
}
.nav-links a:hover{border-color:var(--teal-light); color:var(--teal-light);}
.nav-links a[aria-current="page"]{border-color:var(--teal); color:var(--teal-light); background:rgba(75,122,123,0.12);}

/* Layout */
.wrap{max-width:1080px; margin:0 auto; padding:0 20px;}
.section{padding:48px 20px;}
.section h1, .section h2{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(1.4rem, 3.4vw, 2rem);
  letter-spacing:0.03em;
  margin-bottom:8px;
}
.eyebrow{
  font-family:var(--font-mono);
  color:var(--teal-light);
  text-transform:uppercase;
  font-size:0.72rem;
  letter-spacing:0.1em;
}
.lede{max-width:560px; margin-bottom:22px; color:rgba(233,230,234,0.8);}

/* Buttons */
.btn{
  display:inline-block;
  text-decoration:none;
  text-align:center;
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-size:0.78rem;
  padding:13px 24px;
  border:1px solid var(--chrome);
  border-radius:3px;
  background:transparent;
  color:var(--chrome);
  transition:background 0.15s ease, color 0.15s ease;
}
.btn:hover{background:var(--chrome); color:var(--ink);}
.btn.primary{background:var(--teal); border-color:var(--teal); color:#08110f;}
.btn.primary:hover{background:var(--teal-light); border-color:var(--teal-light);}

/* Placeholder tags */
.ph{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:0.62rem;
  color:var(--ink);
  background:var(--teal-light);
  padding:2px 6px;
  border-radius:2px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-left:6px;
  vertical-align:middle;
}
.ph-dark{background:#c9d3d0; color:#222;}

/* Home hero */
.hero{
  position:relative; overflow:hidden;
  min-height:72vh;
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid rgba(223,233,230,0.15);
}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(0.55) saturate(1.05);}
.hero-scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,9,16,0.35) 0%, rgba(11,9,16,0.55) 55%, var(--bg) 100%);}
.hero-inner{position:relative; z-index:2; max-width:760px; margin:0 auto; text-align:center; padding:80px 20px 60px;}
.hero .video-frame{
  position:relative;
  width:min(720px, 92vw);
  margin:0 auto;
  aspect-ratio:16/9;
  border:1px solid rgba(223,233,230,0.25);
  border-radius:6px;
  overflow:hidden;
  background:var(--ink);
}
.hero .video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.hero .wordmark-hero{width:min(360px, 70vw); display:block; margin:0 auto 22px;}
.hero .tagline{
  font-family:var(--font-mono); color:var(--teal-light);
  text-transform:uppercase; letter-spacing:0.1em; font-size:0.85rem; margin-top:18px;
}
.hero p.sub{margin:16px auto 0; max-width:520px; color:rgba(233,230,234,0.85); font-size:1.02rem;}
.hero-ctas{display:flex; gap:14px; justify-content:center; margin-top:28px; flex-wrap:wrap;}

/* Featured release card */
.feature-card{
  display:grid; grid-template-columns:220px 1fr; gap:24px;
  background:var(--panel);
  border:1px solid rgba(223,233,230,0.15);
  border-radius:6px; overflow:hidden;
  text-decoration:none;
  transition:border-color 0.15s ease;
}
.feature-card:hover{border-color:var(--teal-light);}
.feature-card img{width:100%; height:100%; object-fit:cover; display:block;}
.feature-card .body{padding:22px 24px 22px 0; display:flex; flex-direction:column; justify-content:center; gap:6px;}
.feature-card .kicker{font-family:var(--font-mono); color:var(--teal-light); text-transform:uppercase; font-size:0.68rem; letter-spacing:0.1em;}
.feature-card h3{font-family:var(--font-display); text-transform:uppercase; font-size:1.35rem; letter-spacing:0.02em;}
.feature-card .label-credit{font-family:var(--font-mono); font-size:0.72rem; color:rgba(233,230,234,0.6);}
@media (max-width:640px){
  .feature-card{grid-template-columns:1fr;}
  .feature-card .body{padding:18px 20px 22px;}
}

/* Player panels */
.player-panel{
  background:var(--panel);
  border:1px solid rgba(223,233,230,0.15);
  border-radius:6px;
  padding:16px;
}
.player-panel iframe{width:100%; border:none; border-radius:4px; display:block;}
.fallback-link{
  display:block; margin-top:10px;
  font-family:var(--font-mono); font-size:0.72rem;
  color:rgba(233,230,234,0.6);
}
.fallback-link a{color:var(--teal-light);}
.shuffle-row{display:flex; align-items:center; gap:14px; margin-top:14px; flex-wrap:wrap;}
.shuffle-btn{
  font-family:var(--font-mono); text-transform:uppercase; font-size:0.72rem; letter-spacing:0.05em;
  background:var(--teal); color:#08110f; border:none; padding:11px 18px; border-radius:3px;
}
.shuffle-btn:hover{background:var(--teal-light);}
.shuffle-status{font-family:var(--font-mono); font-size:0.72rem; color:rgba(233,230,234,0.6);}

/* EP pages */
.ep-head{padding:36px 20px 8px;}
.ep-head .eyebrow{margin-bottom:4px;}
.ep-head h1{font-size:clamp(1.6rem, 5vw, 2.6rem); margin-bottom:4px;}
.ep-head .label-credit{font-family:var(--font-mono); font-size:0.78rem; color:rgba(233,230,234,0.65);}
.ep-head .label-credit a{color:var(--teal-light);}
.ep-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; padding-top:24px;}
.ep-art img{width:100%; border-radius:6px; border:1px solid rgba(223,233,230,0.15); display:block;}
.ep-art figcaption{font-family:var(--font-mono); font-size:0.68rem; color:rgba(233,230,234,0.5); margin-top:8px; text-transform:uppercase; letter-spacing:0.05em;}
@media (max-width:820px){
  .ep-grid{grid-template-columns:1fr;}
  .ep-play{order:-1;} /* embed first on mobile: one tap to play */
}
.tracklist{list-style:none; margin-top:20px; border-top:1px solid rgba(223,233,230,0.12);}
.tracklist li{
  display:flex; align-items:baseline; gap:12px;
  padding:12px 4px;
  border-bottom:1px solid rgba(223,233,230,0.12);
  font-size:0.95rem;
}
.tracklist .n{font-family:var(--font-mono); color:var(--teal-light); font-size:0.75rem; min-width:1.4em;}
.tracklist .bpm{
  margin-left:auto;
  font-family:var(--font-mono); font-size:0.7rem;
  color:var(--ink); background:var(--teal-light);
  padding:2px 7px; border-radius:2px;
}
.ep-backlink{margin-top:22px;}

/* Music page cards */
.release-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:22px; margin-bottom:36px;}
.release-card{
  background:var(--panel);
  border:1px solid rgba(223,233,230,0.15);
  border-radius:6px; overflow:hidden;
  text-decoration:none;
  transition:border-color 0.15s ease, transform 0.15s ease;
  display:block;
}
.release-card:hover{border-color:var(--teal-light); transform:translateY(-3px);}
.release-card img{width:100%; display:block; aspect-ratio:1/1; object-fit:cover;}
.release-card .body{padding:14px 16px 18px;}
.release-card h3{font-family:var(--font-display); text-transform:uppercase; font-size:1.05rem; letter-spacing:0.02em;}
.release-card .label-credit{font-family:var(--font-mono); font-size:0.7rem; color:rgba(233,230,234,0.6); margin-top:4px;}

/* Bio */
.bio-layout{display:grid; grid-template-columns:2fr 1fr; gap:32px;}
@media (max-width:720px){.bio-layout{grid-template-columns:1fr;}}
.bio-text p{margin-bottom:16px; font-size:1.02rem;}
.glossary{
  background:var(--panel); border:1px solid rgba(223,233,230,0.15);
  border-radius:6px; padding:20px; align-self:start;
}
.glossary .term{font-family:var(--font-display); text-transform:uppercase; color:var(--teal-light); font-size:1.05rem;}
.glossary .pos{font-family:var(--font-mono); font-size:0.68rem; color:rgba(233,230,234,0.55); text-transform:uppercase;}
.glossary p{margin-top:8px; font-size:0.9rem;}

/* Merch */
.merch-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:22px;}
.merch-card{background:var(--panel); border:1px solid rgba(223,233,230,0.15); border-radius:6px; overflow:hidden;}
.merch-card img{width:100%; display:block;}
.merch-body{padding:16px 18px 20px;}
.merch-body h3{font-family:var(--font-display); text-transform:uppercase; font-size:1rem; letter-spacing:0.02em;}
.merch-body .price{font-family:var(--font-mono); color:var(--teal-light); margin-top:6px; font-size:0.85rem;}
.merch-body p.note{font-size:0.85rem; color:rgba(233,230,234,0.65); margin-top:8px;}
.merch-body .btn{margin-top:14px;}

/* Press */
.press-group{margin-bottom:36px;}
.press-group h2{font-size:1.1rem; margin-bottom:14px;}
.press-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:12px;}
.press-item{
  display:flex; flex-direction:column; gap:2px;
  background:var(--panel);
  border:1px solid rgba(223,233,230,0.15);
  border-radius:4px;
  padding:14px 16px;
  text-decoration:none;
  transition:border-color 0.15s ease;
}
.press-item:hover{border-color:var(--teal-light);}
.press-item .name{font-size:0.9rem; font-weight:500;}
.press-item .meta{font-family:var(--font-mono); font-size:0.68rem; color:rgba(233,230,234,0.55);}
.press-bio{background:var(--panel); border:1px solid rgba(223,233,230,0.15); border-radius:6px; padding:20px 22px; max-width:640px; margin-bottom:36px;}
.press-bio p{font-size:0.95rem; margin-bottom:12px;}
.press-bio p:last-child{margin-bottom:0;}

/* Book Us */
.calm-panel{background:var(--chrome); color:var(--ink); border-radius:6px; padding:36px; max-width:640px;}
.calm-panel img{height:34px; margin-bottom:18px;}
.calm-panel h2{font-family:var(--font-display); text-transform:uppercase; font-size:1.4rem; margin-bottom:6px; letter-spacing:0.02em; color:var(--ink);}
.calm-panel .sub{color:#3d4442; margin-bottom:22px;}
.info-list{list-style:none;}
.info-list li{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid rgba(0,0,0,0.12); font-size:0.95rem;}
.info-list li:last-child{border-bottom:none;}
.info-list .k{color:#5a625f; font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; white-space:nowrap;}
.calm-cta{
  margin-top:24px; display:inline-block; background:var(--ink); color:var(--chrome);
  font-family:var(--font-mono); text-transform:uppercase; font-size:0.78rem; letter-spacing:0.05em;
  padding:14px 24px; border-radius:3px; text-decoration:none;
}

/* Contact */
.social-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:16px;}
.social-card{
  display:flex; align-items:center; gap:14px;
  border:1px solid rgba(223,233,230,0.18);
  border-radius:4px; padding:16px; background:var(--panel);
  text-decoration:none;
  transition:border-color 0.15s ease;
}
.social-card:hover{border-color:var(--teal-light);}
.social-card svg{width:24px; height:24px; fill:var(--teal-light); flex-shrink:0;}
.social-card .label{font-family:var(--font-display); text-transform:uppercase; font-size:0.92rem; letter-spacing:0.02em;}
.social-card .handle{font-family:var(--font-mono); font-size:0.72rem; color:rgba(233,230,234,0.55); word-break:break-all;}

/* Footer */
footer{
  border-top:1px solid rgba(223,233,230,0.15);
  padding:26px 20px; text-align:center;
  font-family:var(--font-mono); font-size:0.68rem;
  color:rgba(233,230,234,0.5); text-transform:uppercase; letter-spacing:0.05em;
}
footer a{color:rgba(233,230,234,0.7);}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important; animation:none !important;}
}