/* =========================================================
   responsive.css — fine-tuned breakpoints, small-screen fixes
   ========================================================= */

@media (max-width:480px){
  .kicker, .page-hero .kicker{font-size:11px;}
  h1.title{font-size:32px;}
  .lede{font-size:16px;}
  .btn{padding:12px 18px; font-size:11.5px;}
  section{padding:56px 0;}
  header.hero{padding:56px 0 56px;}
  .sec-head{margin-bottom:36px; gap:20px;}
  .stat-row{margin-top:30px;}
  .footer-grid{margin-bottom:32px;}
  .back-to-top{right:16px; bottom:16px; width:40px; height:40px;}
}

@media (max-width:360px){
  .wrap{padding:0 16px;}
  .beat-tags span{font-size:10.5px; padding:5px 10px;}
}

/* Prevent horizontal overflow on very narrow viewports */
html, body{max-width:100%; overflow-x:hidden;}
.article-row{grid-template-columns:20px 1fr; }
@media (min-width:520px){
  .article-row{grid-template-columns:24px 1fr auto;}
}
.art-go{display:none;}
@media (min-width:520px){ .art-go{display:block;} }

/* Timeline tightens on mobile */
@media (max-width:520px){
  .timeline{padding-left:32px;}
  .tl-item::before{left:-32px;}
}

/* Hero portrait sizing on small screens */
@media (max-width:480px){
  .hero-image-container{width:240px; height:240px;}
}

/* Print styles */
@media print{
  nav, footer, .back-to-top, .progress-bar, .cursor-glow, .grain, .loader{display:none !important;}
  body{background:#fff; color:#000;}
  a{color:#000; text-decoration:underline;}
}