/* ───────────── every form factor: phones from 320 px, foldables (cover, open, book posture), tablets, desktops ─────────────
   rules_design_review, 28-Oct-2026. The viewport meta carries viewport-fit=cover; see directory-blueprint/design/FOLD-LAYER.md. */

/* nothing wider than the screen: the front page's single column may shrink (a plain 1fr took its widest line: 25 px off at 360);
   below 400 px the word mark and the gaps give way so the search and light/dark buttons stay on the screen (34 px off at 320) */
@media (max-width: 900px) { .front-page { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) { .mast-main .wrap { gap: 10px; } .brand { gap: 8px; } .word { font-size: 13.5px; gap: 4px; } .brand-mark { width: 30px; height: 30px; } }
@media (max-width: 340px) { .word { font-size: 12px; letter-spacing: 0; } .word .us { padding: 3px 4px 2px; } .mast-tools { gap: 4px; } }
h1, h2, h3 { overflow-wrap: anywhere; }
@media (max-width: 400px) { .btn { white-space: normal; max-width: 100%; text-align: center; } }   /* a long red button ran 9 px off at 320 */

/* the masthead never sticks (the owner's standing rule: no sticky header on any site) */
.mast { position: relative; }

/* safe areas: notches, rounded corners and the home bar */
.wrap { padding-left: max(var(--gut), env(safe-area-inset-left)); padding-right: max(var(--gut), env(safe-area-inset-right)); }
.folio { padding-bottom: env(safe-area-inset-bottom); }

/* touch: every target at least 44 px (links inside sentences excepted) */
@media (pointer: coarse) {
  .chip { min-height: 44px; }
  .btn.ghost, .btn.small { min-height: 44px; }
  .mast-strip a { display: inline-flex; align-items: center; min-height: 44px; }
  .more { display: inline-block; padding-block: 10px; margin-block: -10px; }
  .folio ul { gap: 0; }
  .folio ul a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .brand { min-height: 44px; }
  .terms button { min-height: 44px; }
}

/* ── v2 (28-Oct-2026 afternoon, after the full 45-viewport live matrix): every touch target, the 320 px app pages, book posture ── */
/* /apps/* at 320: the page's two-part layout took the width of its widest line (6 px off); its parts may shrink */
.layout > * { min-width: 0; }
@media (pointer: coarse) {
  .chip { min-width: 44px; }
  .sec-index h3 a, .rec h3 a, .mini h3 a, .col-card h3 a, .story h3 a, .who-top h2 a, .dateline a, .st-by a, .ym-publication-credit a,
  .panel .small li a, main td a, .ym-policy-links a { display: inline-block; padding-block: 14px; margin-block: -14px; }
  .ym-policy-links a { min-width: 44px; text-align: center; }
  .crumbs a { display: inline-block; padding: 14px 4px; margin: -14px -4px; }
  .trow .name a { display: inline-flex; align-items: center; min-height: 44px; }
  .field-search input, .form input:not([type=checkbox]):not([type=radio]), .comment-form input[type=submit] { min-height: 44px; }
}
/* book posture (a foldable half-open like a book): card lists get one column per page, everything that reads as one column keeps to
   the left page, nothing across the fold */
@media (horizontal-viewport-segments: 2) {
  :root { --seg0: env(viewport-segment-width 0 0, 50vw); --fold-gap: calc(env(viewport-segment-left 1 0, 0px) - env(viewport-segment-right 0 0, 0px) + 32px); --fold-page: calc(var(--seg0) - 32px); }
  .wrap { padding-left: 16px; padding-right: 16px; }
  .stories, .columns, .steps, .mini-fronts, .pros-cons, .layout, .rate, .plan-grid, .plan-grid.few, .sec-index, .shelf, .lead-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fold-gap); max-width: none; }
  .folio-top { column-gap: var(--fold-gap); }
  .folio-top > *, .sections-bar .wrap, header.head, .st-head, .sheet-head, .acts, .crumbs, .front-page > *, .block-head, .st-paper, .table, .who,
  main :is(h1, h2, p, ul, ol, dl, table, form, .chips, .stats, .field-search, .panel, .pick, .ym-net, .block-head > *), .ym-policy-links { max-width: var(--fold-page); margin-left: 0; margin-right: auto; }
  main table { display: block; overflow-x: auto; }
  .sections-bar .wrap { overflow-x: auto; }
  /* the estate network box (Yorker Media network) carries its size and centring in a style attribute: only !important moves it */
  aside.ym-net { max-width: var(--fold-page) !important; margin-left: 0 !important; margin-right: auto !important; }
}

/* ── v3 (28-Oct-2026 night; helper 34 for lead 68): what the finer book-posture check (loose inline text, every link and picture) found on v2 — the Galaxy band's
   shelf still scrolled sideways (its own column flow outlived v2's two columns, a card across the fold) and its padded head ran 5 px
   past the fold; an app sheet's buttons (a 315 px nowrap button in the head's third column) crossed it from 626 to 954; the footer's
   bottom line and the masthead strip's edition line ran across it. ── */
@media (horizontal-viewport-segments: 2) {
  main .galaxy-band .shelf { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fold-gap); }
  main .galaxy-band .shelf > * { min-width: 0; }
  main .galaxy-band .block-head, main .galaxy-band .block-head > * { max-width: calc(var(--fold-page) - 24px); }
  main .sheet-head { grid-template-columns: auto minmax(0, 1fr); }
  main .sheet-head .acts { grid-column: 1 / -1; justify-content: flex-start; }
  main .sheet-head .acts .btn { white-space: normal; max-width: 100%; }
  footer.folio .folio-bottom { flex-direction: column; align-items: flex-start; }
  footer.folio .folio-bottom > span { display: block; max-width: var(--fold-page); }
  .mast-strip .ed { max-width: var(--fold-page); }
}
/* v3 touch: short lone links under 44 px wide — a crumb ("Tech", 38), the story head's section link (31) and the section index's
   headings (43) — get wider in-place boxes (the negative margins keep the layout where it was) */
@media (pointer: coarse) {
  ol.crumbs li > a { padding-inline: 8px; margin-inline: -8px; }
  .st-head .dateline b > a { display: inline-block; padding-inline: 7px; margin-inline: -7px; }
  .sec-index h3 > a { padding-inline: 2px; margin-inline: -2px; }
}