/* ───────────── 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; }
}

/* ── v2 (28-Oct-2026 evening; helper 34 for lead 68 + AI TRAFFIC 24, AI-LAYOUT.md): the answer comes up sooner on a phone.
   The booth below 980 px gave the tools a row of their own (the section links take a full row of their own, order 3): on a phone the
   word mark keeps row one and the section links (still a sideways scroller) share row two with the tools — 180 → ~126 px. The post
   head and a list's masthead are tightened; a post's tables scroll in their own box with the first column held; FAQ answers show.
   CANARY: the WordPress rules apply to 5 posts first (body.postid-N); the fleet follows when they check out. Ads, sponsor boxes and
   their labels are untouched; everything is set when the sheet loads, so nothing shifts (CLS 0). ── */
@media (max-width: 480px) {
  :is(body.postid-273, body.postid-108146, body.postid-108416, body.postid-107788, body.postid-301) .dt-bar .dt-in { gap: 8px; padding-top: 8px; }
  :is(body.postid-273, body.postid-108146, body.postid-108416, body.postid-107788, body.postid-301) .dt-bar .dt-word { flex-basis: 100%; }
  :is(body.postid-273, body.postid-108146, body.postid-108416, body.postid-107788, body.postid-301) .dt-bar .dt-nav { order: 2; width: auto; flex: 1 1 0; min-width: 0; margin: 0 0 0 -4px; }
  :is(body.postid-273, body.postid-108146, body.postid-108416, body.postid-107788, body.postid-301) .dt-bar .dt-tools { order: 3; }
  :is(body.postid-273, body.postid-108146, body.postid-108416, body.postid-107788, body.postid-301) .room-head { padding-top: 10px; padding-bottom: 6px; }
  :is(body.postid-273, body.postid-108146, body.postid-108416, body.postid-107788, body.postid-301) .room-title { font-size: 1.62rem; margin: .25em 0 .15em; }
  :is(body.postid-273, body.postid-108146, body.postid-108416, body.postid-107788, body.postid-301) .room-byline { margin-top: 4px; }
  /* a list's masthead (the directory's /best/ pages) */
  .masthead { padding-top: 14px; }
  .masthead h1 { margin-top: 2px; }
}
:is(body.postid-273, body.postid-108146, body.postid-108416, body.postid-107788, body.postid-301) .entry-content table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
:is(body.postid-273, body.postid-108146, body.postid-108416, body.postid-107788, body.postid-301) .entry-content :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--paper); }
:is(body.postid-273, body.postid-108146, body.postid-108416, body.postid-107788, body.postid-301) details:is([class*="faq"] *, .faq *, [class*="faq"])::details-content { content-visibility: visible; display: block; }
/* fold fixes found by the 45-viewport run on these posts (for every post, not only the canary): the featured video's box gets its
   width from a script at load and kept it when the screen turned or unfolded (434 px on a 320 px screen); the post head's kicker, the
   previous/next links and a lone link in the author box get 44 px boxes in place */
figure.room-picture > div, figure.room-picture iframe { max-width: 100%; }
@media (pointer: coarse) {
  .room-kicker a, .room-turn a, .room-more p > a:only-child { display: inline-block; padding-block: 16px; margin-block: -16px; }
}