/* Shared historical-context timeline.
 *
 * Markup contract:
 * .historical-timeline
 *   .historical-timeline__item
 *     .historical-timeline__date
 *     .historical-timeline__line > .historical-timeline__dot
 *     .historical-timeline__copy > .historical-timeline__summary
 *
 * The summary uses the shared pretext renderer with a lead separator so the
 * title and explanation remain one justified text flow: "Title · Explanation".
 */

.historical-timeline {
  display: grid;
  gap: 18px;
  margin: 18px 0 0;
}

.historical-timeline__item {
  display: grid;
  grid-template-columns: clamp(78px, 10vw, 96px) 28px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.historical-timeline__date {
  margin: 0;
  padding-top: 1px;
  color: var(--color-timeline-text);
  font-size: var(--type-size-body-small-tight);
  font-weight: var(--type-weight-emphasis);
  letter-spacing: var(--type-tracking-label-medium);
  line-height: var(--type-line-compact);
  text-align: right;
  text-transform: uppercase;
}

.historical-timeline__line {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 100%;
}

.historical-timeline__line::before {
  content: "";
  position: absolute;
  top: 0.4rem;
  bottom: -18px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--color-timeline-line-start) 0%, var(--color-timeline-line-end) 100%);
}

.historical-timeline__item:last-child .historical-timeline__line::before {
  bottom: 0;
}

.historical-timeline__dot {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  margin-top: 0.28rem;
  border-radius: 999px;
  background: var(--color-timeline-dot);
  box-shadow: 0 0 0 4px var(--shadow-timeline-dot);
}

.historical-timeline__copy {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding-bottom: 8px;
}

.historical-timeline__summary {
  --pretext-prose-color: var(--color-text);
  --pretext-prose-line-height: var(--type-line-reading);
  --pretext-prose-max-width: 100%;
  margin: 0;
}

.historical-timeline__summary .pretext-prose-word--lead {
  color: var(--color-ink-strong);
  font-weight: var(--type-weight-bold);
}

.historical-timeline__summary .pretext-prose-word--separator {
  color: var(--color-timeline-dot);
  font-weight: var(--type-weight-body-strong);
}

.historical-timeline__copy > :not(.historical-timeline__summary) {
  margin: 0;
}

@media (max-width: 720px) {
  .historical-timeline__item {
    grid-template-columns: 66px 24px minmax(0, 1fr);
    gap: 12px;
  }

  .historical-timeline__date {
    font-size: var(--type-size-caption);
  }
}

@media (max-width: 450px) {
  /* The shared prose renderer switches its precomputed lines back to an
   * inline mobile flow. Preserve a real word boundary where two of those
   * line spans meet, otherwise the adjoining words can visually fuse. */
  .historical-timeline__summary .pretext-prose-line:not(:last-child)::after {
    content: " ";
  }
}