#content:has(.block-timeline) > section:not(.block-timeline) {
  position: relative;
  z-index: 1;
}

.block-timeline {
  --rp-timeline-background: url("/wp-content/uploads/2025/07/GlaserFig-3.png");
  --nww-section-padding-block: clamp(1.875rem, 0.8929rem + 3.1429vw, 3.25rem) 0;
  /* background: var(--rp-timeline-background);
  background-size: cover;
  position: relative; */
  interpolate-size: allow-keywords;

  position: relative;
  z-index: 0;
}
.timeline-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--rp-timeline-background);
  background-size: cover;

  transition: background 0.3s ease-in-out;
  z-index: -1;
}
body:has(.timeline-background) header.sticky + main {
  position: relative;
}
body:has(.timeline-background) header.sticky + main #content > section:first-of-type:before {
  position: absolute;
  content: "";
  width: 100%;
  top: calc((141px - 85px) * -1);
  height: calc(141px - 85px);
  background: var(--rp-color-dark-blue);
}
/* .block-timeline:after  */
.timeline-background:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--rp-timeline-full-height, 100%);
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
  pointer-events: none;
}

.timeline-container {
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  color: white;
  z-index: 1;
}
.timeline-date {
  font-size: 24px;
  font-weight: 800;
  text-align: right;
  padding-right: 1rem;
  padding-block: 18px;
  margin-block-start: 2rem;
  margin-block-end: 2rem;
  min-height: 150px;
  display: grid;
  place-content: flex-start flex-end;
}
.timeline-title {
  margin-block: 0;
  margin-block-start: 2rem;
  font-size: 24px;
}
.timeline-title.scaling {
  animation: size-up 1s ease-in-out;
}
@media screen and (max-width: 800px) {
  .timeline-title.scaling {
    animation: size-up-mobile 1s ease-in-out;
  }
}
@keyframes size-up {
  0% {
    transform: scale(1) translateX(0);
  }
  50% {
    transform: scale(1.03) translateX(5px);
  }
  100% {
    transform: scale(1) translateX(0);
  }
}
@keyframes size-up-mobile {
  0% {
    transform: scale(1) translateX(0);
  }
  50% {
    transform: scale(1.01) translateX(5px);
  }
  100% {
    transform: scale(1) translateX(0);
  }
}
.timeline-content,
.timeline-content-fake {
  position: relative;
  padding-left: 0.5rem;
  border-left: 2px solid white;
  padding-block: 1.5rem;
  padding-inline-start: 1rem;
  padding-inline-end: 2rem;
  max-width: 666px;
}

.timeline-date:has(+ .timeline-content-fake) {
  border-bottom: unset;
}
.timeline-content-fake {
  padding-bottom: 300px;
  border-left: none;
}

.timeline-text {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.6);
}
.timeline-content.active {
  background: rgba(0, 0, 0, 0.6);
  position: relative;
}
.timeline-content.active:after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M19.123 0V19.5215L14.4971 14.8848V4.71875H4.48828L0 0H19.123Z" fill="%23FF1D25"/></svg>');
}
.timeline-content.active:before {
  content: "";
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 20px;
  height: 20px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M0 19.5215L-1.70662e-06 1.67179e-06L4.62598 4.63672L4.62598 14.8027L14.6348 14.8027L19.123 19.5215L0 19.5215Z" fill="%23FF1D25"/></svg>');
}
.timeline-content.inactive {
  background: unset;
}

.timeline-content.inactive:before {
  content: unset;
}
.timeline-content.inactive:after {
  content: unset;
}

.timeline-content:has(.timeline-text:empty) .timeline-date {
  place-content: center flex-end;
}

.block-timeline.js .timeline-content.active.inactive .timeline-text {
  opacity: 0;
  transform: translateX(200px);
}

.block-timeline.js {
  max-height: 950px;
  max-height: 800px;
  max-height: 1000px;
  max-height: unset;
  overflow: hidden;
  overflow: scroll;
  /* scrollbar-color: red; */
  scrollbar-width: none;
}
.block-timeline.js :is(.timeline-date, .timeline-content) {
  color: rgba(255, 255, 255, 0.2);
}
.block-timeline.js .timeline-date.active + .timeline-content + .timeline-date + .timeline-content,
.block-timeline.js .timeline-date.active + .timeline-content + .timeline-date,
.block-timeline.js .timeline-date:has(+ .timeline-content + .timeline-date.active),
.block-timeline.js .timeline-content:has(+ .timeline-date.active) {
  color: rgba(255, 255, 255, 0.6);
}
.block-timeline.js
  :is(.timeline-date.active:not(.inactive), .timeline-content.active:not(.inactive)) {
  color: white;
}
.block-timeline.js .timeline-text {
  height: 0;
  overflow: hidden;
  opacity: 0;
  min-height: 0;
  transform: translateX(200px);
  transition: min-height 300ms, height 300ms allow-discrete, transform 600ms, opacity 300ms;
}
.block-timeline.js .timeline-content.active .timeline-text {
  /* display: block; */
  height: auto;
  min-height: 250px;
  opacity: 1;
  transform: translateX(0);
}

.block-timeline.js .timeline-content.active:not(.inactive) {
  min-height: 250px;
}

.block-timeline.js .timeline-content.active:not(.inactive):not(:has(.timeline-text)) {
  display: grid;
  place-content: center flex-start;
}
.block-timeline.js
  .timeline-content.active:not(.inactive):not(:has(.timeline-text))
  .timeline-title {
  margin-block-end: 2rem;
}
.block-timeline.js .timeline-container:not(:has(.timeline-text)) .timeline-date.active {
  display: grid;
  place-content: center flex-end;
}
.timeline-date.active {
  display: grid;
  place-content: center flex-end;
}
.timeline-date.active:has(+ .timeline-content .timeline-text) {
  display: grid;
  place-content: flex-start flex-end;
}
.timeline-date.active:has(.timeline-content:not(:has(.timeline-text))) {
  place-content: center flex-end;
}

/* Put back in if we want the footer to be fixed on larger screens 
@media screen and (min-height: 850px) and (min-width: 1100px) {
  body:has(.block-timeline) #colophon {
    position: fixed;
    bottom: 0;
  }
}
  */

@media screen and (max-width: 600px) {
  .timeline-container {
    grid-template-columns: 1fr;
  }
  .timeline-date {
    text-align: center;
    border-bottom: 2px solid white;
    margin-block-end: 0;
    padding-block-end: 0;
    min-height: 0;
  }
  .timeline-content {
    border: none;
  }
}

.timeline-content + .timeline-attribution {
  position: fixed;
  /* display: none; */
  opacity: 0;
  bottom: 0;
  left: 0;
  padding-inline: 0.5rem;

  background: black;
  font-size: 16px;
  transition: all 500ms allow-discrete;
}

.timeline-content.active:not(.inactive) + .timeline-attribution {
  display: inline-block;
  opacity: 1;
  transition: all 500ms allow-discrete;
  /* transition: opacity 5000ms ease-in-out, display 500ms allow-discrete; */
}