/* Give the current game room to own the page. */
.hero.is-fallback .layer--bolt { animation: fallback-float 2.4s ease-in-out infinite alternate; }
@keyframes fallback-float { from { translate: 0 -3px; } to { translate: 0 3px; } }
.games { background: #f5f3eb; padding: clamp(82px, 11vw, 150px) 0 clamp(105px, 13vw, 170px); }
.games > .wrap { width: min(100% - 2 * var(--gutter), 1320px); }
.games__heading {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 25ch);
  gap: 24px; align-items: end; margin-bottom: clamp(38px, 6vw, 72px);
}
.games .section-title { margin: 0; font-size: clamp(3.5rem, 8vw, 7.8rem); line-height: .9; }
.games__intro { margin: 0 0 .25rem; color: #404038; font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.45; }
.flyers { grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); }
.flyer__inner {
  display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  height: auto; min-height: 550px; padding: 0; background: #080808;
  clip-path: polygon(0 1%, 1% 0, 99% .3%, 100% 1.5%, 99.8% 98%, 99% 100%, 1% 99.7%, 0 98.5%);
}
.flyer__visual { grid-column: 2; grid-row: 1; min-width: 0; min-height: 100%; margin: 0; overflow: hidden; background: #161610; isolation: isolate; }
.flyer__visual img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
}
.flyer__visual::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, #0009, transparent 18%);
}
.flyer__visual-index {
  position: absolute; top: 20px; right: 28px; z-index: 1;
  font: 400 clamp(5rem, 10vw, 10rem)/.8 var(--font-display);
  color: transparent; -webkit-text-stroke: 1px #ffffffa8; opacity: .7;
}
.flyer__visual-caption {
  position: absolute; left: 16px; bottom: 16px; z-index: 1; color: #fff; background: #000d; padding: .5em .7em;
  font: 700 .68rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.flyer__content {
  grid-column: 1; grid-row: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(30px, 5vw, 72px); background: #080808;
}
.flyer__top { width: 100%; align-items: center; flex-wrap: wrap; margin-bottom: clamp(34px, 5vw, 70px); }
.flyer__category {
  margin: 0 0 1rem; color: #bdbdb2; font: 700 .68rem/1.4 var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase;
}
.flyer__category span { color: var(--volt); }
.flyer__title { margin: 0 0 1.25rem; font-size: clamp(4rem, 7vw, 7rem); line-height: .87; }
.flyer__dot { color: var(--volt); }
.flyer__hook { max-width: 27ch; margin-bottom: 1rem; }
.flyer__body { max-width: 38ch; }
.flyer__note { margin: 0 0 1.5rem; color: #b2b2aa; }
.flyer__link, .manifesto__link {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem;
  min-height: 48px; padding: .7em 1em; background: var(--volt); color: #000;
  font: 700 .75rem/1.2 var(--font-mono); letter-spacing: .08em; text-decoration: none; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.flyer__link { margin-top: auto; }
.flyer__link span, .manifesto__link span { font-size: 1.2em; }
.flyer__link:hover, .manifesto__link:hover { background: #fff; color: #000; }
.flyer__link:focus-visible, .manifesto__link:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
/* Let the studio story feel like a second act after the games. */
.manifesto__layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, .75fr); gap: clamp(32px, 7vw, 100px); align-items: end; }
.studio-title { margin: 0; font: 400 clamp(3.7rem, 8vw, 8rem)/.92 var(--font-display); }
.manifesto .slams { margin-bottom: 0; }
.manifesto .slam { font-size: clamp(2.8rem, 5vw, 5.5rem); line-height: 1; }
.manifesto .slam:nth-child(even) { padding-left: clamp(0px, 3vw, 42px); }
.manifesto__body { padding-bottom: .3rem; }
.manifesto__link { margin-top: 1rem; }

html[data-motion="off"] .flyer__visual img,
html[data-motion="off"] .flyer:hover .flyer__visual img { transition: none !important; transform: none !important; }
html[data-motion="off"] .form.is-error .form__input,
html[data-motion="off"] .hero.is-fallback .layer--bolt,
html[data-motion="off"] body.is-shaking .hero__stage,
html[data-motion="off"] body.is-shaking .form__done { animation: none !important; }
html[data-motion="off"] .btn--volt:hover, html[data-motion="off"] .btn--volt:active,
html[data-motion="off"] .flyer__inner, html[data-motion="off"] .hero__copy { transform: none !important; }
html[data-motion="off"] .hero__copy { opacity: 1 !important; }
html[data-motion="off"] .flyer:hover .stamp { rotate: -3deg; }
html[data-motion="off"] .bar, html[data-motion="off"] .btn, html[data-motion="off"] .stamp,
html[data-motion="off"] .toast, html[data-motion="off"] .strike::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .flyer__visual img, .flyer:hover .flyer__visual img { transition: none; transform: none; }
  .form.is-error .form__input, .hero.is-fallback .layer--bolt, body.is-shaking .hero__stage, body.is-shaking .form__done { animation: none !important; }
  .btn--volt:hover, .btn--volt:active, .flyer__inner, .hero__copy { transform: none !important; }
  .hero__copy { opacity: 1 !important; }
  .flyer:hover .stamp { rotate: -3deg; }
  .bar, .btn, .stamp, .toast, .strike::after { transition: none !important; }
  #pupil-dog, #pupil-cat { transform: none !important; }
}
@media (max-width: 780px) {
  .games__heading { grid-template-columns: 1fr; gap: 18px; }
  .games__intro { max-width: 38ch; }
  .flyer__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .flyer__visual { grid-column: 1; grid-row: 1; min-height: 0; aspect-ratio: 1.65; }
  .flyer__content { grid-column: 1; grid-row: 2; padding: clamp(28px, 6vw, 48px); }
  .flyer__top { margin-bottom: 2.2rem; }
  .flyer__title { font-size: clamp(3.3rem, 12vw, 6.8rem); }
  .flyer__visual-index { font-size: clamp(5rem, 18vw, 8rem); }
  .manifesto__layout { grid-template-columns: 1fr; }
  .manifesto .slam { font-size: clamp(2.6rem, 9vw, 5rem); }
}
@media (max-width: 380px) {
  .flyer__top { gap: 16px; }
  .flyer__platform { font-size: .65rem; }
  .flyer__title { font-size: clamp(3rem, 13vw, 4rem); }
  .games .section-title { font-size: clamp(3rem, 14vw, 3.5rem); }
}
@media (max-width: 560px) {
  .hero__hud { font-size: .72rem; }
  .hero__hud > span { min-width: 0; line-height: 1.3; }
  .bar__nav { font-size: .75rem; }
  .motion-toggle--nav { font-size: .7rem; }
}
@media (max-width: 350px) {
  .bar__nav { gap: 6px; font-size: .75rem; }
  .motion-toggle--nav { font-size: .7rem; }
}