/*
 * components.css — кнопки, карточки, формы, бейджи, крошки, paywall.
 *
 * Все состояния проработаны: обычное, наведение, фокус, активное,
 * отключённое, ошибка, успех (CLAUDE.md §11) — это пункт приёмки.
 * Литералов нет, только переменные из tokens.css.
 */

/* ---------------------------------------------------------------
 * Кнопки
 * --------------------------------------------------------------- */

.nn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--nn-space-2);
	/* 44px по вертикали — минимальная цель нажатия на сенсорном экране. */
	min-height: 44px;
	padding: var(--nn-space-2) var(--nn-space-5);
	border: 1px solid transparent;
	border-radius: var(--nn-radius-md);
	background-color: var(--nn-color-action);
	color: var(--nn-color-action-text);
	font-family: var(--nn-font-body);
	font-size: var(--nn-fs-base);
	font-weight: var(--nn-fw-medium);
	line-height: var(--nn-lh-tight);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--nn-transition), border-color var(--nn-transition), color var(--nn-transition);
}

.nn-btn:hover {
	background-color: var(--nn-color-action-hover);
	color: var(--nn-color-action-text);
	text-decoration: none;
}

.nn-btn:active {
	/* Лёгкое смещение вместо анимации — заметно и дёшево. */
	transform: translateY(1px);
}

.nn-btn[disabled],
.nn-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/*
 * Золотая кнопка — главное действие в оформлении сайта.
 *
 * `.nn-btn` в основе синяя: это кнопка дизайн-системы, и она уместна
 * в формах и в кабинете. Но на страницах сайта главное действие всюду
 * золотое — плитки разделов, ряд под шапкой, — и синяя кнопка среди
 * них читается как чужая.
 *
 * Надпись тёмная: цианом и белым по золоту не прочитать.
 *
 * При наведении перелив не подменяется плоским цветом, а светлеет.
 * Подмена мерцает: `background-image` не анимируется и исчезает рывком,
 * а `background-color` за ним проявляется плавно — между этим успевает
 * мелькнуть прозрачная кнопка. Тот же приём и по той же причине
 * у кнопки плитки (home.css).
 */
.nn-btn--gold {
	border-color: transparent;
	background-color: transparent;
	background-image: var(--nn-gradient-gold);
	color: var(--nn-color-on-gold);
	font-weight: var(--nn-fw-bold);
	transition: filter var(--nn-transition);
}

.nn-btn--gold:hover,
.nn-btn--gold:focus-visible {
	background-image: var(--nn-gradient-gold);
	color: var(--nn-color-on-gold);
	filter: brightness(1.12);
}

/* Второстепенное действие. */
.nn-btn--secondary {
	border-color: var(--nn-color-border-strong);
	background-color: transparent;
	color: var(--nn-color-text);
}

.nn-btn--secondary:hover {
	border-color: var(--nn-color-accent);
	background-color: var(--nn-color-surface);
	color: var(--nn-color-accent);
}

/* Третьестепенное: выглядит ссылкой, ведёт себя кнопкой. */
.nn-btn--ghost {
	min-height: auto;
	padding: var(--nn-space-1) var(--nn-space-2);
	background-color: transparent;
	color: var(--nn-color-accent);
}

.nn-btn--ghost:hover {
	background-color: var(--nn-color-surface);
	color: var(--nn-color-accent-hover);
}

.nn-btn--danger {
	background-color: var(--nn-color-danger);
	color: var(--nn-color-bg);
}

.nn-btn--danger:hover {
	background-color: var(--nn-color-danger);
	filter: brightness(1.15);
}

.nn-btn--sm {
	min-height: 32px;
	padding: var(--nn-space-1) var(--nn-space-3);
	font-size: var(--nn-fs-sm);
}

.nn-btn--block {
	display: flex;
	width: 100%;
}

/* ---------------------------------------------------------------
 * Карточки
 *
 * Три вида — материал, раздел, справочник — различаются наполнением,
 * а не отдельной вёрсткой: общая основа плюс модификатор.
 * --------------------------------------------------------------- */

/*
 * Карточка действующего сайта: без фона, без рамки и без скругления.
 * Скруглена только подложка изображения — 6px. Проверено computed
 * styles на `.content-card--small`.
 */

.nn-card {
	display: flex;
	flex-direction: column;
	background-color: transparent;
}

.nn-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	border-radius: var(--nn-radius-card);
	background-color: var(--nn-color-surface-2);
}

.nn-card__media-link {
	display: block;
	width: 100%;
	height: 100%;
}

.nn-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--nn-transition);
}

.nn-card:hover .nn-card__media img {
	transform: scale(1.03);
}

.nn-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--nn-space-2);
	/* 12.8px по горизонтали — как на сайте. */
	padding: var(--nn-space-3) 0.8rem;
}

.nn-card__title {
	margin: 0;
	font-family: var(--nn-font-heading);
	font-size: var(--nn-fs-base);
	font-weight: var(--nn-fw-normal);
	line-height: var(--nn-lh-base);
}

/*
 * Ссылка в заголовке карточки — акцентная и полужирная.
 *
 * Раньше здесь стоял обычный цвет текста: при первом замере я снял стиль
 * с обёртки `.content-card__title`, а она у действующего сайта серая
 * и не полужирная — оформлена именно ссылка внутри неё.
 */
.nn-card__title a {
	color: var(--nn-color-accent);
	font-weight: var(--nn-fw-bold);
}

.nn-card__title a:hover {
	color: var(--nn-color-accent-hover);
	text-decoration: none;
}

.nn-card__excerpt {
	margin: 0;
	color: var(--nn-color-text-muted);
	/* 14.4px — снято с анонса карточки. */
	font-size: var(--nn-fs-card);
}

.nn-card__meta {
	display: flex;
	/*
	 * Дата слева, счётчики справа — раскладка действующего сайта
	 * (`.content-card__meta`, justify-content: space-between).
	 */
	justify-content: space-between;
	gap: var(--nn-space-3);
	margin-top: auto;
	padding-top: var(--nn-space-2);
	color: var(--nn-color-text-muted);
	/* 12.8px — снято с меты карточки. */
	font-size: var(--nn-fs-xs);
}

.nn-card__meta-right {
	display: inline-flex;
	/*
	 * Прижимается вправо сама, без пустого узла слева: дату у блока
	 * главной можно выключить настройкой, и тогда слева ничего нет.
	 */
	margin-left: auto;
	/* 24px между комментариями и просмотрами — как на действующем сайте. */
	gap: var(--nn-space-5);
}

/*
 * Плашка родителя поверх обложки. Значения сняты с действующего сайта:
 * подложка — цвет фона страницы, текст акцентный, 11.2px, отступ снизу 8px.
 */
.nn-card__category {
	position: absolute;
	bottom: 8px;
	left: 0.8rem;
	z-index: 3;
	max-width: calc(100% - 1.6rem);
}

.nn-card__category a {
	display: inline-block;
	padding: 0.14rem 0.56rem;
	border-radius: 3px;
	background-color: var(--nn-color-bg);
	color: var(--nn-color-accent);
	font-size: 0.7rem;
	line-height: var(--nn-lh-base);
}

.nn-card__category a:hover {
	color: var(--nn-color-accent-hover);
	text-decoration: none;
}

/*
 * Значки меты. Шрифт, кодовые точки, размер 16px и отступ 6px —
 * всё снято с действующего сайта, чтобы строка выглядела так же.
 */
.nn-meta__date::before,
.nn-meta__views::before {
	margin-right: 6px;
	font-family: "icomoon", sans-serif;
	font-size: 16px;
	font-weight: var(--nn-fw-normal);
	font-style: normal;
	line-height: 1;
	vertical-align: -2px;
}

.nn-meta__date::before {
	content: "\1F4C5";
}

.nn-meta__views::before {
	content: "\1F441";
}

/* Справочник — верхний уровень структуры, название крупнее и заметнее. */
/* ---------------------------------------------------------------
 * Широкая карточка — список материалов раздела
 *
 * Действующий сайт показывает материалы внутри рубрики большой
 * карточкой в один столбец: обложка во всю ширину колонки, под ней
 * крупный заголовок, анонс и мета. Значения сняты с `.content-card--big`.
 * --------------------------------------------------------------- */

.nn-card--wide .nn-card__media {
	/* 680 x 270 — пропорция обложки в списке действующего сайта. */
	aspect-ratio: 68 / 27;
}

.nn-card--wide .nn-card__body {
	/* Текст идёт вровень с обложкой, боковых отступов нет. */
	padding: var(--nn-space-3) 0 0;
}

.nn-card--wide .nn-card__title {
	font-size: var(--nn-fs-lg);
	line-height: var(--nn-lh-heading);
}

.nn-card--wide .nn-card__excerpt {
	font-size: var(--nn-fs-base);
	line-height: var(--nn-lh-base);
}

.nn-card--wide .nn-card__meta {
	font-size: var(--nn-fs-card);
}

@media (max-width: 599px) {

	.nn-card--wide .nn-card__title {
		font-size: var(--nn-fs-md);
	}
}

.nn-card--guide .nn-card__title {
	font-size: var(--nn-fs-md);
	font-weight: var(--nn-fw-medium);
}

/* Раздел — без обложки, компактнее. */
.nn-card--section .nn-card__body {
	padding: var(--nn-space-2) 0.8rem;
}

/* ---------------------------------------------------------------
 * Запись
 * --------------------------------------------------------------- */

.nn-entry__header {
	margin-bottom: var(--nn-space-6);
}

.nn-entry__cover {
	margin-bottom: var(--nn-space-5);
	overflow: hidden;
	border-radius: var(--nn-radius-card);
	background-color: var(--nn-color-surface-2);
}

.nn-entry__cover img {
	width: 100%;
	height: auto;
}

.nn-entry__title {
	margin-bottom: var(--nn-space-4);
}

.nn-entry__lead {
	margin-bottom: 0;
	color: var(--nn-color-text-muted);
	font-size: var(--nn-fs-md);
}

.nn-section__count {
	color: var(--nn-color-text-muted);
	font-size: var(--nn-fs-sm);
}

.nn-entry__content > :last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------
 * Постраничная навигация
 * --------------------------------------------------------------- */

.nn-pagination {
	margin-top: var(--nn-space-6);
}

.nn-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nn-space-2);
}

.nn-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--nn-space-3);
	border: 1px solid var(--nn-color-border);
	border-radius: var(--nn-radius-sm);
	color: var(--nn-color-accent);
	text-decoration: none;
}

.nn-pagination .page-numbers:hover {
	border-color: var(--nn-color-accent);
	text-decoration: none;
}

.nn-pagination .page-numbers.current {
	border-color: var(--nn-color-marker-dim);
	background-color: var(--nn-color-surface);
	color: var(--nn-color-text);
}

/*
 * На широком экране кнопки подписаны словами и видны все номера;
 * стрелки и многоточия разрывов нужны только телефону.
 */
.nn-pagination .nn-pagination__gap,
.nn-pagination .nn-pagination__arrow {
	display: none;
}

@media (max-width: 599px) {
	/* Одна строка: номера сжимаются многоточием, а не переносятся. */
	.nn-pagination .nav-links {
		flex-wrap: nowrap;
		gap: var(--nn-space-1);
	}

	/*
	 * Кнопки делят ширину строки поровну и сужаются по надобности:
	 * в худшем случае их девять («‹ 1 … 4 5 6 … 9 ›»), и при постоянной
	 * ширине строка вылезала бы за край узкого телефона.
	 */
	.nn-pagination .page-numbers {
		flex: 1 1 0;
		min-width: 0;
		max-width: 44px;
		padding: 0;
	}

	.nn-pagination .nn-pagination__far {
		display: none;
	}

	.nn-pagination .nn-pagination__gap,
	.nn-pagination .nn-pagination__arrow {
		display: inline;
	}

	.nn-pagination .page-numbers.nn-pagination__gap {
		display: inline-flex;
	}

	/* Подпись остаётся для чтения с экрана, глазу хватает стрелки. */
	.nn-pagination .nn-pagination__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* ---------------------------------------------------------------
 * Бейджи
 * --------------------------------------------------------------- */

.nn-badge {
	display: inline-flex;
	align-items: center;
	padding: var(--nn-space-1) var(--nn-space-3);
	border-radius: var(--nn-radius-pill);
	background-color: var(--nn-color-surface-2);
	color: var(--nn-color-text);
	font-size: var(--nn-fs-xs);
	font-weight: var(--nn-fw-medium);
	line-height: var(--nn-lh-tight);
	white-space: nowrap;
}

.nn-badge--pro {
	background-color: var(--nn-color-warning);
	color: var(--nn-color-bg);
	font-weight: var(--nn-fw-bold);
	text-transform: uppercase;
}

.nn-badge--topic {
	background-color: transparent;
	border: 1px solid var(--nn-color-border-strong);
	color: var(--nn-color-text-muted);
}

/* ---------------------------------------------------------------
 * Формы
 * --------------------------------------------------------------- */

.nn-field {
	display: flex;
	flex-direction: column;
	gap: var(--nn-space-2);
	margin-bottom: var(--nn-space-4);
}

.nn-field__label {
	color: var(--nn-color-text);
	font-size: var(--nn-fs-sm);
	font-weight: var(--nn-fw-medium);
}

.nn-field__hint {
	color: var(--nn-color-text-muted);
	font-size: var(--nn-fs-xs);
}

.nn-input,
.nn-select,
.nn-textarea {
	width: 100%;
	min-height: 44px;
	padding: var(--nn-space-2) var(--nn-space-3);
	border: 1px solid var(--nn-color-border-strong);
	border-radius: var(--nn-radius-md);
	background-color: var(--nn-color-field-bg);
	color: var(--nn-color-field-text);
	font-family: var(--nn-font-body);
	font-size: var(--nn-fs-base);
	transition: border-color var(--nn-transition);
}

.nn-textarea {
	min-height: 120px;
	resize: vertical;
}

.nn-input:hover,
.nn-select:hover,
.nn-textarea:hover {
	border-color: var(--nn-color-accent);
}

.nn-input[disabled],
.nn-select[disabled],
.nn-textarea[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Ошибка и успех: цвет плюс текст. Только цветом состояние не передаём —
   часть пользователей его не различает. */
.nn-field--error .nn-input,
.nn-field--error .nn-select,
.nn-field--error .nn-textarea {
	border-color: var(--nn-color-danger);
}

.nn-field--error .nn-field__message {
	color: var(--nn-color-danger);
	font-size: var(--nn-fs-sm);
}

.nn-field--success .nn-input,
.nn-field--success .nn-select,
.nn-field--success .nn-textarea {
	border-color: var(--nn-color-success);
}

.nn-field--success .nn-field__message {
	color: var(--nn-color-success);
	font-size: var(--nn-fs-sm);
}

/* ---------------------------------------------------------------
 * Уведомления
 * --------------------------------------------------------------- */

.nn-notice {
	padding: var(--nn-space-3) var(--nn-space-4);
	border-left: 3px solid var(--nn-color-border-strong);
	border-radius: var(--nn-radius-sm);
	background-color: var(--nn-color-surface);
	font-size: var(--nn-fs-sm);
}

.nn-notice--error {
	border-left-color: var(--nn-color-danger);
	background-color: var(--nn-color-danger-bg);
}

.nn-notice--success {
	border-left-color: var(--nn-color-success);
	background-color: var(--nn-color-success-bg);
}

.nn-notice--warning {
	border-left-color: var(--nn-color-warning);
	background-color: var(--nn-color-warning-bg);
}

/* ---------------------------------------------------------------
 * Страница «не найдено»
 *
 * Единственная страница сайта без содержимого, и потому единственная,
 * где уместна крупная подача: читателю нужно сразу понять, что он
 * не туда попал, и получить выход.
 *
 * Цифра набрана тем же золотым переливом, что плитки разделов и ряд
 * кнопок под шапкой. Перелив в тексте — это фон, обрезанный по буквам:
 * покрасить им сам текст нечем.
 * --------------------------------------------------------------- */

.nn-404 {
	max-width: 560px;
	margin: var(--nn-space-8) auto;
	text-align: center;
}

.nn-404__code {
	margin: 0;
	color: var(--nn-color-gold);
	/*
	 * Exo 2, а не заголовочный Open Sans. Это единственный на сайте
	 * второй случай крупной подачи: первый — название в шапке, набранное
	 * тем же шрифтом. Цифра перекликается с ним, и страница не выглядит
	 * пришедшей с другого сайта. В остальном Exo 2 не используется —
	 * так и задумано (tokens.css, раздел о шрифтах).
	 */
	font-family: var(--nn-font-display);
	font-size: var(--nn-fs-display);
	font-weight: var(--nn-fw-bold);
	line-height: var(--nn-lh-tight);
	letter-spacing: 0.02em;
}

/*
 * Перелив по буквам — только там, где браузер это умеет. Без проверки
 * в старом браузере `color: transparent` сработал бы, а обрезка фона
 * нет, и цифра исчезла бы совсем. Плоское золото выше остаётся
 * запасным вариантом.
 */
@supports (background-clip: text) or (-webkit-background-clip: text) {

	.nn-404__code {
		background-image: var(--nn-gradient-gold);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.nn-404__title {
	margin-bottom: var(--nn-space-3);
}

.nn-404__text {
	margin-bottom: var(--nn-space-6);
	color: var(--nn-color-text-muted);
	font-size: var(--nn-fs-md);
}

.nn-404__actions {
	margin-bottom: 0;
}

/*
 * На телефоне цифра уменьшается до кегля h1: 80 точек занимают
 * пол-экрана и отодвигают выход за сгиб.
 */
@media (max-width: 599px) {

	.nn-404 {
		margin-top: var(--nn-space-6);
	}

	.nn-404__code {
		font-size: var(--nn-fs-3xl);
	}
}

/* ---------------------------------------------------------------
 * Хлебные крошки
 *
 * Разметку даёт плагин nn-breadcrumbs (шаг 7), оформление — здесь.
 * --------------------------------------------------------------- */

.nn-breadcrumbs {
	margin-bottom: var(--nn-space-4);
	color: var(--nn-color-text-muted);
	font-size: var(--nn-fs-sm);
}

.nn-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nn-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nn-breadcrumbs li {
	display: flex;
	align-items: center;
	gap: var(--nn-space-2);
	margin: 0;
}

.nn-breadcrumbs li + li::before {
	content: "/";
	color: var(--nn-color-border-strong);
}

.nn-breadcrumbs [aria-current="page"] {
	color: var(--nn-color-text);
}

/* ---------------------------------------------------------------
 * Paywall
 *
 * Показывается вместо закрытой части PRO-материала. Сама закрытая
 * часть в HTML не попадает ни в каком виде (CLAUDE.md §10).
 * --------------------------------------------------------------- */

.nn-paywall {
	position: relative;
	margin: var(--nn-space-6) 0;
	padding: var(--nn-space-6) var(--nn-space-5);
	border: 1px solid var(--nn-color-warning);
	border-radius: var(--nn-radius-lg);
	background-color: var(--nn-color-surface);
	text-align: center;
}

.nn-paywall__title {
	margin-bottom: var(--nn-space-3);
	font-size: var(--nn-fs-xl);
}

.nn-paywall__text {
	margin: 0 auto var(--nn-space-5);
	max-width: 46ch;
	color: var(--nn-color-text-muted);
}

/* Контейнер, куда скрипт подставит закрытую часть авторизованному
   пользователю. В кэшируемом HTML он всегда пуст. */
#nn-locked-content:empty {
	display: none;
}


/* ---------------------------------------------------------------------------
   Мета-строка материала

   Раздел, автор, дата, комментарии, просмотры — состав и порядок
   действующего сайта (`.entry-meta`). Отступ между элементами 32px,
   размер 14.4px, цвет приглушённый.
   --------------------------------------------------------------------------- */

.nn-entry__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nn-space-2) var(--nn-space-6);
	margin-bottom: var(--nn-space-4);
	color: var(--nn-color-text-muted);
	font-size: var(--nn-fs-card);
}

.nn-entry__category a {
	display: inline-block;
	padding: 0.27rem 0.81rem;
	border-radius: 3px;
	background-color: var(--nn-color-bg);
	color: var(--nn-color-accent);
}

.nn-entry__category a:hover {
	color: var(--nn-color-accent-hover);
	text-decoration: none;
}

/* ---------------------------------------------------------------
 * Список разделов справочника
 *
 * Нумерованный, в один столбец. Раньше разделы выводились карточками
 * в сетке: при трёх десятках разделов получались два столбца, и такой
 * список читается плохо — глаз прыгает между колонками.
 *
 * Номер выводит сам браузер маркером `::marker`: своя нумерация
 * счётчиком не нужна, а `start` в разметке делает её сквозной
 * при постраничном выводе.
 * --------------------------------------------------------------- */

.nn-children-list {
	margin: 0;
	padding-left: var(--nn-space-6);
	list-style: decimal;
}

/*
 * Кегль пункта равен кеглю ссылки: маркер `::marker` наследует его
 * у пункта, и при меньшем значении номера выглядели приписками
 * рядом с названиями.
 */
.nn-children-list__item {
	margin: 0 0 var(--nn-space-3);
	color: var(--nn-color-text-muted);
	font-size: var(--nn-fs-lg);
}

.nn-children-list__item::marker {
	color: var(--nn-color-text-muted);
	font-weight: var(--nn-fw-bold);
}

.nn-children-list__link {
	color: var(--nn-color-accent);
	font-size: var(--nn-fs-lg);
	font-weight: var(--nn-fw-bold);
	line-height: var(--nn-lh-h3);
	text-decoration: none;
}

.nn-children-list__link:hover,
.nn-children-list__link:focus-visible {
	color: var(--nn-color-accent-hover);
	text-decoration: underline;
}

/*
 * Раздел без своей страницы (`_nn_unfolded`): вместо ссылки — название
 * простым текстом, под ним состав маркированным списком. Номер у группы
 * остаётся: в перечне разделов она занимает своё место.
 */
.nn-children-list__group-title {
	color: var(--nn-color-text);
	font-size: var(--nn-fs-lg);
	font-weight: var(--nn-fw-bold);
	line-height: var(--nn-lh-h3);
}

/* Переадресация со старого адреса ведёт к группе якорем — оставить воздух сверху. */
.nn-children-list__item--group {
	scroll-margin-top: var(--nn-space-8);
}

.nn-children-sublist {
	margin: var(--nn-space-2) 0 0;
	padding-left: var(--nn-space-5);
	list-style: disc;
}

.nn-children-sublist .nn-children-list__item {
	margin-bottom: var(--nn-space-2);
	font-size: var(--nn-fs-md);
}

.nn-children-sublist .nn-children-list__item::marker {
	font-weight: var(--nn-fw-normal);
}

.nn-children-sublist .nn-children-list__link,
.nn-children-sublist .nn-children-list__group-title {
	font-size: var(--nn-fs-md);
}

/* ---------------------------------------------------------------
 * Шапка «обложка слева, заголовок справа»
 *
 * Включает плагин фильтром nn_entry_header_split (рецепт по образцу
 * заказчика). Заголовок — золотом и с засечками, как плитки главной.
 * --------------------------------------------------------------- */

.nn-entry__header--split {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: var(--nn-space-5);
	align-items: center;
	margin-bottom: var(--nn-space-4);
	padding-bottom: var(--nn-space-5);
	border-bottom: 1px solid var(--nn-color-gold-dim);
}

/* В узкой правой колонке мета-строке нужен отступ поменьше, иначе она ломается. */
.nn-entry__header--split .nn-entry__meta {
	gap: var(--nn-space-2) var(--nn-space-4);
	margin-bottom: 0;
}

/*
 * Обложка уменьшается целиком, а не подрезается под рамку. Прежде
 * здесь стояли квадрат (`aspect-ratio: 1`) и `object-fit: cover`:
 * широкий снимок 1024x630 квадрат обрезал по бокам, вертикальный —
 * сверху и снизу, и каждый раз по-своему. Заказчик попросил просто
 * уменьшать, 24 сентября 2026 года.
 *
 * Высоту задаёт ширина колонки: базовое правило блока даёт
 * `width: 100%` и `height: auto`, и картинка встаёт по пропорции сама.
 */
.nn-entry__header--split .nn-entry__cover {
	margin-bottom: 0;
}

.nn-entry__header--split .nn-entry__title {
	margin-bottom: var(--nn-space-3);
	background: var(--nn-gradient-gold);
	-webkit-background-clip: text;
	background-clip: text;
	color: var(--nn-color-gold);
	-webkit-text-fill-color: transparent;
	font-family: var(--nn-font-tile-title);
	font-size: var(--nn-fs-2xl);
	line-height: var(--nn-lh-heading);
}

.nn-entry__tagline {
	margin-bottom: var(--nn-space-4);
	color: var(--nn-color-gold-bright);
	font-family: var(--nn-font-tile-title);
	font-size: var(--nn-fs-md);
	font-style: italic;
}

@media (max-width: 599px) {

	.nn-entry__header--split {
		grid-template-columns: 1fr;
	}
}