/* The footer is a route map: each station remains a normal link without JavaScript. */
.journey-footer { --route-stop: 0; background: #081b38; color: #f4f7ff; padding: 18px 0 0; position: relative; border-top: 0; }
.journey-footer a:hover { color: #ffad62; }
.journey-footer :focus-visible { outline-color: #ffad62; }
.journey-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 12px; color: #b7c9e6; }
.journey-topline > span { display: flex; align-items: center; gap: 10px; }
.journey-topline i { width: 7px; height: 7px; border-radius: 50%; background: #ff8319; box-shadow: 0 0 0 5px #ff831919; }
.journey-topline a { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.journey-topline a span { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #385070; border-radius: 50%; }
.journey-intro { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; padding: 22px 0 12px; align-items: center; }
.journey-intro h2 { font-size: clamp(32px,3.8vw,46px); line-height: 1.25; letter-spacing: -1px; margin-top: 0; }
.journey-intro h2 em { font-style: normal; color: #ff9438; }
.journey-message { border-inline-start: 1px solid #314564; padding-inline-start: 24px; min-height: 160px; display: flex; flex-direction: column; justify-content: center; }
.journey-coordinate { font: 11px/1.5 ui-monospace,monospace; letter-spacing: 2px; color: #ffad62; align-self: flex-start; }
.journey-message h3 { font-size: 22px; margin: 10px 0 6px; }
.journey-message p { color: #b7c9e6; font-size: 14px; max-width: 450px; line-height: 1.85; min-height: 78px; }
.journey-route { height: 65px; position: relative; margin-top: 8px; }
.journey-road { position: absolute; height: 30px; bottom: 0; width: 100%; border-block: 1px solid #3a5072; background: #10294b; }
.journey-road span { position: absolute; inset: 13px 0 auto; height: 2px; background: repeating-linear-gradient(90deg,#b7c9e677 0 22px,transparent 22px 44px); }
.journey-car { position: absolute; width: 100px; bottom: 13px; right: calc(12.5% - 50px + var(--route-stop) * 25%); transition: right .8s cubic-bezier(.22,.8,.3,1); z-index: 1; filter: drop-shadow(0 7px 8px #0005); }
.journey-car svg { width: 100%; }
.journey-road-label { position: absolute; top: 1px; left: 0; font: 10px ui-monospace,monospace; letter-spacing: 2px; color: #8ba3c4; }
.journey-stations { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.journey-station { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 94px; padding: 20px 14px; border-inline-start: 1px solid #314564; border-bottom: 1px solid #314564; transition: background .2s; }
.journey-station:last-child { border-inline-end: 1px solid #314564; }
.journey-station::before { content: ''; position: absolute; top: -6px; right: calc(50% - 5px); width: 10px; height: 10px; border: 2px solid #91a9ca; border-radius: 50%; background: #081b38; }
.journey-station.is-current { background: #142f53; }
.journey-station.is-current::before { background: #ff9438; border-color: #ff9438; box-shadow: 0 0 0 5px #ff943826; }
.journey-station > .icon { width: 26px; height: 26px; color: #ffad62; }
.journey-station h3 { font-size: 17px; color: #f4f7ff; }
.station-arrow { color: #b7c9e6; font-size: 17px; }
.journey-station:hover, .journey-station:focus-visible { background: #18385e; }
.journey-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; }
.journey-copyright { color: #9db2d1; font-size: 12px; white-space: nowrap; }
.journey-bottom nav { display: flex; flex-wrap: nowrap; align-items: center; gap: 22px; min-width: 0; overflow-x: auto; padding: 5px; color: #b7c9e6; font-size: 12px; scrollbar-width: thin; }
.journey-bottom nav a { white-space: nowrap; flex-shrink: 0; padding-block: 6px; }
@media(max-width:760px) {
    .journey-intro { grid-template-columns: 1fr; gap: 16px; padding: 18px 0 8px; }
    .journey-intro h2 { font-size: 32px; }
    .journey-intro h2 br { display: none; }
    .journey-intro h2 em::before { content: ' '; }
    .journey-message { min-height: 0; padding-inline-start: 16px; }
    .journey-message h3 { font-size: 18px; }
    .journey-message p { min-height: 78px; font-size: 13px; }
    .journey-coordinate { font-size: 10px; }
    .journey-stations { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .journey-station { padding: 12px 10px; min-height: 66px; gap: 8px; }
    .journey-station:nth-child(2) { border-inline-end: 1px solid #314564; }
    .journey-station::before { display: none; }
    .journey-station h3 { font-size: 14px; }
    .journey-station > .icon { width: 22px; height: 22px; }
    .station-arrow { display: none; }
    .journey-car { width: 80px; right: calc(12.5% - 40px + var(--route-stop) * 25%); }
    .journey-route { height: 50px; }
    .journey-road-label { font-size: 9px; }
    .journey-bottom { flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 0; }
    .journey-bottom nav { gap: 12px; font-size: 11px; }
    .journey-copyright { font-size: 11px; }
}
@media(prefers-reduced-motion:reduce) {
    .journey-car, .journey-station { transition: none; }
}

/* A shallow road bend replaces the straight divider, within the existing section gap. */
.journey-edge { position: absolute; inset: -46px 0 auto; height: 48px; overflow: hidden; pointer-events: none; }
.journey-edge svg { width: 100%; height: 100%; display: block; }
.journey-edge-line { stroke: #f58b39; stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .65; }
.journey-edge-trail { stroke: #ffc887; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 80 920; stroke-dashoffset: -920; opacity: 0; filter: drop-shadow(0 0 4px #ff8319); }
.journey-edge.is-arriving .journey-edge-trail { animation: journey-arrival 2.8s ease-in-out both; }
@keyframes journey-arrival {
    0% { stroke-dashoffset: -920; opacity: 0; }
    12% { opacity: 1; }
    85% { opacity: 1; }
    100% { stroke-dashoffset: 80; opacity: 0; }
}
@media(max-width:760px) {
    .journey-edge { top: -28px; height: 30px; }
}
@media(prefers-reduced-motion:reduce) {
    .journey-edge.is-arriving .journey-edge-trail { animation: none; }
}