/* One narrated-tour chapter, with a readable linear layout as its baseline. */
.lesson-journey {
  --tour-stage-height: 100svh;
  position: relative;
  isolation: isolate;
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, #0b111a, var(--bg) 72%);
}
.tour-mode-stage { padding-block: var(--panel-top) var(--panel-bottom); }
.tour-mode-inner { display: grid; gap: clamp(32px, 4.5vw, 64px); }
.tour-overview-copy { min-width: 0; max-width: 680px; }
.lesson-caption > .eyebrow { margin-bottom: 20px; }
.lesson-caption > p:not(.eyebrow) { max-width: 490px; margin-top: 24px; color: var(--muted); font-size: 17px; line-height: 1.65; text-wrap: pretty; }
.tour-mode-visuals { display: grid; justify-items: center; gap: clamp(36px, 5vw, 64px); min-width: 0; }
.tour-mode-scene { min-width: 0; width: 100%; }
.tour-map-frame { position: relative; width: min(100%, 600px); aspect-ratio: 1206 / 1170; }
.tour-map-image { width: 100%; height: 100%; object-fit: contain; border-radius: 20px; background: #000; }
.tour-map-frame > figcaption {
  position: absolute;
  right: 12px;
  bottom: 5px;
  max-width: 88%;
  color: #fff;
  font-size: 8px;
  font-weight: 400;
  line-height: 1.3;
  text-align: right;
  -webkit-text-stroke: 2px #000;
  paint-order: stroke fill;
  text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000;
}
.tour-map-frame > figcaption a { text-decoration: underline; text-underline-offset: 2px; }
.lesson-artwork { position: relative; max-width: 940px; }
.lesson-diagram { position: relative; display: block; width: 100%; aspect-ratio: 1200 / 640; }
.lesson-artwork .lesson-diagram > img { width: 100%; height: 100%; object-fit: contain; }
.lesson-artwork .lesson-diagram > .lottie-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; opacity: 0; pointer-events: none; }
.lesson-artwork .lottie-canvas > svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.lesson-artwork.is-lottie-ready .lesson-diagram > img { opacity: 0; }
.lesson-artwork.is-lottie-ready .lesson-diagram > .lottie-canvas { opacity: 1; }

/* JavaScript opts in only when the complete copy and visual fit the viewport. */
.tour-mode--enhanced { height: 230svh; }
.tour-mode--enhanced .tour-mode-stage { position: sticky; top: 0; height: var(--tour-stage-height); padding-block: calc(var(--home-header-height) + 32px) 40px; overflow: clip; }
.tour-mode--enhanced .tour-mode-inner { height: 100%; min-height: 0; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; column-gap: clamp(32px, 5vw, 72px); }
.tour-mode--enhanced .tour-mode-visuals { position: relative; width: 100%; height: 100%; min-height: 0; container-type: size; }
.tour-mode--enhanced .tour-mode-scene {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: var(--tour-scene-opacity, 0);
  transform: translate3d(0, var(--tour-scene-y, 0px), 0) scale(var(--tour-scene-scale, 1));
  transform-origin: center;
  pointer-events: none;
  will-change: transform, opacity;
}
.tour-mode--enhanced .tour-mode-scene.is-current { pointer-events: auto; }
.tour-mode--enhanced .tour-mode-scene--mars { width: min(100%, 103.077cqh); height: min(100%, 97.015cqw); max-width: none; }
.tour-mode--enhanced .tour-mode-scene--explanation { display: flex; flex-direction: column; justify-content: center; height: 100%; }

@media (max-width: 900px) {
  .tour-overview-copy { max-width: 620px; }
  .lesson-caption > p:not(.eyebrow) { max-width: 560px; font-size: 16px; }
  .tour-mode--enhanced .tour-mode-stage { padding-block: calc(var(--home-header-height) + 24px) 28px; }
  .tour-mode--enhanced .tour-mode-inner { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: start; gap: 28px; }
  .tour-mode--enhanced .tour-mode-visuals { max-width: 660px; margin-inline: auto; }
}
@media (max-width: 600px) {
  .lesson-journey { --tour-stage-height: 100dvh; }
  .tour-mode-stage { padding-block: calc(var(--home-header-height) + 24px) 40px; }
  .lesson-caption > .eyebrow { margin-bottom: 14px; font-size: 10px; letter-spacing: 1.3px; }
  .lesson-caption > h2 { font-size: clamp(36px, 9.8vw, 43px); letter-spacing: -.05em; }
  .lesson-caption > p:not(.eyebrow) { margin-top: 18px; font-size: 15px; line-height: 1.6; }
  .tour-map-image { border-radius: 16px; }
  .tour-map-frame > figcaption { right: 9px; bottom: 4px; font-size: 8px; }
  .tour-mode--enhanced { height: 230dvh; }
  .tour-mode--enhanced .tour-mode-stage { padding-block: calc(var(--home-header-height) + 20px) max(24px, env(safe-area-inset-bottom)); }
  .tour-mode--enhanced .tour-mode-inner { gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-mode--enhanced { height: auto; }
  .tour-mode--enhanced .tour-mode-stage { position: relative; height: auto; }
  .tour-mode--enhanced .tour-mode-inner { height: auto; grid-template-columns: 1fr; grid-template-rows: auto; }
  .tour-mode--enhanced .tour-mode-visuals { height: auto; container-type: normal; gap: 36px; }
  .tour-mode--enhanced .tour-mode-scene { position: relative; inset: auto; width: 100%; height: auto; opacity: 1; transform: none; pointer-events: auto; will-change: auto; }
  .tour-mode--enhanced .tour-mode-scene--mars { max-width: 600px; }
}