.hero { position: relative; display: grid; grid-template-columns: 1.07fr 1fr; gap: 30px; padding-block: 55px 135px; }
.hero-copy { position: relative; z-index: 2; align-self: center; }
.hero h1 { margin: 0 0 36px -8px; font-size: clamp(88px, 10.8vw, 164px); font-weight: 850; line-height: .86; letter-spacing: -.064em; text-transform: uppercase; }
.play-word { white-space: nowrap; }
.period { position: relative; display: inline-block; width: .23em; height: .31em; padding: 0; margin: 0 0 0 .025em; border: 0; background: transparent; color: inherit; vertical-align: baseline; cursor: pointer; touch-action: manipulation; }
.period::after { content: ""; position: absolute; inset: -12px; }
.period-dot { position: absolute; left: 10%; bottom: 0; width: .155em; height: .155em; border-radius: 50%; background: currentColor; }
.period:hover .period-dot { transform: scale(1.12); }
.period[aria-pressed="true"] .period-dot { visibility: hidden; }
.games-link { display: inline-block; padding-block: 12px; font-size: 15px; font-weight: 650; }
.hero-art { position: relative; min-width: 0; align-self: center; }
.mascot { width: 100%; height: auto; overflow: visible; transform-origin: 50% 100%; will-change: transform; }
.play-scene { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; z-index: 3; }
@media (min-width: 1700px) { .hero { padding-block: 70px 145px; } }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-block: 36px 106px; }
  .hero h1 { font-size: clamp(72px, 17.8vw, 132px); margin: 0 0 16px -4px; }
  .games-link { font-size: 14px; }
  .hero-art { width: 78%; max-width: 380px; justify-self: end; margin-right: 2%; }
}