/* ===== Theme (keeps your gold/black vibe) ===== */
:root{ 
  --black:#000; 
  --gold:#d4af37; 
  --text:#fff; 
}

html,body{
  margin:0; 
  background:var(--black); 
  color:var(--text);
  font-family:system-ui, Inter, Arial, sans-serif;
}

/* Media scales nicely */
img,video,canvas{max-width:100%;height:auto;display:block}

/* Optional helpers */
.card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(212,175,55,.25);
  border-radius:16px;
  padding:16px;
}

/* ===== MOBILE-ONLY LAYOUT (desktop stays unchanged) ===== */
@media (max-width:768px){

  /* NAVIGATION — neat centered layout */
  .nav{
    position:relative !important; /* ✅ allows scrolling away on mobile */
    border-bottom:1px solid rgba(212,175,55,.18);
  }

  .nav-inner{
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:10px 12px;
  }

  .brand{
    display:flex;
    align-items:center;
    gap:8px;
  }

  .brand h1{font-size:20px;}
  .dot{
    width:12px;
    height:12px;
    box-shadow:0 0 12px var(--gold);
  }

  /* Menu links in 2 columns */
  .menu{
    display:grid;
    grid-template-columns: repeat(2, auto);
    justify-content:center;
    gap:10px 28px;
    padding:6px 0 4px;
  }

  .menu a{
    padding:6px 8px;
    line-height:1.2;
    font-size:18px;
  }

  /* HERO adjustments */
  .hero{
    min-height:62vh;
    text-align:center;
  }

  .hero-inner{
    padding:44px 16px;
  }

  .kicker{
    letter-spacing:.2em;
    font-size:11px;
  }

  .title{
    font-size:clamp(26px,6.2vw,40px) !important;
    line-height:1.15;
  }

  .subtitle{
    max-width:92%;
    font-size:16px;
  }

  /* Section spacing */
  section{padding:32px 16px;}
  .section-title{font-size:26px;}

  /* Albums grid */
  .albums{
    grid-template-columns:repeat(2,1fr)!important;
    gap:12px;
  }
  .cap{font-size:12px;}

  /* Readable text */
  h1{font-size:2rem; line-height:1.2; margin:.3em 0;}
  h2{font-size:1.6rem; line-height:1.25;}
  p{font-size:1rem; line-height:1.55; margin:.7em auto; max-width:92%;}

  /* Buttons easy to tap */
  button, .btn{width:100%; max-width:420px;}

  /* Prevent sideways scroll */
  body{overflow-x:hidden;}
}

/* ===== TINY PHONES (≤420px) ===== */
@media (max-width:420px){
  .menu{grid-template-columns:1fr; gap:8px;} /* stack vertically */
  .title{font-size:clamp(24px,7vw,36px) !important;}
  .albums{grid-template-columns:1fr!important;}
  .brand h1{font-size:18px;}
}