/* ───────────── 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. */

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

/* safe areas: notches, rounded corners and the home bar */
.wrap, .narrow, .alm-wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.foot { padding-bottom: max(28px, env(safe-area-inset-bottom)); }

/* touch: every target at least 44 px (links inside sentences excepted) */
@media (pointer: coarse) {
  .brand { min-height: 44px; }
  .nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .ask input { min-height: 44px; }
  .ask button, .mode { min-height: 44px; min-width: 44px; }
  .go, .go.line, .terms button, .chips a, .alm-tags a { display: inline-flex; align-items: center; min-height: 44px; }
  .pager a, .pager span, .alm-pager .page-numbers { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .links li { padding-block: 0; align-items: center; }
  .links a { display: inline-flex; align-items: center; min-height: 44px; }
  .mini a { padding-block: 11px; margin-block: -11px; }
  .row .who h3 a, .card h3 a, .front-picks a, .stories small a, .crumbs a, .kick a, .alm-crumbs a, .alm-by a, .alm-sec, .row .by a,
  .head .soft a, .facts a, .open-spot a, main h2 > a { display: inline-block; padding-block: 12px; margin-block: -12px; }
  input[type=text], input[type=email], input[type=url], input[type=search], input[type=password], input[type=number], select { min-height: 44px; }
  .check { min-height: 44px; }
  .crumbs a, .alm-crumbs a { padding-inline: 4px; margin-inline: -4px; }
  .qa summary { padding-block: 12px; margin-block: -12px; }
  .foot ul, .alm-side ul { gap: 0; }
  .foot ul a, .fine a, .foot .brand, .alm-side li > a, .alm-foot a, .alm-nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .fine { row-gap: 0; }
}

/* book posture (a foldable half-open like a book): nothing across the fold. The page keeps equal margins so the gap between two
   columns lands on the fold; grids put one column on each half, a page's opening words and running text keep to the left half;
   ranked rows run in two columns, one per half. */
@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, .alm-wrap { padding-left: 16px; padding-right: 16px; }
  .narrow { max-width: var(--seg0); margin-inline: 0 auto; padding-left: 16px; padding-right: 16px; }
  .front-in, .sheet, .two, .versus, .alm-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fold-gap); }
  .side-card { position: static; }
  .grid, .stories, .plan-cards, .maker-shots, .foot-in, .alm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fold-gap); }
  .rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fold-gap); align-items: start; }
  .links { columns: 2; column-gap: var(--fold-gap); }
  .head, .lede, .crumbs, .facts, .tally, .note, .qa, .table-wrap, .front .ask-big, .alm-head, .alm-crumbs, .alm-note { max-width: var(--fold-page); }
  .nav, .ask, main h2, .wrap > p, .band .lede, .band p, .chips { max-width: var(--fold-page); }
  .nav { flex-wrap: wrap; overflow-x: visible; }
  .door { max-width: var(--seg0); margin-left: 0; margin-right: auto; }
  .alm-story-head > * { max-width: var(--fold-page); }
  .ym-net { max-width: var(--fold-page) !important; margin-left: 16px !important; margin-right: auto !important; }   /* the network box's own inline width */
  .sheet > *, .alm-body, .alm-comments { max-width: 100%; }
  .fine { max-width: var(--fold-page); }
}

/* v2 (28-Oct, the full device set): with the desktop bar (wider than 760 px) a half-open foldable put the menu and the search
   across the fold. The bar keeps two rows there: the word mark with the search and light/dark on the first (the search wholly
   on the right half: 124 px = light/dark 44 + the WordPress pages' search toggle 44 (details.ymhs) + their gaps + the margin from
   the fold), the menu on its own row on the left half. */
@media (horizontal-viewport-segments: 2) and (min-width: 761px) {
  .nav { order: 3; flex: 0 0 var(--fold-page); margin-right: calc(100% - var(--fold-page)); }
  .ask { max-width: calc(var(--fold-page) - 124px); }
}

/* v3 (28-Oct-2026 evening, the full device set): the WordPress crumb links are short words, so they also get a 44 px minimum width */
@media (pointer: coarse) { .alm-crumbs a { min-width: 44px; text-align: center; } .comment-form .submit { min-height: 44px; } }

/* ── v4 (28-Oct-2026 night; helper 34 for lead 68, from helper 2's finer-check leftovers): in the two-column ranked rows (v3) a row kept
   its desktop grid above 680 px, so its nowrap "go" button sat over the fold (the alternatives pages, 704–954). At book posture every
   row takes the site's own phone layout: the actions on a wrapping line under the name. ── */
@media (horizontal-viewport-segments: 2) {
  .rows .row { grid-template-columns: 40px 42px minmax(0, 1fr); gap: 4px 12px; }
  .rows .row .side { display: flex; flex-wrap: wrap; grid-column: 3 / -1; align-items: center; gap: 8px 12px; min-width: 0; text-align: left; }
  .rows .row .side .go { white-space: normal; }
}