/* This transparent section shares the existing fixed .cosmic-space. */
.nebula-journey {
  position: relative;
  z-index: 3;
  color: #edf0f2;
  font: 400 14px/1.5 Archivo, "Helvetica Neue", Arial, sans-serif;
  scroll-margin-top: 100px;
}
.nebula-journey * { box-sizing: border-box; }
.nebula-journey [hidden] { display: none !important; }
.nebula-journey a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.nebula-journey a:focus-visible { outline: 2px solid #c4e1f7; outline-offset: 5px; }
.nebula-journey h2:focus { outline: none; }
.nebula-journey .nebula-stage { position: relative; }
.nebula-journey .nebula-hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 28px;
  padding: 100px 7% 90px;
}
/* One word in the serif italic, the same in the static list (reduced motion) as over the constellation. */
.nebula-journey .nebula-hub__heading {
  grid-column: 1 / -1;
  margin: 0 0 26px;
  color: #f3f4f6;
  font: italic 400 clamp(40px, 3.75vw, 60px)/1.2 "Instrument Serif", Georgia, serif;
  letter-spacing: -.025em;
  --heading-shadow: 0 2px 24px #02050a80;
  text-shadow: var(--heading-shadow);
}
.nebula-journey .nebula-destination {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 74px;
  padding: 12px;
  color: #e2e8ee;
}
.nebula-journey .nebula-star {
  flex: none;
  position: relative;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff9ee;
  box-shadow: 0 0 9px 2px #dfebff98, 0 0 34px 10px #73a5e555;
  transition: box-shadow 300ms ease;
}
.nebula-journey .nebula-star::before,
.nebula-journey .nebula-star::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 27px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #eaf6ffc9, transparent);
}
.nebula-journey .nebula-star::after { transform: translate(-50%, -50%) rotate(90deg); width: 19px; opacity: .7; }
.nebula-journey .nebula-destination strong { font-size: 18px; font-weight: 400; letter-spacing: -.03em; white-space: nowrap; text-shadow: 0 1px 9px #000; }
.nebula-journey .nebula-destination em { display: block; margin-top: 7px; color: #bec9d3; font-size: 11px; font-style: normal; line-height: 1.5; }
.nebula-journey .nebula-destination:hover .nebula-star,
.nebula-journey .nebula-destination:focus-visible .nebula-star { box-shadow: 0 0 12px 4px #dfebffd9, 0 0 60px 22px #73a5e56b; }
.nebula-journey .nebula-arrival {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 75svh;
  padding: 70px 10% 90px;
  scroll-margin-top: 80px;
}
.nebula-journey .nebula-arrival__content { width: 100%; margin: auto 0; }
.nebula-journey .nebula-overline { margin: 0 0 24px; color: #a5bed2; font-size: 10px; letter-spacing: .19em; text-transform: uppercase; }
.nebula-journey .nebula-arrival h2 { max-width: 860px; margin: 0; color: #ebedf0; font-size: clamp(36px, 6.3vw, 71px); font-weight: 400; line-height: 1.08; letter-spacing: -.055em; text-shadow: 0 2px 25px #02060b55; }
.nebula-journey .nebula-arrival h2 em { color: #b9cee2; font-family: "Instrument Serif", Georgia, serif; font-weight: 400; letter-spacing: -.022em; }
.nebula-journey .nebula-description { max-width: 520px; margin: 27px 0 32px; color: #b7c2cc; font-size: clamp(15px, 1.7vw, 18px); line-height: 1.65; }
.nebula-journey .nebula-topics { display: flex; flex-wrap: wrap; gap: 0 26px; width: fit-content; max-width: 680px; margin: 0; padding: 10px 0 0; border-top: 1px solid #bddaf626; list-style: none; color: #d0dae3; font-size: 12px; }
.nebula-journey .nebula-topics a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 5px; }
.nebula-journey .nebula-topics a:hover { color: #fff; text-decoration: underline; text-decoration-color: #bddaf680; }
.nebula-journey .nebula-back { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; min-height: 44px; margin-bottom: 30px; color: #bbc8d4; font-size: 12px; }
.nebula-journey .nebula-back:hover { color: #fff; }

/* The controller adds is-enhanced only once ready. Before activation, the fixed
   stage and every focusable descendant stay hidden even on slow startup. */
.nebula-journey.is-enhanced { min-height: var(--nebula-height, 310svh); margin-top: calc(-1 * var(--viewport-height, 100svh)); }
.nebula-journey.is-enhanced .nebula-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.nebula-journey.is-enhanced.is-active .nebula-stage { opacity: 1; visibility: visible; }
.nebula-journey.is-enhanced .nebula-hub {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  opacity: calc(var(--hub-opacity, 0) * var(--constellation-stars, 0));
  pointer-events: none;
}
/* Stars arrive as part of the camera approach; names resolve near the end.
   The star itself is the coordinate anchor, so descriptions never shift it. */
.nebula-journey.is-enhanced .nebula-hub__heading {
  position: absolute; top: clamp(110px, 15.5vh, 150px); left: 50%;
  width: max-content; max-width: calc(100% - 40px); margin: 0;
  transform: translateX(-50%); text-align: center;
}
/* While the word writes itself in (nebula-navigation.js), an aria-hidden copy of each letter, laid exactly over the
   real text, does the moving, then cross-fades into the real text and goes. The copy casts one shadow for the whole
   word, as the text does (a shadow per letter would fall on its neighbour and dim it). The two are added rather than
   laid over each other while they cross (plus-lighter, inside the heading's own group), so the word never dims. */
.nebula-heading__glyphs { position: absolute; inset: 0; pointer-events: none; display: none; filter: drop-shadow(var(--heading-shadow)); }
.nebula-heading__glyph { position: absolute; display: block; white-space: pre; letter-spacing: 0; text-shadow: none; }
.nebula-journey.is-enhanced .nebula-hub__heading[data-reveal-state="hidden"] { visibility: hidden; }
.nebula-journey.is-enhanced .nebula-hub__heading[data-reveal-state="revealing"] { isolation: isolate; }
.nebula-journey.is-enhanced .nebula-hub__heading[data-reveal-state="revealing"] .nebula-heading__text { opacity: 0; }
.nebula-journey.is-enhanced .nebula-hub__heading[data-reveal-state="revealing"] .nebula-heading__glyphs { display: block; }
@supports (mix-blend-mode: plus-lighter) {
  .nebula-journey.is-enhanced .nebula-hub__heading[data-reveal-state="revealing"] :is(.nebula-heading__text, .nebula-heading__glyphs) { mix-blend-mode: plus-lighter; }
}
.nebula-journey.is-enhanced .nebula-destination {
  --destination-focus: 1;
  position: absolute;
  left: var(--destination-x); top: var(--destination-y);
  display: block; width: 220px; height: 110px; min-height: 0;
  padding: 0; transform: translate(-50%, -22px);
  opacity: var(--destination-focus);
  transition: opacity 280ms ease;
}
.nebula-journey.is-enhanced .nebula-destination::before {
  content: ""; position: absolute; pointer-events: none;
  width: 260px; height: 154px; left: 50%; top: 22px;
  transform: translate(-50%, -50%) rotate(var(--cloud-angle));
  background: radial-gradient(ellipse at 43% 52%, rgb(var(--star-tint) / .17), transparent 62%),
              radial-gradient(ellipse at 61% 42%, rgb(var(--star-tint) / .09), transparent 65%);
  opacity: .55; transition: opacity 350ms ease;
}
.nebula-journey.is-enhanced .nebula-star {
  position: absolute; left: 50%; top: 22px;
  transform: translate(-50%, -50%) scale(var(--star-scale));
  width: 4px; height: 4px;
  box-shadow: 0 0 8px 2px #e5ecff99, 0 0 24px 6px rgb(var(--star-tint) / .35);
}
.nebula-journey.is-enhanced .nebula-star::before { width: 23px; }
.nebula-journey.is-enhanced .nebula-star::after { width: 16px; }
/* Wide screens: every star 10% larger, its glow and four points with it. It grows about its own centre, so the
   names and the positions stay where they were. */
@media (min-width: 1000px) {
  .nebula-journey .nebula-star { transform: scale(1.1); }
  .nebula-journey.is-enhanced .nebula-star { transform: translate(-50%, -50%) scale(calc(var(--star-scale) * 1.1)); }
}
.nebula-journey.is-enhanced .nebula-destination > span:last-child {
  position: absolute; top: 43px; left: 50%; width: 240px;
  transform: translateX(-50%); text-align: center;
  opacity: var(--constellation-labels, 0);
}
.nebula-journey.is-enhanced .nebula-destination strong {
  display: block; font: 300 clamp(16px, 1.35vw, 21px)/1.4 Sora, Archivo, sans-serif;
  letter-spacing: -.035em; color: #d4dde5;
  text-shadow: 0 2px 12px #000; transition: color 250ms ease;
}
.nebula-journey.is-enhanced .nebula-destination em {
  position: absolute; top: 100%; left: 50%; width: 230px;
  transform: translateX(-50%); margin-top: 9px;
  font-size: 12px; color: #d0d9e0; opacity: 0;
  transition: opacity 250ms ease; pointer-events: none;
}
.nebula-journey.is-enhanced .nebula-destination:is(:hover, :focus-visible) strong { color: #f2f4f7; }
.nebula-journey.is-enhanced .nebula-destination:focus-visible { outline: none; }
.nebula-journey.is-enhanced .nebula-destination:focus-visible strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.nebula-journey.is-enhanced .nebula-destination:is(:hover, :focus-visible) em { opacity: 1; }
.nebula-journey.is-enhanced .nebula-destination:is(:hover, :focus-visible)::before { opacity: 1; }
.nebula-journey.is-enhanced .nebula-destination:is(:hover, :focus-visible) .nebula-star {
  box-shadow: 0 0 10px 3px #e5ecffce, 0 0 34px 10px rgb(var(--star-tint) / .50);
}
.nebula-journey.is-enhanced .nebula-hub:has(.nebula-destination:focus-visible) .nebula-destination:not(:focus-visible) { --destination-focus: .46; }
@media (hover: hover) {
  .nebula-journey.is-enhanced .nebula-hub:has(.nebula-destination:hover) .nebula-destination:not(:hover):not(:focus-visible) { --destination-focus: .46; }
}
.nebula-journey.is-enhanced .nebula-arrival {
  position: absolute;
  inset: 0;
  min-height: 0;
  padding: 175px 10% 90px;
  overflow: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  scrollbar-width: thin;
  scrollbar-color: #bddaf640 transparent;
}
.nebula-journey.is-enhanced.is-active .nebula-arrival.is-active { opacity: var(--arrival-opacity, 0); visibility: visible; }
.nebula-journey.is-enhanced .nebula-arrival__content { transform: scale(var(--arrival-scale, 1)); transform-origin: left center; }
.nebula-journey.is-enhanced .nebula-back { position: absolute; top: 104px; left: 5%; margin: 0; }
.nebula-journey.is-enhanced.is-active[data-view="hub"] .nebula-hub,
.nebula-journey.is-enhanced.is-active[data-view="arrival"] .nebula-arrival.is-active { pointer-events: auto; }

@media (max-width: 620px) {
  .nebula-journey .nebula-hub { grid-template-columns: 1fr; gap: 14px; padding: 90px 8% 55px; }
  .nebula-journey .nebula-hub__heading { font-size: 41px; }
  .nebula-journey .nebula-destination { gap: 14px; }
  .nebula-journey .nebula-destination strong { font-size: 16px; }
  .nebula-journey .nebula-arrival { padding: 60px 8% 70px; }
  .nebula-journey .nebula-arrival h2 { font-size: 43px; }
  .nebula-journey .nebula-description { font-size: 15px; }
  .nebula-journey .nebula-topics { flex-direction: column; gap: 0; }
  .nebula-journey.is-enhanced .nebula-hub__heading { top: 100px; left: 50%; }
  .nebula-journey.is-enhanced .nebula-destination { left: var(--destination-mobile-x); top: var(--destination-mobile-y); width: 154px; height: 94px; }
  .nebula-journey.is-enhanced .nebula-destination > span:last-child { width: 170px; }
  .nebula-journey.is-enhanced .nebula-destination strong { font-size: 14px; white-space: normal; }
  .nebula-journey.is-enhanced .nebula-destination em { display: none; }
  .nebula-journey.is-enhanced .nebula-destination::before { width: 190px; height: 120px; }
  .nebula-journey.is-enhanced .nebula-arrival { padding: 152px 8% max(42px, env(safe-area-inset-bottom)); }
  .nebula-journey.is-enhanced .nebula-back { top: 90px; left: 8%; }
}

@media (max-height: 600px) and (min-width: 621px) {
  .nebula-journey.is-enhanced .nebula-hub__heading { top: 88px; font-size: 37px; }
  .nebula-journey.is-enhanced .nebula-arrival { padding-top: 145px; padding-bottom: 36px; }
  .nebula-journey.is-enhanced .nebula-back { top: 86px; }
  .nebula-journey .nebula-overline { margin-bottom: 14px; }
  .nebula-journey .nebula-arrival h2 { font-size: 48px; }
  .nebula-journey .nebula-description { margin: 18px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nebula-journey *, .nebula-journey *::before, .nebula-journey *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .nebula-journey.is-enhanced .nebula-arrival__content { transform: none; }
}