/* source-sans-pro-regular - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local(''),
  url('./fonts/source-sans-pro-v21-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
  url('./fonts/source-sans-pro-v21-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-sans-pro-600 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: local(''),
  url('./fonts/source-sans-pro-v21-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
  url('./fonts/source-sans-pro-v21-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* paytone-one-regular - latin */
@font-face {
  font-family: 'Paytone One';
  font-style: normal;
  font-weight: 400;
  src: local(''),
  url('./fonts/paytone-one-v18-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
  url('./fonts/paytone-one-v18-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: #202020;
}

h1 {
  font-size: 42px; /* font size fallback */
  font-size: 12vw;
}

h1,
h2,
h3,
h4 {
  font-family: "Paytone One", sans-serif;
}

img {
  max-width: 100%;
}

strong {
  font-weight: 600;
}

a {
  color: #555;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

nav {
  font-family: "Paytone One", sans-serif;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.content-wrapper {
  padding: 20px;
}

.content-header {
  position: relative;
  padding-bottom: 2rem;
}

.content-header:not(:first-child) {
  margin-top: 3rem;
}

.headline {
  position: relative;
  z-index: 5;
  margin: 0;
}

.subheadline-h1 {
  font-family: "Paytone One", sans-serif;
  font-size: 44px; /* font size fallback */
  font-size: 13vw;
  color: #ddd;
  position: absolute;
  top: 8vw;
  left: 2vw;
  z-index: 3;
  line-height: 1;
}

.subheadline-h2 {
  font-family: "Paytone One", sans-serif;
  font-size: 35px;
  color: #ddd;
  position: absolute;
  top: 10px;
  z-index: 3;
  line-height: 1;
}

.headline-singers,
.headline-videos {
  font-family: "Paytone One", sans-serif;
}

.headline-videos {
  font-size: 22px;
  border: 2px solid #aaa;
  padding: 2rem;
}

.headline-videos h3 {
  margin: 0 0 0.5rem;
  line-height: 1.2;
}

.singers img {
  display: block;
  margin: 0 auto;
}

.comingsoon {
  font-family: "Paytone One", sans-serif;
  text-align: center;
}
.footer {
  text-align: center;
  color: #aaa;
  font-size: 18px;
}

.hide-sm {
  display: none;
}

.gig--past {
  opacity: 0.7;
  text-decoration: line-through;
}

.singers {
  display: grid;
}

.singers {
  margin-bottom: 2rem;
}

.singer-content {
  font-size: 16px;
}

.repertoire {
  font-size: 16px;
}

.repertoire strong {
  font-size: 18px;
}

.repertoire li + li {
  margin-top: 0.5rem;
}

.videos {
  margin-bottom: 2rem;
}

.video + .video {
  margin-top: 4rem;
}

.video-date {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #555;
}

.photo > * {
  display: block;
  text-align: right;
}

.photos {
  display: grid;
  column-gap: 1rem;
  row-gap: 2rem;
}

.photo-download {
  font-size: 16px;
}

@media screen and (min-width: 400px) {
  nav {
    flex-direction: row;
    gap: 1rem;
  }

  .photos {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (min-width: 620px) {
  body {
    font-size: 22px;
  }

  .content-wrapper {
    max-width: 630px;
    margin: 0 auto;
  }

  h1 {
    font-size: 74px;
  }

  .subheadline-h1 {
    font-size: 90px;
    left: 1rem;
    top: 30px;
  }
  .subheadline-h2 {
    font-size: 40px;
    top: 20px;
  }

  .hide-sm {
    display: block;
  }
  .hide-lg {
    display: none;
  }

  .singer-content {
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .singer-content > * {
    flex-basis: 47%;
  }

  .singers img {
    margin: 0;
  }

  .singers p {
    margin-top: 0;
  }

  .repertoire strong {
    font-size: 22px;
  }

  .video {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 2rem;
  }

  .headline-videos {
    font-size: 24px;
  }

  .video-description {
    font-size: 16px;
  }

  .photos {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 1000px) {
  h1 {
    font-size: 74px;
  }

  .subheadline-h1 {
    font-size: 90px;
    left: 3rem;
    top: 30px;
  }
  .image-wide,
  .singers,
  .photos {
    width: 1000px;
    max-width: 1000px;
    margin-left: -205px;
  }
  .singers {
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 50px;
  }

  .singer-content {
    display: block;
  }

  .singers p {
    margin-top: 1rem;
  }
}