/* Focused repair for the existing mobile layouts, not a template rollout. */
@media (max-width: 700px) {
  .masthead { gap: 12px; }
  .brand { flex-shrink: 0; }
  .search-link { flex-shrink: 0; white-space: nowrap; }
  .search-link svg { flex-shrink: 0; }
  .main-nav a { white-space: nowrap; }

  /* Keep reading columns wide enough across all phone widths. */
  .story-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .story-card :is(h3, h4), .editor-picks .story-card :is(h3, h4) {
    font-size: 17px;
    line-height: 1.75;
  }
  .story-meta { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
  .story-description { -webkit-line-clamp: 3; }
  .section-head { flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; }

  /* A narrow side-by-side banner makes copy a vertical strip. */
  .feature-banner { grid-template-columns: minmax(0, 1fr); }
  .feature-banner figure { order: 0; height: auto; }
  .feature-banner img { aspect-ratio: 2 / 1; width: 100%; height: auto; min-height: 0; object-fit: cover; }
  .banner-copy { order: 1; padding: 24px; }
  .banner-copy h3 { font-size: 24px; line-height: 1.6; }
  .banner-copy h3 br, .banner-copy > p br { display: none; }
  .banner-links { flex-direction: column; gap: 0; }
  .banner-links a { flex: none; }

  .blog-article h1, .page-heading h1 { font-size: 26px; line-height: 1.55; overflow-wrap: anywhere; }
  .quick-read li { font-size: 16px; }
  .template-article .quick-read li { font-size: 16px; }
  .color-grid { grid-template-columns: minmax(0, 1fr); }
  .post-list .article-photo { float: none; width: 100%; margin: 0 0 18px; }
}
@media (max-width: 360px) {
  .masthead .search-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .masthead .search-link { width: 44px; justify-content: center; }
  .masthead .search-link svg { width: 20px; height: 20px; }
  .feature-copy h1 { font-size: 26px; }
  .blog-article h1, .page-heading h1 { font-size: 24px; }
  .template-article .blog-article h1 { font-size: 24px; }
  .category-directory { grid-template-columns: minmax(0, 1fr); }
}