/* Six yearly chapters, with an independent two-second playback control. */
.timeline-heading { align-items: center; min-height: 5.25rem; }
.timeline-playback-controls { display: flex; align-items: center; gap: 1rem; }
#timeline-playback-status { font-size: var(--type-label); letter-spacing: .015em; }
#timeline-playback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.75rem;
  min-width: 7.25rem;
  padding: .5rem 1rem;
  border: 1px solid #ffffffb0;
  border-radius: 999px;
  color: #244e7a;
  background: linear-gradient(130deg, #ffffff85, #e9f5ff4d);
  box-shadow: inset 0 1px 0 #ffffffb0, 0 4px 14px #274c7b12;
  backdrop-filter: blur(16px);
  font-size: var(--type-small);
  line-height: 1.4;
  letter-spacing: 0;
  white-space: nowrap;
}
#timeline-playback:hover { background: #ffffffaa; }
#timeline-playback:focus-visible { outline: 2px solid #244e7a; outline-offset: 4px; }
#timeline-playback > span { width: 1rem; text-align: center; }
.timeline-stage, .timeline-stage:active { cursor: auto; }
.timeline-card {
  transition: transform .8s var(--ease), opacity .4s, height .8s var(--ease), filter .8s, top .8s var(--ease);
}
.timeline-card.is-repositioning { transition: none !important; }
.timeline-card .card-top { max-width: 11rem; }
.timeline-card::after { background: linear-gradient(180deg, #11283f66, transparent 30%), linear-gradient(0deg, #172537db, #17253720 70%, transparent); }
.timeline-card .card-open { min-height: 1.4em; }
.timeline-ruler { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
.timeline-ruler button { min-width: 0; white-space: nowrap; }
.chapter-description { min-height: 19rem; }
@media (max-width: 680px) {
  .timeline-heading { gap: .75rem; min-height: 5rem; }
  .timeline-playback-controls { gap: .5rem; }
  #timeline-playback-status { display: none; }
  #timeline-playback { min-width: 6.5rem; padding-inline: .75rem; }
  .timeline-controller {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
    gap: .5rem;
  }
  .timeline-ruler {
    grid-column: 1 / -1;
    grid-row: 1;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    max-width: 100%;
    gap: .25rem;
  }
  .timeline-ruler button { min-height: 2.75rem; }
  .timeline-controller .round-button { grid-row: 2; }
  .timeline-controller .round-button:last-child { grid-column: 3; }
  .chapter-description { min-height: 23rem; }
}
@media (prefers-reduced-motion: reduce) {
  .timeline-card { transition: none; }
}