/* ---- the phone deck ------------------------------------------------------ */
@media (max-width: 700px) {
  /* iOS Safari inflates small type by itself, so a screen that fits every emulator overflows the
     real phone. Pinning it makes the phone render the sizes the page actually asks for. */
  html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
    overflow-x: clip;            /* no sideways scroll to be had, at all */
    touch-action: pan-y;         /* a diagonal swipe is read as up-down only */
    overscroll-behavior: none;   /* and nothing rubber-bands at either end */ }
  html { scroll-padding-top: 0; }   /* a slide starts at the top of the screen, not 74px down */
  /* A SCREEN IS THE PART OF THE PHONE YOU CAN ACTUALLY SEE. The content starts below the menu;
     --nav-h is measured by the script, never guessed. */
  #home, .playlists, #about, #contact, .you-heard {
    /* A FIXED menu takes no flow space and sits ON the screen, so the screen is the whole window
       and its content starts below the menu. A STICKY menu takes its own space at the top of the
       document, so the screen is the window MINUS the menu and needs no padding at all. Both are
       one line because the script measures which it is: --deck-off is the menu's height when it is
       sticky and 0 when it is fixed. Getting this wrong parks every screen exactly one menu-height
       out, in one direction only, which is the bug that reads as "it works going down". */
    height: calc(100dvh - var(--deck-off, 0px)); width: 100%;
    overflow: hidden; box-sizing: border-box;
    padding-top: calc(var(--nav-h, 54px) - var(--deck-off, 0px));
    border-bottom: 40px solid #000;
  }
  /* THE FIT WRAPPER. transform, not zoom — zoom resizes the box as well as its contents.
     flex:0 0 auto so the wrapper keeps its OWN height instead of being squashed by the column. */
  /* TOP LEFT, NOT TOP CENTRE. The box is laid out WIDER than the screen and scaled back down, so
     its own centre is not the screen's centre — scaling about it slides everything sideways and the
     whole section reads crooked. From the top-left corner a box of 1/f width drawn at f lands
     exactly on the screen, edge to edge. */
  .deck-fit { transform-origin: 0 0; width: 100%; flex: 0 0 auto; }
  /* the transparent sheet that catches a swipe starting on an iframe (another document, so the
     finger never reaches this page). A tap steps it aside; it comes back on its own. */
  .deck-shield { position: absolute; inset: 0; z-index: 3; background: transparent; }
  .deck-shield[hidden] { display: none; }
  body:has(#home) footer{min-height:calc(100dvh - 82px);display:flex;flex-direction:column;justify-content:center;border-top:40px solid #000;box-sizing:border-box}
}