<section class="tl2-wrap">
  <header class="tl2-head">
    <h2 class="tl2-title">The Static<br><span class="tl2-title-alt">World Tour '26</span></h2>
    <div class="tl2-credits">
      44 cities<br>
      6 continents<br>
      sold + standing<br>
      ━━━━━━━━━<br>
      scroll →
    </div>
  </header>

  <div class="tl2-strip">
    <article class="tl2-stub tl2-sold-out">
      <div class="tl2-top">
        <div class="tl2-date">14 · FEB · 2026 · FRI</div>
        <div class="tl2-city">Reykjavík</div>
        <div class="tl2-venue">Harpa Concert Hall</div>
      </div>
      <div class="tl2-bot">
        <h5 class="tl2-list-head">SET LIST</h5>
        <ol class="tl2-setlist">
          <li>Northern Static</li>
          <li>Glacier Song</li>
          <li>Bone Radio</li>
          <li>Encore: Aurora</li>
        </ol>
      </div>
      <div class="tl2-seal">Sold<br>Out</div>
    </article>

    <article class="tl2-stub">
      <div class="tl2-top">
        <div class="tl2-date">22 · FEB · 2026 · SAT</div>
        <div class="tl2-city">Berlin</div>
        <div class="tl2-venue">Tempodrom · Kreuzberg</div>
      </div>
      <div class="tl2-bot">
        <h5 class="tl2-list-head">SET LIST</h5>
        <ol class="tl2-setlist">
          <li>U-Bahn Hymn</li>
          <li>Brutalist Love</li>
          <li>Concrete Dawn</li>
          <li>Encore: Static (live edit)</li>
        </ol>
      </div>
      <div class="tl2-seal">Few<br>Left</div>
    </article>

    <article class="tl2-stub tl2-sold-out">
      <div class="tl2-top">
        <div class="tl2-date">06 · MAR · 2026 · FRI</div>
        <div class="tl2-city">Marrakech</div>
        <div class="tl2-venue">Jardin Majorelle</div>
      </div>
      <div class="tl2-bot">
        <h5 class="tl2-list-head">SET LIST</h5>
        <ol class="tl2-setlist">
          <li>Blue Garden</li>
          <li>Souk Static</li>
          <li>Atlas Lullaby</li>
          <li>Encore: Mint Tea</li>
        </ol>
      </div>
      <div class="tl2-seal">Sold<br>Out</div>
    </article>

    <article class="tl2-stub">
      <div class="tl2-top">
        <div class="tl2-date">19 · MAR · 2026 · THU</div>
        <div class="tl2-city">Lagos</div>
        <div class="tl2-venue">Terra Kulture Arena</div>
      </div>
      <div class="tl2-bot">
        <h5 class="tl2-list-head">SET LIST</h5>
        <ol class="tl2-setlist">
          <li>Harmattan</li>
          <li>Static Pt. II</li>
          <li>Yellow Bus</li>
          <li>Encore: Lagos After Dark</li>
        </ol>
      </div>
      <div class="tl2-seal">Tix<br>Live</div>
    </article>

    <article class="tl2-stub tl2-sold-out">
      <div class="tl2-top">
        <div class="tl2-date">04 · APR · 2026 · SAT</div>
        <div class="tl2-city">Mexico City</div>
        <div class="tl2-venue">Foro Sol</div>
      </div>
      <div class="tl2-bot">
        <h5 class="tl2-list-head">SET LIST</h5>
        <ol class="tl2-setlist">
          <li>Xochimilco</li>
          <li>Smog Romance</li>
          <li>Tláloc</li>
          <li>Encore: Mezcal Static</li>
        </ol>
      </div>
      <div class="tl2-seal">Sold<br>Out</div>
    </article>

    <article class="tl2-stub">
      <div class="tl2-top">
        <div class="tl2-date">02 · MAY · 2026 · SAT</div>
        <div class="tl2-city">Tokyo</div>
        <div class="tl2-venue">Nippon Budokan</div>
      </div>
      <div class="tl2-bot">
        <h5 class="tl2-list-head">SET LIST</h5>
        <ol class="tl2-setlist">
          <li>Shibuya Static</li>
          <li>Sakura Loop</li>
          <li>Train at 3am</li>
          <li>Encore: Hanami Hymn</li>
        </ol>
      </div>
      <div class="tl2-seal">Few<br>Left</div>
    </article>
  </div>
</section>

.tl2-wrap {
  background: #f4ed47;
  color: #1a1a1a;
  font-family: 'Archivo', system-ui, sans-serif;
  padding: 2rem 0 2.5rem;
  position: relative;
  overflow: hidden;
}
.tl2-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #1a1a1a 1px, transparent 1.5px);
  background-size: 8px 8px;
  opacity: 0.08;
  pointer-events: none;
}
.tl2-head {
  padding: 1rem 2rem 2rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1.5rem;
  position: relative;
}
.tl2-title {
  font-family: 'Anton', 'Archivo', sans-serif;
  font-weight: 400;
  font-size: clamp(2.25rem, 9vw, 5.5rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #1a1a1a;
  margin: 0;
}
.tl2-title-alt {
  display: block;
  color: #ff2d72;
  -webkit-text-stroke: 2px #1a1a1a;
}
.tl2-credits {
  font-weight: 900;
  font-size: 11px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: right;
  border: 3px solid #1a1a1a;
  padding: 0.75rem;
  background: #f4ed47;
  transform: rotate(2deg);
  box-shadow: 5px 5px 0 #1a1a1a;
}
.tl2-strip {
  display: flex;
  gap: 1rem;
  padding: 1rem 2rem 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #1a1a1a #f4ed47;
  position: relative;
}
.tl2-strip::-webkit-scrollbar { height: 6px; }
.tl2-strip::-webkit-scrollbar-thumb { background: #1a1a1a; }
.tl2-stub {
  flex: 0 0 270px;
  min-height: 400px;
  background: #fff;
  border: 3px solid #1a1a1a;
  box-shadow: 7px 7px 0 #1a1a1a;
  position: relative;
  scroll-snap-align: start;
  transform: rotate(-1deg);
  transition: transform 0.35s, box-shadow 0.35s;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.tl2-stub:nth-child(odd) { transform: rotate(1.5deg); }
.tl2-stub:nth-child(3n) { transform: rotate(-2deg); }
.tl2-stub:nth-child(5n) { transform: rotate(0.5deg); }
.tl2-stub:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 10px 10px 0 #ff2d72;
}
.tl2-stub::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 35%;
  border-top: 2px dashed #1a1a1a;
}
.tl2-stub::after {
  content: '';
  position: absolute;
  left: -8px;
  top: calc(35% - 8px);
  width: 16px; height: 16px;
  background: #f4ed47;
  border: 3px solid #1a1a1a;
  border-radius: 50%;
}
.tl2-top {
  padding: 1rem;
  flex: 0 0 35%;
  background: #fff;
}
.tl2-date {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
}
.tl2-city {
  font-family: 'Anton', 'Archivo', sans-serif;
  font-size: 2rem;
  line-height: 0.9;
  text-transform: uppercase;
  margin-top: 0.5rem;
}
.tl2-venue {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.4rem;
  color: #555;
}
.tl2-bot {
  padding: 1.5rem 1rem 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.tl2-list-head {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #777;
  margin: 0 0 0.5rem;
}
.tl2-setlist {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  counter-reset: tl2-set-num;
}
.tl2-setlist li {
  padding: 2px 0;
  border-bottom: 1px dotted #ddd;
}
.tl2-setlist li::before {
  content: counter(tl2-set-num, decimal-leading-zero) ' · ';
  counter-increment: tl2-set-num;
  color: #ff2d72;
}
.tl2-seal {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 54px; height: 54px;
  border: 2px solid #ff2d72;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Anton', 'Archivo', sans-serif;
  font-size: 10px;
  color: #ff2d72;
  line-height: 1.1;
  transform: rotate(-15deg);
  text-transform: uppercase;
}
.tl2-sold-out .tl2-seal {
  color: #1a1a1a;
  border-color: #1a1a1a;
  background: #ff2d72;
  transform: rotate(-15deg) scale(1.05);
}
@media (max-width: 720px) {
  .tl2-head { grid-template-columns: 1fr; }
  .tl2-credits { justify-self: start; }
}