/* ───────────── 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 search box may shrink inside its group (the group kept the box's full width, so at 401–440 px
   the light/dark button sat 33 px off the screen); a long name breaks inside its heading */
.an-end { min-width: 0; }
@media (max-width: 640px) { .an-end { flex: 1; } }
h1, h2, h3 { overflow-wrap: anywhere; }
.head { grid-template-columns: minmax(0, 1fr); }
.head > * { min-width: 0; }

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

/* safe areas: notches, rounded corners and the home bar */
.an-bar .an-in, .an-foot .an-in, .an-foot .an-base { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
.an-foot .an-base { padding-bottom: max(32px, env(safe-area-inset-bottom)); }
@media (max-width: 640px) { .an-bar .an-in { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); } }

/* touch: every target at least 44 px (links inside sentences excepted) */
@media (pointer: coarse) {
  .an-word { min-height: 44px; }
  .an-mode { width: 44px; height: 44px; }
  .an-seek { height: 46px; padding-right: 1px; }
  .an-seek input { align-self: stretch; }
  .an-seek button { width: 44px; height: 44px; }
  .an-strip a { display: inline-flex; align-items: center; min-height: 44px; }
  .an-foot ul { gap: 0; }
  .an-foot ul a, .an-foot .an-base a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .siblings a, .btn, .btn.line { min-height: 44px; }
  .letters a, .pager a { min-width: 44px; min-height: 44px; }
  .more, .crumbs a, .den-crumbs a { display: inline-block; padding-block: 12px; margin-block: -12px; }
  aside li a { display: inline-block; padding-block: 11px; margin-block: -11px; }
  .crumbs a, .den-crumbs a { padding-inline: 3px; margin-inline: -3px; }
  details.photo-credits > summary { display: flex; align-items: center; min-height: 44px; }
  .den-sections a { min-height: 44px; }
}

/* book posture (a foldable half-open like a book): nothing across the fold. The page keeps equal margins so the gap between two
   columns lands on the fold; grids put one column on each half, a page's opening words and running text keep to the left half. */
@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, .an-bar .an-in, .an-foot .an-in, .an-foot .an-base, .den-wrap { padding-left: 16px; padding-right: 16px; }
  .hero, .t-hero, .band, .co, .den-cols, .den-lead a { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fold-gap); }
  .doors, .board3, .stories, .gets, .how, .den-grid, .den-grid--3, .passports, .cards, .ad-grid, .plans-w .grid, .an-foot .an-in { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fold-gap); }
  .an-foot .an-in > :first-child { grid-column: auto; }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fold-gap); }
  .mosaic .mcell:nth-child(n) { grid-column: auto; grid-row: auto; }
  .head, .lede, .den-head, .den-story, .seekbig, .an-strip, main section > h2, main section > p, main section > ul, main section > ol, .step { max-width: var(--fold-page); }
  .an-end { max-width: calc(var(--seg0) - 60px); margin-left: auto; }
}