/* Ingliism — оформление сайта.
 * Общие правила идут первыми, адаптация для узких экранов — в конце.
 * Основные цвета можно изменить в :root.
 */

/* Палитра сайта: переменные используются через var(--имя). */
:root {
    --paper: #f4f0e7;
    --ink: #263d37;
    --muted: #68716a;
    --line: #d4d8ca;
    --gold: #a68048
}

/* Включаем внутренние отступы и рамки в ширину и высоту элементов. */
* {
    box-sizing: border-box
}

/* Основной фон, цвет текста, шрифт и межстрочный интервал. */
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 16px/1.65 system-ui,sans-serif
}

/* Наследование шрифта для кнопок, ссылок и полей ввода. */
button,a,input {
    font: inherit
}

/* Ссылки наследуют цвет текста; убираем стандартное подчёркивание. */
a {
    color: inherit;
    text-decoration: none
}

/* Курсор в виде руки для кнопок. */
button {
    cursor: pointer
}

/* Шапка сайта: логотип, меню и языки в одной строке. */
header {
    max-width: 1320px;
    margin: auto;
    padding: 25px 5%;
    display: flex;
    align-items: center;
    gap: 40px;
    border-bottom: 1px solid var(--line)
}

/* Текстовый логотип. */
.brand {
    font: 30px Georgia,serif;
    letter-spacing: 2px
}

/* Золотистый акцент логотипа. */
.brand span {
    color: var(--gold)
}

/* Горизонтальное меню, сдвинутое вправо через margin-left: auto. */
nav {
    display: flex;
    gap: 28px;
    margin-left: auto
}

/* Размер текста пунктов меню. */
nav a {
    font-size: 13px
}

/* Цвет пункта при наведении и для текущего раздела. */
nav a:hover,nav a[aria-current] {
    color: var(--gold)
}

/* Переключатель языков с разделителем слева. */
.languages {
    display: flex;
    border-left: 1px solid var(--line);
    padding-left: 22px;
    gap: 8px
}

/* Кнопки языков без стандартного фона и рамок. */
.languages button {
    border: 0;
    background: none;
    color: var(--muted);
    padding: 3px
}

/* Подчёркивание выбранного языка. */
.languages button.active {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 6px
}

/* Основной контейнер с ограничением ширины и боковыми отступами. */
main {
    max-width: 1180px;
    margin: auto;
    padding: 0 28px
}

/* Первый экран: две колонки для текста и пейзажа в пропорции 1.1 к 1. */
.hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: center;
    padding: 78px 0 65px
}

/* Небольшая подпись над заголовком с увеличенным интервалом между буквами. */
.eyebrow {
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600
}

/* Главный заголовок. clamp меняет размер от 44px до 73px в зависимости от ширины окна. */
h1 {
    font: clamp(44px,5.5vw,73px)/1.08 Georgia,serif;
    letter-spacing: -2px;
    margin: 22px 0
}

/* Цветовой акцент в главном заголовке. */
h1 em {
    font-weight: normal;
    color: #6e816b
}

/* Вводный абзац с ограничением ширины строки. */
p.intro {
    color: var(--muted);
    max-width: 450px;
    font-size: 16px
}

/* Основная ссылка, оформленная как кнопка. */
.primary {
    display: inline-block;
    background: var(--ink);
    color: #fff;
    padding: 13px 23px;
    margin-top: 20px;
    font-size: 13px
}

/* Фон основной кнопки при наведении. */
.primary:hover {
    background: #415d50
}

/* Арочный контейнер пейзажа. overflow скрывает выступающие части холмов. */
.art {
    height: 390px;
    position: relative;
    overflow: hidden;
    border-radius: 48% 48% 3px 3px;
    background: #e7e8d9;
    border: 1px solid #d6dacb
}

/* Внутренняя рамка пейзажа через псевдоэлемент, без дополнительного HTML. */
.art:before {
    content: '';
    position: absolute;
    inset: 23px;
    border: 1px solid #bfc9b7;
    border-radius: 48% 48% 0 0
}

/* Солнце: круг с абсолютным позиционированием внутри пейзажа. */
.sun {
    position: absolute;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: #d2b784;
    top: 80px;
    left: calc(50% - 52px)
}

/* Базовый холм: повёрнутый овал, частично скрытый контейнером. */
.hill {
    position: absolute;
    width: 700px;
    height: 320px;
    border-radius: 50%;
    bottom: -220px;
    left: -220px;
    background: #687d64;
    transform: rotate(20deg)
}

/* Положение, цвет и наклон второго холма. */
.hill.second {
    bottom: -180px;
    left: 60px;
    background: #9aaa87;
    transform: rotate(-20deg)
}

/* Тёмный холм на переднем плане. */
.hill.third {
    bottom: -235px;
    left: -80px;
    background: #344f43;
    transform: rotate(-8deg)
}

/* Подпись поверх холмов. z-index задаёт порядок наложения. */
.art-label {
    position: absolute;
    bottom: 28px;
    left: 0;
    right: 0;
    text-align: center;
    font: italic 18px Georgia;
    color: #f2efe4;
    z-index: 2
}

/* Заголовок библиотеки и поиск по разным краям строки. */
.section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    padding: 32px 0 23px;
    border-top: 1px solid var(--line)
}

/* Базовый стиль заголовков разделов. */
h2 {
    font: 36px/1.2 Georgia,serif;
    margin: 8px 0
}

/* Небольшой поясняющий текст. */
.small {
    font-size: 13px;
    color: var(--muted)
}

/* Поиск: прозрачный фон и нижняя линия вместо полной рамки. */
.search {
    border: 0;
    border-bottom: 1px solid #a9b5a3;
    background: transparent;
    padding: 9px 0;
    width: 220px;
    color: var(--ink);
    border-radius: 0
}

/* Сетка статей: три равные колонки. */
.grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 28px
}

/* Карточка статьи с верхней разделительной линией. */
.card {
    display: block;
    padding: 27px 0 25px;
    border-top: 2px solid #9cae93
}

/* Порядковый номер статьи в карточке. */
.card .num {
    font: italic 30px Georgia;
    color: #9aab91
}

/* Заголовок карточки. */
.card h3 {
    font: 26px/1.2 Georgia;
    margin: 20px 0 12px
}

/* Описание: минимальная высота помогает выровнять ссылки в карточках. */
.card p {
    font-size: 14px;
    color: var(--muted);
    min-height: 70px
}

/* Подпись перехода к статье. */
.card .read {
    font-size: 12px;
    color: var(--ink)
}

/* Подчёркивание заголовка при наведении на карточку. */
.card:hover h3 {
    text-decoration: underline;
    text-underline-offset: 5px
}

/* Блок «О проекте»: заголовок и описание в двух колонках. */
.about {
    margin: 40px 0 60px;
    padding: 35px 40px;
    background: #e7e9dd;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px
}

/* Описание проекта. */
.about p {
    margin: 0;
    color: var(--muted);
    font-size: 14px
}

/* Размер и отступы заголовка блока «О проекте». */
.about h2 {
    margin: 0;
    font-size: 28px
}

/* Отметка о демонстрационном содержимом. */
.demo {
    font-size: 11px;
    letter-spacing: .5px;
    border: 1px solid #b4bea9;
    padding: 4px 9px;
    display: inline-block;
    margin-top: 15px
}

/* Подвал сайта с верхней линией и подписями по краям. */
footer {
    border-top: 1px solid var(--line);
    max-width: 1180px;
    margin: auto;
    padding: 24px 28px 35px;
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 11px;
    gap: 20px
}

/* Открытая статья: узкая колонка для удобного чтения. */
.article {
    max-width: 730px;
    margin: 55px auto 85px
}

/* Главный заголовок открытой статьи. */
.article h1 {
    font-size: 52px
}

/* Подзаголовки статьи с отступом сверху. */
.article h2 {
    font-size: 29px;
    margin-top: 32px
}

/* Цвет текста статьи. */
.article p {
    color: #526058
}

/* Ссылка возврата к библиотеке. */
.back {
    border: 0;
    background: transparent;
    color: var(--gold);
    padding: 0
}

/* Сообщение об отсутствии результатов поиска. */
.empty {
    padding: 30px 0;
    color: var(--muted)
}

/* Рамка фокуса для навигации, например клавишей Tab. */
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 5px
}

/* Скрытие элементов с атрибутом hidden, в том числе результатов фильтрации. */
[hidden] {
    display: none!important
}

/* Телефоны, небольшие планшеты и окна шириной до 800px включительно. */
@media (max-width: 800px) {
    /* Перенос элементов шапки на несколько строк. */
    header {
        gap: 15px;
        flex-wrap: wrap
    }

    /* Уменьшение логотипа. */
    .brand {
        font-size: 25px
    }

    /* Меню занимает отдельную строку на всю ширину. */
    nav {
        order: 3;
        width: 100%;
        justify-content: space-between;
        gap: 10px
    }

    /* Уменьшение текста меню. */
    nav a {
        font-size: 12px
    }

    /* Переключатель языка сдвигается вправо. */
    .languages {
        margin-left: auto
    }

    /* Текст и пейзаж располагаются в одну колонку. */
    .hero {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-top: 42px
    }

    /* Уменьшение высоты пейзажа и центрирование. */
    .art {
        height: 280px;
        max-width: 500px;
        width: 100%;
        margin: auto
    }

    /* Карточки статей в одну колонку. */
    .grid {
        grid-template-columns: 1fr
    }

    /* Отмена минимальной высоты описания карточки. */
    .card p {
        min-height: 0
    }

    /* Поле поиска под заголовком библиотеки. */
    .section-head {
        align-items: start;
        flex-direction: column
    }

    /* Поиск на всю ширину. */
    .search {
        width: 100%
    }

    /* Блок «О проекте» в одну колонку. */
    .about {
        grid-template-columns: 1fr;
        padding: 25px;
        gap: 15px
    }

    /* Уменьшение заголовка статьи. */
    .article h1 {
        font-size: 40px
    }

    /* Подписи подвала друг под другом. */
    footer {
        flex-direction: column;
        gap: 6px
    }
}