/* Ember studio shell. Game sections retain their own artwork and palettes. */
:root {
  --bg: #111416;
  --paper: #f5f2ec;
  --muted: #bec3c4;
  --gold: #ffc471;
  --line: #343a3e;
  --ember-action: #ff9152;
  --ember-raised: #1a1e21;
  --studio-gutter: clamp(20px, 5vw, 72px);
}

body {
  background: var(--bg);
  color: var(--paper);
  line-height: 1.65;
}
::selection { background: #ffc471; color: #111416; }
header, footer {
  width: min(100%, 1440px);
  padding: 24px var(--studio-gutter);
  gap: 28px;
  border-color: var(--line);
  background: transparent;
}
header .brand { flex-shrink: 0; gap: 12px; }
.brand-wordmark strong { color: var(--paper); }
.brand-wordmark b { color: var(--ember-action); }
.brand-wordmark small { color: var(--muted); font-size: 10px; letter-spacing: .22em; }
header nav { gap: 8px 16px; justify-content: flex-end; }
header nav a {
  color: var(--muted);
  font-weight: 500;
  padding: 10px 6px;
  transition: color 160ms ease;
}
header nav a:hover { color: var(--gold); }

.hero {
  width: min(100%, 1440px);
  min-height: 0;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 64px);
  padding: 48px var(--studio-gutter) 72px;
  align-items: center;
}
.hero-copy {
  min-width: 0;
  padding: 24px 0;
  animation: ember-arrive 450ms ease-out both;
}
.hero-copy:before { content: none; }
.hero-copy .eyebrow {
  margin: 0 0 22px;
  color: var(--gold);
  font-size: 14px;
  letter-spacing: .035em;
  font-weight: 500;
}
.hero-copy h1 {
  margin: 0;
  font-size: clamp(42px, 4.5vw, 68px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.035em;
  color: var(--paper);
  text-wrap: balance;
}
.hero-copy h1 em {
  font-weight: inherit;
  font-style: normal;
  color: inherit;
  background: none;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}
.hero-copy .intro {
  max-width: 46ch;
  margin: 26px 0 30px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}
.hero-copy .button {
  min-height: 52px;
  border: 1px solid var(--ember-action);
  border-radius: 8px;
  padding: 14px 22px;
  gap: 24px;
  background: var(--ember-action);
  color: #17100b;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.hero-copy .button:hover { background: var(--gold); border-color: var(--gold); }
.hero-copy .button:active { transform: translateY(1px); }
.hero-copy .media-quicklinks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
  max-width: 420px;
  margin: 24px 0 0;
}
.hero-copy .media-quicklinks a {
  justify-content: flex-start;
  padding: 8px 0;
  font-size: 13px;
  color: var(--muted);
  border: 0;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: #697174;
}
.hero-copy .media-quicklinks a:hover { color: var(--gold); }
.hero-copy .release {
  max-width: 46ch;
  padding: 14px 0 14px 16px;
  margin: 28px 0 0;
  border-left: 2px solid var(--ember-action);
  color: var(--paper);
  font-size: 13px;
}

.hero-art {
  --selector-height: 124px;
  height: 740px;
  min-height: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--ember-raised);
  box-shadow: 0 18px 48px #00000030;
}
.hero-art:after { content: none; }
.hero-art .hero-slide { inset: 0 0 var(--selector-height); }
.hero-art .hero-slide:after {
  background: linear-gradient(0deg, #101216f5, #10121615 68%, transparent);
}
.hero-art .hero-slide .art-caption { bottom: 62px; left: 7%; right: 7%; }
.hero-art .hero-slide .art-caption a {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}
.hero-art .image-note { bottom: 16px; padding: 0 18px; }
.hero-art .slide-controls {
  position: absolute;
  inset: auto 0 0;
  height: var(--selector-height);
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  border: 0;
  border-top: 1px solid var(--line);
  background: var(--ember-raised);
  backdrop-filter: none;
}
.hero-art .slide-control {
  min-width: 0;
  min-height: 44px;
  padding: 8px 5px;
  gap: 4px;
  font-size: 12px;
  border: 1px solid #454c50;
  border-radius: 6px;
  color: var(--paper);
  background: transparent;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.hero-art .slide-control span { display: inline; }
.hero-art .slide-control .slide-number { flex: none; white-space: nowrap; overflow-wrap: normal; }
.hero-art .slide-control:hover { background: #2a3034; border-color: var(--gold); }
.hero-art:has([data-slide]:not([hidden])) .slide-control.active {
  background: var(--ember-action);
  border-color: var(--ember-action);
  color: #17100b;
}
.hero-art [data-slide-previous], .hero-art [data-slide-next] { grid-column: span 2; }

/* Scoped specificity repairs keep Flumpling's current jewel-tone art direction. */
.game.section {
  width: min(calc(100% - 2 * var(--studio-gutter)), 1296px);
  margin: 0 auto 64px;
  padding: clamp(24px, 4vw, 52px);
  border-radius: 16px;
  box-shadow: none;
}
.game.section.flight-game {
  background: linear-gradient(140deg, #221735, #141024);
  border-color: #806095;
  padding: clamp(24px, 4vw, 52px);
}
.game-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 80px); }
.game-layout > *, .flumpling-intro > *, .video-layout > * { min-width: 0; }
.game-brand h2 { min-width: 0; overflow-wrap: anywhere; }
.section-label { margin-bottom: 32px; }
.flumpling-current-hero h2 { max-width: 100%; overflow-wrap: anywhere; }
.flumpling-current-hero .button { max-width: 100%; }
.support.section, .privacy.section {
  width: min(calc(100% - 2 * var(--studio-gutter)), 1296px);
  margin: 0 auto;
  padding: 64px 0;
  background: none;
  border-top-color: var(--line);
}
.support { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.support h2, .privacy h2 { letter-spacing: -.035em; }
.support .eyebrow, .privacy .eyebrow { color: var(--gold); letter-spacing: .035em; font-size: 14px; }
.support h2 em { color: var(--paper); }
.support .email { color: var(--gold); border-color: #697174; font-size: clamp(18px, 2vw, 27px); }
.privacy a, .contact .text-link { color: var(--gold); }
footer { padding-top: 30px; padding-bottom: 30px; gap: 12px 24px; flex-wrap: wrap; }
footer .brand-wordmark small { font-size: 9px; }
footer p { margin: 0; }
a:focus-visible, button:focus-visible, .slide-control:focus-visible {
  outline: 3px solid #ffc471;
  outline-offset: 4px;
}
.skip { background: var(--gold); color: #111416; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@keyframes ember-arrive { from { opacity: .5; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 1100px) {
  header { flex-direction: column; align-items: flex-start; gap: 12px; }
  header nav { justify-content: flex-start; gap: 4px 16px; }
  .hero { gap: 32px; }
  .hero-art { height: 680px; }
  .hero-art .slide-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-art { --selector-height: 178px; }
  .hero-art [data-slide-previous], .hero-art [data-slide-next] { grid-column: span 1; }
}
@media (max-width: 899px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 24px; padding-bottom: 48px; }
  .hero-copy { padding: 16px 0 0; }
  .hero-copy h1 { max-width: 640px; font-size: clamp(40px, 7vw, 62px); }
  .hero-copy .intro { max-width: 56ch; }
  .hero-art { height: 700px; }
  .game-layout, .support { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .game.section, .game.section.flight-game { padding: 28px; margin-bottom: 48px; }
  .support.section, .privacy.section { padding: 48px 0; }
}
@media (max-width: 520px) {
  header, footer { padding-left: 20px; padding-right: 20px; }
  header nav { width: 100%; gap: 2px 12px; font-size: 13px; }
  header nav a { padding: 8px 0; }
  .brand-wordmark small { font-size: 9px; }
  .hero-copy h1 { font-size: clamp(36px, 9.6vw, 49px); line-height: 1.1; }
  .hero-copy .eyebrow { font-size: 12px; margin-bottom: 18px; }
  .hero-copy .intro { font-size: 16px; margin: 22px 0 26px; }
  .hero-copy .button { width: 100%; justify-content: space-between; }
  .hero-copy .media-quicklinks { gap: 4px 12px; }
  .hero-copy .media-quicklinks a { font-size: 12px; }
  .hero-copy .release { margin-top: 22px; }
  .hero-art { height: 630px; }
  .hero-art .hero-slide .art-caption { bottom: 62px; gap: 10px; }
  .hero-art .hero-slide .art-caption a { font-size: clamp(30px, 8vw, 38px); }
  .hero-art .art-caption span { font-size: 10px; letter-spacing: .12em; }
  .hero-art .slide-controls { padding: 12px; }
  .hero-art .slide-control { gap: 5px; font-size: 12px; }
  .game.section, .game.section.flight-game { padding: 20px; border-radius: 12px; }
  .flumpling-current-hero > div { padding: 44px 20px; }
  .flumpling-current-hero h2 { font-size: clamp(28px, 8vw, 44px); line-height: 1.08; }
  .section-label { gap: 12px; font-size: 11px; }
  .support .email { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-copy { animation: none; }
  *, *:before, *:after { transition: none !important; animation: none !important; }
}


/* Version-16 union: mobile navigation, artwork-first reading order, and skip-link visibility. */
.menu-toggle { display: none; }
.hero { row-gap: 26px; }
.hero-copy { grid-column: 1; grid-row: 1; align-self: end; padding-bottom: 0; }
.hero-art { grid-column: 2; grid-row: 1 / span 2; }
.hero-detail { grid-column: 1; grid-row: 2; align-self: start; min-width: 0; padding: 0 0 24px; }
.hero-detail .intro { max-width: 46ch; margin: 0 0 30px; color: var(--muted); font-size: 17px; line-height: 1.75; }
.hero-detail .button { min-height: 52px; border: 1px solid var(--ember-action); border-radius: 8px; padding: 14px 22px; gap: 24px; background: var(--ember-action); color: #17100b; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease; }
.hero-detail .button:hover { background: var(--gold); border-color: var(--gold); }
.hero-detail .button:active { transform: translateY(1px); }
.hero-detail .media-quicklinks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 16px; max-width: 420px; margin: 24px 0 0; }
.hero-detail .media-quicklinks a { justify-content: flex-start; padding: 8px 0; font-size: 13px; color: var(--muted); border: 0; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #697174; }
.hero-detail .media-quicklinks a:hover { color: var(--gold); }
.hero-detail .release { max-width: 46ch; padding: 14px 0 14px 16px; margin: 28px 0 0; border-left: 2px solid var(--ember-action); color: var(--paper); font-size: 13px; }
.skip { position: fixed; top: 16px; left: 16px; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.skip:focus-visible { top: 16px; width: auto; height: auto; min-height: 44px; padding: 12px 18px; overflow: visible; clip-path: none; }
@media (max-width:899px) {
  .hero-copy,.hero-art,.hero-detail { grid-column: 1; grid-row: auto; align-self: auto; }
  .hero-detail { padding: 0; }
  .hero-detail .intro { max-width: 56ch; }
}
@media (max-width:760px) {
  header.site-header { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px; }
  header.site-header nav { grid-column: 1/-1; width: 100%; gap: 8px; }
  header.site-header nav a { min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; }
  .site-header[data-menu-ready] .menu-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 8px; color: var(--paper); background: var(--ember-raised); font: inherit; cursor: pointer; transition: background 160ms ease; }
  .site-header[data-menu-ready]:not([data-menu-open]) nav { display: none; }
}
@media (max-width:520px) {
  .hero-detail .intro { font-size: 16px; margin: 0 0 26px; }
  .hero-detail .button { width: 100%; justify-content: space-between; }
  .hero-detail .media-quicklinks { gap: 4px 12px; }
  .hero-detail .media-quicklinks a { font-size: 12px; }
  .hero-detail .release { margin-top: 22px; }
}
@media (prefers-reduced-motion:reduce) { .hero-detail .button,.site-header .menu-toggle { transition: none; } }