/* ───────────── 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 product name breaks inside its heading (AccessibleColor.design ran 42 px off a 390 px
   phone), and below 380 px the word mark and the gaps give way so the three round buttons stay on the screen (8 px off at 320) */
h1, h2, h3 { overflow-wrap: anywhere; }
.prose p, .prose li, .panel p { overflow-wrap: break-word; }
.head { grid-template-columns: minmax(0, 1fr); }   /* a grid with no columns took its search box's width: 327 px in a 288 px page at 320 */
.block-head { flex-wrap: wrap; }
.palette a { overflow-wrap: anywhere; }   /* a long colour name ran 20 px past the last swatch at 320 */
@media (max-width: 380px) { .mast .wrap { gap: 10px; } .mast-end { gap: 4px; } .brand { font-size: 17px; gap: 6px; } .brand .mark { width: 28px; height: 28px; } }

/* 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 { width: min(1200px, 100% - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right))); }
.foot-bottom { padding-bottom: max(26px, env(safe-area-inset-bottom)); }

/* touch: every target at least 44 px (links inside sentences excepted) */
@media (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  .brand, .pill { min-height: 44px; }
  .search input { height: 44px; }
  .foot ul a { min-width: 44px; }
  aside .small a { display: inline-block; padding-block: 13px; margin-block: -13px; }
  .crumbs a { padding-inline: 4px; margin-inline: -4px; }
  .btn.small { min-height: 44px; }
  .more, .crumbs a { display: inline-block; padding-block: 12px; margin-block: -12px; }
  .foot ul { gap: 0; }
  .foot ul a, .foot-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
  .qa summary, details > summary { display: flex; align-items: center; min-height: 44px; }
  .seats a { min-height: 44px; align-items: center; }
  .tag[href] { display: inline-flex; align-items: center; min-height: 44px; }
}

/* book posture (a foldable half-open like a book): nothing across the fold. Two-column layouts put one column on each half, the
   opening words keep to the left half, ranked rows run down the left half and on down the right. */
@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 { width: calc(100% - 32px); }
  .hero, .layout, .two, .foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fold-gap); }
  .foot-top > :first-child { grid-column: auto; }
  .layout > aside, .summary { position: static; }
  .head, .sheet-head, .block-head, .search, .crumbs { max-width: var(--fold-page); }
  .sheet-head { grid-template-columns: auto minmax(0, 1fr); } .sheet-head .actions { grid-column: 1 / -1; }
  .rows { columns: 2; column-gap: var(--fold-gap); border: 0; background: transparent; overflow: visible; }
  .row { break-inside: avoid; border: 1px solid var(--rule); border-radius: var(--r); margin-bottom: 8px; background: var(--paper); }
}