/* Narrow-screen corrections. Load after style/layouts.css or portal.css. */
@media (max-width: 900px) {
  .opening-grid > *,
  .opening-side > *,
  .article-grid > *,
  .tools-grid > *,
  .stats > *,
  .review-row > div {
    min-width: 0;
  }

  .article-card h2,
  .article-card .eyebrow,
  .form-page h1,
  .form-page p,
  .form-page .helptext,
  .panel,
  .notice,
  .page-top > p,
  .review-row h3,
  .reader-body p,
  .reader-body h2 {
    overflow-wrap: anywhere;
  }

  .layout-options {
    min-inline-size: 0;
  }

  .layout-options label > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 700px) {
  /* CMS renders these cards as anchors; block sizing must survive grid -> block. */
  .opening-grid > .feature,
  .opening-side > .earth-feature {
    display: block;
  }

  /* Three navigation links still fit alongside two 44px icon buttons at 320px. */
  .topbar .mini-logo,
  .topbar .random-button {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }

  .topbar nav,
  html:not([data-layout=editorial]) .topbar nav {
    gap: 10px;
  }

  .topbar nav a,
  .topbar nav button,
  .layout-controls button,
  .layout-controls a,
  .filters button,
  .dialog-bar button,
  .reader-actions button,
  .reader-actions a {
    min-height: 44px;
    min-width: 44px;
  }

  .topbar nav a,
  .topbar nav button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .dialog-bar {
    padding-block: 6px;
  }

  .dialog-bar button {
    flex-shrink: 0;
  }

  .reader-actions {
    gap: 10px;
  }

  .reader-actions button,
  .reader-actions a {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .story-meta {
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 8px;
    letter-spacing: 0;
    line-height: 1.5;
  }

  .story-meta span,
  .story-meta span:last-child {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Keep the poster treatment, with space between independently tappable cards. */
  html[data-layout=collage] .hello-note {
    transform: rotate(.5deg);
  }

  html[data-layout=collage] .earth-feature {
    transform: rotate(-.5deg);
  }

  html[data-layout=collage] .story-grid {
    gap: 28px 16px;
  }

  html[data-layout=collage] .story,
  html[data-layout=collage] .story:nth-child(1),
  html[data-layout=collage] .story:nth-child(2),
  html[data-layout=collage] .story:nth-child(3),
  html[data-layout=collage] .story[data-category=science],
  html[data-layout=collage] .story[data-category=life],
  html[data-layout=collage] .story:has(.auto-art),
  html[data-layout=collage] .manifesto {
    transform: rotate(-.5deg);
    margin-top: 0;
  }

  html[data-layout=collage] .story:nth-child(even) {
    transform: rotate(.5deg);
  }

  html[data-layout=collage] .story-grid.filtered .story {
    transform: none;
  }

  html[data-layout=collage] .story p {
    font-size: 10px;
  }

  /* Give account navigation a predictable second row, including the staff link. */
  .site-header nav {
    order: 3;
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 12px;
  }

  .site-header nav a,
  .site-header > div > a,
  .site-header .quiet,
  .form-links a,
  .form-page > a,
  .form-page button,
  .pagination a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .form-links {
    flex-wrap: wrap;
    gap: 8px 20px;
  }

  .form-page button,
  .form-page .button {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .search select {
    min-width: 0;
  }

  .article-card .eyebrow {
    font-size: 9px;
    line-height: 1.7;
  }

  .pagination {
    align-items: center;
    flex-wrap: wrap;
  }

  /* portal.css otherwise hides this entire operator/support/policy block. */
  .site-header ~ footer > span {
    display: block;
    flex-basis: 100%;
    line-height: 2;
    overflow-wrap: anywhere;
  }
}