/* Reference introductions adapted to Music Jump for the studio, player help, and legal pages. */
.scene-hero.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  background: #ede9f2;
  border-bottom-color: #d5cedd;
}
.scene-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 270px;
  height: 255px;
  background: url("assets/reference-music-pattern.svg") top right / contain no-repeat;
  opacity: .28;
  pointer-events: none;
}
.scene-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  align-items: center;
  gap: 60px;
  min-height: 480px;
  padding-block: 58px;
}
.scene-hero__copy { position: relative; z-index: 1; text-align: left; }
.scene-hero .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: #524660;
  font-size: 11px;
  letter-spacing: .12em;
}
.scene-hero .eyebrow::before {
  content: "";
  width: 17px;
  height: 17px;
  background: #997fb7;
  clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
}
.scene-hero h1 { max-width: 610px; margin: 0 0 23px; font-size: clamp(48px, 4.3vw, 64px); line-height: 1.05; letter-spacing: -.035em; }
.scene-hero h1 em { font-weight: inherit; font-style: normal; color: #5c4d6d; }
.scene-hero p.scene-hero__intro { max-width: 560px; margin: 0; color: #615b67; font-size: 16px; line-height: 1.85; }
.scene-hero .section-jump-links { gap: 12px 25px; margin-top: 25px; }
.scene-hero .section-jump-links a { font-size: 13px; }
.scene-hero__art { position: relative; width: 100%; max-width: 460px; justify-self: end; pointer-events: none; }
.scene-hero__illustration { width: 100%; height: auto; }
.scene-hero__spider { position: absolute; top: 0; left: 51%; width: 57px; height: 71px; transform: rotate(9deg); }
.scene-hero__spider::before { content: ""; position: absolute; bottom: calc(100% - 18px); left: 50%; width: 1px; height: 160px; background: #9889a9; }
.scene-hero__spider img { width: 100%; height: 100%; }
.scene-hero p.scene-hero__caption { margin: 8px 0 0; color: #6d6477; font-size: 10px; letter-spacing: .17em; text-align: center; text-transform: uppercase; font-weight: 750; }

/* The studio opens with the game artwork, framed like a page in a field journal. */
.page-hero.scene-hero--about { background: #f5f2e5; }
.scene-hero--about .scene-hero__grid { min-height: 615px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 78px; padding-block: 65px; }
.scene-hero--about h1 { max-width: 610px; }
.scene-hero--about .scene-hero__art { max-width: 405px; padding: 16px 18px 33px 0; }
.studio-game-art { position: relative; padding: 10px; border: 1px solid #c3b8cf; border-radius: 140px 140px 22px 22px; background: #fffdf4; transform: rotate(4deg); }
.studio-game-art::before { content: ""; position: absolute; inset: 8px -13px -13px 8px; z-index: -1; border: 1px solid #a89ab7; border-radius: inherit; }
.studio-game-art > img { width: 100%; height: auto; border-radius: 130px 130px 14px 14px; }
.scene-hero__game-tag { position: absolute; z-index: 2; left: -23px; bottom: 11px; display: flex; align-items: center; gap: 12px; padding: 13px 21px 13px 13px; border: 1px solid #cbc2d5; border-radius: 12px; background: #fffdf2; box-shadow: 0 10px 28px #382b4612; transform: rotate(-3deg); }
.scene-hero__game-tag img { width: 45px; height: 45px; border-radius: 11px; }
.scene-hero__game-tag small { display: block; margin-bottom: 3px; color: #6e617d; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; }
.scene-hero__game-tag strong { display: block; color: #372848; font-size: 14px; }
.scene-hero__leaf { position: absolute; z-index: 1; right: -12px; bottom: 35px; width: 62px; height: 125px; border-radius: 100% 0 100% 0; background: linear-gradient(110deg, #8165a0 0 49%, #a087bd 50% 100%); transform: rotate(18deg); }
.scene-hero__leaf::after { content: ""; position: absolute; left: 48%; top: 10%; width: 1px; height: 108%; background: #6d5588; transform: rotate(26deg); }
.scene-hero--about .scene-hero__spider { top: -25px; left: auto; right: -7px; width: 44px; height: 55px; transform: rotate(-12deg); }
.scene-hero--about .scene-hero__spider::before { bottom: calc(100% - 14px); height: 120px; }
.scene-hero__signature { display: flex; align-items: center; gap: 13px; margin-top: 30px; color: #71677d; font-size: 10px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.scene-hero__signature::before { content: ""; width: 34px; height: 1px; background: #9988ad; }

.page-hero.scene-hero--privacy { background: #eeeaf2; }
.page-hero.scene-hero--terms { background: #f7f1df; }
.scene-hero--terms .scene-hero__spider { left: 45%; top: -4px; transform: rotate(-7deg); }
.scene-hero--terms::before { opacity: .2; }
.scene-hero--privacy h1, .scene-hero--terms h1 { font-size: clamp(48px, 4.8vw, 68px); }

/* A correspondence scene gives player support a warmer, more personal opening. */
.page-hero.scene-hero--contact { color: #fffbed; background: #42266f; border-bottom-color: #433453; }
.scene-hero--contact::before { filter: brightness(1.7); opacity: .24; }
.scene-hero--contact .scene-hero__grid { min-height: 555px; padding-block: 62px; }
.scene-hero--contact .eyebrow { color: #c0acd7; }
.scene-hero--contact .eyebrow::before { background: #f1cf70; }
.scene-hero--contact h1 em { color: #edce79; }
.scene-hero--contact p.scene-hero__intro { color: #cdc6d4; }
.scene-hero--contact .section-jump-links a { color: #f2dc99; }
.scene-hero--contact .section-jump-links a:hover { color: #fffbed; }
.scene-hero--contact .scene-hero__spider { top: 1%; left: 46%; width: 65px; height: 81px; transform: rotate(-8deg); }
.scene-hero--contact .scene-hero__spider::before { bottom: calc(100% - 20px); background: #9f90b1; height: 170px; }
.scene-hero--contact p.scene-hero__caption { color: #b2a3c2; }
.scene-hero__email { display: inline-flex; align-items: center; gap: 17px; margin-top: 28px; padding-bottom: 7px; border-bottom: 1px solid #ae9ec155; color: #fff4cd; text-decoration: none; font-size: 14px; }
.scene-hero__email:hover { color: #f1cf70; border-color: #f1cf70; }
.scene-hero__email svg { width: 19px; height: 19px; color: #e6ca79; }

@media (max-width: 1100px) {
  .scene-hero__grid, .scene-hero--about .scene-hero__grid { gap: 38px; }
  .scene-hero--about .scene-hero__art { padding-right: 15px; }
  .scene-hero h1 { font-size: 53px; }
}
@media (max-width: 760px) {
  .scene-hero__grid, .scene-hero--about .scene-hero__grid, .scene-hero--contact .scene-hero__grid { grid-template-columns: 1fr; gap: 32px; min-height: 0; padding-block: 46px 30px; }
  .scene-hero__copy { max-width: 590px; }
  .scene-hero h1, .scene-hero--privacy h1, .scene-hero--terms h1 { max-width: 560px; font-size: clamp(41px, 7.7vw, 58px); }
  .scene-hero p.scene-hero__intro { max-width: 590px; font-size: 15px; }
  .scene-hero .eyebrow { margin-bottom: 17px; font-size: 10px; }
  .scene-hero__art { max-width: 300px; justify-self: center; }
  .scene-hero__spider { width: 42px; height: 52px; }
  .scene-hero__spider::before { bottom: calc(100% - 14px); height: 40px; }
  .scene-hero::before { width: 160px; height: 150px; opacity: .15; }
  .scene-hero--about .scene-hero__art { max-width: 300px; margin-top: 4px; padding: 10px 19px 35px 0; }
  .scene-hero--about .scene-hero__spider { top: -14px; right: -6px; width: 36px; height: 45px; }
  .scene-hero--about .scene-hero__spider::before { bottom: calc(100% - 11px); height: 55px; }
  .scene-hero__signature { margin-top: 23px; font-size: 9px; }
  .scene-hero__game-tag { left: -7px; bottom: 13px; padding: 10px 16px 10px 10px; }
  .scene-hero__game-tag img { width: 38px; height: 38px; }
  .scene-hero__leaf { right: 0; width: 47px; height: 97px; }
  .scene-hero--contact .scene-hero__spider { width: 45px; height: 56px; }
  .scene-hero--contact .scene-hero__spider::before { bottom: calc(100% - 14px); height: 43px; }
  .scene-hero .section-jump-links { gap: 4px 23px; margin-top: 21px; }
  .scene-hero .section-jump-links a { font-size: 12px; }
  .scene-hero__email { margin-top: 22px; font-size: 13px; }
}
@media (max-width: 420px) {
  .scene-hero__grid { gap: 28px; }
  .scene-hero__art { max-width: 260px; }
  .scene-hero--about .scene-hero__art { max-width: 265px; }
  .scene-hero p.scene-hero__caption { font-size: 9px; }
}

/* Content substitutions keep the reference dimensions and section layout. */
.scene-hero__music-note { position: absolute; top: 0; left: 51%; width: 57px; color: #9b79b8; font: 64px/1 Georgia, serif; transform: rotate(9deg); }
.scene-hero__music-note::before { content: ''; position: absolute; bottom: 100%; left: 50%; width: 1px; height: 160px; background: #b29ec4; }
.scene-hero--about .scene-hero__music-note { top: -25px; left: auto; right: -7px; width: 44px; font-size: 52px; transform: rotate(-12deg); }
.scene-hero__rhythm-note { position: absolute; z-index: 1; right: -12px; bottom: 35px; color: #a181bf; font: 110px/1 Georgia, serif; transform: rotate(18deg); }
.scene-hero--contact .scene-hero__music-note { top: 1%; left: 46%; width: 65px; font-size: 75px; color: #d7c6e9; transform: rotate(-8deg); }
.page-contact #direct-contact .support-details > div { display: block; padding: 18px 0 0; border-bottom: 0; }
.page-contact #direct-contact .support-details dt { margin: 0 0 8px; }
.page-contact #direct-contact .support-details dd { overflow-wrap: break-word; }
.form-availability { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.page-about .story-media { height: 430px; }
.page-about .story-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 64%; }
.page-about .split-media img { height: 440px; object-fit: cover; object-position: center 72%; }
@media (max-width: 760px) {
  .scene-hero__music-note { width: 42px; font-size: 46px; }
  .scene-hero__music-note::before { height: 40px; }
  .scene-hero--about .scene-hero__music-note { top: -14px; right: -6px; width: 36px; font-size: 42px; }
  .scene-hero--about .scene-hero__music-note::before { height: 55px; }
  .scene-hero__rhythm-note { right: 0; font-size: 87px; }
  .scene-hero--contact .scene-hero__music-note { width: 45px; font-size: 52px; }
  .scene-hero--contact .scene-hero__music-note::before { height: 43px; }
  .page-about .story-media, .page-about .split-media img { height: 350px; }
}

.scene-hero .section-jump-links a { border: 0; padding-block: 8px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }