/* Studio pages only. Corehex has its own product identity. */
@font-face {
  font-family: "CheemsRed Display";
  src: url("fonts/CheemsRedDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
body {
  --red: #ff2631;
  --pink: #ec008c;
  --cream: #ffebcb;
  --punk: #f6ff00;
}
.core-overview {
  --red: #ff343b;
  --punk: #83fd80;
}
html
  body
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    button,
    .button,
    .text-link,
    .pha-play,
    .site-header nav a,
    .footer-channels a,
    .footer-base a,
    .hero-bottom a,
    .pha-studio strong
  ):not(.core-overview *):not([href="corehex/"]),
html
  body
  :is(h1, h2, h3, button, .button, .text-link, .pha-play, .site-header nav a)
  :is(span, em):not(.core-overview *):not([href="corehex/"] *) {
  font-family: var(--studio-display, "CheemsRed Display"), Anuphan, sans-serif;
  letter-spacing: normal;
}
.hero h1 > span,
.page-hero h1,
.games-hero h1,
.final-cta h2 {
  color: var(--cream);
}
.hero h1 em,
.games-hero h1 em,
.final-cta h2 em {
  color: var(--red);
  text-shadow: 2px 3px #680335;
}
body .button:not(.core-overview *) {
  color: #210819;
  background: var(--red);
  box-shadow: 0 4px 0 #92104c;
}
body .button:not(.core-overview *):is(:hover, :focus-visible) {
  background: var(--punk);
}
.studio-footer {
  background: radial-gradient(ellipse at 0 100%, #680335, transparent 65%), #200c13;
}
.footer-signature::after {
  background: linear-gradient(90deg, var(--red), var(--pink), transparent);
}

/* Full-width backdrop for the first Home section. */
.home-page .hero-media {
  background: url("images/home-world.png") center / cover no-repeat;
}
.home-page .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, #090c10d9, #090c1080 55%, #090c1026);
  pointer-events: none;
}
.home-page .hero-bottom {
  z-index: 2;
}
@media (max-width: 700px) {
  .home-page .hero {
    row-gap: 32px;
    min-height: 100svh;
  }
  .home-page .hero::after {
    background: linear-gradient(180deg, #090c10b3, #090c1099);
  }
}