/* ===================================================
   Responsive Breakpoints (8 tiers, largest→smallest)
   1200 — Just below container edge (1280px)
   1100 — Small desktop / landscape tablet
   960  — Landscape tablet / large tablet portrait
   820  — Tablet portrait / nav breaks to hamburger
   680  — Large phones / small tablets
   520  — Phones
   420  — Small phones
   360  — Tiny / older phones
   =================================================== */

/* ---- 1200px : Container-edge transition ---- */
@media (max-width:1200px){
  section{padding:110px 0}
  .nav{padding:22px 36px}
  .hero{min-height:98vh}
  .hero-wordmark{font-size:clamp(5.5rem,18vw,18rem)}
  .hero-wordmark img{max-width:clamp(360px,75vw,1100px);max-height:75vh}
  .footer-grid{gap:40px}
  .article-body{padding:44px;margin:55px auto}
  .tour-table th,.tour-table td{padding:20px 22px}
}

/* ---- 1100px : Small desktop (kept as-is) ---- */
@media (max-width:1100px){
  .cards-rail{grid-template-columns:repeat(2,1fr)}
  .video-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
  .results-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---- 960px : Landscape tablet bridge ---- */
@media (max-width:960px){
  section{padding:100px 0}
  .nav{padding:20px 28px}
  .hero{min-height:95vh}
  .hero-wordmark{font-size:clamp(5rem,17vw,16rem)}
  .hero-wordmark img{max-width:clamp(340px,100vw,800px);max-height:60vh}
  .hero-artist img{max-height:80vh}
  .footer-grid{gap:32px}
  .article-body{padding:40px;margin:50px auto}
  .article-body p{font-size:1rem}
  .tour-table th,.tour-table td{padding:20px 20px;font-size:.88rem}
}

/* ---- 820px : Tablet portrait / nav breaks (kept as-is) ---- */
@media (max-width:820px){
  section{padding:80px 0}
  .nav{padding:18px 22px}
  .nav ul,.nav-cta .btn{display:none}
  .hamburger{display:flex}
  .hero{min-height:90vh;padding:100px 0 40px}
  .hero-inner{min-height:78vh}
  .hero-wordmark{font-size:clamp(4.5rem,18vw,9rem);top:18%;left:15%;transform:translate(-50%,0)}
  .hero-wordmark img{max-width:clamp(340px,260vw,520px);max-height:42vh}
  .hero-artist{position:relative;left:0;max-width:100%;display:flex;justify-content:center;margin-top:24vh}
  .hero-artist img{max-height:55vh}
  .hero-pill{right:50%;transform:translateX(50%);bottom:6%;font-size:.6rem;padding:14px 22px}
  .video-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:36px}
  .footer-base{flex-direction:column;gap:14px;text-align:center}
  .results-grid{grid-template-columns:1fr}
  .tour-table th:nth-child(2),.tour-table td:nth-child(2){display:none}
  .tour-table th,.tour-table td{padding:16px 14px;font-size:.8rem}
  .article-body{padding:28px;margin:30px 16px}
  .section-head{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ---- 680px : Large phones / small tablets ---- */
@media (max-width:680px){
  section{padding:72px 0}
  .container{padding:0 22px}
  .nav{padding:16px 20px}
  .hero{min-height:88vh;padding:90px 0 36px}
  .hero-inner{min-height:74vh}
  .hero-wordmark{font-size:clamp(4rem,16vw,8rem);top:20%;left:12%}
  .hero-wordmark img{max-width:clamp(280px,220vw,460px);max-height:36vh}
  .hero-artist{margin-top:22vh}
  .hero-artist img{max-height:48vh}
  .hero-pill{bottom:5%;font-size:.58rem;padding:12px 20px}
  .cards-rail{gap:18px}
  .music-card{padding:14px}
  .tour-table th,.tour-table td{padding:14px 12px;font-size:.76rem}
  .article-body{padding:24px;margin:24px 14px}
  .article-body p{font-size:.95rem;line-height:1.7}
  .section-head{margin-bottom:36px;padding-bottom:14px}
  .footer{padding:60px 0 30px}
}

/* ---- 520px : Phones (kept as-is) ---- */
@media (max-width:520px){
  .container{padding:0 18px}
  .cards-rail{grid-template-columns:1fr}
  h1{font-size:3rem}
  .hero-wordmark{font-size:clamp(4.5rem,18vw,9rem);top:18%;left:20%;transform:translate(-50%,0)}
  .hero-wordmark img{max-width:clamp(140px,60vw,320px);max-height:22vh}
  .hero-artist{position:relative;left:0;max-width:100%;display:flex;justify-content:center;margin-top:24vh}
  .hero-artist img{max-height:55vh}
}

/* ---- 420px : Small phones ---- */
@media (max-width:420px){
  section{padding:60px 0}
  .container{padding:0 14px}
  .nav{padding:14px 16px}
  .hero{min-height:85vh;padding:80px 0 30px}
  .hero-inner{min-height:70vh}
  .hero-wordmark{font-size:clamp(3.5rem,18vw,7rem);top:22%;left:12%}
  .hero-wordmark img{max-width:clamp(220px,200vw,380px);max-height:30vh}
  .hero-artist{margin-top:20vh}
  .hero-artist img{max-height:42vh}
  .hero-pill{font-size:.55rem;padding:10px 18px;gap:8px}
  .hero-pill .arrow{width:24px;height:24px;font-size:.7rem}
  .cards-rail{gap:14px}
  .music-card .title{font-size:.88rem}
  .music-card .sub{font-size:.56rem}
  .video-grid{gap:16px}
  .tour-table th,.tour-table td{padding:12px 10px;font-size:.72rem}
  .article-body{padding:20px;margin:20px 10px;border-radius:var(--radius)}
  .article-body p{font-size:.9rem;line-height:1.65}
  .article-body h2{font-size:1.2rem;margin:28px 0 14px}
  .footer{padding:50px 0 24px}
  .footer-grid{gap:28px}
  .section-head{margin-bottom:28px;gap:6px}
  h2{font-size:clamp(1.5rem,3vw,2.4rem)}
  p{font-size:.9rem}
}

/* ---- 360px : Tiny / older phones ---- */
@media (max-width:360px){
  section{padding:50px 0}
  .container{padding:0 12px}
  .nav{padding:12px 14px}
  .hero{min-height:82vh;padding:70px 0 24px}
  .hero-inner{min-height:66vh}
  .hero-wordmark{font-size:clamp(3rem,18vw,6rem);top:24%;left:8%}
  .hero-wordmark img{max-width:clamp(180px,190vw,320px);max-height:26vh}
  .hero-artist{margin-top:18vh}
  .hero-artist img{max-height:36vh}
  .hero-pill{font-size:.52rem;padding:8px 14px;gap:6px;bottom:4%}
  .hero-pill .arrow{width:20px;height:20px;font-size:.6rem}
  .cards-rail{gap:12px}
  .music-card{padding:10px}
  .music-card .meta{margin-top:12px}
  .music-card .title{font-size:.82rem}
  .video-card .meta h4{font-size:.85rem}
  .tour-table th,.tour-table td{padding:10px 8px;font-size:.68rem}
  .article-body{padding:16px;margin:16px 6px}
  .article-body p{font-size:.85rem;line-height:1.6}
  .footer{padding:44px 0 20px}
  .footer-grid{gap:24px}
  .section-head{margin-bottom:24px}
  h1{font-size:2.4rem}
  h2{font-size:clamp(1.3rem,2.8vw,2rem)}
  .btn{padding:10px 18px;font-size:.62rem;letter-spacing:.25em}
  .btn-primary{padding:12px 20px}
}