/* ─────────────────────────────────────────────────────────────────────────────
   `aboutTimelineText` — hitos en filas con el año a la izquierda.
   Sin fondo propio, sin cajas, sin bordes alrededor del texto: sólo el filete
   vertical de 1px que une los años. Una sola curva: cubic-bezier(.22,.61,.36,1).
   Todo el color sale de las variables (claro y oscuro salen solos).
   ───────────────────────────────────────────────────────────────────────────── */

/* ── cabecera: titular a la izquierda, entradilla debajo ──────────────────── */
.g-aboutTimelineText-title {
  font-size: clamp(34px, 4.6vw, 66px);
  max-width: 24ch;
  /* trampa ya pisada: una palabra alemana larga a cuerpo de titular se parte en
     casi todas las líneas con hyphens:auto; aquí se permite romper, no guionar */
  overflow-wrap: break-word;
  hyphens: manual;
}
.g-aboutTimelineText-lede { max-width: 56ch; }

/* ── la pista de hitos ────────────────────────────────────────────────────── */
.g-aboutTimelineText-track {
  position: relative;
  margin-top: clamp(42px, 6vh, 76px);
  padding-left: clamp(22px, 2.4vw, 34px);
}

/* el filete base está siempre a la vista; el trazo de acento lo rellena el scroll */
.g-aboutTimelineText-line {
  position: absolute;
  left: 0;
  top: calc(clamp(20px, 2.6vh, 30px) + 3px);
  bottom: calc(clamp(20px, 2.6vh, 30px) + 6px);
  width: 1px;
  overflow: hidden;
  background: var(--line);
}
.g-aboutTimelineText-line > i {
  display: block;
  height: 100%;
  background: var(--a2);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

/* ── una fila: año · titulillo + párrafo ──────────────────────────────────── */
.g-aboutTimelineText-row {
  display: flex;
  align-items: baseline;
  gap: clamp(18px, 2.6vw, 44px);
  padding: clamp(20px, 2.6vh, 30px) 0;
}
.g-aboutTimelineText-year {
  flex: 0 0 clamp(82px, 9vw, 116px);
  font-family: var(--display), sans-serif;
  font-weight: 600;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--a2);
}
.g-aboutTimelineText-body { flex: 1 1 auto; min-width: 0; }
.g-aboutTimelineText-name {
  font-family: var(--display), sans-serif;
  font-weight: var(--dw);
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: var(--dt);
  line-height: 1.16;
  text-wrap: balance;
  color: var(--text);
}
.g-aboutTimelineText-text {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--t2);
  max-width: 62ch;
  margin-top: 10px;
  text-wrap: pretty;
}

/* ── móvil: el año encima del titulillo, la línea pegada al margen ────────── */
@media (max-width: 900px) {
  .g-aboutTimelineText-title { font-size: clamp(30px, 8.6vw, 44px); max-width: none; }
  .g-aboutTimelineText-lede { max-width: none; }
  .g-aboutTimelineText-track { margin-top: 32px; padding-left: 16px; }
  .g-aboutTimelineText-line { top: 21px; bottom: 23px; }
  .g-aboutTimelineText-row { display: block; padding: 18px 0; }
  .g-aboutTimelineText-year { display: block; margin-bottom: 7px; font-size: 16px; letter-spacing: .16em; }
  .g-aboutTimelineText-name { font-size: 21px; }
  .g-aboutTimelineText-text { font-size: 15.5px; max-width: none; margin-top: 7px; }
}

/* ── sin movimiento: la línea queda entera, nada se anima ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .g-aboutTimelineText-line > i { transform: scaleY(1); transition: none; }
}