/* ==========================================================================
   Chronik
   ========================================================================== */

.timeline {
  position: relative;
  display: grid;
  gap: var(--space-5);
  padding: 0 0 0 var(--space-8);
  list-style: none;
}

/* the vertical line */
.timeline::before {
  content: "";
  position: absolute;
  top: var(--space-2);
  bottom: var(--space-2);
  left: 0.6875rem;
  width: 2px;
  background: var(--color-border);
}

.timeline__year {
  position: relative;
  margin: var(--space-6) 0 0 calc(-1 * var(--space-8));
}

.timeline__year:first-child {
  margin-top: 0;
}

.timeline__year span {
  position: relative;
  display: inline-block;
  padding: var(--space-1) var(--space-4);
  font-weight: 800;
  color: var(--color-surface);
  background: var(--color-primary);
  border-radius: var(--radius-pill);
}

.timeline__entry {
  position: relative;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* the dot on the line */
.timeline__entry::before {
  content: "";
  position: absolute;
  top: var(--space-6);
  left: calc(-1 * var(--space-8) + 0.375rem);
  width: 0.75rem;
  height: 0.75rem;
  background: var(--color-surface);
  border: 3px solid var(--color-sky);
  border-radius: 50%;
}

.timeline__entry--important::before {
  border-color: #c0392b;
}

.timeline__entry--positive::before {
  border-color: var(--color-meadow);
}

.timeline__date {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary-dark);
}

.timeline__title {
  font-size: var(--text-lg);
}

.timeline__text > * + * {
  margin-top: var(--space-3);
}

.timeline__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
}