/* ============================================================
   ПРО НАС — хронологія-«стебло» з листочками
   ============================================================ */
.about-stem {
  --stem-x: 18px;
  --stem-w: 2px;
  --grow: 0;
  --leaf-side: -1;
  position: relative;
  padding: 8px 0 20px;
}

.about-stem__track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--stem-x);
  width: var(--stem-w);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}
.about-stem__rail {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--c-sage) 28%, var(--c-border));
  border-radius: 2px;
}
.about-stem__grow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--grow) * 100%);
  background: linear-gradient(180deg, var(--c-announce), var(--c-sage));
  border-radius: 2px;
  transform-origin: top center;
  will-change: height;
}

.about-stem__item {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 22px;
  align-items: start;
  padding: clamp(12px, 1.8vw, 20px) 0;
}
.about-stem__item--nudge-a { --photo-nudge: 0; }
.about-stem__item--nudge-b { --photo-nudge: 4px; }
.about-stem__item--nudge-c { --photo-nudge: 2px; }

.about-stem__spine {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 28px;
  padding-top: 4px;
}

.about-stem__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 3px solid color-mix(in srgb, var(--c-sage) 45%, var(--c-border));
  box-sizing: border-box;
  transition:
    border-color .55s var(--ease),
    background-color .55s var(--ease),
    transform .55s var(--ease);
  transform: scale(.86);
}
.about-stem__item.is-open .about-stem__dot {
  background: var(--c-sage);
  border-color: var(--c-announce);
  transform: scale(1);
}

.about-stem__leaf {
  position: absolute;
  /* origin ≈ 88.6% висоти → база на центрі точки (4px + 7px) */
  top: -24px;
  width: 28px;
  height: 40px;
  color: var(--c-sage);
  opacity: 0;
  transition:
    transform .7s var(--ease),
    opacity .4s var(--ease);
  will-change: transform, opacity;
  pointer-events: none;
}

/* Origin = база шляху в SVG — відмалювання з точки вгору-вбік */
.about-stem__leaf--left {
  right: 50%;
  left: auto;
  transform-origin: 87.5% 88.6%;
  transform: rotate(-24deg) scale(.12);
}
.about-stem__leaf--right {
  left: 50%;
  right: auto;
  transform-origin: 12.5% 88.6%;
  transform: rotate(24deg) scale(.12);
}

.about-stem__item.is-open .about-stem__leaf--left {
  opacity: 1;
  transform: rotate(-24deg) scale(1);
}
.about-stem__item.is-open .about-stem__leaf--right {
  opacity: 1;
  transform: rotate(24deg) scale(1);
}

.about-stem__leaf-blade {
  fill: color-mix(in srgb, var(--c-sage) 78%, #cfe8b8);
  stroke: var(--c-announce);
  stroke-width: 1.2;
}
.about-stem__leaf-vein {
  fill: none;
  stroke: var(--c-announce);
  stroke-width: 1.35;
  stroke-linecap: round;
  opacity: .55;
}
.about-stem__leaf-vein--s { stroke-width: 1; opacity: .35; }

.about-stem__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity .45s var(--ease),
    transform .55s var(--ease);
  will-change: opacity, transform;
}
.about-stem__item.is-open .about-stem__body {
  opacity: 1;
  transform: translateY(0);
}

.about-stem__copy {
  align-self: stretch;
  text-align: left;
}

.about-stem__year {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1;
  color: var(--about-year, #9a5a52);
}
.about-stem__name {
  margin: 8px 0 0;
  font-family: var(--f-accent);
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-ink);
}
.about-stem__text {
  margin: 8px 0 0;
  font-size: clamp(14.5px, 1.35vw, 16px);
  line-height: 1.55;
  color: var(--c-body);
  max-width: 38ch;
}

.about-stem__photo {
  margin: 0;
  flex-shrink: 0;
  align-self: flex-start;
  width: clamp(108px, 12vw, 140px);
  height: clamp(108px, 12vw, 140px);
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid color-mix(in srgb, var(--c-sage) 35%, var(--c-surface));
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--c-oat) 80%, transparent),
    0 8px 18px color-mix(in srgb, var(--c-ink) 12%, transparent);
  transform: translateY(var(--photo-nudge, 0)) scale(.92);
  opacity: 0;
  transition:
    opacity .45s var(--ease),
    transform .55s var(--ease);
  will-change: transform, opacity;
}
.about-stem__item.is-open .about-stem__photo {
  opacity: 1;
  transform: translateY(var(--photo-nudge, 0)) scale(1);
}
.about-stem__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.about-stem__photo--a,
.about-stem__photo--b,
.about-stem__photo--c {
  width: clamp(108px, 12vw, 140px);
  height: clamp(108px, 12vw, 140px);
}

@media (max-width: 1024px) {
  .about-stem {
    --stem-x: 33px;
    padding-left: 15px;
  }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .about-stem__item {
    column-gap: 20px;
  }
  .about-stem__photo,
  .about-stem__photo--a,
  .about-stem__photo--b,
  .about-stem__photo--c {
    width: clamp(100px, 13vw, 128px);
    height: clamp(100px, 13vw, 128px);
  }
}

@media (max-width: 767px) {
  .about-stem { --stem-x: 29px; }
  .about-stem__item {
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 18px;
    padding: 12px 0;
  }
  .about-stem__leaf {
    top: -19px;
    width: 24px;
    height: 34px;
  }
  .about-stem__year { font-size: clamp(22px, 6vw, 28px); }
  .about-stem__name { font-size: clamp(16px, 4.5vw, 19px); }
  .about-stem__text { font-size: 15px; }
  .about-stem__photo,
  .about-stem__photo--a,
  .about-stem__photo--b,
  .about-stem__photo--c {
    width: 108px;
    height: 108px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-stem { --grow: 1; }
  .about-stem__item .about-stem__leaf,
  .about-stem__item .about-stem__body,
  .about-stem__item .about-stem__photo,
  .about-stem__item .about-stem__dot {
    opacity: 1;
    transition: none;
  }
  .about-stem__item .about-stem__leaf--left {
    transform: rotate(-24deg);
  }
  .about-stem__item .about-stem__leaf--right {
    transform: rotate(24deg);
  }
  .about-stem__item .about-stem__photo {
    transform: translateY(var(--photo-nudge, 0));
  }
  .about-stem__item .about-stem__body { transform: none; }
  .about-stem__item .about-stem__dot {
    background: var(--c-sage);
    border-color: var(--c-announce);
    transform: none;
  }
}