/* ==========================================================================
   RESPONSIVE — loads last; only layout collapses live here. Type sizes are
   fluid (clamp) in the base sheets, so no font-size overrides are needed
   except where hierarchy would invert.
   ========================================================================== */

@media (max-width: 950px) {
  .article-layout { grid-template-columns: 1fr; }
  .sidebar-column { position: static; }
  .featured-grid, .amazon-grid { grid-template-columns: repeat(2, 1fr); }

  .subhead { flex-wrap: wrap; white-space: normal; padding: 4px 0; }

  .sitemap-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  .subhead b { display: none; } /* date hidden on small screens, as before */
  .subhead a { padding: 10px 3vw; }

  .theme-toggle { top: 8px; right: 8px; padding: 8px 12px; }

  .newspaper-columns { grid-template-columns: 1fr; }
  .col-primary { border-right: none; padding-right: 0; }
  .col-primary::after {
    content: "";
    display: block;
    border-bottom: 2px solid var(--hairline);
    margin: 14px 0;
  }

  .hero-card.has-figure { grid-template-columns: 1fr; }
  .hero-figure { order: -1; } /* image above text when stacked */

  .feed-header { flex-direction: column; align-items: flex-start; gap: 4px; }

  .footer-nav {
    flex-wrap: wrap;
    white-space: normal;
    gap: 6px 0;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  /* Reserve vertical room so the absolutely-positioned toggle never
     overlaps the masthead on phone widths. */
  .head { padding-top: 56px; }

  .magazine-layout, .feed-section, .featured-section, .amazon-section,
  .category-header, .homepage-featured-label { padding-left: 14px; padding-right: 14px; }

  .featured-grid, .amazon-grid { grid-template-columns: 1fr; }

  .quote-band { margin-left: 14px; margin-right: 14px; }

  .article-layout { padding: 0 14px; }

  /* Hierarchy floor: the hero headline must never shrink below 24px
     (the old design collapsed it to 16px — smaller than its excerpt). */
  .hero-content h2 { font-size: 1.5rem; }
}