/* Galmuri 2.40.4, SIL OFL 1.1; license travels with the self-hosted fonts. */
@font-face {
  font-family: 'Galmuri11';
  src: url('/assets/fonts/galmuri-2.40.4/Galmuri11.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Galmuri11';
  src: url('/assets/fonts/galmuri-2.40.4/Galmuri11-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
/* Text and hit targets stay fixed; depth is confined to decorative image layers. */
.depth-art { --banner-x: 0; --banner-y: 0; overflow: hidden; }
/* Backgrounds stay inside the banner; decorative objects can rise past its edge. */
main:has(.depth-art:not([data-banner-art="hubs"])) { overflow-y: visible; }
:is(.page-title-banner, .hero):has(> .depth-art:not([data-banner-art="hubs"])),
.depth-art:not([data-banner-art="hubs"]) { overflow: visible; }
.depth-art:not([data-banner-art="hubs"]) .depth-background {
  inset: 0;
  overflow: hidden;
  transform: none;
}
.depth-art:not([data-banner-art="hubs"]) .depth-background > :is(picture, img) {
  position: absolute;
  inset: -24px;
  width: calc(100% + 48px);
  max-width: none;
  height: calc(100% + 48px);
  transform: translate3d(calc(var(--banner-x) * -2px), calc(var(--banner-y) * -1.5px), 0);
}
/* Only the background fades into the page; floating sprites stay fully opaque. */
:is(.page-title-banner, .hero):has(> .depth-art:not([data-banner-art="hubs"])) {
  --banner-edge-fade: 72px;
  background: linear-gradient(180deg, var(--ink), #09090b var(--banner-edge-fade));
}
.page-title-banner:has(> .depth-art:not([data-banner-art="hubs"]))::before,
.hero:has(> .depth-art:not([data-banner-art="hubs"])) .hero-shade,
.depth-art:not([data-banner-art="hubs"]) .depth-background {
  mask-image: linear-gradient(180deg, transparent, #000 var(--banner-edge-fade, 72px));
}
@media (min-width: 761px) {
  .page-title-banner > .depth-art:not([data-banner-art="hubs"]) .depth-subject {
    inset-block-start: calc(-20% - 16px);
  }
}
.depth-stage { position: absolute; inset: 0; }
.depth-layer { position: absolute; pointer-events: none; transition: transform 1000ms cubic-bezier(.22,.61,.36,1); }
.depth-art .depth-layer picture { display: block; width: 100%; height: 100%; }
.depth-art .depth-layer img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.depth-background { inset: -24px; opacity: .3; transform: translate3d(calc(var(--banner-x) * -2px), calc(var(--banner-y) * -1.5px), 0); }
.depth-art .depth-background img { object-fit: cover; object-position: right center; }
.depth-subject { width: 58%; height: 120%; inset-block-start: -10%; inset-inline-end: -2%; transform: perspective(1000px) translate3d(calc(var(--banner-x) * 6px), calc(var(--banner-y) * 4px), 0) rotateY(calc(var(--banner-x) * 1deg)) rotateX(calc(var(--banner-y) * -.75deg)); }
.depth-accent { width: 22%; height: 70%; inset-block-start: -9%; inset-inline-end: 36%; opacity: .45; transform: translate3d(calc(var(--banner-x) * 3px), calc(var(--banner-y) * 2px), 0); }
.depth-foreground { width: 19%; height: 72%; inset-block-start: 18%; inset-inline-end: 1%; transform: translate3d(calc(var(--banner-x) * 10px), calc(var(--banner-y) * 6px), 0); }
.depth-art .depth-subject img { animation: banner-drift 8s ease-in-out -2s infinite; }
.depth-art .depth-accent img { animation: banner-drift 11s ease-in-out -5s infinite reverse; }
.depth-art .depth-foreground img { animation: banner-drift 7s ease-in-out -3s infinite; }
.depth-art .depth-layer img { animation-play-state: paused; }
.depth-art[data-banner-active] .depth-layer img { animation-play-state: running; }
.depth-art[data-banner-still] .depth-layer { transform: none; transition: none; }
.depth-art[data-banner-still] .depth-layer img { animation: none; }
@keyframes banner-drift {
  0%, 100% { transform: translateY(0) rotate(-.35deg); }
  50% { transform: translateY(-5px) rotate(.35deg); }
}
.page-title-banner::before { background: linear-gradient(90deg, #09090b 0%, rgba(9,9,11,.95) 29%, rgba(9,9,11,.65) 49%, rgba(9,9,11,.05) 77%); }
.page-title-banner h1 { max-width: 68%; overflow-wrap: anywhere; }
.page-title-banner > p:last-of-type { max-width: 58%; }
.resource-intro.page-title-banner > div:not(.page-title-art, .resource-library-actions) { position: relative; max-width: 62%; }
.resource-intro.page-title-banner > .page-title-art.depth-art { max-width: none; }
.resource-intro.page-title-banner h1 { max-width: 100%; }
.game-tree-heading.page-title-banner { position: relative; inset: auto; width: 100%; max-width: none; margin-bottom: 24px; padding: 40px 28px; }
.game-tree-heading.page-title-banner > p:last-child { color: var(--muted); }
.game-tree:has(.page-title-banner) .game-tree-controls { position: relative; inset: auto; max-width: none; flex-direction: row; align-items: center; }
.hero:has(.depth-art) { isolation: isolate; background: #09090b; }
.hero .depth-subject { width: 65%; height: 88%; inset-block-start: 3%; inset-inline-end: -3%; }
.hero .depth-foreground { width: 23%; height: 50%; inset-block-start: 24%; }
.hero .depth-accent { inset-inline-end: 39%; }
.hero:has(.depth-art) .hero-shade { z-index: 1; background: linear-gradient(90deg, rgba(9,9,11,.98) 0%, rgba(9,9,11,.88) 32%, rgba(9,9,11,.3) 55%, transparent 76%); }
html[dir=rtl] .depth-art .depth-layer img { transform: none; }
html[dir=rtl] .depth-stage { transform: scaleX(-1); }
html[dir=rtl] .depth-subject, html[dir=rtl] .depth-accent, html[dir=rtl] .depth-foreground { direction: ltr; }
html[dir=rtl] .page-title-banner::before { background: linear-gradient(270deg, #09090b 0%, rgba(9,9,11,.95) 29%, rgba(9,9,11,.65) 49%, rgba(9,9,11,.05) 77%); }
@media (max-width: 760px) {
  .page-title-banner { padding-block-start: 160px; }
  .page-title-banner .depth-subject { width: 82%; height: 200px; inset-block-start: -24px; inset-inline-end: -5%; }
  .page-title-banner .depth-accent { width: 24%; height: 145px; inset-block-start: -10px; inset-inline-end: 64%; }
  .page-title-banner .depth-foreground { width: 23%; height: 155px; inset-block-start: 12px; inset-inline-end: 1%; }
  .page-title-banner::before, html[dir=rtl] .page-title-banner::before { background: linear-gradient(0deg, #09090b 0%, #09090b calc(100% - 125px), rgba(9,9,11,.6) calc(100% - 170px), rgba(9,9,11,.1) 100%); }
  .page-title-banner h1, .page-title-banner > p:last-of-type { max-width: 100%; }
  .resource-intro.page-title-banner, .deal-gate-copy.page-title-banner, .game-tree-heading.page-title-banner { padding: 160px 18px 34px; }
  .resource-intro.page-title-banner > div:not(.page-title-art, .resource-library-actions) { max-width: 100%; }
  .hero .depth-subject { width: 95%; height: 270px; inset-block-start: -18px; inset-inline-end: -13%; }
  .hero .depth-accent { width: 26%; height: 180px; inset-block-start: 0; inset-inline-end: 66%; }
  .hero .depth-foreground { width: 24%; height: 190px; inset-block-start: 24px; }
  .hero:has(.depth-art) .hero-copy { padding-block-start: 235px; }
  .hero:has(.depth-art) .hero-shade { background: linear-gradient(0deg, #09090b 0%, #09090b calc(100% - 175px), rgba(9,9,11,.45) calc(100% - 225px), transparent 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .depth-art .depth-layer { transform: none; transition: none; }
  .depth-art .depth-layer img { animation: none; }
}

/* Shared with the game tree; article and list typography keeps its own family. */
.page-title-banner, .hero:has(> .depth-art) {
  font-family: 'Galmuri11', system-ui, sans-serif;
}
html[lang=ko] :is(.page-title-banner, .hero:has(> .depth-art)) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.page-title-banner .eyebrow, .hero:has(> .depth-art) .eyebrow {
  font-family: inherit;
  font-weight: 700;
  line-height: 1.5;
}
.page-title-banner h1, .hero:has(> .depth-art) .hero-copy h1 {
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  text-wrap: balance;
}
:is(.page-title-banner, .hero:has(> .depth-art)) :is(.button, strong, b) {
  font-family: inherit;
  font-weight: 700;
}