/* ───────────── 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: a long name breaks inside its heading; below 380 px the word mark and the gaps give way so the
   search and light/dark buttons stay on the screen (13 px off at 320); device rows may shrink */
h1, h2, h3 { overflow-wrap: anywhere; }
@media (max-width: 380px) { .bar-in { gap: 10px; } .word { gap: 7px; } .word svg { width: 28px; height: 28px; } .word b { font-size: .86rem; } .bar-end { gap: 6px; } }
.dev-row, .dev-main > * { min-width: 0; }
.dev-main > * { overflow-wrap: anywhere; }
.makers-list li, .makers-list a { min-width: 0; overflow-wrap: anywhere; }   /* a long maker name ran 8 px past the list at 320 */

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

/* safe areas: notches, rounded corners and the home bar */
.bar .wrap, .foot .wrap, .wrap { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
@media (max-width: 640px) { .bar .wrap, .foot .wrap, .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)); }

@media (max-width: 520px) { .bar-cta { display: none !important; } }

/* touch: every target at least 44 px (links inside sentences excepted) */
@media (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  .word, .btn { min-height: 44px; }
  .bar-cta { display: inline-block; padding-top: 13px; padding-bottom: 13px; }
  .strip a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot ul { gap: 0; }
  .foot ul a, .foot-base a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  details > summary { display: flex; align-items: center; min-height: 44px; }
  .crumbs a, .src a, .sec-head a, .style-more { display: inline-block; padding-block: 12px; margin-block: -12px; }
  .makers-list li > a { display: block; padding-block: 12px; }
  .story-sec { display: inline-block; padding-block: 16px; margin-block: -16px; }
  .term-switch button { min-height: 44px; }
}

/* book posture (a foldable half-open like a book): 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); }
  .foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fold-gap); }
}

/* ── v2 (28-Oct-2026 afternoon; helper 34 for lead 68): what the full 45-viewport run left — small touch targets, and text across the
   fold in book posture (bin/hinge.mjs --leaf at 954×859 and 626×890). Ad slots (.google-auto-placed included) are left as they are. ── */
@media (pointer: coarse) {
  .style-card li > a, .side-list li > a { display: flex; align-items: center; min-height: 44px; }
  .story-body > h3 > a, .vs-words > a, .meta-line > a, .sec > p.small > a, .head p.small > a { display: inline-block; padding-block: 12px; margin-block: -12px; }
  .sec-head a, p.small > a { min-width: 44px; }
  .src a { padding-block: 13px; margin-block: -13px; }             /* v1's 12 px left a 43.6 px box */
  .story-sec { padding-block: 17px; margin-block: -17px; }          /* v1's 16 px left 43 px */
  .tools select, .tools input, .order-box input, a.skip { min-height: 44px; }
}
@media (horizontal-viewport-segments: 2) {
  /* grids and lists: one column on each page */
  .grid, .groups-grid, .register, .ranking, .rounds, .how, .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fold-gap); }
  .plans > * { grid-column: auto; }
  /* two-part heads and detail bodies: the words on the left page, the picture / side column on the right */
  .two, .house-body, .app-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fold-gap); }
  /* the hero and a brand's head carry Astro-scoped columns (.x[data-astro-cid-…], 0,2,0): named with their parents to win */
  .band .wrap.hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fold-gap); }
  .wrap > .house-head.tray { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fold-gap); }
  /* the home's style cards and other card grids under a section carry their own scoped columns too */
  .sec > .grid.styles, section.sec > div.grid, .wrap > div.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fold-gap); }
  /* an app's head keeps its icon beside its words, all on the left page */
  .wrap > .app-head.tray { max-width: var(--fold-page); margin-left: 0; margin-right: auto; }
  /* single text blocks, forms and tables in their scroll box: the left page */
  .head, .vs-title, .prose, .wrap > p, .sec > h2, .sec > p, .sec-head, .faq, .tools, .table-wrap, .ruler-note, .chips, .foot .foot-brand > p, .foot-base > *
    { max-width: var(--fold-page); margin-left: 0; margin-right: auto; }
  /* the vendor page's head carries max-width:560px in a style attribute; the ruler's note sits inside the tray's padding */
  .wrap > .head { max-width: var(--fold-page); margin-left: 0; margin-right: auto; }
  .wrap > section.head[style] { max-width: var(--fold-page) !important; margin-left: 0; margin-right: auto; }   /* style="max-width:560px" */
  figure.ruler .ruler-note { max-width: calc(var(--fold-page) - 40px); }
  /* the section strip scrolls sideways; in book posture its links wrap on the left page */
  .strip .strip-in { flex-wrap: wrap; overflow-x: visible; max-width: var(--fold-page); margin-left: 0; margin-right: auto; }
  /* the estate's network box carries its size and centring in a style attribute */
  aside.ym-net { max-width: var(--fold-page) !important; margin-left: 0 !important; margin-right: auto !important; }
}
/* the WordPress posts (theme watchranker-movement): the crumbs and the section links get 44 px boxes in place; in book posture the post
   column (head, words, next/previous) reads on the left page. Links inside the post's sentences are left as they are. */
@media (pointer: coarse) {
  .mv-crumbs a { display: inline-block; padding-block: 11px; margin-block: -11px; }
  a.mv-sec { display: inline-block; padding-block: 17px; margin-block: -17px; }
  a.mv-kicker { display: inline-block; padding-block: 16px; margin-block: -16px; }
  .mv-card-title a { display: inline-block; padding-block: 11px; margin-block: -11px; }
  #ez-toc-container .ez-toc-title-toggle a { min-height: 44px; min-width: 44px; }   /* the contents box's toggle (plugin) */
}
@media (horizontal-viewport-segments: 2) {
  .mv-story > .mv-col { max-width: var(--fold-page); margin-left: 0; margin-right: auto; }
}