/* ==========================================================================
   responsive.css — all breakpoints, mobile-first refinements
   ========================================================================== */

@media (max-width: 980px) {
  .article-layout, .creator-layout { grid-template-columns: 1fr; }
  .side-rail { position: static; }
  .post-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 860px) {
  .creator-grid { grid-template-columns: 1fr; }
  .popular-grid { grid-template-columns: 1fr; }

  .hero { padding: 72px 0 48px; }
  .hero h1 { font-size: 30px; line-height: 1.35; }
  .hero .lede { font-size: 15.5px; }
  .hero .cta-row .btn { flex: 1 1 auto; }

  .stat-row { flex-wrap: wrap; gap: 20px 0; margin-top: 40px; padding-top: 28px; }
  .stat-row .stat-item { flex: 1 1 33%; border-left: none; padding: 0 10px; }
  .stat-row strong { font-size: 24px; }

  .section { padding: 48px 0; }
  .section-head { flex-wrap: wrap; }
  .section-head h2 { font-size: 22px; }

  .article-head h1 { font-size: 25px; }
  .article-meta-top { font-size: 12px; }
  .prose { font-size: 16px; }
  .prose blockquote { font-size: 17px; padding: 16px 18px; }

  .creator-profile-head h1 { font-size: 24px; }

  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .article-stats { margin-left: 0; width: 100%; }
  .sticky-subscribe { display: flex; }

  .header-actions #header-user span#header-user-name { display: none; }
}

@media (max-width: 640px) {
  .wrap, .wrap-narrow, .wrap-article { padding: 0 16px; }

  .site-header .wrap { height: 58px; }
  .logo { font-size: 18px; }

  .hero { padding: 56px 0 40px; }
  .hero h1 { font-size: 25px; }
  .hero .eyebrow-pill { font-size: 11.5px; padding: 6px 12px 6px 10px; }

  .creator-card { padding: 22px 20px; }
  .post-card .post-body { padding: 16px 18px 20px; }

  .article-topbar .topbar-actions .icon-btn span { display: none; }
  .article-topbar .icon-btn { padding: 8px; }

  .cover-image { border-radius: var(--radius-md); margin-bottom: 28px; }
  .creator-profile-head .avatar { width: 80px; height: 80px; font-size: 26px; }
  .creator-banner { height: 140px; }

  .footer-grid { padding: 40px 0 28px; gap: 24px; }
  .site-footer { margin-top: 56px; }

  .checkout-shell { padding: 32px 16px 100px; }
  .login-card { padding: 32px 24px; }
  .login-shell { padding: 32px 16px; }

  .dash-shell { padding: 32px 16px 100px; }
  .dash-head h1 { font-size: 20px; }
  .dash-row { padding: 14px; }
  .dash-row .row-actions { width: 100%; margin-left: 0; justify-content: flex-end; }

  .popular-card { padding: 12px; }
  .popular-thumb { width: 52px; height: 52px; }
}

/* buttons/links keep a comfortable 44px tap target on touch devices */
@media (pointer: coarse) {
  .footer-col a, .legal-links a, .comment-login a, .toc a {
    display: inline-block;
    padding: 2px 0;
  }
}