/*
  Phones and portrait windows. Loaded last on every page, so everything here overrides the desktop layout.
  Header moves to the bottom (Home left, Music middle, About right), the glows are re-laid for a tall screen
  (red keeps its bottom-left corner, white moves to the top right), type grows, and the waveform is hidden.
*/
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  :root {
    --type-header: 5.6vw;
    --header-inset: 7%;
    --blob-x: 82%;
    --blob-y: 15%;
    --blob-d: 64vw;
    --blob-blur: 10vw;
  }

  /* ---------- header: three links along the bottom ---------- */
  .site-header {
    position: fixed;
    inset: auto 7vw calc(6vw + env(safe-area-inset-bottom, 0px)) 7vw;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
  }
  .site-nav { display: contents; }
  .home-link { justify-self: start; }
  .site-nav a:nth-child(1) { justify-self: center; }
  .site-nav a:nth-child(2) { justify-self: end; }
  .site-nav a { margin: 0; padding: 0.6em 0.3em; }
  /* no cursor spotlight on a phone: plain type, the current page in full white and the others a little softer */
  .site-nav a span { color: rgb(255 255 255 / 0.6); filter: none; }
  .site-nav a[aria-current="page"] span { color: #fff; }
  .site-nav a::after { display: none; }
  .home-link { padding: 0.6em 0.3em; margin: 0; }

  /* ---------- glows ---------- */
  .wave { display: none; }
  .red-blob {
    -webkit-mask-size: auto 74%;
            mask-size: auto 74%;
    -webkit-mask-position: left bottom;
            mask-position: left bottom;
  }

  /* ---------- home ---------- */
  .name { left: 6%; top: 37%; width: 88%; }

  /* ---------- music ---------- */
  :root { --covers-top: 34%; }
  .covers-wrap { left: 0; width: 100%; }
  .covers {
    grid-auto-columns: min(68vw, 44vh);
    gap: 5vw;
    padding-inline: 8vw;
    scroll-padding-inline: 8vw;
  }
  .covers-nav { display: none; }
  .produced-by { top: calc(var(--covers-top) - 14vw); font-size: 3.9vw; }
  .card { padding: 4.5vw; }
  .card-title { font-size: 5vw; }
  .card-artist { margin-top: 1vw; font-size: 3.6vw; }
  .card-listen { font-size: 3.6vw; }
  .card-songs { gap: 3.5vw; }
  .card-songs .card-listen, .card a.card-listen { margin-top: 1vw; }
  .cover.is-empty .frame { font-size: 8vw; }
}