:root{--bg:#0e0f11;--bg2:#16181b;--ink:#ecebe7;--mute:#a7a6a1;--line:#2a2c30;--acc:#d9a441;--acc2:#f0c56a;--max:1120px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 Lato,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--acc2)}
h1,h2,h3{font-family:Jost,system-ui,sans-serif;line-height:1.1;margin:0 0 .5em}
h2{font-size:clamp(28px,4vw,40px);font-weight:600;letter-spacing:.02em}
h3{font-size:19px;font-weight:600;letter-spacing:.04em}
.wrap{max-width:var(--max);margin:0 auto;padding:72px 20px}
.band{background:var(--bg2);border-block:1px solid var(--line)}
.lede{color:var(--mute);max-width:640px;margin:-.2em 0 28px}
.sub{margin-top:48px}
.btn{display:inline-block;background:var(--acc);color:#141414;font:600 15px Jost,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:13px 24px;border-radius:3px;text-decoration:none;border:0;cursor:pointer}
.btn:hover{background:var(--acc2)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid rgba(255,255,255,.5)}
.btn.ghost:hover{border-color:var(--ink)}

/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;gap:20px;padding:14px 22px;background:rgba(14,15,17,.86);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
.brand{font:600 20px Jost,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-decoration:none;margin-right:auto}
#nav{display:flex;gap:22px}
#nav a{color:var(--ink);text-decoration:none;font:500 13px Jost,sans-serif;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
#nav a:hover{opacity:1;color:var(--acc2)}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--ink);font:500 13px Jost,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border-radius:3px}
@media (max-width:860px){
  .menu-btn{display:block}
  #nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line)}
  #nav.open{display:flex}
  #nav a{padding:14px 22px;border-top:1px solid var(--line)}
}

/* hero */
.hero{min-height:92vh;display:grid;place-items:center;text-align:center;background-size:cover;background-position:center;position:relative}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,15,17,.55),rgba(14,15,17,.7) 60%,var(--bg))}
.hero-in{position:relative;padding:120px 20px 60px}
.kicker{font:500 13px Jost,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--acc2);margin:0 0 10px}
.hero h1{font-size:clamp(46px,9vw,104px);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0}
.roles{font:500 clamp(15px,2.2vw,20px) Jost,sans-serif;letter-spacing:.14em;text-transform:uppercase;margin:10px 0 30px}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* about */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center}
.about img{border-radius:4px;aspect-ratio:4/5;object-fit:cover;width:100%}
@media (max-width:760px){.about{grid-template-columns:1fr}.about img{max-width:420px}}

/* player */
.player{display:flex;gap:18px;align-items:center;background:#0b0c0e;border:1px solid var(--line);border-radius:6px;padding:14px;margin-bottom:28px;position:sticky;top:66px;z-index:5}
.p-art{width:72px;height:72px;object-fit:cover;border-radius:3px;flex:none}
.p-main{flex:1;min-width:0}
.p-title{font:600 18px Jost,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px}
.p-bar{display:flex;align-items:center;gap:12px}
.p-play{width:42px;height:42px;border-radius:50%;border:0;background:var(--acc);color:#141414;font-size:15px;cursor:pointer;flex:none}
.p-seek{flex:1;accent-color:var(--acc)}
.p-time{font:500 13px Jost,sans-serif;color:var(--mute);min-width:84px;text-align:right}
.reels{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:28px}
.reel h3{color:var(--acc2);font-size:14px;text-transform:uppercase;letter-spacing:.14em}
.reel ol{list-style:none;margin:0;padding:0}
.trk{width:100%;display:flex;align-items:center;gap:12px;background:none;border:0;border-top:1px solid var(--line);color:var(--ink);padding:8px 4px;text-align:left;font:inherit;cursor:pointer}
.trk img{width:40px;height:40px;object-fit:cover;border-radius:2px}
.trk .t{flex:1;font-size:15px}
.trk .d{color:var(--mute);font-size:13px}
.trk:hover .t,.trk.on .t{color:var(--acc2)}
.trk.on{background:rgba(217,164,65,.08)}

/* videos */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
.vid{margin:0}
.yt{position:relative;display:block;aspect-ratio:16/9;background:#000;border-radius:4px;overflow:hidden}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.88;transition:opacity .2s,transform .4s}
.yt:hover img{opacity:1;transform:scale(1.03)}
.yt .play{position:absolute;right:12px;bottom:12px;width:50px;height:50px;border-radius:50%;background:rgba(14,15,17,.75);border:1px solid rgba(255,255,255,.4)}
.yt .play::after{content:"";position:absolute;left:20px;top:15px;border-left:15px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid figcaption{padding-top:10px;display:flex;flex-direction:column}
.vid figcaption strong{font:600 17px Jost,sans-serif}
.vid figcaption span{color:var(--mute);font-size:14px}

/* albums */
.albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:26px}
.album{color:var(--ink);text-decoration:none}
.album img{aspect-ratio:1;object-fit:cover;width:100%;border-radius:3px;margin-bottom:10px;transition:transform .3s}
.album:hover img{transform:translateY(-3px)}
.album strong{display:block;font:600 18px Jost,sans-serif}
.album span{color:var(--mute);font-size:14px}

/* press */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px;margin-bottom:36px}
blockquote{margin:0;border-left:3px solid var(--acc);padding-left:22px}
blockquote p{font:500 clamp(19px,2.4vw,24px)/1.4 Jost,sans-serif;margin:0 0 12px}
blockquote footer{display:flex;flex-direction:column;color:var(--mute);font-size:14px}
blockquote footer strong{color:var(--ink);font-size:16px}
.press{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:12px}
.press a{display:block;border:1px solid var(--line);border-radius:3px;padding:10px 16px;color:var(--ink);text-decoration:none;font:500 14px Jost,sans-serif;letter-spacing:.06em}
.press a:hover{border-color:var(--acc);color:var(--acc2)}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px}
@media (max-width:760px){.contact{grid-template-columns:1fr}}
form{display:grid;gap:14px}
label{display:grid;gap:6px;font:500 14px Jost,sans-serif;letter-spacing:.04em}
input,select,textarea{font:inherit;font-family:Lato,sans-serif;font-size:16px;color:var(--ink);background:var(--bg2);border:1px solid var(--line);border-radius:3px;padding:11px 12px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acc);border-color:transparent}
label.check{display:flex;align-items:center;gap:10px;font-family:Lato,sans-serif;font-size:15px}
label.check input{width:18px;height:18px}
.hp{position:absolute;left:-9999px}
.form-status{margin:0;padding:10px 12px;border-radius:3px}
.form-status.ok{background:rgba(120,190,140,.15)}
.form-status.err{background:rgba(220,110,100,.15)}
.social{display:flex;gap:18px;flex-wrap:wrap}
.social a{color:var(--mute);text-decoration:none;font:500 14px Jost,sans-serif;letter-spacing:.08em}
.social a:hover{color:var(--acc2)}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:28px;padding-bottom:40px;border-top:1px solid var(--line);color:var(--mute);font-size:14px}
.foot p{margin:0}