:root{
  --bg:#070707;
  --text:#f2f2ee;
  --muted:#8b8b8b;
  --line:#1d1d1d;
  --max:1320px;
  --pad:clamp(22px,5vw,78px);
  --meta:11px;
  --body:18px;
  --title:32px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:"Manrope",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{color:inherit}
.container{
  width:min(calc(100% - 2 * var(--pad)),var(--max));
  margin-inline:auto;
}

/* Floating navigation */
.site-header{
  position:fixed;
  inset:0 0 auto;
  z-index:1000;
  pointer-events:none;
  background:transparent;
}
.header-inner{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:auto;
}
.brand{
  font-size:16px;
  font-weight:400;
  letter-spacing:-.02em;
  text-shadow:0 2px 14px rgba(0,0,0,.55);
}
.nav{
  display:flex;
  gap:clamp(28px,3vw,50px);
}
.nav a{
  color:var(--text);
  opacity:.72;
  font-size:var(--meta);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-shadow:0 2px 14px rgba(0,0,0,.55);
  transition:opacity .2s ease;
}
.nav a:hover{opacity:1}

/* Hero */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:#000;
}
.hero-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 12%;
  display:block;
  pointer-events:none;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.42) 50%,rgba(0,0,0,.1)),
    linear-gradient(0deg,rgba(0,0,0,.52),transparent 52%);
}
.hero-content{
  position:relative;
  z-index:1;
  max-width:940px;
  padding-block:140px 64px;
}
.role{
  margin:0 0 24px;
  font-size:var(--body);
  font-weight:500;
}
.hero h1{
  margin:0;
  max-width:900px;
  font-size:clamp(48px,5.4vw,76px);
  font-weight:300;
  line-height:1.04;
  letter-spacing:-.052em;
}

/* Reel */
.reel{
  padding-top:220px;
  padding-bottom:160px;
}
.video-frame{
  aspect-ratio:16/9;
  overflow:hidden;
  background:#000;
}
.video-frame iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}

/* Player */
.music{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-top:150px;
  padding-bottom:190px;
  background:
    linear-gradient(180deg,rgba(7,7,7,.91),rgba(7,7,7,.68) 22%,rgba(7,7,7,.69) 78%,rgba(7,7,7,.94)),
    linear-gradient(90deg,rgba(7,7,7,.84),rgba(7,7,7,.44) 50%,rgba(7,7,7,.84)),
    url("assets/images/modular.jpg") center 46% / cover no-repeat;
}
.player-shell{position:relative;z-index:1}
.now-playing{
  min-height:148px;
  display:grid;
  grid-template-columns:70px minmax(0,1fr) auto;
  gap:30px;
  align-items:center;
  padding:20px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(7,7,7,.54);
}
.main-play{
  width:56px;
  height:56px;
  border:1px solid #505050;
  border-radius:50%;
  background:#111;
  cursor:pointer;
}
.now-meta{
  display:grid;
  gap:8px;
}
.now-label,
.playlist-label,
.track-index,
.track-duration,
.time{
  color:var(--muted);
  font-size:var(--meta);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.now-meta strong{
  font-size:var(--title);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-.04em;
}
.progress-wrap{padding:44px 0 36px}
.progress{
  width:100%;
  height:2px;
  margin:0;
  accent-color:var(--text);
  cursor:pointer;
}
.playlist-label{
  padding:30px 0 14px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.playlist{border-top:0}
.track{
  width:100%;
  min-height:82px;
  display:grid;
  grid-template-columns:70px minmax(0,1fr) auto;
  gap:24px;
  align-items:center;
  padding:0;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.09);
  background:rgba(7,7,7,.48);
  text-align:left;
  cursor:pointer;
  opacity:.52;
  transition:opacity .18s ease;
}
.track:hover,
.track.active{opacity:1}
.track-name{
  font-size:var(--body);
  font-weight:300;
}
.track.active .track-name{
  color:#fff;
  font-weight:500;
}
.track.active .track-index{color:#fff}

/* Contact */
.contact{
  padding-top:180px;
  padding-bottom:72px;
}
.contact-grid{
  display:grid;
  grid-template-columns:.55fr 1.45fr;
  gap:clamp(50px,8vw,120px);
  align-items:start;
}
.contact-title{
  margin:0;
  font-size:clamp(42px,5vw,72px);
  font-weight:300;
  line-height:1;
  letter-spacing:-.05em;
}
.contact-links{
  display:grid;
  justify-items:start;
  gap:18px;
}
.contact-links a{
  font-size:var(--title);
  font-weight:300;
  letter-spacing:-.035em;
  border-bottom:1px solid var(--line);
}

/* Footer */
footer{padding-bottom:34px}
.footer-inner{
  padding-top:24px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:24px;
  color:var(--muted);
  font-size:var(--meta);
}

/* Dedicated mobile composition */
@media(max-width:760px){
  :root{
    --pad:22px;
    --body:17px;
    --title:28px;
  }

  .site-header{position:absolute}
  .header-inner{
    min-height:72px;
    align-items:flex-start;
    padding-top:18px;
  }
  .nav{display:none}
  .brand{font-size:16px}

  .hero{
    min-height:92svh;
  }
  .hero-image{
    object-position:58% center;
  }
  .hero-content{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    max-width:none;
    padding-top:120px;
    padding-bottom:52px;
  }
  .hero h1{
    order:1;
    max-width:94%;
    font-size:clamp(42px,11vw,60px);
    line-height:1.02;
  }
  .role{
    order:2;
    margin:22px 0 0;
    font-size:16px;
  }

  .reel{
    padding-top:110px;
    padding-bottom:130px;
  }
  .reel .container{
    width:calc(100% - 28px);
  }

  .music{
    padding-top:110px;
    padding-bottom:135px;
    background-position:center 42%;
  }
  .now-playing{
    min-height:auto;
    grid-template-columns:50px minmax(0,1fr);
    gap:20px;
    padding:22px 18px 20px;
    background:rgba(7,7,7,.60);
  }
  .main-play{
    width:50px;
    height:50px;
  }
  .now-meta strong{
    font-size:clamp(28px,7.4vw,36px);
  }
  .time{
    grid-column:2;
  }
  .progress-wrap{padding:38px 0 28px}
  .playlist-label{
    padding-top:30px;
    padding-bottom:14px;
  }
  .track{
    min-height:76px;
    grid-template-columns:42px minmax(0,1fr) auto;
    gap:12px;
    background:rgba(7,7,7,.60);
  }
  .track-name{font-size:17px}
  .track.active{display:none}

  .contact{
    padding-top:145px;
    padding-bottom:72px;
  }
  .contact-grid{display:block}
  .contact-title{display:none}
  .contact-links{gap:20px}
  .contact-links a{
    font-size:clamp(25px,7vw,34px);
  }

  footer{
    padding-top:0;
    padding-bottom:30px;
  }
  .footer-inner{
    padding-top:0;
    border-top:0;
    flex-direction:column;
    gap:4px;
  }
}


/* V5.3 — ultra-wide desktop hero fix */
@media (min-width: 1400px) and (min-aspect-ratio: 21/9){
  .hero-image{
    object-fit:contain;
    object-position:center center;
    width:100%;
    height:100%;
  }

  .hero{
    background:#000;
  }
}

/* Standard desktop keeps the cinematic crop */
@media (min-width:761px) and (max-aspect-ratio:21/9){
  .hero-image{
    object-fit:cover;
    object-position:center 30%;
  }
}