/* Banished — tickets page presentation layer.
   Loaded after styles.css on /tickets only. Presentation only:
   no form, checkout or Stripe behaviour is affected. */

.tk-band {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.5rem, 2vw, 1.25rem);
  margin: 0 0 1.25rem;
  align-items: center;
}
.tk-band img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 18px 40px rgba(21,17,11,0.35));
}
.tk-band img { height: auto; }
.tk-band img:nth-child(1) { transform: rotate(-3deg) translateY(5%); }
.tk-band img:nth-child(2) { transform: rotate(1.5deg); z-index: 2; position: relative; }
.tk-band img:nth-child(3) { transform: rotate(-1.5deg) translateY(4%); }
.tk-band img:nth-child(4) { transform: rotate(2deg) translateY(4%); }
.tk-band img:nth-child(5) { transform: rotate(-3deg) translateY(6%); }

.tk-band__cap {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
  margin-bottom: 2.25rem;
  line-height: 1.7;
}

@media (max-width: 560px) {
  .tk-band { grid-template-columns: repeat(3, 1fr); gap: 0.6rem 0.3rem; }
  .tk-band__cap { font-size: 0.68rem; letter-spacing: 0.1em; }
}

/* Pre-existing: the off-canvas mobile nav drawer sits beyond the right
   edge and forces horizontal scroll on phones. Contain it here rather
   than editing the shared nav behaviour used by internal pages. */
html, body { overflow-x: hidden; }