/* ───────────── 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 loaded after the app's own CSS (and on the
   blog after the theme's app.css + blog.css); the viewport meta carries viewport-fit=cover. ScreenshotNeo, helper 34. Touch/fold rules
   never change `display` of anything the site hides. */

/* nothing wider than the screen, from 320 px: the home's price ledger scrolls inside its own box instead of pushing the page 33 px
   wide at 320 */
h1, h2, h3 { overflow-wrap: anywhere; }
@media (max-width: 620px) { .ledger { display: block; max-width: 100%; overflow-x: auto; } }

/* the header never sticks (the owner's standing rule: no sticky header on any site); the docs' side list gives way on short screens */
.top { position: relative; }
@media (max-height: 520px) { .docs aside { position: static; max-height: none; } }

/* safe areas: notches, rounded corners and the home bar */
.wrap { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
@media (max-width: 620px) { .wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } }
.foot { padding-bottom: max(48px, env(safe-area-inset-bottom)); }

/* touch: every target at least 44 px (links inside sentences excepted) */
@media (pointer: coarse) {
  .btn-sm, .top-cta .btn, button.copy, .page-numbers, .brand, .codetabs-bar button, .resp-tabs button, .seg button,
  .studio-bar input, .studio-bar .btn { min-height: 44px; }
  .page-numbers, .codetabs-bar button { min-width: 44px; }
  .pager-b .page-numbers { min-width: 44px; height: 44px; }
  .top-cta .iconbtn { width: 44px; height: 44px; }
  .top nav a, .foot-in nav a, .legal-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  .foot-in nav { row-gap: 0; }
  .bcats a { padding-block: 10px; }
  /* lone small links: a taller box that does not move the layout */
  .cta-link { display: inline-block; padding-block: 9px; margin-block: -9px; }
  .foot-in .brand { min-height: 0; padding-block: 11px; margin-block: -11px; }
  .faq summary { padding-block: 10px; margin-block: -10px; }
  .post-card h2 a { display: inline-block; padding-block: 9px; margin-block: -9px; }
  .band-head > a.link { padding-block: 9px; margin-block: -9px; }
  .pc-meta a { display: inline-block; padding-block: 14px; margin-block: -14px; }
  .foot-note span a { display: inline-block; padding: 14px 3px; margin: -14px -3px; }
  .crumbs a { display: inline-block; padding: 14px 7px; margin: -14px -7px; }
  .kicker a { display: inline-block; padding: 15px 6px; margin: -15px -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, an article and a form 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) - 40px); }
  .hero, .two, .docs, .foot-in, .bh { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fold-gap); }
  .frames, .plans, .pt-cards, .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fold-gap); }
  .legal, .legal-nav, .band h2, .band .sub, .art-h, .art-cover { max-width: var(--fold-page); margin-inline: 0 auto; }
  /* the article: its text in the left half, the contents list (where the site shows it) in the right */
  .art-grid, .art-grid.with-toc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fold-gap); }
  /* the blog's lead post: picture in the left half, words in the right (no picture: words in the left) */
  .posts.has-lead > .lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--fold-gap); }
  .posts.has-lead > .lead > * { grid-column: 2; grid-row: auto; }
  .posts.has-lead > .lead:not(.has-img) > * { grid-column: 1; }
  .posts.has-lead > .lead > .pc-img { grid-column: 1; grid-row: 1 / span 4; align-self: start; }
  /* sign-in and sign-up: the card in the left half */
  .auth-main { justify-items: start; }
  .auth-card { max-width: var(--fold-page); }
}