/* Mobile Safari readability: preserve the studio image without bleaching page content. */
@media (max-width: 767px) {
  html:not(.dark) #bg-base {
    background: #e5e7eb;
  }

  html:not(.dark) #bg-layer {
    opacity: 0.28;
  }

  html:not(.dark) #bg-overlay {
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.56) 60%,
      rgba(255, 255, 255, 0.78) 100%
    );
  }

  /* A solid header prevents content showing through while Safari is scrolling. */
  header.fixed {
    background-color: rgba(255, 255, 255, 0.96);
  }

  html.dark header.fixed {
    background-color: rgba(0, 0, 0, 0.96);
  }
}