/* ───────────── 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; }
}

/* ── v5 (29-Oct-2026): CLS 0.68 at 1024 touch (#1125). The bar wraps by each item's own size (flex-wrap), and at 1024 it fits by 1 px:
   brand 189 + links 444 + search 260 + light/dark 44 + gaps 54 = 991 of 992 in the web fonts. Until they arrive, the fallback's links
   are 3 px wider, so the light/dark button sat on a second row and jumped 950 px up when the fonts landed (bin/shift-dist.mjs). The
   search's basis 240 px (it still grows to fill the row: 261 px at 1024, its 360 px cap on desktops) gives the bar 20 px of slack, so
   either font keeps one row. Only the app's bar: a WordPress page's bar also gets the estate search toggle (details.ymhs, moved in by
   script after the first paint), sits on two rows at 1024 in either font already, and would flip the other way — so WordPress pages
   (body.wp-theme-…, in the server HTML) are left as they are. Phones (760 px and below) keep the search on its own row. ── */
@media (min-width: 761px) {
  :root body:not([class*="wp-theme-"]) .bar-in > form.ask { flex-basis: 240px; }
}