/*
 * frame.css — шапка, главное меню, подвал.
 *
 * Композиция и все значения сняты computed styles с действующего сайта
 * napitki133.ru, а не из настроек темы: настройки там до вывода не
 * доходят (см. комментарий в tokens.css).
 *
 * Литералов нет — только переменные. Исключение то же, что в layout.css:
 * значения внутри @media, потому что CSS не подставляет переменные
 * в медиазапросы.
 *
 * Брейкпоинты проектные (CLAUDE.md §11): телефон до 599, планшет
 * 600–1023, компьютер от 1024. На действующем сайте меню переключается
 * на 992px — расхождение осознанное, зафиксировано в handoff-report.md.
 */

/* ---------------------------------------------------------------
 * Каркас страницы
 *
 * Подвал прижат к низу окна на коротких страницах: иначе на 404
 * и пустых архивах он повисает посреди экрана.
 * --------------------------------------------------------------- */

.nn-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: var(--nn-color-bg);
}

.nn-site__content {
	flex: 1 0 auto;
}

/*
 * Страница — колонка фиксированной ширины, а не полотно во всю ширину окна.
 *
 * Так устроен действующий сайт: шапка, меню, содержимое и подвал — блоки
 * шириной 1140px по центру, а по бокам виден фон страницы. Снято замером:
 * при окне 1280px .site-header, .site-navigation, .site-content и .site-footer
 * имеют ширину 1140 и отступ слева 63px. Из-за этого фоновая картинка шапки
 * не растекается на всё окно, а заканчивается вместе с колонкой.
 *
 * Ограничивается сам блок, а не только его содержимое: внутренний
 * .nn-container добавляет к колонке боковые поля и даёт рабочие 1050px.
 */
.nn-header,
.nn-nav,
.nn-site__content,
.nn-footer {
	width: 100%;
	max-width: var(--nn-container-max);
	margin-right: auto;
	margin-left: auto;
	/*
	 * Ореол вокруг колонки. Без него границы колонки видны только там,
	 * где есть картинка: фон страницы и фон колонки — один и тот же цвет,
	 * и в середине страницы «поля» по бокам просто не читаются.
	 */
	box-shadow: var(--nn-shadow-page);
}

/* Колонка красит свой фон сама — как .site-content действующего сайта. */
.nn-site__content {
	background-color: var(--nn-color-bg);
}

/* У меню ореол свой — короче и направлен вниз. */
.nn-nav {
	box-shadow: var(--nn-shadow-nav);
}

/* ---------------------------------------------------------------
 * Шапка
 * --------------------------------------------------------------- */

.nn-header {
	position: relative;
	padding-top: var(--nn-header-pad-y);
	padding-bottom: var(--nn-header-pad-y);
	background-color: var(--nn-color-bg);
	background-image: var(--nn-header-image, none);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/*
 * Высота задаётся из настроек и только если её задали: без неё шапка
 * растёт по содержимому и подстраивается под логотип с названием.
 * min-height, а не height: длинное название не должно вылезать наружу.
 */
.nn-header {
	min-height: var(--nn-header-height, 0);
}

/*
 * Шапка, у которой спрятаны и название, и логотип: внутри пусто,
 * и высоту задать нечем. Берём пропорции самой картинки — тогда
 * на любой ширине она видна целиком, а не обрезается по краям.
 * Заданная в настройках высота важнее: min-height ниже перебивает.
 */
.nn-header--bare.nn-header--image {
	aspect-ratio: var(--nn-header-ratio, auto);
	padding-top: 0;
	padding-bottom: 0;
}

/*
 * Затемнение поверх картинки. Отдельным слоем, а не примесью к фону:
 * так его силу можно менять, не пересобирая изображение, и оно
 * не влияет на цвет шапки без картинки.
 */
.nn-header--image::before {
	position: absolute;
	content: "";
	inset: 0;
	background-color: rgba(0, 0, 0, var(--nn-header-overlay, 0));
	pointer-events: none;
}

/* Содержимое поверх затемнения, иначе слой накроет название. */
.nn-header__inner {
	position: relative;
	z-index: 1;
}

/*
 * Цвет текста шапки применяется, только если его выбрали в настройках:
 * иначе название и слоган красят токены дизайн-системы.
 */
.nn-header .nn-branding__title {
	color: var(--nn-header-text-color, var(--nn-color-footer-text));
}

.nn-header .nn-branding__tagline {
	color: var(--nn-header-text-color, var(--nn-color-tagline));
}

.nn-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nn-space-4);
}

.nn-branding {
	display: flex;
	align-items: center;
	gap: var(--nn-space-4);
	min-width: 0;
}

.nn-branding__logo {
	flex-shrink: 0;
	line-height: 0;
}

.nn-branding__logo img {
	width: auto;
	max-width: var(--nn-logo-max);
	height: var(--nn-logo-height);
	object-fit: contain;
}

.nn-branding__body {
	min-width: 0;
}

/*
 * Название сайта: единственное место, где реально работает Exo 2.
 * Тег меняется по контексту — h1 на главной, p на остальных
 * страницах, — поэтому оформление задано классом, а не тегом.
 */
.nn-branding__title {
	margin: 0 0 var(--nn-space-1);
	color: var(--nn-color-footer-text);
	font-family: var(--nn-font-display);
	font-size: var(--nn-fs-brand);
	font-weight: var(--nn-fw-bold);
	line-height: var(--nn-lh-tight);
	text-transform: uppercase;
}

.nn-branding__title a {
	color: inherit;
	text-decoration: none;
}

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

.nn-branding__tagline {
	margin: 0;
	color: var(--nn-color-tagline);
	font-family: var(--nn-font-display);
	font-size: var(--nn-fs-base);
	font-weight: var(--nn-fw-bold);
	line-height: var(--nn-lh-base);
	text-transform: uppercase;
}

/*
 * Слоты шапки: поиск (этап 6) и вход (этап 5). Пока пусты и места
 * не занимают — display: contents убирает лишний узел из раскладки.
 */
.nn-header__actions {
	display: contents;
}

.nn-header__actions:not(:empty) {
	display: flex;
	align-items: center;
	gap: var(--nn-space-3);
}

/*
 * Телефон: логотип и название по центру, бургер уходит в верхний
 * правый угол. Так на действующем сайте — там переключение стоит
 * на 768px, у нас на проектном брейкпоинте 600px.
 */
@media (max-width: 599px) {

	/*
	 * Отдельная картинка под телефон. Широкий баннер здесь обрезается
	 * до полосы, на которой ничего не разобрать, — так же устроена
	 * шапка действующего сайта. Не задали — остаётся основная.
	 */
	.nn-header {
		background-image: var(--nn-header-image-mobile, var(--nn-header-image, none));
		min-height: var(--nn-header-height-mobile, var(--nn-header-height, 0));
	}

	/*
	 * Пропорции тоже мобильные, иначе картинку, обрезанную под телефон,
	 * вписало бы в пропорции настольной — и она обрезалась бы второй раз.
	 * Не задали мобильную — остаются прежние.
	 */
	.nn-header--bare.nn-header--image {
		aspect-ratio: var(--nn-header-ratio-mobile, var(--nn-header-ratio, auto));
	}


	.nn-header__inner {
		flex-wrap: wrap;
	}

	.nn-branding {
		flex: 1 1 100%;
		flex-direction: column;
		text-align: center;
	}

	.nn-burger {
		position: absolute;
		top: var(--nn-header-pad-y);
		right: var(--nn-container-pad);
	}
}

/* ---------------------------------------------------------------
 * Бургер
 *
 * Кнопка, а не div: её нужно достигать табом и нажимать Enter.
 * На действующем сайте это div, и с клавиатуры меню там не
 * открывается — воспроизводить эту ошибку не будем.
 * --------------------------------------------------------------- */

.nn-burger {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	padding: 14px 10px;
	border: 0;
	background: none;
	cursor: pointer;
}

.nn-burger__bar {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--nn-color-text);
	transition: transform var(--nn-transition), opacity var(--nn-transition);
}

.nn-burger__bar + .nn-burger__bar {
	margin-top: 5px;
}

.nn-burger[aria-expanded="true"] .nn-burger__bar:first-child {
	transform: translateY(7px) rotate(45deg);
}

.nn-burger[aria-expanded="true"] .nn-burger__bar:nth-child(2) {
	opacity: 0;
}

.nn-burger[aria-expanded="true"] .nn-burger__bar:last-child {
	transform: translateY(-7px) rotate(-45deg);
}

/* ---------------------------------------------------------------
 * Главное меню
 * --------------------------------------------------------------- */

.nn-nav {
	position: relative;
	z-index: 20;
	background-color: var(--nn-color-bg);
}

/*
 * Полосы под меню у действующего сайта нет: у .site-navigation
 * границы нулевые, меню переходит в содержимое без разделителя.
 */
.nn-nav__inner {
	border-bottom: 0;
}

.nn-menu,
.nn-menu .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nn-menu li {
	position: relative;
	margin: 0;
}

.nn-menu a {
	position: relative;
	display: block;
	padding: 12px 5px;
	color: var(--nn-color-accent);
	font-family: var(--nn-font-ui);
	font-size: var(--nn-fs-nav);
	font-weight: var(--nn-fw-bold);
	/* 1.5 от 11px = 16.5px — снято с действующего сайта, высота пункта 53px. */
	line-height: var(--nn-lh-base);
	text-decoration: none;
	text-transform: uppercase;
}

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

/*
 * Подчёркивание: выезжает снизу при наведении, у текущего пункта
 * стоит постоянно. Отдельный псевдоэлемент, а не border, — иначе
 * прыгает высота строки.
 */
.nn-menu a::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	background-color: var(--nn-color-marker-dim);
	opacity: 0;
	transform: translateY(-10px);
	transition: transform var(--nn-transition), opacity var(--nn-transition);
}

.nn-menu a:hover::before,
.nn-menu a:focus-visible::before,
.nn-menu .current-menu-item > a::before,
.nn-menu .current-menu-ancestor > a::before {
	opacity: 1;
	transform: translateY(0);
}

/* Кнопка раскрытия подменю. На узком экране — единственный способ
   добраться до вложенных пунктов, наведения там нет. */
.nn-menu__toggle {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--nn-color-marker);
	font-size: var(--nn-fs-base);
	line-height: 1;
	cursor: pointer;
	transition: transform var(--nn-transition);
}

.nn-menu__toggle[aria-expanded="true"] {
	transform: rotate(180deg);
}

/* ---------------------------------------------------------------
 * Меню: телефон и планшет
 *
 * Раскрывающаяся панель под шапкой. Пока бургер не нажат, панель
 * не существует в потоке — hidden снимается скриптом.
 * --------------------------------------------------------------- */

@media (max-width: 1023px) {

	.nn-nav {
		display: none;
	}

	.nn-nav.is-open {
		display: block;
	}

	.nn-nav__inner {
		padding-top: var(--nn-space-2);
		padding-bottom: var(--nn-space-2);
	}

	.nn-menu li {
		padding-right: 44px;
	}

	.nn-menu .sub-menu {
		display: none;
		padding-left: var(--nn-space-4);
	}

	.nn-menu .sub-menu.is-open {
		display: block;
	}

	/* Вложенный уровень мельче — иначе на узком экране дерево
	   читается как один сплошной список. */
	.nn-menu .sub-menu a {
		font-size: var(--nn-fs-nav);
		opacity: 0.9;
	}
}

/* ---------------------------------------------------------------
 * Меню: компьютер
 * --------------------------------------------------------------- */

@media (min-width: 1024px) {

	.nn-burger {
		display: none;
	}

	.nn-nav {
		display: block;
	}

	.nn-menu {
		display: flex;
		flex-flow: row wrap;
	}

	.nn-menu > li {
		flex-grow: 1;
	}

	.nn-menu > li > a {
		padding: 18px 5px;
		text-align: center;
	}

	/*
	 * Раскрытие наведением — как на действующем сайте.
	 *
	 * Скрыто прозрачностью, а НЕ visibility: hidden. Разница
	 * принципиальная: внутри visibility: hidden ссылки перестают
	 * получать фокус, :focus-within никогда не срабатывает, и с
	 * клавиатуры подменю недостижимо. С opacity ссылки остаются
	 * фокусируемыми — первый же Tab внутрь показывает панель.
	 * pointer-events отключены, чтобы невидимая панель не
	 * перехватывала клики мышью.
	 */
	.nn-menu .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 30;
		min-width: 100%;
		background-color: var(--nn-color-bg);
		box-shadow: var(--nn-shadow-md);
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--nn-transition);
	}

	.nn-menu li:hover > .sub-menu,
	.nn-menu li:focus-within > .sub-menu,
	.nn-menu .sub-menu.is-open {
		opacity: 1;
		pointer-events: auto;
	}

	.nn-menu .sub-menu a {
		padding: 18px 20px;
		text-align: left;
		white-space: nowrap;
	}

	.nn-menu .sub-menu a:hover {
		color: var(--nn-color-marker);
	}

	.nn-menu .sub-menu a::before {
		content: none;
	}

	/* Третий уровень уходит вбок. */
	.nn-menu .sub-menu .sub-menu {
		top: 0;
		left: 100%;
	}

	.nn-menu__toggle {
		display: none;
	}

	/* Указатель вложенности у пунктов подменю. */
	.nn-menu .sub-menu > li.menu-item-has-children > a::after {
		content: "›";
		margin-left: var(--nn-space-2);
		color: var(--nn-color-marker);
	}
}

/* ---------------------------------------------------------------
 * Подвал
 * --------------------------------------------------------------- */

.nn-footer {
	padding-top: var(--nn-footer-pad-y);
	padding-bottom: var(--nn-footer-pad-y);
	background-color: var(--nn-color-footer-bg);
	color: var(--nn-color-footer-body);
	/*
	 * Кегли подвала пересчитаны с макета, а не подобраны на глаз.
	 * Макет 1672 точки шириной, рабочая ширина сайта 1140 — коэффициент
	 * 0,68. Замеренная в макете высота знака делится на него, отсюда
	 * и размеры: основной текст 13,6 (было 14,4), пояснения
	 * и предупреждения 12,8, пункты направлений 16 прописными.
	 *
	 * Интерлиньяж с 1,75 снижен до 1,5: на разреженном тексте колонки
	 * «расползались», при том что в макете строки стоят плотно.
	 */
	font-size: var(--nn-fs-sm);
	line-height: var(--nn-lh-base);
}

.nn-footer__widgets {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--nn-space-5);
	margin-bottom: var(--nn-space-7);
	padding-bottom: var(--nn-space-7);
	border-bottom: 1px solid var(--nn-color-border-footer);
}

@media (min-width: 600px) {

	.nn-footer__widgets {
		grid-template-columns: repeat(3, 1fr);
	}
}

.nn-footer__widget {
	min-width: 0;
}

.nn-footer__widget-item + .nn-footer__widget-item {
	margin-top: var(--nn-space-5);
}

/*
 * Заголовок колонки. Класс приходит от классических виджетов через
 * before_title, а блочные виджеты печатают свой h2 внутри содержимого —
 * поэтому оформляются оба случая.
 */
.nn-footer__widget :is(h2, h3, h4),
.nn-footer__widget-title {
	margin-bottom: var(--nn-space-3);
	color: var(--nn-color-footer-text);
	font-family: var(--nn-font-ui);
	font-size: var(--nn-fs-base);
	font-weight: var(--nn-fw-bold);
}

.nn-footer__widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nn-footer__widget a {
	color: var(--nn-color-accent);
}

.nn-footer__widget a:hover {
	color: var(--nn-color-accent-hover);
}

/* ---------------------------------------------------------------
 * Содержимое подвала: четыре колонки
 *
 * Оформление по макету заказчика: тёмный фон, золотые заголовки
 * с разделителем, колонки разделены вертикальными линиями.
 *
 * Золото здесь то же, что у плиток и кнопок под шапкой, — переливом
 * `--nn-gradient-gold` заданы разделители, а текст берёт плоский
 * `--nn-color-gold-bright`: перелив на строке в 14 точек не читается,
 * он превращается в грязь. Правило простое: перелив — крупным
 * элементам, плоское золото — тексту.
 *
 * Колонок четыре только на широком экране. На планшете две, на телефоне
 * одна: четыре колонки текста на 375 точках — это четыре нечитаемых
 * столбика по паре слов в строке.
 * --------------------------------------------------------------- */

.nn-footer-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--nn-space-6);
	margin-bottom: var(--nn-space-6);
}

@media (min-width: 600px) {

	.nn-footer-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {

	.nn-footer-columns {
		grid-template-columns: 1fr 1fr 1fr 1.6fr;
		gap: var(--nn-space-5);
	}
}

/*
 * Разделители между колонками. Не `border-right` у каждой: у последней
 * в ряду его пришлось бы снимать, а при переносе сетки «последняя в ряду»
 * меняется вместе с шириной окна. Псевдоэлемент с отрицательным отступом
 * рисуется слева и гасится у первой колонки в ряду — это `nth-child`
 * знает и без медиазапросов.
 */
@media (min-width: 600px) {

	.nn-footer-col {
		position: relative;
	}

	.nn-footer-col::before {
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(var(--nn-space-6) / -2);
		width: 1px;
		background-image: var(--nn-gradient-gold);
		opacity: 0.35;
		content: "";
	}

	.nn-footer-col:nth-child(2n + 1)::before {
		display: none;
	}
}

@media (min-width: 1024px) {

	.nn-footer-col::before {
		left: calc(var(--nn-space-5) / -2);
	}

	/* На четырёх колонках первая в ряду только одна — первая. */
	.nn-footer-col:nth-child(2n + 1)::before {
		display: block;
	}

	.nn-footer-col:first-child::before {
		display: none;
	}
}

/*
 * Заголовок колонки с ромбовидным разделителем под ним, как в макете.
 * Разделитель — псевдоэлемент, а не картинка: одна строка вместо файла,
 * и цвет тянется из токена вместе со всем остальным золотом.
 */
.nn-footer-col__title {
	position: relative;
	margin: 0 0 var(--nn-space-5);
	padding-bottom: var(--nn-space-3);
	color: var(--nn-color-gold-bright);
	font-family: var(--nn-font-heading, inherit);
	font-size: var(--nn-fs-md);
	font-weight: var(--nn-fw-normal);
	letter-spacing: 0.02em;
	text-align: center;
}

.nn-footer-col__title::after {
	position: absolute;
	right: 0;
	bottom: 6px;
	left: 0;
	width: 70%;
	max-width: 200px;
	height: 1px;
	margin: 0 auto;
	background-image: var(--nn-gradient-gold);
	opacity: 0.55;
	content: "";
}

/*
 * Ромб посередине линии — мотив из макета. Символом, а не картинкой:
 * начертание есть в любом шрифте, файл ради него заводить незачем.
 * Фон под ним свой, иначе линия просвечивала бы насквозь.
 */
.nn-footer-col__title::before {
	position: absolute;
	bottom: 0;
	left: 50%;
	padding: 0 var(--nn-space-2);
	background-color: var(--nn-color-footer-bg);
	color: var(--nn-color-gold);
	font-size: 0.5em;
	line-height: 1;
	transform: translateX(-50%);
	content: "◆";
}

.nn-footer-col__subtitle {
	margin: var(--nn-space-5) 0 var(--nn-space-3);
	color: var(--nn-color-gold-bright);
	font-size: var(--nn-fs-base);
	font-weight: var(--nn-fw-normal);
}

/*
 * Врезка и первый абзац — единое предложение, разорванное набором:
 * «133 — онлайн-журнал» / «о вкусе, знаниях…». В макете между ними
 * нет отбивки, поэтому её нет и здесь.
 */
.nn-footer-col__lead {
	margin: 0 0 var(--nn-space-2);
	color: var(--nn-color-gold-bright);
	font-size: var(--nn-fs-lg);
	line-height: var(--nn-lh-tight);
}

.nn-footer-col__lead + .nn-footer-col__text {
	margin-top: 0;
}

.nn-footer-col__text {
	margin: 0 0 var(--nn-space-4);
}

/* Приписка под списком направлений: мельче и по центру, как в макете. */
.nn-footer-col__note {
	margin: var(--nn-space-5) 0 0;
	padding-top: var(--nn-space-5);
	border-top: 1px solid var(--nn-color-gold-dim);
	color: var(--nn-color-footer-dim);
	font-size: var(--nn-fs-xs);
	line-height: var(--nn-lh-h3);
	text-align: center;
}

.nn-footer-col__note ~ .nn-footer-col__note {
	padding-top: 0;
	border-top: 0;
}

/* --------------------------------------------------- списки ссылок */

.nn-footer-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Сброс `margin` обязателен: в base.css у текстовых списков задано
 * `li + li { margin-top }`, и оно досталось бы всем пунктам, кроме
 * первого. Отступы здесь даёт сам пункт.
 */
.nn-footer-list__item {
	margin: 0;
}

.nn-footer-list__link {
	display: flex;
	align-items: baseline;
	gap: var(--nn-space-2);
	padding: var(--nn-space-1) 0;
	color: inherit;
	text-decoration: none;
	transition: color var(--nn-transition);
}

/*
 * Направления набраны прописными и крупнее остального: в макете это
 * главный список подвала, оглавление сети. Разрядка небольшая —
 * прописные без неё читаются как сплошная полоса.
 */
.nn-footer-col--directions .nn-footer-list__link {
	padding: var(--nn-space-2) 0;
	color: var(--nn-color-footer-accent);
	font-size: var(--nn-fs-base);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.nn-footer-col--info .nn-footer-list__link {
	padding: var(--nn-space-2) 0;
}

a.nn-footer-list__link:hover,
a.nn-footer-list__link:focus-visible {
	color: var(--nn-color-gold-bright);
}

/*
 * Пункт без адреса. Раздела ещё нет, вести некуда — показываем текстом.
 * Приглушать сильнее не стоит: это не заглушка-обманка, а честный
 * пункт оглавления, до которого ещё не дошли руки.
 */
.nn-footer-list__link.is-empty {
	color: var(--nn-color-text-muted);
	cursor: default;
}

.nn-footer-list__icon {
	flex: 0 0 auto;
	width: 1.4em;
	font-family: var(--nn-font-emoji);
	font-size: 0.95em;
	line-height: 1;
	text-align: center;
}

/* ------------------------------------------------ колонка «Возможности» */

.nn-footer-features {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nn-footer-features__item {
	display: flex;
	gap: var(--nn-space-3);
	margin: 0 0 var(--nn-space-4);
}

.nn-footer-features__body {
	display: block;
}

.nn-footer-features__name {
	display: block;
	color: var(--nn-color-gold-bright);
	font-size: var(--nn-fs-card);
}

.nn-footer-features__note {
	display: block;
	color: var(--nn-color-footer-dim);
	font-size: var(--nn-fs-xs);
	line-height: var(--nn-lh-h3);
}

.nn-footer-features .nn-footer-list__icon,
.nn-footer-features__item > [aria-hidden] {
	flex: 0 0 auto;
	width: 1.6em;
	font-family: var(--nn-font-emoji);
	line-height: 1.2;
	text-align: center;
}

/* ------------------------------------------------------------ соцсети */

/*
 * В две колонки, как в макете: восемь каналов в столбик растянули бы
 * колонку вдвое против соседних.
 */
.nn-footer-socials {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--nn-space-1) var(--nn-space-3);
	margin: var(--nn-space-4) 0 0;
	padding: 0;
	list-style: none;
}

.nn-footer-socials__item {
	margin: 0;
}

.nn-footer-socials__link {
	display: flex;
	align-items: center;
	gap: var(--nn-space-2);
	color: inherit;
	text-decoration: none;
	transition: color var(--nn-transition);
}

.nn-footer-socials__link:hover,
.nn-footer-socials__link:focus-visible {
	color: var(--nn-color-gold-bright);
}

.nn-footer-socials__icon {
	display: block;
	flex: 0 0 auto;
	width: 22px;
	line-height: 0;
}

.nn-footer-socials__icon img {
	width: 22px;
	height: 22px;
	object-fit: contain;
}

/* ------------------------------------------------------------- гравюры
 *
 * Украшения из макета: стакан, герб, джиггер, бутылка, бокал, бочка.
 * Вырезаны из макета скриптом `design/extract.py` — яркость рисунка
 * переведена в прозрачность, поэтому они ложатся на любой тёмный фон.
 *
 * Фоном псевдоэлемента, а не тегом `img`: это украшение, а не
 * содержание. В разметке им делать нечего, экранный диктор их читать
 * не должен, и в поиск по картинкам они попадать не должны.
 *
 * Только с 1024px. Ниже колонки становятся узкими, гравюра перекрыла бы
 * текст — а заодно шесть файлов на 185 КБ не поедут на телефон:
 * фон из невыполненного медиазапроса браузер не запрашивает.
 * --------------------------------------------------------------- */

@media (min-width: 1024px) {

	.nn-footer-col::after,
	.nn-footer__legal::before,
	.nn-footer__legal::after {
		position: absolute;
		background-repeat: no-repeat;
		background-size: contain;
		/* Под текстом и не ловит курсор: это фон, а не элемент. */
		pointer-events: none;
		content: "";
	}

	/*
	 * Первой колонке гравюр две: стакан и герб рядом с ним. Оба —
	 * слоями одного фона: свойство `background-image` принимает список,
	 * и второй псевдоэлемент ради этого заводить не нужно.
	 */
	/*
	 * Полоса под рисунки. Колонки в сетке равны по высоте самой длинной,
	 * и гравюра, прижатая к низу, наезжала на конец текста в соседней —
	 * «вдохновляют.» уходило под ситечко на девятнадцать точек.
	 * Поле снизу у всех колонок растит ряд и освобождает эту полосу,
	 * а не заставляет мельчить рисунок.
	 */
	.nn-footer-col {
		padding-bottom: 40px;
	}

	.nn-footer-col--about::after {
		right: 0;
		bottom: 0;
		left: 0;
		height: 130px;
		background-image:
			url("../img/footer/glass.png"),
			url("../img/footer/crest.png");
		background-position: left bottom, 170px bottom;
		background-size: 150px 124px, 44px 46px;
	}

	/*
	 * Место под бутылку. Без поля строки «Политика конфиденциальности»
	 * и «Партнёрская информация» уходят прямо под рисунок и читаются
	 * поверх стекла — проверено на площадке.
	 */
	.nn-footer-col--info {
		padding-right: 96px;
	}

	.nn-footer-col--features::after {
		bottom: 0;
		left: 50%;
		width: 186px;
		height: 97px;
		background-image: url("../img/footer/jigger.png");
		transform: translateX(-50%);
	}

	/*
	 * Бутылка выше остальных и стоит у правого края. Ей отдана вся
	 * высота колонки: в макете она тянется от «Информации» до низа.
	 */
	/*
	 * Бутылка уже, чем в макете. Там подвал 1672 точки шириной и бутылка
	 * стоит правее текста; у нас колонка вдвое уже, и рисунок в полную
	 * величину ложился поверх «Партнёрской информации» — проверено
	 * на площадке. Уменьшили до 96 точек и отвели ей поле в колонке.
	 */
	.nn-footer-col--info::after {
		right: 0;
		bottom: 0;
		width: 96px;
		height: 203px;
		background-image: url("../img/footer/bottle.png");
		background-position: right bottom;
	}

	/*
	 * Полоса предупреждений: бокал слева, бочка справа. Отступ снизу
	 * отрицательный — рисунки заходят под копирайт, как в макете,
	 * где они стоят на одной линии с ним.
	 */
	.nn-footer__legal {
		position: relative;
	}

	.nn-footer__legal::before {
		bottom: -30px;
		left: 0;
		width: 237px;
		height: 119px;
		background-image: url("../img/footer/wine.png");
	}

	.nn-footer__legal::after {
		right: 0;
		bottom: -30px;
		width: 236px;
		height: 120px;
		background-image: url("../img/footer/barrel.png");
	}
}

/* -------------------------------------------------------- предупреждения */

.nn-footer__legal {
	margin: 0 0 var(--nn-space-4);
	padding: var(--nn-space-5) 0 0;
	border-top: 1px solid var(--nn-color-gold-dim);
	color: var(--nn-color-footer-dim);
	font-size: var(--nn-fs-xs);
	line-height: var(--nn-lh-h3);
	list-style: none;
	text-align: center;
}

/*
 * Точка перед строкой — как в макете. Через `::before`, а не
 * `list-style`: маркер списка не встанет по центру строки,
 * он прижат к левому краю блока.
 */
.nn-footer__legal li {
	margin: 0 0 var(--nn-space-2);
}

.nn-footer__legal li::before {
	margin-right: var(--nn-space-2);
	color: var(--nn-color-gold);
	content: "•";
}

/*
 * Текст предупреждений держим между рисунками: без полей длинные строки
 * доезжают до бочки и читаются поверх неё.
 *
 * Правило стоит после базового намеренно: там `padding` записан
 * сокращённо, и, стой оно выше, оно бы эти поля обнулило.
 */
@media (min-width: 1024px) {

	.nn-footer__legal {
		padding-right: 255px;
		padding-left: 255px;
	}
}

.nn-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--nn-space-3);
}

/*
 * Когда подвал заполнен, внизу остаётся один копирайт — служебное меню
 * убрано, оно повторяло колонку «Информация». Одинокая строка у левого
 * края выглядит обрубком, в макете она по центру.
 *
 * Признак — соседство с полосой предупреждений: она печатается только
 * заполненным подвалом. Так обходимся без класса-переключателя
 * в разметке.
 */
.nn-footer__legal + .nn-footer__bottom {
	justify-content: center;
	color: var(--nn-color-footer-dim);
	font-size: var(--nn-fs-xs);
	text-align: center;
}

.nn-footer__copyright {
	margin: 0;
}

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

.nn-footer__menu li {
	margin: 0;
}

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

/* ---------------------------------------------------------------
 * Бегущая строка
 *
 * Разметку даёт nn-ticker, цвета и скорость приходят из админки
 * переменными на самом элементе. Полоса закреплена сверху — так же,
 * как на действующем сайте: она про акции, и должна быть видна
 * при прокрутке, а не уезжать вместе с шапкой.
 *
 * Отступ страницы навешивается классом `has-nn-ticker` на body:
 * его ставит плагин, только когда строка действительно показывается.
 * --------------------------------------------------------------- */

.nn-ticker {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 40;
	width: 100%;
	height: var(--nn-ticker-height, 40px);
	background-color: var(--nn-ticker-bg, #5c40e7);
	color: var(--nn-ticker-color, #ffffff);
	font-family: var(--nn-font-ticker);
	/*
	 * Кегль как у кнопок под шапкой (18 точек): по просьбе заказчика
	 * от 24 сентября 2026 года. Шестнадцать читались хуже соседнего
	 * ряда, а полоса при этом прежняя, 40 точек, — строка в ней
	 * одна, и запас по высоте есть.
	 */
	font-size: var(--nn-fs-md);
	font-weight: var(--nn-fw-bold);
	line-height: var(--nn-ticker-height, 40px);
}

.nn-site.has-nn-ticker {
	padding-top: var(--nn-ticker-height, 40px);
}

/*
 * Панель админки тоже стоит сверху и накрыла бы полосу.
 * Сдвигаем строку под неё, а не наоборот.
 */
.admin-bar .nn-ticker {
	top: 32px;
}

@media screen and (max-width: 782px) {

	.admin-bar .nn-ticker {
		top: 46px;
	}
}

.nn-ticker__viewport {
	overflow: hidden;
	width: 100%;
}

.nn-ticker__track {
	display: flex;
	width: max-content;
	animation: nn-ticker-run var(--nn-ticker-speed, 20s) linear infinite;
}

/*
 * Каждая копия не уже экрана: у короткого текста иначе между
 * проходами появляется пустой промежуток.
 */
.nn-ticker__copy {
	flex: none;
	min-width: 100vw;
	padding-right: var(--nn-space-6);
	white-space: nowrap;
}

.nn-ticker__link,
.nn-ticker__text {
	color: inherit;
	text-decoration: none;
}

.nn-ticker__link:hover,
.nn-ticker__link:focus-visible {
	text-decoration: underline;
}

/* Дать прочитать: наведение и фокус останавливают бег. */
.nn-ticker:hover .nn-ticker__track,
.nn-ticker:focus-within .nn-ticker__track {
	animation-play-state: paused;
}

@keyframes nn-ticker-run {

	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/*
 * Кому движение мешает — тому строка стоит на месте. Текст при этом
 * остаётся читаемым целиком: длинный переносится, а не обрезается.
 */
@media (prefers-reduced-motion: reduce) {

	.nn-ticker__track {
		animation: none;
	}

	.nn-ticker {
		height: auto;
		padding: var(--nn-space-2) var(--nn-container-pad);
		line-height: var(--nn-lh-tight);
	}

	.nn-ticker__copy {
		min-width: 0;
		white-space: normal;
	}

	.nn-ticker__copy[aria-hidden="true"] {
		display: none;
	}

	.nn-site.has-nn-ticker {
		padding-top: 0;
	}

	.nn-ticker {
		position: static;
	}
}

/* ---------------------------------------------------------------
 * Блок кнопок
 *
 * Оформление здесь, а не в home.css: блок можно поставить в подвал,
 * а подвал есть на каждой странице, тогда как home.css подключается
 * только на главной.
 *
 * Ширина ряда задаётся из админки переменной --nn-buttons-columns:
 * заказчик просил пять в ряд, но у Арканы на действующем сайте
 * шестнадцать кнопок, и жёсткое «5×2» им не подошло бы.
 *
 * На узком экране переменная не действует: пять кнопок в ряд на
 * телефоне — это пять нечитаемых столбиков. Там всегда две.
 * --------------------------------------------------------------- */

.nn-buttons {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--nn-space-3);
}

@media (min-width: 600px) {

	.nn-buttons {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {

	.nn-buttons {
		grid-template-columns: repeat(var(--nn-buttons-columns, 5), minmax(0, 1fr));
	}
}

.nn-buttons__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--nn-space-2);
	/* 44px — минимальная цель нажатия на сенсорном экране. */
	min-height: 44px;
	padding: var(--nn-space-3) var(--nn-space-2);
	border: 1px solid var(--nn-color-border);
	border-radius: var(--nn-radius-md);
	background-color: var(--nn-color-surface);
	color: var(--nn-color-text);
	font-family: var(--nn-font-ui);
	font-size: var(--nn-fs-sm);
	font-weight: var(--nn-fw-medium);
	line-height: var(--nn-lh-tight);
	text-align: center;
	text-decoration: none;
	transition: background-color var(--nn-transition), border-color var(--nn-transition), color var(--nn-transition);
}

.nn-buttons__item:hover,
.nn-buttons__item:focus-visible {
	border-color: var(--nn-color-action);
	background-color: var(--nn-color-action);
	color: var(--nn-color-action-text);
}

/*
 * Заглушка: сайта ещё нет. Выводится span, поэтому ни фокуса,
 * ни курсора-руки здесь не появляется само — гасим только вид.
 */
.nn-buttons__item.is-disabled {
	border-style: dashed;
	background-color: var(--nn-color-surface-2);
	color: var(--nn-color-text-muted);
	cursor: default;
}

.nn-buttons__icon {
	display: block;
	line-height: 0;
}

.nn-buttons__icon img {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

/*
 * Значок-эмодзи. Базовому `.nn-buttons__icon` задан `line-height: 0` —
 * картинке это не мешает, а текст обрезало бы сверху и снизу, поэтому
 * межстрочный интервал возвращается. Прописные и разрядка снимаются:
 * в ряду под шапкой надписи набраны капителью, и эмодзи наследовал бы
 * лишний отступ справа.
 */
.nn-buttons__icon--emoji {
	font-family: var(--nn-font-emoji);
	font-size: 1.35em;
	font-weight: var(--nn-fw-normal);
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
}

/*
 * Длинные надписи вроде «Лайфхаки и калькуляторы» переносятся
 * по словам, а неразрывно длинное слово рвётся: иначе оно
 * растягивает колонку и ломает ряд.
 */
.nn-buttons__label {
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------
 * Кнопки в подвале
 *
 * Тот же блок кнопок, что и на главной, только помеченный
 * «в подвале». Разметку даёт nn-home-builder, здесь — отличия
 * подвального ряда: значки крупнее, ряд по центру, контейнер
 * не нужен — он уже есть у подвала.
 * --------------------------------------------------------------- */

.nn-footer .nn-home-block--buttons {
	margin-top: var(--nn-space-5);
}

.nn-footer .nn-home-block--buttons .nn-container {
	max-width: none;
	padding: 0;
}

/*
 * Ряд не сеткой, а строкой с переносом: у соцсетей надписи
 * короткие и разной длины, и колонки одинаковой ширины оставляли
 * бы между ними пустоту.
 */
/*
 * Блок кнопок в подвале приходит с разметкой секции главной: своя
 * контейнерная обёртка и крупный заголовок слева. В подвале он уже
 * внутри контейнера — вложенный даёт двойные поля, — а заголовок
 * такого размера спорит с колонками виджетов и налезает на строку
 * копирайта. Приводим к масштабу подвала.
 */
.nn-footer .nn-home-block--footer {
	margin-bottom: var(--nn-space-6);
}

.nn-footer .nn-home-block--footer .nn-container {
	max-width: none;
	padding-right: 0;
	padding-left: 0;
}

.nn-footer .nn-home-block--footer .nn-section__header {
	justify-content: center;
	margin-bottom: var(--nn-space-3);
}

.nn-footer .nn-home-block--footer .nn-section__title {
	color: var(--nn-color-footer-text);
	font-family: var(--nn-font-ui);
	font-size: var(--nn-fs-base);
	font-weight: var(--nn-fw-bold);
}

.nn-footer .nn-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--nn-space-3);
}

/*
 * Соцсети в подвале по образцу действующего сайта: круглый значок,
 * подпись под ним, никакой рамки-коробки. Разметка та же, что
 * у остальных кнопок, — отличается только оформление.
 *
 * Размер значка — переменная: на телефоне ряд из восьми кружков
 * не помещается, и там он меньше.
 */
.nn-footer .nn-buttons__item {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	gap: var(--nn-space-2);
	min-width: var(--nn-social-size, 44px);
	padding: 0;
	border: 0;
	background-color: transparent;
	color: var(--nn-color-accent);
	font-size: var(--nn-fs-xs);
	font-weight: var(--nn-fw-bold);
	text-align: center;
}

.nn-footer .nn-buttons__icon {
	display: block;
	overflow: hidden;
	width: var(--nn-social-size, 44px);
	height: var(--nn-social-size, 44px);
	border-radius: 50%;
	line-height: 0;
}

.nn-footer .nn-buttons__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nn-footer .nn-buttons__item:hover .nn-buttons__icon,
.nn-footer .nn-buttons__item:focus-visible .nn-buttons__icon {
	transform: scale(1.08);
}

/*
 * Сеть, которой ещё нет: значок приглушён, подпись серая, нажать
 * нельзя. Так честнее, чем вести на несуществующую страницу.
 */
.nn-footer .nn-buttons__item.is-disabled {
	color: var(--nn-color-text-muted);
}

.nn-footer .nn-buttons__item.is-disabled .nn-buttons__icon img {
	opacity: 0.45;
	filter: grayscale(1);
}

@media (max-width: 600px) {

	.nn-footer .nn-buttons {
		--nn-social-size: 36px;
	}
}

/* ---------------------------------------------------------------
 * Кнопки под шапкой
 *
 * Тот же блок кнопок, помеченный «под шапкой». На действующем сайте
 * этот ряд идёт сразу под картинкой шапки и одинаков на всех
 * страницах: навигация по проектам и разделам.
 *
 * Высоту кнопок не занижаем до тамошних 25px: 44px — минимальная
 * цель нажатия на сенсорном экране, и это правило проекта, а не
 * оформление отдельного блока.
 * --------------------------------------------------------------- */

.nn-header-blocks {
	background-color: var(--nn-color-bg);
}

.nn-header-blocks .nn-home-block--buttons {
	padding-top: var(--nn-space-3);
	padding-bottom: var(--nn-space-3);
}

/*
 * Ряд под шапкой плотнее, чем на главной: кнопок много, надписи
 * короткие, и разреженная сетка растянула бы его на пол-экрана.
 */
.nn-header-blocks .nn-buttons {
	gap: var(--nn-space-2);
}

/*
 * Ряд выравнивается по краям картинки шапки. Картинка — фон
 * элемента шапки и закрывает его целиком вместе с боковыми полями
 * контейнера, а ряд лежит внутри поля и оказывался вдавленным
 * на 45 точек с каждой стороны. Поля снимаем — края совпадают.
 */
.nn-header-blocks .nn-container {
	padding-right: 0;
	padding-left: 0;
}

/*
 * Оформление по образцу `napitki133.ru/arkana/`: золотая рамка
 * на тёмном, циановая надпись, при наведении заливка золотом.
 *
 * Золото здесь то же, что у плиток, и это не украшательство:
 * до правки ряд жил на собственной паре плоских цветов, снятых
 * вычисленными стилями с «Арканы» (`#7e623e` рамка, `#8d6d44`
 * заливка). Рядом с плитками, у которых рамка и кнопка сделаны
 * переливом `--nn-gradient-gold`, это читалось как два разных золота
 * на одной странице. Теперь перелив один и задан один раз.
 *
 * Рамка переливом — тем же приёмом, что у плитки: два слоя фона,
 * ровный цвет по `padding-box` и градиент по `border-box`. Красить
 * саму рамку нечем, градиент в `border-color` не кладётся.
 *
 * Кнопки крупнее образца намеренно: там высота 30 точек, а 44 —
 * минимальная цель нажатия на сенсорном экране, это правило проекта.
 */
.nn-header-blocks .nn-buttons__item {
	/*
	 * Значок в строку с надписью, а не над ней: в списке заказчика
	 * он стоит слева от слова, а высоты в 48 точек на два этажа нет.
	 */
	flex-direction: row;
	min-height: 48px;
	padding: var(--nn-space-3) var(--nn-space-3);
	/*
	 * Не `border`, а только цвет: заглушка ниже помечена пунктиром
	 * общим правилом блока, и сокращённая запись сбросила бы стиль
	 * рамки обратно на сплошной.
	 */
	border-color: transparent;
	border-radius: var(--nn-radius-sm);
	background:
		linear-gradient(var(--nn-color-bg), var(--nn-color-bg)) padding-box,
		var(--nn-gradient-gold) border-box;
	color: var(--nn-color-accent);
	/*
	 * Крупнее прежнего в полтора раза без малого: 12,8 точки читались
	 * плохо, заказчик попросил увеличить. Кнопка при этом прежняя,
	 * 48 точек в высоту, — но удержать её удалось только вместе
	 * с двумя правками ниже: четыре кнопки в ряд вместо пяти
	 * (это настройка блока, не стиль) и уменьшенный значок.
	 *
	 * Промерено в браузере на 1440, 1280 и 1024: переносов нет ни на
	 * одной ширине, рядов в блоке по-прежнему три. При пяти в ряд
	 * не выходило никак — самая длинная надпись требует 179 точек,
	 * а помещалось 154.
	 */
	font-size: var(--nn-fs-md);
	font-weight: var(--nn-fw-bold);
	text-transform: uppercase;
	/*
	 * Фон переливом не анимируется: `background-image` меняется рывком.
	 * Плавным оставляем цвет надписи — на глаз переход всё равно мягкий,
	 * а попытка вести градиент через `background-color` даёт мигание,
	 * см. кнопку плитки в home.css.
	 */
	transition: color var(--nn-transition);
}

/*
 * Значок мельче, чем в остальных рядах кнопок. Общее правило даёт
 * 1.35 от кегля, и при крупной надписи значок распирал кнопку
 * до 52 точек — при том, что сам текст в 48 укладывался.
 * Здесь значок стоит в строку с надписью, крупнее её ему быть незачем.
 */
.nn-header-blocks .nn-buttons__icon--emoji {
	font-size: 1.1em;
}

/*
 * Подсветка при наведении — заливка золотом, как у кнопки плитки:
 * тот же перелив, та же тёмная надпись. Тёмная не по вкусу,
 * а по читаемости: цианом по золоту не прочитать.
 */
.nn-header-blocks .nn-buttons__item:hover,
.nn-header-blocks .nn-buttons__item:focus-visible {
	background: var(--nn-gradient-gold) border-box;
	color: var(--nn-color-on-gold);
}

/* Заглушка золотом не подсвечивается: нажимать нечего. */
.nn-header-blocks .nn-buttons__item.is-disabled:hover {
	background: var(--nn-color-bg);
	color: var(--nn-color-text-muted);
}

/*
 * Заглушка остаётся приглушённой: она не ведёт никуда, и подсвечивать
 * её акцентом значило бы обещать переход. Фон задаём ровным — иначе
 * из-под пунктирной рамки просвечивал бы золотой слой.
 */
.nn-header-blocks .nn-buttons__item.is-disabled {
	border-color: var(--nn-color-border);
	background: var(--nn-color-bg);
	color: var(--nn-color-text-muted);
}