html.is-timeline-vertical,
body.is-timeline-vertical {
  width: 100%;
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-x: none;
  overscroll-behavior-y: auto;
}

html.is-timeline-vertical { overscroll-behavior-y: auto; }

body.is-timeline-vertical .timeline-app {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
}

body.is-timeline-vertical .top-overlay-layout {
  position: relative;
  inset: auto;
  width: auto;
  max-height: none;
  margin: 0;
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  overflow: visible;
}

body.is-timeline-vertical .identity-overlay {
  width: min(100%, 330px);
  height: auto;
  padding: 9px 11px;
}

body.is-timeline-vertical .identity-copy {
  margin-top: 7px;
  padding-top: 6px;
}

body.is-timeline-vertical .identity-copy .eyebrow,
body.is-timeline-vertical .identity-copy > p:last-child,
body.is-timeline-vertical .evidence-legend,
body.is-timeline-vertical .century-progress,
body.is-timeline-vertical .timeline-instruction {
  display: none;
}

body.is-timeline-vertical .identity-copy h1 { font-size: 24px; }
body.is-timeline-vertical .top-controls-stack { gap: 7px; overflow: visible; }
body.is-timeline-vertical .filters-panel { padding: 7px 8px; }
body.is-timeline-vertical .position-overlay { min-height: 48px; padding: 6px 9px; }
body.is-timeline-vertical .timeline-status-row { margin-top: 0; gap: 8px; }
body.is-timeline-vertical .navigation-overlay { gap: 5px; }
body.is-timeline-vertical .selected-position { padding-right: 8px; }

body.is-timeline-vertical .timeline-stage {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  min-height: 320px;
  overflow: visible;
  contain: layout paint;
}

.vertical-timeline {
  position: relative;
  width: 100%;
  min-height: 64px;
  overflow: hidden;
  direction: ltr;
  touch-action: pan-y;
}

.vertical-timeline-axis {
  position: absolute;
  z-index: 1;
  left: 46px;
  width: 1px;
  background: #aaa99f;
  pointer-events: none;
}

.vertical-year-marker {
  position: absolute;
  z-index: 4;
  left: 7px;
  width: 33px;
  color: #5e6763;
  font: 750 9px/1.2 var(--sans);
  text-align: right;
  transform: translateY(-50%);
  pointer-events: none;
}

.vertical-year-marker::after {
  position: absolute;
  top: 50%;
  left: calc(100% + 6px);
  width: 7px;
  height: 7px;
  border: 1px solid #8f918a;
  border-radius: 50%;
  background: var(--paper);
  content: "";
  transform: translateY(-50%);
}

.vertical-event-connector {
  position: absolute;
  z-index: 2;
  left: 47px;
  width: 24px;
  height: 1px;
  background: var(--domain, var(--ink));
  pointer-events: none;
}

.vertical-timeline-event {
  position: absolute;
  z-index: 3;
  right: 12px;
  left: 71px;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  color: var(--ink);
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.vertical-event-card {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 11px 13px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--domain, var(--ink));
  border-radius: 2px;
  background: rgba(252, 251, 247, .96);
  box-shadow: 0 4px 13px rgba(22, 34, 31, .07);
}

.vertical-timeline-event:hover .vertical-event-card,
.vertical-timeline-event:focus-visible .vertical-event-card {
  background: var(--white);
  box-shadow: 0 7px 20px rgba(22, 34, 31, .13);
}

.vertical-event-year {
  display: block;
  color: var(--domain, var(--ink));
  font: 750 11px/1.1 var(--sans);
  letter-spacing: .07em;
}

.vertical-event-title,
.vertical-event-contributors,
.vertical-event-kind { display: block; overflow-wrap: anywhere; }
.vertical-event-title { margin-top: 3px; font: 600 17px/1.15 var(--serif); letter-spacing: -.01em; }
.vertical-event-contributors { margin: 5px 0; color: #26332e; font: 650 11px/1.3 var(--sans); }
.vertical-event-kind { color: var(--muted); font-size: 8px; font-weight: 700; line-height: 1.25; letter-spacing: .1em; text-transform: uppercase; }

.vertical-timeline-event.is-selected { z-index: 6; }
.vertical-timeline-event.is-selected .vertical-event-card {
  color: var(--white);
  border-color: var(--ink);
  background: var(--ink);
  box-shadow: 0 8px 24px rgba(22, 34, 31, .22);
}
.vertical-timeline-event.is-selected .vertical-event-year,
.vertical-timeline-event.is-selected .vertical-event-contributors,
.vertical-timeline-event.is-selected .vertical-event-kind { color: var(--white); }

.vertical-timeline-break {
  position: absolute;
  z-index: 5;
  left: 34px;
  width: 25px;
  padding: 1px 3px 3px;
  color: #777e7b;
  background: var(--paper);
  font: 800 12px/1 var(--sans);
  letter-spacing: .02em;
  text-align: center;
  transform: translateY(-50%) rotate(90deg);
  pointer-events: none;
}

body.is-timeline-vertical .detail-section {
  position: fixed;
  z-index: 50;
  inset: 10px;
  width: auto;
  max-height: none;
  border: 1px solid var(--line);
}

body.is-timeline-vertical .detail-primary { padding: 25px 21px; }
body.is-timeline-vertical .detail-primary h2 { font-size: 35px; }
body.is-timeline-vertical .context-block,
body.is-timeline-vertical .memory-block,
body.is-timeline-vertical .related-block { padding-right: 20px; }

@media (max-width: 390px) {
  .vertical-timeline-axis { left: 43px; }
  .vertical-year-marker { left: 4px; }
  .vertical-year-marker::after { left: calc(100% + 6px); }
  .vertical-event-connector { left: 44px; width: 21px; }
  .vertical-timeline-event { right: 9px; left: 65px; }
}

@media (prefers-reduced-motion: reduce) {
  .vertical-timeline-event,
  .vertical-event-card { scroll-behavior: auto; transition: none; }
}