/* Страница «Обо мне» (about.html), раскладка «Портрет и письмо»: фото во всю ширину, письмо с подписью, принципы в две колонки, шаги в ряд, лист статуса, направления оглавлением, призыв */
body.subpage { background: #171819; }
.canvas--sub { padding: 0; }
.canvas--sub .site-footer { margin-top: calc(120 * var(--u)); }
.canvas--sub .site-footer__inner { margin: 0 calc(110 * var(--u)); }
dl, dd { margin: 0; }
ol { margin: 0; padding: 0; list-style: none; }
.canvas--sub .heading { margin-top: 0; }
.ab-num { font: 400 calc(11.5 * var(--u)) / calc(16 * var(--u)) var(--label-font); letter-spacing: 0.18em; color: var(--gold); }
.ab-title { font: 500 calc(20 * var(--u)) / calc(26 * var(--u)) var(--sans); color: #f3f3f2; }
.ab-p { font: 400 calc(15 * var(--u)) / calc(24 * var(--u)) var(--sans); color: var(--text); text-wrap: pretty; }
.ab-btn { position: static; display: inline-flex; height: calc(50 * var(--u)); }
/* Первый экран: кабинет во всю ширину, текст на тёмной стене справа */
.ab-hero { position: relative; height: calc(660 * var(--u)); }
.ab-hero__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%;
-webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, #000 84%, transparent 100%); }
.ab-hero__shade { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
background: linear-gradient(180deg, rgba(23, 24, 25, 0.55) 0, rgba(23, 24, 25, 0) calc(150 * var(--u))),
linear-gradient(90deg, rgba(23, 24, 25, 0) 50%, rgba(23, 24, 25, 0.45) 70%, rgba(23, 24, 25, 0.6) 100%); }
.ab-hero__text { position: absolute; left: calc(786 * var(--u)); top: calc(172 * var(--u)); width: calc(464 * var(--u)); }
.ab-name { margin-top: calc(20 * var(--u)); }
.ab-name .hero__name { display: block; margin-left: calc(-3 * var(--u)); font-size: calc(64 * var(--u)); line-height: calc(76 * var(--u)); }
.ab-role { margin-top: calc(12 * var(--u)); font-size: calc(24 * var(--u)); line-height: calc(32 * var(--u)); }
.ab-hero .lead { margin-top: calc(26 * var(--u)); text-wrap: pretty; }
/* Письмо: цитата-столбик слева, три абзаца и подпись */
.ab-letter { display: grid; grid-template-columns: calc(340 * var(--u)) calc(640 * var(--u)); column-gap: calc(40 * var(--u)); padding: calc(70 * var(--u)) calc(110 * var(--u)) 0; }
.ab-quote { margin: 0; padding-top: calc(10 * var(--u)); }
.ab-quote .quote__arrow { position: static; display: block; }
.ab-quote .quote__text { margin-top: calc(19 * var(--u)); }
.ab-letter__body > p:not(.ab-sign) { font: 400 calc(18 * var(--u)) / calc(30 * var(--u)) var(--sans); color: #dcdcdb; text-wrap: pretty; }
.ab-letter__body > p + p { margin-top: calc(22 * var(--u)); }
.ab-letter__body > .ab-sign { display: flex; align-items: center; gap: calc(18 * var(--u)); margin-top: calc(40 * var(--u)); font: 400 calc(12 * var(--u)) / 1.2 var(--label-font); letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-soft); }
.ab-sign__rule { width: calc(56 * var(--u)); height: 1px; background: rgba(201, 166, 124, 0.6); }
/* Как я работаю: заголовок и пять принципов в сетке 2 × 3, между ними волосные линии */
.ab-principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(96 * var(--u)); padding: calc(90 * var(--u)) calc(110 * var(--u)) 0; }
.ab-principles > .heading { padding-top: calc(20 * var(--u)); }
.ab-pr { display: grid; grid-template-columns: calc(56 * var(--u)) minmax(0, 1fr); padding: calc(26 * var(--u)) 0 calc(44 * var(--u)); border-top: 1px solid rgba(201, 166, 124, 0.24); }
.ab-pr .ab-num { padding-top: calc(5 * var(--u)); }
.ab-pr .ab-p { margin-top: calc(12 * var(--u)); }
/* Как начинается работа: четыре шага в ряд */
.ab-steps { padding: calc(90 * var(--u)) calc(110 * var(--u)) 0; }
.ab-steps__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: calc(44 * var(--u)); }
.ab-step { padding: calc(2 * var(--u)) calc(30 * var(--u)) calc(4 * var(--u)); border-left: 1px solid rgba(201, 166, 124, 0.24); }
.ab-step:first-child { padding-left: 0; border-left: 0; }
.ab-step .ab-title { margin-top: calc(18 * var(--u)); }
.ab-step .ab-p { margin-top: calc(10 * var(--u)); }
/* Фон «Мрамор и гравюра» (выбор пользователя 2026-09-16): письмо, принципы и шаги лежат на одном листе графитового мрамора той же серии, что фон «Публикаций» на главной.
Лист ложится на фото кабинета волной с золотой нитью; гравюры у краёв — перо с письмом, ключ, песочные часы, по одной на блок; между блоками — золотой разделитель с ромбом */
.ab-seam--tex { margin-top: calc(-212 * var(--u)); }
.ab-tex { position: relative; overflow: hidden; background: #111213; padding: calc(212 * var(--u)) 0 calc(290 * var(--u));
-webkit-mask: var(--wave-1-mask) 0 0 / 100% calc(712 * var(--u)) no-repeat, linear-gradient(#000, #000) 0 calc(700 * var(--u)) / 100% calc(100% - 700 * var(--u)) no-repeat;
mask: var(--wave-1-mask) 0 0 / 100% calc(712 * var(--u)) no-repeat, linear-gradient(#000, #000) 0 calc(700 * var(--u)) / 100% calc(100% - 700 * var(--u)) no-repeat; }
.ab-tex__ground { position: absolute; inset: 0; pointer-events: none;
/* Три плиты 16:9 друг под другом, каждая под свой блок; стыки приходятся на золотые разделители. Для Retina — вдвое более плотные файлы */
background-image: url("assets/about/about-marble-letter.webp"), url("assets/about/about-marble-key.webp"), url("assets/about/about-marble-hourglass.webp");
background-image: image-set(url("assets/about/about-marble-letter.webp") 1x, url("assets/about/about-marble-letter-2x.webp") 2x),
image-set(url("assets/about/about-marble-key.webp") 1x, url("assets/about/about-marble-key-2x.webp") 2x),
image-set(url("assets/about/about-marble-hourglass.webp") 1x, url("assets/about/about-marble-hourglass-2x.webp") 2x);
background-repeat: no-repeat; background-size: 100% auto; background-position: 50% 0, 50% calc(840 * var(--u)), 50% calc(1654 * var(--u)); }
.ab-tex__ground::after { content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(17, 18, 19, 0.35) 0, rgba(17, 18, 19, 0) calc(320 * var(--u)), rgba(17, 18, 19, 0) calc(100% - 420 * var(--u)), #111213 100%); }
.ab-tex > :not(.ab-tex__ground) { position: relative; }
.ab-divider { display: flex; align-items: center; justify-content: center; gap: calc(18 * var(--u)); margin: calc(100 * var(--u)) calc(110 * var(--u)) 0; }
.ab-divider::before, .ab-divider::after { content: ""; height: 1px; flex: 0 1 calc(320 * var(--u)); background: linear-gradient(90deg, rgba(201, 166, 124, 0), rgba(201, 166, 124, 0.6)); }
.ab-divider::after { background: linear-gradient(90deg, rgba(201, 166, 124, 0.6), rgba(201, 166, 124, 0)); }
.ab-divider span { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border: 1px solid rgba(216, 186, 147, 0.85); transform: rotate(45deg); }
.ab-divider--lead { display: none; }
/* Листы с волнистым краем и золотой нитью */
.ab-seam { position: relative; }
.ab-line { position: absolute; left: 0; width: 100%; z-index: 2; pointer-events: none; background: 0 0 / 100% 100% no-repeat; }
.ab-line--1 { top: calc(11 * var(--u)); height: calc(245 * var(--u)); background-image: var(--wave-1-line); }
.ab-line--2 { top: calc(23 * var(--u)); height: calc(140 * var(--u)); background-image: var(--wave-2-line); }
.ab-line--3 { top: calc(7 * var(--u)); height: calc(164 * var(--u)); background-image: var(--wave-3-line); }
.ab-sheet--2 { background: #151617;
-webkit-mask: var(--wave-2-mask) 0 0 / 100% calc(612 * var(--u)) no-repeat, linear-gradient(#000, #000) 0 calc(600 * var(--u)) / 100% calc(100% - 600 * var(--u)) no-repeat;
mask: var(--wave-2-mask) 0 0 / 100% calc(612 * var(--u)) no-repeat, linear-gradient(#000, #000) 0 calc(600 * var(--u)) / 100% calc(100% - 600 * var(--u)) no-repeat; }
.ab-sheet--3 { background: #171819;
-webkit-mask: var(--wave-3-mask) 0 0 / 100% calc(452 * var(--u)) no-repeat, linear-gradient(#000, #000) 0 calc(440 * var(--u)) / 100% calc(100% - 440 * var(--u)) no-repeat;
mask: var(--wave-3-mask) 0 0 / 100% calc(452 * var(--u)) no-repeat, linear-gradient(#000, #000) 0 calc(440 * var(--u)) / 100% calc(100% - 440 * var(--u)) no-repeat; }
.ab-seam--status { margin-top: calc(-150 * var(--u)); }
.ab-seam--cta { margin-top: calc(-120 * var(--u)); }
/* Статус: табличка слева под заголовком, факты справа */
.ab-split { display: grid; grid-template-columns: calc(340 * var(--u)) calc(760 * var(--u)); justify-content: space-between; align-items: start; padding-inline: calc(110 * var(--u)); }
.ab-status { padding-top: calc(180 * var(--u)); }
.ab-plaque { position: static; margin-top: calc(44 * var(--u)); }
.ab-facts { border-bottom: 1px solid rgba(201, 166, 124, 0.24); }
.ab-fact { display: grid; grid-template-columns: calc(250 * var(--u)) minmax(0, 1fr); column-gap: calc(24 * var(--u)); padding: calc(19 * var(--u)) 0; border-top: 1px solid rgba(201, 166, 124, 0.24); }
.ab-fact dt { padding-top: calc(4 * var(--u)); font: 400 calc(11.5 * var(--u)) / calc(18 * var(--u)) var(--label-font); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim); }
.ab-fact dd { font: 400 calc(15 * var(--u)) / calc(24 * var(--u)) var(--sans); color: #e2e2e1; }
/* Направления: строки оглавления, как у публикаций */
.ab-dirs { padding-top: calc(120 * var(--u)); padding-bottom: calc(250 * var(--u)); }
.canvas--sub .ab-toc .pub__link { grid-template-columns: calc(64 * var(--u)) minmax(0, 1fr) calc(16 * var(--u)); padding: calc(24 * var(--u)) 0; }
.ab-toc__num { grid-column: 1; grid-row: 1 / 3; align-self: start; padding-top: calc(5 * var(--u)); font: 400 calc(11.5 * var(--u)) / calc(16 * var(--u)) var(--label-font); letter-spacing: 0.18em; color: var(--gold); }
.ab-toc .pub__title { grid-row: 1; margin-top: 0; }
.ab-toc__desc { grid-column: 2; grid-row: 2; margin-top: calc(6 * var(--u)); font: 400 calc(13.5 * var(--u)) / calc(20 * var(--u)) var(--sans); color: var(--muted); }
/* Призыв */
.ab-cta { padding-top: calc(170 * var(--u)); }
.ab-cta .lead { max-width: calc(560 * var(--u)); padding-top: calc(4 * var(--u)); }
.ab-cta__row { display: flex; align-items: center; gap: calc(44 * var(--u)); margin-top: calc(34 * var(--u)); }
.ab-contacts { display: grid; row-gap: calc(4 * var(--u)); }
.ab-contacts a:not(.contact__phone) { font: 400 calc(15 * var(--u)) / calc(24 * var(--u)) var(--sans); color: var(--text); transition: color .25s ease; }
.ab-contacts a:hover { color: var(--gold); }
/* Телефоны и планшеты: одна колонка */
@media (max-width: 1099px) {
.page .ab-hero { height: auto; padding-bottom: 0; }
.page .ab-hero__img { position: relative; inset: auto; width: calc(100% + 2 * var(--pad)); max-width: none; height: min(112vw, 62svh); margin-inline: calc(-1 * var(--pad)); object-position: 50% 30%; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
.page .ab-hero__shade { display: none; }
.page .ab-hero__text { position: static; align-self: stretch; width: auto; margin-top: -36px; }
.page .ab-name { margin-top: 12px; }
.page .ab-name .hero__name { margin-left: 0; font-size: clamp(40px, 11.5vw, 72px); line-height: 1.05; }
.page .ab-role { margin-top: 10px; font-size: clamp(18px, 5vw, 26px); line-height: 1.25; }
/* Первый экран заканчивается подписью; вступление уже лежит на мраморе, мраморный лист ложится волной с золотой нитью */
.page .ab-hero .lead { position: relative; max-width: none;
margin: 30px calc(-1 * max(var(--pad), env(safe-area-inset-right))) 0 calc(-1 * max(var(--pad), env(safe-area-inset-left)));
padding: 84px max(var(--pad), env(safe-area-inset-right)) 8px max(var(--pad), env(safe-area-inset-left));
background: linear-gradient(180deg, rgba(17, 18, 19, 0.3) 40px, rgba(17, 18, 19, 0) 150px, rgba(17, 18, 19, 0) calc(100% - 60px), #111213 100%),
#111213 url("assets/about/about-marble-tile-m.webp") 50% 0 / 637px auto repeat;
-webkit-mask: var(--wave-a-mask) 0 0 / 100% 60px no-repeat, linear-gradient(#000, #000) 0 59px / 100% calc(100% - 59px) no-repeat;
mask: var(--wave-a-mask) 0 0 / 100% 60px no-repeat, linear-gradient(#000, #000) 0 59px / 100% calc(100% - 59px) no-repeat; }
.page .ab-hero .lead::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 60px; pointer-events: none; background: var(--wave-a-line) 0 0 / 100% 100% no-repeat; }
.page .ab-num { font-size: 11px; line-height: 1.5; }
.page .ab-title { font-size: 19px; line-height: 1.35; }
.page .ab-p { font-size: 15px; line-height: 1.6; }
.page .ab-letter { display: flex; padding-top: 52px; }
.page .ab-quote { order: 2; }
.page .ab-quote .quote__text { margin-top: 0; }
.page .ab-letter__body > p:not(.ab-sign) { font-size: 17px; line-height: 1.65; }
.page .ab-letter__body > p + p { margin-top: 16px; }
.page .ab-letter__body > .ab-sign { gap: 14px; margin-top: 28px; font-size: 11px; letter-spacing: 0.26em; }
.page .ab-sign__rule { width: 40px; }
.page .ab-principles { display: flex; padding-top: 48px; }
.page .ab-principles > .heading { padding-top: 0; margin-bottom: 16px; }
.page .ab-pr { align-self: stretch; grid-template-columns: 40px minmax(0, 1fr); padding: 20px 0 24px; }
.page .ab-pr .ab-num { padding-top: 4px; }
.page .ab-pr .ab-p { margin-top: 8px; }
.page .ab-steps { padding-top: 48px; }
.page .ab-steps__list { align-self: stretch; grid-template-columns: 1fr; margin-top: 20px; }
.page .ab-step, .page .ab-step:first-child { padding: 18px 0 20px; border-left: 0; border-top: 1px solid rgba(201, 166, 124, 0.24); }
.page .ab-step .ab-title { margin-top: 8px; }
.page .ab-step .ab-p { margin-top: 6px; }
.page .ab-line { display: none; }
.page .ab-seam--status { margin-top: -44px; }
/* Мрамор на телефоне: бесшовный кусок из тех же плит, фактура в масштабе экрана; гравюры отдельными слоями у правого края — перо рядом с цитатой, ключ и песочные часы рядом с заголовками */
.page .ab-seam--tex { margin-top: 0; }
.page .ab-tex { padding: 0 0 120px; -webkit-mask: none; mask: none; }
.page .ab-tex__ground { background: url("assets/about/about-marble-tile-m.webp") 50% 0 / 637px auto repeat; }
.page .ab-tex__ground::after { background: linear-gradient(180deg, #111213 0, rgba(17, 18, 19, 0) 110px, rgba(17, 18, 19, 0) calc(100% - 200px), #111213 100%); }
.page .ab-letter { background: url("assets/about/about-engraving-quill-m.webp") 100% 100% / min(54vw, 300px) auto no-repeat; }
.page .ab-principles { background: url("assets/about/about-engraving-key-m.webp") 100% 40px / min(46vw, 250px) auto no-repeat; }
.page .ab-steps { background: url("assets/about/about-engraving-hourglass-m.webp") 100% 30px / min(34vw, 190px) auto no-repeat; }
.page .ab-divider { margin: 64px max(var(--pad), env(safe-area-inset-left)) 0; gap: 14px; }
.page .ab-divider--lead { display: flex; margin-top: 48px; }
.page .ab-divider::before, .page .ab-divider::after { flex-basis: 120px; }
.page .ab-divider span { width: 6px; height: 6px; }
.page .ab-seam--cta { margin-top: -44px; }
.page .ab-sheet--2, .page .ab-sheet--3 { position: relative; }
.page .ab-sheet--2 { -webkit-mask: var(--wave-b-mask) 0 0 / 100% 60px no-repeat, linear-gradient(#000, #000) 0 59px / 100% calc(100% - 59px) no-repeat; mask: var(--wave-b-mask) 0 0 / 100% 60px no-repeat, linear-gradient(#000, #000) 0 59px / 100% calc(100% - 59px) no-repeat; }
.page .ab-sheet--3 { -webkit-mask: var(--wave-c-mask) 0 0 / 100% 60px no-repeat, linear-gradient(#000, #000) 0 59px / 100% calc(100% - 59px) no-repeat; mask: var(--wave-c-mask) 0 0 / 100% 60px no-repeat, linear-gradient(#000, #000) 0 59px / 100% calc(100% - 59px) no-repeat; }
.page .ab-sheet--2::before, .page .ab-sheet--3::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 60px; z-index: 2; pointer-events: none; background: 0 0 / 100% 100% no-repeat; }
.page .ab-sheet--2::before { background-image: var(--wave-b-line); }
.page .ab-sheet--3::before { background-image: var(--wave-c-line); }
.page .ab-split { display: flex; padding-inline: max(var(--pad), env(safe-area-inset-left)) max(var(--pad), env(safe-area-inset-right)); }
.page .ab-status { padding-top: 96px; }
.page .ab-status > div { align-self: stretch; }
.page .ab-facts { align-self: stretch; margin-top: 28px; }
.page .ab-fact { grid-template-columns: 1fr; row-gap: 4px; padding: 14px 0; }
.page .ab-fact dt { padding-top: 0; font-size: 11px; line-height: 1.5; }
.page .ab-fact dt br { display: none; }
.page .ab-fact dd { font-size: 15px; line-height: 1.55; }
.page .ab-dirs { padding-top: 64px; padding-bottom: 96px; }
.page .ab-dirs .pubs { margin-top: 20px; }
.page .ab-toc .pub__link { grid-template-columns: 34px minmax(0, 1fr) 16px; column-gap: 12px; padding: 18px 0; }
.page .ab-toc .ab-toc__num { grid-column: 1; grid-row: 1 / 3; padding-top: 4px; font-size: 11px; line-height: 1.5; }
.page .ab-toc .pub__title { grid-column: 2; grid-row: 1; margin-top: 0; font-size: 18px; line-height: 1.3; }
.page .ab-toc .ab-toc__desc { grid-column: 2; grid-row: 2; margin-top: 4px; font-size: 13.5px; line-height: 1.5; }
.page .ab-toc .pub__arrow { grid-column: 3; grid-row: 1 / 3; }
.page .ab-cta { padding-top: 96px; padding-bottom: 24px; }
.page .ab-cta > div { align-self: stretch; }
.page .ab-cta .lead { max-width: none; margin-top: 16px; padding-top: 0; }
.page .ab-cta__row { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 24px; }
.page .ab-btn { width: 100%; max-width: 380px; height: 54px; justify-content: center; }
.page .ab-contacts .contact__phone { font-size: 22px; line-height: 1.35; }
.page .ab-contacts a:not(.contact__phone) { font-size: 15px; line-height: 1.6; }
.page .canvas--sub .site-footer__inner { margin: 0 max(var(--pad), env(safe-area-inset-left)); }
}