/* Основа темы «Чё? Баня!»: токены макета (Figma «Че баня», коллекции «ЧБ · Цвет» / «ЧБ · Размеры»),
   сброс, сетка, кнопки. Значения — из макета; новый цвет или размер — сначала переменная в Figma. */
:root {
  --c-bg-linen: #f6f1e8;      /* фон/лён */
  --c-bg-milk: #fbf8f2;       /* фон/молочный */
  --c-bg-spruce: #1f2d22;     /* фон/еловый */
  --c-line: #e7dfd2;          /* линия/тонкая */
  --c-text: #1e2a1f;          /* текст/основной */
  --c-text-2: #6a6b60;        /* текст/вторичный */
  --c-text-muted: #c7bfae;    /* текст/приглушённый */
  --c-field-line: rgba(106, 107, 96, .75);  /* линия/поле формы: текст/вторичный α0,75 ≈ #8e8e85 на молочном, 3,1:1 (WCAG 1.4.11; тонкая линия 1,25 не годилась) */
  --c-text-light: #ffffff;    /* текст/светлый */
  --c-sage: #4e6a3d;          /* акцент/шалфей */
  --c-sage-dark: #405834;     /* акцент/шалфей-тёмный */
  --c-star: #ad7612;         /* акцент/звезда */
  --c-gold: #c9b48a;          /* акцент/золото */
  --c-tg: #229ed9;            /* мессенджер/telegram */
  --c-max: #2469c7;           /* мессенджер/max */
  --c-black: #000000;         /* оверлей/чёрный */
  --c-glass: rgba(31, 45, 34, .7);        /* фон/стекло: #1f2d22 α0,70 (+ blur 24) */
  --c-glass-flat: rgba(31, 45, 34, .85);  /* то же без backdrop-filter: плотнее, чтобы читалось без размытия */
  --c-glass-dense: rgba(31, 45, 34, .94); /* фон/стекло-плотное: #1f2d22 α0,94 — шапка при прокрутке (правка макета 20.10.2026) */
  --header-h: 76px;           /* высота шапки: 390 — 76, с 768 — 93 */
  --c-line-dark: rgba(255, 255, 255, .14);   /* линия/на-тёмном */
  --c-text-dim: rgba(255, 255, 255, .8);     /* текст/на-тёмном-тихий */

  --r-s: 8px; --r-m: 16px; --r-l: 24px; --r-xl: 32px; --r-pill: 999px;

  /* сетка: 390 — поле 20, 768 — 32, ≥1200 — контейнер 1400 по центру */
  --pad: 20px;
  --wrap: 1400px;

  --f-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-digits: 'Prata', Georgia, serif;
  --f-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --f-hand: 'Caveat', 'Comic Sans MS', cursive;
}
@media (min-width: 768px) { :root { --pad: 32px; --header-h: 93px; } }
@media (min-width: 1200px) { :root { --pad: 40px; } }
/* шапка липкая: якоря (#bron, #chay, оглавление статьи) и фокус с клавиатуры не уходят под неё (WCAG 2.4.11) */
html { scroll-padding-top: calc(var(--header-h) + 24px); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg-linen);
  color: var(--c-text);
  font: 400 16px/1.5 var(--f-sans);
  -webkit-font-smoothing: antialiased;
}
img, svg, picture { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.wrap { width: min(var(--wrap), 100% - var(--pad) * 2); margin-inline: auto; }
/* не рвётся по пробелам и дефису: «3-го», «4-го» (вместо невидимого U+2060, который копировался в буфер) */
.nowrap { white-space: nowrap; }
/* без одиночного слова в последней строке; balance не используем — он меняет переносы заголовков против макета */
p, li, .faq__text { text-wrap: pretty; }
/* h2 на 320–389 (кадров нет): последние два слова не разрываются — в последней строке не остаётся одно слово (19.10, cb_typo_h2_tail());
   с 390 span не действует — переносы заголовков как в кадрах */
@media (max-width: 389px) { h2 .tm { white-space: nowrap; } }
/* «Красной Поляны» (cb_typo_wrap): в тексте статьи на 768–1199 название не рвётся, как в кадре «Статья · 768»; на 1920 и 390 кадры рвут его — там обычные пробелы;
   на других страницах (например «Цены · 768») кадр рвёт его как есть — правило не действует */
@media (min-width: 768px) and (max-width: 1199px) { .bl-prose .kp { white-space: nowrap; } }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* «Перейти к содержимому»: первая ссылка страницы, вне фокуса уведена за верхний край экрана (не display:none — иначе до неё не дойти Tab), при фокусе встаёт в левый верх; еловая плашка, белый текст */
.skip-link {
  position: fixed; z-index: 100; top: 0; left: var(--pad); padding: 12px 20px; border-radius: 0 0 var(--r-s) var(--r-s);
  background: var(--c-bg-spruce); color: var(--c-text-light); font: 600 15px/20px var(--f-sans); text-decoration: none;
  transform: translateY(-120%);
}
.skip-link:focus { transform: none; }
#content[tabindex="-1"]:focus { outline: 0; } /* цель «Перейти к содержимому» (блок под шапкой): фокус ставится программно, кольцо вокруг всего блока не нужно */
.skip-link:focus-visible { outline: 2px solid var(--c-text-light); outline-offset: -4px; }
.icon { width: 24px; height: 24px; flex: none; stroke-width: 1.5; } /* штрих в единицах viewBox 24; по месту меняется */

:focus-visible { outline: 2px solid var(--c-sage); outline-offset: 3px; }
/* элементы с tabindex="-1" (сообщения, заголовок формы) получают фокус программно — кольцо не рисуем; фокус остаётся для чтеца */
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* Кнопка «Основная» (макет 09.10.2026): L 64 (поля 20/40, текст 18/24, значок 20, промежуток 12),
   M 56 (16/32, 16/24, 18, 12), S 48 (12/24, 15/24, 16, 8). Обводка 1,5 внутри (как INSIDE в Figma) — inset-тенью:
   border 1,5 Chrome округляет до 1 px, и высота выходила 63 / 55 / 47. Размер по умолчанию — L. */
.btn {
  --btn-y: 20px; --btn-x: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: var(--btn-y) var(--btn-x);
  border: 0; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.5px var(--c-text-light);
  background: var(--c-sage); color: var(--c-text-light);
  font: 600 18px/24px var(--f-sans); text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color .15s;
}
.btn:hover { background: var(--c-sage-dark); }
.btn .icon { width: 20px; height: 20px; }
.btn--m { --btn-y: 16px; --btn-x: 32px; font-size: 16px; }
.btn--m .icon { width: 18px; height: 18px; }
.btn--s { --btn-y: 12px; --btn-x: 24px; gap: 8px; font-size: 15px; }
.btn--s .icon { width: 16px; height: 16px; }
/* S на телефоне, M с 768 (кнопки баннера cookie: 390 — S 48, 768 и шире — M 56); значения те же, что у --s и --m выше */
.btn--s-m { --btn-y: 12px; --btn-x: 24px; gap: 8px; font-size: 15px; }
@media (min-width: 768px) { .btn--s-m { --btn-y: 16px; --btn-x: 32px; gap: 12px; font-size: 16px; } }
/* фокус кнопки: шалфей на светлом фоне; на фото (шапка, первый экран) — белый */
.btn:focus-visible { outline-color: var(--c-sage); }
.site-header .btn:focus-visible, .hero .btn:focus-visible { outline-color: var(--c-text-light); }

/* «Ссылка со стрелкой»: светлая тема — 15/20 шалфей с подчёркиванием, стрелка 14; «--dark» (на фото, «Подробнее о …» в «Чане») — белая 18/26 без подчёркивания */
.link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--c-sage); font: 600 15px/20px var(--f-sans); text-decoration: none; }
.link-arrow span { text-decoration: underline; }
.link-arrow .icon { width: 14px; height: 14px; }
.link-arrow--dark { color: var(--c-text-light); font: 400 18px/26px var(--f-sans); }
.link-arrow--dark span { text-decoration: none; }
.link-arrow--dark:hover span { text-decoration: underline; text-underline-offset: 3px; }
.link-arrow--dark:focus-visible { outline-color: var(--c-text-light); }

/* «Стекло»: тонированная плашка с размытием фона (шапка, факты первого экрана). Без поддержки backdrop-filter — плотнее. */
.glass { background: var(--c-glass-flat); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass { background: var(--c-glass); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
}

/* Зоны нажатия текстовых ссылок на тач (≤1024): невидимый ::before до 44 по высоте, вид не меняется (как .round-btn::after).
   ::before, а не ::after: у пункта меню с aria-current ::after — золотая линия. В плотных списках (подвал, оглавление) зона
   доходит только до середины зазора, чтобы тап не попадал в соседнюю ссылку: --tap = половина высоты зоны. */
@media (max-width: 1024px) {
  .link-arrow, .crumbs__link, .bl-crumbs__link, .f-link, .faq__route, .site-nav__link, .f-row--phone, .pmap__tel, .psv__tel, .bl-end__tel, .bl-toc__a,
  .f-list a, .site-footer .f-doc { --tap: 22px; position: relative; }
  .f-list a { --tap: 17px; }  /* 22 + зазор 12 = шаг 34 */
  .site-footer .f-doc { --tap: 19px; }  /* 22 + зазор 16 = шаг 38 */
  .link-arrow::before, .crumbs__link::before, .bl-crumbs__link::before, .f-link::before, .faq__route::before, .site-nav__link::before, .f-row--phone::before,
  .pmap__tel::before, .psv__tel::before, .bl-end__tel::before, .bl-toc__a::before, .f-list a::before, .site-footer .f-doc::before {
    content: ''; position: absolute; left: 0; right: 0; inset-block: min(0px, calc(50% - var(--tap)));
  }
}
@media (max-width: 1024px) {
  .otzyvy__links .link-arrow:not(:only-child), .rgrid__links .link-arrow:not(:only-child) { --tap: 14px; }  /* ссылки столбиком через 8 (до 1199): шаг 28 */
}
@media (min-width: 768px) and (max-width: 1024px) {
  .f-list a { --tap: 21px; }  /* 26 + зазор 16 = шаг 42 */
}