/* Data-driven chronological timeline */

@layer application {
.route-document--timeline #content {
  block-size: var(--site-viewport-block-size);
  min-block-size: var(--site-viewport-block-size);
}

.timeline-scroll {
  inline-size: 100%;
  block-size: var(--site-viewport-block-size);
  padding-block-start: var(--detail-navigation-surface-start);
  padding-block-end: calc(
    var(--site-navigation-content-gap)
    + var(--detail-navigation-grid-gap)
    + var(--route-cinema-edge-size)
    + var(--detail-grid-surface-block-padding)
  );
  background: var(--site-canvas-background);
}

.timeline-view {
  padding-inline: 0;
}

.timeline {
  --timeline-geometry-scale: 1;

  inline-size: 100%;
  min-block-size: var(--site-canvas-block-size);
  padding-inline: var(--site-content-inline-padding);
  background: transparent;
}

.route-document--timeline .timeline__canvas {
  position: relative;
  inline-size: 100%;
  max-inline-size: var(--site-composition-max-inline-size);
  min-block-size: 28rem;
  margin: 0 auto;
}

.route-document--timeline .timeline-decoration {
  position: absolute;
  display: none;
}

.route-document--timeline
  .timeline__canvas[data-timeline-mode="serpentine"]
  .timeline-decoration {
  display: block;
}

.route-document--timeline .timeline-intro {
  z-index: 1;
  inset-block-start: var(--detail-grid-surface-block-padding);
  inset-inline-start: var(--site-navigation-inline-overhang);
  inline-size: clamp(16.2rem, calc(22.86 * var(--site-scale-unit)), 24.75rem);
  color: var(--site-ink);
  font-family: var(--type-family-text);
}

.route-document--timeline .timeline-intro__title {
  margin: 0;
  font-family: var(--type-family-display);
  font-size: var(--type-size-timeline-intro-title);
  font-weight: var(--type-weight-bold);
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.route-document--timeline .timeline-intro__copy {
  margin:
    calc(
      clamp(0.63rem, calc(0.9 * var(--site-scale-unit)), 0.9rem)
      * var(--timeline-type-scale)
    )
    0 0;
  color: rgb(17 17 17 / 0.68);
  font-size: var(--type-size-timeline-intro-copy);
  hyphens: auto;
  line-height: 1.42;
  text-align: justify;
}

.route-document--timeline .timeline-polaroids {
  --timeline-polaroid-size: clamp(7.497rem, calc(9.126 * var(--site-scale-unit)), 9.873rem);

  z-index: 0;
  inset-inline-end: calc(var(--timeline-polaroid-size) * 0.22);
  inset-block-end: clamp(5.4rem, calc(5.85 * var(--site-scale-unit)), 6.75rem);
  grid-template-columns: repeat(
    3,
    calc(var(--timeline-polaroid-size) * 0.78)
  );
  grid-auto-rows: calc(var(--timeline-polaroid-size) * 0.88);
  align-items: start;
  isolation: isolate;
  pointer-events: none;
}

.route-document--timeline
  .timeline__canvas[data-timeline-mode="serpentine"]
  .timeline-polaroids {
  display: grid;
}

html.has-js .route-document--timeline .timeline-decoration {
  opacity: 0;
  visibility: hidden;
  filter: blur(7px) saturate(0.9);
  translate: 0 clamp(1rem, calc(2 * var(--site-block-unit)), 1.45rem);
  scale: 0.985;
}

html.has-js
  .route-document--timeline
  .timeline.is-timeline-ready
  .timeline-decoration.is-timeline-decoration-visible {
  visibility: visible;
  animation: timeline-decoration-reveal 960ms var(--site-ease-out) both;
}

@keyframes timeline-decoration-reveal {
  from {
    opacity: 0;
    filter: blur(7px) saturate(0.9);
    translate: 0 clamp(1rem, calc(2 * var(--site-block-unit)), 1.45rem);
    scale: 0.985;
  }

  to {
    opacity: 1;
    filter: none;
    translate: 0 0;
    scale: 1;
  }
}

.route-document--timeline .timeline-polaroid {
  --timeline-polaroid-offset-x: 0;

  inline-size: var(--timeline-polaroid-size);
  transform:
    translate(
      var(--timeline-polaroid-offset-x),
      var(--polaroid-offset-y)
    )
    rotate(var(--polaroid-rotation));
}

.route-document--timeline .timeline-polaroid.polaroid-card {
  padding: clamp(0.36rem, calc(0.63 * var(--site-scale-unit)), 0.594rem)
    clamp(0.36rem, calc(0.63 * var(--site-scale-unit)), 0.594rem)
    clamp(1.395rem, calc(2.385 * var(--site-scale-unit)), 2.385rem);
  border-radius: clamp(0.225rem, calc(0.45 * var(--site-scale-unit)), 0.405rem);
  box-shadow:
    0 2.07rem 4.14rem rgb(0 0 0 / 32%),
    0 0.675rem 1.62rem rgb(0 0 0 / 22%),
    0 0.162rem 0.45rem rgb(0 0 0 / 22%),
    inset 0 0 0 0.9px rgb(0 0 0 / 14%);
}

.route-document--timeline .timeline-polaroid .polaroid-card__media {
  border-radius: clamp(0.108rem, calc(0.225 * var(--site-scale-unit)), 0.198rem);
  box-shadow:
    inset 0 0 0 0.9px rgb(0 0 0 / 13%),
    inset 0 0 2.34rem rgb(0 0 0 / 10%);
}

.route-document--timeline .timeline-polaroid:nth-child(1) {
  --polaroid-rotation: -7deg;
  --polaroid-offset-y: 0.405rem;
  z-index: 2;
}

.route-document--timeline .timeline-polaroid:nth-child(2) {
  --polaroid-rotation: 4deg;
  --polaroid-offset-y: -0.495rem;
  z-index: 4;
}

.route-document--timeline .timeline-polaroid:nth-child(3) {
  --polaroid-rotation: -2.5deg;
  --polaroid-offset-y: 0.27rem;
  z-index: 3;
}

.route-document--timeline .timeline-polaroid:nth-child(4) {
  --timeline-polaroid-offset-x: 0.225rem;
  --polaroid-rotation: 5.5deg;
  --polaroid-offset-y: 0.36rem;
  z-index: 5;
}

.route-document--timeline .timeline-polaroid:nth-child(5) {
  --timeline-polaroid-offset-x: -0.27rem;
  --polaroid-rotation: -4deg;
  --polaroid-offset-y: -0.315rem;
  z-index: 6;
}

.route-document--timeline .timeline-polaroid:nth-child(6) {
  --timeline-polaroid-offset-x: 0.135rem;
  --polaroid-rotation: 7deg;
  --polaroid-offset-y: 0.495rem;
  z-index: 1;
}

.timeline__path {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: none;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  pointer-events: none;
}

.is-timeline-ready .timeline__path {
  display: block;
}

/* Main-timeline path geometry; the shared chapter primitive lives separately. */
.timeline__path path {
  /*
   * The renderer measures dash lengths in its 1:1 SVG coordinate system.
   * Keep the stroke there: Chromium can shorten scripted dashes when combined
   * with vector-effect: non-scaling-stroke.
   */
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--timeline-path-stroke-width);
  will-change: stroke-dashoffset;
}

.timeline__entries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin: 0;
  padding: 0;
  gap: var(--detail-grid-gap);
  list-style: none;
}

.is-timeline-ready .timeline__entries {
  position: absolute;
  inset: 0;
  display: block;
}

.timeline__entry {
  --timeline-entry-blur: 5px;
  --timeline-entry-offset: 1rem;

  position: relative;
  z-index: 1;
  min-inline-size: 0;
}

.route-document--timeline .timeline__entry {
  --timeline-entry-blur: 4.5px;
  --timeline-entry-offset: 0.9rem;
}

.is-timeline-ready .timeline__entry {
  position: absolute;
  inset-block-start: var(--timeline-node-y);
  inset-inline-start: var(--timeline-node-x);
  inline-size: 0;
  block-size: 0;
}

.timeline__marker {
  margin: 0 auto -0.75rem;
}

.is-timeline-ready .timeline__marker {
  position: absolute;
  inset: 50% auto auto 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}

.timeline__card {
  min-block-size: 9rem;
  transition:
    box-shadow 240ms var(--site-ease-out),
    transform 280ms var(--site-ease-out);
}

.route-document--timeline .timeline__card {
  min-block-size: 11.025rem;
  padding: calc(
    clamp(0.855rem, calc(1.17 * var(--site-scale-unit)), 1.08rem)
    * var(--timeline-type-scale)
  );
  border-radius: calc(0.81rem * var(--timeline-geometry-scale));
  box-shadow:
    calc(0.54rem * var(--timeline-geometry-scale))
    calc(0.54rem * var(--timeline-geometry-scale))
    calc(1.125rem * var(--timeline-geometry-scale)) rgb(197 197 197 / 0.78),
    calc(-0.495rem * var(--timeline-geometry-scale))
    calc(-0.495rem * var(--timeline-geometry-scale))
    calc(1.08rem * var(--timeline-geometry-scale)) rgb(255 255 255 / 0.9);
}

.is-timeline-ready .timeline__card {
  position: absolute;
  inset-block-start: var(--timeline-card-y);
  inset-inline-start: var(--timeline-card-x);
  inline-size: var(--timeline-card-width);
  block-size: 9rem;
  min-block-size: 0;
}

.route-document--timeline .is-timeline-ready .timeline__card {
  block-size: var(--timeline-card-height, 11.025rem);
}

/*
 * The vertical layout measures every card at its final inline size and uses
 * the tallest natural block size for the complete set. Keep the probe out of
 * document flow while retaining the card's real, uniform padding contract.
 */
.route-document--timeline
  .timeline.is-timeline-card-measuring
  .timeline__card {
  position: fixed;
  inset: 0 auto auto 0;
  inline-size: var(--timeline-measurement-card-width);
  block-size: auto;
  min-block-size: 0;
  visibility: hidden;
  overflow: visible;
  transform: none;
  pointer-events: none;
}

.route-document--timeline
  .timeline.is-timeline-card-measuring
  .timeline__description {
  overflow: visible;
}

.route-document--timeline .is-timeline-ready .timeline__card::before {
  inline-size: calc(0.81rem * var(--timeline-geometry-scale));
  block-size: calc(0.81rem * var(--timeline-geometry-scale));
}

.route-document--timeline
  .timeline__entry[data-timeline-side="before"]
  .timeline__card::before {
  inset-block-end: calc(-0.432rem * var(--timeline-geometry-scale));
}

.route-document--timeline
  .timeline__entry[data-timeline-side="after"]
  .timeline__card::before {
  inset-block-start: calc(-0.432rem * var(--timeline-geometry-scale));
}

.route-document--timeline
  .timeline__entry[data-timeline-turn="right"]
  .timeline__card::before {
  inset-inline-start: calc(-0.432rem * var(--timeline-geometry-scale));
}

.route-document--timeline
  .timeline__entry[data-timeline-turn="left"]
  .timeline__card::before {
  inset-inline-end: calc(-0.432rem * var(--timeline-geometry-scale));
}

.is-timeline-ready .timeline__card::before {
  position: absolute;
  z-index: 1;
  inset-inline-start: 50%;
  inline-size: 0.9rem;
  block-size: 0.9rem;
  border: 0 solid var(--timeline-card-border-color);
  background: var(--timeline-card-surface);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.timeline__entry[data-timeline-side="before"] .timeline__card::before {
  inset-block-end: -0.48rem;
  border-block-end-width: var(--timeline-card-border-width);
  border-inline-end-width: var(--timeline-card-border-width);
}

.timeline__entry[data-timeline-side="after"] .timeline__card::before {
  inset-block-start: -0.48rem;
  border-block-start-width: var(--timeline-card-border-width);
  border-inline-start-width: var(--timeline-card-border-width);
}

.timeline__entry[data-timeline-type="curve"] .timeline__card::before {
  inset-block-start: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.timeline__entry[data-timeline-turn="right"] .timeline__card::before {
  inset-inline: -0.48rem auto;
  border-block-end-width: var(--timeline-card-border-width);
  border-inline-start-width: var(--timeline-card-border-width);
}

.timeline__entry[data-timeline-turn="left"] .timeline__card::before {
  inset-inline: auto -0.48rem;
  border-block-start-width: var(--timeline-card-border-width);
  border-inline-end-width: var(--timeline-card-border-width);
}

.route-document--timeline
  .timeline__canvas[data-timeline-mode="tablet-serpentine"]
  .timeline__entry[data-timeline-turn="right"]
  .timeline__card::before {
  inset-inline: auto calc(-0.432rem * var(--timeline-geometry-scale));
  border-block-start-width: var(--timeline-card-border-width);
  border-inline-end-width: var(--timeline-card-border-width);
  border-block-end-width: 0;
  border-inline-start-width: 0;
}

.route-document--timeline
  .timeline__canvas[data-timeline-mode="tablet-serpentine"]
  .timeline__entry[data-timeline-turn="left"]
  .timeline__card::before {
  inset-inline: calc(-0.432rem * var(--timeline-geometry-scale)) auto;
  border-block-start-width: 0;
  border-inline-end-width: 0;
  border-block-end-width: var(--timeline-card-border-width);
  border-inline-start-width: var(--timeline-card-border-width);
}

.route-document--timeline
  .timeline__canvas[data-timeline-mode="tablet-serpentine"]
  .timeline__card {
  padding-block: calc(0.72rem * var(--timeline-geometry-scale));
}

.route-document--timeline
  .timeline__canvas:is(
    [data-timeline-mode="serpentine"],
    [data-timeline-mode="tablet-serpentine"],
    [data-timeline-mode="vertical"]
  )
  .timeline__card
  .timeline__description {
  font-size: var(--type-size-timeline-responsive-copy);
}

.route-document--timeline
  .timeline__canvas:is(
    [data-timeline-mode="serpentine"],
    [data-timeline-mode="tablet-serpentine"],
    [data-timeline-mode="vertical"]
  )
  .timeline__card
  .timeline__period {
  font-size: var(--type-size-timeline-responsive-period);
}

.timeline__card:hover,
.timeline__card:focus-visible {
  box-shadow:
    0.78rem 0.78rem 1.5rem rgb(183 183 183 / 0.82),
    -0.65rem -0.65rem 1.35rem rgb(255 255 255 / 0.94);
  transform: translateY(-0.22rem);
}

.timeline__card:focus-visible {
  outline: 2px solid var(--timeline-accent);
  outline-offset: 4px;
}

.route-document--timeline .timeline__card:hover,
.route-document--timeline .timeline__card:focus-visible {
  box-shadow:
    calc(0.702rem * var(--timeline-geometry-scale))
    calc(0.702rem * var(--timeline-geometry-scale))
    calc(1.35rem * var(--timeline-geometry-scale)) rgb(183 183 183 / 0.82),
    calc(-0.585rem * var(--timeline-geometry-scale))
    calc(-0.585rem * var(--timeline-geometry-scale))
    calc(1.215rem * var(--timeline-geometry-scale)) rgb(255 255 255 / 0.94);
  transform: translateY(calc(-0.198rem * var(--timeline-geometry-scale)));
}

.route-document--timeline .timeline__card .timeline__category,
.route-document--timeline .timeline__card .timeline__period {
  font-size: var(--type-size-timeline-meta-featured);
}

.route-document--timeline .timeline__card .timeline__category {
  padding:
    calc(0.126rem * var(--timeline-type-scale))
    calc(0.378rem * var(--timeline-type-scale))
    calc(0.072rem * var(--timeline-type-scale));
  border-radius: calc(0.198rem * var(--timeline-type-scale));
}

.route-document--timeline .timeline__card .timeline__title {
  margin-block-start: calc(0.198rem * var(--timeline-type-scale));
  font-size: var(--type-size-timeline-card-title-featured);
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.route-document--timeline .timeline__card .timeline__period {
  margin-block-start: calc(0.198rem * var(--timeline-type-scale));
}

.route-document--timeline .timeline__card .timeline__description {
  min-block-size: 0;
  margin-block-start: calc(0.36rem * var(--timeline-type-scale));
  overflow: hidden;
  color: rgb(17 17 17 / 0.62);
  font-family: var(--type-family-text);
  font-size: var(--type-size-timeline-card-copy);
  hyphens: auto;
  line-height: 1.3;
  text-align: justify;
}

/*
 * JavaScript lays out each timeline path during initialization. Start entries
 * in their reveal state beforehand so their fallback grid cannot flash.
 * Without JavaScript the readable grid fallback remains untouched.
 */
html.has-js .timeline__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);
}

.is-timeline-ready .timeline__entry.is-timeline-entry-visible {
  opacity: 1;
  filter: none;
  translate: 0 0;
}

.route-document--timeline
  .timeline__canvas[data-timeline-mode="vertical"]
  .timeline__card::before {
  inset-block-start: 50%;
  inset-inline: calc(-0.432rem * var(--timeline-geometry-scale)) auto;
  border-block-start-width: 0;
  border-inline-end-width: 0;
  border-block-end-width: var(--timeline-card-border-width);
  border-inline-start-width: var(--timeline-card-border-width);
  transform: translateY(-50%) rotate(45deg);
}

.route-document--timeline
  .timeline__canvas[data-timeline-mode="vertical"]
  .timeline__entry {
  --timeline-entry-fade-duration: 430ms;
  --timeline-entry-move-duration: 520ms;
}

@media (prefers-reduced-motion: reduce) {
  .timeline-scroll,
  .timeline,
  .timeline__entry,
  .timeline__card,
  .timeline-header,
  .timeline-header::before {
    transition: none;
  }

  html.has-js .route-document--timeline .timeline-decoration {
    filter: none;
    translate: none;
    scale: 1;
  }

  html.has-js
    .route-document--timeline
    .timeline.is-timeline-ready
    .timeline-decoration.is-timeline-decoration-visible {
    opacity: 1;
    visibility: visible;
    animation: none;
  }

  .timeline__path path {
    will-change: auto;
  }
}
}