/* Hanten Phase 1 — shared presentation for Start, Themes, Browse, Samples.
   Scoped to these pages; does not alter homepage, navigation, or exhibits. */
body.hanten-phase1 {
  --hanten-navy: #1A3E6E;
  --hanten-gold: #E59E12;
  --hanten-canvas: #6688AD;
  background: var(--hanten-canvas) !important;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  min-height: 100vh;
}
body.hanten-phase1::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('/Media/branding/hanten-south-up-world.svg') center center / cover no-repeat;
  opacity: .72;
}
body.hanten-phase1 > .site {
  position: relative;
  z-index: 1;
  background: transparent !important;
  min-height: 65vh;
}

/* Shared page-heading geometry and typography. */
body.hanten-phase1 .site > header.play-hero,
body.hanten-phase1 .site > header.browse-header {
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
  padding: 42px 20px 22px !important;
  text-align: center;
  height: auto !important;
  min-height: 0 !important;
}
/* Browse has a different kicker class and legacy inline rules. Keep
   these specific selectors so both pages use the same approved styling. */
body.hanten-phase1 .site > header.play-hero .home-kicker,
body.hanten-phase1 .site > header.browse-header .browse-eyebrow {
  display: block !important;
  color: var(--hanten-gold) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: .01em !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  box-sizing: border-box;
}
body.hanten-phase1 .site > header.play-hero h1,
body.hanten-phase1 .site > header.browse-header h1 {
  color: #fff !important;
  font-size: 40px !important;
  line-height: 1.2 !important;
  margin: 10px auto 0 !important;
  text-shadow: 0 1px 3px rgba(15,41,75,.35);
  box-sizing: border-box;
}
body.hanten-phase1 .site > header.play-hero .intro,
body.hanten-phase1 .site > header.browse-header .intro {
  color: rgba(255,255,255,.95) !important;
  font-size: clamp(1rem, 1.4vw, 1.15rem) !important;
  line-height: 1.5 !important;
  max-width: 48rem !important;
  margin: 20px auto 0 !important;
  text-align: center !important;
  box-sizing: border-box;
}

/* Readable cards and browse surfaces. */
body.hanten-phase1 .site > main { position: relative; }
body.hanten-phase1 .start-step,
body.hanten-phase1 .idea-card,
body.hanten-phase1 .sample-card {
  box-shadow: 0 5px 18px rgba(9,34,68,.16);
  border-radius: 16px;
}
body.hanten-phase1 .browse-controls,
body.hanten-phase1 .browse-all-view,
body.hanten-phase1 .browse-search-wrap {
  color: var(--hanten-navy);
}
body.hanten-phase1 .browse-page { padding-bottom: 48px; }
body.hanten-phase1 .browse-page .browse-controls,
body.hanten-phase1 .browse-page .browse-all-view {
  background: rgba(255,255,255,.96);
  border-radius: 16px;
}
/* Shared site header makes Browse's legacy brand image redundant. */
body.hanten-phase1 .browse-header .brand-logo { display: none !important; }

@media (max-width: 640px) {
  body.hanten-phase1 .site > header.play-hero,
  body.hanten-phase1 .site > header.browse-header {
    padding: 28px 16px 18px !important;
  }
  body.hanten-phase1 .site > header.play-hero .home-kicker,
  body.hanten-phase1 .site > header.browse-header .browse-eyebrow {
    font-size: 22px !important;
  }
  body.hanten-phase1 .site > header.play-hero h1,
  body.hanten-phase1 .site > header.browse-header h1 {
    font-size: 32px !important;
  }
  body.hanten-phase1 .browse-page .browse-controls,
  body.hanten-phase1 .browse-page .browse-all-view {
    border-radius: 12px;
  }
}