.schedule__body {
  --trainline-width: 7px;
  --trainline-stop-size: 30px;
  --trainline-step: 78px;
  --trainline-axis: calc(var(--trainline-stop-size) / 2);
  --trainline-label-gap: 25px;
  --trainline-copy-offset: 28px;
  --trainline-header-height: 132px;
  --trainline-day-one: #fb93d7;
  --trainline-day-two: #b682a7;
  position: relative;
  padding-block: 32px 24px;
}

.schedule-day,
.schedule-start {
  position: relative;
  min-width: 0;
}

.schedule-day h3 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
}

.schedule-date {
  display: block;
  margin-top: 6px;
  font-size: 18px;
  font-weight: 400;
}

.schedule-day ol {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.schedule-event {
  position: relative;
  min-width: 0;
  font-size: 20px;
  line-height: 1.25;
}

.schedule-event__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.schedule-event time {
  font-size: 23px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.schedule-marker {
  position: absolute;
  top: 50%;
  left: var(--trainline-axis);
  width: var(--trainline-stop-size);
  height: var(--trainline-stop-size);
  transform: translate(-50%, -50%);
}

.schedule-terminal,
.schedule-interchange > span {
  border: var(--trainline-width) solid #fff;
  border-radius: 50%;
  background: #121212;
}

.schedule-workshop-stops {
  display: flex;
  justify-content: space-between;
}

.schedule-workshop-stops img {
  width: var(--trainline-stop-size);
  height: var(--trainline-stop-size);
}

.schedule-workshop-stops img:not(:nth-child(2)) {
  display: none;
}

.schedule-interchange {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(var(--trainline-stop-size) * 2 + 8px);
}

.schedule-interchange::before {
  position: absolute;
  top: var(--trainline-axis);
  bottom: var(--trainline-axis);
  left: calc(50% - var(--trainline-width) / 2);
  width: var(--trainline-width);
  background: #fff;
  content: "";
}

.schedule-interchange > span {
  position: relative;
  width: var(--trainline-stop-size);
  height: var(--trainline-stop-size);
}

.schedule__artwork {
  display: none;
}

@media (min-width: 1001px) {
  .schedule {
    --schedule-artwork-width: clamp(28rem, 44vw, 58rem);
    --schedule-artwork-right: -1vw;
    --schedule-artwork-bottom: 0px;
    --schedule-artwork-opacity: 0.4;
    position: relative;
    isolation: isolate;
    overflow: clip;
  }

  .schedule__artwork {
    display: block;
    position: absolute;
    z-index: -1;
    top: 120px;
    right: var(--schedule-artwork-right);
    bottom: var(--schedule-artwork-bottom);
    width: var(--schedule-artwork-width);
    height: calc(100% - 120px - var(--schedule-artwork-bottom));
    object-fit: contain;
    object-position: right bottom;
    mask-image: linear-gradient(to right, transparent, #000 80%);
    opacity: var(--schedule-artwork-opacity);
    pointer-events: none;
  }

  .schedule__body {
    --trainline-connection-top: -20px;
    --trainline-top: calc(var(--trainline-connection-top) + var(--trainline-width) / 2);
    --trainline-bottom: calc(var(--trainline-step) * 5.5);
    --trainline-level-step: calc((var(--trainline-bottom) - var(--trainline-top)) / 5);
    --trainline-list-top: calc(var(--trainline-top) - var(--trainline-level-step) / 2);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 1.3fr);
    column-gap: var(--trainline-label-gap);
  }

  .schedule-day {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: var(--trainline-header-height) calc(var(--trainline-step) * 6 + 12px);
    grid-row: 1;
  }

  .schedule-day--one {
    grid-column: 1 / 3;
  }

  .schedule-day--two {
    grid-column: 2 / 4;
  }

  .schedule-start {
    position: absolute;
    top: calc(-1 * var(--trainline-header-height) - var(--trainline-list-top));
    left: 0;
    width: 100%;
    height: var(--trainline-header-height);
  }

  .schedule-workshop-stops {
    width: min(168px, calc(100% - var(--trainline-stop-size) * 2));
  }

  .schedule-workshop-stops img:not(:nth-child(2)) {
    display: block;
  }

  .schedule-day ol {
    top: var(--trainline-list-top);
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: repeat(6, var(--trainline-level-step));
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .schedule-event {
    display: flex;
    grid-column: 1;
    grid-row: var(--trainline-row);
    align-items: center;
    height: var(--trainline-level-step);
  }

  .event--row-1 {
    --trainline-row: 1;
  }

  .event--row-2 {
    --trainline-row: 2;
  }

  .event--row-3 {
    --trainline-row: 3;
  }

  .event--row-4,
  .event--interchange {
    --trainline-row: 4;
  }

  .event--row-5 {
    --trainline-row: 5;
  }

  .schedule-day--one .event--return,
  .schedule-day--two .schedule-event:not(.event--return):not(.event--interchange) {
    grid-column: 2;
  }

  .schedule-day--two .schedule-event:not(.event--return):not(.event--interchange) {
    grid-row: calc(var(--trainline-row) + 1);
  }

  .schedule-event__copy {
    margin-left: calc(var(--trainline-axis) + var(--trainline-copy-offset));
  }

  .event--interchange h3 {
    position: absolute;
    top: calc(
      -1 * var(--trainline-header-height) - var(--trainline-list-top)
        - var(--trainline-level-step) * 3
    );
    left: 0;
    width: max-content;
  }

  .event--workshops {
    --trainline-row: 6;
    left: var(--trainline-axis);
    width: calc(100% + var(--trainline-label-gap));
    justify-content: center;
    align-items: flex-start;
    text-align: center;
  }

  .event--workshops .schedule-marker {
    left: 50%;
  }

  .event--workshops .schedule-event__copy {
    position: absolute;
    margin: calc(var(--trainline-level-step) / 2 + var(--trainline-copy-offset)) 0 0;
    font-size: 28px;
    font-weight: 700;
    white-space: nowrap;
  }

  .schedule-track,
  .schedule-connection {
    position: absolute;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    top: 0;
    left: calc(var(--trainline-axis) - var(--trainline-width) / 2);
    right: calc(
      -1 * (var(--trainline-label-gap) + var(--trainline-axis) + var(--trainline-width) / 2)
    );
    pointer-events: none;
  }

  .schedule-track--one {
    top: calc(var(--trainline-step) / 2);
    height: calc(var(--trainline-step) * 5 + var(--trainline-width) / 2);
    border: var(--trainline-width) solid var(--trainline-day-one);
    border-top: 0;
    border-radius: 0 0 28px 28px;
  }

  .schedule-track--one::before {
    position: absolute;
    top: calc(var(--trainline-top) - var(--trainline-step) / 2);
    left: calc(-1 * var(--trainline-width));
    width: var(--trainline-width);
    height: calc(var(--trainline-step) / 2 - var(--trainline-top));
    background: var(--trainline-day-one);
    content: "";
  }

  .schedule-track--one::after {
    position: absolute;
    top: calc(-1 * var(--trainline-step) / 2);
    right: calc(-1 * var(--trainline-width));
    width: var(--trainline-width);
    height: calc(var(--trainline-top) + var(--trainline-level-step) * 3);
    background: var(--trainline-day-two);
    content: "";
  }

  .schedule-track--two {
    grid-column: 2 / 3;
    right: auto;
    width: var(--trainline-width);
    height: var(--trainline-bottom);
    background: var(--trainline-day-two);
  }

  .schedule-connection {
    top: var(--trainline-connection-top);
    height: 28px;
    border: var(--trainline-width) solid var(--trainline-day-two);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
  }
}

@media (max-width: 1000px) {
  .landing .schedule__body {
    --trainline-width: 4px;
    --trainline-stop-size: 26px;
    max-width: 680px;
    padding-block: 24px;
  }

  .schedule-connection,
  .schedule-track {
    display: none;
  }

  .schedule-day--one {
    --trainline-colour: var(--trainline-day-one);
  }

  .schedule-day--two {
    --trainline-colour: var(--trainline-day-two);
  }

  .schedule-start {
    display: contents;
  }

  .schedule-event {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 48px;
    min-height: 80px;
    padding-block: 8px;
    align-items: center;
    font-size: clamp(19px, 3vw, 23px);
    line-height: 1.3;
  }

  .schedule-event::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - var(--trainline-width) / 2);
    width: var(--trainline-width);
    background: var(--trainline-colour);
    content: "";
  }

  .event--start::before {
    top: 50%;
  }

  .event--interchange::before {
    background: linear-gradient(
      to bottom,
      var(--trainline-day-one) 50%,
      var(--trainline-day-two) 50%
    );
  }

  .schedule-day--two .schedule-event:last-child::before {
    bottom: 50%;
  }

  .schedule-day h3 {
    color: #9b9b9b;
    font-size: 26px;
  }

  .schedule-date {
    font-size: 17px;
  }

  .schedule-start h3 {
    grid-column: 2;
    text-align: left;
  }

  .event--interchange h3 {
    grid-column: 1;
    grid-row: 1;
    text-align: right;
  }

  .schedule-event time {
    font-size: clamp(24px, 4vw, 28px);
  }

  .schedule-event__copy {
    grid-column: 1;
    grid-row: 1;
    text-align: right;
    font-weight: 400;
  }

  .schedule-day--one .schedule-event:nth-child(even) .schedule-event__copy,
  .schedule-day--two .schedule-event:nth-child(odd) .schedule-event__copy {
    grid-column: 2;
    text-align: left;
  }

  .schedule-marker {
    left: 50%;
  }
}