/* ==========================================================================
   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; }

  .fold { grid-template-columns: 1fr 1.4fr; }
  .curated-rail { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--hairline); padding-top: 14px; margin-top: 14px; }
  .band-grid { grid-template-columns: 1fr 1fr; }
  .band-feature { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .newspaper-columns { grid-template-columns: 1fr; }
  /* Release the explicit row/column placement from index.css, or the three
     children stay pinned to a column-2 grid that no longer exists and overlap.
     Selectors match that file's specificity (0,3,0) — a bare `.category-rail`
     here would lose regardless of cascade order. The rail leads the stack, which
     is also its DOM order, so no `order` override is needed. */
  .newspaper-columns.has-rail .category-rail,
  .newspaper-columns.has-rail .col-primary,
  .newspaper-columns.has-rail .col-secondary { grid-column: 1; grid-row: auto; }
  .col-primary { border-right: none; padding-right: 0; }
  .col-primary::after {
    content: "";
    display: block;
    border-bottom: 2px solid var(--hairline);
    margin: 14px 0;
  }
}

@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; }

  .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;
  }

  /* Lead first, then briefs, then the curated rail — DOM order in index.html.erb
     already matches this, so no `order` is set here; it collapses to one column and
     stacks top to bottom exactly as written in the markup. */
  .fold { grid-template-columns: 1fr; gap: 0; }
  .fold-briefs { border-right: 0; padding-right: 0; border-top: 1px solid var(--hairline); padding-top: 14px; margin-top: 14px; }

  .fold-extra { grid-template-columns: 1fr; }
  .band-grid { grid-template-columns: 1fr; }
  .band-feature { grid-template-columns: 96px 1fr; }
  .band-thumb img { width: 96px; height: 96px; }

  /* Archive: two columns of headlines is unreadable at tablet width. */
  .archive-list { columns: 1; }
  .archive-section-head { flex-direction: column; align-items: flex-start; gap: 2px; }
}

@media (max-width: 480px) {
  .head { padding-top: 12px; }

  .theme-toggle {
    position: static;
    display: inline-flex;
    margin: 0 auto 8px;
  }

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

  .nav-search { 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; }

  .fold, .band-stack { padding-left: 14px; padding-right: 14px; }
  .band-link .story-excerpt { display: none; }
  .lead-headline { font-size: 1.5rem; }
}