.concert-poster,
.concert-setlist {
  width: min(100%, 720px);
  margin-inline: auto;
  color: #fff3d9;
  background-color: #140607;
  container-type: inline-size;
  overflow: hidden;
  box-shadow: 0 24px 45px #30140f30;
}

.concert-poster {
  aspect-ratio: 2 / 3;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 4.5vw, 32px);
  background-image: linear-gradient(180deg, #140607e8 0%, #1406074d 29%, transparent 48%, #14060730 71%, #140607f5 90%), url('./assets/pixel-stage.png');
  background-size: cover;
  background-position: center;
  text-align: center;
}

.poster-topline,
.setlist-topline {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #ffd35b;
  font-size: clamp(8px, 1.6cqw, 12px);
  font-weight: 900;
  letter-spacing: .24em;
  text-align: left;
}

.poster-title-group {
  margin-top: 4cqw;
  text-shadow: 0 4px 0 #5d1019, 0 8px 20px #000;
}

.poster-band-name,
.setlist-band-name {
  margin: 0 0 2cqw;
  font-size: clamp(27px, 6cqw, 48px);
  font-weight: 900;
  letter-spacing: -.09em;
  transform: rotate(-3deg);
}

.poster-band-name span { color: #ffd35b; font-size: .5em; vertical-align: top; }
.poster-title-group h3 {
  margin: 0;
  color: #fff3d9;
  font-size: clamp(30px, 8cqw, 62px);
  font-weight: 900;
  letter-spacing: -.08em;
  white-space: nowrap;
}
.poster-tagline {
  display: inline-block;
  margin: 1.5cqw 0 0;
  padding: .7cqw 2.5cqw;
  background: #ffd35b;
  color: #160b08;
  font-size: clamp(10px, 2.5cqw, 18px);
  font-weight: 900;
  text-shadow: none;
}
.poster-spacer { flex: 1; min-height: 10px; }
.poster-info { padding-top: 2cqw; }
.poster-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; text-align: left; }
.poster-facts > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 11cqw;
  padding: 1.5cqw 2.5cqw;
  border: 2px solid #ffd35b;
  background: #140607e8;
}
.poster-fact-label { color: #ffd35b; font-size: clamp(7px, 1.5cqw, 11px); font-weight: 900; letter-spacing: .23em; }
.poster-facts time,
.poster-facts strong { display: block; margin-top: .8cqw; color: #fff3d9; font-size: clamp(15px, 3.8cqw, 27px); font-weight: 900; line-height: 1.15; letter-spacing: -.05em; }
.poster-facts small { display: block; margin-top: .7cqw; font-size: .5em; font-weight: 700; letter-spacing: 0; }
.poster-admission { margin: 2cqw 0 1cqw; font-size: clamp(10px, 2.15cqw, 16px); font-weight: 800; }
.poster-admission span { margin-inline: .5cqw; color: #ff6458; }
.poster-slogan { margin: 0; color: #ffd35b; font-size: clamp(12px, 2.7cqw, 20px); font-weight: 900; letter-spacing: -.04em; }

.concert-setlist {
  position: relative;
  margin-top: 22px;
  padding: clamp(16px, 4.5vw, 32px);
  background-image: linear-gradient(180deg, #140607fa 0%, #140607f5 51%, #140607bd 70%, #14060793 100%), url('./assets/pixel-stage.png');
  background-size: cover;
  background-position: center bottom;
}
.setlist-band-name { margin-top: 2cqw; text-align: center; font-size: clamp(22px, 5cqw, 38px); }
.concert-setlist h3 { margin: 2cqw 0 0; text-align: center; color: #fff3d9; font-size: clamp(27px, 6.5cqw, 47px); letter-spacing: -.075em; text-shadow: 0 4px #5d1019; }
.setlist-subtitle { margin: 1cqw 0 2.5cqw; text-align: center; font-size: clamp(10px, 1.8cqw, 14px); }
.setlist-opening { margin: 0; padding: 1.5cqw 2cqw; border: 2px solid #ffd35b; background: #140607e8; font-size: clamp(11px, 2cqw, 15px); }
.setlist-opening strong { color: #ffd35b; margin-right: 2cqw; }
.setlist-part { margin-top: 3cqw; }
.setlist-part h4 { margin: 0 0 1.5cqw; font-size: clamp(19px, 3.4cqw, 26px); }
.setlist-part h4 span { margin-left: 1cqw; color: #ffd35b; font-size: .52em; vertical-align: middle; }
.track-list { columns: 2; column-gap: 5cqw; margin: 0; padding-left: 3.5cqw; list-style-type: decimal-leading-zero; }
.track-list li { break-inside: avoid; padding: .7cqw .3cqw 1cqw .5cqw; border-bottom: 1px dotted #ffffff50; font-size: clamp(10px, 1.9cqw, 14px); }
.track-list li::marker { color: #ffd35b; font-weight: 900; }
.track-list strong,
.track-list small { display: block; }
.track-list strong { font-size: clamp(12px, 2.6cqw, 19px); line-height: 1.3; }
.track-list small { color: #e1cbb0; font-size: .75em; }
.setlist-thanks { margin: 5cqw 0 0; text-align: center; color: #ffd35b; font-size: clamp(12px, 2.7cqw, 20px); font-weight: 900; }
.shows-list:empty { display: none; }
.concert-setlist + .shows-list:not(:empty) { margin-top: 48px; }

@media (max-width: 500px) {
  .poster-facts > div { border-width: 1px; }
  .setlist-opening { border-width: 1px; }
  .track-list { columns: 1; }
  .track-list li { padding-block: 5px; }
  .concert-setlist { background-size: auto 100%; }
}