/* ───────────── 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: below 380 px the word mark and the gaps give way so the light/dark and menu buttons stay on the
   screen (27 px off at 320); a long name breaks inside its heading */
@media (max-width: 380px) { .bar-in { gap: 8px; } .bar-tools { gap: 6px; } .brand { gap: 8px; } .brand svg { width: 30px; height: 30px; } .brand-word b { font-size: 15px; } }
h1, h2, h3 { overflow-wrap: anywhere; }

/* 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 */
.wrap { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
@media (max-width: 640px) { .wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } }

/* touch: every target at least 44 px (links inside sentences excepted) */
@media (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  .brand, .btn, .btn-s { min-height: 44px; }
  details > summary { display: 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; }
  .crumbs a, .more { display: inline-block; padding: 13px 3px; margin: -13px -3px; }
  aside li > a, main li > a:only-child { display: inline-block; padding-block: 12px; margin-block: -12px; }
}
.foot { padding-bottom: max(28px, env(safe-area-inset-bottom)); }

/* 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); }
  .wrap { padding-left: 16px; padding-right: 16px; }
  .foot-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fold-gap); }
}

/* ── v2 (28-Oct-2026 evening; 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). These name main#main because the site's own rules outrank
   plain classes; ad slots, sponsor boxes and the estate's search/newsletter are left as they are. ── */
@media (pointer: coarse) {
  a.skip { min-height: 44px; }
  .bc-comments form.comment-form :is(input[type=text], input[type=email], input[type=url], .submit) { min-height: 44px; }   /* the theme's input[type] rule sets 42 */
  .pager .btn-s, .bc-pager .page-numbers { min-width: 44px; min-height: 44px; }
  .bc-legal-menu li > a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .bc-legal-menu ul.menu { row-gap: 0; }
  a.chip { display: inline-flex; align-items: center; min-height: 44px; }
  .card.trade > h3 > a, td.small > a, .bc-byline a, a.small, main#main > p.muted > a:only-child { display: inline-block; padding-block: 13px; margin-block: -13px; }
  main#main ul:not([class]) > li > a:first-child { display: inline-block; padding-block: 12px; margin-block: -12px; }   /* the trades list: a link and its count */
}
@media (horizontal-viewport-segments: 2) {
  /* grids and lists: one column on each page */
  main#main :is(.wrap > .grid, .wrap.grid, ol.rows, .offers, ol.bc-index) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fold-gap); }
  main#main :is(.wrap > .grid, .wrap.grid, ol.rows, .offers, ol.bc-index) > * { min-width: 0; }
  /* a software page's two columns: the main column on the left page, the side on the right */
  main#main .wrap.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fold-gap); }
  main#main .wrap.cols > * { min-width: 0; }
  /* single text blocks, heads, forms and tables in their box: the left page */
  main#main :is(.hero-in > *, section.head .wrap > *, .sheet-head, .table-scroll, section.band .wrap > p, .wrap > h1, .wrap > p, .wrap > form.big-find,
    .bc-col, .bc-list-head, .bc-page-head-in, .bc-page-card) { max-width: var(--fold-page); margin-left: 0; margin-right: auto; }
  main#main .bc-table-scroll { max-width: 100%; overflow-x: auto; }
  nav.bc-legal-menu { max-width: var(--fold-page); margin-left: 0; margin-right: auto; }
  /* a centred page box (the claim page's narrower one, the hero's padding) starts at the left edge, so the left page holds */
  main#main > .wrap { margin-left: 0 !important; padding-left: max(16px, env(safe-area-inset-left)) !important; }
  main#main section.hero > .wrap.hero-in { max-width: none !important; }
  main#main .wrap > form.big-find[style] { max-width: var(--fold-page) !important; }   /* the claim page's search: style="max-width:none" */
  footer.foot .foot-cols > div, footer.foot .foot-cols > div:first-child { grid-column: auto; min-width: 0; }   /* the brand column spanned both; its 420 px note crossed */
  /* 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: max(16px, env(safe-area-inset-left)) !important; margin-right: auto !important; }
}

/* ── v3 (28-Oct-2026 night; helper 34 for lead 68): what the finer book-posture check (loose inline text) found on live v2 — the home
   hero's eyebrow pill sat centred across the fold (the hero's words already keep to the left half; the pill is inline, so it was
   centred on the whole width), the footer's base line (two spans pushed to the ends) crossed the fold, and at the Fold8 Ultra's 954
   the home's story cards ran three across with the middle one over the fold. Touch: a lone link in a rank line ("#9 of 31 in CAD
   Viewers", 100×20) and the comment form's consent box (the theme's input rule makes it 42 px tall). ── */
@media (pointer: coarse) {
  main#main p.muted > a:only-child { display: inline-block; padding-block: 13px; margin-block: -13px; }
  .bc-comments form.comment-form input[type=checkbox] { min-height: 44px; }
}
@media (horizontal-viewport-segments: 2) {
  main#main section.hero .hero-in { text-align: left; }
  footer.foot .foot-base { flex-direction: column; align-items: flex-start; }
  footer.foot .foot-base > * { max-width: var(--fold-page); }
  main#main .stories { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fold-gap); }
}