/* Color system */
:root{
  --bg: #0d0f13;
  --bg-soft: #12151b;
  --card: #171a21;
  --text: #e8ecf1;
  --muted: #a7b0bb;
  --brand: #7fd0ff;
  --accent: #ffd28f;
  --line: #2a2f39;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(127,208,255,.08), transparent 60%),
    radial-gradient(1000px 600px at 100% 10%, rgba(255,210,143,.05), transparent 50%),
    var(--bg);
  color:var(--text);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Layout */
.container{max-width:1100px; margin:0 auto; padding:0 20px}
.section-head{margin-bottom:1rem}
.section-head h2{font-size:2.2rem; margin:0 0 .25rem}
.section-head p{color:var(--muted); margin:.25rem 0 0}

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; background: rgba(13,15,19,.7); backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:.75rem; color:var(--text); text-decoration:none}
.logo{width:36px; height:36px; border-radius:10px; box-shadow:var(--shadow)}
.brand-text{font-weight:700; letter-spacing:.2px}

.main-nav{display:flex; gap:1rem}
.main-nav a{color:var(--muted); text-decoration:none; padding:6px 8px; border-radius:10px}
.main-nav a:hover{background:var(--bg-soft); color:var(--text)}

.nav-toggle{display:none; background:none; border:0; cursor:pointer}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--text); margin:5px 0; border-radius:2px}

/* Hero */
.hero{padding:72px 0 40px}
.hero h1{font-size: clamp(2rem, 3.6vw, 3.2rem); line-height:1.2; margin:0 0 12px}
.hero em{color:var(--brand); font-style:normal}
.lead{font-size:1.125rem; color:var(--muted); margin:0 0 8px}
.tags{color:var(--muted)}
.hero .cta{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:center;
  margin-top:18px
}
.btn{
  display:inline-block;
  padding:.7rem 1rem;
  border-radius:12px;
  background:var(--brand);
  color:#092033;
  text-decoration:none;
  font-weight:700;
  box-shadow:var(--shadow)
}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--line)}

/* Sections & spacing */
main > section{padding:64px 0}
main > section + section{margin-top:16px}
.section-videos{background:linear-gradient(180deg, rgba(127,208,255,.06), transparent 50%)}
.section-music{background:linear-gradient(180deg, rgba(255,210,143,.08), transparent 50%); padding-bottom:56px}

/* Cards/Grid */
.grid{display:grid; gap:18px}
.videos-grid{grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))}
.albums-grid{grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-top:8px}
.artists-grid{grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top:8px}
.singles-grid{grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top:8px}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  transition: transform .3s ease, border-color .3s ease;
  box-shadow: var(--shadow);
}
.card:hover{transform: translateY(-3px); border-color: rgba(127,208,255,.3)}
.card a{color:inherit; text-decoration:none; display:block}

.thumb{aspect-ratio: 16 / 9; overflow:hidden; background:var(--bg-soft)}
.thumb.square{aspect-ratio:1/1}
.thumb.circle{aspect-ratio:1/1; border-radius:50%; overflow:hidden; width:140px; height:140px; margin:18px auto 0}
.thumb img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.05)}

.card-body{padding:14px 16px}
.card-body h3{margin:0 0 6px; font-size:1.05rem}
.card-body p{margin:0; color:var(--muted)}

.track-card{padding:14px 16px}
.track-meta{display:flex; flex-direction:column}
.track-title{font-weight:700}
.track-artist{color:var(--muted); font-size:.95rem}

.subhead{margin:18px 0 10px; font-size:1.25rem}

/* Compact album cards (smaller artwork, text beside image) */
.album-card{display:flex; align-items:center; gap:14px}
.album-card .thumb.square{width:110px; height:110px; flex:0 0 auto; margin:14px; border-radius:12px; overflow:hidden}
/* User tweak: roomier album card body */
.album-card .card-body{padding:14px 16px}
.album-card h3{font-size:1.05rem; margin:0 0 4px}
.album-card p{font-size:.95rem}

/* Combined About + Contact section — clearer separation after Music */
.section-info{
  margin-top: 32px; /* extra gap from Music */
  padding: 72px 0;
  background:
    linear-gradient(180deg, rgba(127,208,255,.05), rgba(255,210,143,.05)),
    var(--bg-soft);
  border-top: 1px solid var(--line);
}
.info-grid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-top: 12px;
}
.info-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow);
}
.info-card h3{
  margin: 0 0 8px;
  font-size: 1.15rem;
}

/* Footer */
.site-footer{border-top:1px solid var(--line); padding:28px 0; color:var(--muted); margin-top:32px}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:12px}
.socials{display:flex; gap:10px}
.socials a{color:var(--muted); text-decoration:none}
.socials a:hover{color:var(--text)}

/* Links */
a#email-link.lnk{color: var(--brand)}
a#youtube-channel-link.lnk{color: var(--brand)}
a#spotify-label-link.lnk{color: var(--brand)}
a#instagram-link.lnk{color: var(--brand)}

/* Reveal on scroll */
.reveal{opacity:0; transform: translateY(14px); will-change: transform, opacity}
.reveal.visible{opacity:1; transform:none; transition: opacity .8s ease, transform .8s ease}

/* Responsive */
@media (max-width: 800px){
  .main-nav{display:none}
  .nav-toggle{display:block}
  .site-header.open .main-nav{
    position:absolute; top:60px; left:0; right:0; display:flex; flex-direction:column; background:var(--bg);
    border-top:1px solid var(--line); padding:12px 20px
  }
}