/* Garden-inspired introductions for the studio, player help, and legal pages. */
.scene-hero.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  background: #f1f3e8;
  border-bottom-color: #d6dfcc;
}
.scene-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 270px;
  height: 255px;
  background: url("assets/garden-web.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: #436346;
  font-size: 11px;
  letter-spacing: .12em;
}
.scene-hero .eyebrow::before {
  content: "";
  width: 17px;
  height: 17px;
  background: #b0bd79;
  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: #50704a; }
.scene-hero p.scene-hero__intro { max-width: 560px; margin: 0; color: #5b685a; 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: #9aac86; }
.scene-hero__spider img { width: 100%; height: 100%; }
.scene-hero p.scene-hero__caption { margin: 8px 0 0; color: #697962; 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 #c7d1b6; 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 #acba97; 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 #d1d7c0; border-radius: 12px; background: #fffdf2; box-shadow: 0 10px 28px #28492e12; 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: #70805e; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; }
.scene-hero__game-tag strong { display: block; color: #254b34; 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, #8da75e 0 49%, #b6c381 50% 100%); transform: rotate(18deg); }
.scene-hero__leaf::after { content: ""; position: absolute; left: 48%; top: 10%; width: 1px; height: 108%; background: #788d50; 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: #718064; font-size: 10px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.scene-hero__signature::before { content: ""; width: 34px; height: 1px; background: #a2b184; }

.page-hero.scene-hero--privacy { background: #edf3e9; }
.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: #173d2c; border-bottom-color: #315640; }
.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: #d6dca7; }
.scene-hero--contact .eyebrow::before { background: #f1cf70; }
.scene-hero--contact h1 em { color: #edce79; }
.scene-hero--contact p.scene-hero__intro { color: #c9d6c4; }
.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: #a3b58c; height: 170px; }
.scene-hero--contact p.scene-hero__caption { color: #b7c69f; }
.scene-hero__email { display: inline-flex; align-items: center; gap: 17px; margin-top: 28px; padding-bottom: 7px; border-bottom: 1px solid #b4c59a55; 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; }
}