/*
 * Брейкпоинты: desktop-first, три фиксированных набора значений (1920 / 1360 / 360).
 * База — десктоп, затем @media (max-width: 1360px) — таблет, @media (max-width: 480px) — мобайл.
 */

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

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../assets/fonts/inter-latin-400.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: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../assets/fonts/inter-cyrillic-500.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../assets/fonts/inter-latin-500.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: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../assets/fonts/inter-cyrillic-600.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../assets/fonts/inter-latin-600.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: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../assets/fonts/inter-cyrillic-700.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../assets/fonts/inter-latin-700.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;
}

/*
 * Fluid rem: корень в vw, 1rem = 10px ровно на трёх design-опорах
 * (1920 / 1360 / 360 — единственные ширины, где есть точный Figma).
 * Между 1360 и 480 (то есть и на 1024, и на 768 тоже) масштаб тянется
 * непрерывно тем же набором rem-значений, что и у 1360 — отдельного
 * пересчёта корня на этих порогах нет.
 */
html {
	font-size: 0.5208vw; /* 1rem = 10px на 1920 */
}

@media (max-width: 1360px) {
	html {
		font-size: 0.7353vw; /* 1rem = 10px на 1360 */
	}
}

@media (max-width: 480px) {
	html {
		font-size: 2.7778vw; /* 1rem = 10px на 360 (опорная ширина мобильного дизайна, не на 480) */
	}
}

body {
	font-family: var(--font-family-base);
	font-weight: 400;
	color: var(--color-black);
	background-color: var(--color-white);
	caret-color: transparent;
	-webkit-font-smoothing: antialiased;
	/* На body, не на html: overflow-x:hidden на html делает html скролл-контейнером
	   (в паре с вынужденным overflow-y:auto — нельзя запретить одну ось и оставить
	   другую visible), а это ломает position:sticky при глубокой прокрутке — элемент
	   перестаёт «прилипать» после некоторой точки. На body overflow-x:hidden убирает
	   горизонтальный скролл от .header__mobile-menu (стоит за экраном через
	   translate:100%, но раздувает scrollWidth) тем же способом за счёт классического
	   проброса overflow с body на вьюпорт, но html остаётся с overflow:visible
	   по умолчанию — sticky работает как обычно. */
	overflow-x: hidden;
	/* длинные неразрывные русские слова (юридические/технические термины) в заголовках
	   на узких экранах шире контейнера, а браузер по умолчанию не переносит их
	   посимвольно — из-за этого раздувался scrollWidth страницы */
	overflow-wrap: break-word;
}

input,
textarea,
[contenteditable="true"] {
	caret-color: auto;
}

body.menu-open {
	overflow: hidden;
}

/* Типографика */

.hero-xl {
	font-size: 8rem;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0;
}

@media (max-width: 1360px) {
	.hero-xl {
		font-size: 7rem;
	}
}

@media (max-width: 480px) {
	.hero-xl {
		font-size: 4rem;
	}
}

.h1 {
	font-size: 6rem;
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: 0;
}

@media (max-width: 1360px) {
	.h1 {
		font-size: 4.8rem;
	}
}

@media (max-width: 480px) {
	.h1 {
		font-size: 3.2rem;
	}
}

.h2 {
	font-size: 4rem;
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: 0;
}

@media (max-width: 1360px) {
	.h2 {
		font-size: 3rem;
	}
}

@media (max-width: 480px) {
	.h2 {
		font-size: 2.5rem;
	}
}

.h3 {
	font-size: 3rem;
	line-height: 1;
	font-weight: 500;
	letter-spacing: 0;
}

@media (max-width: 1360px) {
	.h3 {
		font-size: 2.4rem;
	}
}

@media (max-width: 480px) {
	.h3 {
		font-size: 2rem;
		line-height: 1.1;
	}
}

.h4 {
	font-size: 2rem;
	line-height: 1.3;
	font-weight: 500;
}

@media (max-width: 1360px) {
	.h4 {
		font-size: 1.8rem;
	}
}

@media (max-width: 480px) {
	.h4 {
		font-size: 1.6rem;
	}
}

.text-big {
	font-size: 2.5rem;
	line-height: 1.4;
	font-weight: 400;
}

@media (max-width: 1360px) {
	.text-big {
		font-size: 2rem;
	}
}

.text-medium {
	font-size: 1.8rem;
	line-height: 1.4;
	font-weight: 400;
}

@media (max-width: 1360px) {
	.text-medium {
		font-size: 1.6rem;
	}
}

.text-small {
	font-size: 1.6rem;
	line-height: 1.5;
	font-weight: 400;
}

@media (max-width: 1360px) {
	.text-small {
		font-size: 1.4rem;
	}
}

.text-mini {
	font-size: 1.4rem;
	line-height: 1.5;
	font-weight: 400;
}

@media (max-width: 1360px) {
	.text-mini {
		font-size: 1.2rem;
	}
}

.menu-item {
	font-size: 1.2rem;
	line-height: 1;
	font-weight: 600;
	text-transform: uppercase;
}

.kicker {
	font-size: 1.2rem;
	line-height: 1.4;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08rem;
	color: var(--color-accent);
}

.link-label {
	font-size: 2rem;
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: 0;
}