/* Reset + типографические примитивы. Роли и значения — public/css/tokens.css. */

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

/* Обе канвы едут от ширины окна: вёрстка в rem, множитель на html — единственный.
   Мобильная канва 402 (10px ÷ 402px = 2.4876vw), десктопная 1728
   (10px ÷ 1728px = .5787vw). Так же устроен media226.ru, на который дала ссылку
   дизайнер, — потолка у мобильной канвы там нет, и у нас нет: на 979 корень
   вырастает до 24.4px. Потолок 10px только у десктопной — макет рисован под 1728,
   крупнее не растём. Нижней границы нет ни у одной: канва равна ширине окна ровно,
   любой пол выше vw-значения даёт горизонтальный скролл. */
html {
	font-size: 2.4876vw;
	-webkit-text-size-adjust: 100%;
}

@media (min-width: 980px) {
	html {
		font-size: min(.5787vw, 10px);
	}
}

/* lining-nums: у Lyon по умолчанию текстовые (минускульные) цифры — «5» ныряет
   под строку, «1» ростом с x-height. В макете цифры прописные, вровень с
   заглавными (`59:93` и остальные кадры), значит в Figma слою включён `lnum`.
   У Epos альтернативных цифр нет — правило на него не влияет. */
body {
	margin: 0;
	font-variant-numeric: lining-nums;
	background-color: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-text);
	font-weight: var(--font-weight);
	font-size: var(--t-paragraph-l-size);
	line-height: var(--t-paragraph-l-lh);
	text-rendering: optimizeLegibility;

	/* Только macOS/iOS: там умолчание — субпиксельное сглаживание, из-за него
	   Lyon и Epos выглядят плотнее, чем в Figma (замечание клиента про
	   «жирный шрифт» в Safari). В Windows и Linux свойства игнорируются. */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

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

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

a {
	color: inherit;
	text-underline-offset: .3rem;
}

:focus-visible {
	outline: 2px solid var(--color-brown);
	outline-offset: 2px;
}

/* ── Роли из макета ────────────────────────────────────────────────────────
   Классы названы по именам текст-стилей Figma. Блок берёт роль, а не кегль. */

.t-display-160 {
	font-family: var(--font-display);
	font-size: var(--t-display-160-size);
	line-height: var(--t-display-160-lh);
	letter-spacing: var(--t-display-160-ls);
}

.t-display-120 {
	font-family: var(--font-display);
	font-size: var(--t-display-120-size);
	line-height: var(--t-display-120-lh);
}

.t-display-80 {
	font-family: var(--font-display);
	font-size: var(--t-display-80-size);
	line-height: var(--t-display-80-lh);
}

.t-display-60 {
	font-family: var(--font-display);
	font-size: var(--t-display-60-size);
	line-height: var(--t-display-60-lh);
}

.t-display-50 {
	font-family: var(--font-display);
	font-size: var(--t-display-50-size);
	line-height: var(--t-display-50-lh);
}

.t-h3 {
	font-size: var(--t-h3-size);
	line-height: var(--t-h3-lh);
	letter-spacing: var(--t-h3-ls);
}

.t-h4 {
	font-size: var(--t-h4-size);
	line-height: var(--t-h4-lh);
}

.t-h4-loose {
	font-size: var(--t-h4-loose-size);
	line-height: var(--t-h4-loose-lh);
}

.t-lead {
	font-size: var(--t-lead-size);
	line-height: var(--t-lead-lh);
}

.t-menu {
	font-size: var(--t-menu-size);
	line-height: var(--t-menu-lh);
	letter-spacing: var(--t-menu-ls);
	font-variant-caps: small-caps;
}

.t-paragraph-l {
	font-size: var(--t-paragraph-l-size);
	line-height: var(--t-paragraph-l-lh);
}

.t-caption-l {
	font-size: var(--t-caption-l-size);
	line-height: var(--t-caption-l-lh);
	letter-spacing: var(--t-caption-l-ls);
}

.t-caption-m {
	font-size: var(--t-caption-m-size);
	line-height: var(--t-caption-m-lh);
	letter-spacing: var(--t-caption-m-ls);
}

.t-special {
	font-size: var(--t-special-size);
	line-height: var(--t-special-lh);
	letter-spacing: var(--t-special-ls);
	font-variant-caps: all-small-caps;
}

.t-caption-s {
	font-size: var(--t-caption-s-size);
	line-height: var(--t-caption-s-lh);
	letter-spacing: var(--t-caption-s-ls);
}

.t-caption-xs {
	font-size: var(--t-caption-xs-size);
	line-height: var(--t-caption-xs-lh);
	letter-spacing: var(--t-caption-xs-ls);
}

.t-numeral {
	font-size: var(--t-numeral-size);
	line-height: var(--t-numeral-lh);
}

/* Умолчания элементов: только те роли, что подтверждены на обоих кадрах.
   Обложечные Display/160 и Display/120 ставит блок, не элемент — мобильный
   кегль титульного блока в кэше не снят (429 на 141:1029). */

/* Начертание в макете одно (--font-weight), а браузер по умолчанию даёт
   заголовкам bold — ни у Epos, ни у Lyon жирного файла нет, и вместо него
   рисуется синтетический. Гасим здесь, чтобы не повторять в каждом блоке. */
h1,
h2,
h3,
h4 {
	font-weight: var(--font-weight);
}

h1 {
	font-family: var(--font-display);
	font-size: var(--t-display-80-size);
	line-height: var(--t-display-80-lh);
}

h2 {
	font-family: var(--font-display);
	font-size: var(--t-display-60-size);
	line-height: var(--t-display-60-lh);
}

h3 {
	font-size: var(--t-h3-size);
	line-height: var(--t-h3-lh);
	letter-spacing: var(--t-h3-ls);
}

h4 {
	font-size: var(--t-h4-size);
	line-height: var(--t-h4-lh);
}

blockquote {
	font-size: var(--t-h3-size);
	line-height: var(--t-h3-lh);
	letter-spacing: var(--t-h3-ls);
}