/* ───────────── 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 search and light/dark buttons stay on the
   screen (27 px off at 320); the four doors may shrink (their big figures pushed the second column 27 px off at 320); a long name
   breaks inside its heading */
@media (max-width: 380px) { .bar-in { gap: 10px; } .bar-end { gap: 6px; } .brand { gap: 8px; } .brand svg { width: 28px; height: 28px; } .brand .word { font-size: 14px; } }
.doors { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .door { padding: 16px 14px; } .door-fig { font-size: 32px; } }
.door { min-width: 0; overflow-wrap: anywhere; }
h1, h2, h3 { overflow-wrap: anywhere; }
.shop-head { grid-template-columns: minmax(0, 1fr); }
.shop-head > * { min-width: 0; }
.shop-head .tag { white-space: normal; max-width: 100%; }   /* a long plan tag ran to 371 px on a 320 phone */

/* 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(var(--gut), env(safe-area-inset-left)); padding-right: max(var(--gut), env(safe-area-inset-right)); }
.strip-in { padding-left: max(var(--gut), env(safe-area-inset-left)); padding-right: max(var(--gut), env(safe-area-inset-right)); }
.foot-low { 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, .btn.small, .btn { min-height: 44px; }
  .strip a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot ul { gap: 0; }
  .foot ul a, .foot-low nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .foot-low nav { gap: 0 16px; }
  .dim-end { display: inline-block; padding-block: 16px; margin-block: -16px; }
  details.sheet > summary, details > summary { display: flex; align-items: center; min-height: 44px; }
  .crumbs a { display: inline-block; padding: 14px 3px; margin: -14px -3px; }
}