style.css

* {
  box-sizing: border-box;
}

:root {
  --ui-font: 'Comfortaa', sans-serif;
  --content-font: 'Open Sans', serif;
  --title-font: 'Open Sans', serif;
  --monospace-font: 'Nova Mono', monospace;
  --foreground: white;
  --background: #222;
  --shaded: #555;
  --shaded-light: #888;
  --shaded-dark: #333;
  --border: #AAA;
  --accent: #623b62;
  font-size: 16px;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: sans-serif;
  touch-action: manipulation;
  background: var(--background);
  color: var(--foreground);
  overscroll-behavior: contain;

  @media (min-aspect-ratio: 1 / 1) {
    display: grid;
    gap: 4px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 40px auto;
    grid-template-areas:
      "menu player"
      "list player";
  }
}

.sr-only {
  position: absolute;
  left: -1000px;
  opacity: 0;
}

menu-bar {
  position: relative;
  z-index: 999;
  grid-area: menu;
}

podcast-list {
  display: block;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  grid-area: list;
}

podcast-feed { 
  position: relative;

  &:nth-child(1) { z-index: 13 }
  &:nth-child(2) { z-index: 12 }
  &:nth-child(3) { z-index: 11 }
  &:nth-child(4) { z-index: 10 }

  &.menu-open { z-index: 99 }
}

podcast-list.menu-open podcast-feed:not(.menu-open) {
  pointer-events: none;
}

audio-player {
  box-shadow: 0 -8px 16px rgba(0, 0, 0, .5);
  position: sticky;
  bottom: 0;
  z-index: 99999;
  min-height: 0;

  grid-area: player;
}