/* Narrow viewport rules. Mobile is the same document, not a separate article
   composition. */

@media (max-width: 767px) {
  :root,
  .theme {
    --page-pad: 20px;
    /* Mobile caps body text at 18px: it flattens Editorial's 19px down and leaves the
       other themes (already 18px) unchanged. The prior `max(17px, 18px)` constant-folded
       to 18px — same result, but the intent (a mobile cap, not a floor) was hidden. The
       17px floor lives in the per-element rules below, applied AFTER --reader-scale. */
    --body-size: 18px;
  }

  .site-masthead {
    height: 56px;
    min-height: 56px;
    padding: 0 16px;
  }

  .feed-filter summary {
    gap: 8px;
  }

  .feed-filter-menu {
    position: fixed;
    top: 56px;
    bottom: 0;
    right: 0;
    left: 0;
    width: auto;
    padding: 40px 24px 60px;
    border: 0;
    border-radius: 0;
    background: var(--paper);
    box-shadow: none;
    overflow-y: auto;
    animation: none;
  }

  .feed-filter-menu a {
    min-height: 44px;
    padding: 13px 0;
  }

  .feed-filter-name {
    font-size: 18px;
  }

  .feed-filter-label {
    font-size: 10.5px;
  }

  .feed-filter-menu .feed-filter-settings {
    margin-top: 22px;
    padding-top: 18px;
  }

  .article-shell {
    padding: 32px var(--page-pad) 72px;
  }

  .article-title {
    font-size: 30px;
  }

  .article-standfirst {
    font-size: 17px;
  }

  .article-meta {
    gap: 8px;
  }

  .article-prose p,
  .article-prose li {
    /* 17px floor applied AFTER the reader scale, so the smallest offered scale (0.9)
       can never drop prose below the mobile floor (DESIGN §6/§8). */
    font-size: max(17px, calc(var(--body-size) * var(--reader-scale)));
  }

  .article-prose h2 {
    font-size: calc(24px * var(--reader-scale));
  }

  .article-prose h3 {
    font-size: calc(20px * var(--reader-scale));
  }

  .article-gallery-grid {
    grid-template-columns: 1fr;
  }

  .index-page,
  .archive-page,
  .settings-page {
    padding: 32px var(--page-pad) 72px;
  }

  .post-title {
    font-size: 20px;
  }

  .post-content p,
  .post-content li {
    font-size: max(17px, calc(17px * var(--reader-scale)));
  }

  .settings-text-sample {
    font-size: max(17px, calc(17px * var(--reader-scale)));
  }

  .theme-cards {
    grid-template-columns: 1fr;
  }

  .theme-card {
    min-height: 112px;
  }

  .set-row {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .seg {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .seg button {
    min-height: 44px;
    padding: 10px 12px;
  }

  button,
  [role="button"],
  input,
  select,
  textarea {
    min-height: 44px;
  }
}