/* ───────────── 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. */
h1, h2, h3 { overflow-wrap: anywhere; }

/* 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 { width: min(var(--wrap), 100% - max(20px, env(safe-area-inset-left)) - max(20px, env(safe-area-inset-right))); }
@media (max-width: 640px) { .wrap { width: calc(100% - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right))); } }
.foot-base { padding-bottom: max(26px, env(safe-area-inset-bottom)); }

/* touch: every target at least 44 px (links inside sentences excepted) */
@media (pointer: coarse) {
  .word { min-height: 44px; }
  .mode { width: 44px; height: 44px; }
  .btn.sm, .bar .btn { min-height: 44px; }
  .bar nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .seek input { height: 44px; }
  .foot ul { gap: 0; }
  .foot ul a, .foot-base a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .foot-base { gap: 0 22px; }
  .crumbs a { display: inline-block; padding: 12px 3px; margin: -12px -3px; }
  aside li a { display: inline-block; padding-block: 12px; margin-block: -12px; }
}

/* book posture (a foldable half-open like a book): nothing across the fold */
@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); }
  .foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fold-gap); }
}

/* ── v2 (28-Oct-2026 evening; helper 34 for lead 68): what the full 45-viewport run left — small touch targets, and text across the
   fold in book posture (bin/hinge.mjs --leaf at 954×859 and 626×890). The site's own rules outrank plain classes, so these name
   main#main; ad slots and the estate's newsletter/search are left as they are. ── */
@media (pointer: coarse) {
  .word { min-width: 44px; }
  .seek button { min-width: 44px; min-height: 44px; }
  .btn { min-height: 44px; }
  .pager a { min-width: 44px; height: 44px; }
  .sec-head > a, dl.plate dd > a, .panel p.small > a:only-child { display: inline-block; padding-block: 13px; margin-block: -13px; }
  .ym-policy-links a { display: inline-block; min-width: 44px; padding-block: 14px; margin-block: -14px; }
  a.skip { min-height: 44px; }
  .crumbs a { min-width: 44px; padding-block: 14px; margin-block: -14px; }     /* v1's 12 px left 41 px */
  .comment-form :is(input[type=text], input[type=email], input[type=url], .submit, #submit) { min-height: 44px; }
  a.pn-chip { display: inline-flex; align-items: center; min-height: 44px; }
  .pn-crumbs a { display: inline-block; padding-block: 14px; margin-block: -14px; }
}
@media (horizontal-viewport-segments: 2) {
  /* grids and lists: one column on each page */
  main#main :is(ul.tiles, ul.covers, ol.slots, ul.gear, ul.lines, ul.home-slots, ol.steps) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fold-gap); }
  main#main :is(ul.tiles, ul.covers, ol.slots, ul.gear, ul.lines, ul.home-slots, ol.steps) > * { min-width: 0; grid-column: auto; }
  /* a game's head: the art and the words each on a page */
  main#main header.game-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fold-gap); }
  /* the home's slots carry their columns in a style attribute; the plans page's hero: words left, the preview right */
  main#main ul.home-slots { width: 100%; max-width: none !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: var(--fold-gap) !important; }
  main#main .shop-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fold-gap); }
  main#main .shop-hero-in > * { min-width: 0; }
  /* the key door's button sits centred: the box keeps to the left page */
  main#main .key-door { max-width: var(--fold-page); margin-left: 0; margin-right: auto; justify-content: flex-start; text-align: left; }
  /* a game's or a tool's sheet: the main column on the left page, the side sheet on the right */
  main#main .wrap > .sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fold-gap); }
  main#main .wrap > .sheet > * { min-width: 0; }
  /* single text blocks and heads: the left page */
  main#main :is(.home-hero-in > div, .wrap > p, .wrap > article.panel, .wrap > form.form, header.page-head, header.sheet-head, .shop-hero-in > div, .sec > h2, .sec > p)
    { max-width: var(--fold-page); margin-left: 0; margin-right: auto; }
  .pn-story > .pn-col { max-width: var(--fold-page); margin-left: 0; margin-right: auto; }
  aside.ym-net { max-width: var(--fold-page) !important; margin-left: max(16px, env(safe-area-inset-left)) !important; margin-right: auto !important; }
  footer.foot > p.ym-policy-links { max-width: var(--fold-page); margin-left: max(16px, env(safe-area-inset-left)); margin-right: auto; }
  /* the bar's section links take a row of their own on the right page (their last link sat across the fold at 954 px) */
  .bar .bar-in { flex-wrap: wrap; }
  .bar .bar-in > .bar-end { margin-left: auto; max-width: calc(var(--fold-page) + 8px); }   /* the bar's search: right page */
  .bar .bar-in > nav { order: 9; flex: 0 0 calc(var(--fold-page) - 20px); max-width: none; margin-left: calc(100% - var(--fold-page) + 20px); flex-wrap: wrap; justify-content: flex-end; }
}

/* ── v3 (28-Oct-2026 night; helper 34 for lead 68): what the finer book-posture check (loose inline text, every picture) found on live
   v2 — the footer's base line (a long span filling the row) crossed the fold everywhere, and on the advertise page the row of studio
   faces and the questions panel ran across it. ── */
@media (horizontal-viewport-segments: 2) {
  footer.foot .foot-base { flex-direction: column; align-items: flex-start; }
  footer.foot .foot-base > * { max-width: var(--fold-page); }
  main#main .sec > .faces-row { max-width: var(--fold-page); }
  main#main .sec > dl.faq.panel { max-width: var(--fold-page); margin-left: 0; margin-right: auto; }
}