/* ================ Timeline (cleaned) ================ */
:root {
  --line-color: #505050;
  --dot-ring: #33006f;
  --card-bg: #f8f8f8;
  --muted-bg: #f5f5f5;
  --text: #111;
  --muted: #666;
  --max-w: 800px;
  --gutter: 20px;
  --line-w: 6px;
  --dot-size: 12px;
  --dot-ring-w: 4px;
}

.timeline {
  position: relative;
  width: var(--max-w);
  max-width: 100%;
  margin: 20px auto 0;
  padding: 1em 0;
  list-style: none;
}

/* center line */
.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: var(--line-w);
  height: 100%;
  background: linear-gradient(to bottom,
      rgba(80, 80, 80, 0) 0%,
      var(--line-color) 8%,
      var(--line-color) 92%,
      rgba(80, 80, 80, 0) 100%);
}

.timeline li {
  padding: 2.0em 0;
  clear: both;
  /* ensure rows clear */
}

/* columns */
.direction-l,
.direction-r {
  position: relative;
  margin: 0.20em 0;
  width: calc(50% - var(--gutter));
}

.direction-l {
  float: left;
  text-align: right;
  padding-right: var(--gutter);
}

.direction-r {
  float: right;
  text-align: left;
  padding-left: var(--gutter);
}

.flag-wrapper {
  position: relative;
  display: inline-block;
  text-align: center;
}

.flag {
  position: relative;
  display: inline-block;
  background: var(--card-bg);
  color: var(--text);
  transform: translateY(-50%);
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 600;
  text-align: left;
  box-shadow: 0 0 1px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .12);
}

/* timeline dot */
.direction-l .flag::before,
.direction-r .flag::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--dot-size);
  height: var(--dot-size);
  background: #fff;
  border-radius: 50%;
  border: var(--dot-ring-w) solid var(--dot-ring);
  z-index: 10;
}

.direction-l .flag::before {
  right: calc(-1 * (var(--gutter) + var(--dot-size)/2));
}

.direction-r .flag::before {
  left: calc(-1 * (var(--gutter) + var(--dot-size)/2));
}

/* 1) Center the vertical line precisely */
.timeline::before {
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
  /* kill old -3px margin if present */
  width: 6px;
  /* keep even number to avoid sub-pixel fuzz */
}

/* 2) Create the node (dot) from the LI, not the card */
.timeline li {
  position: relative;
}

/* give li a positioning context */

.timeline li::before {
  content: "";
  position: absolute;
  left: 50%;
  /* true center of the full row */
  top: 50%;
  /* center vertically within the row */
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  border: 4px solid #33006f;
  /* your purple ring */
  z-index: 0;
}

/* 3) Disable the old dot on the flag */
.direction-l .flag::before,
.direction-r .flag::before {
  content: none !important;
}

.direction-l .flag:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -8px;
  border: solid transparent;
  border-left-color: var(--card-bg);
  border-width: 8px;
  pointer-events: none;
}

.direction-r .flag:after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -8px;
  border: solid transparent;
  border-right-color: var(--card-bg);
  border-width: 8px;
  pointer-events: none;
}

/* time chip */
.time-wrapper {
  display: inline;
  vertical-align: middle;
  line-height: 1;
  font-size: .6666em;
  color: var(--dot-ring);
}

.direction-l .time-wrapper {
  float: left;
  margin-right: 8px;
}

.direction-r .time-wrapper {
  float: right;
  margin-left: 8px;
}

.time {
  display: inline-block;
  padding: 4px 6px;
  background: var(--card-bg);
  border-radius: 4px;
  transform: translateY(-50%);
}

/* description */
.desc {
  margin: 0 .75em 0 0;
  font-size: .85em;
  line-height: 1.5;
  transform: translateY(-50%);
}

.direction-r .desc {
  margin: 1em 0 0 .75em;
  transform: translateY(-50%);
}

.direction-l .desc {
  margin: 1em 0 0 .75em;
  transform: translateY(-50%);
}

/* ===== Clean, centered mobile layout ===== */
@media (max-width: 660px) {

  /* keep the spine perfectly centered */
  .timeline::before {
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    z-index: 0;
  }

  /* one-column stack */
  .direction-l,
  .direction-r {
    float: none;
    width: 100%;
    text-align: center;
    padding: 0;
  }

  /* item spacing + put the dot above each entry */
  .timeline li {
    position: relative;
    padding: 3em 0 2.25em;
  }

  .timeline li::before {
    /* dot perfectly aligned with the center line */
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }

  /* >>> HARD RESET the time chip so it's centered <<< */
  .time-wrapper,
  .direction-l .time-wrapper,
  .direction-r .time-wrapper {
    position: static !important;
    float: none !important;
    display: block !important;
    transform: none !important;
    margin: 0.5em auto 1em !important;
    text-align: center !important;
    background: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .75em;
    color: #33006f;
    z-index: 3;
  }

  /* title pill and description centered */
  .flag-wrapper {
    display: block;
    text-align: center;
  }

  .flag {
    transform: translateY(-50%);
    display: inline-block;
    background: #fff;
    margin: 0 auto;
    box-shadow: 0 0 1px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .12);
    z-index: 3;
  }

  .desc {
    max-width: 92%;
    margin: 0.9em auto 0;
    padding: 1em;
    text-align: center;
    background: #f5f5f5;
    box-shadow: 0 0 1px rgba(0, 0, 0, .2);
    z-index: 3;
  }

  .time {
    transform: translateY(-95%);
  }

  .direction-l .desc,
  .direction-r .desc {
    margin: 0;
  }

  /* remove any side arrows/connectors on mobile */
  .direction-l .flag-wrapper::after,
  .direction-r .flag-wrapper::after,
  .direction-l .flag::after,
  .direction-r .flag::after {
    content: none !important;
    display: none !important;
  }
}