@layer application {
.chapter-timeline-preview__path path {
  /* The preview renderer measures dash lengths in a 1:1 SVG coordinate system. */
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--timeline-path-stroke-width);
  will-change: stroke-dashoffset;
}

.timeline-node {
  position: relative;
  z-index: 3;
  display: grid;
  inline-size: var(--timeline-marker-size, 4.725rem);
  block-size: var(--timeline-marker-size, 4.725rem);
  border: calc(0.252rem * var(--timeline-geometry-scale, 1)) solid
    var(--site-surface);
  border-radius: 50%;
  background: color-mix(in srgb, var(--timeline-accent) 88%, white);
  box-shadow:
    calc(0.378rem * var(--timeline-geometry-scale, 1))
    calc(0.378rem * var(--timeline-geometry-scale, 1))
    calc(0.81rem * var(--timeline-geometry-scale, 1)) rgb(95 95 95 / 0.3),
    calc(-0.288rem * var(--timeline-geometry-scale, 1))
    calc(-0.288rem * var(--timeline-geometry-scale, 1))
    calc(0.72rem * var(--timeline-geometry-scale, 1)) rgb(255 255 255 / 0.82),
    inset 0 0.9px 0 rgb(255 255 255 / 0.32);
  color: #fff;
  font-family: var(--type-family-display);
  font-size: var(--type-size-timeline-node);
  font-weight: var(--type-weight-semibold);
  letter-spacing: 0.02em;
  place-items: center;
}

.timeline-card-surface {
  --timeline-card-border-color: color-mix(
    in srgb,
    var(--timeline-accent) 52%,
    transparent
  );
  --timeline-card-border-width: 1.5px;
  --timeline-card-surface: #eeeeee;

  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(0.8rem, calc(1.15 * var(--site-scale-unit)), 1.05rem);
  border: var(--timeline-card-border-width) solid
    var(--timeline-card-border-color);
  border-radius: clamp(0.65rem, var(--site-scale-unit), 0.9rem);
  background: var(--timeline-card-surface);
  box-shadow:
    0.6rem 0.6rem 1.25rem rgb(197 197 197 / 0.78),
    -0.55rem -0.55rem 1.2rem rgb(255 255 255 / 0.9);
  color: var(--site-ink);
  text-decoration: none;
}

.timeline__category,
.timeline__period {
  font-family: var(--type-family-text);
  font-size: var(--type-size-timeline-meta);
  line-height: 1.2;
}

.timeline__category {
  align-self: flex-start;
  inline-size: fit-content;
  padding:
    calc(0.14rem * var(--timeline-type-scale, 1))
    calc(0.42rem * var(--timeline-type-scale, 1))
    calc(0.08rem * var(--timeline-type-scale, 1));
  border: 0;
  border-radius: calc(0.22rem * var(--timeline-type-scale, 1));
  background: color-mix(in srgb, var(--timeline-accent) 88%, white);
  color: #fff;
  font-weight: var(--type-weight-regular);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.timeline__title {
  margin-block-start: calc(0.22rem * var(--timeline-type-scale, 1));
  overflow: hidden;
  font-family: var(--type-family-display);
  font-weight: var(--type-weight-bold);
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline__period {
  margin-block-start: calc(0.22rem * var(--timeline-type-scale, 1));
  color: rgb(17 17 17 / 0.5);
  font-weight: var(--type-weight-medium);
  letter-spacing: 0.04em;
  text-transform: none;
}

html.has-js .chapter-timeline-preview__entry {
  opacity: 0;
  filter: blur(var(--timeline-entry-blur, 4.5px));
  translate: 0 var(--timeline-entry-offset, 0.9rem);
  transition:
    opacity var(--timeline-entry-fade-duration, 620ms) ease,
    filter var(--timeline-entry-fade-duration, 620ms) ease,
    translate var(--timeline-entry-move-duration, 760ms) var(--site-ease-out);
}

html.has-js .chapter-timeline-preview__entry.is-timeline-entry-visible {
  opacity: 1;
  filter: none;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .chapter-timeline-preview__entry {
    transition: none;
  }
}
}