/* ───────────── 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. */
h1, h2, h3 { overflow-wrap: anywhere; }
/* the bar never sticks (the owner's standing rule: no sticky header on any site) */
.top { position: relative; }
/* safe areas: notches, rounded corners and the home bar */
.shell { width: min(1240px, 100% - max(20px, env(safe-area-inset-left)) - max(20px, env(safe-area-inset-right))); }
@media (max-width: 520px) { .shell { width: calc(100% - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right))); } }
.base { padding-bottom: max(36px, env(safe-area-inset-bottom)); }
/* touch: every target at least 44 px (links inside sentences excepted) */
@media (pointer: coarse) {
  .logo { min-height: 44px; }
  .theme { width: 44px; height: 44px; }
  .seek input { height: 44px; }
  .base ul { gap: 0; }
  .base ul a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .go { min-height: 44px; }
  .crumbs a { display: inline-block; padding: 12px 3px; margin: -12px -3px; }
}
/* 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); }
  .base-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fold-gap); }
}

/* ── v2 (28-Oct-2026 afternoon, RESPONSIVE helper #2 for the lead 68): what the full device set (45 viewports + 4 half-open
   foldables) still found ── */
@media (pointer: coarse) {
  .logo { min-width: 44px; }
  /* list rows and chips */
  .live ol a, .links a, .ifs-latest li > a, .ifs-acts > a, .ifs-btn, .ifs-rail-inline > summary { min-height: 44px; }
  .quick a { height: 44px; }
  .switch label { min-height: 44px; }
  .pages a, .pages span { min-width: 44px; height: 44px; }
  :root a.go { min-height: 44px; }
  /* a lone link in a line: the layout does not move */
  .live h3 > a, .band-head > a, .panel-models .small > a, .eyebrow > a, .specs dd > a, .ifs-kick > a, .ifs-byline > a,
  .footer-link-wrapper a { display: inline-block; padding-block: 14px; margin-block: -14px; }
  .band-head > a { min-width: 44px; text-align: center; }
  .ifs-footer-menu li > a { display: inline-block; min-width: 44px; padding-block: 13px; margin-block: -13px; text-align: center; }
}
/* book posture: nothing across the fold. Text and single blocks keep to the left page; a page with a side column puts it on the
   right page; lists and grids run one column per page; the bar keeps its search wholly on the right page. */
@media (horizontal-viewport-segments: 2) {
  :root :is(.board-head, .mk-head, .card-head, .ifs-head, .band-head, .band h2, .band p, .lead, .table, .stream, .big-seek, .ifs-find, .ifs-acts,
  .base .fine, .ifs-footer-menu > ul, .actions, .switch) { max-width: var(--fold-page); margin-left: 0; margin-right: auto; }
  :root .big-seek { max-width: var(--fold-page) !important; }   /* the search page's own style="max-width:720px" */
  .narrow, .ifs-narrow, .shell .ifs-narrow, .ifs-cols.ifs-solo { width: auto !important; max-width: var(--fold-page) !important; margin-left: 16px !important; margin-right: auto !important; }
  .ifs-cols.ifs-solo { grid-template-columns: minmax(0, 1fr); }
  :root .card-head { grid-template-columns: minmax(0, 1fr); }
  :root :is(.hero, .split, .ifs-cols:not(.ifs-solo)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fold-gap); }
  :root .split > aside { position: static; }
  :root :is(.live, .stacks, .matchups, .mates, .links, .trio, .tiles, .rate-cards, .flow) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: var(--fold-gap) !important; }   /* !important: a list's own style attribute (.mates) */
  /* the bar: the word mark and the search with light/dark on one row (the search wholly on the right page: 72 px = light/dark
     44 + the gap 24 + the margin from the fold, less the page's own gutter), the section links on their own row on the left page */
  .top-in { flex-wrap: wrap; height: auto; min-height: 62px; padding-block: 8px; row-gap: 4px; }
  .top-in .seek { margin-left: auto; max-width: calc(var(--fold-page) - 72px); }
  .top-in .sections { order: 3; flex: 0 0 var(--fold-page); margin-right: calc(100% - var(--fold-page)); flex-wrap: wrap; }
}