/* Experience page: concise editorial timeline */
.experience-page{
  max-width: 800px;
  margin: 0 auto;
  padding: 64px 24px 104px;
}

.experience-head{
  max-width: 720px;
  margin-bottom: 72px;
}
.experience-head h1{
  max-width: 10em;
  margin: 0 0 24px;
  font-size: clamp(38px, 6vw, 62px);
  text-wrap: balance;
}
.experience-lede{
  margin: 0;
  color: var(--sub);
  font-family: var(--font-serif);
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.85;
}

.timeline{
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 40px;
}
.timeline::before{
  content: "";
  position: absolute;
  top: 10px;
  bottom: 12px;
  left: 4px;
  width: 1px;
  background: var(--line);
}
.timeline-entry{
  position: relative;
  padding: 0 0 64px;
}
.timeline-entry:last-child{ padding-bottom: 0; }
.timeline-entry::before{
  content: "";
  position: absolute;
  top: 8px;
  left: -40px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.timeline-entry article{ min-width: 0; }
.timeline-entry h2{
  margin: 0 0 22px;
  font-size: clamp(22px, 3.2vw, 31px);
  line-height: 1.3;
  text-wrap: balance;
}
.timeline-entry p{
  margin: 0 0 1.15em;
  font-family: var(--font-serif);
  font-size: 16.5px;
  line-height: 1.82;
}
.timeline-entry p:last-child{ margin-bottom: 0; }
.timeline-entry a{ overflow-wrap: anywhere; }

@media (max-width: 620px){
  .experience-page{
    padding-top: 40px;
    padding-bottom: 80px;
  }
  .experience-head{ margin-bottom: 56px; }
  .experience-head h1{ max-width: none; }
  .timeline{ padding-left: 24px; }
  .timeline-entry{ padding-bottom: 52px; }
  .timeline-entry::before{ left: -24px; }
  .timeline-entry h2{
    margin-bottom: 18px;
    font-size: 22px;
  }
  .timeline-entry p{ font-size: 16px; }
}