/* ============================================================
   PARCIVAL MUSIC — underground brutalist
   Single shared stylesheet for all pages.
   ============================================================ */

:root{
  --bg:#000;
  --fg:#fff;
  --line:#ffffff;
  --muted:#8a8a8a;
  --acid:#5a6cff;            /* electric blue-violet accent */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.mono{font-family:"Space Mono",monospace}
.up{text-transform:uppercase}

/* ---------- NAV ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.nav .brand{
  font-family:"Space Mono",monospace;font-weight:700;
  letter-spacing:.14em;font-size:14px;
}
.nav .brand .dot{color:var(--acid)}
.nav ul{list-style:none;display:flex;gap:22px}
.nav ul a{
  font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
  padding-bottom:2px;transition:color .15s,border-color .15s;
  border-bottom:1px solid transparent;
}
.nav ul a:hover,.nav ul a.active{color:var(--fg);border-bottom-color:var(--acid)}

/* ---------- MARQUEE ---------- */
.marquee{
  border-bottom:1px solid var(--line);
  overflow:hidden;white-space:nowrap;background:var(--bg);
}
.marquee .track{
  display:inline-block;padding:9px 0;
  font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;
  animation:scroll 34s linear infinite;
}
.marquee .track span{margin:0 26px;color:var(--fg)}
.marquee .track span.k{color:var(--acid)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- HERO (home) ---------- */
.hero{border-bottom:1px solid var(--line)}
.hero .name{
  font-family:"Anton",sans-serif;text-transform:uppercase;
  line-height:.82;letter-spacing:-.01em;
  font-size:clamp(56px,15.5vw,240px);
  padding:26px 18px 8px;
}
.hero .name .slash{color:var(--acid)}
.hero-body{
  display:grid;grid-template-columns:1fr 320px;
  border-top:1px solid var(--line);
}
.hero-photo{
  position:relative;min-height:420px;
  background:#0a0a0a;overflow:hidden;
  border-right:1px solid var(--line);
}
.hero-photo img{
  width:100%;height:100%;object-fit:cover;
  filter:contrast(1.06) saturate(1.04);
}
.hero-meta{display:flex;flex-direction:column;justify-content:space-between}
.meta-row{padding:16px 20px;border-bottom:1px solid var(--line)}
.meta-row:last-child{border-bottom:none}
.meta-row .k{
  font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px;
}
.meta-row .v{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:16px;
  text-transform:uppercase;letter-spacing:.02em;
}
.cta{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px;background:var(--acid);color:#fff;
  font-family:"Space Mono",monospace;font-weight:700;font-size:15px;
  letter-spacing:.14em;text-transform:uppercase;
  transition:background .15s,color .15s;
}
.cta:hover{background:#fff;color:#000}

/* ---------- INTERIOR PAGE HERO ---------- */
.page-hero{
  border-bottom:1px solid var(--line);
  display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px;
  padding:60px 22px 22px;
}
.page-hero h1{
  font-family:"Anton",sans-serif;text-transform:uppercase;line-height:.86;
  font-size:clamp(52px,11vw,150px);letter-spacing:-.01em;
}
.page-hero h1 .slash{color:var(--acid)}
.page-hero .sub{
  font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);padding-bottom:10px;
}

/* ---------- SECTION SCAFFOLD ---------- */
.sec-head{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--line);
}
.sec-head h2{
  font-family:"Anton",sans-serif;text-transform:uppercase;
  font-size:clamp(26px,4vw,44px);letter-spacing:0;line-height:1;
}
.sec-head .idx{
  font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.2em;
  color:var(--muted);text-transform:uppercase;
}

/* ---------- FEATURED / ALBUM CARDS ---------- */
.featured{display:grid;grid-template-columns:452px 1fr;border-bottom:1px solid var(--line)}
.featured .cover{border-right:1px solid var(--line);background:#0a0a0a}
.featured .cover img{width:100%;height:100%;object-fit:cover}
.featured .info{display:flex;flex-direction:column;justify-content:space-between;padding:28px 26px}
.tag{
  font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--acid);
}
.featured .title{
  font-family:"Anton",sans-serif;text-transform:uppercase;line-height:.9;
  font-size:clamp(40px,6vw,88px);margin:14px 0 18px;
}
.featured .desc{
  font-family:"Space Mono",monospace;font-size:13px;line-height:1.9;
  color:var(--muted);text-transform:uppercase;letter-spacing:.04em;max-width:46ch;
}
.btn-row{display:flex;gap:0;margin-top:26px;border:1px solid var(--line)}
.btn-row a{
  flex:1;text-align:center;padding:16px 10px;
  font-family:"Space Mono",monospace;font-weight:700;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;
  transition:background .15s,color .15s;
}
.btn-row a:first-child{border-right:1px solid var(--line)}
.btn-row a:hover{background:var(--fg);color:#000}

/* Albums list: reuse .featured, alternate on wide screens */
.album+.album{border-top:0}

/* ---------- CURRENT WORK / TRACK GRID ---------- */
.tracks{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.track{border-right:1px solid var(--line);position:relative;overflow:hidden;background:#0a0a0a}
.track:last-child{border-right:none}
.track img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  filter:grayscale(1) contrast(1.1);
  transition:filter .25s,transform .5s;
}
.track:hover img{filter:grayscale(0) contrast(1);transform:scale(1.03)}
.track .lbl{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-top:1px solid var(--line);
  font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;
}
.track .lbl .no{color:var(--acid)}
.track .lbl .play{color:var(--muted);transition:color .15s}
.track:hover .lbl .play{color:var(--fg)}

/* ---------- SPOTIFY / EMBEDS ---------- */
.embed-wrap{padding:22px;border-bottom:1px solid var(--line);background:#000}
.embed-wrap iframe{width:100%;border:1px solid var(--line);border-radius:0;display:block}

/* ---------- ABOUT ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.about-photo{background:#0a0a0a;border-right:1px solid var(--line);min-height:460px;overflow:hidden}
.about-photo img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05)}
.about-text{padding:34px 30px;display:flex;flex-direction:column;justify-content:center}
.about-text .lead{
  font-family:"Anton",sans-serif;text-transform:uppercase;line-height:.98;
  font-size:clamp(28px,3.6vw,52px);margin-bottom:24px;
}
.about-text .lead .k{color:var(--acid)}
.about-text p{
  font-family:"Space Mono",monospace;font-size:13px;line-height:2;
  color:var(--muted);text-transform:uppercase;letter-spacing:.03em;max-width:52ch;
}
.about-text p+p{margin-top:16px}
.chips-head{
  padding:18px 22px;border-bottom:1px solid var(--line);
  font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}
.chips{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.chip{
  padding:16px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(18px,2.4vw,30px);
  letter-spacing:.01em;transition:background .15s,color .15s;
}
.chip:hover{background:var(--acid);color:#fff}

/* ---------- VIDEO GALLERY (film) ---------- */
.film-grid{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.film-item{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.film-item:nth-child(2n){border-right:none}
.film-frame{aspect-ratio:16/9;background:#0a0a0a}
.film-frame iframe{width:100%;height:100%;border:0;display:block}
.film-cap{padding:14px 18px 18px}
.film-cap .ttl{
  font-family:"Anton",sans-serif;text-transform:uppercase;font-size:22px;margin-bottom:8px;
}
.film-cap .no{color:var(--acid);font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.2em}
.film-cap p{
  font-family:"Space Mono",monospace;font-size:11px;line-height:1.9;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em;margin-top:8px;
}
.note{
  padding:18px 22px;border-bottom:1px solid var(--line);
  font-family:"Space Mono",monospace;font-size:11px;line-height:1.9;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;
}
.note b{color:var(--acid);font-weight:700}

/* ---------- CONTACT ---------- */
.contact-hero{padding:70px 22px;border-bottom:1px solid var(--line)}
.contact-hero .k{
  font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:20px;
}
.contact-hero .big-email{
  font-family:"Anton",sans-serif;text-transform:uppercase;
  font-size:clamp(30px,8vw,110px);line-height:.9;display:inline-block;
  word-break:break-word;transition:color .15s;
}
.contact-hero .big-email:hover{color:var(--acid)}
.contact-cols{display:grid;grid-template-columns:1fr 380px;border-bottom:1px solid var(--line)}
.contact-links{display:flex;flex-direction:column}
.contact-links a{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px;border-bottom:1px solid var(--line);
  font-family:"Space Mono",monospace;font-weight:700;font-size:15px;
  letter-spacing:.14em;text-transform:uppercase;transition:background .15s,color .15s;
}
.contact-links a:last-child{border-bottom:none}
.contact-links a:hover{background:var(--acid);color:#fff}
.contact-photo{background:#0a0a0a;border-left:1px solid var(--line);overflow:hidden;min-height:360px}
.contact-photo img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05)}

/* ---------- FOOTER ---------- */
.foot{padding:44px 22px 30px}
.foot .contact-k{
  font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px;
}
.foot .email{
  font-family:"Anton",sans-serif;text-transform:uppercase;
  font-size:clamp(30px,7vw,86px);line-height:.9;
  transition:color .15s;display:inline-block;word-break:break-word;
}
.foot .email:hover{color:var(--acid)}
.foot-bottom{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
  margin-top:44px;padding-top:20px;border-top:1px solid var(--line);
}
.foot-bottom .cp{
  font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.socials{display:flex;gap:18px}
.socials a{
  font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid transparent;padding-bottom:2px;transition:color .15s,border-color .15s;
}
.socials a:hover{color:var(--fg);border-bottom-color:var(--acid)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:860px){
  .nav ul{gap:14px;flex-wrap:wrap;justify-content:flex-end}
  .nav ul a{font-size:10px}
  .hero-body{grid-template-columns:1fr}
  .hero-photo{border-right:none;border-bottom:1px solid var(--line);min-height:340px}
  .featured{grid-template-columns:1fr}
  .featured .cover{border-right:none;border-bottom:1px solid var(--line)}
  .tracks{grid-template-columns:1fr}
  .track{border-right:none;border-bottom:1px solid var(--line)}
  .about-grid{grid-template-columns:1fr}
  .about-photo{border-right:none;border-bottom:1px solid var(--line);min-height:340px}
  .film-grid{grid-template-columns:1fr}
  .film-item{border-right:none}
  .contact-cols{grid-template-columns:1fr}
  .contact-photo{border-left:none;border-top:1px solid var(--line);min-height:300px}
}