/*
 * Секции главной. Геометрия снята с фрейма Desktop (23:89), артборд 1920.
 *
 * ВНИМАНИЕ: кегль заголовка hero вычислен из ширины текстового блока в макете
 * (742.86px) подбором по метрикам Spectral — прямой доступ к значению закрыт
 * лимитом Figma. Диапазон, при котором перенос совпадает с макетом: 54–68px.
 * Взято 56px. Правится одной переменной ниже.
 */

/* ---------- Hero ---------- */

.hero {
	/*
	 * Высота уменьшена двумя заходами: сперва до 0.9 от макетной, затем ещё
	 * до 0.92 от полученной — итого 878 * 0.828 = 727. Само число живёт в
	 * токенах: его же берёт шапка внутреннего спецпроекта. Вместе с высотой
	 * тем же множителем ужаты вертикальные координаты — верх заголовка,
	 * высота карточки и просвет под ней. Интерлиньяж заголовка не трогаем:
	 * это кегль, а не геометрия, и от него считается высота строки.
	 */
	/*
	 * 550, а не макетные 967 (и не прежние 742.86 — та же доля контейнера).
	 * Ширина подобрана под перенос, который попросил клиент: «Как жила
	 * Португалия в» должно целиком остаться на первой строке, «эпоху
	 * Салазара» — уйти на вторую. Первая строка занимает 466, вся фраза
	 * вместе со словом «эпоху» — 588, поэтому окно допустимых значений
	 * снизу ограничено 503 (на меньшем «Почему архив всегда врёт немного в
	 * свою пользу» перестаёт помещаться в две строки и обрезается по
	 * line-clamp), сверху — 588. 550 стоит почти посередине: 47 запаса
	 * снизу и 38 сверху, так что разбивка не поедет от мелкой разницы в
	 * отрисовке шрифта. Самый длинный однострочный заголовок — «Правда о
	 * школах в СССР», 487, — тоже остаётся в одну строку.
	 */
	--hero-title-w: 550px;
	/*
	 * 43, а не макетные 56. Кегль пересчитан в ту же долю, в какую ужат
	 * контейнер героя: 1114 против макетных 1450. При 56 заголовок слайдера
	 * выглядел заметно крупнее, чем в макете, — клиент это и заметил.
	 */
	--hero-title-fs: 43px;
	/*
	 * Интерлиньяж 56, а не 47.35. Прежнее значение получилось делением
	 * высоты двухстрочного блока из макета пополам — но Figma отдаёт для
	 * текста визуальные габариты, а не сумму строк, и деление дало
	 * интерлиньяж меньше кегля: строки шли внахлёст.
	 */
	--hero-title-lh: 43px;
	/*
	 * Доля, а не число: 143.31 от 727. Высота героя теперь зависит от окна,
	 * и все вертикальные координаты внутри обязаны идти за ней — иначе на
	 * низком экране карточка выехала бы за нижний край.
	 */
	--hero-title-top: calc(var(--hero-h) * 0.19713);
	/*
	 * Оверлей уменьшен в ту же долю, в какую ужат широкий контейнер героя
	 * (1114 против макетных 1450): 772.88 → 594, 335.47 → 258. Внутренние
	 * размеры — поля, кегли, кнопка, стрелки — пересчитаны тем же множителем,
	 * иначе в узкой карточке они выглядят непропорционально крупными.
	 *
	 * Высота — макетные 405.15 тем же множителем: 311. Проверка по
	 * содержимому: поля 24 + дата 20 + просвет 12 + пять строк лида по 20 +
	 * просвет 25 + кнопка 28 = 209, плюс панель управления 36.8 у внутреннего
	 * низа. При 258 кнопка налезала на точки-пагинацию, при 311 между ними
	 * остаётся сорок пикселей.
	 */
	--hero-card-w: 594px;
	--hero-card-h: 311px;
	/*
	 * 155.72, а не 173.08. В макете отступ отмерян от визуального низа
	 * заголовка, а в браузере — от низа строчного блока, который при
	 * интерлиньяже 56 на 17.3 выше. Разницу вычитаем, чтобы карточка
	 * встала на свои 440.8 от верха героя, как в макете.
	 */
	/* Тоже доля: 109.68 от 727. */
	--hero-card-gap: calc(var(--hero-h) * 0.15087);
	--hero-card-pad: 24px;
	/*
	 * Сверху и справа по 27: клиент попросил добавить три пикселя именно с
	 * этих двух сторон. Базовое значение оставлено переменной — от неё же
	 * считается положение панели управления внутри карточки.
	 */
	--hero-card-pad-top: 27px;
	--hero-card-pad-right: 27px;
	--hero-arrow: 36.8px;
	/*
	 * Верх карточки считаем, а не задаём числом: заголовок жёстко занимает
	 * две строки, поэтому координата совпадает с макетными 440.8 и остаётся
	 * одинаковой на всех слайдах. От неё же считается панель управления.
	 */
	--hero-card-top: calc(
		var(--hero-title-top) + var(--hero-title-lh) * 2 + var(--hero-card-gap)
	);

	/* Высота — общая формула из токенов, см. --hero-h. */

	position: relative;
	/* Ширина ограничена: см. --page-max. */
	max-width: var(--page-max);
	margin-inline: auto;
	height: var(--hero-h);
	overflow: hidden;
	background: var(--c-black);
}

/*
 * overflow-x: hidden, а не auto. У блока, который прокручивается только по
 * горизонтали, Chrome превращает вертикальное колесо в горизонтальное — и
 * страница под курсором перестаёт прокручиваться, пока не кончатся слайды.
 * При hidden программная прокрутка (scrollTo из скрипта) продолжает работать,
 * а колесо уходит странице. Свайп возвращаем только на сенсорных устройствах.
 */
.hero__track {
	display: flex;
	height: 100%;
	overflow-x: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	scroll-behavior: smooth;
}

.hero__track::-webkit-scrollbar {
	display: none;
}

@media (hover: none) and (pointer: coarse) {
	.hero__track {
		overflow-x: auto;
	}
}

.hero__slide {
	position: relative;
	flex: 0 0 100%;
	height: 100%;
	scroll-snap-align: start;
	background-color: #1a1a1a;
	background-image: var(--hero-image, none);
	background-size: cover;
	background-position: center;
}

/*
 * Затемнение по макету: `Rectangle 240653075` в группе героя — прямоугольник
 * 1967x876 с линейной заливкой от #000000 100% до #000000 0%. То есть чёрный
 * начинается вплотную к шапке и растворяется к низу слайдера: это и есть
 * градиентный переход из шапки, который просил клиент.
 *
 * Раньше здесь стояло придуманное мной затемнение в три остановки
 * (0.55 / 0.25 / 0.55) — оно решало читаемость белого текста, но давало на
 * границе с шапкой резкий стык.
 */
.hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 1) 0%,
		rgba(0, 0, 0, 0) 100%
	);
}

/*
 * Содержимое слайда — в широком контейнере. Сама подложка с картинкой идёт
 * во всю ширину окна: тёмная полоса героя переходит из шапки и обрываться
 * по краям контейнера не должна.
 */
.hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--container-wide);
	height: 100%;
	margin-inline: auto;
	padding-top: var(--hero-title-top);
}

.hero__title {
	width: var(--hero-title-w);
	max-width: 100%;
	margin-inline: auto;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: var(--hero-title-fs);
	line-height: var(--hero-title-lh);
	text-align: center;
	/*
	 * wrap, а не balance. Balance выравнивает строки по длине и выбирает
	 * перенос по самому тексту, игнорируя ширину блока: «Как жила
	 * Португалия / в эпоху Салазара» он давал при любой ширине от 433 до
	 * 782, и подобрать нужный перенос было нечем. Обычный жадный перенос
	 * набивает первую строку до края блока — им и управляем через
	 * --hero-title-w.
	 */
	text-wrap: wrap;
	color: var(--c-white);
}

/*
 * Заголовок занимает ровно две строки независимо от длины. Иначе карточка,
 * идущая следом в потоке, встаёт на разной высоте на разных слайдах: оверлей
 * прыгает при перелистывании, а панель управления, привязанная к постоянной
 * точке, оказывается ниже его края.
 */
.hero__title {
	min-height: calc(var(--hero-title-lh) * 2);
}

/*
 * От планшета и выше карточка вынута из потока и стоит на фиксированной
 * координате, поэтому длина заголовка на неё не влияет вообще. Заголовку
 * остаётся не наехать на карточку — отсюда обрезка по двум строкам.
 *
 * padding-bottom — запас на нижние выносные (у, р, д). Интерлиньяж здесь равен
 * кеглю, глиф вылезает за строчный блок, и overflow: hidden срезал бы хвосты
 * букв на второй строке.
 */
@media (min-width: 450.02px) {
	.hero .hero__title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
		padding-bottom: 14px;
	}

	.hero .hero__card {
		position: absolute;
		top: var(--hero-card-top);
		left: 50%;
		transform: translateX(-50%);
		margin-top: 0;
	}
}

.hero__title .accent {
	color: var(--c-accent);
	font-style: italic;
}

.hero__card {
	width: var(--hero-card-w);
	max-width: calc(100% - 32px);
	height: var(--hero-card-h);
	margin-inline: auto;
	margin-top: var(--hero-card-gap);
	padding: var(--hero-card-pad-top) var(--hero-card-pad-right) var(--hero-card-pad) var(--hero-card-pad);
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(2px);
	color: var(--c-white);
}

.hero__meta {
	display: flex;
	align-items: center;
	gap: 4.5px;
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 20px;
	color: var(--c-grey-200);
}

/*
 * Пять строк всегда, а не «не больше пяти». Высота задана жёстко: line-clamp
 * только обрезает лишнее, а короткий лид оставлял блок ниже — и кнопка
 * «Читать далее» вставала на разной высоте на разных слайдах, прыгая при
 * перелистывании. 100 = 5 строк по 20.
 */
.hero__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	overflow: hidden;
	height: 100px;
	margin-top: 12px;
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 20px;
	color: var(--c-grey-200);
}

/* Кнопка внутри оверлея — своя, мельче общей: карточка стала уже. */
.hero__card .btn {
	margin-top: 25px;
	min-height: 28px;
	padding: 0 14px;
	border-radius: 14px;
	font-size: 12px;
}

.hero__card .btn .icon {
	width: 15px;
	height: 15px;
}

/*
 * Панель управления лежит поверх карточки и рисуется один раз на весь слайдер.
 * Её низ привязан к внутреннему низу карточки (низ карточки минус её падинг),
 * поэтому она всегда внутри оверлея, а не висит под ним.
 */
.hero__controls {
	position: absolute;
	z-index: 2;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(
		var(--hero-h) - var(--hero-card-top) - var(--hero-card-h) + var(--hero-card-pad)
	);
	width: calc(var(--hero-card-w) - var(--hero-card-pad) * 2);
	max-width: calc(100% - 96px);
	height: var(--hero-arrow);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.hero__bars {
	display: flex;
	align-items: center;
	gap: 5.26px;
}

/*
 * Неактивная точка — ровный круг, активная растягивается в пилюлю. Раньше
 * неактивные были 16x8, то есть тоже пилюлями, только короткими: разница
 * между состояниями читалась как «длинная и покороче», а не «полоса и точка».
 */
.hero__bar {
	width: 8px;
	height: 8px;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	transition: width 0.25s ease, border-radius 0.25s ease, background-color 0.25s ease;
}

.hero__bar.is-active {
	width: 32px;
	border-radius: 4px;
	background: var(--c-accent);
}

/*
 * Стрелки прижаты к правому краю чуть плотнее, чем идёт внутренний отступ
 * карточки: по нему они висели слишком далеко от края. Сдвиг только
 * горизонтальный — вертикальный (bottom: -8px) убран, из-за него блок со
 * стрелками стоял на восемь пикселей ниже точек пагинации, хотя оба лежат в
 * одной строке с align-items: center.
 */
.hero__nav {
	position: relative;
	right: -8px;
	display: flex;
	align-items: center;
	gap: 8px;
}

/*
 * Приглушённое общее число: номер текущего слайда остаётся белым, «/ 07»
 * уходит в полупрозрачный белый. Так пара читается как «третий из семи», а
 * не как одна строка одинакового веса.
 */
.hero__counter-total {
	color: rgba(255, 255, 255, 0.55);
}

.hero__counter {
	margin-right: 12px;
	font-family: var(--font-sans);
	font-size: 12px;
	line-height: 16px;
	color: var(--c-white);
	white-space: nowrap;
}

.hero__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--hero-arrow);
	height: var(--hero-arrow);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	color: var(--c-white);
	transition: background-color var(--hover-t), border-color var(--hover-t);
}

@media (hover: hover) and (pointer: fine) {
	.hero__arrow:hover {
		background: var(--c-accent);
		border-color: var(--c-accent);
	}
}

/*
 * Стрелка со стержнем, а не уголок. Раньше она рисовалась двумя рамками —
 * получался шеврон без палочки. Теперь это svg из общего набора иконок,
 * «назад» — та же иконка, отзеркаленная.
 */
.hero__arrow-icon {
	width: 16px;
	height: 16px;
}

.hero__arrow-icon--prev {
	transform: scaleX(-1);
}

/* ---------- Адаптив hero ---------- */

/*
 * Промежуточной полосы у героя больше нет.
 *
 * Здесь стояли свои высота, кегль и размер карточки для окон уже 1100 — и
 * ровно из-за них герой прыгал по высоте, когда клиент таскал край окна.
 * Требование заказчика: ни один блок не меняет размеров при изменении ширины
 * окна. Поэтому геометрия героя одна на всю десктопную раскладку, а в узкое
 * окно он, как и остальные блоки, уходит за край.
 */

/*
 * Граница мобильного героя — 450, а не 429.98, как у остальных блоков.
 * Десктопная раскладка героя построена на фиксированных числах (карточка
 * 594, заголовок 550), и в полосе 430–450 они в экран не помещаются:
 * карточка вылезает за край. Клиент попросил отодвинуть границу именно у
 * слайдера, остальные блоки переключаются по-прежнему на 429.98.
 * Парная граница десктопной ветки выше — min-width: 450.02.
 */
@media (max-width: 450px) {
	/*
	 * Мобильный герой собран иначе, чем десктопный, — по мобильному макету.
	 *
	 * Картинка видна полосой и сверху, и снизу: раньше карточка с заголовком
	 * занимали почти всю высоту, и от кадра оставалась щёлка. Точки пагинации
	 * лежат внутри карточки, у её нижнего края. Стрелок, счётчика и кнопки
	 * «Читать далее» на телефоне нет: листают пальцем, а по карточке и так
	 * работает ссылка на весь слайд.
	 */
	.hero {
		--hero-h: auto;
		--hero-title-w: 100%;
		--hero-title-fs: 28px;
		--hero-title-lh: 32px;
		--hero-title-top: 110px;
		--hero-card-gap: 32px;
		--hero-card-w: 100%;
		--hero-card-h: auto;
		--hero-card-pad: 20px;
		/* Отступ от низа кадра до низа карточки. */
		--hero-card-bottom: 120px;
		/* Просвет между низом карточки и точками внутри неё. */
		--hero-dots-inset: 20px;

		height: auto;
	}

	.hero__slide {
		height: auto;
		padding-bottom: var(--hero-card-bottom);
	}

	/*
	 * Карточка прижата к низу кадра, а не идёт следом за заголовком. Иначе
	 * на слайде с коротким заголовком она встаёт выше, чем на слайде с
	 * длинным, и точки, привязанные к низу кадра, оказываются мимо неё.
	 */
	.hero__inner {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding-inline: 16px;
	}

	.hero__card {
		max-width: 100%;
		padding-bottom: calc(var(--hero-dots-inset) * 2 + 12px);
	}

	.hero__card .btn {
		display: none;
	}

	/* Четыре строки, как в мобильном макете: на трёх карточка была куцей. */
	.hero__excerpt {
		-webkit-line-clamp: 4;
		line-clamp: 4;
	}

	.hero__controls {
		left: calc(16px + var(--hero-card-pad));
		bottom: calc(var(--hero-card-bottom) + var(--hero-dots-inset));
		transform: none;
		width: auto;
		max-width: none;
		height: auto;
	}

	.hero__nav {
		display: none;
	}
}

/* ---------- Общее для карточек ---------- */

.card,
.tg-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 8px;
	background: var(--c-surface);
	overflow: hidden;
}

.card__media,
.tg-card__media {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
}

.card__media img,
.tg-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card__media-placeholder,
.tg-card__media-placeholder,
.book__cover-placeholder,
.project-tile:not([style]) .project-tile__scrim {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(
		45deg,
		#d5d5d5,
		#d5d5d5 10px,
		#cbcbcb 10px,
		#cbcbcb 20px
	);
}

/* ---------- Наш Telegram ---------- */

/*
 * Верхний отступ секции и просвет под её заголовком — в полтора раза меньше
 * общих: 71.87 / 1.5 и 48.29 / 1.5. Селектор с двумя классами намеренно:
 * общие правила .section и .section > .section-title лежат в другом файле, и
 * при равном весе исход решал бы порядок подключения — а он может измениться.
 * Правило действует только на телеграм, остальные секции сохраняют свой шаг.
 */
.section.section--telegram {
	padding-top: 47.91px;
	/* Компенсация подъёма кнопки на 15 — см. .section--telegram .section__cta. */
	padding-bottom: 15px;
}

/*
 * Просвет от заголовка секции до её содержимого — общий для трёх блоков
 * главной. Началось с телеграма (48.29 / 1.5), потом клиент попросил тот же
 * шаг у спецпроектов и «Рекомендуем почитать».
 *
 * Секция спецпроектов стоит и на внутренних страницах проекта — «Другие
 * спецпроекты», — и там просвет тоже станет 32.19: класс один. Книжная
 * полка сюда не входит, у неё своё значение ниже по файлу.
 */
.section.section--telegram > .section-title,
.section.section--projects > .section-title,
.section.section--recommended > .section-title {
	margin-bottom: 32.19px;
}

.tg-grid {
	gap: var(--tg-card-gap);
}

/*
 * Высота по макету. Уменьшали до содержимого (выходило 533), но по замечанию
 * клиента вернули макетные 678.09. Текст при этом остался длиннее исходного:
 * лимит 340 символов и восстановленный хвост первой строки — это правка
 * разбора, а не вёрстки, и к макету отношения не имеет.
 */
.tg-card {
	width: var(--tg-card-w);
	min-height: calc(553.59px * var(--k-content));
	/* 13.5 вместо 16.12: клиент попросил ужать поля на два-три пикселя. */
	padding: 13.5px;
	/*
	 * Рамка есть всегда, просто прозрачная: если добавлять её только на
	 * ховере, коробка карточки подрастает на два пикселя и содержимое
	 * дёргается под курсором.
	 */
	border: 1px solid transparent;
	transition: border-color var(--hover-t), box-shadow var(--hover-t);
}

@media (hover: hover) and (pointer: fine) {
	.tg-card:hover {
		border-color: var(--c-accent);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
	}
}

/*
 * Высота ровно в две строки, а не «не меньше двух». У постов заголовки
 * разной длины, и от этого картинки в соседних карточках стояли на разной
 * высоте — ряд выглядел рассыпанным. Фиксированные две строки: длинный
 * заголовок обрезается многоточием, короткий добирает пустотой, картинка у
 * всех начинается на одной линии. Было три строки — карточка вышла высокой.
 */
.tg-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	/* Две строки при 18/20.28 — было 45.06 при 20/22.53. */
	height: 40.56px;
	overflow: hidden;
	font-family: var(--font-serif);
	font-weight: 600;
	/* 18 вместо 20: минус два пикселя по просьбе клиента. Интерлиньяж тем
	   же отношением 1.1265, чтобы две строки остались двумя. */
	font-size: 18px;
	line-height: 20.28px;
	text-align: center;
	color: var(--c-text);
	padding-inline: 12px;
	margin-bottom: 15.51px;
}

.tg-card__media {
	height: calc(188.64px * var(--k-content));
	flex: none;
}

.tg-card__rule {
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--c-grey-200);
}

/*
 * Шесть строк. flex: 1 оставлен, чтобы подвал прижимался к низу и все три
 * карточки в ряду держали его на одной линии; обрезка не даёт длинному посту
 * растянуть ряд.
 */
.tg-card__text {
	flex: 1;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	margin-top: 10.5px;
	/*
	 * Боковые поля 6: текст не упирается в край карточки. Полем, а не общим
	 * падингом карточки, — картинка и заголовок должны остаться на прежних
	 * местах, отступ нужен только тексту. Сначала было 3, по просьбе клиента
	 * добавлено ещё по три с каждой стороны.
	 */
	padding-inline: 6px;
	/*
	 * Высота ровно в шесть строк. Без ограничения блок растягивался флексом
	 * до низа карточки, и обрезка проходила посреди седьмой строки — из-под
	 * края выглядывали верхушки букв. Ограничение делает срез по целой
	 * строке, а подвал карточки прижимается к низу своим margin-top: auto.
	 */
	max-height: calc(16px * 6);
	font-family: var(--font-sans);
	/*
	 * 11: сначала 13 вместо макетных 14, чтобы описание не спорило с
	 * заголовком карточки, теперь ещё минус два по просьбе клиента.
	 * Интерлиньяж 16 — то же отношение к кеглю, что было у 13/19.
	 */
	font-size: 11px;
	line-height: 16px;
	color: #4a4a4a;
	overflow: hidden;
}

/*
 * Подпись под карточкой: «Posted by @канал» слева, дата справа. Кегль 12,
 * а не 13, и промежутки поменьше — после сужения контейнера карточка стала
 * 308 вместо 396, строке не хватало двух пикселей, и «Posted by» переносилось
 * на вторую строку. Сейчас строка занимает 252 при доступных 274.
 */
.tg-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	/* auto — подвал у нижнего края карточки, 13.06 остаётся просветом. */
	margin-top: auto;
	padding-top: 10.5px;
	font-family: var(--font-sans);
	/*
	 * 11, а не 12: при карточке 292 строке «Posted by @канал + дата» нужно
	 * было 265 при доступных 258, и имя канала обрезалось многоточием.
	 * На 11 строка занимает 245 — влезает целиком, с запасом.
	 */
	font-size: 11px;
	line-height: 24px;
	color: #6b6b6b;
}

.tg-card__author {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	/* min-width: 0 — иначе имя канала не даёт блоку сжаться и ломает ряд. */
	min-width: 0;
}

/* Имя канала — фирменным акцентом, оно тут единственное «живое» слово. */
.tg-card__author-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--c-accent);
}

/*
 * Подпись и дата — короткие и постоянные, ломать их по словам незачем.
 * Кегль у даты задан явно: .meta-item несёт свой, крупнее подписи, и без
 * этой строки дата снова не помещалась в ряд с автором.
 */
.tg-card__author-label,
.tg-card__date {
	white-space: nowrap;
}

/*
 * Дата вместе с календариком — тем же тоном, что подпись «Posted by»: это
 * служебная строка, и выделяться в ней должно только имя канала. Цвет задан
 * на всю строку, поэтому иконка подхватывает его через currentColor.
 */
.tg-card__date {
	font-size: 11px;
	color: #9a9a9a;
}

.tg-card__author-label {
	color: #9a9a9a;
}

/* ---------- Наши Спецпроекты ---------- */

/*
 * 56 вместо макетных 107.37: сперва в полтора раза (71.58), затем ещё
 * немного по просьбе клиента. Ориентир — верхнее поле самой секции
 * телеграма, 47.91: просвет между блоками и отступ внутри блока стали
 * одного порядка, и ритм страницы читается ровнее.
 *
 * Весь этот промежуток даёт верхнее поле спецпроектов: у телеграма нижнее
 * поле нулевое. На внутренних страницах спецпроекта у этой же секции свои
 * значения, они ниже по файлу и не задеты.
 */
.section--projects {
	padding-top: 56px;
	padding-bottom: 0;
}



.project-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	/* Подпись по центру плитки по горизонтали, по низу — как была. */
	justify-content: center;
	width: var(--project-tile-w);
	/* Высота по той же пропорции, что была у макетных 640 на 766. */
	height: calc(578.53px * var(--k-wide));
	/* 28, а не макетные 40: на плитке 371 поля по 40 съедали место у подписи. */
	padding: 28px;
	background-color: #1a1a1a;
	color: var(--c-white);
	overflow: hidden;
}

/*
 * Картинка вынесена в псевдоэлемент, чтобы её можно было масштабировать.
 * У background-image масштаба нет — transform применяется к элементу целиком
 * и утащил бы за собой затемнение с подписью.
 */
.project-tile::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--tile-image, none);
	background-size: cover;
	background-position: center;
	transition: transform var(--hover-t);
}

@media (hover: hover) and (pointer: fine) {
	.project-tile:hover::before {
		transform: scale(1.05);
	}
}

.project-tile__scrim {
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	height: 328px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
}

/*
 * Подпись на плитке спецпроекта — в одну строку.
 *
 * Макетные 40 считались под плитку 640; при нынешних 371 самое длинное
 * название («Хроники Евромайдана») требовало 425 пикселей при доступных 291
 * и уезжало на две строки. Кегль 28 и внутреннее поле 28 вместо 40 дают
 * 297 при 315 — все три названия встают в строку с запасом. Тот же кегль
 * стоит у плиток на разводящей спецпроектов, чтобы подписи совпадали.
 */
.project-tile__label {
	position: relative;
	z-index: 2;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.1;
	text-align: center;
	/*
	 * Точечное подчёркивание — то же, что у пунктов меню в шапке, теми же
	 * значениями. Префиксная сокращённая запись идёт первой ради Safari до
	 * 12.1: он не знает ни отдельного text-decoration-style, ни offset и
	 * thickness, но понимает -webkit-text-decoration, и подчёркивание там
	 * останется точечным — только ближе к тексту и обычной толщины.
	 *
	 * Цвет не задаём: по умолчанию это currentColor, поэтому на ховере
	 * пунктир уходит в акцент вместе с подписью.
	 */
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted;
	text-decoration-thickness: 1.8px;
	text-underline-offset: 6px;
	transition: color var(--hover-t);
}

@media (hover: hover) and (pointer: fine) {
	.project-tile:hover .project-tile__label {
		color: var(--c-accent);
	}
}

/* ---------- Рекомендуем Почитать ---------- */

/*
 * Блок не перестраивается на две колонки в узком окне: ряд остаётся из трёх
 * карточек макетного размера, а лишнее уезжает за правый край. Прокрутка
 * своя, у секции, полоса спрятана — как в подвале и в лентах.
 */
.section--recommended {
	/*
	 * 56 вместо макетных 114.37 — тот же просвет, что между телеграмом и
	 * спецпроектами. Промежуток между блоками на главной задан одним числом
	 * во всех трёх местах; нижнее поле секции пока макетное, его отдельно не
	 * просили.
	 */
	padding-top: 56px;
	/*
	 * 56 — тот же шаг, что и везде на главной. Ноль тут не подходит, хотя у
	 * телеграма и спецпроектов нижнее поле нулевое: те две секции светлые, и
	 * просвет между ними всё равно белый, кто бы его ни задавал. Здесь ниже
	 * начинается тёмная полка, и при нулевом поле белая зона обрывалась
	 * ровно по нижнему краю карточек. Прежние макетные 133.4 при этом
	 * выбивались из ритма в другую сторону.
	 *
	 * 71, а не 56: снизу и сверху от стыка поля равны математически, но не
	 * зрительно. Снизу граница жёсткая — карточка обрывается по краю; сверху
	 * к полю добавляется воздух внутри строчного блока заголовка, да и
	 * тёмная плоскость кажется массивнее светлой той же величины. Плюс
	 * пятнадцать выравнивают полосы на глаз.
	 */
	padding-bottom: 71px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

.section--recommended::-webkit-scrollbar {
	display: none;
}

.section--recommended .container {
	min-width: var(--container-content);
}


/*
 * Сетка карточек: три колонки макетной ширины, а не доли контейнера. Ряд не
 * перестраивается в узком окне — карточка держит размер, а лишняя колонка
 * уезжает за правый край. Прокрутка при этом у контейнера, не у страницы
 * (см. правило с :has ниже).
 */
.card-grid {
	display: grid;
	grid-template-columns: repeat(3, var(--tg-card-w));
	justify-content: center;
	gap: var(--tg-card-row-gap) var(--tg-card-gap);
	min-width: var(--container-content);
}

/*
 * Коробка прокрутки для сеток карточек — контейнер, в котором они лежат:
 * сама сетка не может быть одновременно и коробкой, и тем, что из неё
 * вылезает. Полоса спрятана, как и в остальных таких блоках.
 */
.container:has(> .card-grid) {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

.container:has(> .card-grid)::-webkit-scrollbar {
	display: none;
}

/* У «Рекомендуем почитать» прокрутка своя, на секции: две коробки не нужны. */
.section--recommended .container {
	overflow-x: visible;
}

.card {
	min-height: calc(319.51px * var(--k-content));
	/*
	 * Снизу 10, а не 17.8, как с остальных трёх сторон: подвал карточки
	 * (просмотры и дата) прижат к нижнему краю, и просвет под ним — это
	 * ровно поле карточки. На равных полях строка висела заметно выше
	 * нижнего края, чем в макете; уменьшенное поле опускает её на 7.8.
	 *
	 * Боковые поля трогать нельзя: ширина снимка тянется за ними, а высота
	 * у него фиксированная (188.64 * 0.7377), поэтому любое изменение поля
	 * меняет пропорции кадра. Проверено на себе — при 8 снимок растянулся.
	 *
	 * Правило одно на класс, поэтому одинаково во всех лентах карточек —
	 * на главной, в архивах и в «Читайте также».
	 */
	padding: 17.8px 17.8px 10px;
	/*
	 * Карточка лежит на белом листе и без заливки не имела границ вовсе —
	 * бледный серый и есть её контур. На ховере заливка сменяется акцентом,
	 * поэтому переход по background-color остаётся.
	 */
	background: var(--c-card-bg);
	transition: background-color var(--hover-t);
}

/*
 * Высота заголовка не масштабируется: она считается строками, а не
 * пикселями макета. 45.06 — это ровно две строки при 20/22.53, и
 * пересчёт по коэффициенту дал бы полторы: карточки с однострочным и
 * двухстрочным заголовком разъехались бы по высоте.
 */
.card__title {
	/*
	 * Ровно две строки, как в карточках телеграма.
	 *
	 * При карточке 292 и макетных полях 41.64 на текст оставалось 173
	 * пикселя, и заголовок в четыре слова уезжал на три-четыре строки —
	 * ряд разъезжался по высоте. Кегль с 20 до 17, поля с 41.64 до 14:
	 * на текст остаётся 228 вместо 173, и все шесть заголовков демо-ленты
	 * укладываются в две строки (проверено прогоном по каждому). Длинный
	 * заголовок обрезается многоточием, ряд по высоте не разъезжается.
	 */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	/*
	 * 44.56 — две строки по 20.28 плюс четыре пикселя запаса на выносные.
	 * При line-height меньше кегля глиф вылезает за строчный блок, и
	 * overflow срезал бы хвосты у «у», «р», «д» на второй строке. Падинг
	 * входит в область отсечения, поэтому запас появляется, а высота ряда
	 * не пляшет.
	 */
	height: 44.56px;
	overflow: hidden;
	padding-block: 0 4px;
	padding-inline: 14px;
	font-family: var(--font-serif);
	font-weight: 600;
	/* Тот же кегль и интерлиньяж, что у заголовка карточки телеграма. */
	font-size: 18px;
	line-height: 20.28px;
	text-align: center;
	color: var(--c-text);
	transition: color var(--hover-t), opacity var(--hover-t);
}

.card__media {
	/*
	 * Пропорция, а не число — тот же приём, что у обложки книги. Ширина
	 * снимка тянется за карточкой, и при жёсткой высоте любое сужение
	 * карточки плющило кадр. 256.35 к 139.16 — форма снимка при карточке
	 * 291.95: там, где карточка прежней ширины, размер не изменился ни на
	 * пиксель, а там, где она ужимается под блок, кадр ужимается вместе с
	 * ней и остаётся собой.
	 */
	aspect-ratio: 256.35 / 139.16;
	margin-top: 17.14px;
}

.card__footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	margin-top: auto;
	padding-top: 16.33px;
	/* 11 — тот же кегль, что у даты в карточках телеграма. */
	font-size: 11px;
	line-height: 24px;
	/*
	 * Служебная строка — тем же тоном, что дата в карточках телеграма, и
	 * теперь ровно тем же числом.
	 *
	 * До этого здесь стоял #ababab: кегль был 13 против телеграмных 11, а
	 * более крупные глифы при одинаковом цвете дают больше краски и читаются
	 * темнее, поэтому тон подбирался на глаз сравнением строк рядом. Кегли
	 * сравнялись — отпала и причина расхождения.
	 *
	 * Цвет задан всей строке, иконки подхватывают его через currentColor.
	 * На ховере строка становится белой правилом ниже — это не задето.
	 */
	color: #9a9a9a;
	transition: color var(--hover-t);
}

.card__footer .meta-item {
	font-size: 11px;
}

/* Ховер-состояние: розовая карточка в макете — это оно. */
.card__hover {
	position: absolute;
	/*
	 * Снизу 52, а не 60: нижняя граница ховер-подложки стоит по верхнему
	 * краю подвала, а тот вместе с полем карточки поднялся на 7.8.
	 */
	inset: 21.8px 21.8px 52px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--hover-t), visibility var(--hover-t);
}

.card__excerpt {
	/*
	 * Обрезка по целым строкам, а не по высоте блока.
	 *
	 * Было flex: 1 — блок растягивался на весь остаток ховера, а на этот
	 * остаток почти никогда не приходится целое число строк: снизу
	 * оставалась половина строки, срезанная поперёк. line-clamp тут не
	 * работает: у флекс-элемента display: -webkit-box блокифицируется во
	 * flow-root, и ограничение по строкам просто не применяется (проверено —
	 * computed display показывал flow-root).
	 *
	 * Поэтому высота по содержимому с потолком в шесть строк: 6 * 20 = 120.
	 * Потолок кратен строке, значит обрез всегда приходится на границу строк.
	 * Проверка, что влезает: самый низкий ховер — 180.2 (карточка 254), из
	 * них 120 текста, 12 просвета и 35 кнопки = 167.
	 */
	flex: 0 1 auto;
	max-height: 120px;
	overflow: hidden;
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 20px;
	color: var(--c-white);
}

/*
 * 20, а не 12: клиент попросил опустить кнопку от текста. Выше этого не
 * поднять — потолок считается по самому низкому ховеру (180.2 в «Читайте
 * также»): 120 текста + 20 просвета + 35 кнопки = 175, запаса остаётся 5.
 * При следующем увеличении кнопка упрётся в нижний край подложки.
 */
.card__cta {
	align-self: center;
	margin-top: 20px;
}

@media (hover: hover) and (pointer: fine) {
	.card:hover {
		background: var(--c-accent);
	}

	.card:hover .card__footer {
		color: var(--c-white);
	}

	/*
	 * Заголовок на ховере убираем совсем. Блок с описанием разворачивается от
	 * самого верха карточки и ложился прямо на него — две строки текста шли
	 * внахлёст и не читались.
	 */
	.card:hover .card__title {
		opacity: 0;
	}

	.card:hover .card__media {
		opacity: 0;
	}

	.card:hover .card__hover {
		opacity: 1;
		visibility: visible;
	}

	.card__media {
		transition: opacity var(--hover-t);
	}
}

/* ---------- Книжная полка ---------- */

.section--books {
	/* Тёмная полоса обрывается там же, где слайдер и подвал. */
	max-width: var(--page-max);
	margin-inline: auto;
	/* 56 — тот же шаг между блоками, что у спецпроектов и «Рекомендуем». */
	padding-top: 56px;
	padding-bottom: 104.2px;
	background: var(--c-black);
	color: var(--c-text-invert);
}

/* 32.19 — тот же просвет под заголовком, что в трёх секциях выше. */
.section--books > .section-title {
	margin-bottom: 32.19px;
}

.section--books .section__cta {
	margin-top: 48px;
}

/*
 * «Все книги» — та же кнопка, что «Читать далее» на карточке записи: белая
 * подложка, чёрный текст, раскрытая книга в иконке. Общее правило
 * .btn--outline.btn--wide трогать нельзя — на нём же держится «показать
 * ещё» в комментариях, а она стоит на светлой странице, где тёмная кнопка
 * и нужна. Поэтому перекрываем точечно, только в секции полки.
 */
.section--books .section__cta .btn {
	color: var(--c-black);
	background: var(--c-white);
	border-color: var(--c-white);
}

@media (hover: hover) and (pointer: fine) {
	.section--books .section__cta .btn:hover {
		background: var(--c-accent);
		border-color: var(--c-accent);
		color: var(--c-white);
	}
}

/*
 * Кнопка «Подписаться на наш телеграм» — уже карточки поста на 50px
 * (292 − 50 = 242): сначала сняли по 10 с каждой стороны, потом ещё по 15.
 * Ширина считается от --tg-card-w, чтобы при следующем изменении контейнера
 * кнопка поехала вместе с карточками, а не отдельно. Кегль, высота и иконка
 * снижены пропорционально ширине: у .btn стоит white-space: nowrap, и на
 * исходных 15px строка (307) в 242 не поместилась бы — текст бы вылез.
 */
/*
 * 26 вместо общих 46: кнопка придвинута к карточкам сначала на пять
 * пикселей (41), потом ещё на пятнадцать.
 *
 * Ровно эти 15 возвращены секции снизу (padding-bottom ниже). Иначе
 * подъём кнопки утянул бы за собой всё, что стоит следом: у секции нет
 * своей высоты, она равна содержимому, и спецпроекты поехали бы вверх.
 * Клиент просил двигать только кнопку — блок спецпроектов остаётся на
 * месте, а просвет между кнопкой и заголовком «Наши Спецпроекты»
 * соответственно увеличивается.
 */
.section--telegram .section__cta {
	margin-top: 26px;
}

.section--telegram .section__cta .btn {
	width: calc(var(--tg-card-w) - 50px);
	/*
	 * 47 вместо 36. Вертикального падинга у кнопки нет — его роль играет
	 * высота: строка 12, по 11 сверху и снизу, плюс две обводки = 36.
	 * Клиент попросил поля в полтора раза больше: 11 * 1.5 = 16.5, значит
	 * высота 12 + 33 + 2 = 47. Дальше округлили до 48 — ровно столько же у
	 * кнопки «Вся полка» под книжной полкой, и обе кнопки главной теперь
	 * одной высоты. Радиус — половина высоты, иначе торцы перестают быть
	 * полукруглыми.
	 */
	min-height: 48px;
	/* 10, а не 12: горизонтальные отступы тут просто держат запас под строку,
	   а он нужнее самих отступов — кнопка и так с фиксированной шириной. */
	padding: 0 10px;
	gap: 7px;
	border-radius: 24px;
	font-size: 12px;
}

.section--telegram .section__cta .btn .icon {
	width: 12px;
	height: 12px;
}

/*
 * В самом файле иконки залит акцентный красный — он нужен в шапке, подвале
 * и в блоке «поделиться». Здесь иконка лежит на чёрной кнопке, поэтому
 * перекрываем заливку у пути точечно, не трогая сам svg.
 */
.section--telegram .section__cta .btn .icon path {
	fill: var(--c-white);
}

.books {
	--container-w: var(--container-books);
}

/*
 * Ряд из четырёх обложек. Прокрутки и привязки к сетке здесь больше нет:
 * полка показывает ровно то, что нарисовано в макете, и ни одна книга не
 * прячется за краем.
 */
.books__track {
	display: flex;
	gap: var(--book-gap);
}

.books__track .book {
	flex: 0 0 var(--book-w);
	min-height: calc(519.19px * var(--k-content));
	padding-top: 17.72px;
}

.book__cover {
	position: relative;
	display: block;
	/*
	 * Пропорция, а не высота: обложка обязана быть формы книги при любой
	 * ширине карточки. 253.4 к 385.4 — макетное отношение (та же форма, что
	 * у карточек на разводящей полке). С жёсткой высотой обложка на широкой
	 * карточке становилась почти квадратной.
	 */
	aspect-ratio: 253.4 / 385.4;
	margin-inline: 15.84px;
	overflow: hidden;
}

/*
 * Ховер обложки: краткое описание книги поверх картинки. Оверлей светлый —
 * секция тёмная, и белая подложка с тёмным текстом читается на любой обложке,
 * тогда как затемнение сливалось бы с фоном секции.
 */
.book__hover {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * 14, а не 24: обложка на полке всего 179 в ширину, и поля по 24
	 * оставляли тексту 131 — около восемнадцати знаков в строке. Аннотация
	 * не помещалась и обрывалась на середине фразы (не хватало восьми
	 * строк). При 14 на текст остаётся 151, и он влезает целиком.
	 */
	padding: 14px;
	background: rgba(255, 255, 255, 0.92);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--hover-t), visibility var(--hover-t);
}

.book__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	/*
	 * 14 строк вместо 12: кегль стал мельче, и в ту же высоту их влезает
	 * больше. Ограничение оставлено на случай длинной аннотации — тогда
	 * текст закончится многоточием, а не вылезет за обложку.
	 */
	-webkit-line-clamp: 14;
	line-clamp: 14;
	overflow: hidden;
	font-family: var(--font-sans);
	/*
	 * 12/17, а не 14/20. На обложке 179 крупный кегль не помещался:
	 * аннотация в 258 знаков требовала двадцати строк при доступных
	 * двенадцати. На 12/17 она занимает 238 при доступных 244 —
	 * помещается целиком, ничего не обрезается.
	 */
	font-size: 12px;
	line-height: 17px;
	text-align: center;
	color: var(--c-text);
}

.book__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.book__author {
	/*
	 * 14 — просвет от обложки до автора на полке главной. Был 30, потом 25,
	 * теперь клиент попросил подтянуть подписи к обложке ещё ближе. Тот же
	 * просвет продублирован на разводящей полке (.book-card__author).
	 */
	margin-top: 14px;
	font-family: var(--font-sans);
	font-size: 12px;
	line-height: 16px;
	text-align: center;
	color: var(--c-grey-400);
}

/*
 * 2 вместо 6: автор и название сдвинуты между собой. Меньше не делаем —
 * у автора интерлиньяж 16 при кегле 12, у названия 27 при 20, и собственные
 * полуинтерлиньяжи строк добавляют к этим двум ещё около шести пикселей
 * воздуха. При нуле строки начали бы читаться одним блоком.
 */
.book__title {
	margin-top: 2px;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 20px;
	line-height: 27px;
	text-align: center;
	color: var(--c-white);
}

@media (hover: hover) and (pointer: fine) {
	.books__track .book:hover .book__hover {
		opacity: 1;
		visibility: visible;
	}
}

.book__title a {
	transition: color var(--hover-t);
}

@media (hover: hover) and (pointer: fine) {
	.book__title a:hover {
		color: var(--c-accent);
	}
}

/*
 * Точки вынесены из потока. В макете их нет вовсе: обложки кончаются на 5138,
 * кнопка «Вся полка» начинается на 5186 — между ними ровно 48. Точки в потоке
 * добавляли свои 40 (отступ 32 плюсвысота 8), и вся секция выходила выше
 * макетной на те же 39, а следом на столько же уезжал подвал.
 *
 * Теперь они лежат в этом самом промежутке и высоты не занимают.
 */
/* ---------- Адаптив секций ---------- */

@media (max-width: 429.98px) {
	.section-title {
		font-size: 44px;
	}

	.section,
	.section--projects,
	.section--recommended,
	.section--books {
		padding-top: 64px;
	}

	.section > .section-title {
		margin-bottom: 40px;
	}

	/*
	 * Размеры карточек здесь намеренно не трогаются. Окно поуже показывает
	 * меньше карточек в ленте, а не карточки поменьше: пропорции держит
	 * макет, а не ширина экрана. Мельчает всё только на телефоне, где
	 * макетная карточка шире самого экрана.
	 */
	.section--recommended {
		padding-bottom: 80px;
	}
}

@media (max-width: 429.98px) {
	.section-title {
		font-size: 33px;
	}

	.section,
	.section--projects,
	.section--recommended,
	.section--books {
		padding-top: 40px;
	}

	.section > .section-title {
		margin-bottom: 24px;
	}

	/*
	 * Ниже 768 лент нет: мобильный макет показывает карточки столбцом, одну
	 * под другой, и горизонтальная прокрутка там была бы отсебятиной.
	 * Дорожка разворачивается в обычную колонку, вылет за край снимается.
	 */
	.tg-grid.rail__track,
	.project-tiles.rail__track,
	.books__track.rail__track {
		display: grid;
		grid-template-columns: 1fr;
		overflow-x: visible;
		margin-right: 0;
		padding-right: 0;
	}

	.rail__arrow {
		display: none;
	}

	.tg-grid,
	.card-grid,
	.project-tiles {
		grid-template-columns: 1fr;
	}

	.card-grid {
		min-width: 0;
	}

	.container:has(> .card-grid) {
		overflow-x: visible;
	}

	/* На телефоне «Рекомендуем» снова обычный столбик, без бокового выезда. */
	.section--recommended {
		overflow-x: visible;
	}

	.section--recommended .container {
		min-width: 0;
	}

	/*
	 * Поля по краям. Мобильный макет нарисован только для главной, и там
	 * карточка шириной 373 при экране 393 — то есть 10px, а не базовые 20.
	 * Сужаем адресно: страницы без своего мобильного макета не трогаем.
	 */
	.section--telegram,
	.section--recommended {
		--container-pad: 10px;
	}

	/* Шаги в мобильном макете разные: у ленты Telegram 10, у карточек 20. */
	.tg-grid {
		gap: 10px;
	}

	.card-grid {
		gap: 20px;
	}

	/* Ширину карточки на телефоне задаёт колонка, а не макетное число. */
	.tg-card,
	.card {
		width: auto;
		min-height: 0;
	}

	.tg-card {
		padding: 9.7px;
	}

	.card {
		padding: 19.9px;
	}

	.card__title {
		padding-inline: 12px;
	}

	/* В макете высота медиа не меняется с брейкпоинтом — только ширина. */
	.tg-card__media,
	.card__media {
		height: 231.07px;
	}

	.project-tiles {
		gap: 0;
	}

	.project-tile {
		width: auto;
		height: 473.6px;
		padding: 20px;
	}

	.project-tile__label {
		font-size: 26px;
	}

	/* На тач-устройствах ховер не показываем — лид всегда виден в карточке. */
	.card__hover {
		display: none;
	}

	.books__track .book {
		flex: none;
		min-height: 0;
	}

	/*
	 * Обложка во всю ширину колонки и в тех же пропорциях, что на десктопе
	 * (286 на 435). Прежние 300 по высоте были посчитаны под книгу в 66%
	 * ширины экрана: в столбике той же высотой обложка выходила приземистой,
	 * и картинку резало по краям.
	 */
	.book__cover {
		height: auto;
		aspect-ratio: 286 / 435;
		margin-inline: 10px;
	}

	.books {
		--container-pad: 16px;
	}

	.section--books {
		padding-bottom: 48px;
	}

	.section--recommended {
		padding-bottom: 48px;
	}

	.btn--wide {
		min-height: 56px;
		padding: 0 24px;
		font-size: 16px;
	}
}