/* Two Strays v2: retain the original's motion and logo; give the games their own posters. */
:root {
  --font-display: "Anton", "Impact", "Arial Narrow", sans-serif;
}

.hero__tag,
.section-title,
.slam,
.flyer__title,
.form__done-title {
  text-transform: uppercase;
  letter-spacing: .005em;
}

.hero__tag { font-size: clamp(1.65rem, 3.3vw, 2.8rem); }
.hero__sub { color: #c3c3c3; max-width: 42ch; margin-inline: auto; }
.hero__copy { max-width: 48ch; }
.btn { font-family: var(--font-display); letter-spacing: .04em; }
.manifesto__body { max-width: 63ch; }
.slam { max-width: 16ch; line-height: 1.02; }
.slam:nth-child(even) { padding-left: clamp(0px, 8vw, 140px); }

/* The original animated strike becomes an underline for the new heading. */
.strike::after { top: auto; bottom: -.08em; height: .08em; }

.flyer__inner { min-height: 100%; }
.flyer__inner > :not(.flyer__number):not(.flyer__texture):not(.flyer__glyph):not(.flyer__slash) {
  position: relative;
  z-index: 1;
}
.flyer__number {
  position: absolute;
  top: .05em;
  right: -.05em;
  font: 400 clamp(10rem, 22vw, 19rem)/.8 var(--font-display);
  color: transparent;
  -webkit-text-stroke: 1px #fff;
  opacity: .10;
  pointer-events: none;
}
.flyer__title { position: relative; z-index: 1; font-size: clamp(3.8rem, 6.4vw, 6.5rem); }
.flyer__hook { max-width: 24ch; }
.flyer__body { max-width: 42ch; }
.flyer__note { max-width: 37ch; line-height: 1.6; }
.flyer__texture { position: absolute; pointer-events: none; opacity: .32; }
.flyer__texture--pitch {
  width: 75%; height: 75%; right: -38%; top: 18%;
  border: 2px solid #5c620d; transform: rotate(-18deg);
}
.flyer__texture--pitch::before {
  content: ""; position: absolute; width: 50%; aspect-ratio: 1; border: 2px solid #5c620d;
  border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.flyer__texture--pitch::after {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px solid #5c620d;
}
.flyer__glyph { width: 38%; color: #30321a; opacity: .75; }
.flyer__glyph--ball { width: 40%; right: -6%; bottom: -12%; }
.flyer:hover .flyer__glyph { color: #545c16; }

@media (max-width: 560px) {
  .hero__tag { font-size: clamp(1.7rem, 7.4vw, 2.5rem); }
  .hero__sub { max-width: 33ch; }
  .slam { font-size: clamp(2.6rem, 10.8vw, 4.7rem); }
  .slam:nth-child(even) { padding-left: 5vw; }
  .flyer__number { font-size: clamp(11rem, 51vw, 16rem); }
  .flyer__title { font-size: clamp(4.4rem, 18vw, 6rem); }
}