.pipeline { position: relative; height: 200vh; }

.pipeline__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* The sunrise, painted by js/sunrise.js. Clipped at the horizon, so the checklists below stay on the dark page. */
.pipeline__sky {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 54vh;
  overflow: hidden;
  pointer-events: none;
}
.pipeline__sun {
  display: block;
  width: 100%;
  height: 100%;
  opacity: .12;
  will-change: transform, opacity;
}

.pipeline__head {
  position: absolute;
  left: var(--gutter);
  top: var(--section-top);
}

.route, .route__lit {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 54vh;
  height: 1px;
}
.route { background: var(--hairline-strong); }
.route__lit { background: var(--text-primary); transform-origin: 0 50%; transform: scaleX(0); }

.stops { list-style: none; margin: 0; padding: 0; }

.stop__node {
  position: absolute;
  left: var(--x);
  top: 54vh;
  width: 0;
  height: 0;
}
.stop__ring, .stop__ring-lit, .stop__dot { position: absolute; border-radius: 50%; }
.stop__ring, .stop__ring-lit { left: -12px; top: -12px; width: 24px; height: 24px; }
.stop__ring { border: 1px solid var(--hairline-strong); background: var(--canvas); }
.stop__ring-lit { border: 1px solid var(--text-primary); }
.stop__dot { left: -4px; top: -4px; width: 8px; height: 8px; background: var(--text-primary); }

.stop__name {
  position: absolute;
  left: calc(var(--x) - 12px);
  bottom: calc(46vh + 36px);
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

.stop__body {
  position: absolute;
  left: calc(var(--x) - 12px);
  top: calc(54vh + 44px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.stop__time { display: flex; align-items: baseline; gap: 12px; }
.stop__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(56px, min(4.4vw, 7vh), 96px);
  line-height: 1;
}
.stop__unit { font-size: 20px; color: var(--text-secondary); }

.stop__checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 23vw;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.35;
  color: var(--text-secondary);
}
.stop__checks li { position: relative; padding-left: 24px; }
.stop__checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .2em;
  width: 14px;
  height: 14px;
  background: var(--text-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5 5.5 11 12 3.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5 5.5 11 12 3.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.stop__checks strong { font-weight: 500; color: var(--text-primary); }