#timeline {

}

#timeline article {
  margin-top: calc(var(--ma-hge) + 5px);
}


#timeline #timeline-title {
  text-transform: capitalize;
  font: var(--cs-hg1);
  color: var(--co-text);
  margin: 0 var(--ma-reg) var(--ma-sml) var(--ma-reg);
}

#timeline #description {
  padding: 0 calc(1rem * var(--lh-reg));
  font: var(--cs-reg);
  max-width: 48ch;
  margin-bottom: var(--ma-reg);
}

#timeline #timeline-table {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#timeline #timeline-table #timeline-table-header {
  border-top: 1px solid var(--co-text);
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
  position: sticky;
  top: 0;
  background-color: var(--co-high);
  z-index: 50;
}

#timeline #timeline-table #timeline-table-header div {
  text-transform: uppercase;
  font: var(--cs-lbl);
  font-weight: 600;
  margin-top: 0
}

#timeline #timeline-table .timeline-row {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid var(--co-text);
  align-items: flex-start;
  gap: 0 0.5rem;
  padding: var(--pd-reg) calc(var(--ma-reg));
}

#timeline #timeline-table a.timeline-row:hover,
#timeline #timeline-table a.timeline-row:focus {
  background-color: var(--co-hlght);
  outline: none;
}

#timeline #timeline-table a.timeline-row:hover div,
#timeline #timeline-table a.timeline-row:focus div {
  color: var(--co-pri);
}

#timeline #timeline-table .timeline-row .type {
  min-width: 9.25rem;
  flex: 0;
  position: sticky;
  top: 0;  
}
#timeline #timeline-table .timeline-row .type div {
  margin-bottom: 0;
  padding: 0;
  background: none;
}


#timeline #timeline-table .timeline-row .authors {
  font: var(--cs-lbl);
  color: var(--co-text);
  margin-top: 1px;
  flex: 15%;
}

#timeline #timeline-table .timeline-row .authors span {
  display: inline-block;
}


#timeline #timeline-table .timeline-row .title {
  font: var(--cs-txt);
  text-transform: uppercase;
  width: 55%;
  color: var(--co-text);
  margin-right: var(--ma-sml);
}


#timeline #timeline-table .timeline-row .date {
  margin-left: auto;
  min-width: 6.5rem;
  font: var(--cs-lbl);
  text-align: right;
  color: var(--co-text);
  margin-top: 1px;
}


#timeline #timeline-table .timeline-row .date .short {
  display: none;
}

@media screen and (max-width: 960px) {
  #timeline #timeline-table .type {
    min-width: 2rem !important;
  }

  #timeline #timeline-table .timeline-row .type .label {
    display: none;    
  }
  #timeline #timeline-table .timeline-row .date .long {
    display: none;
  }
  #timeline #timeline-table .timeline-row .date .short {
    display: block;
    min-width: 4.25rem;
  }
}

@media screen and (max-width: 640px) {

  #timeline #timeline-table .authors {
    display: none;
  }
}