/* =========================================================
   ZUPERKING — Cinematic design system
   ========================================================= */
:root{
  --bg:#0b0b0d; --bg2:#101013; --bg3:#16161b; --panel:#181820;
  --ink:#f4f3f1; --soft:#cbcac6; --muted:#94949a; --faint:#6a6a70;
  --line:#26262c; --line2:#33333b;
  --gold:#c9a24b; --gold-soft:#dcbb72; --gold-deep:#a07f31;
  --max:1280px; --rad:4px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;font-weight:300;
  line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body.no-scroll{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:#15120a}

/* global film grain */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9000;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- typography ---------- */
.disp,h1,h2,h3{font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.02em;line-height:.95}
.serif{font-family:'Cormorant Garamond',serif}
.eyebrow{font-family:'Inter';text-transform:uppercase;letter-spacing:.4em;font-size:.66rem;font-weight:500;color:var(--gold);display:inline-block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 34px}
.pad{padding:clamp(72px,11vw,150px) 0}
section{position:relative}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Inter';font-weight:500;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;padding:14px 26px;cursor:pointer;transition:.28s var(--ease);
  border:1px solid var(--line2);background:transparent;color:var(--ink);border-radius:var(--rad)}
.btn .i{width:15px;height:15px;fill:currentColor}
.btn-gold{background:var(--gold);color:#15120a;border-color:var(--gold)}
.btn-gold:hover{background:transparent;color:var(--gold);box-shadow:0 0 30px rgba(201,162,75,.25)}
.btn-line:hover{border-color:var(--ink);background:rgba(255,255,255,.05)}
.btn-sm{padding:10px 18px;font-size:.72rem}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;transition:.4s var(--ease);
  background:linear-gradient(180deg,rgba(8,8,10,.6),transparent)}
.nav.solid{background:rgba(9,9,11,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .in{max-width:var(--max);margin:0 auto;padding:18px 34px;display:flex;align-items:center;justify-content:space-between;transition:.4s var(--ease)}
.nav.solid .in{padding-top:13px;padding-bottom:13px}
.brand{font-family:'Bebas Neue';font-size:1.7rem;letter-spacing:.16em;display:flex;align-items:center;gap:12px}
.brand img{height:26px;mix-blend-mode:screen}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links>a{font-size:.8rem;letter-spacing:.08em;color:var(--ink);opacity:.82;transition:.2s;position:relative;padding:4px 0}
.nav-links>a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--gold);transition:.3s var(--ease)}
.nav-links>a:hover{opacity:1}.nav-links>a:hover::after{width:100%}

/* language switch */
.lang{display:flex;gap:2px;align-items:center;border:1px solid var(--line2);border-radius:30px;padding:3px}
.lang button{background:none;border:none;color:var(--muted);font-family:'Inter';font-size:.7rem;font-weight:600;
  letter-spacing:.06em;cursor:pointer;padding:5px 10px;border-radius:30px;transition:.2s}
.lang button.on{background:var(--gold);color:#15120a}
.lang button:not(.on):hover{color:var(--ink)}

.nav-toggle{display:none;background:none;border:none;cursor:pointer;width:30px;height:24px;position:relative;z-index:1100}
.nav-toggle span{position:absolute;left:0;height:2px;width:100%;background:var(--ink);transition:.3s var(--ease)}
.nav-toggle span:nth-child(1){top:2px}.nav-toggle span:nth-child(2){top:11px}.nav-toggle span:nth-child(3){top:20px}
body.menu-open .nav-toggle span:nth-child(1){top:11px;transform:rotate(45deg)}
body.menu-open .nav-toggle span:nth-child(2){opacity:0}
body.menu-open .nav-toggle span:nth-child(3){top:11px;transform:rotate(-45deg)}

/* ---------- hero ---------- */
.hero{height:100svh;min-height:600px;position:relative;display:flex;align-items:flex-end;overflow:hidden}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center 28%;
  background-repeat:no-repeat;animation:slowzoom 20s var(--ease) forwards;will-change:transform}
@keyframes slowzoom{from{transform:scale(1.1)}to{transform:scale(1)}}
.hero .bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(11,11,13,.55) 0%,rgba(11,11,13,.05) 28%,rgba(11,11,13,.78) 76%,var(--bg) 100%)}
.hero .grain{position:absolute;inset:0;z-index:2;opacity:.07;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero .inner{position:relative;z-index:3;width:100%;padding-bottom:9vh}
.hero h1{font-size:clamp(4.6rem,19vw,17rem);letter-spacing:.01em}
.hero .lead{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:26px;margin-top:6px}
.hero .tagline{font-family:'Cormorant Garamond';font-style:italic;font-size:clamp(1.3rem,3vw,2.1rem);max-width:24ch}
.hero .lead p.sub{color:var(--soft);font-size:1rem;margin-top:8px;max-width:42ch}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.scrollcue{position:absolute;left:34px;bottom:26px;z-index:3;font-size:.64rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:12px}
.scrollcue::before{content:"";width:48px;height:1px;background:var(--gold);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%,100%{transform:scaleX(.4);opacity:.4;transform-origin:left}50%{transform:scaleX(1);opacity:1;transform-origin:left}}

/* ---------- section header ---------- */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:54px;flex-wrap:wrap}
.shead .lhs .eyebrow{margin-bottom:14px}
.shead h2{font-size:clamp(2.8rem,8vw,5.6rem)}
.shead .rule{flex:1;height:1px;background:var(--line);margin-bottom:16px;min-width:40px}

/* ---------- music ---------- */
.music{background:var(--bg)}
.music-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:start}
.player{background:var(--bg2);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
.player .head{display:flex;align-items:center;gap:16px;padding:20px 22px;border-bottom:1px solid var(--line)}
.player .head img{width:64px;height:64px;object-fit:cover;border-radius:3px}
.player .head .t .k{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.player .head .t h3{font-size:1.6rem;margin-top:2px}
.player .head .t p{font-size:.82rem;color:var(--muted)}
.tracklist{list-style:none}
.track{display:grid;grid-template-columns:34px 1fr auto auto;gap:14px;align-items:center;padding:13px 22px;
  border-bottom:1px solid var(--line);cursor:pointer;transition:.2s;font-size:.92rem}
.track:last-child{border-bottom:none}
.track:hover{background:var(--bg3)}
.track.playing{background:rgba(201,162,75,.07)}
.track .pbtn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);background:transparent;
  display:grid;place-items:center;cursor:pointer;transition:.2s;color:var(--ink)}
.track:hover .pbtn,.track.playing .pbtn{border-color:var(--gold);color:var(--gold)}
.track .pbtn svg{width:13px;height:13px;fill:currentColor}
.track .pbtn .play-i{margin-left:1px}
.track .pbtn .pause-i{display:none}
.track.playing .pbtn .play-i{display:none}
.track.playing .pbtn .pause-i{display:block}
.track .nm{font-weight:400}
.track .nm small{display:block;color:var(--muted);font-size:.74rem;letter-spacing:.02em}
.track .free{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-deep);padding:3px 8px;border-radius:20px}
.track .dur{color:var(--muted);font-size:.82rem;font-variant-numeric:tabular-nums}
.player .bar{display:flex;align-items:center;gap:14px;padding:16px 22px;border-top:1px solid var(--line);background:var(--bg3)}
.player .bar .now{font-size:.78rem;color:var(--soft);min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .bar .now b{color:var(--gold);font-weight:500}
.progress{flex:2;height:4px;background:var(--line2);border-radius:3px;cursor:pointer;position:relative}
.progress .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--gold);border-radius:3px}
.player .note{font-size:.72rem;color:var(--faint);padding:10px 22px;background:var(--bg3);border-top:1px solid var(--line)}

.spotify-wrap{display:flex;flex-direction:column;gap:18px}
.spotify-wrap .lbl{display:flex;align-items:center;gap:10px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.spotify-wrap iframe{width:100%;border:0;border-radius:12px;background:var(--bg2)}
.streamrow{display:flex;gap:10px;flex-wrap:wrap}
.streamrow a{font-size:.74rem;letter-spacing:.06em;color:var(--soft);border:1px solid var(--line2);padding:8px 14px;border-radius:30px;transition:.2s}
.streamrow a:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- shows ---------- */
.shows{background:var(--bg2);border-top:1px solid var(--line)}
.upcoming-empty{border:1px solid var(--line);border-radius:var(--rad);background:var(--panel);padding:34px;text-align:center;margin-bottom:30px;position:relative;overflow:hidden}
.upcoming-empty::before{content:"";position:absolute;inset:0;background:radial-gradient(closest-side at 50% 0,rgba(201,162,75,.1),transparent)}
.upcoming-empty h3{font-size:clamp(1.6rem,4vw,2.4rem);position:relative}
.upcoming-empty p{color:var(--muted);position:relative;margin-top:6px}
.upcoming-empty p a{color:var(--gold)}
.show-list{display:flex;flex-direction:column}
.srow{display:grid;grid-template-columns:150px 1fr auto;gap:30px;align-items:center;padding:26px 6px;
  border-bottom:1px solid var(--line);transition:.3s var(--ease)}
.srow:first-child{border-top:1px solid var(--line)}
.srow:hover{padding-left:18px;background:rgba(201,162,75,.035)}
.srow .d{font-family:'Bebas Neue';font-size:1.6rem;color:var(--gold)}
.srow .d span{display:block;font-family:'Inter';font-weight:300;font-size:.72rem;letter-spacing:.18em;color:var(--muted)}
.srow .v{font-family:'Bebas Neue';font-size:1.55rem;letter-spacing:.03em}
.srow .v span{display:block;font-family:'Inter';font-weight:300;color:var(--muted);font-size:.86rem;letter-spacing:.01em}
.srow .s{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.bookbar{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:46px;
  padding:32px;border:1px solid var(--line);border-radius:var(--rad);background:var(--panel)}
.bookbar p{font-family:'Cormorant Garamond';font-style:italic;font-size:clamp(1.4rem,3.5vw,2.1rem)}

/* ---------- video ---------- */
.video{background:var(--bg)}
.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px}
.vcard{position:relative;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;background:var(--bg2);cursor:pointer;transition:.3s var(--ease)}
.vcard:hover{transform:translateY(-5px);border-color:var(--line2)}
.vcard .thumb{aspect-ratio:16/9;position:relative;overflow:hidden}
.vcard .thumb img{width:100%;height:100%;object-fit:cover;filter:brightness(.7);transition:.5s}
.vcard:hover .thumb img{filter:brightness(.55) scale(1.05)}
.vcard .pv{position:absolute;inset:0;display:grid;place-items:center}
.vcard .pv span{width:64px;height:64px;border-radius:50%;background:rgba(201,162,75,.92);display:grid;place-items:center;transition:.3s}
.vcard:hover .pv span{transform:scale(1.1)}
.vcard .pv svg{width:22px;height:22px;fill:#15120a;margin-left:3px}
.vcard .cap{padding:16px 18px}
.vcard .cap h4{font-family:'Bebas Neue';font-size:1.3rem;letter-spacing:.03em}
.vcard .cap p{font-size:.8rem;color:var(--muted)}
.vcard iframe{width:100%;aspect-ratio:16/9;border:0;display:block}

/* ---------- gallery ---------- */
.gallery{background:var(--bg2);border-top:1px solid var(--line)}
.ggrid{columns:3;column-gap:14px}
.ggrid .gi{break-inside:avoid;margin-bottom:14px;position:relative;overflow:hidden;border-radius:3px;cursor:pointer}
.ggrid .gi img{width:100%;transition:.6s var(--ease);filter:grayscale(.25)}
.ggrid .gi:hover img{transform:scale(1.06);filter:grayscale(0)}
.ggrid .gi::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,11,13,.4),transparent 60%);opacity:0;transition:.3s}
.ggrid .gi:hover::after{opacity:1}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:2000;background:rgba(6,6,8,.95);display:none;align-items:center;justify-content:center;padding:30px}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:3px;box-shadow:0 30px 90px rgba(0,0,0,.7)}
.lightbox .lb-close,.lightbox .lb-nav{position:absolute;background:rgba(255,255,255,.08);border:1px solid var(--line2);
  color:var(--ink);cursor:pointer;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font-size:1.3rem;transition:.2s}
.lightbox .lb-close:hover,.lightbox .lb-nav:hover{background:var(--gold);color:#15120a;border-color:var(--gold)}
.lightbox .lb-close{top:24px;right:24px}
.lightbox .lb-nav{top:50%;transform:translateY(-50%)}
.lightbox .lb-prev{left:24px}.lightbox .lb-next{right:24px}
.lightbox .lb-count{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-size:.8rem;letter-spacing:.16em;color:var(--muted)}

/* ---------- bio ---------- */
.bio{background:var(--bg)}
.bgrid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
.bgrid .ph{overflow:hidden;min-height:440px}
.bgrid .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) contrast(1.05);transition:.6s var(--ease)}
.bgrid .ph:hover img{filter:grayscale(0);transform:scale(1.03)}
.bgrid .tx{padding:clamp(34px,5vw,68px);display:flex;flex-direction:column;justify-content:center;background:var(--bg2)}
.bgrid .tx .eyebrow{margin-bottom:18px}
.bgrid .tx h2{font-size:clamp(2.6rem,5.5vw,4rem);margin-bottom:22px}
.bgrid .tx p.lead{font-family:'Cormorant Garamond';font-style:italic;font-size:1.55rem;line-height:1.4;color:var(--ink);margin-bottom:18px}
.bgrid .tx p{color:var(--soft);margin-bottom:16px;max-width:50ch}
.crew{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px}
.crew span{font-size:.84rem;letter-spacing:.03em;color:var(--muted);padding-bottom:5px;border-bottom:1px solid var(--gold-deep)}

/* ---------- newsletter ---------- */
.news{background:var(--bg2);border-top:1px solid var(--line);text-align:center}
.news .eyebrow{margin-bottom:16px}
.news h2{font-size:clamp(2.4rem,6vw,4.4rem)}
.news p{color:var(--soft);max-width:44ch;margin:14px auto 30px}
.news form{display:flex;gap:12px;max-width:480px;margin:0 auto;flex-wrap:wrap}
.news input{flex:1;min-width:220px;background:var(--bg);border:1px solid var(--line2);color:var(--ink);
  padding:15px 18px;border-radius:var(--rad);font-family:'Inter';font-size:.92rem}
.news input:focus{outline:none;border-color:var(--gold)}
.news .ok{color:var(--gold);margin-top:18px;font-family:'Cormorant Garamond';font-style:italic;font-size:1.3rem;display:none}
.news .ok.show{display:block}

/* ---------- footer ---------- */
footer{background:var(--bg);border-top:1px solid var(--line);padding:90px 0 38px}
.fcta{text-align:center;margin-bottom:64px}
.fcta .eyebrow{margin-bottom:18px}
.fcta .big{font-family:'Bebas Neue';font-size:clamp(3.4rem,12vw,9rem);line-height:.9}
.fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding-top:48px;border-top:1px solid var(--line)}
.fcols .brand{margin-bottom:14px}
.fcols p.tg{color:var(--muted);font-size:.9rem;max-width:30ch}
.fcols .cap{text-transform:uppercase;letter-spacing:.2em;font-size:.66rem;color:var(--gold);margin-bottom:14px}
.fcols a.fl{display:block;color:var(--soft);padding:5px 0;transition:.2s;font-size:.9rem}
.fcols a.fl:hover{color:var(--gold)}
.fbot{display:flex;justify-content:space-between;align-items:center;margin-top:60px;padding-top:24px;
  border-top:1px solid var(--line);color:var(--faint);font-size:.76rem;flex-wrap:wrap;gap:10px}
.fbot a:hover{color:var(--ink)}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:.9s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero .bg{animation:none}
  .scrollcue::before{animation:none}
}

/* ---------- page hero (sub pages) ---------- */
.page-hero{padding:160px 0 60px;border-bottom:1px solid var(--line);position:relative;background:var(--bg2)}
.page-hero .eyebrow{margin-bottom:16px}
.page-hero h1{font-size:clamp(3rem,9vw,6.5rem)}
.page-hero p{color:var(--soft);max-width:54ch;margin-top:16px}

/* EPK specifics */
.epk-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.epk-card{border:1px solid var(--line);border-radius:var(--rad);background:var(--bg2);padding:30px}
.epk-card h3{font-size:1.6rem;letter-spacing:.04em;margin-bottom:14px}
.epk-card p{color:var(--soft);font-size:.94rem;margin-bottom:12px}
.spectable{width:100%;border-collapse:collapse}
.spectable td{padding:11px 0;border-bottom:1px solid var(--line);font-size:.9rem;vertical-align:top}
.spectable td:first-child{color:var(--muted);width:42%;letter-spacing:.04em}
.dlrow{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.dl{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--line2);
  border-radius:var(--rad);padding:14px 18px;transition:.2s}
.dl:hover{border-color:var(--gold);background:rgba(201,162,75,.05)}
.dl .meta{font-size:.78rem;color:var(--muted)}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px;margin:30px 0}
.stat{border-left:2px solid var(--gold);padding-left:16px}
.stat b{font-family:'Bebas Neue';font-size:2.6rem;display:block;line-height:1}
.stat span{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .music-grid{grid-template-columns:1fr;gap:34px}
  .fcols{grid-template-columns:1fr 1fr;gap:30px}
  .ggrid{columns:2}
  .epk-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .wrap{padding:0 22px}
  .nav .in{padding:16px 22px}
  .nav-links{position:fixed;inset:0;background:rgba(9,9,11,.97);backdrop-filter:blur(8px);
    flex-direction:column;justify-content:center;gap:30px;transform:translateX(100%);transition:.45s var(--ease);z-index:1050}
  body.menu-open .nav-links{transform:none}
  .nav-links>a{font-size:1.5rem;font-family:'Bebas Neue';letter-spacing:.06em;opacity:1}
  .nav-links .lang{margin-top:10px}
  .nav-toggle{display:block}
  .bgrid{grid-template-columns:1fr}
  .bgrid .ph{min-height:300px}
  .srow{grid-template-columns:100px 1fr;gap:16px}
  .srow .s{grid-column:2;justify-self:start}
  .hero .lead{flex-direction:column;align-items:flex-start}
  .scrollcue{display:none}
  .ggrid{columns:2;column-gap:10px}
  .bookbar{flex-direction:column;align-items:flex-start}
  .fbot{flex-direction:column;align-items:flex-start}
}
@media(max-width:440px){.ggrid{columns:1}}