/* ═══ СТРАНИЦА «ОБО МНЕ» ════════════════════════════════════════════
   Композиция — по странице Эстер Перель (estherperel.com/about, выбор Дани
   25.09): студийный фон под портрет с дугой снизу, узкая колонка текста под
   ним, крупные плитки, тёмная полоса-линза с выпуклыми краями. Цвет и
   типографика — «Эпл»: холст и полотно росчерков те же, что на главной,
   холодный серый #f5f5f7 под плитками,
   почти чёрный текст, плотные заголовки, воздух между полосами. Бежевой
   подложки Перель здесь нет сознательно — беж на сайте запрещён (20.09).
   Размеры — компонентными переменными на body.about-page, а не литералами:
   test_design_tokens считает сырые кегли и тени по всем таблицам. */
body.about-page{
  --ab-tile:#f5f5f7;
  --ab-ink:#1d1d1f;
  --ab-soft:#6e6e73;
  --ab-line:rgba(29,29,31,.1);
  --ab-deep:var(--night);
  --ab-edge-dark:rgba(255,255,255,.12);
  --ab-col:680px;                              /* узкая колонка, как у Перель 600 из 1200 */
  --ab-gap:clamp(88px,11vw,160px);             /* воздух между полосами */
  --ab-r:28px;
  --ab-r-sm:18px;
  --ab-arc:clamp(28px,5vw,72px);               /* глубина дуги полосы-линзы */
  --ab-ease:cubic-bezier(.16,1,.3,1);
  --ab-h1:clamp(34px,4.2vw,50px);
  --ab-h2:clamp(30px,3.6vw,46px);
  --ab-num:clamp(46px,5.6vw,76px);
  --ab-year:clamp(34px,3.4vw,44px);
  --ab-paper-w:clamp(150px,15vw,200px);
  color:var(--ab-ink);
}
body.about-page main h1,
body.about-page main h2,
body.about-page main h3{color:var(--ab-ink)}

.ab-rail{max-width:var(--rail);margin-inline:auto;padding-inline:var(--rail-pad)}
.ab-col{max-width:calc(var(--ab-col) + 2 * var(--rail-pad));margin-inline:auto;padding-inline:var(--rail-pad)}
.ab-sec{padding-top:var(--ab-gap)}

.ab-h2{margin:0;font-family:'Arsenal',Georgia,serif;font-weight:700;font-size:var(--ab-h2);
  line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
.ab-sub{margin:14px 0 0;font-size:var(--fs-lede);line-height:1.5;color:var(--ab-soft);max-width:52ch}
.ab-eyebrow{display:block;font-size:var(--fs-fine);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--violet)}

/* ── 1. первый экран ─────────────────────────────────────────────────
   Студийный фон во всю ширину, низ — пологая дуга (эллипс шире экрана:
   края срезаны на ~9 % высоты, как у Перель). Портрета пока нет: слот
   пустой, фото ляжет вырезкой по центру, плечами на дугу. */
.ab-hero__stage{position:relative;height:clamp(240px,33vw,470px);
  background:
    radial-gradient(42% 70% at 50% 78%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),
    linear-gradient(180deg,#e9ebf0 0%,#f1f2f5 55%,#f7f7f9 100%);
  clip-path:ellipse(120% 100% at 50% 0)}
.ab-hero__copy{padding-top:clamp(36px,4.4vw,56px)}
.ab-hero .crumbs{margin:0 0 20px;font-size:var(--fs-note);color:var(--ab-soft)}
.ab-hero .crumbs a{color:inherit;text-decoration:none;border-bottom:1px solid var(--ab-line)}
.ab-hero__h{margin:12px 0 0;font-family:'Arsenal',Georgia,serif;font-weight:700;
  font-size:var(--ab-h1);line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
.ab-hero__lead{margin:20px 0 0;font-size:var(--fs-lede);line-height:1.55;color:var(--ab-soft);max-width:54ch}
.ab-hero__cta{margin-top:30px}

/* стрелка в кружке — как у «Узнать подробнее» в шапке (.topbar__arr) и
   «Записаться на приём» на главной: на фиолетовой пилюле кружок белый, на
   светлой — фиолетовый. Правый отступ кнопки поджат, кружок садится к краю */
.ab-arr{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  background:var(--violet);color:#fff;font-size:var(--fs-note);line-height:1;font-style:normal;
  transition:transform .4s var(--dl-ease)}
.nx-btn--primary .ab-arr{background:#fff;color:var(--violet)}
.nx-btn:has(.ab-arr){padding-right:11px;gap:14px}
.nx-btn:hover .ab-arr{transform:translateX(2px)}
.nx-btn:hover .ab-arr--down{transform:translateY(2px)}
.nx-btn:hover .ab-arr--out{transform:translate(2px,-2px)}

/* ── 2. цифры: крупные плитки на месте двух фото Перель ─────────────── */
.ab-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ab-fig{display:flex;flex-direction:column;justify-content:space-between;gap:18px;
  min-height:clamp(150px,15vw,210px);padding:clamp(22px,2.4vw,32px);
  border-radius:var(--ab-r);background:var(--ab-tile)}
.ab-fig__n{font-family:'Arsenal',Georgia,serif;font-weight:700;font-size:var(--ab-num);
  line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ab-ink)}
.ab-fig__l{font-size:var(--fs-md);line-height:1.35;color:var(--ab-soft)}

/* ── 3. направления: перечень в две колонки, счёт номером ──────────── */
.ab-dirs__list{list-style:none;margin:clamp(28px,3.4vw,44px) 0 0;padding:0;
  columns:2;column-gap:clamp(32px,5vw,80px)}
.ab-dir{break-inside:avoid;display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;
  align-items:baseline;padding:20px 0;border-top:1px solid var(--ab-line)}
.ab-dir__n{font-size:var(--fs-note);font-weight:600;color:var(--ab-soft);font-variant-numeric:tabular-nums}
.ab-dir__t{font-size:var(--fs-lg);line-height:1.45;color:var(--ab-ink)}

/* ── 4. наука: тёмная полоса-линза, края выпуклые сверху и снизу ────── */
/* отступ вокруг полосы — половина обычного (27.09.2026): у полосы свой воздух
   и у соседей свой, на стыке набегало 321 px при 150 между прочими полосами */
.ab-sci{margin-top:calc(var(--ab-gap) / 2);padding-block:calc(var(--ab-arc) + clamp(12px,1.6vw,24px));
  background:var(--ab-deep);color:#fff;border-radius:50% / var(--ab-arc)}
.ab-sci + .ab-sec{padding-top:calc(var(--ab-gap) / 2)}
body.about-page .ab-sci .ab-h2{color:#fff;text-align:center}
.ab-sci__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:12px;margin-top:clamp(32px,4vw,52px)}
.ab-sci__it{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,2.6vw,34px);
  border-radius:var(--ab-r-sm);background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px var(--ab-edge-dark)}
.ab-sci__year{font-family:'Arsenal',Georgia,serif;font-weight:700;font-size:var(--ab-year);
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ab-sci__kind{font-size:var(--fs-mini);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lavender-2)}
.ab-sci__t{margin:0;font-size:var(--fs-md);line-height:1.55;color:rgba(255,255,255,.82)}
/* кнопка — штатная светлая .nx-btn--light: свечение и ховер как везде */
.ab-sci__go{align-self:flex-start;margin-top:auto}

/* ── 5. образование: узкая колонка, год слева ──────────────────────── */
.ab-edu__list{list-style:none;margin:clamp(24px,3vw,36px) 0 0;padding:0}
.ab-edu__it{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:baseline;
  padding:18px 0;border-top:1px solid var(--ab-line)}
.ab-edu__year{font-weight:700;font-size:var(--fs-md);font-variant-numeric:tabular-nums;color:var(--ab-ink)}
.ab-edu__t{font-size:var(--fs-md);line-height:1.55;color:var(--ab-ink)}

/* ── 6. квалификация: списки под раскрытием, как «Характеристики» ──── */
.ab-folds{margin-top:clamp(24px,3vw,36px);border-bottom:1px solid var(--ab-line);
  interpolate-size:allow-keywords}
.ab-fold{border-top:1px solid var(--ab-line)}
.ab-fold__s{display:grid;grid-template-columns:minmax(0,1fr) auto 28px;gap:14px;align-items:center;
  padding:22px 0;cursor:pointer;list-style:none}
.ab-fold__s::-webkit-details-marker{display:none}
.ab-fold__s:focus-visible{outline:2px solid var(--violet);outline-offset:4px;border-radius:6px}
.ab-fold__t{font-family:'Arsenal',Georgia,serif;font-weight:700;font-size:var(--fs-h3);line-height:1.25}
.ab-fold__n{font-size:var(--fs-note);color:var(--ab-soft);font-variant-numeric:tabular-nums}
/* плюс, который становится минусом: вертикальная черта складывается */
.ab-fold__x{position:relative;width:28px;height:28px;border-radius:50%;background:var(--ab-tile)}
.ab-fold__x::before,.ab-fold__x::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;
  margin:-1px 0 0 -5.5px;border-radius:2px;background:var(--ab-ink);transition:transform .45s var(--ab-ease)}
.ab-fold__x::after{transform:rotate(90deg)}
.ab-fold[open] .ab-fold__x::after{transform:rotate(0)}
.ab-fold::details-content{block-size:0;overflow:hidden;
  transition:block-size .5s var(--ab-ease),content-visibility .5s allow-discrete}
.ab-fold[open]::details-content{block-size:auto}
.ab-fold__list{list-style:none;margin:0;padding:0 0 26px;display:grid;gap:12px}
.ab-fold__list li{position:relative;padding-left:20px;font-size:var(--fs-md);line-height:1.55;color:var(--ab-ink)}
.ab-fold__list li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;
  border-radius:50%;background:var(--lavender)}

/* ── 7. дипломы: стопки по видам на общем холсте страницы ──────────── */
.ab-dip{padding-top:var(--ab-gap);scroll-margin-top:96px}
.ab-dip__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.ab-dip__count{display:flex;flex-direction:column;align-items:flex-end;margin:0}
.ab-dip__count b{font-family:'Arsenal',Georgia,serif;font-weight:700;font-size:var(--ab-num);
  line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ab-dip__count span{font-size:var(--fs-note);color:var(--ab-soft)}
/* стопки: три перенабранных бланка вида, верхний — старший документ.
   Веер — отдельными свойствами rotate/translate: transform у стопки держит
   правило проявления .nx-rv, у бланков он свободен, но так одинаково везде */
.ab-stacks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);
  margin-top:clamp(32px,4vw,56px)}
.ab-stack{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;
  cursor:pointer;text-align:center;border-radius:var(--ab-r-sm)}
.ab-stack:focus-visible{outline:2px solid var(--violet);outline-offset:6px}
.ab-stack__pile{position:relative;display:block;width:var(--ab-paper-w);height:calc(var(--ab-paper-w) * 1.32);
  margin:18px 0 22px}
.ab-paper{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14% 12% 10%;background:#fff;border-radius:6px;box-shadow:var(--shadow-sm);
  transition:rotate .6s var(--ab-ease),translate .6s var(--ab-ease),box-shadow .6s var(--ab-ease)}
/* двойная рамка бланка: тонкая линия, белый зазор, ещё линия */
.ab-paper::before{content:"";position:absolute;inset:7px;border:1px solid var(--lavender-2);border-radius:3px;
  box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px var(--lavender-2);pointer-events:none}
.ab-paper:nth-child(1):not(:last-child){rotate:-5deg;translate:-8px 2px}
.ab-paper:nth-child(2):not(:last-child){rotate:4deg;translate:7px 0}
.ab-paper:last-child{rotate:-1deg}
@media(hover:hover) and (pointer:fine){
  .ab-stack:hover .ab-paper:nth-child(1):not(:last-child){rotate:-15deg;translate:-38% 6%}
  .ab-stack:hover .ab-paper:nth-child(2):not(:last-child){rotate:13deg;translate:38% 6%}
  .ab-stack:hover .ab-paper:last-child{translate:0 -8px;box-shadow:var(--shadow)}
}
.ab-stack.is-open .ab-paper:nth-child(1):not(:last-child){rotate:-15deg;translate:-38% 6%}
.ab-stack.is-open .ab-paper:nth-child(2):not(:last-child){rotate:13deg;translate:38% 6%}
.ab-stack.is-open .ab-paper:last-child{translate:0 -8px;box-shadow:var(--shadow)}
.ab-paper__seal{width:26%;color:var(--violet);margin-top:4%;flex:0 0 auto}
.ab-paper__k{font-size:var(--fs-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  line-height:1.35;color:var(--violet);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ab-paper__t{font-family:'Arsenal',Georgia,serif;font-weight:700;font-size:var(--fs-md);line-height:1.2;
  color:var(--ab-ink);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ab-paper__y{margin-top:auto;display:flex;align-items:center;gap:8px;font-family:'Arsenal',Georgia,serif;
  font-weight:700;font-size:var(--fs-lg);color:var(--violet)}
.ab-paper__y::before,.ab-paper__y::after{content:"";width:16px;height:1px;background:var(--lavender)}
.ab-stack__name{font-family:'Arsenal',Georgia,serif;font-weight:700;font-size:var(--fs-h4);line-height:1.2;
  color:var(--ab-ink);max-width:22ch;text-wrap:balance}
.ab-stack__n{font-size:var(--fs-note);color:var(--ab-soft)}
.ab-stack.is-open .ab-stack__name{color:var(--violet)}

/* список вида: белая панель под стопками, строка — миниатюра, вид, суть, год */
.ab-dip__lists{margin-top:clamp(28px,3.4vw,44px)}
.ab-dip__list{background:#fff;border-radius:var(--ab-r);padding:clamp(18px,2.4vw,32px);
  box-shadow:inset 0 0 0 1px var(--ab-line),var(--shadow-sm);
  animation:ab-drop .55s var(--ab-ease)}
@keyframes ab-drop{from{opacity:0;translate:0 -10px}to{opacity:1;translate:0 0}}
html.js .ab-dip__list[hidden]{display:none}
html:not(.js) .ab-dip__list + .ab-dip__list{margin-top:16px}
.ab-dip__lh{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:14px;
  border-bottom:1px solid var(--ab-line)}
.ab-dip__lh h3{margin:0;font-family:'Arsenal',Georgia,serif;font-weight:700;font-size:var(--fs-h3)}
.ab-dip__lh span{font-size:var(--fs-note);color:var(--ab-soft)}
.ab-dip__rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,3vw,40px)}
.ab-dip__i{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:12px 10px;margin:0 -10px;border:0;border-bottom:1px solid var(--ab-line);background:none;
  text-align:left;cursor:zoom-in;border-radius:12px;transition:background .3s}
.ab-dip__i:hover{background:var(--ab-tile)}
.ab-dip__i:active{scale:.99}
.ab-dip__i:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.ab-dip__i img{width:52px;height:68px;object-fit:cover;border-radius:6px;box-shadow:var(--shadow-sm);background:var(--ab-tile)}
.ab-dip__txt{font-size:var(--fs-sm);line-height:1.4;color:var(--ab-ink)}
.ab-dip__txt small{display:block;font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--violet);margin-bottom:2px}
.ab-dip__y{font-family:'Arsenal',Georgia,serif;font-weight:700;font-size:var(--fs-lg);color:var(--ab-soft);
  font-variant-numeric:tabular-nums}

/* ── 8. приём: одна дверь дальше ───────────────────────────────────── */
.ab-priem{padding-block:var(--ab-gap);text-align:center}
.ab-priem .ab-sub{margin-inline:auto}
.ab-priem__go{margin-top:32px}

/* ── лайтбокс дипломов ─────────────────────────────────────────────
   Диалог растянут на весь экран, картинка центрируется внутри — так
   управляющие кнопки всегда на экране независимо от пропорций скана. */
dialog.dipbox{border:0;padding:0;margin:0;width:100vw;max-width:100vw;
  height:100dvh;max-height:100dvh;background:transparent;overflow:hidden;
  display:none;place-items:center}
dialog.dipbox[open]{display:grid}
dialog.dipbox::backdrop{background:rgba(28,20,42,.86)}
dialog.dipbox .dipbox__img{display:block;max-width:min(94vw,1180px);max-height:82dvh;
  margin:0 auto;border-radius:10px;background:#fff;box-shadow:var(--veil)}
dialog.dipbox .dipbox__x{position:fixed;top:18px;right:18px;margin:0}
dialog.dipbox .dipbox__x button{width:42px;height:42px;border-radius:50%;border:0;
  background:rgba(255,255,255,.18);color:#fff;font-size:24px;line-height:1;cursor:pointer}
dialog.dipbox .dipbox__x button:hover{background:rgba(255,255,255,.32)}
dialog.dipbox .dipbox__nav{position:fixed;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.18);color:#fff;font-size:26px;line-height:1}
dialog.dipbox .dipbox__nav:hover{background:rgba(255,255,255,.32)}
dialog.dipbox .dipbox__nav--prev{left:20px}
dialog.dipbox .dipbox__nav--next{right:20px}
dialog.dipbox .dipbox__c{position:fixed;left:0;right:0;bottom:22px;margin:0;
  text-align:center;color:rgba(255,255,255,.82);
  font:600 13px/1 'Open Sans',sans-serif;letter-spacing:.1em}


/* ── адаптив ───────────────────────────────────────────────────────── */
@media(max-width:900px){
  .ab-figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-stacks{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(28px,5vw,48px)}
  .ab-dip__rows{grid-template-columns:1fr}
}
@media(max-width:760px){
  .ab-dirs__list{columns:1}
}
@media(max-width:640px){
  body.about-page{--ab-r:22px}
  .ab-fig{min-height:132px;gap:12px}
  .ab-edu__it{grid-template-columns:1fr;gap:4px}
  .ab-dir{grid-template-columns:32px minmax(0,1fr);padding:16px 0}
  body.about-page{--ab-paper-w:min(38vw,150px)}
  .ab-stacks{gap:28px 12px}
  .ab-paper{gap:5px}
  .ab-paper__k{-webkit-line-clamp:2}
  .ab-paper__t{font-size:var(--fs-fine);-webkit-line-clamp:3}
  .ab-stack__name{font-size:var(--fs-md)}
  /* веер уже: две колонки стопок, полный размах вылезал за край экрана */
  .ab-stack.is-open .ab-paper:nth-child(1):not(:last-child){rotate:-8deg;translate:-8% 3%}
  .ab-stack.is-open .ab-paper:nth-child(2):not(:last-child){rotate:7deg;translate:8% 3%}
  .ab-dip__count{align-items:flex-start}
  dialog.dipbox .dipbox__nav--prev{left:8px}
  dialog.dipbox .dipbox__nav--next{right:8px}
  dialog.dipbox .dipbox__x{top:12px;right:12px}
  dialog.dipbox .dipbox__img{max-width:92vw;max-height:72dvh}
}
@media(prefers-reduced-motion:reduce){
  .ab-fold__x::before,.ab-fold__x::after,.ab-arr{transition:none}
  .ab-paper,.ab-dip__i{transition:none}
  .ab-dip__list{animation:none}
  .ab-fold::details-content{transition:none}
}

/* печать: закрытые списки квалификации раскрываются, иначе на бумаге
   остаются одни заголовки */
@media print{
  .ab-fold::details-content{content-visibility:visible;block-size:auto}
  .ab-fold__x{display:none}
}