/* --- Wordmark ---------------------------------------------------------
   Stacked, knocked out of the flood coat, with the second ink offset a
   hair behind it the way a two-pass print never quite registers. */
.wordmark {
  font-size: clamp(4rem, 21vw, 8.5rem);
  color: var(--stock);
  text-shadow: 3px 3px 0 var(--flare);
}

.promoter,
.billing {
  color: var(--stock-dim);
}

/* The flare orange is only ever a background or a shadow: at small sizes it
   does not carry enough contrast against the flood coat to be read. */
.billing {
  color: var(--stock);
}

/* --- Tour band --------------------------------------------------------
   Dates are the one thing on a gig poster that is genuinely a sequence, so
   they get the moving strip. Everything else stays still. */
.band {
  position: relative;
  width: 118vw;
  margin-left: 50%;
  translate: -50% 0;
  margin-top: clamp(1.75rem, 6vw, 2.5rem);
  padding: .55rem 0;
  rotate: -2.4deg;
  background: var(--flare);
  color: var(--ink);
  border-block: 2px solid var(--ink);
  overflow: hidden;
}

/* Each date carries its own trailing space rather than using `gap`, so two
   copies of the list tile exactly and the -50% loop never drifts. */
.band-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
}

.band-track[data-animated] {
  animation: band-roll 26s linear infinite;
}

.band:hover .band-track[data-animated] {
  animation-play-state: paused;
}

.band-date {
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  padding-right: clamp(1.5rem, 5vw, 2.5rem);
}

.band-date b {
  font-weight: 700;
}

.band-date[data-sold] {
  opacity: .8;
  text-decoration: line-through;
}

@keyframes band-roll {
  to {
    translate: -50% 0;
  }
}

/* --- Billing ----------------------------------------------------------
   Type size is the ranking. The headline act is the thing the artist most
   wants pressed; support and fine print get smaller, in that order. */
.act {
  display: grid;
  gap: .1rem;
  padding: clamp(.85rem, 3vw, 1.15rem) clamp(1rem, 4vw, 1.5rem);
  border: 2px solid var(--stock);
  background: transparent;
  transition: background .18s var(--ease), color .18s var(--ease), translate .18s var(--ease);
}

.act:hover,
.act:focus-visible {
  background: var(--stock);
  color: var(--flood);
  translate: 0 -2px;
}

.act-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: .92;
}

.act-meta {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--stock-dim);
}

.act:hover .act-meta,
.act:focus-visible .act-meta {
  color: rgba(27, 34, 184, .7);
}

.act-head {
  background: var(--flare);
  border-color: var(--flare);
  color: var(--ink);
}

.act-head .act-name {
  font-size: clamp(2rem, 9vw, 3.1rem);
}

.act-head .act-meta {
  color: rgba(10, 10, 18, .68);
}

.act-head:hover,
.act-head:focus-visible {
  background: var(--stock);
  border-color: var(--stock);
  color: var(--ink);
}

.act-head:hover .act-meta,
.act-head:focus-visible .act-meta {
  color: rgba(10, 10, 18, .68);
}

.act-support .act-name {
  font-size: clamp(1.4rem, 6vw, 2rem);
}

.act-minor {
  align-content: center;
}

.act-minor .act-name {
  font-size: clamp(1.05rem, 4vw, 1.3rem);
}

/* --- Social stamps ----------------------------------------------------- */
.stamp {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--stock);
  color: var(--stock);
  transition: background .18s var(--ease), color .18s var(--ease);
}

.stamp svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stamp:hover,
.stamp:focus-visible {
  background: var(--flare);
  border-color: var(--flare);
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .act,
  .stamp {
    transition: none;
  }

  .act:hover,
  .act:focus-visible {
    translate: none;
  }

  .band {
    overflow-x: auto;
  }

  .band-track[data-animated] {
    animation: none;
  }
}