/* Knead wide screens (spec docs/superpowers/specs/2026-11-09-knead-wide-screen-scaling.md, rev 3). Phat 2026-11-09 on a
   ~2560 monitor: "uneven on different screen sizes"; ruling "Scale up on big screens", picks "Up to 1.22x" and "1600
   column". Linked last on every page with media="(min-width: 1600px)", and every rule is inside its own min-width query
   as well, so nothing here can reach 1599px and below; styles.css and the look files stay byte-identical (tests/
   wide-screen.test.mjs pins them).
   1. The whole page zooms in two steps, so the 1440 laptop composition is reproduced larger. Values are multiples of
      1/64 because Firefox stores zoom in 1/64 steps (1.333 became 1.328125 there and left a strip under the hero);
      --z carries the same number for the viewport-unit twins below.
   2. Viewport units scale with zoom (a 100svh box renders 100svh x zoom), so each desktop min-height / max-height on
      100svh / 100dvh is divided by --z. The other vh rules in the site sit in phone/tablet queries.
   3. The pause button sits on the nav wrap's outer right edge, as it does at 1440, instead of the screen edge.
   4. From the cap step the column widens: the line through (1560 CSS px -> 1320) and (2560 / 1.21875 = 2100.5 CSS px ->
      1600), so it leaves the 1320 floor at ~1901 physical, reaches 1600 exactly at 2560 (option iv) and stays centred
      beyond.
   5. Each block sits inside @supports (zoom: 1) (review fix 2026-11-09): a browser without zoom (Firefox < 126) would
      otherwise get the / var(--z) heights and the wider column with nothing to match them (hero at 82% of the screen);
      without zoom it gets the unchanged 1440 layout, centred. */
@media (min-width: 1600px) {
  @supports (zoom: 1) {
    html { --z: 1.109375; zoom: 1.109375; }   /* 71/64 */
    .hero { min-height: calc(100svh / var(--z)); }
    .sh { min-height: min(calc(100svh / var(--z)), 900px); }
    [data-look="video"] .sh { min-height: max(calc(100svh / var(--z)), 760px); }
    .book-sheet-in { max-height: calc(100dvh / var(--z)); }
    .vpause { right: max(var(--pad), calc((100% - var(--max)) / 2)); }
  }
}
@media (min-width: 1760px) {
  @supports (zoom: 1) {
    html { --z: 1.21875; zoom: 1.21875; }   /* 78/64, the cap */
    :root { --max: clamp(1320px, calc(51.8% + 512px), 1600px); }
  }
}