/* Scrolling route map: story on the left, a sticky map panel on the right.
   Below 900px the panel sticks to the top and the story scrolls under it. */
.journey { display: grid; grid-template-columns: minmax(0, 680px) minmax(0, 1fr); gap: 64px; max-width: 1440px; }
.journey .journey-text { margin: 0; max-width: 680px; }
.journey-panel { position: sticky; top: var(--head-h); align-self: start; height: calc(100vh - var(--head-h)); padding: 28px 0; display: flex; flex-direction: column; gap: 14px; }
.journey-head { display: flex; flex-direction: column; gap: 8px; min-height: 132px; }
.journey-head > * { transition: opacity 0.22s ease; }
.journey-head.swap > * { opacity: 0; }
.journey-date { align-self: flex-start; background: var(--ink); color: var(--paper); font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: 0.14em; padding: 6px 10px 5px; }
.journey-place { font-family: 'Archivo', sans-serif; font-weight: 900; text-transform: uppercase; font-size: 26px; line-height: 1; letter-spacing: -0.01em; word-spacing: 0.08em; }
.journey-status { font-style: italic; font-size: 18px; line-height: 1.35; }
.journey-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.16em; }
.journey-meta span:empty { display: none; }
.journey-map { flex: 1; min-height: 0; border: 1px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 5px; margin: 6px; }
.journey-map svg { display: block; width: 100%; height: 100%; }
.journey-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.journey-ticks { display: flex; gap: 4px; }
.journey-ticks i { width: 10px; height: 10px; border: 1px solid var(--ink); }
.journey-ticks i.on { background: var(--ink); }
.journey-credit { font-family: 'Archivo', sans-serif; font-size: 10px; letter-spacing: 0.16em; opacity: 0.7; margin-left: auto; }
.journey-note { font-family: 'Archivo', sans-serif; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }

/* Map drawing. Stroke widths and text sizes are set per frame by journey.js. */
.journey-panel .j-leg { fill: none; stroke: var(--ink); stroke-linecap: round; }
.journey-panel .j-ghost .j-leg { opacity: 0.2; }
.journey-panel .j-rail-halo { fill: none; stroke: var(--paper); opacity: 0.85; }
.journey-panel .j-rail-ties { fill: none; stroke: var(--ink); }
.journey-panel .j-pin circle { fill: var(--ink); stroke: var(--paper); }
.journey-panel .j-pin.j-context circle { fill: var(--paper); stroke: var(--ink); }
.journey-panel .j-pin text, .journey-panel .j-region { fill: var(--ink); stroke: var(--paper); paint-order: stroke; stroke-linejoin: round; }
.journey-panel .j-pin text { font-family: 'Archivo', sans-serif; font-weight: 700; letter-spacing: 0.08em; }
.journey-panel .j-region { font-family: 'Newsreader', serif; font-style: italic; letter-spacing: 0.14em; }
.journey-panel .j-here-ring { fill: none; stroke: var(--ink); animation: j-pulse 2.4s ease-in-out infinite; }
.journey-panel .j-here-dot { fill: var(--ink); }
@keyframes j-pulse { 50% { opacity: 0.25; } }
.journey-on .journey-panel .j-pin, .journey-on .journey-panel .j-region { opacity: 0; transition: opacity 1.2s ease; }
.journey-on .journey-panel .j-pin.reached, .journey-on .journey-panel .j-region.on { opacity: 1; }
.journey-panel.v-world .j-pin text, .journey-panel.v-atlantic .j-pin text { display: none; }
.journey-panel.v-world .j-pin.current text, .journey-panel.v-atlantic .j-pin.current text { display: inline; }
.journey-panel.v-world .j-pin.j-context, .journey-panel.v-atlantic .j-pin.j-context { display: none; }
@media (prefers-reduced-motion: reduce) { .journey-panel .j-here-ring { animation: none; } }

@media (max-width: 899px) {
  .journey { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .journey-panel { order: -1; z-index: 5; height: 44vh; padding: 10px 0 8px; gap: 6px; background: var(--paper); border-bottom: 1px solid var(--ink); }
  .journey-head { min-height: 0; gap: 4px; }
  .journey-place { font-size: 17px; }
  .journey-status { font-size: 14px; }
  .journey-meta { display: none; }
  .journey-map { margin: 0; outline: 0; }
  .journey-foot { display: none; }
  .journey .journey-text { padding-top: 40px; }
}