:root {
  color-scheme: dark;
  background: #000;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: #000;
}

body {
  overflow-x: hidden;
}

body.lightbox-open {
  overflow: hidden;
}

#gallery {
  width: 100%;
  background: #000;
}

.mosaic {
  display: grid;
  width: 100%;
  height: var(--mosaic-height, 72svh);
  min-height: 28rem;
  gap: 0;
  overflow: hidden;
  background: #000;
}

.mosaic--hero {
  height: 100svh;
  min-height: 36rem;
}

.tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  appearance: none;
  border: 0;
  border-radius: 0;
  background: #000;
  cursor: zoom-in;
}

.tile:focus-visible {
  z-index: 2;
  outline: 2px solid #fff;
  outline-offset: -2px;
}

.tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.012);
  transition: opacity 500ms ease, transform 900ms cubic-bezier(.2, .7, .2, 1);
}

.tile img.is-loaded {
  opacity: 1;
  transform: scale(1);
}

.tile:hover img {
  transform: scale(1.025);
}

.tile--poster {
  aspect-ratio: 2564 / 1234;
}

.tile--poster img,
.tile--poster:hover img {
  object-fit: contain;
  transform: none;
}

.mosaic > :nth-child(1) { grid-area: a; }
.mosaic > :nth-child(2) { grid-area: b; }
.mosaic > :nth-child(3) { grid-area: c; }
.mosaic > :nth-child(4) { grid-area: d; }
.mosaic > :nth-child(5) { grid-area: e; }
.mosaic > :nth-child(6) { grid-area: f; }

.hero-poster-grid {
  grid-template: "p p a b" auto "c c a d" 1fr "c c e e" 1fr / 1fr 1fr 1fr 1fr;
}

.hero-poster-grid > :nth-child(1) { grid-area: p; }
.hero-poster-grid > :nth-child(2) { grid-area: a; }
.hero-poster-grid > :nth-child(3) { grid-area: b; }
.hero-poster-grid > :nth-child(4) { grid-area: c; }
.hero-poster-grid > :nth-child(5) { grid-area: d; }
.hero-poster-grid > :nth-child(6) { grid-area: e; }

.hero-1 {
  grid-template: "a a b c" 1fr "a a d c" 1fr "e e d f" 1fr / 1fr 1fr 1fr 1fr;
}

.hero-2 {
  grid-template: "a b b c" 1fr "a d e c" 1fr "f d e c" 1fr / 1fr 1fr 1fr 1fr;
}

.hero-3 {
  grid-template: "a a b b" 1fr "c d b b" 1fr "c e e f" 1fr / 1fr 1fr 1fr 1fr;
}

.hero-4 {
  grid-template: "a b c c" 1fr "a b d e" 1fr "f f d e" 1fr / 1fr 1fr 1fr 1fr;
}

.band-1 {
  grid-template: "a a b c" 1fr "a a d d" 1fr / 1fr 1fr 1fr 1fr;
}

.band-2 {
  grid-template: "a b b c" 1fr "d b b e" 1fr / 1fr 1fr 1fr 1fr;
}

.band-3 {
  grid-template: "a b c c" 1fr "d e f f" 1fr / 1fr 1fr 1fr 1fr;
}

.band-4 {
  grid-template: "a a b" 1fr "c c b" 1fr / 1fr 1fr 1fr;
}

#stream-sentinel {
  width: 100%;
  height: 1px;
  background: #000;
}

.lightbox {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 3rem);
  background: rgba(0, 0, 0, .94);
  cursor: zoom-out;
  touch-action: none;
  animation: veil-in 180ms ease-out;
}

.lightbox[hidden] {
  display: none;
}

.lightbox img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  opacity: 1;
  transform: scale(1);
  transition: opacity 160ms ease, transform 160ms ease;
  animation: image-in 280ms cubic-bezier(.2, .7, .2, 1);
}

.lightbox img.is-switching {
  opacity: 0;
  transform: scale(.985);
}

@keyframes veil-in {
  from { opacity: 0; }
}

@keyframes image-in {
  from { opacity: 0; transform: scale(.975); }
}

@media (max-width: 700px) {
  .mosaic {
    min-height: 34rem;
  }

  .mosaic--hero {
    min-height: 100svh;
  }

  .hero-1,
  .hero-2,
  .hero-3,
  .hero-4 {
    grid-template: "a a" 1.25fr "b c" 1fr "d e" 1fr "f f" 1.25fr / 1fr 1fr;
  }

  .hero-poster-grid {
    grid-template: "p a" auto "b c" 1fr "d e" 1fr / 1fr 1fr;
  }

  .band-1 {
    grid-template: "a a" 1.2fr "b c" 1fr "d d" 1.2fr / 1fr 1fr;
  }

  .band-2 {
    grid-template: "a b" 1fr "c c" 1.2fr "d e" 1fr / 1fr 1fr;
  }

  .band-3 {
    grid-template: "a b" 1fr "c c" 1.2fr "d e" 1fr "f f" 1.2fr / 1fr 1fr;
  }

  .band-4 {
    grid-template: "a b" 1.2fr "c b" 1fr / 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tile img,
  .lightbox,
  .lightbox img {
    animation: none;
    transition: none;
  }
}