/* =========================================================================
   Onest (variable 400–700), локальные сабсеты
   ========================================================================= */

@font-face {
	font-family: "Onest";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../assets/fonts/onest-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Onest";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../assets/fonts/onest-cyrillic-ext.woff2") format("woff2");
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
	font-family: "Onest";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../assets/fonts/onest-latin.woff2") format("woff2");
	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: "Onest";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../assets/fonts/onest-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* =========================================================================
   Jujin Studio — базовые токены и сетка

   Опорные точки макета:
     1920 — 12 колонок, margin 64, gutter 32
     1024 —  4 колонки,  margin 48, gutter 24
      402 —  4 колонки,  margin 16, gutter 16
   Между опорными точками значения интерполируются линейно через clamp(),
   поэтому промежуточные ширины экрана масштабируются пропорционально.
   ========================================================================= */

:root {
	--color-bg: #ffffff;
	--color-ink: #1f1f1f;
	--color-hero-bg: #6f6a66;
	--color-on-hero: #ffffff;

	/* Сетка: 402 → 1024 */
	--cols: 4;
	--margin: clamp(16px, -4.68px + 5.145vw, 48px);
	--gutter: clamp(16px, 10.83px + 1.286vw, 24px);

	/* Hero: «дизайнерская» высота 600 @402 → 800 @1024.
	   Реальная высота = min(дизайнерская, высота экрана) — см. .hero */
	--hero-h: clamp(600px, 470.8px + 32.15vw, 800px);
	--hero-vh: 100vh;
	--hero-pt: clamp(24px, 8.49px + 3.859vw, 48px);
	--hero-pb: clamp(40px, 34.83px + 1.286vw, 48px);

	/* Типографика: 402 → 1024 */
	--fs-h1: clamp(44px, 33.9px + 4.502vw, 80px);   /* 52 → 80 */
	--fs-body: clamp(13px, 11.42px + 0.643vw, 18px); /* 14 → 18 */

	/* Отступы hero: 402 → 1024 */
	--gap-tagline: clamp(11px, 9.42px + 0.643vw, 16px); /* 12 → 16 */
	--gap-tags: clamp(22px, 18.83px + 1.286vw, 32px);   /* 24 → 32 */
	--tag-gap: clamp(8px, 2.83px + 1.286vw, 16px);      /*  8 → 16 */
	--logo-w: clamp(48px, 37.66px + 2.572vw, 64px);     /* 48 → 64 */
	--logo-footer: clamp(64px, 56.49px + 3.859vw, 96px); /* 72 @402 → 96 @1024 */

	/* Галерея: 402 → 1024 */
	--gap-section: clamp(40px, 27.08px + 3.215vw, 60px); /* 40 → 60 */
	--fs-caption: clamp(14px, 10.83px + 1.286vw, 24px);  /* 16 @402 → 24 @1024 */

	/* Блок «Эмоции продлятся долго» */
	--fs-h2: clamp(24px, 16.95px + 2.251vw, 40px);       /* 26 @402 → 40 @1024 */

	/* Тень для тёмного текста на светлом фото: та же геометрия, белый цвет */
	--text-shadow-light: 0 0 0.16em rgba(255, 255, 255, 0.25);

	/* Тень текста: чёрная, 25%, без смещения, блюр пропорционален кеглю */
	--text-shadow: 0 0 0.16em rgba(0, 0, 0, 0.25);
}

/* 1024 → 1200: переход от планшетных кеглей к десктопным.

   Кегли здесь УМЕНЬШАЮТСЯ по мере роста окна — это не ошибка. С 1200
   начинается десктоп, где размеры задаются долей ширины контейнера от
   макета 1920, и эта доля на 1200 заметно мельче планшетной: 80/928 на
   1024 — это 8.6% контейнера, 96/1792 на 1920 — только 5.4%. Планшетная
   кривая и десктопная сходятся ровно на 1920 и нигде больше, поэтому
   переход между ними — либо скачок, либо вот такой плавный спуск.
   Выбран спуск: на 1280 кегли получаются те же, что дала бы десктопная
   пропорция, но граница не «щёлкает».

   Геометрия (поля, гаттер, логотип обложки, отступы между секциями)
   в спуске не участвует — она росла монотонно от 1024 к 1920 и растёт. */
@media (min-width: 1024px) {
	:root {
		--margin: clamp(48px, 29.71px + 1.786vw, 64px);
		--gutter: clamp(24px, 14.86px + 0.893vw, 32px);

		--hero-h: 800px;
		--hero-pt: clamp(48px, 29.71px + 1.786vw, 64px);
		--hero-pb: clamp(48px, 29.71px + 1.786vw, 64px);

		/* спуск 1024 → 1200, дальше подхватывает десктопная доля */
		--fs-h1: clamp(58.805px, 203.316px - 12.0426vw, 80px);     /* 80 → 58.8 */
		--fs-h2: clamp(39.204px, 44.6312px - 0.4523vw, 40px);      /* 40 → 39.2 */
		--fs-body: clamp(14px, 41.2727px - 2.2727vw, 18px);        /* 18 → 14 */
		--fs-caption: clamp(19.602px, 49.5883px - 2.4989vw, 24px); /* 24 → 19.6 */

		--gap-tagline: clamp(14.702px, 23.552px - 0.7375vw, 16px); /* 16 → 14.7 */
		--gap-tags: clamp(22.052px, 89.879px - 5.6523vw, 32px);    /* 32 → 22.1 */
		--tag-gap: clamp(14.702px, 23.552px - 0.7375vw, 16px);     /* 16 → 14.7 */
		--logo-footer: clamp(75.96px, 212.597px - 11.3864vw, 96px); /* 96 → 76 */

		--logo-w: clamp(64px, 45.71px + 1.786vw, 80px);     /* 64 → 80 */
		--gap-section: clamp(60px, 18.86px + 4.018vw, 96px); /* 60 → 96 */
	}
}

/* Десктоп (≥1200): весь текст задаётся долей ширины КОНТЕЙНЕРА, подобранной
   так, что на 1920 выходят значения макета: H1 96, текст 20, подписи 32.

   Потолков в px здесь нет намеренно: при отдалении страницы (зум 50%, 30%)
   вьюпорт в CSS-пикселях вырастает в разы, и любое значение с потолком
   замирает, пока картинки продолжают тянуться — текст визуально схлопывается.
   Поэтому одна и та же доля работает и на 1200, и на 4K.

   Единственная нижняя граница — 14px у мелкого текста: чистая доля дала бы
   на 1200 всего 12.3px. Граница держится примерно до 1360px.

   Первый блок — доли экрана: фолбэк для браузеров без контейнерных единиц
   (Safari до 16, Chrome до 105, Firefox до 110). На 1920 значения те же,
   на других ширинах расхождение в пределах полутора процентов. */
@media (min-width: 1200px) {
	:root {
		--cols: 12;

		--fs-h1: 5vw;                     /* 96 @1920 */
		--fs-h2: 3.3333vw;                /* 64 @1920 */
		--fs-body: max(14px, 1.0417vw);   /* 20 @1920 */
		--fs-caption: 1.6667vw;           /* 32 @1920 */
		--logo-footer: 6.4583vw;          /* 124 @1920 */

		--gap-tagline: 1.25vw;            /* 24 @1920 */
		--gap-tags: 1.875vw;              /* 36 @1920 */
		--tag-gap: 1.25vw;                /* 24 @1920 */
	}
}

/* Зачем контейнер, а не вьюпорт: cqw считается от реальной ширины блока,
   поэтому кегль привязан к тому же, к чему и картинки, и не зависит от того,
   как конкретный браузер пересчитывает вьюпорт при масштабировании. */
@supports (font-size: 1cqw) {
	@media (min-width: 1200px) {
		:root {
			--fs-h1: 5.3571cqw;               /* 96 @1920 */
			--fs-h2: 3.5714cqw;               /* 64 @1920 */
			--fs-body: max(14px, 1.1161cqw);  /* 20 @1920 */
			--fs-caption: 1.7857cqw;          /* 32 @1920 */
			--logo-footer: 6.9196cqw;         /* 124 @1920 */

			--gap-tagline: 1.3393cqw;         /* 24 @1920 */
			--gap-tags: 2.0089cqw;            /* 36 @1920 */
			--tag-gap: 1.3393cqw;             /* 24 @1920 */
		}
	}
}

/* Шире 1920: остальная геометрия тоже переходит на доли экрана — по той же
   причине, что и кегли выше. Все доли на 1920 дают значения макета,
   поэтому переход с клампов на доли проходит незаметно. */
@media (min-width: 1920px) {
	:root {
		--margin: 3.3333vw;    /* 64 @1920 */
		--gutter: 1.6667vw;    /* 32 @1920 */

		--hero-pt: 3.3333vw;   /* 64 @1920 */
		--hero-pb: 3.3333vw;   /* 64 @1920 */
		--logo-w: 4.1667vw;    /* 80 @1920 */

		--gap-section: 5vw;    /* 96 @1920 */
	}
}

/* svh вместо vh там, где поддерживается: на мобильных это высота экрана
   при развёрнутой адресной строке, поэтому hero не «прыгает» при скролле. */
@supports (height: 100svh) {
	:root { --hero-vh: 100svh; }
}


/* =========================================================================
   Reset
   ========================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
figure {
	margin: 0;
	padding: 0;
}

ul { list-style: none; }

img,
svg { display: block; max-width: 100%; }

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

body {
	min-height: 100vh;
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: "Onest", Arial, Helvetica, sans-serif;
	font-weight: 400;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

:where(a, button, [tabindex]):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: 2px;
}


/* =========================================================================
   Контейнер сетки
   ========================================================================= */

/* Ширину не ограничиваем: hero тянется на весь экран, поля задаёт --margin.
   Для будущих секций с длинным текстом добавим отдельный узкий враппер. */
.container {
	width: 100%;
	padding-inline: var(--margin);
}


/* =========================================================================
   Hero
   ========================================================================= */

/* Мобилка и планшет: высота по макету, но никогда выше экрана — иначе
   на невысоких окнах нижний блок с названием уезжает за первый экран.
   Уменьшение высоты здесь безопасно: контейнер становится «шире» по
   пропорции и фото 2.4:1 обрезается по бокам меньше. */
.hero {
	position: relative;
	display: flex;
	min-height: min(var(--hero-h), var(--hero-vh));
	background: var(--color-hero-bg);
	color: var(--color-on-hero);
	overflow: hidden;
	isolation: isolate;
}

/* Фото: cover, выровнено по центру контейнера */
.hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Десктоп: hero занимает ровно первый экран. 560px — нижняя граница,
   чтобы контент не схлопывался в очень низком окне. */
@media (min-width: 1200px) {
	.hero { min-height: max(560px, var(--hero-vh)); }
}

.hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-block: var(--hero-pt) var(--hero-pb);
	container-type: inline-size; /* точка отсчёта для кегля текста hero */
}


/* --- Верхняя строка: логотип + переключатель языка --------------------- */

.hero__bar {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: start;
	column-gap: var(--gutter);
}

.hero__logo {
	grid-column: 1;
	justify-self: start;
	width: var(--logo-w);
	flex: none;
}

.hero__logo img {
	width: 100%;
	height: auto;
	filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.25));
}

.lang {
	grid-column: 3;
	justify-self: end;
	position: relative;
}


/* --- Контентный блок, прижат к низу ------------------------------------ */

.hero__content {
	margin-top: auto;
	text-align: center;
}

.hero__tagline {
	margin-bottom: var(--gap-tagline);
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.2;
	text-shadow: var(--text-shadow);
}

/* Название всегда в одну строку. На экранах уже 402px кегль дополнительно
   ограничивается шириной контейнера: 7.1 — отношение ширины строки
   «JUJIN STUDIO» к кеглю (с запасом под запасной Arial). */
.hero__title {
	margin-bottom: var(--gap-tags);
	font-size: min(var(--fs-h1), calc((100vw - var(--margin) * 2) / 7.1));
	font-size: min(var(--fs-h1), calc(100cqw / 7.1));
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	text-shadow: var(--text-shadow);
}


/* --- Декоративная строка: Эмоции — Настроения — Состояния --------------
   Сетка 1fr auto 1fr удерживает «Настроения» строго по центру контейнера,
   а линии внутри боковых ячеек забирают всю оставшуюся ширину.
   ----------------------------------------------------------------------- */

.hero__tags {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: var(--tag-gap);
}

.hero__tags-side {
	display: flex;
	align-items: center;
	gap: var(--tag-gap);
	min-width: 0;
}

.hero__tag {
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-shadow: var(--text-shadow);
	cursor: default;
	user-select: none;
}

.hero__rule {
	flex: 1 1 0;
	min-width: 8px;
	height: 1px;
	background: currentColor;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
}


/* =========================================================================
   Галерея

   Все размеры плиток — целое число колонок сетки:
     4 колонки = 576px, 6 колонок = 880px, 8 колонок = 1184px (при 1920).
   Высоты не задаются явно: у каждой плитки свой aspect-ratio, подобранный
   так, что соседи в ряду дают одинаковую высоту на любой ширине экрана.
   ========================================================================= */

.gallery-section {
	padding-top: var(--gap-section);
}

.gallery {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gutter);
	container-type: inline-size; /* точка отсчёта для кегля подписей, см. ниже */
}

.tile {
	position: relative;
	overflow: hidden;
	background: #eceae8;
	aspect-ratio: var(--ar, 880 / 576);
}

.tile__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.4s ease;
}

/* Только там, где есть настоящее наведение: на тач-экранах :hover
   залипает после тапа. Длительность гасится общим правилом
   prefers-reduced-motion в конце файла. */
@media (hover: hover) {
	.tile:hover .tile__img { transform: scale(1.03); }
}

.tile__caption {
	position: absolute;
	left: var(--gutter);
	bottom: var(--gutter);
	color: var(--color-on-hero);
	font-size: var(--fs-caption);
	font-weight: 600;
	line-height: 1.2;
	text-shadow: var(--text-shadow);
}

/* --- Мобилка: одна колонка ---------------------------------------------
   Селекторы во всех брейкпоинтах одинаковой специфичности,
   поэтому переопределение решается порядком в файле.
   ----------------------------------------------------------------------- */

.gallery > :nth-child(1),
.gallery > :nth-child(2),
.gallery > :nth-child(5),
.gallery > :nth-child(7) { --ar: 880 / 576 }

.gallery > :nth-child(3),
.gallery > :nth-child(6) { --ar: 1184 / 576 }

.gallery > :nth-child(4),
.gallery > :nth-child(8) { --ar: 1 }

/* --- Планшет: две колонки, «Слушать» на два ряда ------------------------ */

@media (min-width: 768px) {
	.gallery { grid-template-columns: repeat(2, 1fr); }

	.gallery > :nth-child(1),
	.gallery > :nth-child(2),
	.gallery > :nth-child(5),
	.gallery > :nth-child(6),
	.gallery > :nth-child(7),
	.gallery > :nth-child(8) { --ar: 1 }

	.gallery > :nth-child(3) { --ar: 928 / 452; grid-column: span 2 }

	/* высоту задают соседние ряды справа — своё соотношение не нужно */
	.gallery > :nth-child(4) { --ar: auto; grid-row: span 2 }
}

/* --- Десктоп: 12 колонок ------------------------------------------------ */

@media (min-width: 1200px) {
	.gallery { grid-template-columns: repeat(12, 1fr); }

	.gallery > :nth-child(1),
	.gallery > :nth-child(2),
	.gallery > :nth-child(7),
	.gallery > :nth-child(8) { --ar: 880 / 576; grid-column: span 6 }

	/* В рядах из плиток разной ширины высоту задаёт широкая плитка,
	   узкая тянется по ряду. Иначе на промежуточных ширинах высоты
	   расходятся: гаттер меняется не пропорционально колонке, и
	   отношение «8 колонок / 4 колонки» перестаёт быть постоянным. */
	.gallery > :nth-child(3) { --ar: 1184 / 880; grid-column: span 8; grid-row: auto }
	.gallery > :nth-child(4) { --ar: auto;       grid-column: span 4; grid-row: auto }
	.gallery > :nth-child(5) { --ar: auto;       grid-column: span 4 }
	.gallery > :nth-child(6) { --ar: 1184 / 576; grid-column: span 8 }
}


/* =========================================================================
   Блок «Эмоции продлятся долго»

   Фото шириной в контейнер, высотой с плитку «Искать» в галерее.
   Пропорция кадра всегда не шире исходника (3584×1152 = 3.111), поэтому
   object-fit никогда не режет верх и низ — только правый край.
   ========================================================================= */

.quality {
	padding-top: var(--gap-section);
}

.quality__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 4; /* мобилка */
	background: #e9e7e4;
	container-type: inline-size; /* точка отсчёта для кегля текста */
}

.quality__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}

/* Отступ сверху — доля от высоты кадра, а не фикс. Кадр 3:4 растёт вместе
   с шириной экрана, и фиксированные 136px на широких телефонах (500–700px)
   уезжали вверх, на шею модели. По вертикали фото не обрезается, поэтому
   доля держит текст на одном и том же месте кадра при любой ширине.
   27.6% высоты = те же 136px при ширине экрана 402. */
.quality__text {
	position: absolute;
	inset: 27.6% 16px 16px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	color: var(--color-ink);
}

.quality__body {
	display: flex;
	flex-direction: column;
	gap: var(--gutter);
}

.quality__title {
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.15;
	text-shadow: var(--text-shadow-light);
}

.quality__lead {
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.5;
	text-shadow: var(--text-shadow-light);
}

/* Планшет: текст в 3–4 колонках, по вертикали по центру */
@media (min-width: 768px) {
	.quality__frame { aspect-ratio: 928 / 452; }

	.quality__text {
		top: 0;
		bottom: 0;
		left: calc(50% + var(--gutter) / 2); /* начало 3-й из 4 колонок */
		right: 40px;
		justify-content: center;
	}
}

/* Десктоп: заголовок строго по центру экрана, абзац — по его левому краю */
@media (min-width: 1200px) {
	.quality__frame { aspect-ratio: 1792 / 576; }

	.quality__text {
		left: 0;
		right: 0;
		align-items: center;
	}

	/* Ширина абзаца равна ширине заголовка: колонка сетки тянется по
	   min-content, заголовок в одну строку задаёт её ширину, а абзац
	   переносится внутри — его длинное слово на ширину не влияет. */
	.quality__body {
		display: grid;
		grid-template-columns: min-content;
		row-gap: var(--gutter);
	}

	.quality__title { white-space: nowrap; }
}


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

   Логотип по центру, под ним ряд: копирайт у левого края, почта у правого,
   между ними линия во всю оставшуюся ширину — тот же приём, что у ряда
   «Эмоции — Настроения — Состояния» в обложке.

   Раскладка одна на все ширины. Раньше их было две (на мобилке — два
   столбца), потому что в подвале стояла ещё строка с названием юрлица
   и ряд с линией не помещался. Пунктов осталось два и оба короткие,
   поэтому ряд помещается даже на 320px: там на линию остаётся ~44px.
   ========================================================================= */

.footer {
	/* отступ от предыдущего блока — margin, а не padding: у подвала свой фон */
	margin-top: var(--gap-section);
	background: var(--color-ink);
	color: var(--color-on-hero);
	padding: clamp(40px, 34.83px + 1.286vw, 48px) 0; /* 40 @402 → 48 @1024 */
}

.footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center; /* центрирует логотип */
	gap: var(--gutter);
	container-type: inline-size; /* точка отсчёта для кегля и логотипа */
}

.footer__logo {
	width: var(--logo-footer);
	height: auto;
	flex: none;
}

/* stretch, а не width: 100% — иначе ряд унаследовал бы центрирование
   от .footer__inner и пункты не встали бы по углам */
.footer__row {
	align-self: stretch;
	display: flex;
	align-items: center;
	gap: var(--tag-gap);
}

.footer__item {
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}

.footer__rule {
	flex: 1 1 0;
	min-width: 8px;
	height: 1px;
	background: currentColor;
}

.footer__mail {
	color: inherit;
	text-decoration: none;
}

.footer__mail:hover { text-decoration: underline; }

@media (min-width: 1024px) {
	.footer { padding-block: var(--margin); }
}


/* =========================================================================
   Переключатель языка
   ========================================================================= */

.lang__toggle {
	display: inline-flex;
	align-items: center;
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-shadow: var(--text-shadow);
	transition: opacity 0.2s ease;
}

.lang__toggle:hover { opacity: 0.7; }

.lang__menu {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: 10;
	min-width: 168px;
	padding: 8px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 12px;
	background: rgba(17, 17, 17, 0.55);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
	animation: lang-in 0.16s ease-out;

	/* У .hero стоит overflow: hidden, поэтому список, не поместившийся
	   в обложку, был бы обрезан снизу — это видно на телефоне в альбомной
	   ориентации, где на всю обложку приходится 360px. Ограничиваем высоту
	   доступным местом и прокручиваем список внутри себя.
	   72px — кнопка языка плюс отступ до меню плюс запас снизу. */
	max-height: calc(min(var(--hero-h), var(--hero-vh)) - var(--hero-pt) - 72px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* display: none нужен явно — иначе любое display в .lang__menu
   перебьёт скрытие по атрибуту hidden */
.lang__menu[hidden] { display: none; }

.lang__list {
	display: grid;
	gap: 2px;
}

.lang__option {
	display: block;
	width: 100%;
	padding: 8px 12px;
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
	font-size: max(14px, calc(var(--fs-body) - 2px));
	font-weight: 500;
	line-height: 1.2;
	text-align: left;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}

.lang__option:hover,
.lang__option:focus-visible { background: rgba(255, 255, 255, 0.12); }

.lang__option[aria-current] { font-weight: 600; }

@keyframes lang-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}


/* =========================================================================
   404

   Своего макета у страницы нет — она собрана на тех же токенах, что и весь
   сайт, поэтому кегли и поля меняются с шириной экрана по общим правилам.
   ========================================================================= */

.notfound {
	display: flex;
	min-height: var(--hero-vh);
	color: var(--color-ink);
}

/* container-type — на блоке во всю ширину, а не на центрированном
   содержимом: с 1920 кегли считаются долей контейнера, а containment
   безопасен только там, где ширину задаёт родитель, а не текст внутри. */
.notfound__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--gap-tagline);
	padding-block: var(--hero-pt) var(--hero-pb);
	text-align: center;
	container-type: inline-size;
}

.notfound__code {
	font-size: var(--fs-h1);
	font-weight: 600;
	line-height: 1;
}

.notfound__title {
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.15;
}

.notfound__text {
	max-width: 46ch;
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.5;
}

/* 0.65, а не меньше: на белом это даёт контраст 4.7:1 — минимум,
   при котором мелкий текст остаётся читаемым */
.notfound__text--alt { opacity: 0.65; }

.notfound__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--gap-tags);
	min-height: 48px;
	padding-inline: clamp(24px, 16px + 2vw, 40px);
	border-radius: 8px;
	background: var(--color-ink);
	color: var(--color-bg);
	text-decoration: none;
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: 1.2;
	transition: opacity 0.2s ease;
}

.notfound__link:hover { opacity: 0.8; }

/* Общая обводка фокуса рисуется currentColor — на кнопке это белый,
   а вокруг неё белый фон, поэтому здесь цвет задаём явно */
.notfound__link:focus-visible { outline-color: var(--color-ink); }


@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}