/* ==========================================================================
   base.css — то, что есть на КАЖДОЙ странице «Старко».

   ОТКУДА. Собрано из одиннадцати HTML-концептов (html/, распакованные копии —
   html_flat/). В base попали только селекторы, встречающиеся минимум в десяти
   файлах из одиннадцати; их полный список и все расхождения — в отчёте
   migrate/extract_concept_assets.php + разбор CSS.

   КАНОНИЧЕСКИЙ ИСТОЧНИК — starco_photos_concept.html: вариант внутренней
   страницы, в нём есть .nav a.active, .btn-outline и prefers-reduced-motion,
   и он меньше всех расходится с остальными. Главная (homepage) — выброс:
   у неё светлая шапка, другой мобильный оверлей и своя сетка подвала. Всё её
   отличие вынесено в модификатор .is-home (см. home.css), партиал шапки НЕ
   форкается.

   ЧЕГО ЗДЕСЬ НЕТ НАМЕРЕННО. .hero, .hero h1 и .hero:after различаются на всех
   десяти страницах (по десять вариантов каждый) — это постраничные правила,
   их место в {страница}.css.

   ТО ЖЕ КАСАЕТСЯ .section-title, .section-copy и .cta, и это стоит сказать
   отдельно: они выглядят как очевидные кандидаты в base.css, и предложение
   «унести их сюда» уже звучало трижды. Замер говорит обратное — у
   .section-title семь разных тел на восемь файлов, у .section-copy пять, у
   .cta три. Отличаются не пробелы, а числа в clamp(), max-width и отступы:
   концепты страниц действительно разные. Общее правило здесь либо изменило бы
   вёрстку относительно макетов, либо всё равно перебивалось бы на каждой
   странице — то есть дало бы лишний слой без выгоды. Проверить перед тем, как
   решить иначе: migrate/page_css_diff.php плюс сравнение тел по файлам.

   ИМЕНА ПЕРЕМЕННЫХ. В концептах два написания: --blue2/--navy2/--red2 на
   внутренних и --blue-2/--navy-2/--red-2 на главной. Нормализовано к первому.
   Так же с классом появления: .reveal.visible на главной и .reveal.in на
   остальных — оставлен .in.

   ГДЕ КОНЦЕПТЫ РАСХОДЯТСЯ, А ВЫБРАТЬ ПРИХОДИТСЯ ОДНО. Замерено сверкой через
   Playwright, чтобы к этому не возвращались:

     .btn padding — ровно 5 против 5: 15px 22px (книга, матч, альбом, фото,
     видео) против 16px 24px (история, главная, статья, новости, состав).
     Большинства нет, взято второе. Отличие в 1 и 2 пикселя.

     .marquee-track animation — 38s на главной, 42s на истории и новостях,
     45s на составе. Взято 45s. Скорость бегущей строки, на глаз незаметно.

   Это НЕ дефекты переноса: у одного общего файла не может быть двух значений
   для одного свойства. Захотите вернуть постраничную разницу - место таким
   правилам в {страница}.css, они подключаются после base.css.
   ========================================================================== */

/* --------------------------------------------------------------- шрифт --- */
/* Inter Variable, self-hosted: два подмножества (латиница и кириллица), по
   19–48 КБ. Ось начертаний у Inter 100–900, поэтому font-weight:950 из
   концептов реально отрисуется как 900 — так же, как в самих концептах.
   Значение оставлено как в исходнике, чтобы вёрстка сверялась один в один.
   Лицензия — SIL OFL, файл рядом: fonts/LICENSE-Inter.txt */
@font-face {
	font-family: 'Inter Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('/design/t1/fonts/inter-latin.woff2') format('woff2-variations');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('/design/t1/fonts/inter-cyrillic.woff2') format('woff2-variations');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* --------------------------------------------------------------- токены -- */
:root {
	--blue: #073E78;
	--blue2: #0B58A4;
	--navy: #041D3D;
	--navy2: #020E20;
	--red: #D90812;
	--red2: #F21B24;
	--gold: #E6C04C;
	--cream: #F5F2E8;
	--white: #fff;
	--ink: #08162A;
	--muted: #607086;
	--line: rgba(7, 62, 120, .14);
	--shadow: 0 24px 60px rgba(3, 28, 57, .16);
	--radius: 24px;

	/* Ширина контентной колонки. Не фиксированная: на широких экранах
	   упирается в 1420px, на узких оставляет поля по 24px. */
	--container: min(1420px, calc(100vw - 48px));

	/* Узкая колонка для длинного текста (страница новости) */
	--reading: min(1180px, calc(100vw - 48px));
}

/* ---------------------------------------------------------------- сброс -- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: 'Inter Variable', Inter, Arial, Helvetica, sans-serif;
	color: var(--ink);
	background: #fff;
	overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; }

img { max-width: 100%; }

/* Медиа в телах страниц (TinyMCE): колонка часто уже атрибутов width из
   редактора, поэтому высота должна считаться от фактической ширины.
   Пропорции iframe считаем 16:9 — стандарт всех видеохостингов. */
.page-body img { height: auto; }
.page-body iframe { max-width: 100%; aspect-ratio: 16 / 9; height: auto; }

/* Скрытие через свойство hidden.
   design/t1/js/filter.js прячет отфильтрованные карточки строкой
   item.hidden = true, и это работает ровно до тех пор, пока у карточки нет
   собственного display. Правило браузера [hidden]{display:none} лежит в
   таблице агента и проигрывает любому .card{display:grid} из темы: атрибут
   в DOM появляется, карточка остаётся на экране, ошибки нет. Здесь оно
   поднято в тему, чтобы каждая страница с фильтром не вспоминала об этом
   заново. !important нужен именно потому, что перебить надо СВОИ же
   правила из постраничных файлов. */
[hidden] { display: none !important; }

/* Полоса «эта страница скрыта» — предпросмотр для админа, см. index.tpl.
   Намеренно кричащая и в потоке документа, а не поверх контента: её задача —
   чтобы менеджер не принял скрытую запись за опубликованную, а плавающая
   плашка в углу читается как виджет и пролистывается мимо. */
.preview-flag {
	position: relative;
	z-index: 60;
	padding: 12px 20px;
	background: repeating-linear-gradient(135deg, #ffd166 0 14px, #ffc233 14px 28px);
	color: #1b1000;
	font-size: 14px;
	line-height: 1.45;
	text-align: center;
}
.preview-flag strong { font-weight: 800; }

/* --------------------------------------------------- шапка страницы --- */
/* .page-head — тёмная шапка внутренней страницы: заголовок, крошки, лид.
   Каркас общий, потому что класс стоит в девяти шаблонах, а описан был
   только в history.css и match.css: /photos/{альбом}/, произвольная
   страница и 404 рисовали заголовок вообще без оформления — белый текст
   крошек на белом фоне. Ошибки при этом никакой, просто пустое место.

   Источник — starco_photos_concept.html, канонический концепт темы (см.
   шапку файла). Постраничные файлы подключаются ПОСЛЕ base.css, поэтому
   свой padding и своё слово-призрак (:after) страница задаёт у себя и
   перебивает этот каркас, ничего здесь не трогая.

   :before со штриховкой лежит поверх фона, поэтому контейнеру нужен свой
   слой — без z-index крошки перестают нажиматься, и это не косметика.

   ПРО ВТОРОЕ ИМЯ. Часть страниц (главная, состав, видео, «О клубе»,
   «Книга», «Партнёры») называет ту же шапку .hero — так она называлась в
   их концептах, и правила лежат в их постраничных файлах. Каркас сюда не
   продублирован намеренно: у .hero на этих страницах свои размеры, и
   общий фон под ними пришлось бы перебивать. Новую страницу делайте на
   .page-head. */
.page-head {
	position: relative;
	overflow: hidden;
	padding: 145px 0 60px;
	color: #fff;
	background:
		radial-gradient(circle at 84% 18%, rgba(230, 192, 76, .12), transparent 18%),
		radial-gradient(circle at 14% 80%, rgba(217, 8, 18, .11), transparent 23%),
		linear-gradient(128deg, var(--navy2), var(--navy) 52%, #0a518f);
}
.page-head:before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(118deg, transparent 0 88px, rgba(255, 255, 255, .025) 89px 90px);
}
.page-head .container { position: relative; z-index: 2; }

@media (max-width: 820px) {
	.page-head { padding: 120px 0 48px; }
}

.hero > .container { position: relative; z-index: 2; }

.container { width: var(--container); margin: auto; }

/* ------------------------------------------------------------- типографика */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--blue);
}
.eyebrow:before {
	content: "";
	width: 34px;
	height: 3px;
	border-radius: 99px;
	background: var(--red);
}

.empty-state {
	padding: 48px 0;
	color: var(--muted);
	font-size: 15px;
}

/* ---------------------------------------------------------------- кнопки -- */
/* Набор с главной — строгое надмножество остальных (в нём есть
   letter-spacing и cursor), поэтому канон здесь именно её. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 16px 24px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-weight: 900;
	font-size: 14px;
	letter-spacing: .02em;
	transition: .25s ease;
	cursor: pointer;
	white-space: nowrap;
}
.btn-red { background: var(--red); color: #fff; box-shadow: 0 10px 30px rgba(217, 8, 18, .22); }
.btn-light { background: #fff; color: var(--navy); }
.btn-outline { border-color: rgba(7, 62, 120, .25); background: #fff; color: var(--blue); }

/* Ховеры. В базу попали те два, что совпадают дословно в девяти концептах
   из одиннадцати; .btn-light:hover встречается ровно один раз (главная) и
   остаётся постраничным. Без них у .btn стоял transition, которому нечего
   анимировать: кнопка выглядела интерактивной и не реагировала. */
.btn-red:hover { transform: translateY(-2px); background: #bd0710; }
.btn-outline:hover { border-color: var(--blue); transform: translateY(-2px); }

/* ----------------------------------------------------------------- шапка -- */
.header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 60;
	padding: 14px 0;
	transition: .3s;
	color: #fff;
}
.header:after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: rgba(255, 255, 255, .12);
}
.header.scrolled {
	background: rgba(4, 29, 61, .95);
	backdrop-filter: blur(16px);
	box-shadow: 0 10px 35px rgba(0, 0, 0, .14);
}
.header-inner {
	width: var(--container);
	margin: auto;
	display: grid;
	grid-template-columns: 150px 1fr auto;
	align-items: center;
	gap: 26px;
}

.logo { width: 118px; }
.brand-logo {
	display: block;
	width: 100%;
	aspect-ratio: 343 / 150;
	background-image: url('/design/t1/img/logo.png');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.nav { display: flex; justify-content: center; align-items: center; gap: 22px; }
.nav a { font-size: 13px; font-weight: 800; white-space: nowrap; color: rgba(255, 255, 255, .82); transition: .2s; }
.nav a:hover, .nav a.active { color: #fff; }
.nav a.active:after { content: ""; display: block; height: 2px; background: var(--red); margin-top: 5px; }

.header-actions { display: flex; align-items: center; gap: 12px; }
.header-link { font-size: 13px; font-weight: 900; }

.menu-btn {
	display: none;
	width: 46px; height: 46px;
	border: 1px solid rgba(255, 255, 255, .2);
	background: rgba(255, 255, 255, .08);
	color: #fff;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
}

/* -------------------------------------------------------- мобильное меню -- */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 80;
	background: var(--navy2);
	color: #fff;
	padding: 26px;
	transform: translateX(100%);
	transition: .35s;
	display: flex;
	flex-direction: column;
}
.mobile-menu.open { transform: none; }
.mobile-close {
	align-self: flex-end;
	width: 46px; height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .2);
	background: none;
	color: #fff;
	font-size: 26px;
}
.mobile-nav { display: grid; gap: 8px; margin: auto 0; }
.mobile-nav a {
	font-size: clamp(30px, 8vw, 54px);
	font-weight: 950;
	text-transform: uppercase;
	letter-spacing: -.04em;
}

/* ------------------------------------------------------------ бегущая строка */
/* ВАЖНО: внутри .marquee-track должно быть РОВНО ДВА .marquee-group с
   одинаковым содержимым. Анимация сдвигает дорожку на -50%, то есть ровно
   на одну группу — так шов не виден. Три группы или одна дадут рывок. */
.marquee {
	background: linear-gradient(90deg, #c80710, var(--red), #ef1f27, #c80710);
	color: #fff;
	padding: 16px 0;
	overflow: hidden;
	border-top: 1px solid rgba(230, 192, 76, .55);
	border-bottom: 1px solid rgba(230, 192, 76, .55);
}
.marquee-track { display: flex; width: max-content; animation: marquee 45s linear infinite; }
.marquee-group { display: flex; align-items: center; flex-shrink: 0; }
.marquee-group span {
	font-size: 13px;
	font-weight: 950;
	letter-spacing: .11em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 0 18px;
}
.marquee-group i { font-style: normal; color: var(--gold); font-size: 11px; }

@keyframes marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ------------------------------------------------------------ хлебные крошки */
.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	font-size: 12px;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .6);
}
.breadcrumbs a { color: rgba(255, 255, 255, .82); }
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs .separator:before { content: "/"; opacity: .45; }

/* --------------------------------------------------------------- пагинация */
.pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 48px 0 8px;
}
.pagination .page-num,
.pagination .page-prev,
.pagination .page-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid var(--line);
	font-weight: 800;
	font-size: 14px;
	transition: .2s;
}
.pagination .page-num:hover,
.pagination .page-prev:hover,
.pagination .page-next:hover { border-color: var(--blue); color: var(--blue); }
.pagination .page-num.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.pagination .page-gap { padding: 0 4px; color: var(--muted); }

/* ------------------------------------------------------------------ подвал */
.footer { background: #020c19; color: #fff; padding: 70px 0 24px; }
.footer-top {
	display: grid;
	grid-template-columns: 1.15fr .85fr .85fr;
	gap: 70px;
	padding-bottom: 48px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.footer-brand { width: 190px; margin-bottom: 18px; }
.footer-desc { max-width: 460px; color: rgba(255, 255, 255, .58); line-height: 1.65; font-size: 14px; }
.footer h4 { margin: 0 0 18px; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: #cce6ff; }
.footer-nav, .footer-contact { display: grid; gap: 11px; }
.footer-nav a, .footer-contact a { font-size: 14px; color: rgba(255, 255, 255, .72); }
.footer-nav a:hover, .footer-contact a:hover { color: #fff; }
.footer-bottom {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding-top: 22px;
	font-size: 12px;
	color: rgba(255, 255, 255, .45);
}

/* --------------------------------------------------------------- появление */
/* Класс .in навешивает IntersectionObserver из app.js. */
.reveal { opacity: 0; transform: translateY(24px); transition: .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ------------------------------------------------------------ брейкпоинты -- */
@media (max-width: 1180px) {
	.nav { display: none; }
	.header-inner { grid-template-columns: 130px 1fr auto; }
	.menu-btn { display: flex; }
}

@media (max-width: 820px) {
	:root { --container: min(100% - 30px, 1420px); --reading: min(100% - 30px, 1180px); }
	.footer-top { grid-template-columns: 1fr 1fr; }
	.footer-top > div:first-child { grid-column: 1 / -1; }
	.header-actions .btn, .header-actions .header-link { display: none; }
}

@media (max-width: 560px) {
	:root { --container: calc(100vw - 24px); }
	.header-inner { grid-template-columns: 104px 1fr auto; gap: 12px; }
	.logo { width: 102px; }
	.footer-top { grid-template-columns: 1fr; gap: 34px; }
	.footer-bottom { flex-direction: column; }
}

/* Уважаем системную настройку «меньше движения»: без неё блоки с .reveal
   остались бы невидимыми у тех, кому анимации отключены. */
@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; }
	.reveal { opacity: 1; transform: none; transition: none; }
	.marquee-track { animation: none; }
	/* Сдвиг кнопки на ховере — тоже движение, и отключать его надо здесь же,
	   иначе правило выше только что вернуло его тем, кто просил покоя. */
	.btn-red:hover, .btn-outline:hover { transform: none; }
}