/* The opening mountain keeps an uninterrupted field between its upper-sky
   title and the explorer at the foot of the frame. All rules stay in hero. */
.hero--immersive.hero--day {
  --explorer-ink: #eef5fb;
  --explorer-muted: #c0d1e0;
  min-height: 620px;
}
.hero--immersive .hero__veil {
  background: linear-gradient(180deg, rgba(13, 32, 52, .15), transparent 28%, transparent 74%, rgba(8, 21, 35, .12));
}
.hero--immersive .hero__photo-sky {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 16px;
  transform-origin: 50% 0;
  background-repeat: no-repeat;
  pointer-events: none;
}
.hero--immersive.is-fallback .hero__photo-sky { display: none; }
.hero--immersive .hero__copy {
  top: clamp(5.6rem, 11.5vh, 7.5rem);
  right: auto;
  max-width: min(38rem, calc(100% - 2 * var(--gutter)));
  transition: opacity .8s .15s ease, transform 1s .15s var(--ease-out);
}
.hero--immersive .hero__copy > * { pointer-events: none; }
.hero--immersive .hero__eyebrow {
  margin: 0 0 .95rem;
  font-size: .75rem;
  letter-spacing: .12em;
  color: #edf5fc;
}
.hero--immersive .hero__title {
  font-size: clamp(2.8rem, 4.8vw, 4.8rem);
  line-height: 1.23;
  letter-spacing: .045em;
  text-shadow: 0 1px 3px rgba(11, 35, 59, .28), 0 5px 30px rgba(11, 35, 59, .22);
}
:root[data-lang="en"] .hero--immersive .hero__title {
  max-width: 14ch;
  font-size: clamp(3rem, 4.8vw, 5rem);
  line-height: 1.02;
  letter-spacing: -.025em;
}
.hero--immersive .hero__lead {
  max-width: 29rem;
  margin: 1rem 0 0;
  font-size: .95rem;
  line-height: 1.75;
  letter-spacing: .015em;
  color: #f1f6fb;
  text-shadow: 0 1px 5px rgba(10, 36, 61, .6);
}
.hero--immersive.is-ready.has-orbited .hero__copy,
.hero--immersive.is-ready.is-scenery .hero__copy {
  opacity: 0;
  transform: translateY(-.7rem);
  transition-delay: 0s;
  transition-duration: .6s;
}

/* One restrained, legible instrument. It sits over the low foreground, never
   as a floating caption or instruction on the summit and its shoulders. */
.hero-explorer {
  position: absolute;
  z-index: 7;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  left: 50%;
  width: min(58rem, calc(100% - 2 * var(--gutter)));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65rem 1.6rem;
  padding: 1rem 1.3rem .8rem;
  border: 1px solid rgba(228, 240, 253, .22);
  border-top-color: rgba(228, 240, 253, .4);
  border-radius: 1.1rem;
  background: linear-gradient(130deg, rgba(14, 33, 50, .84), rgba(12, 31, 48, .69));
  box-shadow: 0 8px 32px rgba(3, 19, 34, .16), inset 0 1px 0 rgba(255, 255, 255, .045);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--explorer-ink);
  opacity: 0;
  transform: translate(-50%, .65rem);
  transition: opacity .9s .15s ease, transform .9s .15s var(--ease-out), background .4s ease;
}
.hero--immersive.is-ready .hero-explorer { opacity: 1; transform: translate(-50%, 0); }
.hero-explorer__readout { min-width: 0; display: flex; align-items: center; gap: .85rem; }
.hero-compass { position: relative; width: 46px; height: 46px; flex: 0 0 46px; }
.hero-compass svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.hero-compass circle { fill: none; stroke-width: 1.3; }
.hero-compass__track { stroke: rgba(217, 231, 245, .22); }
.hero-compass .hero-compass__progress {
  stroke: #d8c89d;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
}
.hero-compass span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: .75rem;
  color: #e5dbbd;
  font-variant-numeric: tabular-nums;
}
.hero-place { min-width: 0; display: grid; gap: .14rem; line-height: 1.25; }
.hero-place__eyebrow { font-size: .75rem; letter-spacing: .09em; color: var(--explorer-muted); }
.hero-place strong { font-size: .95rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-place__bearing { font-size: .75rem; color: var(--explorer-muted); font-variant-numeric: tabular-nums; }
.hero-place__choose {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex: none;
  min-height: 44px;
  margin-left: auto;
  padding: .55rem .15rem .55rem .55rem;
  font-size: .875rem;
  color: #d7e3ed;
  white-space: nowrap;
}
.hero-place__choose svg { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .2s ease; }
.hero-place__choose[aria-expanded="true"] svg { transform: rotate(180deg); }
.hero-place__choose:hover { color: #fff; }
.hero-explorer__actions { display: flex; align-items: center; gap: .4rem; }
.hero-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: .65rem .75rem;
  border: 1px solid rgba(232, 242, 252, .22);
  border-radius: .65rem;
  background: rgba(231, 241, 251, .04);
  color: #e7f0f8;
  font-size: .875rem;
  line-height: 1.1;
  letter-spacing: .015em;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease;
}
.hero-control:hover { border-color: rgba(232, 242, 252, .55); background: rgba(231, 241, 251, .13); }
.hero-control:disabled, .hero-place__choose:disabled { cursor: wait; opacity: .6; }
.hero-control--tour:disabled { opacity: .9; }
.hero-control svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.hero-control--tour {
  min-width: 8.2rem;
  border-color: #e5dec8;
  background: #e5dec8;
  color: #183148;
}
.hero-control--tour:hover { background: #faf0d5; border-color: #faf0d5; }
.hero-control--visit { color: #f5e4b4; border-color: rgba(229, 222, 200, .55); text-decoration: none; }
.hero-control .tour-play { fill: currentColor; stroke: none; }
.hero-control .tour-pause { display: none; stroke-width: 2.4; }
.is-tour-playing .hero-control .tour-play { display: none; }
.is-tour-playing .hero-control .tour-pause { display: block; }
.hero-explorer__places { grid-column: 1 / -1; padding-top: .35rem; border-top: 1px solid rgba(224, 237, 250, .16); }
.hero-explorer__places p { margin: .4rem 0 .65rem; font-size: .75rem; line-height: 1.6; color: var(--explorer-muted); }
.hero-explorer__places > div { display: flex; flex-wrap: wrap; gap: .35rem; }
.hero-view {
  min-height: 44px;
  padding: .45rem .65rem;
  border: 1px solid rgba(224, 237, 250, .16);
  border-radius: .45rem;
  font-size: .875rem;
  line-height: 1.2;
  color: #d9e5f0;
}
.hero-view:hover, .hero-view.is-active { background: rgba(233, 241, 250, .13); border-color: rgba(233, 241, 250, .4); color: #fff; }
.hero-view--home { color: #e5d5ab; }
.hero-explorer__caption { position: relative; grid-column: 1 / -1; min-height: 1.3rem; line-height: 1.5; }
.hero--immersive .hero__claim,
.hero--immersive .introcap,
.hero--immersive .grabcue {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #d6e3ee;
  font-family: var(--font-ja-sans);
  font-size: .875rem;
  line-height: 1.5;
  letter-spacing: .025em;
  text-align: center;
  text-shadow: none;
  transform: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
:root[data-lang="en"] .hero--immersive .hero__claim,
:root[data-lang="en"] .hero--immersive .introcap,
:root[data-lang="en"] .hero--immersive .grabcue { font-family: var(--font-en-sans); font-size: .875rem; }
/* Override the legacy day-hero is-on transform, including the initial state. */
.hero--immersive .hero__claim.is-on { opacity: 0; transform: none; }
.hero--immersive.has-place-claim .hero__claim.is-on,
.hero--immersive .introcap.is-on,
.hero--immersive .grabcue.is-armed { opacity: 1; transform: none; animation: none; }
.hero--immersive .grabcue > span:first-child { margin-right: .55rem; }
.hero--immersive.has-place-claim .grabcue { visibility: hidden; }
.hero-provenance {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .25rem 1rem;
  padding-top: .55rem;
  border-top: 1px solid rgba(221, 235, 248, .13);
  font-size: .75rem;
  line-height: 1.4;
  color: #aebfce;
}
.hero-provenance a { flex: 0 1 auto; text-decoration: underline; text-decoration-color: rgba(174, 191, 206, .45); text-underline-offset: 3px; }
.hero-provenance a:hover { color: #fff; }
.hero--immersive .hero__scroll { left: var(--gutter); bottom: 1.7rem; font-size: .75rem; gap: .4rem; }
.hero--immersive .hero__scroll i { width: 1.5rem; }
@media (max-width: 1220px) { .hero--immersive .hero__scroll { display: none; } }

/* Scenery mode always keeps pause and an explicit way back in the frame. */
.hero--immersive.is-scenery .hero-explorer { width: auto; max-width: calc(100% - 1.5rem); padding: .65rem .8rem; gap: .45rem; }
.hero--immersive.is-scenery .hero-explorer__readout,
.hero--immersive.is-scenery .hero-explorer__caption,
.hero--immersive.is-scenery #btnHome,
.hero--immersive.is-scenery #heroVisit,
.hero--immersive.is-scenery .hero__scroll { display: none; }
.hero--immersive.is-scenery .hero-explorer__actions { grid-column: 1 / -1; justify-content: center; }
.hero--immersive.is-scenery .hero-provenance { max-width: 27rem; flex-wrap: wrap; gap: .2rem .6rem; padding-top: .4rem; text-align: center; }
.hero--immersive.is-scenery .hero-provenance a { display: none; }
.hero--immersive.is-fallback .hero-explorer { display: none; }
.hero-fallback { position: absolute; z-index: 6; inset: auto 1rem 1.5rem; margin: 0; text-align: center; font-size: .875rem; color: #eef5fb; text-shadow: 0 1px 5px #173047; }

@media (max-width: 960px) {
  .hero--immersive.hero--day { min-height: 620px; }
  .hero--immersive .hero__copy { top: 5.8rem; max-width: min(34rem, calc(100% - 2 * var(--gutter))); }
  .hero--immersive .hero__title { font-size: clamp(2.5rem, 6.8vw, 4.3rem); }
  :root[data-lang="en"] .hero--immersive .hero__title { font-size: clamp(2.8rem, 6.8vw, 4.5rem); }
  .hero-explorer { width: calc(100% - 2rem); gap: .65rem .9rem; padding: .85rem 1rem .7rem; }
  .hero-explorer__readout { gap: .65rem; }
  .hero-place__choose span { max-width: 4rem; white-space: normal; line-height: 1.35; }
  .hero-control { padding-inline: .6rem; font-size: .875rem; gap: .4rem; }
  .hero-control--tour { min-width: 7.2rem; }
  .hero-provenance { font-size: .75rem; gap: .3rem .65rem; }
}
@media (max-width: 720px) {
  .hero--immersive .hero__copy { top: 5.5rem; left: 1.2rem; right: 1.2rem; max-width: none; }
  .hero--immersive .hero__eyebrow { font-size: .75rem; margin-bottom: .65rem; letter-spacing: .1em; }
  .hero--immersive .hero__title { font-size: clamp(2.1rem, 8.4vw, 3.5rem); line-height: 1.24; }
  :root[data-lang="en"] .hero--immersive .hero__title { max-width: 15ch; font-size: clamp(2.35rem, 8.8vw, 3.7rem); line-height: 1.05; }
  .hero--immersive .hero__lead { max-width: 27rem; margin-top: .7rem; font-size: .8rem; line-height: 1.7; }
  .hero-explorer { bottom: max(.75rem, env(safe-area-inset-bottom)); width: calc(100% - 1.5rem); grid-template-columns: minmax(0, 1fr); padding: .85rem .8rem .65rem; gap: .7rem; border-radius: 1rem; }
  .hero-explorer__readout { gap: .75rem; }
  .hero-compass { width: 40px; height: 40px; flex-basis: 40px; }
  .hero-compass span { font-size: .75rem; }
  .hero-place strong { font-size: .875rem; }
  .hero-place__eyebrow { font-size: .75rem; }
  .hero-place__bearing { font-size: .75rem; }
  .hero-place__choose { padding: .6rem .25rem .6rem .5rem; font-size: .875rem; }
  .hero-place__choose span { max-width: none; white-space: nowrap; }
  .hero-explorer__actions { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); gap: .4rem; }
  .hero-control { padding: .55rem .3rem; min-height: 44px; font-size: .875rem; gap: .3rem; }
  .hero-control--tour { min-width: 0; }
  .hero-control svg { width: 15px; height: 15px; }
  .hero-explorer__caption { display: block; min-height: 2.7rem; }
  .hero-provenance { flex-wrap: wrap; gap: .2rem .65rem; padding-top: .5rem; font-size: .75rem; text-align: center; }
  .hero-view { min-height: 44px; padding: .5rem .6rem; font-size: .875rem; }
  .hero--immersive.is-scenery .hero-explorer__actions { display: flex; }
  .hero--immersive.is-scenery .hero-control { padding-inline: .8rem; }
}
@media (max-width: 720px) and (max-height: 700px) {
  .hero--immersive.hero--day { min-height: 500px; }
  .hero--immersive .hero__copy { top: 5.2rem; }
  .hero--immersive .hero__lead { display: none; }
  .hero--immersive .hero__title { font-size: 2rem; }
  :root[data-lang="en"] .hero--immersive .hero__title { font-size: 2rem; }
}
@media (max-width: 360px) {
  .hero-place__choose span { max-width: 4.5rem; white-space: normal; }
  .hero-control svg { display: none; }
  .hero-control { white-space: normal; padding-inline: .25rem; }
  .hero-control span { min-width: 0; }
  .hero-control--visit { font-size: .8rem; white-space: nowrap; text-align: center; }
}
@media (max-width: 360px) and (max-height: 700px) {
  /* Keep the cone visible on short phones. Captions take only the height of
     the active message, while touch targets retain their full size. */
  .hero-place__eyebrow, .hero-place__bearing { display: none; }
  .hero-place__choose span { max-width: none; white-space: nowrap; }
  .hero-explorer__caption { display: grid; min-height: 1.3rem; }
  .hero--immersive .hero-explorer__caption > p { position: relative; inset: auto; grid-area: 1 / 1; }
  .hero--immersive .hero__claim:not(.is-on),
  .hero--immersive .introcap:not(.is-on),
  .hero--immersive .grabcue.is-gone { display: none; }
}
@media (max-height: 680px) and (min-width: 721px) {
  .hero--immersive.hero--day { min-height: 500px; }
  .hero--immersive .hero__copy { top: 5rem; }
  .hero--immersive .hero__eyebrow { margin-bottom: .55rem; }
  .hero--immersive .hero__title { font-size: 2.9rem; }
  :root[data-lang="en"] .hero--immersive .hero__title { font-size: 3rem; }
  .hero--immersive .hero__lead { font-size: .8rem; margin-top: .5rem; max-width: 23rem; }
  .hero-explorer { bottom: .65rem; padding: .7rem 1rem .6rem; gap: .5rem 1rem; }
  .hero-explorer__caption { display: none; }
}
@media (orientation: landscape) and (max-height: 480px) and (min-width: 721px) {
  /* A phone in landscape must not inherit the 500px desktop minimum and push
     its controls below the screen. Keep the mountain's lens and UI targets. */
  .hero--immersive.hero--day { min-height: 360px; }
  .hero--immersive .hero__copy { top: 4.35rem; max-width: 43vw; }
  .hero--immersive .hero__eyebrow,
  .hero--immersive .hero__lead { display: none; }
  .hero--immersive .hero__title { font-size: 1.8rem; line-height: 1.18; }
  :root[data-lang="en"] .hero--immersive .hero__title { font-size: 1.85rem; line-height: 1.04; max-width: none; }
  .hero-explorer { width: calc(100% - 1.5rem); bottom: max(.5rem, env(safe-area-inset-bottom)); padding: .6rem .8rem .5rem; gap: .4rem .9rem; }
  .hero-compass { width: 38px; height: 38px; flex-basis: 38px; }
  .hero-place { gap: .1rem; }
  .hero-place__eyebrow { white-space: nowrap; }
  .hero-place__bearing { display: none; }
  .hero-place__choose { padding-block: .4rem; }
  .hero-provenance { padding-top: .3rem; line-height: 1.35; }
  .hero-explorer__places { max-height: 11rem; overflow-y: auto; overscroll-behavior: contain; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--immersive .hero__copy,
  .hero--immersive .hero-explorer,
  .hero--immersive .hero__photo,
  .hero--immersive .hero__claim,
  .hero--immersive .introcap { transition-duration: .01ms; transition-delay: 0s; }
}