/* rokuzmin.ru · основа страниц: шкала чтения, шапка, подвал, разделы, блоки содержания.
   Цвета — только переменные палитры варианта (ds/css/palette-v*.css пишет scripts/palette.js генератором системы
   focustrack), шрифты, кнопки-сферы и отклики — из системы (ds/css/skills.css, components.css).
   Подключается после стилей системы и скилов, раскладку вариантов задают v1.css…v5.css. */

:root {
  --rz-max: 1240px;
  --rz-gutter: clamp(16px, 4vw, 40px);
  --rz-radius: 14px;
  --rz-radius-sm: 10px;
  --rz-h1: clamp(40px, 6.2vw, 84px);
  --rz-h2: clamp(26px, 3.2vw, 40px);
  --rz-lead: clamp(17px, 1.5vw, 20px);
  --rz-text: 16px;
  --rz-header-h: 64px;
  /* приёмы скилов — тонами палитры, а не образцовыми числами скилов */
  --gl-ramp: var(--hx-1), var(--hx-2), var(--hx-3, var(--hx-1)), var(--hx-4, var(--hx-2)), var(--hx-1);
  --gl-beam: var(--s-flow-up);
  --gl-track: var(--border-divider);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.rz { margin: 0; min-height: 100vh; background: var(--bg-page); color: var(--text-primary); font-family: var(--font-text);
  font-size: var(--rz-text); line-height: 1.55; text-rendering: optimizeLegibility; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--text-link); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: var(--border-strong, 2px) solid var(--border-focus); outline-offset: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rz-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: var(--bg-card); color: var(--text-primary); box-shadow: var(--elev-3); }
.rz-skip:focus { top: 12px; }
.rz-ic { width: 20px; height: 20px; flex: none; }
.rz-ic--sm { width: 14px; height: 14px; vertical-align: -2px; margin-left: 3px; }
.rz-container { width: min(100%, var(--rz-max)); margin: 0 auto; padding: 0 var(--rz-gutter); }
.rz-main { display: block; outline: none; }

/* ── Шкала текста ── */
.rz-h1 { margin: 0; font: 800 var(--rz-h1)/1 var(--font-heading); letter-spacing: -.035em; color: var(--text-primary); text-wrap: balance; }
.rz-h2 { margin: 0 0 16px; font: 800 var(--rz-h2)/1.1 var(--font-heading); letter-spacing: -.025em; text-wrap: balance; }
.rz-eyebrow { margin: 0 0 10px; font: 600 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--rz-accent-ink); }
.rz-kicker { margin: 0 0 14px; font: 500 12px/1.4 var(--font-mono); letter-spacing: .02em; color: var(--text-secondary); }
/* печатная машинка — одна строка моноширинным (скил entrance-reveals); на узком экране строка переносится, печать снята */
/* разрядка строки добавляет к каждому знаку .02em: ширина в ch без неё обрезала бы последние знаки; +2px — каретка */
.rz-kicker.er-type[data-er-in] { width: calc(var(--er-chars, 12) * (1ch + .02em) + 2px); }
@media (max-width: 700px) { .rz-kicker.er-type { width: auto !important; max-width: 100%; white-space: normal; animation: none !important; border-right: 0 !important; overflow: visible !important; } }
.rz-lead { margin: 18px 0 0; max-width: 40ch; font-size: var(--rz-lead); line-height: 1.5; color: var(--text-secondary); }
.rz-text { margin: 0 0 14px; max-width: 62ch; color: var(--text-secondary); }
/* позиционирование под именем — вместо должности */
.rz-role { margin: 14px 0 0; max-width: 30ch; font: 700 clamp(18px, 1.8vw, 23px)/1.3 var(--font-heading); letter-spacing: -.012em; color: var(--text-primary); text-wrap: balance; }
.rz-hint { margin: 14px 0 0; padding-left: 12px; border-left: 2px solid var(--border-focus); font-size: 14px; color: var(--text-secondary); }
/* на телефоне карточки поверх сцены короче: подсказка к сцене есть в её панели и подписи */
@media (max-width: 700px) { [data-rz-over] .rz-hint { display: none; } [data-rz-over] .rz-text, [data-rz-over] .rz-points, [data-rz-over] .rz-domain__link { font-size: 14.5px; } }
.rz-points { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.rz-points li { position: relative; padding-left: 22px; }
.rz-points li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 10px; height: 2px; border-radius: 1px; background: var(--rz-dom, var(--brand-accent)); }
.rz-domain--infra { --rz-dom: var(--d-infra-line); }
.rz-domain--team { --rz-dom: var(--d-team-line); } .rz-domain--ent { --rz-dom: var(--d-ent-line); }
.rz-domain--infra .rz-eyebrow { color: var(--d-infra-ink); }
.rz-domain--team .rz-eyebrow { color: var(--d-team-ink); } .rz-domain--ent .rz-eyebrow { color: var(--d-ent-ink); }
/* строка со ссылкой под пунктами области: «публичный ресурс по управлению — rkmanager.ru» */
.rz-domain__link { margin: 14px 0 0; color: var(--text-secondary); }
.rz-domain__link a { font-weight: 600; }

/* ── Шапка ── */
.rz-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg-header) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--border-divider); color: var(--text-header); }
.rz-header__in { display: flex; align-items: center; gap: 18px; height: var(--rz-header-h); width: min(100%, 1440px); margin: 0 auto; padding: 0 var(--rz-gutter); }
.rz-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text-primary); text-decoration: none; font: 800 16px/1 var(--font-heading); letter-spacing: -.01em; white-space: nowrap; }
/* логотип владельца: цветной мозг с чёрным контуром; на тёмном — светлый ореол, иначе контур тонет в фоне */
.rz-logo { display: block; width: 42px; height: 34px; object-fit: contain; flex: none; }
.rz-header .rz-logo { filter: drop-shadow(0 0 1.5px color-mix(in srgb, var(--text-on-dark) 55%, transparent)); }
:root[data-theme="dark"] .rz-footer .rz-logo, :root[data-theme="dark"] .rz-404 .rz-logo { filter: drop-shadow(0 0 1.5px color-mix(in srgb, var(--text-on-dark) 55%, transparent)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rz-footer .rz-logo, :root:not([data-theme="light"]) .rz-404 .rz-logo { filter: drop-shadow(0 0 1.5px color-mix(in srgb, var(--text-on-dark) 55%, transparent)); } }
.rz-nav { display: flex; gap: 4px; margin-left: auto; }
.rz-nav a { padding: 8px 10px; border-radius: 8px; color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; }
.rz-nav a:hover { color: var(--text-primary); background: var(--action-secondary); }
.rz-theme { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--action-secondary); }
.rz-theme__btn { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--text-secondary); cursor: pointer; }
.rz-theme__btn[aria-pressed="true"] { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--elev-1); }
.rz-theme__btn .rz-ic { width: 18px; height: 18px; }
.rz-header__cta { height: 38px; }
.rz-menu-btn { display: none; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border-divider); border-radius: 10px; background: var(--bg-card); color: var(--text-primary); cursor: pointer; }
.rz-header__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 0; }
/* разделы уходят в меню, пока в строку не помещаются все: имя, шесть разделов, тема и «Связаться» — им нужно
   1240 точек; запас — на полосу прокрутки */
@media (max-width: 1300px) {
  .rz-nav { position: fixed; top: var(--rz-header-h); left: 0; right: 0; display: none; flex-direction: column; gap: 2px; margin: 0; padding: 12px var(--rz-gutter) 18px;
    background: var(--bg-header); border-bottom: 1px solid var(--border-divider); box-shadow: var(--elev-3); }
  .rz-nav[data-open] { display: flex; }
  .rz-nav a { padding: 12px; font-size: 16px; }
  .rz-menu-btn { display: grid; margin-left: auto; }
  .rz-header__cta { display: none; }
}
@media (max-width: 520px) { .rz-brand__name { display: none; } .rz-theme__btn { width: 28px; height: 28px; } .rz-header__in { gap: 10px; } }

/* ── Кнопки и ссылки действия ── */
.rz-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 24px; }
.rz-btn { height: 46px; padding: 0 20px; font-size: 16px; }
.rz-btn .rz-ic { width: 18px; height: 18px; }
.btn-primary.rz-btn .rz-ic { order: 2; }
.rz-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-default); background: var(--bg-card); color: var(--text-secondary); font: 500 13px var(--font-text); cursor: pointer; }
.rz-chip[aria-pressed="true"] { color: var(--text-primary); border-color: var(--border-hover); }

/* ── Портрет: круг, позади медленная клякса (am-morph), вокруг орбита (am-orbit) ── */
.rz-portrait { position: relative; width: var(--rz-ph, 150px); aspect-ratio: 1; margin: 22px 0 0; }
.rz-portrait__img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: var(--elev-2); border: 3px solid var(--bg-card); }
.rz-portrait__blob { position: absolute; inset: -14%; z-index: 0; }
.rz-portrait.am-orbit > i { --am-orbit-r: calc(var(--rz-ph, 150px) * .62); z-index: 2; }

/* ── Методика ── */
/* сетка — авторазмещение gk-auto (скил grid-kit): ширина карточки не меньше 230 точек */
.rz-methods { list-style: none; margin: 22px 0 0; padding: 0; --gk-min: 230px; --gk-gap: 14px; }
.rz-flip { min-height: 180px; }
.rz-flip .uf-face { display: grid; align-content: center; gap: 8px; padding: 20px; border-radius: var(--rz-radius); }
.rz-flip__front { background: var(--bg-card); border: 1px solid var(--border-divider); }
.rz-flip__front span { font: 800 22px/1.15 var(--font-heading); letter-spacing: -.015em; }
.rz-flip__front small { color: var(--text-muted); font-size: 12px; }
.rz-flip__back { background: var(--bg-selection); color: var(--text-primary); }
.rz-flip__back b { font: 700 15px var(--font-heading); }
.rz-flip__back p { margin: 0; font-size: 14.5px; line-height: 1.45; }
/* оборот-перечень: «Составление плана», «Поручения» */
.rz-flip__back ol { margin: 0; padding-left: 1.25em; display: grid; gap: 5px; font-size: 13.5px; line-height: 1.4; }
.rz-flip__back li::marker { color: var(--rz-accent-ink); font-weight: 600; }
.rz-flip__back li b { font: inherit; font-weight: 700; }

/* ── Выступления ── */
.rz-speaking { display: grid; gap: 24px; align-items: center; margin-top: 18px; }
@media (min-width: 900px) { .rz-speaking { grid-template-columns: 1.35fr 1fr; gap: 36px; } }
.rz-stagephoto { margin: 0; border-radius: var(--rz-radius); overflow: hidden; background: var(--s-bg); }
.rz-stagephoto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 700px) { .rz-stagephoto img { aspect-ratio: 4 / 5; } }
.rz-award { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--rz-radius); background: var(--bg-card); }
.rz-award b { font: 800 20px var(--font-heading); }
.rz-award p { margin: 6px 0 0; color: var(--text-secondary); font-size: 15px; }
.rz-award__ic { width: 28px; height: 28px; color: var(--brand-accent); }

/* ── Контакты ── */
/* одна колонка: заголовок, текст, «Написать», города — кнопка идёт сразу за текстом, к которому относится */
.rz-contact { display: grid; gap: 20px; padding: clamp(24px, 4vw, 44px); border-radius: calc(var(--rz-radius) + 6px); border: 1px solid var(--border-divider); background: var(--bg-card); box-shadow: var(--elev-2); }
.rz-contact__text .rz-text { margin-bottom: 0; }
.rz-contact__act { display: flex; flex-wrap: wrap; gap: 12px; }
.rz-contact__city { margin: 0; font-size: 14px; color: var(--text-muted); }

/* ── Окно «Написать»: форма и ответ «Сообщение направлено» ──
   Окно — элемент dialog: фокус держит браузер, Esc закрывает. Цвета и поля — из системы: ui-box, ui-label, ui-err,
   кнопки-сферы. Ошибка поля — рамкой и подписью под полем, состояние отправки — строкой над кнопкой */
.rz-dlg { width: min(100% - 32px, 520px); max-height: calc(100vh - 32px); max-height: calc(100svh - 32px); margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--border-divider); border-radius: var(--radius-lg); background: var(--bg-drawer); color: var(--text-primary); box-shadow: var(--elev-4); }
.rz-dlg::backdrop { background: color-mix(in srgb, var(--bg-veil) 60%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.rz-dlg[open] { animation: rz-dlg-in .26s var(--motion-ease-enter) both; }
@keyframes rz-dlg-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
/* подписи ошибок и ответ «направлено» прячутся атрибутом hidden, а ui-err системы и rz-done задают свой display —
   без этого правила они были бы видны сразу при открытии окна */
.rz-dlg [hidden] { display: none !important; }
.rz-form { display: grid; gap: 16px; padding: 22px 24px 24px; }
.rz-dlg__head { display: flex; align-items: flex-start; gap: 12px; }
.rz-dlg__h { flex: 1; margin: 0; font: 800 22px/1.2 var(--font-heading); letter-spacing: -.015em; }
.rz-dlg__x { margin: -4px -8px 0 0; cursor: pointer; }
.rz-form__view { display: grid; gap: 14px; }
.rz-field { display: grid; gap: 6px; }
.rz-field .ui-box { max-width: none; font-size: 16px; }
.rz-field textarea.ui-box { height: auto; min-height: 128px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.rz-field .ui-box:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-focus) 22%, transparent); }
.rz-field .ui-box[aria-invalid="true"] { border-color: var(--border-error); }
.rz-field__err { margin: 0; }
.rz-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); }
.rz-consent input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--action-primary); }
.rz-consent input[aria-invalid="true"] { outline: 2px solid var(--border-error); outline-offset: 1px; }
.rz-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.rz-form__alert p { margin: 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--state-error-bg); color: var(--text-error); font-size: 14px; }
.rz-form__send { justify-self: start; }
.rz-form__send[aria-busy="true"] { opacity: .75; cursor: progress; }
.rz-done { display: grid; justify-items: center; gap: 14px; padding: 18px 8px 8px; text-align: center; }
.rz-done__ic { width: 48px; height: 48px; color: var(--state-success); }
.rz-done__t { margin: 0; font: 800 21px/1.25 var(--font-heading); letter-spacing: -.01em; outline: none; }
html.rz-modal { overflow: hidden; }
@media (max-width: 560px) { .rz-form { padding: 18px 16px 20px; } .rz-dlg__h { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .rz-dlg[open] { animation: none; } }

/* ── Политика обработки персональных данных: страница без сцены, текст колонкой ── */
.rz-legal__in { max-width: 760px; padding-block: 40px 56px; }
.rz-legal__in .rz-brand { margin-bottom: 28px; }
.rz-legal__in .rz-h1 { font-size: clamp(30px, 4.4vw, 46px); }
.rz-legal__date { margin: 12px 0 8px; font-size: 14px; color: var(--text-muted); }
.rz-legal__s { margin-top: 24px; }
.rz-legal__h { margin: 0 0 8px; font: 800 20px/1.25 var(--font-heading); letter-spacing: -.01em; }
.rz-legal__s p { margin: 0 0 10px; max-width: 68ch; color: var(--text-secondary); }

/* ── Подвал ── */
.rz-footer { padding: 40px 0 28px; border-top: 1px solid var(--border-divider); background: var(--bg-menu); color: var(--text-secondary); font-size: 14px; }
.rz-footer__in { display: grid; gap: 22px; }
@media (min-width: 900px) { .rz-footer__in { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.rz-footer__brand { display: flex; gap: 12px; align-items: center; }
.rz-footer__brand b { display: block; color: var(--text-primary); font: 800 16px var(--font-heading); }
.rz-footer__brand span { font-size: 13px; }
.rz-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rz-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-divider); font-size: 12.5px; color: var(--text-muted); }

/* ── Страница «не найдено»: без сцен, по центру экрана ── */
.rz-404 { display: grid; place-items: center; }
.rz-404__in { display: grid; justify-items: start; gap: 6px; padding-block: 48px; max-width: 760px; }
.rz-404__in .rz-brand { margin-bottom: 28px; }
.rz-404__in .rz-h1 { margin-bottom: 10px; font-size: clamp(36px, 5.4vw, 60px); }

/* ── Проверка доли объёма: ?audit=1 показывает счёт в углу ── */
.rz-audit { position: fixed; right: 12px; bottom: 12px; z-index: 90; padding: 8px 12px; border-radius: 10px; background: var(--bg-drawer); color: var(--text-primary); box-shadow: var(--elev-3); font: 500 12px/1.4 var(--font-mono); }

