/* Timeline — a vertical sequence, tied together by the dashed centreline that
   runs through the rest of the site. */

.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:27px;top:8px;bottom:8px;width:2px;
  background-image:linear-gradient(180deg,var(--line) 0 14px,transparent 14px 26px);
  background-size:2px 26px}
.timeline__item{position:relative;display:grid;grid-template-columns:56px 1fr;gap:26px;
  padding-bottom:34px}
.timeline__item:last-child{padding-bottom:0}

.timeline__marker{position:relative;z-index:1;width:56px;height:56px;display:grid;place-items:center;
  background:var(--paper);border:2px solid var(--navy);border-radius:50%;
  font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.02em;color:var(--navy)}
.timeline--label .timeline__marker{width:auto;min-width:56px;padding:0 12px;border-radius:999px;font-size:15px}
.timeline--dot .timeline__marker{width:18px;height:18px;margin:19px 19px;background:var(--red);border-color:var(--red)}
.timeline--dot .timeline::before,
.timeline--dot.timeline::before{left:27px}

.timeline__body h3{font-size:24px;margin-bottom:8px}
.timeline__body .rich__body{font-size:16px;max-width:70ch}
.timeline__media{margin-top:16px;max-width:420px}
.timeline__media img{width:100%;height:auto}

.section--bg-white .timeline__marker{background:var(--white)}
.section--bg-navy .timeline::before,.section--bg-asphalt .timeline::before{
  background-image:linear-gradient(180deg,rgba(255,255,255,.28) 0 14px,transparent 14px 26px)}
.section--bg-navy .timeline__marker{background:var(--navy);border-color:var(--sand);color:var(--sand)}
.section--bg-asphalt .timeline__marker{background:var(--asphalt);border-color:var(--sand);color:var(--sand)}

@media(max-width:720px){
  .timeline__item{grid-template-columns:44px 1fr;gap:18px}
  .timeline__marker{width:44px;height:44px;font-size:16px}
  .timeline::before{left:21px}
}