/* =====================================================================
   01 · ОБО МНЕ — манифест с подсветкой слов и сменяющимся словом
   ===================================================================== */
.manifesto {
  max-width: 22ch;
  font-family: var(--f-display); font-weight: 500; font-size: clamp(26px, 4.2vw, 64px);
  line-height: 1.18; letter-spacing: -.02em; text-wrap: pretty;
}
.js .manifesto .mw { opacity: .16; transition: opacity .35s; }
.js .manifesto .mw.on { opacity: 1; }

.rotator { position: relative; display: inline-grid; vertical-align: bottom; color: var(--lime); transition: width .6s var(--ease-out); }
.rotator > span { grid-area: 1 / 1; justify-self: start; white-space: nowrap; transition: transform .7s var(--ease-out), opacity .5s; }
.rotator > span:not(.is-current) { transform: translateY(80%); opacity: 0; }
.rotator > span.is-out { transform: translateY(-80%); opacity: 0; }
.rotator svg { position: absolute; left: -2%; bottom: -.12em; width: 104%; height: .3em; overflow: visible; }

.about {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px);
  margin-top: clamp(56px, 8vw, 120px); align-items: start;
}
.about__card { display: flex; gap: 18px; align-items: center; }
.about__avatar {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 900; font-size: 24px; color: var(--on-accent);
  background: conic-gradient(from 200deg, var(--violet), var(--cyan), var(--lime), var(--amber), var(--coral), var(--violet));
}
.about__card b { display: block; font-size: 18px; }
.about__card small { color: var(--muted); font-size: 14px; }
.about__body { display: grid; gap: 18px; max-width: 62ch; color: var(--ink-soft); font-size: clamp(16px, 1.25vw, 19px); }
.about__body p + p { margin-top: 0; }
.about__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.about__tags li { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--ink); }
.js .about__body { transition-delay: .1s; }

@media (width <= 800px) { .about { grid-template-columns: minmax(0, 1fr); } }