:root {
  color-scheme: dark;
  font-family: "Archivo", Arial, sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  color: #fcfcfc;
  background: #101010;
}

* { box-sizing: border-box; }
body { margin: 0; background: #101010; }

.backdrop, .grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.backdrop {
  background: #101010 url("assets/backdrop.jpg") center top / cover no-repeat;
  opacity: .28;
  filter: blur(26px) saturate(1.1) brightness(.9);
  transform: scale(1.08);
}

.grain {
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

.poster {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  background: #101010;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 30px 90px rgba(0, 0, 0, .55);
  container-type: inline-size;
}

.hero { position: relative; }
picture, picture img { display: block; width: 100%; }
picture img { height: auto; }

.dates {
  visibility: hidden;
  padding: 0.6cqw 7.6% 3cqw;
  text-transform: uppercase;
}

.dates.is-ready { visibility: visible; }

.shows { list-style: none; margin: 0; padding: 0; }

.show {
  display: grid;
  grid-template-columns: minmax(0, 20fr) minmax(0, 30fr) minmax(0, 34fr) auto;
  column-gap: 1.5%;
  align-items: center;
  padding-block: 0.6em;
  font-size: clamp(14px, 1.5cqw, 26px);
  letter-spacing: 0;
  line-height: 1.1;
}

.show + .show { border-top: 1px solid rgba(252, 192, 244, .12); }
.show-date { color: #fcc0f4; }
.show-city, .show-venue { color: #fcfcfc; }
.show-date, .show-city, .show-venue {
  min-width: 0;
  overflow-wrap: anywhere;
}

.buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6em;
  padding: 0.55em 1.1em;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: "Archivo", Arial, sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  font-size: max(12px, 0.62em);
  min-width: 10.5em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: #101010;
  background: #fcc0f4;
}

a.buy:hover, a.buy:focus-visible { background: #fcfcfc; }
a.buy:active { background: #e6a9f0; }
a:focus-visible { outline: 2px solid #fcc0f4; outline-offset: 3px; }

.buy.is-soon {
  color: rgba(252, 192, 244, .7);
  background: transparent;
  border: 1px solid rgba(252, 192, 244, .45);
  cursor: default;
}

footer a { display: block; }
footer a:focus-visible { outline-offset: -3px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 600px) and (max-width: 999px) {
  .show {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "date city button" "venue venue button";
    column-gap: 0.6em;
    row-gap: 0.25em;
    padding-block: 0.8em;
    font-size: clamp(14px, 2.1vw, 20px);
  }
  .show-date { grid-area: date; }
  .show-city { grid-area: city; }
  .show-venue { grid-area: venue; }
  .buy { grid-area: button; align-self: center; margin-left: 1em; }
}

@media (max-width: 599px) {
  .show {
    grid-template-columns: auto 1fr;
    grid-template-areas: "date city" "venue venue" "button button";
    row-gap: 0.35em;
    padding-block: 0.9em;
    font-size: 14px;
  }
  .show-date { grid-area: date; }
  .show-city { grid-area: city; }
  .show-venue { grid-area: venue; }
  .buy {
    grid-area: button;
    width: 100%;
    min-height: 44px;
    margin-top: 0.5em;
  }
}