/* Reusable chronological timeline. Events are content-spaced, not date-scaled. */
.dt-timeline {
  --axis-x: 100px;
  --card-left: 160px;
  --event-gap: 14;
  --month-gap: 34;
  --year-gap: 16;
  position: relative;
  isolation: isolate;
  min-height: 200px;
  margin: 0 0 2rem;
}
.dt-axis {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: calc(var(--axis-x) - 1.5px);
  width: 3px;
  border-radius: 4px;
  background: linear-gradient(180deg, #9aa5b1, #cfd5dc);
}
.dt-axis::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: calc(var(--axis-x) - 14px);
  height: 3px;
  border-radius: 3px 0 0 3px;
  background: #9aa5b1;
}
.dt-month-label {
  position: absolute;
  z-index: 2;
  left: 43px;
  width: calc(var(--axis-x) - 58px);
  transform: translateY(-50%);
  text-align: right;
  white-space: nowrap;
  font-size: .83rem;
  font-weight: 550;
  line-height: 1.2;
  color: #8a97a8;
}
.dt-month-label::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -16px;
  width: 8px;
  height: 1px;
  background: #c3ccd7;
}
.dt-year-marker {
  position: absolute;
  z-index: 5;
  left: 0;
  transform: translateY(-50%);
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 800;
  color: #354358;
  white-space: nowrap;
}
.dt-connectors {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.dt-event { position: absolute; inset-inline: 0; top: 0; --dot-y: 0px; }
.dt-point {
  position: absolute;
  z-index: 3;
  left: calc(var(--axis-x) - 8px);
  top: var(--dot-y);
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 3px solid var(--period-color);
  border-radius: 6px;
  background: #fff;
}
.dt-card {
  position: absolute;
  top: 0;
  left: var(--card-left);
  right: 78px;
  padding: 17px 19px 18px;
  border: 1px solid color-mix(in srgb, var(--period-color) 34%, #d9dee3);
  border-left: 5px solid var(--period-color);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(20, 35, 55, .055);
  overflow-wrap: anywhere;
}
.dt-card time {
  display: block;
  margin-bottom: 6px;
  font-size: .82rem;
  letter-spacing: .045em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--period-color);
  font-variant-numeric: tabular-nums;
}
.dt-card h3 { margin: 0 0 7px; font-size: 1.06rem; line-height: 1.32; font-weight: 700; color: #243041; }
.dt-description p { margin: 0; font-size: .96rem; line-height: 1.62; color: #475467; }
.dt-card a { display: inline-block; margin-top: 8px; font-size: .84rem; }

/* Each opaque incoming period band covers the preceding sticky label. */
.dt-period-rail { position: absolute; z-index: 4; top: 0; bottom: 0; right: 7px; width: 47px; pointer-events: none; display: flex; flex-direction: column; align-items: center; }
.dt-period-segment {
  position: absolute;
  left: 0;
  right: 0;
  overflow: visible;
  border-left: 7px solid var(--period-color);
  border-radius: 4px;
  background: color-mix(in srgb, var(--period-color) 11%, #fff);
}
.dt-period-floating-label {
  position: sticky;
  top: 90px;
  flex: none;
  box-sizing: border-box;
  width: 28px;
  padding: 10px 2px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  font-size: .83rem;
  line-height: 1.1;
  font-weight: 750;
  letter-spacing: .025em;
  color: var(--period-color);
  background: white;
  border: 1px solid color-mix(in srgb, var(--period-color) 35%, white);
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}
@media (max-width: 600px) {
  .dt-timeline { --axis-x: 73px; --card-left: 108px; --event-gap: 12; --month-gap: 26; --year-gap: 14; }
  .dt-month-label { left: 32px; width: calc(var(--axis-x) - 45px); font-size: .72rem; }
  .dt-month-label::after { right: -12px; width: 6px; }
  .dt-year-marker { font-size: .72rem; letter-spacing: -.03em; }
  .dt-point { left: calc(var(--axis-x) - 7px); width: 14px; height: 14px; border-radius: 5px; }
  .dt-card { right: 41px; padding: 12px 13px 13px; border-radius: 13px; }
  .dt-card time { font-size: .76rem; }
  .dt-card h3 { font-size: .96rem; }
  .dt-description p { font-size: .85rem; }
  .dt-period-rail { right: 0; width: 26px; }
  .dt-period-segment { border-left-width: 5px; }
  .dt-period-floating-label { width: 20px; padding: 7px 0; font-size: .66rem; }
}