/* Kejsersnit: the centrepiece is time. A line with a beginning (6 to 8 weeks)
   and no end, because there is no window that closes. */

.ks-story .prose h2 { margin-bottom: 22px; }
.ks-research { margin-top: 40px; }
.ks-quote { padding-top: clamp(40px, 5vw, 72px); }

.timeline { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); margin: 44px 0 48px; padding: 44px 0 0; list-style: none; }
/* the line starts at the first stop and fades out past the edge: no end date */
.timeline::before { content: ''; position: absolute; left: 8px; right: calc(-1 * var(--wrap)); top: 7px; height: 2px; background: linear-gradient(90deg, var(--ember) 0%, var(--ember) 62%, rgba(227, 161, 90, 0) 100%); }
.timeline li { position: relative; }
.timeline li::before { content: ''; position: absolute; left: 0; top: -44px; width: 16px; height: 16px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 6px rgba(227, 161, 90, .16); }
.timeline li:nth-child(2)::before { background: var(--esp-1); box-shadow: inset 0 0 0 2px var(--ember), 0 0 0 6px rgba(227, 161, 90, .1); }
.timeline li:last-child::before { background: transparent; box-shadow: inset 0 0 0 2px rgba(227, 161, 90, .6); }
.tl-when { display: block; font-family: var(--serif); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; color: var(--ember-hi); }
.timeline h3 { margin-top: 14px; font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.2; }
.timeline p { margin-top: 8px; color: var(--cream-2); }

@media (max-width: 860px) {
  .timeline { grid-template-columns: 1fr; gap: 34px; padding: 0 0 0 40px; }
  .timeline::before { left: 7px; right: auto; top: 10px; bottom: -40px; width: 2px; height: auto; background: linear-gradient(180deg, var(--ember) 0%, var(--ember) 60%, rgba(227, 161, 90, 0) 100%); }
  .timeline li::before { left: -40px; top: 10px; }
}