/* Experience redesign: executive, concise and visually distinct. */
#experience {
  background:
    radial-gradient(circle at 86% 12%, rgba(45, 126, 134, .16), transparent 28%),
    linear-gradient(145deg, #061c25 0%, #03131b 72%);
  color: #fff;
  overflow: hidden;
}

#experience.section-divider::before {
  background: var(--gold);
}

#experience .section-kicker,
#experience .timeline-year strong {
  color: var(--gold2);
}

#experience .section-heading-row h2 {
  max-width: 780px;
}

#experience .section-heading-row p,
#experience .timeline-main p,
#experience .earlier-career p {
  color: rgba(231, 239, 240, .72);
}

#experience .timeline {
  border-top: 1px solid rgba(255, 255, 255, .13);
  margin-top: 64px;
  padding-top: 18px;
}

#experience .timeline-main,
#experience .earlier-career {
  position: relative;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 26px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-block-start: 2px solid rgba(215, 189, 136, .72);
  background: rgba(255, 255, 255, .035);
  margin: 18px 0 0;
  padding: 32px;
  transition: transform .25s ease, border-color .25s ease, background-color .25s ease;
}

#experience .timeline-main:hover,
#experience .earlier-career:hover {
  transform: translateY(-3px);
  border-color: rgba(215, 189, 136, .55);
  background: rgba(255, 255, 255, .06);
}

#experience .timeline-year {
  border-inline-end: 1px solid rgba(255, 255, 255, .12);
  padding-inline-end: 24px;
}

#experience .timeline-year strong {
  display: block;
  font-family: var(--display);
  font-size: 23px;
  letter-spacing: -.02em;
  margin-bottom: 12px;
}

#experience .timeline-year span {
  color: rgba(231, 239, 240, .48);
}

#experience .timeline-main h3,
#experience .earlier-career h3 {
  color: #fff;
  letter-spacing: -.025em;
}

#experience .timeline-main h3 {
  margin-top: 13px;
  font-size: clamp(27px, 2.5vw, 39px);
}

#experience .earlier-career h3 {
  font-size: clamp(24px, 2vw, 31px);
}

#experience .timeline-main h4 {
  color: #7ec0c6;
}

#experience .career-lead {
  color: rgba(239, 245, 245, .82);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
}

#experience .role-clarifier {
  max-width: 860px;
  border-inline-start: 3px solid var(--gold);
  background: rgba(215, 189, 136, .09);
  color: rgba(238, 227, 202, .78);
  margin: 13px 0 19px;
  padding: 13px 17px;
  font-size: 13px;
  line-height: 1.7;
}

#experience .scope-tags {
  margin-top: 23px;
}

#experience .scope-tags span {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .035);
  color: rgba(239, 245, 245, .72);
}

#experience .current-pill {
  border-color: rgba(215, 189, 136, .48);
  background: rgba(215, 189, 136, .12);
  color: var(--gold2);
}

@media (max-width: 760px) {
  #experience .timeline-main,
  #experience .earlier-career {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 25px 21px;
  }

  #experience .timeline-year {
    border-inline-end: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    padding: 0 0 18px;
  }

  #experience .timeline {
    margin-top: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #experience .timeline-main,
  #experience .earlier-career {
    transition: none;
  }
}