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