/* Roadmap page. Uses tokens from styles.css. Only transform/opacity animate (plus the line height, set by scroll position). */
.journey { padding-top: 24px; }
.jr { position: relative; --vcol: 0px; }
.jr-line { position: absolute; left: 11px; top: 19px; bottom: 160px; width: 2px; margin: 0; list-style: none;
  background: repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 12px); }
.jr-fill { position: absolute; left: 0; top: 0; width: 2px; height: var(--now-h, 360px); background: var(--amber); border-radius: 2px; }
.jr.is-live .jr-fill { height: 0; }

.jr-stop { position: relative; display: grid; grid-template-columns: 24px 1fr; grid-template-areas: "rail ver" "rail body"; column-gap: 20px; padding-bottom: 56px; }
.jr-ver { grid-area: ver; font-weight: 640; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; font-size: 1.5rem; padding-bottom: 8px; }
.jr-rail { grid-area: rail; position: relative; }
.jr-rail::before { content: ""; position: absolute; left: 4px; top: 12px; width: 16px; height: 16px; border-radius: 50%; background: var(--ground); box-shadow: inset 0 0 0 2px var(--line); }
.jr-body { grid-area: body; min-width: 0; }
.jr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 8px; }
.jr-name { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.012em; }
.jr-title { font-size: clamp(1.875rem, 1.2rem + 2.8vw, 3rem); line-height: 1.1; letter-spacing: -0.028em; max-width: 18ch; }

/* shipped: compact, checked */
.is-done .jr-rail::before { background: var(--text); box-shadow: none; }
.is-done .jr-rail::after { content: ""; position: absolute; left: 8px; top: 17px; width: 8px; height: 4.5px; border-left: 2px solid var(--ground); border-bottom: 2px solid var(--ground); transform: rotate(-45deg); }
.is-done .jr-ver { font-size: 1.25rem; color: var(--quiet); }
.jr-cols { font-size: .9375rem; gap: 2px; }
.jr-aside { margin-top: 16px; max-width: 56ch; }

/* now */
.is-now { padding-bottom: 72px; }
.is-now .jr-ver { color: var(--amber-ink); font-size: 1.25rem; }
.is-now .jr-rail::before { left: 0; top: 8px; width: 24px; height: 24px; background: var(--amber); box-shadow: 0 0 0 6px color-mix(in srgb, var(--amber) 22%, transparent); animation: here 2.4s var(--ease-standard) 3; }
@keyframes here { 0%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--amber) 22%, transparent); } 60% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--amber) 0%, transparent); } }
.jr-here { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.5rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 640; margin-bottom: 12px; }

/* next: the most room */
.is-next { padding-bottom: 104px; }
.is-next .jr-ver { font-size: clamp(3.5rem, 2rem + 8vw, 6.5rem); letter-spacing: -0.05em; padding-bottom: 16px; }
.is-next .jr-rail::before { background: var(--amber); box-shadow: none; }
.is-next .jr-head { margin-bottom: 16px; }
.is-next .jr-title { margin-bottom: 40px; }
.jr-items { display: grid; gap: 32px; }
.jr-items h3 { font-size: 1.125rem; margin-bottom: 6px; }
.jr-items p { color: var(--quiet); font-size: 1rem; max-width: 38ch; }
.jr-items > div { padding-top: 20px; border-top: 1px solid var(--line); }

/* coming: progressively quieter */
.is-soon .jr-ver { font-size: 2.25rem; color: var(--text); }
.is-soon .jr-name { font-size: 1.5rem; }
.is-soon { padding-bottom: 80px; }
.jr-promise { color: var(--text); max-width: 52ch; margin-bottom: 12px; }
.jr-list { display: grid; gap: 8px; color: var(--quiet); max-width: 52ch; }
.jr-list li { position: relative; padding-left: 20px; }
.jr-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 2px; background: var(--line); }
.jr-list strong { color: var(--text); font-weight: 600; }
.is-far { padding-bottom: 40px; }
.is-far .jr-ver { font-size: 1.25rem; color: var(--quiet); }
.is-far .jr-name { font-size: 1.0625rem; }
.is-far p { font-size: .9375rem; max-width: 56ch; }
.is-launch { padding-top: 24px; padding-bottom: 0; }
.is-launch .jr-ver { font-size: clamp(3.5rem, 2rem + 8vw, 6.5rem); letter-spacing: -0.05em; padding-bottom: 12px; }
.is-launch .jr-title { margin-bottom: 16px; }
.is-launch .jr-rail::before { background: var(--ground); box-shadow: inset 0 0 0 3px var(--text); }

/* tracks, order, close */
.track-grid { margin-top: 56px; gap: 40px; }
.track { background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; display: grid; gap: 16px; align-content: start; }
.track .tag { justify-self: start; }
.track h3 { font-size: 1.5rem; }
.close h2 { max-width: 20ch; }
.close .lede { margin-top: 24px; }
.close .actions { margin-top: 40px; }

@media (min-width: 800px) {
  .jr { --vcol: 168px; }
  .jr-line { left: calc(var(--vcol) + 32px - 1px + 0px); }
  .jr-stop { grid-template-columns: var(--vcol) 24px 1fr; grid-template-areas: "ver rail body"; column-gap: 32px; }
  .jr-ver { text-align: right; padding-bottom: 0; padding-top: 0; font-size: 1.75rem; line-height: 1; }
  .jr-rail { align-self: stretch; }
  .jr-line { left: calc(var(--vcol) + 32px + 11px); }
  .is-done .jr-ver, .is-now .jr-ver, .is-far .jr-ver { font-size: 1.375rem; padding-top: 3px; }
  .is-soon .jr-ver { font-size: 2.5rem; }
  .is-next .jr-ver, .is-launch .jr-ver { padding-top: 0; line-height: .9; }
  .jr-items { grid-template-columns: 1fr 1fr; gap: 40px 48px; }
  .is-next .jr-rail::before, .is-launch .jr-title { margin-bottom: 16px; }
.is-launch .jr-rail::before { top: 12px; }
  .jr-cols { grid-template-columns: repeat(2, minmax(0, 28ch)); column-gap: 32px; }
  .is-done { }
  .jr-stop .jr-body { position: relative; }
  .track { padding: 40px; }
}
@media (min-width: 1000px) { .jr-stop { padding-right: 0; } }

@media (prefers-reduced-motion: reduce) {
  .is-now .jr-rail::before { animation: none; }
}