/* ───────────── every form factor: phones from 320 px, foldables (cover, open, book posture), tablets, desktops ─────────────
   rules_design_review, 28-Oct-2026 · directory-blueprint/design/FOLD-LAYER.md. An override appended after the site's own CSS (the
   directory's sheets, and on WordPress pages the Screening Room's style.css); the viewport meta carries viewport-fit=cover.
   DocumentaryTube, helper 34. */

/* nothing wider than the screen, from 320 px: the home's search field may shrink (its button sat 5 px off the screen), the guide list
   no longer insists on 320 px columns, a long "Visit <domain>" button breaks inside itself, and a service's logo fits its 60 px column */
h1, h2, h3 { overflow-wrap: anywhere; }
.hero-find input { min-width: 0; }
.guide-list.guide-list { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.film-go .button { min-width: 0; max-width: 100%; overflow-wrap: anywhere; line-height: 1.25; padding-block: 6px; text-align: center; }
@media (max-width: 640px) { .chan-head .logo { width: 60px !important; height: 60px !important; } }

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

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

/* touch: every target at least 44 px (links inside sentences excepted) */
@media (pointer: coarse) {
  .dt-icon { width: 44px; height: 44px; }
  .dt-word, .dt-cta, .button, a.tag, .room-tags a, .room-talk .submit, .terms button { min-height: 44px; }
  .dt-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .dt-foot ul { gap: 0; }
  .dt-foot ul a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .dt-legal { row-gap: 0; }
  .dt-legal a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .roll { gap: 0; }
  .roll li > a:first-child { display: inline-flex; align-items: center; min-height: 44px; }
  .reels a, .reels span, .room-pages .page-numbers { min-width: 44px; height: 44px; }
  /* lone small links: a taller box that does not move the layout */
  .trail a, .room-trail a, .act-head a, .entry-by a, .sidecard p > a, td a, .room-byline a, .fine > a {
    display: inline-block; padding: 14px 6px; margin: -14px -6px; }
}

/* book posture (a foldable half-open like a book): nothing across the fold. Lists and grids put one column on each half; a page's
   opening words and the reading column keep to the left half; side columns and pictures go to the right 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) - 36px); }
  /* the booth: word mark on the left half, tools on the right; the section links share their lines out over the two halves */
  .dt-nav { display: block; columns: 2; column-gap: var(--fold-gap); white-space: normal; overflow: visible; }
  .dt-nav a { display: inline-flex; margin-bottom: 4px; }
  .trail, .room-trail, .masthead, .room-head, .copy, .questions, .notice, .remark, .reels, .room-pages, .dt-legal, .act-head, .act > h2, .act > .fine, .steps,
    .chan-head, .room-lost { max-width: var(--fold-page); margin-inline: 0 auto; }
  .page-in.hero-in, .film-head, .film-body, .room-grid, .pair, .dt-foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fold-gap); }
  .film-pic { order: 0; }
  .dt-foot-top > :first-child { grid-column: auto; }
  .slates, .boards, .stories, .guide-list.guide-list, .standings, .programme, .tickets, .offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fold-gap); }
  /* the home's tag cloud: one column of tags on each half */
  .act > .tags { display: block; columns: 2; column-gap: var(--fold-gap); }
  .act > .tags > .tag { display: flex; width: fit-content; margin: 0 0 6px; break-inside: avoid; }
  /* a row in one half takes its phone layout */
  .entry { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
  .entry-when b { font-size: 1.3rem; }
  .entry-side { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; max-width: none; min-width: 0; }
  .entry-pic { display: none; }
  .chan { grid-template-columns: 30px 44px minmax(0, 1fr); }
  .chan .ring, .chan .chan-go { grid-column: 3; justify-self: start; }
  .chan-head { grid-template-columns: 60px minmax(0, 1fr); }
  .chan-head .logo { width: 60px !important; height: 60px !important; }
  .chan-ring { grid-column: 1 / -1; justify-items: start; }
}