.hero-journey {
  grid-area: journey;
  position: relative;
  align-self: center;
  justify-self: end;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 5 / 6;
  margin: 0;
}

.journey-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.journey-rail { stroke: #51495f; stroke-width: 1.5; }
.journey-trace { stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 8 92; stroke-dashoffset: 8; opacity: 0; }
.journey-stops { fill: var(--ink); stroke: var(--paper); stroke-width: 4; }
.journey-stops circle:last-child { fill: var(--accent); }

.journey-list {
  position: relative;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.journey-list li { align-self: center; padding-left: 20%; }
.journey-list li:nth-child(even) { padding-left: 40%; }
.journey-list strong { display: block; color: #e4e2e9; font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 400; line-height: 1.1; letter-spacing: -.055em; }
.journey-list span { display: block; margin-top: 9px; color: #a2a0ad; font-size: .875rem; line-height: 1.4; }
.journey-list li:last-child strong { color: var(--accent); }

body.motion-enabled .journey-trace { animation: journey-travel 7s 1.2s linear infinite; }

@keyframes journey-travel {
  0% { stroke-dashoffset: 8; opacity: 0; }
  6%, 88% { opacity: 1; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}

@media (max-width: 760px) {
  .hero-journey { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .journey-trace { display: none; }
}