/* Mobile density: 80% visual size, while page surfaces still fill the viewport.
 * Keep native pinch zoom enabled. Do not replace this with transform: scale(),
 * which changes fixed-position containing blocks and leaves scroll-space behind.
 */
@media (max-width: 760px) {
 @supports (zoom: .8) {
  html {
    zoom: .8;
    --mobile-density-viewport-width: 125vw;
    --mobile-density-viewport-height: 125vh;
  }
  @supports (height: 100dvh) {
    html { --mobile-density-viewport-height: 125dvh; }
  }
  html body {
    width: var(--mobile-density-viewport-width) !important;
    max-width: var(--mobile-density-viewport-width) !important;
    min-height: var(--mobile-density-viewport-height);
  }
  html body > main,
  html body > main > .screen[data-view] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html body > .site-chrome {
    flex-basis: calc(var(--mobile-density-viewport-width) - 2 * var(--floating-header-inset)) !important;
    width: calc(var(--mobile-density-viewport-width) - 2 * var(--floating-header-inset)) !important;
    min-width: calc(var(--mobile-density-viewport-width) - 2 * var(--floating-header-inset)) !important;
    max-width: calc(var(--mobile-density-viewport-width) - 2 * var(--floating-header-inset)) !important;
  }
  html body .site-chrome .site-nav {
    height: var(--mobile-density-viewport-height) !important;
    max-height: var(--mobile-density-viewport-height) !important;
  }
 }
}