/* ===========================================================================
   base.css — @font-face, reset, типографика по умолчанию, ссылки, медиа.
   TASKS P4-1 и P4-3, правила фолбэков — DESIGN §10.

   Второй в каскаде, сразу после tokens.css. Здесь нет ни одной раскладки:
   всё, что про шапку, колонки и подвал, живёт в layout.css.

   Reset намеренно короткий и свой, без normalize.css: из нормализации нам
   нужны четыре строки (box-sizing, margin у body, медиа, наследование
   шрифта формами), а остальные полторы тысячи описывают браузеры, которых
   нет даже в ярусе B.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Шрифты. Скачаны локально (public/assets/fonts), Google Fonts из проекта
   убран совсем: сторонний домен в критическом пути рендера, лишний DNS+TLS,
   запись в CSP и IP посетителя третьей стороне.

   Файлов меньше, чем правил: Exo 2 у Google — переменный шрифт, на 600, 800
   и 900 отдаётся один и тот же woff2 (имя с `-var-`), а вес зажимается
   дескриптором font-weight. Браузер скачает такой URL один раз.

   Сабсеты только latin и latin-ext, интерфейс английский. unicode-range
   оставлен: без него браузер тянул бы latin-ext всегда, а он нужен на
   считанные символы.
   --------------------------------------------------------------------------- */

/* --- @font-face: сгенерировано tools/fetch-fonts.sh, руками не править --- */
@font-face {
    font-family: 'Exo 2';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/exo2-var-italic-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;
}
@font-face {
    font-family: 'Exo 2';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/exo2-var-italic-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: 'Exo 2';
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url(../fonts/exo2-var-italic-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;
}
@font-face {
    font-family: 'Exo 2';
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url(../fonts/exo2-var-italic-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: 'Exo 2';
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/exo2-var-italic-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;
}
@font-face {
    font-family: 'Exo 2';
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/exo2-var-italic-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: 'Exo 2';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/exo2-var-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;
}
@font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/exo2-var-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: 'Exo 2';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(../fonts/exo2-var-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;
}
@font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(../fonts/exo2-var-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: 'Exo 2';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/exo2-var-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;
}
@font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/exo2-var-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: 'Titillium Web';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/titillium-400-italic-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;
}
@font-face {
    font-family: 'Titillium Web';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/titillium-400-italic-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: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/titillium-400-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;
}
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/titillium-400-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: 'Titillium Web';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/titillium-600-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;
}
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/titillium-600-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: 'Titillium Web';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/titillium-700-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;
}
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/titillium-700-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;
}
/* --- конец сгенерированного блока --- */

/* ---------------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------------- */

/* DESIGN §10 п.14: одна из трёх строк, гарантирующих отсутствие
   горизонтального скролла на телефоне. Явно, а не наследованием от html:
   inherit не сработал бы для элементов внутри shadow-дерева форм. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* iOS Safari в горизонтальной ориентации иначе увеличивает шрифт сам */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    /* Плавность для панели «JUMP TO» — она собрана из ссылок-якорей, а не
       из кнопок с JS (TASKS P3-3). Браузер без поддержки прыгнет сразу,
       и это нормальное поведение якоря. */
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    margin: 0;
    min-height: 100vh;

    font-family: 'Titillium Web', Tahoma, 'Segoe UI', sans-serif;
    font-family: var(--f-body);
    font-size: 16px;
    font-size: var(--fs-body);
    line-height: 1.65;
    line-height: var(--lh-body);
    color: #10284a;
    color: var(--c-ink);

    /* Только цвет: текстуры фона страницы ставит layout.css. Цвет здесь для
       того, чтобы при неподъехавшем layout.css страница осталась в палитре,
       а не стала белой. */
    background-color: #1ea7f2;
    background-color: var(--c-page-0);

    /* Вторая из трёх строк §10 п.14. word-wrap — то же свойство под старым
       именем, нужно старому Safari и IE. */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Заголовки и блоки без своих отступов: все они в шаблонах имеют класс и
   получают отступы от layout/components/content. Размер и вес оставляем
   браузерные — заголовок без класса должен остаться заголовком. */
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
dd,
figure,
blockquote,
pre {
    margin: 0;
}

/* Titillium есть в 700; без этой строки вложенный <strong> получил бы
   «bolder» и уехал в 900, которого у Titillium нет вовсе. */
b,
strong {
    font-weight: 700;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

code,
kbd,
samp,
pre {
    font-family: Consolas, 'Courier New', monospace;
    font-family: var(--f-mono);
    font-size: 1em;
}

/* ---------------------------------------------------------------------------
   Ссылки. Подчёркивание приглушённое, при наведении — красное: так в
   прототипе, и так видно, что ссылка «живая», без смены раскладки.
   --------------------------------------------------------------------------- */

a {
    color: #0a66c2;
    color: var(--c-link);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(10, 102, 194, .35);
    text-decoration-color: var(--c-link-rule);
    /* Chrome 83 (нижняя граница яруса A) свойства не знает — отвалится
       ровно подчёркивание вплотную к тексту, и ничего больше. */
    text-underline-offset: 3px;
}

a:hover,
a:focus {
    color: #e4262c;
    color: var(--c-link-hover);
    text-decoration-color: #e4262c;
    text-decoration-color: var(--c-link-hover);
}

/* ---------------------------------------------------------------------------
   Медиа. Третья строка §10 п.14: картинка шире колонки не растягивает
   страницу. height:auto нужен в паре с max-width, иначе width/height из
   атрибутов (они проставлены у каждого <img> — P3-2) сплющат картинку.
   Блокам, которым нужен фиксированный размер — маскотам в подвале, арту
   в шапке, — его задаёт layout.css, он идёт следом и перебивает.
   --------------------------------------------------------------------------- */

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

img,
svg,
video {
    height: auto;
}

img {
    border: 0;
}

/* ---------------------------------------------------------------------------
   Формы. Шрифт в контролах не наследуется сам ни в одном браузере.
   --------------------------------------------------------------------------- */

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.2;
    color: inherit;
    margin: 0;
}

input,
textarea,
select {
    background-color: #ffffff;
    background-color: var(--c-surface);
}

/* Firefox рисует внутреннюю рамку у кнопки в фокусе поверх нашей */
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/* Safari не считает кнопку кликабельной без этого, а textarea по умолчанию
   тянется в обе стороны и ломает карточку */
button,
[type='button'],
[type='submit'] {
    cursor: pointer;
    text-transform: none;
    -webkit-appearance: button;
}

textarea {
    resize: vertical;
}