.page-home {
  --frontier-dark: var(--night);
  --frontier-gold: #e7bd80;
  --frontier-muted: var(--muted);
  --frontier-edge: #9f794b6b;
  --frontier-width: 1320px;
  --frontier-gutter: clamp(20px, 5vw, 76px);
  min-height: 100vh;
  background: radial-gradient(ellipse at 50% 61%, var(--raised), var(--frontier-dark) 70%);
}

.page-home .masthead {
  position: relative;
  z-index: 2;
  background: var(--field);
  border-color: var(--frontier-edge);
}

.page-home .masthead-inner {
  max-width: var(--frontier-width);
  padding-inline: var(--frontier-gutter);
}

.page-home .brand { color: #f2d49e; }
.page-home .masthead nav { color: var(--frontier-muted); }
.page-home .masthead .home-navigation { margin-inline-end: auto; margin-inline-start: clamp(6px, 2vw, 30px); }

.frontier-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(540px, calc(100svh - 70px), 830px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: #161c26;
  border-bottom: 1px solid var(--frontier-edge);
}

.frontier-view, .frontier-hero::after, .frontier-snow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.frontier-view { z-index: -3; container-type: size; }
.frontier-scene {
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: max(calc(100% + 32px), calc(150cqh + 36px));
  aspect-ratio: 3 / 2;
  transform: translate(calc(-50% + var(--pan-x, 0px)), var(--pan-y, 0px));
  transition: transform .22s ease-out;
}
.frontier-painting { width: 100%; height: 100%; }
.frontier-fire {
  position: absolute;
  /* Match the sampled region of the 1536 × 1024 painting. */
  left: 41.6667%;
  top: 68.75%;
  width: 27.34375%;
  height: auto;
  visibility: hidden;
  mask-image: radial-gradient(ellipse at 51% 59%, #000 54%, transparent 73%);
}
.frontier-hero-moving .frontier-fire[data-playing] { visibility: visible; }
.frontier-hero::after {
  content: "";
  z-index: -2;
  background:
    linear-gradient(90deg, #10141ce6, #111620a3 31%, #10151f25 51%, transparent 62%),
    linear-gradient(0deg, #121823, #12182314 14%, transparent 33%);
}

.frontier-content {
  width: min(100%, var(--frontier-width));
  margin-inline: auto;
  padding: 62px var(--frontier-gutter);
}

.frontier-kicker { color: var(--frontier-gold); }

.frontier-content h1 {
  font-size: clamp(66px, 8vw, 124px);
  letter-spacing: -.06em;
  line-height: .91;
  margin: 20px 0 24px;
  text-shadow: 0 3px 18px #110c08b3;
}

.frontier-content h1 em { color: var(--frontier-gold); font-weight: inherit; }
.frontier-intro { max-width: 39ch; color: #f0dfc6; font-size: clamp(17px, 1.6vw, 21px); }
.frontier-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.frontier-actions .button { min-height: 48px; padding-inline: 19px; }
.frontier-outline { background: #151e2cd9; border-color: #bfa174; color: var(--cream); }
.frontier-outline:hover { background: var(--hover); }
.frontier-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  color: var(--frontier-muted);
  font-size: .8rem;
}
.frontier-status .status-dot { margin: 0; background: #f1bd78; box-shadow: 0 0 8px #f2b867; }

.frontier-snow { overflow: hidden; }
.frontier-snow i {
  position: absolute;
  top: -8px;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #e7efff;
  opacity: .54;
  animation: frontier-snowfall var(--fall-time) var(--fall-delay) linear infinite paused;
}
.frontier-hero-moving .frontier-snow i { animation-play-state: running; }
@keyframes frontier-snowfall {
  0% { transform: translate(0, 0); }
  45% { transform: translate(23px, 47cqh); }
  100% { transform: translate(68px, calc(100cqh + 8px)); }
}

.frontier-section {
  position: relative;
  isolation: isolate;
  --section-gutter: max(var(--frontier-gutter), calc((100% - var(--frontier-width)) / 2 + var(--frontier-gutter)));
  padding: clamp(82px, 13vw, 188px) var(--section-gutter) clamp(34px, 5vw, 72px);
  scroll-margin-top: 10px;
}

.frontier-section::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 var(--section-gutter) auto;
  height: 9px;
  background:
    radial-gradient(circle, #e6bd81 0 3px, transparent 3.5px) center / 9px 9px no-repeat,
    linear-gradient(90deg, transparent, #b8905c 40% 60%, transparent) center / 100% 1px no-repeat;
  pointer-events: none;
}

.frontier-backdrop,
.frontier-section::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.frontier-backdrop { z-index: -2; object-fit: cover; object-position: 64% 45%; }
.frontier-section::after {
  content: "";
  z-index: -1;
  background:
    linear-gradient(90deg, #121823e8, #12182365 46%, #1218231c),
    linear-gradient(0deg, #121823bc, transparent 48%);
}
#gameplay .frontier-backdrop { transform: scaleX(-1); }
#gameplay::after {
  background:
    linear-gradient(270deg, #121823e8, #12182365 46%, #12182320),
    linear-gradient(0deg, #121823bc, transparent 48%);
}
#gameplay .frontier-heading { text-align: right; }
#campaign .frontier-backdrop { object-position: 81% 50%; }
#campaign .frontier-heading { margin-bottom: clamp(28px, 4vw, 56px); }

.frontier-heading { margin-bottom: 28px; }
.frontier-heading h2 {
  margin: 8px 0 10px;
  font-size: clamp(39px, 5.2vw, 67px);
  letter-spacing: -.045em;
  text-wrap: balance;
}
.frontier-heading > p:last-child { color: var(--frontier-muted); }
.frontier-heading { text-shadow: 0 2px 12px #121823, 0 1px 4px #121823; }

.frontier-gameplay {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--frontier-edge);
  background: #192332ed;
}
.frontier-gameplay article { padding: 24px clamp(14px, 2.8vw, 38px); }
.frontier-gameplay article + article { border-inline-start: 1px solid var(--frontier-edge); }
.frontier-gameplay img { object-fit: contain; margin-bottom: 10px; }
.frontier-gameplay h3 { font-size: clamp(24px, 2.7vw, 36px); margin-bottom: 8px; }
.frontier-gameplay p { color: var(--frontier-muted); }

.frontier-campaign { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.frontier-campaign article {
  overflow: hidden;
  border: 1px solid var(--frontier-edge);
  border-radius: 5px;
  background: var(--dark);
}
.frontier-campaign-art {
  display: grid;
  place-items: center;
  padding: 18px;
  background: radial-gradient(ellipse at 50% 100%, #384f6b, var(--field) 76%);
  border-bottom: 1px solid var(--frontier-edge);
}
.frontier-campaign-art img { object-fit: contain; filter: drop-shadow(0 5px 8px #101014a3); }
.frontier-campaign-copy { padding: 21px clamp(16px, 2.5vw, 26px) 25px; }
.frontier-campaign-copy h3 { font-size: clamp(25px, 3vw, 36px); margin-bottom: 8px; }
.frontier-campaign-copy p:last-child { color: var(--frontier-muted); }
.frontier-campaign-copy .eyebrow { margin-bottom: 5px; }

.frontier-preview {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #af8e5e;
  border-radius: 5px;
  background: var(--dark);
  box-shadow: 0 20px 46px #090f195e;
}

.frontier-map { position: relative; align-self: start; aspect-ratio: 3 / 2; background: #28301e; }
.frontier-pins { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.frontier-map .scene-art { pointer-events: none; }
.frontier-map-label {
  position: absolute;
  z-index: 3;
  left: 12px;
  bottom: 12px;
  padding: 3px 10px;
  border: 1px solid #bf9e6e99;
  border-radius: 3px;
  background: #151e2ce8;
  font: 1rem var(--serif);
}

.frontier-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  width: clamp(24px, 2vw, 29px);
  height: clamp(24px, 2vw, 29px);
  padding: 0;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  background: #192332f2;
  color: #ffe0aa;
  border: 1px solid #e1b576;
  border-radius: 50%;
  box-shadow: 0 3px 9px #101823b0;
  transition: background-color .18s, color .18s, box-shadow .18s;
}
.frontier-pin::before { content: "◆"; font-size: 10px; }
.frontier-pin:hover, .frontier-pin[aria-pressed="true"] {
  background: #edc389;
  color: #312014;
  box-shadow: 0 0 0 4px #f3c88c38, 0 3px 10px #211308;
}
.frontier-pin:focus-visible { z-index: 1; }

.frontier-notes {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  min-width: 0;
  padding: clamp(20px, 3vw, 44px);
  background:
    linear-gradient(155deg, #25375165, #141d2dbf), var(--navy-cloth) center / 680px var(--dark);
  color: var(--cream);
  border-inline-start: 1px solid #af8e5e;
  box-shadow: inset 0 0 24px #10182356;
}
.frontier-picker { display: grid; gap: 4px; font-size: .85rem; font-weight: 650; }
.frontier-picker select { min-height: 44px; width: 100%; padding: 6px; color: var(--cream); background: var(--field); border: 1px solid var(--line); border-radius: 4px; }
.frontier-note dl { margin: 18px 0 0; font-size: .9rem; }
.frontier-note dt { font-weight: 650; }
.frontier-note dd { margin: 0 0 8px; }
.frontier-note .eyebrow { color: var(--gold); }
.frontier-note h3 { margin: 4px 0 9px; font-size: clamp(28px, 3vw, 44px); letter-spacing: -.035em; }
.frontier-note p:last-child { max-width: 38ch; color: var(--muted); }
.frontier-footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 6px 18px; }

.frontier-worlds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.frontier-world {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: var(--dark);
  border: 1px solid var(--frontier-edge);
  border-radius: 5px;
}
.frontier-world img { width: 100%; height: auto; aspect-ratio: 2.4; object-fit: cover; }
.frontier-world-copy { padding: 21px clamp(18px, 3vw, 30px) 26px; border-top: 1px solid var(--frontier-edge); }
.frontier-world-copy h3 { font-size: clamp(32px, 4vw, 47px); letter-spacing: -.045em; margin: 5px 0 8px; }
.frontier-world-copy p:last-child { color: var(--frontier-muted); max-width: 45ch; }

.frontier-world-action { display: flex; justify-content: center; margin-top: 28px; }
.frontier-play-button {
  min-height: 50px;
  padding-inline: 20px;
  border-color: #f4d698;
  background: linear-gradient(165deg, #f8deaa, #cb9550);
  box-shadow: inset 0 0 0 2px #f8d99772, 0 3px 18px #d88e3138;
}
.frontier-play-button span[aria-hidden] {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #75421426;
}
.frontier-play-button:hover, .frontier-play-button:focus-visible {
  background: #ffe0a6;
  box-shadow: inset 0 0 0 2px #fff2d286, 0 4px 23px #edab5569;
}
@media (prefers-reduced-motion: no-preference) {
  .frontier-play-button { transition: transform .18s ease, box-shadow .18s ease; }
  .frontier-play-button span { transition: transform .18s ease; }
  .frontier-play-button:hover, .frontier-play-button:focus-visible { transform: translateY(-2px); }
  .frontier-play-button:hover span, .frontier-play-button:focus-visible span { transform: translateX(3px); }
}

.frontier-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  max-width: var(--frontier-width);
  margin-inline: auto;
  padding: 25px var(--frontier-gutter);
  color: var(--frontier-muted);
  font-size: .85rem;
}
.frontier-footer .brand { font-size: 21px; }
.frontier-footer .brand img { width: 29px; height: 32px; }

@media (max-width: 720px) {
  .frontier-section::after, #gameplay::after {
    background: linear-gradient(180deg, #12182375, #12182330 34%, #121823b0);
  }
  .frontier-campaign { grid-template-columns: 1fr; }
  .page-home .masthead .home-navigation { display: none; }
  .frontier-hero { min-height: 0; align-items: end; }
  .frontier-view {
    bottom: auto;
    height: clamp(320px, 76vw, 510px);
    mask-image: linear-gradient(#000 84%, transparent);
  }
  .frontier-scene { left: auto; right: -14px; transform: none; }
  .frontier-hero::after {
    background: linear-gradient(180deg, transparent 25%, #12182320 42%, var(--frontier-dark) 65%);
  }
  .frontier-content { padding-block: clamp(272px, 67vw, 460px) 34px; }
  .frontier-content h1 { font-size: clamp(53px, 12vw, 78px); }
  .frontier-preview { grid-template-columns: 1fr; }
  .frontier-notes { border-inline-start: 0; border-top: 1px solid #af8e5e; }
}

@media (max-width: 480px) {
  .frontier-worlds { grid-template-columns: 1fr; }
  .frontier-gameplay { grid-template-columns: 1fr; }
  .frontier-gameplay article + article { border-inline-start: 0; border-top: 1px solid var(--frontier-edge); }
  .frontier-actions .button { padding-inline: 12px; gap: 8px; font-size: 13px; }
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.page-home) { scroll-behavior: smooth; }
  .frontier-content { animation: frontier-arrive .65s ease-out both; }
  .frontier-note:not([hidden]) { animation: frontier-arrive .24s ease-out both; }
  .frontier-revealed { animation: frontier-reveal .65s ease-out var(--reveal-delay, 0ms) both; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 721px) {
  :is(.frontier-gameplay, .frontier-campaign, .frontier-worlds) > :nth-child(2) { --reveal-delay: 95ms; }
  :is(.frontier-gameplay, .frontier-campaign) > :nth-child(3) { --reveal-delay: 190ms; }
}
@keyframes frontier-arrive {
  from { opacity: .55; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes frontier-reveal {
  from { opacity: .35; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .frontier-snow { display: none; }
  .frontier-pin, .frontier-scene { transition: none; }
}