/* Mobile cover uses the same animated canvas as desktop. Do not layer the
   retired mobile gradient/video over it, which was causing a pale base. */
@media (max-width: 700px) {
  html,
  body {
    background: #000 !important;
    scrollbar-color: rgba(255, 255, 255, .38) #000;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    width: 5px;
    background: #000;
  }

  html::-webkit-scrollbar-track,
  body::-webkit-scrollbar-track {
    background: #000;
  }

  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, .38);
  }

  .portfolite-hero.portfolio-cover-2026 {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    min-height: max(760px, 100svh) !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  .portfolite-hero.portfolio-cover-2026 .portfolio-cover-2026__mobile-background {
    display: none !important;
  }

  .portfolite-hero.portfolio-cover-2026 .portfolio-cover-2026__reference {
    z-index: 1 !important;
    position: relative !important;
    width: 92% !important;
    margin: 0 !important;
    mix-blend-mode: normal !important;
  }

  /* The approved cover has a solid black board over the moving dot field.
     It must remain separate from the transparent reference art on mobile. */
  .portfolite-hero.portfolio-cover-2026 .portfolio-cover-2026__black-board {
    z-index: 0;
    position: absolute;
    inset: 9.94% 9.92% 9.91% 9.93%;
    display: block;
    background: #000;
    pointer-events: none;
  }

  .portfolite-hero.portfolio-cover-2026 .portfolio-cover-2026__art {
    z-index: 1;
    opacity: 1 !important;
  }

  .portfolite-hero.portfolio-cover-2026 .portfolio-cover-2026__wave {
    z-index: 0 !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
  }
}