/* ───────────── 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: the front page's single column may shrink (a plain 1fr took its widest line: 25 px off at 360);
   below 400 px the word mark and the gaps give way so the search and light/dark buttons stay on the screen (34 px off at 320) */
@media (max-width: 900px) { .front-page { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) { .mast-main .wrap { gap: 10px; } .brand { gap: 8px; } .word { font-size: 13.5px; gap: 4px; } .brand-mark { width: 30px; height: 30px; } }
@media (max-width: 340px) { .word { font-size: 12px; letter-spacing: 0; } .word .us { padding: 3px 4px 2px; } .mast-tools { gap: 4px; } }
h1, h2, h3 { overflow-wrap: anywhere; }
@media (max-width: 400px) { .btn { white-space: normal; max-width: 100%; text-align: center; } }   /* a long red button ran 9 px off at 320 */

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

/* safe areas: notches, rounded corners and the home bar */
.wrap { padding-left: max(var(--gut), env(safe-area-inset-left)); padding-right: max(var(--gut), env(safe-area-inset-right)); }
.folio { padding-bottom: env(safe-area-inset-bottom); }

/* touch: every target at least 44 px (links inside sentences excepted) */
@media (pointer: coarse) {
  .chip { min-height: 44px; }
  .btn.ghost, .btn.small { min-height: 44px; }
  .mast-strip a { display: inline-flex; align-items: center; min-height: 44px; }
  .more { display: inline-block; padding-block: 10px; margin-block: -10px; }
  .folio ul { gap: 0; }
  .folio ul a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .brand { min-height: 44px; }
  .terms button { min-height: 44px; }
}