/*
 * Внутренние страницы: архив (фрейм 25:1579) и одиночная запись (фрейм 37:39).
 * Кегль H1 — 46px Spectral Medium. В макете было 58 (D2C-выгрузка Pixso,
 * класс text-serif4xlarge-14_49), но заголовки уменьшены вслед за
 * контейнером — 46 клиент назначил числом. Значение одно на все H1
 * страниц: разводящие, запись, книга, колонка.
 */

/* ---------- Шапка страницы (архивы) ---------- */

.page-head {
	padding-top: 19.43px;
	text-align: center;
}

.breadcrumbs {
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 15.79px;
	color: #8a8a8a;
}

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

/*
 * Первая крошка — всегда «Главная», её выделяем цветом, а не начертанием:
 * жирное написание в строке 13px читалось тяжелее самой строки. На светлых
 * страницах она чёрная, на тёмных — белая; правило для тёмных идёт следом,
 * по обёрткам этих страниц.
 */
.breadcrumbs > a:first-of-type {
	color: var(--c-black);
}

.project--video .breadcrumbs > a:first-of-type,
.shelf .breadcrumbs > a:first-of-type,
.book-page .breadcrumbs > a:first-of-type {
	color: var(--c-white);
}

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

/*
 * Просветы вокруг слеша заданы полями, а не пробелами в разметке: звенья
 * печатаются echo без переносов между тегами (см. шаблон крошек), и обычный
 * пробел там взяться неоткуда. Зато расстояние управляется одним числом.
 */
.breadcrumbs__sep {
	margin-inline: 5px;
	color: #b5b5b5;
}

/*
 * Первый слеш идёт в паре с «Главной» и красится так же: на светлых
 * страницах чёрным, на тёмных белым. Остальные разделители остаются серыми.
 *
 * :first-of-type здесь берёт именно первый разделитель: среди span-ов внутри
 * крошек он первый, а звенья-ссылки — это a.
 */
.breadcrumbs__sep:first-of-type {
	color: var(--c-black);
}

.project--video .breadcrumbs__sep:first-of-type,
.shelf .breadcrumbs__sep:first-of-type,
.book-page .breadcrumbs__sep:first-of-type {
	color: var(--c-white);
}

/*
 * Просвет от хлебных крошек до H1 — 48.67 вместо 73, в полтора раза меньше.
 * Правило общее: шапка у всех разводящих одна и та же (крошки, заголовок,
 * лид), и разводить их по этому числу значило бы получить разный отступ на
 * соседних страницах одного вида.
 */
.page-title {
	margin-top: 48.67px;
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: 46px;
	line-height: 1;
	/* Центрируем сам заголовок: он встречается и вне .page-head. */
	text-align: center;
	color: var(--c-text);
}

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

.page-lead {
	--container-w: 1172.35px;

	margin-top: 24px;
	font-family: var(--font-serif);
	font-size: 28px;
	line-height: 39px;
	text-align: center;
	color: var(--c-text);
}

/* ---------- Чипсы-фильтры ---------- */

.chips {
	--container-w: var(--container-chips);

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 57.77px;
}

.chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/*
	 * Вертикального падинга у чипса нет — его роль играет высота: строка
	 * плюс поля сверху и снизу плюс две обводки. Поля держим равными 18
	 * (было 21, клиент попросил снять по 3), поэтому при кегле 12 высота
	 * выходит 12 + 36 + 2 = 50. Радиус — половина высоты, иначе торцы
	 * перестают быть полукруглыми.
	 */
	height: 50px;
	/* 32 / 1.5 = 21.33. */
	padding: 0 21.33px;
	border: 1px solid #cfcfcf;
	border-radius: 25px;
	/* В макете чипс — только обводка; заливка появляется у активного. */
	background: transparent;
	font-family: var(--font-sans);
	font-size: 12px;
	line-height: 1;
	color: var(--c-text);
	white-space: nowrap;
	transition:
		background-color var(--hover-t),
		color var(--hover-t),
		border-color var(--hover-t);
}

@media (hover: hover) and (pointer: fine) {
	.chip:hover {
		border-color: var(--c-black);
	}
}

.chip.is-active {
	background: var(--c-black);
	border-color: var(--c-black);
	color: var(--c-white);
}

.chips--tags {
	--container-w: auto;

	width: auto;
	margin-top: 0;
}

/*
 * Сетка архива начинается через 56px после чипсов — было 72.5. Прежний
 * просвет отмерян под чипсы высотой 58; они стали 50 и мельче по кеглю, и
 * отступ под ними начал читаться провалом.
 */
.chips + .container .card-grid,
.chips + .container > .card-grid {
	margin-top: 56px;
}

/* ---------- Пагинация ---------- */

.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 82.95px;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 18px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 49.93px;
	height: 49.93px;
	border-radius: 50%;
	color: var(--c-text);
	transition:
		background-color var(--hover-t),
		color var(--hover-t),
		border-color var(--hover-t);
}

@media (hover: hover) and (pointer: fine) {
	.pagination .page-numbers:hover {
		color: var(--c-accent);
	}
}

.pagination .page-numbers.current {
	background: var(--c-accent);
	color: var(--c-white);
}

.pagination .page-numbers.dots {
	min-width: 0;
	color: #8a8a8a;
}

.pagination .prev,
.pagination .next {
	gap: 10px;
	min-width: 0;
	height: 47px;
	padding: 0 24px;
	border: 1px solid #cfcfcf;
	border-radius: 23.5px;
	background: var(--c-surface);
}

@media (hover: hover) and (pointer: fine) {
	.pagination .prev:hover,
	.pagination .next:hover {
		border-color: var(--c-black);
		color: var(--c-text);
	}
}

.pagination__arrow {
	width: 7px;
	height: 7px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.pagination__arrow--prev {
	transform: rotate(-135deg);
}

/* ---------- Белый лист одиночной записи ---------- */

.sheet {
	/* Лист статьи — по общему контейнеру; в макете он был 1574. */
	--container-w: var(--container-content);

	margin-top: 36px;
	padding: 44.54px 39.83px 60px;
	border-radius: 8px;
	background: var(--c-surface);
}

.entry-head,
.entry-hero,
.entry-content {
	--container-w: var(--container-text);
	--container-pad: 0px;
}

.entry-head {
	text-align: center;
}

.entry-rubric {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 15.79px;
	color: #8a8a8a;
	transition: color var(--hover-t);
}

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

/*
 * Рубрики может не быть (её не выбрали или она дефолтная) — тогда строка не
 * рендерится вовсе, и заголовок занимает её место: верхний отступ снимаем,
 * иначе на месте рубрики остаётся пустая полоса.
 */
.entry-head:not(:has(.entry-rubric)) .entry-title {
	margin-top: 0;
}

.entry-title {
	max-width: 742.86px;
	margin: 22.7px auto 0;
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: 46px;
	line-height: 1;
	color: var(--c-text);
}

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

.entry-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin-top: 26.77px;
	font-size: 14px;
	line-height: 24px;
	color: #6b6b6b;
}

.entry-meta .meta-item {
	font-size: 14px;
}

.entry-hero {
	margin-top: 20px;
}

/*
 * Пропорция кадра, а не жёсткая высота. При 1024 на 567 это те же макетные
 * размеры, но если колонка станет уже — например, на телефоне, — кадр
 * ужмётся целиком, а не превратится в другой по соотношению сторон: при
 * фиксированной высоте картинку начинало резать иначе.
 */
.entry-hero img {
	width: 100%;
	height: auto;
	aspect-ratio: 1024 / 567;
	object-fit: cover;
	border-radius: 4px;
}

/* ---------- Текст статьи ---------- */

/*
 * Тело статьи набрано гротеском, а не Spectral: клиент попросил убрать
 * засечки из читаемого текста. Spectral остаётся на заголовках — и на h1
 * страницы, и на подзаголовках внутри текста, — так что типографика статьи
 * строится на паре «заголовок с засечками, текст без».
 *
 * Правило на классе, поэтому касается всех текстов, где он выводится:
 * лонгриды, авторские колонки, страницы книг, SEO-текст под архивами.
 */
.entry-content {
	margin-top: 25px;
	font-family: var(--font-sans);
	font-size: 18px;
	/*
	 * 1.3 — значение назвал клиент. При кегле 18 это 23.4px; было 30 (1.67),
	 * потом 28 (1.56). Записано отношением, а не пикселями, чтобы вложенные
	 * элементы без своего интерлиньяжа (списки, цитата) считали его от
	 * собственного кегля, а не наследовали чужие пиксели.
	 * Кегль не трогаем: просили только интерлиньяж.
	 */
	line-height: 1.3;
	color: var(--c-text);
	/*
	 * Выключка влево, а не по формату. По формату браузер растягивает пробелы
	 * до края строки, и в русском тексте с длинными словами это даёт заметные
	 * дыры между словами — переносов-то он не расставляет.
	 */
	text-align: left;
}

.entry-content > * + * {
	margin-top: 24px;
}

.entry-content h2,
.entry-content h3 {
	font-family: var(--font-serif);
	font-weight: 600;
	text-align: left;
}

.entry-content h2 {
	margin-top: 40px;
	font-size: 28px;
	line-height: 36px;
}

.entry-content h3 {
	margin-top: 32px;
	font-size: 22px;
	line-height: 30px;
}

.entry-content img,
.entry-content figure img {
	width: 100%;
	border-radius: 4px;
}

.entry-content figure {
	margin: 32px 0;
}

.entry-content figcaption {
	margin-top: 10px;
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 20px;
	text-align: center;
	color: #8a8a8a;
}

.entry-content a {
	color: var(--c-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.entry-content blockquote {
	margin: 32px 0;
	padding-left: 24px;
	border-left: 3px solid var(--c-accent);
	font-style: italic;
}

.entry-content ul,
.entry-content ol {
	padding-left: 24px;
	list-style: disc;
	text-align: left;
}

.entry-content ol {
	list-style: decimal;
}

.entry-content li + li {
	margin-top: 8px;
}

/* Теги под статьёй */
.sheet .chips--tags {
	justify-content: center;
	margin-top: 70px;
}

/* ---------- Поделиться ---------- */

/*
 * Кружки и просветы между ними уменьшены ровно в 1,5 раза: 58 -> 38.67,
 * шаг 30 -> 20, иконка 26 -> 17.33. Смысл в общей ширине ряда: четыре
 * кружка с тремя просветами занимали 322 при карточке «Читайте также»
 * шириной 265 — ряд был шире карточки и читался отдельным блоком. После
 * деления получается 214.67, то есть заметно уже карточки.
 *
 * Правило одно на класс, поэтому ряд одинаков всюду, где блок выводится:
 * в лонгридах и в авторских колонках.
 */
.share {
	margin-top: 70px;
	text-align: center;
}

.share__title {
	font-family: var(--font-serif);
	font-size: 22px;
	line-height: 24.38px;
	color: var(--c-text);
}

.share__list {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 30px;
}

.share__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38.67px;
	height: 38.67px;
	padding: 0;
	border-radius: 50%;
	background: var(--c-accent);
	color: var(--c-white);
	transition: opacity var(--hover-t);
}

@media (hover: hover) and (pointer: fine) {
	.share__btn:hover {
		opacity: 0.8;
	}
}

.share__btn .icon {
	width: 17.33px;
	height: 17.33px;
}

/* Соцыиконки приходят красными; на красном кружке перекрашиваем в белый. */
.share__btn .icon path,
.share__btn .icon circle {
	fill: currentColor;
}

/* ---------- Читайте также ---------- */

/*
 * «Читайте также»: в макете набор заголовка начинается на 2988.38 при
 * высоте 38.77, то есть базовая линия — 3027.15, а сетка карточек — 3079.15.
 */
/*
 * «Читайте также» не перестраивается в узком блоке: ряд остаётся из трёх
 * карточек макетного размера, лишнее уезжает вправо. Заказчик просил именно
 * так — карточки не должны менять размер, пусть лучше залезают за край.
 * Прокрутка своя, полоса спрятана: тот же приём, что в «Рекомендуем
 * почитать», в подвале и в лентах.
 */
.related {
	margin-top: 112.77px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

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

/*
 * Три карточки в ряд, но по доле блока, а не по макетной ширине.
 *
 * Лист статьи — контейнер 900 с полями по 39.83, под содержимое остаётся
 * 820.34. Ряд из трёх макетных карточек требует 899.95 и в блок не влезал:
 * третью срезал край листа, а весь ряд стоял не по центру заголовка.
 * Расширять блок за поля листа неправильно — карточки упирались бы в самый
 * край. Поэтому ужимаем сами карточки: 1fr от блока даёт по 265.4, форму
 * они держат сами (у снимка задана пропорция, а не высота).
 *
 * minmax(0, 1fr), а не 1fr: чистый 1fr не сжимается уже min-content колонки,
 * и длинное слово в заголовке снова распёрло бы ряд.
 */
.related .card-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	min-width: 0;
}

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

/*
 * Модификатор оставлен только ради разметки: колонки считает базовая сетка.
 * Раньше он жёстко ставил три колонки, и в узком блоке — например, в блоке
 * «Читайте также» внутри статьи — три макетные карточки не помещались и
 * вылезали за край страницы. Сколько влезло, столько и встало.
 */
.card-grid--3 {
	grid-template-columns: repeat(auto-fill, var(--tg-card-w));
}

/* ---------- Комментарии ---------- */

.comments-area {
	margin-top: 100px;
}

.comments-area .comments-title,
.comments-area h2 {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 32px;
	line-height: 1.2;
	text-align: center;
	color: var(--c-text);
}

.comments-area .comment-list {
	margin-top: 40px;
	list-style: none;
	padding: 0;
}

.comments-area .comment-list ol,
.comments-area .comment-list ul {
	list-style: none;
	padding-left: 48px;
}

.comments-area .comment-body {
	padding: 20px 0;
	border-bottom: 1px solid var(--c-grey-200);
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 22px;
}

.comments-area .comment-author {
	font-weight: 600;
}

.comments-area .comment-metadata {
	font-size: 12px;
	color: #8a8a8a;
}

.comments-area .form-submit input,
.comments-area .submit {
	min-height: 71px;
	padding: 0 40px;
	border: 0;
	border-radius: 35.5px;
	background: var(--c-black);
	color: var(--c-white);
	font-family: var(--font-sans);
	font-size: 18px;
	cursor: pointer;
}

.empty-state {
	margin-top: 72.5px;
	font-family: var(--font-serif);
	font-size: 20px;
	text-align: center;
	color: #6b6b6b;
}

/* ---------- Низ страницы перед подвалом ---------- */

/*
 * `main > .container:last-child` — для архивов без пагинации и без
 * SEO-текста (например, страница жанра): иначе список упирается в подвал.
 */
main > .container:last-child:not(:has(> .pagination)),
.sheet {
	margin-bottom: 220px;
}

/*
 * Под пагинацией просвет на четверть меньше общего (220 - 25% = 165): сами
 * кнопки пагинации уже создают воздух вокруг себя, и полные 220 читались
 * провалом до подвала.
 */
.container:has(> .pagination) {
	margin-bottom: 165px;
}

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

@media (max-width: 429.98px) {
	.page-title,
	.entry-title {
		font-size: 42px;
	}

	.page-title {
		margin-top: 40px;
	}

	.chips {
		margin-top: 32px;
		gap: 12px;
	}

	.chip {
		height: 46px;
		padding: 0 22px;
	}

	.chips + .container .card-grid,
	.chips + .container > .card-grid {
		margin-top: 48px;
	}

	.sheet {
		padding: 40px 32px 48px;
		margin-bottom: 120px;
	}


	.share {
		margin-top: 72px;
	}

	.related {
		margin-top: 72px;
	}

	.pagination {
		margin-top: 56px;
	}
}

@media (max-width: 429.98px) {
	.page-head {
		padding-inline: 16px;
	}

	.page-title,
	.entry-title {
		font-size: 28px;
	}

	.page-title {
		margin-top: 24px;
	}

	.chips {
		--container-w: 100%;
		--container-pad: 0px;

		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 8px;
		margin-top: 24px;
		padding-inline: 16px;
		overflow-x: auto;
		scrollbar-width: none;
	}

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

	.chips--tags {
		flex-wrap: wrap;
		justify-content: center;
	}

	.chip {
		height: 40px;
		padding: 0 18px;
		font-size: 13px;
	}

	.chips + .container .card-grid,
	.chips + .container > .card-grid {
		margin-top: 24px;
	}

	.sheet {
		--container-pad: 8px;

		margin: 16px auto 48px;
		padding: 24px 16px 32px;
	}

	.entry-meta {
		flex-wrap: wrap;
		gap: 12px;
	}


	.entry-content {
		margin-top: 24px;
		font-size: 16px;
		line-height: 26px;
		text-align: left;
	}

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

	/* Карточка на телефоне одна в ряд и в поля листа влезает — вылет снимаем. */
	.sheet .related {
		margin-inline: 0;
	}

	.card-grid--3,
	.related .card-grid--3 {
		grid-template-columns: 1fr;
		min-width: 0;
		justify-content: stretch;
	}

	.share {
		margin-top: 48px;
	}

	.share__list {
		gap: 10.67px;
	}

	.share__btn {
		width: 32px;
		height: 32px;
	}

	.related {
		margin-top: 48px;
	}

	.comments-area {
		margin-top: 48px;
	}

	.pagination {
		flex-wrap: wrap;
		gap: 6px;
		margin-top: 40px;
	}

	.pagination .page-numbers {
		min-width: 40px;
		height: 40px;
		font-size: 14px;
	}

	.pagination .prev,
	.pagination .next {
		height: 40px;
		padding: 0 16px;
		font-size: 14px;
	}
}

/* ================= Спецпроекты ================= */

/* ---------- Разводящая (фрейм 26:2184) ---------- */

.projects-video {
	margin-top: 29.78px;
	/*
	 * 80 и 86 — прежние 120 и 128.98, уменьшенные на треть. Чёрные поля
	 * вокруг плиток читались слишком просторными на фоне остальной страницы.
	 */
	padding: 80px 0 86px;
	background: var(--c-black);
	/*
	 * Раньше ниже 1280 сетка переходила на доли (1fr) и плитки начинали
	 * тянуться вместе с окном. Теперь колонки всегда макетные, а в узкое окно
	 * блок уезжает вбок — как ленты карточек и подвал. Прокрутка своя,
	 * полоса скрыта.
	 */
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

.projects-video::-webkit-scrollbar {
	display: none;
}

/* 462.5 * 2 + 75 = 1000 — две колонки в узкий контейнер видеоблоков. */
.projects-video__grid {
	--container-w: var(--container-video-grid);

	min-width: var(--container-video-grid);
	display: grid;
	grid-template-columns: repeat(2, calc((var(--container-video-grid) - var(--video-gap)) / 2));
	justify-content: center;
	gap: var(--video-row-gap) var(--video-gap);
}

/*
 * Плитки фотохроники не перестраиваются в узком окне: ряд остаётся из трёх
 * макетных плиток, а лишнее уезжает вправо. Прокрутка своя, у секции, полоса
 * спрятана — тот же приём, что в «Рекомендуем почитать» и в подвале.
 */
/*
 * Поля сверху и снизу — те же 56, что стали шагом между блоками на главной.
 * Было 163.44 и 286: макетные числа, снятые под прежний крупный контейнер,
 * и на фоне уплотнённой главной этот блок выглядел разреженным.
 */
.projects-photo {
	padding-top: 56px;
	padding-bottom: 56px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

.projects-photo::-webkit-scrollbar {
	display: none;
}

/*
 * Кегль подобран по сетке под заголовком, а не назначен на глаз. Плитка
 * фотохроники — 371.33, ряд из трёх без промежутков, середина ряда на 792.
 * Клиент попросил: строка одна, по ширине не меньше средней плитки и не
 * больше половины боковых. Значит, допустимо от 371 до 743 (от центра левой
 * плитки до центра правой). Макетные 46 давали 953 — заголовок ломался на
 * две строки и выходил за оба края. При 32 строка занимает 663: среднюю
 * плитку перекрывает целиком, на боковые заходит по 146, то есть на 39%
 * каждой — с запасом внутри «меньше половины».
 *
 * 32 — ровно тот кегль, который клиент назначил всем H2, а этот заголовок
 * размечен именно H2 (стили ему достались от .page-title). Так что размер
 * заодно попадает в общее правило.
 */
.projects-photo__title {
	margin-top: 0;
	font-size: 32px;
}

/*
 * Шесть плиток фотохроники — той же ширины и тем же шагом, что полоса
 * спецпроектов на главной: широкий контейнер 1450 и плитка 483.33. Раньше
 * сетка шла во всю ширину окна долями и меняла пропорции вместе с ним.
 */
.projects-photo__grid {
	width: min(100% - var(--container-pad) * 2, var(--container-wide));
	min-width: var(--container-wide);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(3, var(--project-tile-w));
	justify-content: center;
	margin-top: 38.88px;
}

/* ---------- Плитка спецпроекта ---------- */

.tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	/* Подпись по центру плитки — как у плиток спецпроектов на главной. */
	justify-content: center;
	overflow: hidden;
	background-color: #1a1a1a;
	background-image: var(--tile-image, none);
	background-size: cover;
	background-position: center;
	color: var(--c-white);
}

/* Высота по прежней пропорции: 800 * 462.5 / 556.69. */
.tile--video {
	/* Пропорция вместо числа: плитка следует за шириной колонки. */
	aspect-ratio: 462.5 / 664.6;
	/*
	 * 24, а не 40: плитка сузилась с 371.3 до 309.31, и при прежних полях
	 * на подпись оставалось 243 при нужных 253 — самое длинное название
	 * («Беларусь прошлого») уезжало на вторую строку. При 24 остаётся 261.
	 */
	padding: 24px;
	border-radius: 4px;
}

/*
 * Квадрат. Высота берётся из той же переменной, что и ширина колонки сетки
 * (--project-tile-w, 371.33), поэтому 1:1 держится само: поедет контейнер —
 * плитка останется квадратной. Раньше высота считалась по пропорции плитки
 * на главной (578.53 * 0.76828 = 444.47) и плитка была вытянутой.
 */
.tile--photo {
	height: var(--project-tile-w);
	/*
	 * 28, а не 40 — ровно как у плитки на главной. Ширина у них одна и та же
	 * (371.33) и кегль подписи один и тот же (28), так что и поля логично
	 * держать общие: плитки читаются как одинаковые. Попутно это чинит
	 * перенос: при 40 на подпись оставалось 291, и «Хроники Евромайдана»
	 * (297) с «Европа: путь к свободе» (296) ломались на две строки. При 28
	 * остаётся 315 — обе встают в строку с запасом.
	 *
	 * «Афганистан. Завтра была война» (415) в строку не влезет ни при каких
	 * полях: не хватает самой ширины плитки. Эта подпись остаётся в две
	 * строки — как и была до правки.
	 */
	padding: 28px;
}

/*
 * У фотохроники значок стоит ближе к углу: поле плитки здесь меньше.
 * Размер кружка и иконки общий для страницы, он задан в .tile__badge.
 */
.tile--photo .tile__badge {
	top: 13.92px;
	right: 13.92px;
}

.tile__scrim {
	position: absolute;
	inset: auto 0 0;
	height: 55%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.78) 100%);
}

.tile__badge {
	position: absolute;
	top: 16.66px;
	right: 16.66px;
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * 48.2 — один размер значка на обе плитки страницы. Раньше он считался
	 * от размера плитки: у видео 57.7 (69.26 * 0.83313), у фотохроники, когда
	 * та стала квадратной и мельче, — 48.2. Рядом два кружка разного размера
	 * читались небрежностью, и клиент попросил свести их к меньшему.
	 */
	width: 48.2px;
	height: 48.2px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(2px);
}

.tile__badge .icon {
	width: 19.46px;
	height: 19.46px;
}

/*
 * Тот же кегль, что у плиток на главной: подписи на всех плитках спецпроектов
 * читаются одинаково и умещаются в строку. При 32 самое длинное название
 * занимало почти всю доступную ширину и от любого более длинного имени
 * поехало бы на две строки.
 */
.tile__label {
	position: relative;
	z-index: 1;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.15;
	text-align: center;
	/*
	 * Точечное подчёркивание — теми же значениями, что у пунктов меню в
	 * шапке и у плиток на главной. Префиксная запись первой ради Safari до
	 * 12.1: он не знает отдельных 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) {
	.tile:hover .tile__label {
		color: var(--c-accent);
	}
}

/* ---------- Страница спецпроекта: общее ---------- */

.page-head--tight {
	padding-top: 19.43px;
}

.project--video {
	background: var(--c-black);
	color: var(--c-text-invert);
}

.project--video .breadcrumbs {
	color: #7a7a7a;
}

/*
 * Разделители на тёмном — как на полке и на странице книги. Своего правила
 * тут не было, и слеши оставались базовыми #b5b5b5: на светлом фоне это
 * бледно-серый, а на чёрном читается почти белым. Первый слеш это не
 * затрагивает — он белый по правилу с :first-of-type, оно точнее.
 */
.project--video .breadcrumbs__sep {
	color: #4a4a4a;
}

/* Шрифт заголовка выбирается в админке из закрытого списка. */
[data-title-font='bitter'] .project-hero__title,
[data-title-font='bitter'] .project-card__title { font-family: 'Bitter', var(--font-serif); }
[data-title-font='pt-serif'] .project-hero__title,
[data-title-font='pt-serif'] .project-card__title { font-family: 'PT Serif', var(--font-serif); }
[data-title-font='cormorant'] .project-hero__title,
[data-title-font='cormorant'] .project-card__title { font-family: 'Cormorant', var(--font-serif); }
[data-title-font='oswald'] .project-hero__title,
[data-title-font='oswald'] .project-card__title { font-family: 'Oswald', var(--font-sans); }
[data-title-font='alegreya'] .project-hero__title,
[data-title-font='alegreya'] .project-card__title { font-family: 'Alegreya', var(--font-serif); }
[data-title-font='old-standard-tt'] .project-hero__title,
[data-title-font='old-standard-tt'] .project-card__title { font-family: 'Old Standard TT', var(--font-serif); }
[data-title-font='yeseva-one'] .project-hero__title,
[data-title-font='yeseva-one'] .project-card__title { font-family: 'Yeseva One', var(--font-serif); font-weight: 400; }
[data-title-font='forum'] .project-hero__title,
[data-title-font='forum'] .project-card__title { font-family: 'Forum', var(--font-serif); font-weight: 400; }
[data-title-font='montserrat'] .project-hero__title,
[data-title-font='montserrat'] .project-card__title { font-family: 'Montserrat', var(--font-sans); }
[data-title-font='russo-one'] .project-hero__title,
[data-title-font='russo-one'] .project-card__title { font-family: 'Russo One', var(--font-sans); font-weight: 400; }
[data-title-font='stalinist-one'] .project-hero__title,
[data-title-font='stalinist-one'] .project-card__title { font-family: 'Stalinist One', var(--font-sans); font-weight: 400; }
[data-title-font='ruslan-display'] .project-hero__title,
[data-title-font='ruslan-display'] .project-card__title { font-family: 'Ruslan Display', var(--font-serif); font-weight: 400; }
[data-title-font='caveat'] .project-hero__title,
[data-title-font='caveat'] .project-card__title { font-family: 'Caveat', cursive; }
[data-title-font='roboto-mono'] .project-hero__title,
[data-title-font='roboto-mono'] .project-card__title { font-family: 'Roboto Mono', monospace; }

/* ---------- Видео-спецпроект (фрейм 44:931) ---------- */

.project-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * Высота та же, что у слайдера на главной, и тем же токеном. Ужимать
	 * содержимое отдельно не нужно: заголовок с лидом стоят по центру
	 * флексом, а не на жёстких координатах, и при меньшей высоте просто
	 * центрируются плотнее.
	 */
	height: var(--hero-h);
	/* Тот же предел ширины, что у шапки, слайдера и подвала. */
	max-width: var(--page-max);
	margin-top: 44.63px;
	margin-inline: auto;
	/* Блок с заголовком в макете стоит на 54px выше центра. */
	padding-bottom: 108px;
	background-color: #101010;
	background-image: var(--hero-image, none);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.project-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.6) 100%);
}

.project-hero__inner {
	--container-w: 954.58px;

	position: relative;
	z-index: 1;
	text-align: center;
}

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

/*
 * Кегль 92px выведен из ширины текстового блока (954.58px): при нём перенос
 * приходится после «Португалия», как в макете, с запасом на курсив акцентного
 * слова. Межстрочное 69.37 — половина высоты блока 138.73.
 */
.project-hero__title {
	margin-top: 30px;
	font-family: var(--font-serif);
	font-weight: 400;
	/*
	 * 52 вместо 92. Интерлиньяж пересчитан тем же отношением 0.754 —
	 * плотная выключка тут намеренная, это крупный титул, и при обычном
	 * интерлиньяже две строки разъехались бы.
	 */
	font-size: 52px;
	line-height: 39.2px;
	color: var(--c-white);
}

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

.project-lead {
	/*
	 * По ширине сетки эпизодов, а не общего контейнера: лид шёл на 900, а ряд
	 * карточек под ним — на 858, и текст на 21 пиксель выступал с каждой
	 * стороны. Берём тот же токен, что и у сетки, — разъехаться они теперь
	 * не смогут.
	 */
	--container-w: var(--container-episodes);

	/* По макету: 50 сверху и 109 до сетки эпизодов — было 60 и 172. */
	margin-top: 50px;
	font-family: var(--font-serif);
	font-size: 18px;
	/* 1.3 — то же отношение, что у текста статьи и краткого содержания. */
	line-height: 1.3;
	text-align: left;
	color: var(--c-grey-200);
}

/* Прокрутка у обёртки, а не у сетки: сама сетка держит макетную ширину. */
.episodes-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

.episodes-scroll::-webkit-scrollbar {
	display: none;
}

.episodes {
	--container-w: var(--container-episodes);

	/* Как и сетка на разводящей: колонки макетные, лишнее уходит за экран. */
	min-width: var(--container-episodes);
	display: grid;
	/* 459.82 * 2 + 80.36 = 1000 — две колонки в узкий контейнер видеоблоков. */
	grid-template-columns: repeat(2, calc((var(--container-episodes) - var(--episodes-gap)) / 2));
	justify-content: center;
	gap: var(--episodes-row-gap) var(--episodes-gap);
	margin-top: 90px;
}

.episode {
	position: relative;
	text-align: center;
}

/*
 * Превью эпизода. Высота по прежней пропорции: 344 * 459.82 / 569.82.
 *
 * Сюда же встанет плеер: администратор задаёт ссылку на ролик, и на месте
 * превью появляется видео. Пропорция подобрана под кадр 16:9 с запасом,
 * поэтому менять её при переходе на плеер не придётся.
 */
.episode__thumb {
	position: relative;
	/* Пропорция вместо числа: превью следует за шириной колонки. */
	aspect-ratio: 459.82 / 277.6;
	overflow: hidden;
	/* Скругление по макету: 12, а не 4 — угол читается заметно мягче. */
	border-radius: 12px;
}

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

.episode__thumb-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, #2a2a2a, #2a2a2a 10px, #222 10px, #222 20px);
}

/*
 * Плашка длительности по макету: небольшой прямоугольник со скруглением 4,
 * а не пилюля во всю ширину. Ширина по содержимому, поэтому «1:12:27» и
 * «7:40» дают разные плашки — в макете так же. Слева нотный знак.
 */
.episode__duration {
	position: absolute;
	right: 16px;
	bottom: 16px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 23px;
	padding-inline: 8px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.65);
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 1;
	color: var(--c-white);
}

.episode__duration-icon {
	width: auto;
	height: 11px;
	flex: none;
}

/*
 * Подпись «Эпизод N» по макету: светло-серая и крупнее. Красной она была по
 * ошибке — акцентный цвет в макете тут не используется, номер эпизода стоит
 * тем же спокойным тоном, что и остальной служебный текст на тёмном фоне.
 */
.episode__label {
	/* 15: подпись «Эпизод N» придвинута к кадру на десять пикселей. */
	margin-top: 15px;
	font-family: var(--font-serif);
	font-size: 18px;
	line-height: 24px;
	color: var(--c-grey-200);
}

/*
 * 5 вместо 14: название фильма подтянуто к подписи «Эпизод N». Видимый
 * просвет получается около девяти пикселей — строки добавляют к полю свои
 * полуинтерлиньяжи (3 у подписи и 0.8 у названия), поэтому в правиле стоит
 * заметно меньшее число, чем видно на экране.
 */
.episode__title {
	margin-top: 5px;
	font-family: var(--font-serif);
	font-weight: 400;
	/* 24 вместо 22; интерлиньяж тем же отношением 1.0655. */
	font-size: 24px;
	line-height: 25.57px;
	color: var(--c-white);
}

/*
 * «Другие спецпроекты» на страницах проекта — квадратные плитки, как на
 * разводящей. Высота берётся из той же переменной, что и ширина колонки,
 * поэтому 1:1 держится само при любой смене контейнера.
 *
 * Правило привязано к .project: на главной секция «Наши Спецпроекты» той же
 * разметки, и её плитки клиент пока не просил менять — там остаются
 * прежние 371.3 x 444.5.
 */
.project .section--projects .project-tile {
	height: var(--project-tile-w);
}

/*
 * Кегль заголовка секций уменьшен до макетных 58, и общий отступ .section
 * поднят на 12.13 — но во фрейме спецпроекта заголовок «Другие спецпроекты»
 * стоит на своём месте, поэтому здесь эти 12.13 возвращаются.
 */
.project--video .section--projects {
	/* Просвет от эпизодов до «Других спецпроектов» уменьшен в полтора раза. */
	padding-top: 161.24px;
	padding-bottom: 139.5px;
}

/* ---------- Текстовый спецпроект (фрейм 45:156) ---------- */

/*
 * `.sheet` несёт общий отступ 220 перед подвалом — он верен для статьи, где
 * лист последний блок, но на текстовом спецпроекте за листом идёт список
 * материалов, и в макете между ними ровно 10.
 */
.project-sheet {
	--container-w: var(--container-project);

	margin-top: 48.85px;
	margin-bottom: 0;
	padding: 22.9px;
}

/*
 * Пропорции из макета (45:156): картинка 1024 × 564.82. Держим их
 * отношением, а не высотой: лист с тех пор сузился до 900, на кадр внутри
 * него остаётся 854, и жёсткие 564.82 давали 1.51 вместо макетных 1.81 —
 * картинка выглядела почти квадратной. Теперь высота считается сама и кадр
 * остаётся вытянутым при любой ширине листа.
 *
 * Заголовок — по центру и чуть выше него: align-items: center поднимает
 * блок в середину, а лишние 72 в нижнем поле смещают его вверх на 36, то
 * есть на те же 7.7% высоты, на какие он поднят в шапке видеопроекта.
 */
.project-card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(100%, 1024px);
	margin-inline: auto;
	aspect-ratio: 1024 / 564.82;
	padding: 48px 48px 120px;
	border-radius: 4px;
	background-color: #1a1a1a;
	background-image: var(--hero-image, none);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.project-card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.7) 100%);
}

.project-card__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	text-align: center;
}

.project-card__title {
	margin-top: 20px;
	font-family: var(--font-serif);
	font-weight: 400;
	/* 52 — тот же кегль, что у титула видеопроекта. */
	font-size: 52px;
	line-height: 1.05;
	color: var(--c-white);
}

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

.project-sheet__lead {
	margin-top: 28px;
	font-family: var(--font-serif);
	font-size: 16px;
	line-height: 26px;
	text-align: left;
	color: var(--c-text);
}

/*
 * Строки материалов не сжимаются в узком окне: они держат макетную ширину и
 * уезжают за правый край. Заказчик просил именно так — карточка не должна
 * менять размер, пусть лучше прячется за экран.
 *
 * Прокрутка вынесена в обёртку: один и тот же блок не может быть сразу и
 * коробкой прокрутки, и тем, что из неё вылезает.
 */
.rows-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

.rows-scroll::-webkit-scrollbar {
	display: none;
}

.rows {
	--container-w: var(--container-rows);

	min-width: var(--container-rows);
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.row-article {
	position: relative;
	display: grid;
	grid-template-columns: 369.88px 1fr;
	gap: 20.74px;
	min-height: 275.84px;
	/* 22.385, а не 22.9: с картинкой 231.07 внутри строка иначе выходит 276.87. */
	padding: 22.385px;
	border-radius: 8px;
	background: var(--c-surface);
}

.row-article__media {
	height: 231.07px;
	overflow: hidden;
	border-radius: 4px;
}

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

.row-article__media-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, #d5d5d5, #d5d5d5 10px, #cbcbcb 10px, #cbcbcb 20px);
}

.row-article__meta {
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 13px;
	line-height: 24px;
	color: #6b6b6b;
}

.row-article__meta .meta-item {
	font-size: 13px;
}

.row-article__title {
	margin-top: 21.91px;
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 28px;
	line-height: 28px;
	color: var(--c-text);
}

.row-article__excerpt {
	margin-top: 16px;
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 20px;
	color: #4a4a4a;
}

.project--text .section--projects {
	padding-top: 127.49px;
	padding-bottom: 282.5px;
}

/*
 * Заголовок секции жёстко красится в `--c-text`, поэтому на тёмной ветке
 * спецпроекта «Спецпроекты» сливалось с фоном. На светлой (серой) ветке
 * цвет остаётся чёрным.
 */
.project--video .section-title {
	color: var(--c-text-invert);
}

/* ---------- Адаптив спецпроектов ---------- */

/*
 * Сетки страниц спецпроектов держат свой прежний порог 1280, а не общий 1100.
 * Раскладка этих страниц не переделывалась, и опускать им порог значило бы
 * менять их вид без спроса: между 1100 и 1280 две колонки схлопывались в одну.
 */
@media (max-width: 429.98px) {
	.projects-video__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.episodes {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 429.98px) {
	.projects-video {
		padding: 72px 24px;
	}

	.projects-video__grid {
		gap: 32px;
	}

	.tile--video {
		height: 560px;
		padding: 28px;
	}

	.tile--photo {
		height: 420px;
		padding: 28px;
	}

	.tile__label {
		font-size: 26px;
	}

	.tile__badge {
		width: 52px;
		height: 52px;
	}

	.projects-photo {
		padding-top: 72px;
	}

	.project-hero {
		height: 620px;
	}

	.project-hero__title {
		font-size: 56px;
		line-height: 58px;
	}

	.episodes {
		gap: 48px 32px;
		--container-pad: 24px;
	}

	.episode__thumb {
		height: 260px;
	}

	.project-card {
		height: 420px;
		padding: 32px;
	}

	.project-card__title {
		font-size: 40px;
	}

	.row-article {
		grid-template-columns: 280px 1fr;
		min-height: 0;
	}

	.row-article__media {
		height: 180px;
	}
}

@media (max-width: 429.98px) {
	.projects-video {
		margin-top: 16px;
		padding: 40px 16px;
	}

	/* На телефоне плитки снова столбиком, без бокового выезда. */
	.projects-photo {
		overflow-x: visible;
	}

	.projects-video__grid,
	.projects-photo__grid {
		grid-template-columns: 1fr;
		min-width: 0;
		gap: 16px;
	}

	.projects-photo__grid {
		gap: 0;
		margin-top: 24px;
	}

	.tile--video,
	.tile--photo {
		height: 320px;
		padding: 20px;
	}

	.tile__label {
		font-size: 22px;
	}

	.tile__badge {
		top: 12px;
		right: 12px;
		width: 40px;
		height: 40px;
	}

	.tile__badge .icon {
		width: 18px;
		height: 18px;
	}

	.projects-photo {
		padding-top: 40px;
	}

	.project-hero {
		height: 420px;
		margin-top: 16px;
	}

	.project-hero__title {
		font-size: 28px;
		line-height: 32px;
	}

	.project-lead {
		margin-top: 28px;
		font-size: 16px;
		line-height: 26px;
		text-align: left;
	}

	.episodes {
		grid-template-columns: 1fr;
		gap: 32px;
		width: calc(100% - 32px);
		margin-top: 40px;
	}

	.episode__thumb {
		height: 200px;
	}

	.project-sheet {
		--container-pad: 8px;

		margin-top: 16px;
		padding: 12px;
	}

	.project-card {
		height: 280px;
		padding: 20px;
	}

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

	/* На телефоне строки снова по ширине экрана, без бокового выезда. */
	.rows-scroll {
		overflow-x: visible;
	}

	.rows {
		--container-pad: 16px;

		min-width: 0;
	}

	.row-article {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 16px;
	}

	.row-article__media {
		height: 180px;
	}

	.project--video .section--projects,
	.project--text .section--projects {
		padding-top: 48px;
	}
}

/* ================= Авторские колонки (фрейм 41:2361) ================= */

/*
 * Список колонок идёт по общему контейнеру, а не по текстовой колонке.
 * Раньше он был привязан к --container-text: пока та была 1024, разница с
 * контейнером не бросалась в глаза, но после того как текстовую колонку
 * увели на 750 (ЖЖ-шная мера строки), карточки стали заметно уже заголовка
 * страницы и всего остального на сайте. Здесь не текст, а карточки — им
 * место в общем контейнере.
 */
.columns-list {
	--container-w: var(--container-content);

	min-width: var(--container-content);
	display: flex;
	flex-direction: column;
	gap: 18.29px;
	padding-top: 43.07px;
	padding-bottom: 116.18px;
}

.row-column {
	position: relative;
	display: grid;
	grid-template-columns: 231.07px 1fr;
	gap: 22.56px;
	min-height: 334.71px;
	padding: 19.8px 22.91px 14.28px;
	border-radius: 8px;
	background: var(--c-surface);
}

.row-column__photo {
	width: 231.07px;
	height: 231.07px;
	overflow: hidden;
	border-radius: 4px;
}

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

.row-column__photo-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, #d5d5d5, #d5d5d5 10px, #cbcbcb 10px, #cbcbcb 20px);
}

.row-column__name {
	margin-top: 15.14px;
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 24px;
	line-height: 28px;
	text-align: center;
	color: var(--c-text);
}

.row-column__role {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	margin-top: 2.42px;
	font-family: var(--font-sans);
	/*
	 * 400, а не 500: должность — служебная подпись под именем и не должна
	 * набираться плотнее остального мелкого текста. Тоньше 400 не сделать —
	 * Inter подключён в четырёх начертаниях (400/500/600/700), 300 в теме нет,
	 * и при font-weight: 300 браузер всё равно отрисовал бы 400.
	 */
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	text-align: center;
	color: #8a8a8a;
}

/*
 * Плашка колонки набрана так же, как плашка статьи (.row-article): мета 13,
 * лид — Inter 14/20. Раньше здесь было 16 и Spectral, потому что блок делался
 * с отдельного фрейма макета, где лид нарисован с засечками; рядом на странице
 * спецпроекта такие же по смыслу плашки шли гротеском, и два набора спорили.
 */
.row-column__meta {
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 13px;
	line-height: 24px;
	color: #6b6b6b;
}

.row-column__meta .meta-item {
	font-size: 13px;
}

/*
 * Заголовку отведены ровно две строки: под ним стоит описание, которое должно
 * дотягиваться до нижнего края фото автора, а при плавающей высоте заголовка
 * низ описания гулял бы от строки к строке. Одна строка — снизу остаётся
 * пустая; три и больше — обрезаются многоточием.
 */
.row-column__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	height: 56px;
	margin-top: 21.91px;
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 28px;
	line-height: 28px;
	color: var(--c-text);
}

/*
 * Шесть строк по 20 — это ровно тот остаток высоты, который есть от низа
 * заголовка (121.69 от верха плашки) до низа фото автора (250.86): 9.17
 * отступа плюс 120 текста. Поэтому описание заканчивается вровень с
 * фотографией, а лишнее браузер срезает многоточием.
 *
 * Длину исходной строки в шаблоне подняли до 420 символов — на 200 текста
 * не хватало и на половину этой высоты.
 */
.row-column__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	overflow: hidden;
	margin-top: 9.17px;
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 20px;
	color: #4a4a4a;
}

.columns-list .pagination {
	margin-top: 60px;
}

/* ================= Книжная полка (фрейм 41:1749) ================= */

.shelf {
	background: var(--c-black);
	color: var(--c-text-invert);
	/* Половина прежних 40: тот же счёт, что и у просвета над пагинацией. */
	padding-bottom: 20px;
	/*
	 * Ряд книг макетной ширины: в узкое окно он не ужимается, а уезжает за
	 * правый край — как ленты и остальные сетки. Прокрутка своя, полоса
	 * скрыта, горизонтальной прокрутки у страницы не появляется.
	 */
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

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

/*
 * Просвет перед подвалом на этой странице тоже вдвое меньше общего.
 * Общий (155.89) задан токеном на весь сайт и здесь только переопределяется:
 * под пагинацией полки нет SEO-блока, и полный просвет складывался с
 * отступом секции в две сотни пикселей пустоты.
 */
.page-template-page-books .site-footer {
	--footer-pad-top: 77.95px;
}

.shelf .breadcrumbs {
	color: #7a7a7a;
}

.shelf .breadcrumbs__sep {
	color: #4a4a4a;
}

.shelf .page-title,
.shelf .page-lead {
	color: var(--c-white);
}

/*
 * Заголовок полки — тот же кегль 58px, что и на прочих разводящих; блок
 * 497.6 × 94.69 в макете шире и выше просто потому, что это текстовый слой
 * с авто-интерлиньяжем (88.276), а не плотная рамка глифов.
 */
/* Тем же множителем: 82.28 / 1.5. У полки просвет чуть больше остальных. */
.page-title--shelf {
	margin-top: 54.85px;
}

/* Кегль тот же, что у лида спецпроекта на тёмном: 18/30. */
.shelf .page-lead {
	/*
	 * По ширине контейнера, а не 1172.35: вводный текст стоял шире, чем ряд
	 * книг под ним, и выбивался из общей колонки страницы.
	 */
	--container-w: var(--container-shelf);

	/* 44.43 — прежние 59.24 минус четверть: просвет от H1 до вводного текста. */
	margin-top: 44.43px;
	font-family: var(--font-serif);
	font-size: 18px;
	line-height: 30px;
}

.shelf__grid {
	--container-w: var(--container-shelf);

	display: grid;
	/*
	 * Ровно три в ряд, как в макете. Было auto-fill по 371.37 — при
	 * контейнере 1050 в ряд помещалось только две, и полка выглядела
	 * разреженной. Ширина карточки считается от контейнера, поэтому ряд
	 * заполняется ровно и правится одним числом в токенах.
	 */
	grid-template-columns: repeat(3, var(--book-card-w));
	justify-content: center;
	gap: 79.19px var(--shelf-gap);
	/* 40.77 — прежние 54.36 минус четверть: просвет от вводного текста до книг. */
	margin-top: 40.77px;
	/* Ряд держит ширину контейнера и прячется за край, а не ужимается. */
	min-width: var(--container-shelf);
}

.book-card {
	text-align: center;
}

.book-card__cover {
	display: block;
	/*
	 * Пропорция, а не число: карточка стала уже, и жёсткая высота вытянула бы
	 * обложку. 371.37 к 564.84 — форма обложки из макета.
	 */
	aspect-ratio: 371.37 / 564.84;
	overflow: hidden;
}

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

.book-card__cover-placeholder,
.book-single__cover-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, #2a2a2a, #2a2a2a 10px, #222 10px, #222 20px);
}

.book-card__author {
	/* 14 — тот же просвет, что на полке главной. */
	margin-top: 14px;
	font-family: var(--font-sans);
	font-size: 12px;
	line-height: 12px;
	color: var(--c-grey-400);
}

/*
 * 5 вместо 21. Началось с 8 — это были те же 7.5 просвета, что на полке
 * главной, только посчитанные иначе: там у строк интерлиньяж больше кегля и
 * около шести пикселей воздуха дают сами строки, а здесь интерлиньяж равен
 * кеглю и всю величину задаёт поле. Потом клиент попросил уплотнить блок
 * подписей на полке целиком, и просвет ушёл до 5.
 */
.book-card__title {
	margin-top: 5px;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 18px;
	line-height: 18px;
	color: var(--c-white);
}

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

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

.rating {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-top: 15px;
	font-size: 18px;
	line-height: 23.88px;
	color: #4a4a4a;
}

.rating__star.is-on {
	color: var(--c-accent);
}

/*
 * На полке звёзды мельче и стоят плотнее, чем на странице книги: там оценка —
 * заметный элемент под крупной обложкой, а в карточке она третья строка
 * подписи и не должна спорить с названием.
 */
.book-card .rating {
	gap: 3px;
	margin-top: 9px;
	font-size: 15px;
	line-height: 19.9px;
}

/*
 * Просветы вокруг пагинации уменьшены вдвое по замечанию клиента: макетные
 * 192.87 сверху читались как провал между полкой и номерами страниц.
 */
.shelf .pagination {
	margin-top: 96.44px;
}

.shelf .pagination .page-numbers {
	color: var(--c-white);
}

.shelf .pagination .prev,
.shelf .pagination .next {
	background: transparent;
	border-color: #3a3a3a;
	color: var(--c-white);
}

.shelf .pagination .prev,
.shelf .pagination .next {
	transition: border-color var(--hover-t), color var(--hover-t);
}

@media (hover: hover) and (pointer: fine) {
	.shelf .pagination .prev:hover,
	.shelf .pagination .next:hover {
		border-color: var(--c-white);
	}
}

/* ================= Карточка книги (фрейм 44:442) ================= */

/*
 * Фрейм «Литература_иннер» залит чёрным — страница книги тёмная, как и
 * сама полка. Красим обёртку целиком, а внутри переопределяем то, что
 * прибито к светлой теме жёстко.
 */
.book-page {
	background: var(--c-black);
	color: var(--c-text-invert);
}

.book-page .breadcrumbs {
	color: #7a7a7a;
}

.book-page .breadcrumbs__sep {
	color: #4a4a4a;
}

.book-page .book-single__title,
.book-page .book-single__summary-title,
.book-page .book-single__summary-text,
.book-page .book-single__review,
.book-page .section-title {
	color: var(--c-text-invert);
}

.book-page .book-single__review {
	color: #d5d5d5;
}

.book-page .chip {
	border-color: #3a3a3a;
	color: var(--c-text-invert);
}

@media (hover: hover) and (pointer: fine) {
	.book-page .chip:hover {
		border-color: var(--c-white);
	}
}

.book-page .chip.is-active {
	background: var(--c-white);
	border-color: var(--c-white);
	color: var(--c-black);
}



.book-single {
	--container-w: var(--container-book);

	/* 50.21 — прежние 75.32, уменьшенные в полтора раза: просвет от крошек
	   до имени автора. Общий для книги и авторской колонки. */
	padding-top: 50.21px;
	padding-bottom: 0;
}

/*
 * «Читайте также» на странице книги: заголовок и сетка тех же книжных
 * карточек, что на полке. В макете капитель заголовка на 2089.47, ряд
 * карточек — на 2192, подвал — на 2969.18.
 */
/*
 * «Читайте также» на странице книги — по колонке текста (764).
 *
 * Ряд из трёх карточек занимал 1194 и уезжал вправо: третья книга целиком
 * оказывалась за краем, вторая наполовину, и ряд стоял не по центру
 * заголовка. Когда-то это было осознанным «пусть прячется за край», но
 * контейнер с тех пор ужимался несколько раз, и от блока осталось видно
 * меньше двух карточек из трёх. Теперь карточки ужимаются под блок сами.
 */
.related--books {
	--container-w: var(--container-book);

	width: min(100% - var(--container-pad) * 2, var(--container-book));
	margin-inline: auto;
	padding-top: 52.77px;
	padding-bottom: 92.41px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

.related--books::-webkit-scrollbar {
	display: none;
}

/*
 * Три карточки в ряд по доле блока: 371.37 было числом из старой раскладки
 * под контейнер 1450 и с тех пор никуда не помещалось. Доля от 764 с двумя
 * просветами по 40 даёт по 228, форму обложка держит сама — у неё задана
 * пропорция, а не высота.
 */
.related--books .shelf__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	justify-content: center;
	min-width: 0;
	margin-inline: 0;
}

.related--books .section-title {
	margin-bottom: 46.53px;
}

.related--books .shelf__grid {
	margin-top: 0;
}

.book-single__head {
	text-align: center;
}

.book-single__author {
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 15.79px;
	color: #8a8a8a;
}

.book-single__title {
	margin-top: 23.9px;
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: 46px;
	line-height: 1;
	color: var(--c-text);
}

/*
 * Авторская колонка по скелету книги. Тёмная тема на странице книги живёт в
 * обёртке `.book-page` — здесь её нет, поэтому цвета берутся обычные,
 * тёмный текст на светлом. Своего тут ровно три мелочи.
 */
.column-single .entry-meta {
	margin-top: 25px;
}

.column-single__role {
	display: block;
	margin-top: 4px;
}

/* Текст колонки — как в статье, а не как рецензия на тёмном. */
.column-single .book-single__review {
	color: var(--c-text);
}

/* Год издания — тем же начертанием и кеглем, что заголовок. */
.book-single__year {
	margin-top: 8px;
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: 46px;
	line-height: 1;
	color: var(--c-text);
}

.book-page .book-single__year {
	color: var(--c-text-invert);
}

.book-single .rating {
	margin-top: 25px;
	color: #c4c4c4;
}

/*
 * В макете обложка 402.49 × 611.38 и стоит на 556.56 — то есть колонка книги
 * уже, чем текстовая: 806.88 против прежних 957.5.
 */
/*
 * Блок обложки уже основного текста: 700 против 806.88 колонки. Пропорции
 * макета сохранены — всё внутри умножено на 700 / 806.88 = 0.8676, поэтому
 * обложка осталась той же формы, только меньше.
 *
 * Та же геометрия работает и на странице авторской колонки: у неё общий с
 * книгой скелет.
 */
.book-single__body {
	/*
	 * Ширина постоянная: обложка и краткое содержание не ужимаются вместе с
	 * окном. В узкое окно блок уезжает вбок (прокрутка у обёртки ниже) —
	 * как ленты карточек и подвал.
	 *
	 * minmax(0, 1fr) обязателен: у колонки грида минимальная ширина по
	 * умолчанию равна ширине самого длинного слова, и без него текстовая
	 * колонка распирала блок наружу, давая горизонтальную прокрутку всей
	 * странице.
	 */
	/*
	 * 650, а не 700. Колонка обложки фиксированная (349.2), поэтому вся
	 * разница уходит в краткое описание: 331.4 -> 281.4, то есть на 15%
	 * уже. Кегль не трогаем — просили именно сузить колонку, — так что
	 * текст просто набирается в большее число строк.
	 */
	/*
	 * Ещё минус 4% ко всему блоку: 650 -> 624, колонка обложки 349.2 ->
	 * 335.2, просвет 19.43 -> 18.65. Уменьшаем все три числа, а не одну
	 * ширину, — иначе вся разница ушла бы в описание и «пропорционально» не
	 * получилось бы.
	 */
	width: 624px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 335.2px minmax(0, 1fr);
	gap: 18.65px;
	/* 74.32 — прежние 111.48 в полтора раза меньше: просвет от даты до блока. */
	margin-top: 74.32px;
}

/*
 * Прокрутка у обёртки: сам блок держит макетную ширину, а прячется за краем
 * экрана. Обёртка — родитель блока в разметке книги и колонки.
 */
.book-single__body-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

.book-single__body-scroll::-webkit-scrollbar {
	display: none;
}

/*
 * Кадр обложки — пропорция, а не число. Раньше здесь стояла жёсткая высота,
 * снятая с макета: после сужения блока она пересчиталась пропорционально, но
 * кадр всё равно читался вытянутым — он был заметно выше соседнего текста.
 * Теперь это 3:4 от ширины колонки: форма книжной обложки сохраняется, а
 * высота считается сама и держится вровень с кратким описанием.
 */
.book-single__cover {
	height: auto;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}

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

.book-single__summary-title {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 20px;
	line-height: 17.53px;
	color: var(--c-text);
}

.book-single__summary-text {
	margin-top: 24px;
	font-family: var(--font-serif);
	font-size: 16px;
	/*
	 * 1.3 — то же отношение, что у текста статьи. Отношением, а не
	 * пикселями: было 26 при кегле 16, то есть 1.625, и на фоне статьи
	 * краткое содержание выглядело разреженным.
	 */
	line-height: 1.3;
	color: var(--c-text);
}

.book-single__summary-text p + p {
	margin-top: 20px;
}

.book-single__review {
	margin-top: 60px;
	width: 100%;
}

.book-single .chips--tags {
	margin-top: 48px;
}

/* ================= Адаптив ================= */

@media (max-width: 429.98px) {
	.columns-list {
		padding-top: 40px;
	}

	.row-column {
		grid-template-columns: 180px 1fr;
		min-height: 0;
	}

	.row-column__photo {
		width: 180px;
		height: 180px;
	}

	.page-title--shelf {
		margin-top: 40px;
		font-size: 44px;
	}

	.shelf__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 48px 24px;
		--container-pad: 24px;
	}

	.book-card__cover {
		height: 420px;
	}

	.shelf .pagination {
		margin-top: 80px;
	}

	.book-single {
		padding-top: 56px;
		padding-bottom: 120px;
	}

	.book-single__title {
		font-size: 42px;
	}

	.book-single__body {
		gap: 24px;
		margin-top: 48px;
	}


}

@media (max-width: 429.98px) {
	/* На телефоне список снова по ширине экрана, без бокового выезда. */
	.rows-scroll {
		overflow-x: visible;
	}

	.columns-list {
		--container-pad: 16px;

		min-width: 0;
		padding-top: 24px;
		gap: 12px;
	}

	.row-column {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 16px;
	}

	.row-column__photo {
		width: 100%;
		height: 220px;
	}

	.page-title--shelf {
		margin-top: 24px;
		font-size: 28px;
	}

	.shelf {
		padding-bottom: 48px;
	}

	.shelf .page-lead {
		margin-top: 16px;
		font-size: 16px;
		line-height: 26px;
		padding-inline: 16px;
	}

	.shelf__grid {
		/* На телефоне ряд снова по ширине экрана, без бокового выезда. */
		min-width: 0;
		/*
		 * minmax(0, 1fr), а не 1fr: чистый 1fr — это minmax(auto, 1fr), и
		 * колонка не сжимается уже собственного min-content. У карточки книги
		 * он около 171 из-за пропорций обложки, два таких столбца с просветом
		 * дают 358 при доступных 323 — ряд вылезал за экран на 17 с каждой
		 * стороны. Нулевой минимум снимает этот порог.
		 */
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 16px;
		--container-pad: 16px;
		margin-top: 32px;
	}

	/*
	 * То же и для «Читайте также» на странице книги: правило выше слабее по
	 * весу, чем .related--books .shelf__grid, и без этой строки ряд остаётся
	 * трёхколоночным и уезжает за экран.
	 */
	.related--books .shelf__grid {
		min-width: 0;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.book-card__cover {
		height: 260px;
	}

	.book-card__author {
		margin-top: 16px;
	}

	.book-card__title {
		margin-top: 10px;
		font-size: 16px;
	}

	.shelf .pagination {
		margin-top: 40px;
	}

	.book-single {
		--container-pad: 16px;

		padding-top: 32px;
		padding-bottom: 48px;
	}

	.book-single__title {
		font-size: 28px;
	}

	.book-single__body {
		width: auto;
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		margin-top: 32px;
	}

	.book-single__cover {
		height: 420px;
	}
}

/* ================= Автор и колонка ================= */

.author-card {
	--container-w: var(--container-text);
	--container-pad: 0px;

	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 20px;
	align-items: center;
	margin-top: 40px;
	padding: 24px;
	border-radius: 8px;
	background: var(--c-page-bg);
	text-align: left;
}

.author-card--compact {
	--container-w: 420px;

	margin-top: 28px;
	padding: 12px 20px 12px 12px;
	background: transparent;
}

.author-card--compact .author-card__photo {
	width: 56px;
	height: 56px;
}

.author-card__photo {
	width: 96px;
	height: 96px;
	overflow: hidden;
	border-radius: 50%;
}

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

.author-card__photo-placeholder,
.person-head__photo-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, #d5d5d5, #d5d5d5 10px, #cbcbcb 10px, #cbcbcb 20px);
}

.author-card__name {
	font-family: var(--font-serif);
	font-size: 20px;
	line-height: 24px;
	color: var(--c-text);
}

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

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

.author-card__role {
	margin-top: 2px;
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 18px;
	color: #8a8a8a;
}

.author-card__bio {
	margin-top: 12px;
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 22px;
	color: #4a4a4a;
}

/* Компактная карточка в шапке колонки центрируется вместе с заголовком. */
.entry-head .author-card--compact {
	margin-inline: auto;
}

.person-head {
	margin-top: 48px;
	text-align: center;
}

.person-head__photo {
	width: 180px;
	height: 180px;
	margin-inline: auto;
	overflow: hidden;
	border-radius: 50%;
}

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

.person-head__name {
	margin-top: 28px;
}

.person-head__role {
	margin-top: 8px;
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 22px;
	color: #8a8a8a;
}

.person-head__bio {
	--container-w: 830px;

	margin-top: 20px;
	font-family: var(--font-serif);
	font-size: 18px;
	line-height: 30px;
	color: var(--c-text);
}

/* ================= Поиск и 404 ================= */

.search-form {
	--container-w: var(--container-form);

	display: flex;
	gap: 12px;
	margin-top: 32px;
}

.search-form__field {
	flex: 1;
	height: 58px;
	padding: 0 24px;
	border: 1px solid #cfcfcf;
	border-radius: 29px;
	background: var(--c-surface);
	font-family: var(--font-sans);
	font-size: 16px;
	color: var(--c-text);
}

.search-form__field:focus {
	outline: none;
	border-color: var(--c-black);
}

.search-form__submit {
	min-height: 58px;
	padding: 0 32px;
	border-radius: 29px;
	font-size: 16px;
}

.search-results {
	margin-top: 60px;
}

.error-head {
	padding-bottom: 40px;
}

.error-code {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 160px;
	line-height: 1;
	color: var(--c-accent);
	letter-spacing: 0.02em;
}

.error-head .page-title {
	margin-top: 16px;
}

.error-actions {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

@media (max-width: 429.98px) {
	.author-card {
		grid-template-columns: 64px 1fr;
		gap: 14px;
		padding: 16px;
	}

	.author-card__photo {
		width: 64px;
		height: 64px;
	}

	.person-head__photo {
		width: 120px;
		height: 120px;
	}

	.person-head__bio {
		padding-inline: 16px;
		font-size: 16px;
		line-height: 26px;
	}

	.search-form {
		flex-direction: column;
		gap: 10px;
		--container-pad: 16px;
		margin-top: 20px;
	}

	.search-form__field,
	.search-form__submit {
		height: 48px;
		min-height: 48px;
	}

	.error-code {
		font-size: 88px;
	}
}

/* ================= SEO-текст под списком ================= */

.archive-seo {
	padding-top: 80px;
	padding-bottom: 40px;
}

.archive-seo .entry-content {
	margin-top: 0;
	font-size: 16px;
	line-height: 28px;
	text-align: left;
}

.shelf .archive-seo .entry-content {
	color: var(--c-grey-200);
}

.shelf .archive-seo .entry-content h2,
.shelf .archive-seo .entry-content h3 {
	color: var(--c-white);
}

@media (max-width: 429.98px) {
	.archive-seo {
		padding-top: 40px;
		padding-bottom: 24px;
	}
}