body {
  background-color: var(--body-background-color);
}

main hgroup {
  display: flex;
  flex-direction: column;
  min-height: 70vh;
  align-items: center;
  justify-content: center;
  background-color: var(--body-background-color);
}
main hgroup h1 {
  font-size: 4em;
}
main hgroup h2 {
  font-family: LibreFranklin, Helvetica, sans-serif;
  color: var(--body-text-color);
}
main hgroup {
  color: var(--body-text-color);
}

#intro {
  background-color: var(--body-background-color);
  color: var(--body-text-color);
}
#intro > section {
  padding-bottom: 3rem;
}

#intro-text {
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: calc(1.5rem + env(safe-area-inset-left));
  padding-right: calc(1.5rem + env(safe-area-inset-left));
}
@media only screen and (max-width: 670px) {
  #intro-text {
    padding-left: calc(0.75rem + env(safe-area-inset-left));
    padding-right: calc(0.75rem + env(safe-area-inset-left));
  }
}
#intro-text h2 {
  color: var(--body-text-color);
  font-size: 2em;
  text-wrap: balance;
}
#intro-text > div h2 {
  color: var(--body-logo-color-2);
  margin-top: 2.5rem;
}
#intro-text > div {
  width: clamp(40%, 30em, 100%);
}
#intro-text > div:nth-child(1) {
  margin-left: auto;
  margin-right: auto;
}
#intro-text > div:nth-child(2) {
  margin-right: auto;
}
#intro-text > div:nth-child(3) {
  margin-left: auto;
}
#intro-text > div:nth-child(3) p.image {
  text-align: right;
}
#intro-text p.image {
  margin: 2.5rem 0;
}
#intro-text img {
  max-width: clamp(20%, 25em, 100%);
  max-height: 60vh;
}

@media only screen and (min-width: 1080px) {
  #pianists-wall {
    max-width: 60rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(1.5rem + env(safe-area-inset-left));
    padding-right: calc(1.5rem + env(safe-area-inset-left));
  }
}
@media only screen and (min-width: 1080px) and (max-width: 670px) {
  #pianists-wall {
    padding-left: calc(0.75rem + env(safe-area-inset-left));
    padding-right: calc(0.75rem + env(safe-area-inset-left));
  }
}
#pianists-wall .meet, #pianists-wall .the-jazz, #pianists-wall .pianists {
  display: flex;
  --num-columns: max(2, 3 + var(--additional-columns));
  --column-divisor: 7;
  width: calc(100% / var(--column-divisor) * var(--num-columns));
  aspect-ratio: var(--num-columns)/var(--rows);
}
@media only screen and (min-width: 1080px) {
  #pianists-wall .meet, #pianists-wall .the-jazz, #pianists-wall .pianists {
    --num-columns: max(2, 4 + var(--additional-columns));
    --column-divisor: 9;
  }
}
@media only screen and (max-width: 768px) {
  #pianists-wall .meet, #pianists-wall .the-jazz, #pianists-wall .pianists {
    --num-columns: max(2, 2 + var(--additional-columns));
    --column-divisor: 5;
  }
}
@media only screen and (max-width: 350px) {
  #pianists-wall .meet, #pianists-wall .the-jazz, #pianists-wall .pianists {
    --num-columns: max(2, 2 + var(--additional-columns));
    --column-divisor: 3;
  }
}
#pianists-wall .meet h2, #pianists-wall .the-jazz h2, #pianists-wall .pianists h2 {
  color: var(--body-logo-color-3);
  align-self: center;
  margin: 0;
  font-size: 2em;
  padding-left: calc(1.5rem + env(safe-area-inset-left));
  padding-right: calc(1.5rem + env(safe-area-inset-left));
}
@media only screen and (max-width: 670px) {
  #pianists-wall .meet h2, #pianists-wall .the-jazz h2, #pianists-wall .pianists h2 {
    padding-left: calc(0.75rem + env(safe-area-inset-left));
    padding-right: calc(0.75rem + env(safe-area-inset-left));
  }
}
#pianists-wall .meet {
  float: left;
  justify-content: flex-end;
  --additional-columns: 0;
  --rows: .99;
}
#pianists-wall .the-jazz {
  float: right;
  --additional-columns: -1;
}
@media only screen and (max-width: 350px) {
  #pianists-wall .the-jazz {
    --additional-columns: 0;
  }
}
#pianists-wall .the-jazz {
  --rows: .99;
}
#pianists-wall .pianists {
  float: left;
  --additional-columns: -1;
  --rows: .99;
}
#pianists-wall img {
  display: inline-block;
  vertical-align: bottom;
  width: 14.2857142857%;
}
@media only screen and (min-width: 1080px) {
  #pianists-wall img {
    width: 11.1111111111%;
  }
}
@media only screen and (max-width: 768px) {
  #pianists-wall img {
    width: 20%;
  }
}
@media only screen and (max-width: 350px) {
  #pianists-wall img {
    width: 33.3333333333%;
  }
}
#pianists-wall img {
  filter: grayscale(100%);
  mix-blend-mode: screen;
}
#pianists-wall img:first-of-type {
  border-top-left-radius: 50%;
}
#pianists-wall img:last-child {
  border-bottom-right-radius: 50%;
}

#timeline {
  clear: both;
}
#timeline figure {
  display: grid;
  grid-template-columns: calc(1.5rem + env(safe-area-inset-left)) calc(1.5rem + env(safe-area-inset-left) + 3em) 1fr [content-end] calc(1.5rem + env(safe-area-inset-left)) [end];
}
@media only screen and (min-width: 1440px) {
  #timeline figure {
    grid-template-columns: calc(1.5rem + env(safe-area-inset-left)) calc(1.5rem + env(safe-area-inset-left) + 3em) 1fr [content-end] calc(1.5rem + env(safe-area-inset-left) + 3em) calc(1.5rem + env(safe-area-inset-left)) [end];
  }
}
@media only screen and (max-width: 768px) {
  #timeline figure {
    grid-template-columns: calc(1.5rem + env(safe-area-inset-left)) calc(1.5rem + env(safe-area-inset-left) + 2.5em) 1fr [content-end] calc(1.5rem + env(safe-area-inset-left)) [end];
  }
}
@media only screen and (max-width: 670px) {
  #timeline figure {
    grid-template-columns: calc(0.75rem + env(safe-area-inset-left)) calc(0.75rem + env(safe-area-inset-left) + 2em) 1fr [content-end] calc(0.75rem + env(safe-area-inset-left)) [end];
  }
}
#timeline figure .decade {
  position: relative;
  grid-column: 2;
  font-family: Besley, Times, serif;
  font-weight: 600;
  line-height: 1;
  padding-top: 3rem;
  padding-bottom: 1.5em;
  mix-blend-mode: screen;
  color: #f2e7dc;
}
#timeline figure .decade span {
  display: inline-block;
  transform: translateX(-100%) rotate(-90deg);
  transform-origin: top right;
  position: sticky;
  top: 3rem;
}
#timeline figure .decade {
  z-index: 2;
  font-size: 3em;
}
@media only screen and (max-width: 768px) {
  #timeline figure .decade {
    font-size: 2.5em;
  }
}
@media only screen and (max-width: 670px) {
  #timeline figure .decade {
    font-size: 2em;
  }
}
#timeline figure .genre {
  z-index: 1;
  position: relative;
  grid-column: 3/end;
  display: grid;
  grid-template-columns: subgrid;
  padding-bottom: 2rem;
  min-height: calc(100vh - 6rem);
  background: #f2e7dc;
}
@media only screen and (min-width: 1080px) {
  #timeline figure .genre {
    background: linear-gradient(to right, #f2e7dcff 57%, #f2e7dc88);
    backdrop-filter: blur(10px);
  }
}
#timeline figure .genre {
  border-radius: 3rem 0 0 3rem;
  padding: 2rem;
  padding-right: calc(1.5rem + env(safe-area-inset-left));
}
@media only screen and (max-width: 670px) {
  #timeline figure .genre {
    border-radius: 1rem 0 0 1rem;
    padding-left: calc(0.75rem + env(safe-area-inset-left));
    padding-right: calc(0.75rem + env(safe-area-inset-left));
  }
}
#timeline figure .genre {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
#timeline figure .genre h2 {
  margin-top: 0;
  font-size: 2.5em;
  text-align: center;
}
@media only screen and (min-width: 1080px) {
  #timeline figure .genre h2 {
    text-align: left;
  }
}
#timeline figure .genre .content {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
#timeline figure .genre .content > div:nth-child(1) {
  order: 2;
}
#timeline figure .genre .content > div:nth-child(2) {
  order: 1;
}
@media only screen and (min-width: 1080px) {
  #timeline figure .genre .content {
    grid-template-columns: 6fr 5fr;
  }
  #timeline figure .genre .content > div:nth-child(1) {
    order: 1;
  }
  #timeline figure .genre .content > div:nth-child(2) {
    order: 2;
  }
}
#timeline figure .genre .content p:first-child {
  margin-block-start: 0;
}
#timeline .genre-background-container {
  grid-column: 1/end;
}
#timeline .content-container {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: subgrid;
  grid-column: 1/end;
}
#timeline .genre-background {
  position: sticky;
  top: -10vh;
  height: 110vh;
}

.pianist-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-evenly;
  align-content: flex-start;
}
.pianist-list > div {
  width: min(11rem, 45%);
}

/*# sourceMappingURL=index.css.map */