/* ══════════════════════════════════════════════════════════
   About You UZ — секция «О нас» (графитовый акт)
   Макет: ../Канвас — рабочие файлы/AboutManifesto.dc.html (1440).
   Жест страницы №2: маркерный штрих под «задача определяет решение»
   рисуется stroke-dashoffset'ом один раз, при появлении секции.
   ══════════════════════════════════════════════════════════ */

.manifesto{
  background:var(--graphite);color:var(--bone);
  padding:clamp(64px,12vh,130px) var(--pad) clamp(56px,10vh,110px);
}

/* ── две колонки: манифест слева, клиенты справа (07.09) ── */
.manifesto__grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vh,64px) clamp(40px,5vw,96px)}   /* во всю ширину полей: без max-width (Никита 07.09) */
@media (min-width:1000px){
  .manifesto__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
}
@media (min-width:1600px){
  .manifesto__grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
}

/* ── клиенты: белые знаки в три колонки, приглушены одинаково,
   высоты по оптической массе (те же ступени, что были в v3-scale) ── */
.manifesto__logos{
  --logo-xw:22px;--logo-w:26px;--logo-m:32px;--logo-t:44px;--logo-s:50px;--logo-row:56px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vh,22px) clamp(18px,2vw,32px);
  margin:clamp(28px,5vh,44px) 0 0;padding:0;list-style:none;
}
.manifesto__logos li{display:flex;align-items:center;justify-content:center;min-width:0;height:var(--logo-row)}
/* на широких экранах — четыре колонки и знаки крупнее, чтобы правая колонка
   доходила до поля, а не оставляла пустоту справа */
@media (min-width:1000px){
  .manifesto__logos{--logo-xw:24px;--logo-w:29px;--logo-m:36px;--logo-t:50px;--logo-s:56px;--logo-row:62px;gap:clamp(16px,2.4vh,26px) clamp(20px,2.4vw,40px)}
}
@media (min-width:1600px){
  .manifesto__logos{grid-template-columns:repeat(4,minmax(0,1fr));--logo-xw:24px;--logo-w:29px;--logo-m:36px;--logo-t:50px;--logo-s:56px;--logo-row:62px;gap:clamp(16px,2.4vh,26px) clamp(20px,2.4vw,40px)}
}
.manifesto__logo{
  width:auto;max-width:90%;object-fit:contain;opacity:.62;
  transition:opacity var(--dur-s) var(--ease);
}
.manifesto__logo--xw{max-height:var(--logo-xw)}
.manifesto__logo--w {max-height:var(--logo-w)}
.manifesto__logo--m {max-height:var(--logo-m)}
.manifesto__logo--t {max-height:var(--logo-t)}
.manifesto__logo--s {max-height:var(--logo-s)}
.manifesto__logo--light{opacity:.78}
.manifesto__logo--heavy{opacity:.5}
@media (hover:hover){.manifesto__logo:hover{opacity:1}}
@media (max-width:999px){
  .manifesto__logos{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  .manifesto__logos{--logo-xw:18px;--logo-w:21px;--logo-m:26px;--logo-t:36px;--logo-s:40px;--logo-row:44px;gap:10px 16px}
}
@media (prefers-reduced-motion:reduce){.manifesto__logo{transition:none}}

/* ── манифест ── */
.manifesto__text{
  margin:clamp(28px,5vh,44px) 0 0;max-width:1120px;   /* на v3 колонка сама ограничивает ширину */
  font-size:var(--fs-manifest);font-weight:500;
  line-height:1.48;letter-spacing:-.005em;
}
.manifesto__accent{font-style:normal;color:var(--signal-lift)}

.manifesto__marked{position:relative;display:inline-block}
/* смещение и толщина штриха — в em: на 1440 это те же -11px/16px при кегле 33,
   а на планшете и телефоне (кегль 22) штрих не наезжает на следующую строку */
.manifesto__underline{
  position:absolute;left:0;bottom:-.33em;
  width:100%;height:.48em;overflow:visible;pointer-events:none;
}
.manifesto__stroke{
  stroke:var(--signal-lift);
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset var(--dur-m) var(--ease) var(--dur-s);
}
.manifesto.in .manifesto__stroke{stroke-dashoffset:0}

/* ── строка «Команда» ── ТОЛЬКО для index.html (sections/about.html).
   Аудит 07.09 пометил .manifesto__team*, __avatars, __avatar*, __impressum*
   как мёртвые для v3 — это так: v2-about.html их не содержит, команду на
   v2/v3 рисует .vteam (v2-team.css). Но index.html (about.html:7–24) ими
   живёт, поэтому правила остаются. Убрать можно вместе с index.html. */
.manifesto__team{
  display:flex;align-items:flex-start;gap:60px;
  margin-top:clamp(56px,10vh,120px);padding-top:36px;
  border-top:1px solid var(--faint);
}
.manifesto__team-head{
  display:flex;flex-direction:column;gap:10px;
  flex:0 0 auto;width:290px;
}
.manifesto__team-h{
  margin:0;font-family:var(--disp);font-weight:900;text-transform:uppercase;
  font-size:var(--fs-stamp);line-height:1;letter-spacing:-.015em;color:var(--bone);
}
.manifesto__team-note{
  margin:0;font-size:var(--fs-small);line-height:1.55;color:var(--dim);
}
.manifesto__team-body{display:flex;flex-direction:column;gap:24px;min-width:0}

/* цепочка перекрывающихся кружков */
.manifesto__avatars{display:flex;--av:64px;--av-lap:-14px}
.manifesto__avatar{
  flex:0 0 auto;width:var(--av);height:var(--av);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:2px solid var(--graphite);
  background:linear-gradient(165deg,var(--avatar-a) 0%,var(--graphite-2) 100%);
  font-family:var(--disp);font-weight:700;font-size:var(--fs-body);
  color:var(--dim-half);line-height:1;
}
.manifesto__avatar:nth-child(even){
  background:linear-gradient(165deg,var(--avatar-b) 0%,var(--graphite-2) 100%);
}
.manifesto__avatar + .manifesto__avatar{margin-left:var(--av-lap)}
.manifesto__avatar--more{
  background:var(--graphite);border:1px dashed var(--faint-30);
  font-family:var(--body);font-weight:400;font-size:20px;color:var(--signal-lift);
}

/* импрессум под кружками */
.manifesto__impressum{
  margin:0;font-size:var(--fs-body);line-height:2;color:var(--dim);max-width:78ch;
}
.manifesto__impressum b{color:var(--bone);font-weight:600}
.manifesto__impressum i{color:var(--signal-lift);font-style:normal}

/* ── адаптив ── */
@media (max-width:900px){
  .manifesto__team{flex-direction:column;gap:clamp(22px,4vh,28px)}
  .manifesto__team-head{width:auto}
  .manifesto__text{line-height:1.45}
  .manifesto__impressum{line-height:1.85;max-width:60ch}
}
@media (max-width:520px){
  .manifesto__avatars{--av:52px;--av-lap:-12px}
  .manifesto__avatar{font-size:var(--fs-small)}
  .manifesto__avatar--more{font-size:17px}
}

@media (prefers-reduced-motion:reduce){
  .manifesto__stroke{stroke-dashoffset:0;transition:none}
}