/*
 * Дизайн-токены Mirovich.
 * Значения с пометкой [figma] взяты из переменных макета, остальные сняты с геометрии фреймов.
 */

/*
 * Масштаба страницы нет: сайт всегда рисуется в макетном размере.
 *
 * История вопроса. Макет нарисован под 1920, и на ноутбуке всё читалось
 * крупным — клиент лечил это Ctrl-минусом до 80%. Сначала мы повторили это
 * ступенями (1 / 0.9 / 0.8) на самом сайте, потом, по требованию «ни один
 * блок не меняет размеров при изменении ширины окна», ступени схлопнулись в
 * одно постоянное значение 0.8. Но постоянное 0.8 — это 0.8 и на большом
 * мониторе: текст статьи выходил 14.4 пикселя, мета 11.2. Мелко.
 *
 * Развилка неустранима: либо сайт подстраивается под ширину экрана и тогда
 * на каких-то границах меняет размер, либо не меняет размер никогда и тогда
 * не подстраивается. Выбрано второе с масштабом 1: сайт показывается таким,
 * как нарисован, а уменьшение отдано браузеру — Ctrl-минус запоминается для
 * домена навсегда, и клиенту достаточно нажать его один раз.
 *
 * Переменная --zoom при этом не задаётся: вёрстка берёт её только через
 * var(--zoom, 1), и запасное значение как раз и есть единица. Если масштаб
 * когда-нибудь вернут, --zoom нужно поставить рядом с zoom тем же числом —
 * иначе вылет лент за правый край окна окажется короче нужного.
 */

:root {
	/* Цвета [figma] */
	--c-black: #000;
	--c-white: #fff;
	--c-red-700: #fe1951;
	--c-grey-200: #e4e4e4;
	--c-grey-300: #c8c8c8;
	--c-grey-400: #adadad;
	--c-grey-500: #919191;
	--c-grey-700: #5e5e5e;
	--c-grey-800: #474747;
	--c-grey-900: #2f2f2f;
	--c-red-600: #ff3969;

	/* Семантика */
	--c-accent: var(--c-red-700);
	--c-page-bg: var(--c-grey-200);
	--c-surface: var(--c-white);
	/* Бледная заливка карточек: на белом листе она и рисует их контур. */
	--c-card-bg: #f8f8f8;
	--c-surface-dark: var(--c-black);
	--c-text: var(--c-black);
	--c-text-invert: var(--c-white);
	--c-text-muted: var(--c-grey-400);
	--c-text-muted-invert: var(--c-grey-200);
	--c-border-dark: var(--c-grey-900);

	/* Шрифты [figma] */
	--font-serif: 'Spectral', Georgia, 'Times New Roman', serif;
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/*
	 * Шкала размеров — полностью из переменных макета.
	 * Крупные заголовки (56, 60, 64, 68, 92) переменными в макете не заданы:
	 * они выведены из ширины строк и живут в местах применения.
	 */
	--fs-small: 14px;
	--fs-base: 16px;
	--fs-large: 20px;
	--fs-xl: 28px;
	--fs-xlarge: 32px;
	--fs-3xlarge: 48px;
	--fs-4xlarge: 46px;

	/* Межстрочные [figma] */
	--lh-small: 18px;
	--lh-sm: 24px;
	--lh-xl-text: 28px;
	--lh-xl: 48px;
	--lh-2xl: 56px;

	/* Радиусы [figma] */
	--radius-sm: 8px;
	--radius-lg: 16px;
	--radius-xl: 32px;

	/*
	 * Контейнер один на весь сайт: 1220 содержимого плюс поля по 10 с каждой
	 * стороны. Раньше здесь жила дюжина ширин, снятых с макета поблочно —
	 * от 1188 до 1714, — и страница из-за этого гуляла по ширине от секции
	 * к секции. Теперь блок либо в общем контейнере, либо в широком.
	 *
	 * Поля именно «плюс»: 1220 — это чистая ширина содержимого, а не бокс
	 * вместе с полями.
	 */
	/*
	 * Контейнер уменьшен с 1220 до 1050 (и широкий с 1450 до 1300) по просьбе
	 * клиента: на его ноутбуке макетный контейнер занимал экран от края до
	 * края и читался как «широко». Кегли при этом не трогаем — клиент хотел
	 * полей, а не мелкого текста; масштаб страницы мы уже пробовали и убрали,
	 * см. claude/desktop-scale.md.
	 *
	 * Размеры карточек ниже пересчитываются от этих двух чисел сами, поэтому
	 * ширина контейнера правится здесь и только здесь.
	 */
	--container-content: 900px;
	--container-pad: 10px;

	/*
	 * Отношение новых контейнеров к прежним. Нужны, чтобы вместе с шириной
	 * карточки пропорционально ужимались её картинка и высота, иначе карточка
	 * становится заметно вытянутее макетной.
	 */
	--k-content: 0.7377;   /* 900 / 1220 */
	--k-wide: 0.76828;     /* 1114 / 1450 */

	/*
	 * Широкий контейнер — для блоков, которые шли во всю ширину кадра:
	 * полоса плиток спецпроектов, содержимое героя. Один на весь сайт,
	 * отдельной ширины у спецпроектов больше нет.
	 */
	--container-wide: 1114px;

	/*
	 * Предел ширины страницы. Им ограничены блоки, которые иначе идут во всю
	 * ширину окна: шапка (обычная и компактная), слайдер, «Книжная полка» и
	 * подвал. На мониторе шире 2000 они встают по центру, а по краям остаётся
	 * фон страницы — ровной рамкой сверху донизу. Значение одно на все четыре
	 * блока: разъедься они по ширине, стык между тёмными полосами читался бы
	 * ступенькой.
	 */
	--page-max: 2000px;

	/*
	 * Высота первого экрана. Общая для слайдера на главной и для шапки
	 * внутреннего спецпроекта — клиент просил их сравнять, и держать
	 * два одинаковых числа в разных местах смысла нет.
	 *
	 * Не число, а формула: высота идёт за окном, чтобы блок помещался в
	 * экран целиком. Потолок 697 — макетные 727 минус тридцать по просьбе
	 * клиента. Пол 640 держит карточку оверлея на главной: в ней пять строк
	 * лида, дата и кнопка, и ниже 640 она перестаёт помещаться с отступами.
	 * Вычитаем компактную шапку — именно она висит сверху, когда до блока
	 * докрутили.
	 *
	 * dvh, а не vh: на мобильных vh считается от окна без адресной строки,
	 * и блок оказывается выше видимой части. Строка с vh идёт первой как
	 * запасная для браузеров, где dvh неизвестен.
	 */
	--hero-h: clamp(640px, calc(100vh - var(--header-compact-h)), 697px);
	--hero-h: clamp(640px, calc(100dvh - var(--header-compact-h)), 697px);

	/*
	 * Ширины уже общего контейнера. Это не поблочные контейнеры, а мера
	 * строки: колонка текста, шапка навигации, карточка книги и форма
	 * поиска сознательно узкие, и растягивать их до 1220 нельзя.
	 */
	--container-text: 750px;       /* колонка текста статьи и колонок: уже, чем в ЖЖ (772) */
	--container-nav: 750px;        /* строка навигации */
	--container-book: 764px;       /* карточка книги: обложка 402.49 на 556.56 */
	--container-form: 640px;       /* форма поиска */

	/*
	 * Прежние поблочные контейнеры теперь ссылаются на общий: имена
	 * оставлены, чтобы блоки не переписывать, а место у них одно.
	 */
	--container-footer: var(--container-content);
	/*
	 * Чипсы уже сетки карточек: с каждой стороны остаётся пустым 20% ширины
	 * карточки (292 * 0.2 = 58.4), то есть 900 - 116.8 = 783.2. Считаем, а не
	 * пишем числом, — при следующей смене контейнера или карточки отступ
	 * останется теми же 20%.
	 */
	--container-chips: calc(var(--container-content) - var(--tg-card-w) * 0.4);
	--container-books: var(--container-content);
	--container-shelf: var(--container-content);
	/*
	 * Видеоблоки спецпроектов — единственные, кому нужен контейнер уже
	 * общего: плитка с превью там крупная, и на 1220 два таких блока
	 * занимали почти весь экран. 1000 и на разводящей, и на внутренней.
	 */
	--container-video: 858px;
	/*
	 * Разводящая спецпроектов: плитки видео уменьшены до высоты плитки на
	 * главной — 578.53 * 0.76828 = 444.47. Пропорцию 462.5/664.6 держим,
	 * поэтому ширина выходит 309.31 вместо прежних 371.3, а весь ряд —
	 * 309.31 * 2 + 53.65 = 672.27 вместо 807. У эпизодов внутри спецпроекта
	 * остаётся свой контейнер 858: их размер клиент принял.
	 */
	--container-video-grid: 672.27px;
	--container-episodes: var(--container-video);

	/*
	 * Промежутки в видеосетках. Сами колонки считаются от контейнера видео,
	 * поэтому при смене его ширины ряд по-прежнему заполняется ровно.
	 *
	 * Оба ужаты тем же множителем 0.83313, что и сами плитки (444.47 / 533.5):
	 * иначе при уменьшенных плитках прежний промежуток стал бы относительно
	 * шире и ряд развалился бы на две отдельные картинки.
	 */
	--video-gap: 53.65px;
	--video-row-gap: 50.07px;
	--episodes-gap: 69px;
	--episodes-row-gap: 83.4px;
	--container-project: var(--container-content);
	--container-rows: var(--container-content);

	/*
	 * Карточки. Это не доли контейнера, а числа: карточка обязана быть одного
	 * размера на любом экране. Пересчитаны под контейнер 1220 — ритм макета
	 * тот же, масштаб меньше.
	 *
	 * Пересчёт пропорциональный: все размеры карточки — и по горизонтали, и
	 * по вертикали — умножены на отношение нового контейнера к макетному
	 * (1220 / 1494.38 = 0.8164; у книжной полки свой макетный контейнер, там
	 * 1220 / 1377 = 0.886). Иначе карточка при прежней высоте становилась
	 * заметно вытянутее макетной.
	 *
	 * Раньше здесь стояли готовые числа под контейнер 1220: 395.78 * 3 +
	 * 16.34 * 2 и 285.07 * 4 + 26.58 * 3. Теперь ширина карточки считается от
	 * контейнера, а промежутки ужаты тем же коэффициентом: ряд по-прежнему
	 * заполняется ровно, а контейнер правится одним числом выше.
	 *
	 * Проверка при 1050: 340.63 * 3 + 14.06 * 2 = 1050 — три карточки в ряд.
	 * Книги: 245.34 * 4 + 22.88 * 3 = 1050 — четыре в ряд.
	 * Плитка спецпроекта: 433.33 * 3 = 1300 — три штуки в широкий контейнер.
	 */
	--tg-card-gap: calc(16.34px * var(--k-content));
	--tg-card-row-gap: calc(17.06px * var(--k-content));
	--book-gap: calc(26.58px * var(--k-content));

	--tg-card-w: calc(
		(var(--container-content) - var(--tg-card-gap) * 2) / 3
	);
	/*
	 * Четыре книги в ряд, как в макете. На контейнере 850 пробовали три:
	 * при четырёх обложка выходила 199 на 269 и казалась мелкой. Но при
	 * контейнере 900 три книги дают ряд шире контейнера — четвёртая уезжала
	 * за правый край, и секция читалась как съехавшая. Четыре по 210.3 плюс
	 * три промежутка ровно заполняют 900.
	 */
	--book-w: calc(
		(var(--container-content) - var(--book-gap) * 3) / 4
	);
	--project-tile-w: calc(var(--container-wide) / 3);

	/*
	 * Карточка на разводящей полки: три в ряд по ширине контейнера.
	 * 323.33 * 3 + 40 * 2 = 1050. Промежуток макетный, ширина считается от
	 * контейнера — как у остальных сеток.
	 */
	/*
	 * 28 вместо 40: клиент попросил сдвинуть книги ближе друг к другу.
	 * Контейнер полки при этом прежний, поэтому обложки на те же 8 пикселей
	 * шире — ширина карточки считается из этой переменной строкой ниже.
	 */
	--shelf-gap: 28px;
	--book-card-w: calc(
		(var(--container-shelf) - var(--shelf-gap) * 2) / 3
	);

	/*
	 * Шапка — по макету.
	 *
	 * Была уменьшена до 280 по просьбе заказчика (на экране 1920x889 макетные
	 * 372 занимают 42% первого экрана). По замечанию клиента размеры возвращены
	 * к макетным: кегль меню должен быть 28, а не 22.
	 *
	 * Высокая шапка теперь не мешает: при прокрутке она схлопывается в полосу
	 * 80px и перестраивается в строку — логотип слева, меню, иконки справа.
	 * То есть 372 видны только на первом экране.
	 *
	 * Проверка суммы: 40.534 + 35.676 + 39.909 + 125.956 = 242.075 (низ
	 * логотипа), + 56.92 = 299 (верх меню), + 43 = 342, + 30 = 372.
	 */
	/*
	 * Размеры шапки — готовыми числами, без общего множителя.
	 *
	 * Откуда они: макетные значения, один раз умноженные на 0.8 — клиенту
	 * нравилось, как шапка выглядит при Ctrl-минусе. Исходное макетное число
	 * стоит в комментарии у каждой строки, чтобы при следующей правке было
	 * видно, от чего считали.
	 *
	 * Мобильной шапки (ниже 430) это не касается — у неё свои размеры.
	 */
	--header-h: 297.6px; /* макет 372 */
	--header-social-size: 28.5408px; /* макет 35.676 */
	/*
	 * Иконка внутри кружка — те же доли, что в подвале (18.26 и 16.4 в
	 * кружке 41), пересчитанные под шапочный кружок 35.676.
	 */
	--header-social-icon: 12.7104px; /* макет 15.888 */
	--header-social-icon-youtube: 11.416px; /* макет 14.27 */
	--header-social-border: 1px;
	--header-social-gap: 32.3472px; /* макет 40.434 */
	--header-social-top: 32.4272px; /* макет 40.534 */
	--header-brand-gap: 31.9272px; /* макет 39.909 */
	--header-avatar-size: 100.7648px; /* макет 125.956 */
	--header-brand-w: 291.2px; /* макет 364 */
	--header-wordmark-w: 169.6px; /* макет 212 */
	--header-wordmark-h: 99.84px; /* макет 124.8 */
	--header-brand-inner-gap: 61.708px; /* макет 77.135 */
	--header-nav-gap-top: 45.536px; /* макет 56.92 */
	/*
	 * Шаг между пунктами меню. Макетные 77.135 считались под контейнер 1220:
	 * при контейнере 950 строка выходила 1001 и обрезалась даже на широком
	 * экране. Сначала стало 56, потом на него лёг тот же множитель 0.8, что
	 * и на остальную шапку, — отсюда 44.8. Строка занимает 750 при
	 * контейнере 900; если добавить пункт меню и она перестанет влезать,
	 * лента прокрутится.
	 */
	--header-nav-item-gap: 44.8px; /* макет 56 */
	--header-nav-fs: 22.4px; /* макет 28 */
	--header-nav-lh: 34.4px; /* макет 43 */
	--header-pad-bottom: 24px; /* макет 30 */

	/* Компактная шапка при прокрутке: логотип — меню — иконки в одну строку. */
	--header-compact-h: 64px; /* макет 80 */
	--header-compact-brand-w: 120px; /* макет 150 */
	--header-compact-brand-h: 41.6px; /* макет 52 */
	--header-compact-social: 17.6px; /* макет 22 */
	--header-compact-social-icon: 7.84px; /* макет 9.8 */
	--header-compact-social-icon-youtube: 7.04px; /* макет 8.8 */
	--header-compact-nav-fs: 14.4px; /* макет 18 */
	--header-compact-nav-lh: 19.2px; /* макет 24 */
	--header-compact-nav-gap: 25.6px; /* макет 32 */
	--header-compact-brand-top: 11.2px; /* макет 14 */
	--header-compact-nav-top: 22.4px; /* макет 28 */
	--header-compact-social-top: 23.2px; /* макет 29 */
	--header-compact-social-gap: 14.4px; /* макет 18 */
	/* Место, которое соцсети занимают в собранной строке: 4 кружка и просветы. */
	--header-compact-social-w: 129.6px; /* макет 162 */

	/* Единая длительность ховеров по всему сайту. */
	--hover-t: 0.3s ease;

	--header-morph: 0.38s;
	--header-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Подвал */
	/* Просвет перед подвалом: макетные 233.83, уменьшенные в полтора раза. */
	--footer-pad-top: 155.89px;
	/*
	 * Значения из макета (группа 41:2468): кружок 41, шаг 61.686 — то есть
	 * просвет 20.686, обводка 1.15 цветом #2f2f2f. Высота глифа 18.26 у
	 * всех, кроме ютуба: у него 16.4. Ширина везде считается от пропорций
	 * самой иконки, иначе плоскость телеграма сплющивается.
	 */
	/*
	 * Размеры подвала пересчитаны под его контейнер. Числа макетные, множитель
	 * --k-wide (1176 / 1450) тот же, каким ужат сам контейнер: подвал был
	 * нарисован под 1450, и после сужения кегли остались крупными — в макете
	 * подпись колонки заметно мельче ряда ссылок над ней.
	 *
	 * Считается, а не вбито числами: если ширину подвала снова поменяют,
	 * шрифты, кружки соцсетей и пилюля правовых ссылок поедут следом сами.
	 */
	/*
	 * 0.73: было 0.81103 (подвал к макетным 1450 при контейнере 1176).
	 * После сужения контейнера клиент сказал, что подвал всё ещё крупноват —
	 * множитель приведён к нынешнему широкому контейнеру 1114 / 1450 = 0.768
	 * и ещё немного убавлен. Ниже 0.75 не опускаю: мелкий текст подвала
	 * (адрес, копирайт, правовые ссылки) уходит за 12 пикселей и становится
	 * плохо читаемым. Держится отдельно от --k-wide намеренно, чтобы подвал
	 * не мельчал автоматически при каждом движении контейнера.
	 */
	--k-footer: 0.75;

	--footer-social-size: calc(41px * var(--k-footer));
	--footer-social-icon: calc(18.26px * var(--k-footer));
	--footer-social-icon-youtube: calc(16.4px * var(--k-footer));
	--footer-social-gap: calc(20.686px * var(--k-footer));
	--footer-social-border: 1px;
	--footer-col-title-fs: calc(32px * var(--k-footer));
	--footer-col-title-lh: calc(48px * var(--k-footer));
	--footer-link-fs: calc(28px * var(--k-footer));
	--footer-link-lh: calc(52px * var(--k-footer));
	--footer-divider-h: calc(267px * var(--k-footer));
	--footer-pill-w: calc(331px * var(--k-footer));
	--footer-pill-h: calc(56px * var(--k-footer));
	/* Мелкий текст подвала: адрес, копирайт, правовые ссылки. */
	--footer-small-fs: calc(16px * var(--k-footer));
	--footer-small-lh: calc(24px * var(--k-footer));

	/* Брейкпоинты — как справочник, в media-запросах пишутся числами */
	--bp-mobile: 393px;
	--bp-tablet: 768px;
	--bp-desktop: 1280px;
}