/* =====================================================================
   Сайт Игоря Рупеца. Стили переписаны заново по единой системе 28.09.2026
   (разборы dizainer + advokat, файл ../../разборы/2026-09-28_СИСТЕМА_и_ПЛАН.md).
   Правило: правка меняет токен или компонент НА ЕГО МЕСТЕ, новых слоёв в конец не дописывать.
   Прежний файл из заплаток: ../../versions/2026-09-28_0430_do_sistemy/src/styles/main.css
   ===================================================================== */

/* ---------- 1. ТОКЕНЫ ---------- */
:root {
  /* цвет: один хроматический (янтарь) и нейтрали */
  --amber: #e8b33f;
  --black: #000;
  --ink: #19181a;          /* холст */
  --plate: #222124;        /* плашка */
  --charcoal: #272727;     /* линии, рамка меню */
  --sand: #d9d7ce;         /* подпись второго плана */
  --bone: #f5f4f0;         /* текст */
  --on-photo: rgba(0, 0, 0, .6);

  /* шрифт: три размера и знак */
  --display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, Menlo, monospace;
  --markf: "Unbounded", var(--display);
  --headf: var(--mono);   /* его 28.09: крупное тем же шрифтом, что мелкое (DM Mono); Schibsted остался только в основном тексте */
  --t-head: clamp(1.35rem, 1.1rem + .9vw, 1.75rem);   /* ~28: заголовок раздела или крупная фраза */
  --t-body: .9375rem;                                  /* 15: текст */
  --t-cap: .8125rem;                                   /* 13: рубрики, подписи, кнопки, меню */
  --t-mark: clamp(1.3rem, .9rem + 1.3vw, 2.1rem);      /* лента-знак */

  /* ширины */
  --w-wide: 1360px;
  --w-text: 640px;
  --pad-x: 40px;

  /* отступы (вертикаль) и промежутки (сетки) */
  --s1: 8px; --s2: 24px; --s3: 48px; --s4: 80px;
  --g1: 8px; --g2: 16px; --g3: 40px;

  --header-h: 65px;
}
@media (max-width: 46rem) { :root { --pad-x: 16px; --s4: 48px; --g3: 24px; } }

/* ---------- 2. ОСНОВА ---------- */
* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--ink); scroll-behavior: smooth; }
body { margin: 0; background: transparent; color: var(--bone); font: 400 var(--t-body)/1.5 var(--display); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: 400; margin: 0; text-wrap: balance; }
h1, h2, h3, .lede, .corners .claim, .duo .side p.big, .rv-rot-item p { font-family: var(--headf); letter-spacing: -.02em; }
h1, h2, h3, .lede { font-size: var(--t-head); line-height: 1.15; }
p { margin: 0 0 var(--s2); }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 400; color: var(--bone); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; z-index: 100; background: var(--amber); color: var(--black); padding: 8px 12px; }

/* ---------- 3. РАСКЛАДКА ---------- */
section { padding: var(--s4) var(--pad-x); position: relative; }
/* дизайнер 28.09: отступы соседних секций складывались в 160 px, коучинг растянулся на 8 экранов */
section + section { padding-top: 0; }
.inner-wide { max-width: var(--w-wide); margin-inline: auto; }
.inner { max-width: var(--w-text); margin-inline: auto; }
.plate { background: var(--plate); padding: var(--g3); }

/* ---------- 4. ТИПОГРАФСКИЕ КОМПОНЕНТЫ ---------- */
/* рубрика: одна на весь сайт - над заголовком раздела */
.rubric { display: block; margin: 0 0 var(--s1); font: 400 var(--t-cap)/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.rubric + h2, .rubric + h3, .rubric + .lede { margin-top: 0; }
h2 { margin-bottom: var(--s2); }
.meta { font: 400 var(--t-cap)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sand); margin: 0; }
.lede { color: var(--bone); margin-bottom: var(--s2); }

/* лента-знак: названия на карточках, название страницы и «Все отзывы» на главной */
.deco-name, .pcollage-name, .page-title, .rv-ribbon {
  font: 900 var(--t-mark)/1 var(--markf); text-transform: uppercase; letter-spacing: -.02em;
  background: var(--amber); color: var(--black);
}
.deco-name, .pcollage-name {
  position: absolute; top: 16px; left: 16px; writing-mode: vertical-rl; padding: 12px 6px; transform: rotate(-2deg);
}
.page-title { display: inline-block; padding: 10px 16px; transform: rotate(-1deg); margin-bottom: var(--s2); }

/* ---------- 5. КНОПКИ ---------- */
.btn, .btn-2, .pill, .site-nav a, .nav-toggle, .rv-more {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 400 var(--t-cap)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: 0; cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
/* основная: только «Написать» */
.btn { height: 48px; padding: 0 24px; background: var(--amber); color: var(--black); border-color: var(--amber); }
.btn:hover, .btn:focus-visible { background: transparent; color: var(--amber); }
/* вторичная: рамка */
.btn-2, .btn-quiet { height: 48px; padding: 0 24px; background: transparent; color: var(--amber); border-color: var(--amber); }
.btn-2:hover, .btn-2:focus-visible, .btn-quiet:hover { background: var(--amber); color: var(--black); }
/* метка: «Читать далее» */
.rv-more { height: 28px; padding: 0 10px; background: var(--amber); color: var(--black); border-color: var(--amber); margin: 0 0 var(--s1); }
.rv-more:hover, .rv-more:focus-visible { background: var(--bone); border-color: var(--bone); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--g2); align-items: center; }
@media (max-width: 46rem) { .cta-row > * { width: 100%; } }

/* ---------- 6. ШАПКА, МЕНЮ, ПОДВАЛ ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40; min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--g2); flex-wrap: wrap;
  padding: 12px var(--pad-x); background: var(--ink); border-bottom: 1px solid var(--charcoal);
}
.wordmark { font: 400 var(--t-cap)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone); }
.site-nav ul { list-style: none; display: flex; gap: var(--g1); margin: 0; padding: 0; }
.site-nav a, .nav-toggle { height: 32px; padding: 0 14px; background: transparent; color: var(--sand); border-color: var(--charcoal); }
.site-nav a:hover, .site-nav a.active, .nav-toggle:hover { color: var(--amber); border-color: var(--amber); }
.nav-toggle { display: none; }
@media (max-width: 46rem) {
  .nav-toggle { display: inline-flex; }
  .site-nav ul { display: none; flex-direction: column; width: 100%; padding-top: 12px; }
  .site-nav[data-open="true"] ul { display: flex; }
  .site-nav { width: auto; }
  .site-header .site-nav[data-open="true"] { width: 100%; }
}
.site-footer { padding: var(--s3) var(--pad-x); border-top: 1px solid var(--charcoal); background: var(--ink); position: relative; z-index: 2; }
.footer-inner { max-width: var(--w-wide); margin-inline: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--g2); }
.footer-name, .footer-links a { font: 400 var(--t-cap)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sand); margin: 0; }
.footer-links { display: flex; gap: var(--g2); }
.footer-links a:hover { color: var(--amber); }

/* ---------- 7. ШАПКА СТРАНИЦЫ ---------- */
.page-head { padding-top: var(--s3); padding-bottom: var(--s3); }
.page-head--row .inner-wide { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.page-head--row .page-title, .page-head--row .meta { margin: 0; }
.page-head .back { margin-bottom: var(--s2); height: 32px; padding: 0 14px; }
.page-head .lede { max-width: 32ch; }

/* ---------- 8. ФОН-МОЗАИКА (кадры не меняются) ---------- */
.bg-mosaic { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: .12; }
.bg-mosaic-inner, .sec-mosaic { display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 11vw; grid-auto-flow: dense; gap: 6px; }
.bg-mosaic-inner { will-change: transform; }
.sec-mosaic { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: .12; align-content: start; }
.bg-mosaic .tile, .sec-mosaic .tile { position: relative; overflow: hidden; background: var(--charcoal); }
.bg-mosaic .tile img, .sec-mosaic .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.w2 { grid-column: span 2; } .h2 { grid-row: span 2; }
@media (max-width: 46rem) { .bg-mosaic-inner, .sec-mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 24vw; gap: 4px; } }

/* ---------- 9. ЛИСТЫ ВНАХЛЁСТ (только листы с кадрами) ---------- */
.stack-card { position: relative; background: var(--ink); }
.stack-card.is-sticky { position: sticky; top: var(--header-h); z-index: 1; }
.stack-card > :not(.sec-mosaic) { position: relative; z-index: 1; }
.screen-fit { min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: space-between; }
/* всё, что идёт после листов с кадрами, накрывает их сплошным холстом (иначе прилипший лист просвечивает под текстом) */
.stack-card.is-sticky ~ :not(.stack-card) { position: relative; z-index: 2; background: var(--ink); }

/* ---------- 10. ГЛАВНАЯ: первый экран ---------- */
.slab { padding: 0; }
.wordwall { font: 900 12vw/.86 var(--markf); letter-spacing: -.04em; text-transform: uppercase; color: var(--amber); margin: 0; padding: 0 clamp(8px, 1.2vw, 18px) .1em; white-space: nowrap; }
.spread { display: flex; justify-content: space-between; gap: var(--g2); flex-wrap: wrap; padding: 14px var(--pad-x) 0; font: 400 var(--t-cap)/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sand); }
.corners { flex: 1; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; gap: var(--s2); padding: var(--s3) var(--pad-x) var(--s3); }
.corners .claim { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; text-align: right; max-width: 18ch; margin: 0; font-size: var(--t-head); line-height: 1.15; }
.corners .claim .rubric { text-align: right; }
/* план 28.09 п.5: на первом экране одна вещь янтарём - «Написать» под фразой (ревизор: не была поставлена) */
.corners .claim .btn { display: flex; width: fit-content; margin: var(--s2) 0 0 auto; }
.corners .foot { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; gap: var(--g2); }
.spinner { width: 44px; height: 44px; flex: none; }
.spinner rect { fill: var(--sand); }   /* дизайнер 28.09: на первом экране янтарём только РУПЕЦ и «Написать» */
.nest { display: flex; flex-wrap: wrap; gap: var(--g1); }
@media (max-width: 46rem) { .nest { display: grid; grid-template-columns: repeat(2, 1fr); } .nest .pill { width: 100%; } }
.pill { height: 32px; padding: 0 14px; background: transparent; color: var(--amber); border-color: var(--amber); }
.pill:hover, .pill:focus-visible { background: var(--amber); color: var(--black); }
@media (max-width: 46rem) {
  .spread { display: grid; grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .corners { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .corners .claim { grid-column: 1; justify-self: start; text-align: left; }
  .corners .claim .rubric { text-align: left; }
  .corners .claim .btn { margin-left: 0; }
  .corners .foot { grid-row: 3; align-items: flex-start; }
}

/* ---------- 11. ГЛАВНАЯ: портрет и текст ---------- */
/* его 28.09: портрет меньше (5 из 12 колонок вместо половины экрана), под текстом плашка как у отзыва, вокруг фон прозрачный */
.duo { display: grid; grid-template-columns: 5fr 7fr; gap: var(--g3); align-items: center; }
.duo .side { justify-self: start; width: fit-content; max-width: 100%; }
.duo .side h1 { margin-bottom: var(--s2); }
.duo .side p.big { font-size: var(--t-head); line-height: 1.2; max-width: 30ch; margin-bottom: var(--s2); }
.pcollage { position: relative; will-change: transform; }
.pcollage img { width: 100%; height: auto; border: 1px solid var(--black); }
@media (max-width: 46rem) { .duo { grid-template-columns: 1fr; gap: var(--g2); } }

/* ---------- 12. КАРТОЧКИ С ЛЕНТОЙ: «Работы», портфолио, папки ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g2); }
.card { position: relative; display: block; overflow: hidden; border: 1px solid var(--black); background: var(--plate); }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* телефон: в карточке 4:3 высотой 128 лента резала название до «КОНЦЕ» (снимки 28.09) */
@media (max-width: 46rem) { .card img { aspect-ratio: 5 / 6; } .cards { gap: var(--g1); } .cards--folders { grid-template-columns: 1fr; } .cards--folders .card img { aspect-ratio: 4 / 3; } }
/* портфолио на компьютере: шесть карточек ровно в экран, по высоте окна (план 28.09, ревизор: не хватало 17 px) */
@media (min-width: 46.01rem) { .cards--screen .card img { aspect-ratio: auto; height: clamp(200px, calc((100svh - var(--header-h) - var(--ph-head, 173px) - var(--g2)) / 2), 420px); } }
.card .card-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 16px; background: var(--on-photo); font: 400 var(--t-cap)/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sand); }
@media (hover: hover) and (pointer: fine) {
  .card { transition: transform .35s cubic-bezier(.25, .46, .45, .94), border-color .2s ease; }
  .card:hover { transform: scale(1.03); z-index: 2; border-color: var(--amber); }
}
@media (max-width: 60rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
.cards-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--g2); margin-bottom: var(--s2); }

/* ---------- 13. «Как это устроено» (один компонент) ---------- */
.steps-block { max-width: var(--w-wide); margin-inline: auto; }
.steps-block > .rubric { margin-bottom: var(--s2); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g3); }
.steps .num { display: block; margin-bottom: var(--s1); font: 400 var(--t-cap)/1.3 var(--mono); letter-spacing: .1em; color: var(--amber); }
.steps h3 { margin-bottom: var(--s1); }
.steps p { color: var(--sand); margin: 0; }
@media (max-width: 46rem) { .steps { grid-template-columns: 1fr; gap: var(--s2); } }

/* ---------- 14. «Начать» (один компонент) ---------- */
.cta-block { max-width: var(--w-text); margin-inline: auto; }
/* «Начать» и сетка отзывов на ровном холсте, без мозаики с лицами под фразой (дизайнер 28.09) */
section:has(> .cta-block), section:has(> .reviews-wrap > .review-grid) { background: var(--ink); }
.cta-block .lede { margin-bottom: var(--s2); }

/* ---------- 15. РАЗДЕЛЫ: галерея ---------- */
.split-grid { display: block; }
.split-grid figure { margin: 0; border: 1px solid var(--black); overflow: hidden; cursor: zoom-in; }
.split-grid img { width: 100%; height: auto; }
.split-grid.is-masonry { display: flex; gap: var(--g1); align-items: flex-start; }
.split-grid.is-masonry .mcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--g1); }
@media (hover: hover) and (pointer: fine) {
  .split-grid figure { position: relative; z-index: 0; transition: transform .35s cubic-bezier(.25, .46, .45, .94); }
  .split-grid figure:hover { transform: scale(1.06); z-index: 3; }
}

/* папки свадеб */
.folder { position: relative; display: block; overflow: hidden; border: 1px solid var(--black); }
.folder img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- 16. ОТЗЫВЫ ---------- */
.reviews-wrap { max-width: var(--w-wide); margin-inline: auto; }   /* было 1120: третья ширина вне системы (ревизор 28.09) */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g2); align-items: stretch; }
.review-card { background: var(--plate); padding: var(--s2); display: flex; flex-direction: column; }
.review-card p { color: var(--bone); margin-bottom: var(--s2); }
.review-card p.rv-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
.review-card.is-open p.rv-clamp { display: block; -webkit-line-clamp: unset; overflow: visible; }
.review-card .rv-more { align-self: flex-start; }
.review-card cite { display: block; margin-top: auto; font: 400 var(--t-cap)/1.3 var(--mono); letter-spacing: .08em; font-style: normal; color: var(--sand); }
@media (max-width: 60rem) { .review-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .review-grid { grid-template-columns: 1fr; } }

/* отзыв на главной: блок со своим фоном, сменяется сам */
.rv-rot-wrap { max-width: var(--w-wide); margin-inline: auto; }
.rv-rot-stage { display: grid; }
.rv-rot-item { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.rv-rot-item.is-on { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.rv-rot-item p { font-size: var(--t-head); line-height: 1.25; max-width: 38ch; margin: 0 0 var(--s2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.rv-rot-item cite { display: block; font: 400 var(--t-cap)/1.3 var(--mono); letter-spacing: .08em; font-style: normal; color: var(--sand); }
.rv-rot-item .hl, .rv-rot-item cite span { background: none; padding: 0; }
/* его 28.09: «Все отзывы» лентой, как «Игорь» и названия съёмок, горизонтально справа от отзыва */
.rv-rot-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--g3); align-items: center; }
.rv-rot-wrap > * { grid-column: 1; }
.rv-rot-wrap > .rv-ribbon { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
.rv-ribbon { display: inline-block; padding: 10px 16px; transform: rotate(-2deg); transition: transform .2s ease; }
.rv-ribbon:hover, .rv-ribbon:focus-visible { transform: rotate(0deg) scale(1.04); }
.rv-ribbon:focus-visible { outline: 2px solid var(--bone); outline-offset: 4px; }
@media (max-width: 46rem) {
  .rv-rot-wrap { grid-template-columns: minmax(0, 1fr); }
  .rv-rot-wrap > .rv-ribbon { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--s2); }
}

/* ---------- 17. ЦВЕТНЫЕ ПЛАШКИ РАЗДЕЛОВ (отдельный лист в один экран) ---------- */
.bands-sheet { min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; }
.bands { flex: 1; display: flex; flex-direction: column; }
.band { flex: 1; position: relative; overflow: hidden; display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: var(--s2); padding: 0 var(--pad-x); color: var(--black); transition: filter .25s ease; }
.band:hover { filter: brightness(1.06); }
.band svg { width: 32px; height: 32px; justify-self: center; position: relative; z-index: 1; }
.band svg * { fill: var(--black); }
.band .bt { position: relative; z-index: 1; }
.band h3 { color: var(--black); margin-bottom: 4px; }
.band p { margin: 0; font: 400 var(--t-cap)/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--black); }
.b-1 { background: #e8b33f; } .b-2 { background: #77a6b6; } .b-6 { background: #b8a6c6; }
.b-3 { background: #e6b9a8; } .b-4 { background: #7f9b72; } .b-5 { background: #c9c3b4; }
.band-strip { position: absolute; inset: 0; display: flex; opacity: .18; mix-blend-mode: multiply; pointer-events: none; }
.band-strip img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; object-position: 50% 35%; }
@media (max-width: 46rem) { .band { grid-template-columns: 48px 1fr; gap: var(--g2); } }

/* ---------- 18. КНИГА (просмотр кадров) ---------- */
html.book-lock, html.book-lock body { overflow: hidden; }
.book { position: fixed; inset: 0; z-index: 95; display: none; background: #0c0c0d; user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: contain; }
.book.is-open { display: block; }
/* клиентская галерея (диск): скачать кадр из просмотра */
.disk-bar p { color: var(--sand); max-width: 60ch; margin-bottom: var(--s2); }
.book-dl { pointer-events: auto; position: absolute; right: 12px; bottom: 12px; height: 40px; padding: 0 16px; display: inline-flex; align-items: center; font: 400 var(--t-cap)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); border: 1px solid var(--amber); background: rgba(12, 12, 13, .6); }
.book-dl:hover { background: var(--amber); color: var(--black); }
@media (max-width: 46rem) { .book-ui:has(.book-dl) .book-close { left: 12px; transform: none; } }   /* на телефоне «Закрыть» и «Скачать кадр» по разным углам */
.book-card { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 56px clamp(12px, 4vw, 64px); background: #0c0c0d; visibility: hidden; transform-origin: 50% 50%; will-change: transform, opacity; cursor: pointer; }
.book-card.is-on { visibility: visible; }
.book-card img { max-width: 100%; max-height: 100%; object-fit: contain; }
.book-ui { position: absolute; inset: 0; z-index: 1000; pointer-events: none; font: 400 var(--t-cap)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sand); }
.book-ui button { pointer-events: auto; height: 32px; padding: 0 14px; background: none; border: 1px solid var(--charcoal); font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--sand); cursor: pointer; }
.book-ui button:hover, .book-ui button:focus-visible { border-color: var(--amber); color: var(--amber); }
.book-all { position: absolute; top: 12px; left: 16px; }
.book-count { position: absolute; top: 22px; right: 20px; }
.book-close { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); }
.book-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px !important; padding: 0 !important; background: rgba(12, 12, 13, .6) !important; font-size: 22px !important; }
.book-prev { left: 12px; } .book-next { right: 12px; }

/* ---------- 19. ПЛАВАЮЩАЯ «Написать» ---------- */
.cta-float {
  position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translate(-50%, 0); z-index: 80;
  display: flex; gap: var(--g2); align-items: center; white-space: nowrap; padding: 6px 6px 6px 18px;
  background: var(--plate); border: 1px solid var(--charcoal);
  font: 400 var(--t-cap)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sand);
  transition: opacity .3s ease, transform .3s ease;
}
.cta-float a { height: 40px; }
.cta-float.is-hidden, .cta-float.is-over { opacity: 0; transform: translate(-50%, 16px); pointer-events: none; }
@media (min-width: 46.01rem) { .cta-float { min-width: 560px; justify-content: space-between; } }   /* «Написать» на одном месте на всех страницах */
@media (max-width: 46rem) { .cta-float .cta-text { display: none; } .cta-float { padding: 6px; } }
body:has(> .cta-float) main { padding-bottom: 96px; }   /* конец страницы не уходит под плавающую кнопку */

/* ---------- 20. ТЕКСТОВЫЕ СТРАНИЦЫ (о себе, коучинг) ---------- */
.text-flow > section + section { padding-top: 0; }
.qa p strong { display: block; color: var(--bone); margin-bottom: 4px; }
.qa p:not(.rubric) { color: var(--sand); }