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