/* ==========================================================================
   Редизайн benderovska.com
   Макет: Figma «Art Gallery» — главная 3714:469, мобильная 3705:2.

   Файл подключается ПОСЛЕ style.min.css и перекрывает его правила.
   Правьте только этот файл: style.min.css минифицирован, а SCSS-исходники
   проекта мертвы (docs/LOCAL-SETUP.md). Классы редизайна — с префиксом rd-,
   существующие классы вёрстки переопределяются по имени.

   Этап A (03.09.2026) — шапка и подвал.
   ========================================================================== */

:root{
    --rd-beige:#edd7b6;          /* шапка, заливка светлой кнопки */
    --rd-cream:#fbf6e9;          /* фон чётных секций */
    --rd-dark:#31323b;           /* подвал */
    --rd-wine:#431819;           /* тёмная кнопка первого экрана */
    --rd-ink:#000;
    --rd-container:1620px;       /* поля 150px при ширине макета 1920 */
    --rd-sans:"ProximaNova",Arial,Helvetica,sans-serif;
    --rd-serif:"LovelaceText-Medium","Times New Roman",serif;
}

/* --------------------------------------------------------------------------
   Кнопка макета: прямоугольник с рамкой 2px, текст в верхнем регистре.
   Модификаторы: --fill (заливка бежевым), --dark (тёмная, светлый текст).
   -------------------------------------------------------------------------- */
.rd-btn{
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-align:center;-ms-flex-align:center;align-items:center;
    -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
    min-width:250px;width:auto;max-width:none;height:60px;
    margin:0;padding:0 16px;border-radius:0;
    font-family:var(--rd-sans);font-size:20px;line-height:1;font-weight:400;
    text-transform:uppercase;text-align:center;color:var(--rd-ink);
    background:transparent;border:2px solid var(--rd-ink);
    cursor:pointer;
    -webkit-transition:.25s all ease-in-out;-o-transition:.25s all ease-in-out;transition:.25s all ease-in-out;
}
.rd-btn:hover{background:var(--rd-ink);color:var(--rd-beige)}
.rd-btn--fill{background:var(--rd-beige);border-color:var(--rd-beige)}
.rd-btn--fill:hover{background:var(--rd-ink);border-color:var(--rd-ink);color:var(--rd-beige)}
/* --light — кнопка на картинке: без заливки, белая рамка и белый текст
   (нода 3714:499; тёмный цвет внутри неё в макете — это картина под ней) */
.rd-btn--light{background:transparent;border-color:#fff;color:#fff}
.rd-btn--light:hover{background:#fff;border-color:#fff;color:var(--rd-ink)}

/* ==========================================================================
   Шапка
   ========================================================================== */

.header{background:var(--rd-beige);border-bottom:0;height:100px}
.header.header-page{background:var(--rd-beige)}
.header .container,.header__box{height:100%}
/* Логотип: с line-height:1 глифы Lovelace Text садятся выше оптического центра,
   в макете центр чернил на 49.5px из 100. Сдвиг задан в em, чтобы работал
   и на мобильном размере. Проверено попиксельно. */
.logo a{
    font-family:var(--rd-serif);font-weight:400;color:var(--rd-ink);
    font-size:30px;line-height:1;
    position:relative;top:.133em;
}

/* «Poland» из старой шапки в макете нет */
.header-btn__group>span{display:none}

/* Старая вёрстка прятала логотип и бургер на главной и проявляла их анимацией
   toBottom. Стартовое состояние правила — opacity:0 И transform:translateY(-40px);
   в нуль по обеим осям элемент возвращала только сама анимация, в последнем кадре.
   Поэтому гасить одну animation мало: без неё логотип и бургер навсегда остаются
   поднятыми на 40px и на мобильной (шапка 60px) уезжают за верх экрана —
   бургер при этом ещё и не нажимается. Сбрасываем и transform. */
.header-home .logo,
.header-home .main-menu,
.header-home .mobile-menu__btn,
.header-home .header-btn__group>span{
    opacity:1;visibility:visible;
    -webkit-animation:none;animation:none;
    -webkit-transform:none;-ms-transform:none;transform:none;
}

.header-btn__group{
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-align:center;-ms-flex-align:center;align-items:center;
    gap:28px;
}

/* Бургер по фрейму 3705:2: две линии 40x3px с зазором 7px.
   Старая вёрстка рисовала 52x2 с зазором 13 и меняла размер на ≤540 —
   размер задаём здесь один раз для всех ширин. */
.mobile-menu__btn span{width:40px;height:3px}
.mobile-menu__btn span:first-child{margin-bottom:7px}

/* Кнопка «Submit request» открывает существующую модалку .modal-zayavka.
   Класс .art__zayavka — только обработчик клика из main.js; его оформление
   (чёрная пилюля 179x58 с margin-bottom:32px из карточки работы) гасится
   сбросом в .rd-btn выше. */
.rd-header__cta{min-width:224px;height:54px;font-size:18px}

/* --- десктоп: горизонтальное меню вместо фуллскрин-оверлея ---------------
   Порог 1280, а не 1024: при 1024 немецкое меню (Folk-Kollektion, Über mich,
   Versand) вместе с кнопкой не помещается — замерено, кнопка уезжала за край
   и появлялся горизонтальный скролл. От 1024 до 1279 работает прежний
   бургер-оверлей. */
@media (min-width:1280px){
    .header .container{max-width:calc(var(--rd-container) + 80px);padding:0 40px}
    /* три колонки: логотип слева, меню строго по центру, кнопка справа */
    .header__box{
        height:100%;
        display:-ms-grid;display:grid;
        -ms-grid-columns:1fr auto 1fr;grid-template-columns:1fr auto 1fr;
        -webkit-box-align:center;-ms-flex-align:center;align-items:center;
    }
    .header__box .logo{justify-self:start}
    .header__box .dop-menu{justify-self:center}
    .header__box .header-btn__group{justify-self:end}
    .mobile-menu__btn{display:none}

    /* .dop-menu в старой вёрстке — фуллскрин-оверлей на всех ширинах.
       На десктопе разворачиваем его в обычную строку меню. */
    .dop-menu{
        position:static;top:auto;left:auto;width:auto;height:auto;
        z-index:auto;overflow:visible;
        -webkit-transform:none;transform:none;
        display:-webkit-box;display:-ms-flexbox;display:flex;
        -webkit-box-align:center;-ms-flex-align:center;align-items:center;
        padding-top:0;
    }
    .dop-menu:after{display:none}
    .dop-menu>ul{
        position:static;-webkit-transform:none;transform:none;
        display:-webkit-box;display:-ms-flexbox;display:flex;
        -webkit-box-align:center;-ms-flex-align:center;align-items:center;
        gap:20px;margin:0;padding:0;list-style:none;
    }
    .dop-menu>ul>li{
        opacity:1;-webkit-transform:none;transform:none;
        text-align:left;position:relative;margin:0;
    }
    .dop-menu ul li a{
        font-family:var(--rd-sans);font-size:20px;line-height:1.2;font-weight:400;
        padding:0;white-space:nowrap;
    }
    .dop-menu ul li a:before{bottom:-6px}

    /* подменю (Color Book) — выпадающее по наведению */
    .dop-menu .arrow-s{display:none}
    .dop-menu .submenu-ul{
        position:absolute;top:100%;left:50%;
        -webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);
        display:block;height:auto;min-width:180px;margin:0;padding:14px 20px;
        background:var(--rd-beige);text-align:center;
        opacity:0;visibility:hidden;
        -webkit-transition:.2s all ease-in-out;-o-transition:.2s all ease-in-out;transition:.2s all ease-in-out;
    }
    .dop-menu li.sub-menu:hover .submenu-ul{opacity:1;visibility:visible}
    .dop-menu .submenu-ul li{opacity:1;-webkit-transform:none;transform:none}
    .dop-menu .submenu-ul li a{font-size:18px;line-height:22px;padding:4px 0}

    /* переключатель локали: в шапке справа, копия внутри меню скрыта */
    .language__box--menu{display:none}
    .language__box--top{
        position:static;top:auto;left:auto;z-index:auto;opacity:1;
        -webkit-transform:none;transform:none;
        display:-webkit-box;display:-ms-flexbox;display:flex;
        -webkit-box-align:center;-ms-flex-align:center;align-items:center;
        -webkit-transition:none;-o-transition:none;transition:none;
    }
    .language__box--top a{font-family:var(--rd-sans);font-size:18px;line-height:1}
    .language__box--top a:first-child:after{font-size:20px;line-height:1}

}

/* --- 1024–1279: бургер-оверлей, кнопка остаётся, переключатель только в меню */
@media (max-width:1279px){
    .header .container{padding:0 40px}
    .language__box--top{display:none}
}

/* --- мобильная шапка: логотип + бургер (макет 3705:2) --------------------
   В макете полоса 100px, но содержимое стоит в её нижней части (центр y≈70) —
   это запас под системную строку телефона, которого в браузере нет. По решению
   Павла шапка 60px = 100 − 40, содержимое по центру; размеры логотипа
   и бургера — как в макете. */
@media (max-width:1023px){
    .header{height:60px}
    .header .container{padding:0 24px}
    /* размеры сняты попиксельно с фрейма 3705:2: логотип 20px (ширина
       чернил «Benderovska» 135px), бургер 40x3px с зазором 7px */
    .logo a{font-size:20px}
    .rd-header__cta{display:none}

    /* Открытое меню старой вёрстки было сильно разрежено: пункт занимал 56px
       при кегле 22 (интерлиньяж 28 плюс по 14px отступов). Ужимаем шаг
       и подтягиваем переключатель локали ближе к списку. */
    .dop-menu ul li a{padding:6px 0;line-height:1.25}
    .dop-menu .submenu-ul li a{padding:2px 0}
    .dop-menu .submenu-ul{margin-top:2px}
    .language__box--menu{top:calc(50% - 105px)}
}

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

.footer{background:var(--rd-dark)}
.footer__box a,.copyright{font-family:var(--rd-sans);font-weight:600}

/* Раскладка снята с макета попиксельно (координаты от левого края контейнера
   1620px): логотип 0, колонки меню 613 и 940, соцсети прижаты вправо.
   Доли вместо пикселей, чтобы пропорция держалась на любой ширине. */
@media (min-width:1024px){
    .footer__box{
        max-width:calc(var(--rd-container) + 80px);width:100%;margin:0 auto;
        padding:56px 40px 36px;
        display:-ms-grid;display:grid;
        -ms-grid-columns:37.84% 40.37% 1fr;grid-template-columns:37.84% 40.37% 1fr;
        -webkit-box-align:start;-ms-flex-align:start;align-items:start;
    }
    .footer__logo a{font-size:20px;line-height:32px}

    .footer__menu{margin:0}
    .footer__menu ul{
        -webkit-column-count:2;-moz-column-count:2;column-count:2;
        -webkit-column-gap:0;-moz-column-gap:0;column-gap:0;
        margin:0;padding:0;list-style:none;
    }
    .footer__menu li{display:block;width:auto;margin:0}
    .footer__menu li a{font-size:20px;line-height:32px}

    .social__box{
        display:-webkit-box;display:-ms-flexbox;display:flex;
        -webkit-box-align:center;-ms-flex-align:center;align-items:center;
        -webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;
        margin-top:41px;                 /* в макете иконки ниже строки логотипа */
    }
    .social__box a{margin-right:19px}
    .social__box a:last-child{margin-right:0}

    /* разделитель шириной ровно 1620px, как в макете, поэтому поля вынесены
       наружу: border рисуется по всей ширине блока, включая padding */
    .copyright{height:auto;padding:0 40px}
    .copyright__inner{
        max-width:var(--rd-container);padding:14px 0 26px;
        border-top:1px solid rgba(255,255,255,.5);
        font-size:20px;line-height:25px;
    }
}

@media (max-width:1023px){
    .footer__box{padding-top:40px;padding-bottom:32px}
    /* декоративная чёрточка под третьим пунктом — остаток старого подвала,
       в макете её нет */
    .footer__menu li:nth-child(3):after{display:none}
    .footer__logo a{font-size:20px}
    .footer__menu li a{font-size:18px;line-height:28px}
    .copyright__inner{border-top:1px solid rgba(255,255,255,.4);font-size:16px}
}

/* ==========================================================================
   Этап B — первый экран и блок «о художнице»
   Размеры сняты с рендеров макета: десктоп 3714:469, мобильная 3705:2.
   ========================================================================== */

/* --- первый экран -------------------------------------------------------- */

.rd-hero{
    position:relative;
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-orient:vertical;-webkit-box-direction:normal;
    -ms-flex-direction:column;flex-direction:column;
    overflow:hidden;
    background:var(--rd-wine);
}
.rd-hero__img{
    position:absolute;top:0;left:0;width:100%;height:100%;
    -o-object-fit:cover;object-fit:cover;
    /* в макете картина 1920x943 начинается под шапкой: срезаны верхние 40px,
       поэтому кадр прижимаем к низу, а не центрируем */
    -o-object-position:50% 100%;object-position:50% 100%;
    z-index:0;
}
.rd-hero__img--mob{display:none}
/* затемнение поверх картины — нода 3714:471, rgba(0,0,0,.45) */
.rd-hero:after{
    content:"";position:absolute;top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,.45);z-index:1;
}
.rd-hero .container{position:relative;z-index:2}
.rd-hero__inner{
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-orient:vertical;-webkit-box-direction:normal;
    -ms-flex-direction:column;flex-direction:column;
    height:100%;
}
/* у «Artist» (3714:593) тени в макете нет — она только у заголовка.
   Надзаголовок лежит внутри h1: на мобильной макет ставит его в одну строку
   с «Iryna», и только поток даёт это при любой длине слова («Artist» 72px,
   «Künstlerin» 138px). На десктопе и планшете он остаётся отдельной строкой. */
.rd-hero__subtitle{
    display:block;
    font-family:"Lovelace-MediumItalic","Times New Roman",serif;
    font-style:normal;color:#fff;
}
.rd-hero__title{
    margin:0;
    font-family:"Lovelace-Medium","Times New Roman",serif;
    font-weight:400;color:#fff;
    text-shadow:12px 4px 42.7px rgba(0,0,0,.5);
}
.rd-hero__title i{font-family:"Lovelace-MediumItalic","Times New Roman",serif;font-style:normal}
/* переносы строк заданы явно: в макете это один текстовый слой,
   где строки разделены переводом строки, а отступы — пробелами */
.rd-hero__line{display:block}
/* чёрточка перед последней строкой: обводка 5px (нода 3714:595),
   на мобильной 2px (3705:65) */
.rd-hero__dash{
    display:inline-block;width:153px;height:5px;background:#fff;
    vertical-align:middle;
}
.rd-hero__actions{
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-align:center;-ms-flex-align:center;align-items:center;
    margin-top:auto;
}
.rd-hero__follow{
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-align:center;-ms-flex-align:center;align-items:center;
    color:#fff;
}
/* иконка целиком из макета (нода 3714:637): бежевый кружок 44x44 с глифом */
.rd-hero__follow-icon{
    display:block;width:44px;height:44px;
    background:url(../img/icons/follow-instagram.svg) no-repeat 50% 50%;
    background-size:44px 44px;
    -webkit-transition:.25s all ease-in-out;-o-transition:.25s all ease-in-out;transition:.25s all ease-in-out;
}
.rd-hero__follow:hover .rd-hero__follow-icon{-webkit-transform:scale(1.08);transform:scale(1.08)}
.rd-hero__follow-text{
    font-family:var(--rd-sans);font-size:20px;line-height:1;
    text-transform:uppercase;text-decoration:underline;
}

@media (min-width:1280px){
    /* Фрейм первого экрана 5704:31 стоит в композиции на y=56, а не на 60:
       шапка 100px, значит под ней видно 903px картины, а верхний отступ
       текста — 146 − 44 = 102, не 106; кнопки прижаты к низу, поэтому
       нижний отступ тоже сдвигался — 149 вместо 145. Прежние значения
       опускали весь экран на 4px (сверка 03.09 приняла 60 за 56). */
    .rd-hero{height:903px;padding:102px 0 149px}
    .rd-hero .container{
        max-width:calc(var(--rd-container) + 80px);padding:0 40px;
        height:100%;
    }
    /* кегли из Figma: «Artist» 60/70 (3714:593), заголовок 135/140 (3714:594) */
    .rd-hero__subtitle{font-size:60px;line-height:70px;margin:0 0 21px 187px}
    .rd-hero__title{font-size:135px;line-height:140px}
    .rd-hero__line--2{padding-left:35px}
    .rd-hero__line--3{padding-left:16px}
    .rd-hero__dash{margin:0 71px 0 0;position:relative;top:-12px}
    .rd-hero__actions{gap:32px}
    .rd-hero__follow{margin-left:17px}
    .rd-hero__follow-text{margin-left:19px}
}

/* --- блок «о художнице» -------------------------------------------------- */

.rd-about{background:var(--rd-cream)}
.rd-about__photo img{
    display:block;width:100%;height:100%;
    -o-object-fit:cover;object-fit:cover;
    /* в макете фото вписано по ширине и сдвинуто вверх на 4.27% высоты бокса
       (ноды 3714:592 и 3779:23) — это 13.3% от переполнения по вертикали */
    -o-object-position:50% 13.3%;object-position:50% 13.3%;
}
.rd-about__title{
    margin:0;
    font-family:var(--rd-serif);font-weight:400;color:var(--rd-ink);
}
.rd-about__title i{font-style:italic}
.rd-about__text{font-family:var(--rd-sans);color:var(--rd-ink)}
.rd-about__text p{margin:0}
/* кнопка не должна растягиваться на всю колонку: в макете 250x60 */
.rd-about__btn{-ms-flex-item-align:start;align-self:flex-start;width:250px}

@media (min-width:1280px){
    .rd-about{height:600px}
    .rd-about .container{max-width:calc(var(--rd-container) + 80px);padding:0 40px}
    .rd-about__inner{position:relative;height:600px}
    .rd-about__photo{position:absolute;left:162px;top:143px;width:332px;height:318px}
    .rd-about__body{position:absolute;left:549px;top:0;width:850px}
    /* кегли из Figma: заголовок 48/60 (3714:611), абзац 20/30 (3714:612) */
    .rd-about__title{padding-top:140px;width:762px;font-size:48px;line-height:60px}
    .rd-about__text{margin-top:13px;width:834px;font-size:20px;line-height:30px}
    .rd-about__btn{margin-top:37px}
}

/* --- планшет 1024–1279: те же блоки, но в потоке -------------------------
   Диапазон, а не max-width: иначе эти правила протекают на мобильную,
   где раскладка своя (проверено — фото и текст уезжали за экран). */

@media (min-width:1024px) and (max-width:1279px){
    .rd-hero{min-height:70vh;padding:60px 0 60px}
    .rd-hero .container{padding:0 40px}
    .rd-hero__subtitle{font-size:34px;line-height:1;margin:0 0 20px 60px}
    .rd-hero__title{font-size:80px;line-height:88px}
    .rd-hero__dash{width:100px;margin:0 30px 0 8px;position:relative;top:-14px}
    .rd-hero__actions{gap:24px;-ms-flex-wrap:wrap;flex-wrap:wrap}
    .rd-hero__follow-text{margin-left:14px}

    .rd-about .container{padding:0 40px}
    .rd-about__inner{
        display:-webkit-box;display:-ms-flexbox;display:flex;
        -webkit-box-align:center;-ms-flex-align:center;align-items:center;
        gap:60px;padding:60px 0;
    }
    .rd-about__photo{-webkit-box-flex:0;-ms-flex:0 0 332px;flex:0 0 332px;height:318px}
    .rd-about__title{font-size:44px;line-height:48px}
    .rd-about__text{margin-top:20px;font-size:18px;line-height:28px}
    .rd-about__btn{margin-top:26px}
}

/* --- мобильная (макет 3705:2) --------------------------------------------
   Кегли из Figma: H1 54/60 (3705:63), «Artist» 26/35 (3705:58),
   заголовок 30/42 (3779:24), текст 18/26 (3779:25).
   Раскладка первого экрана отличается от десктопной: «Artist» стоит
   в строку перед «Iryna», а чёрточка — справа от «Prints.». */

@media (max-width:1023px){
    .rd-hero{height:570px;min-height:0;padding:103px 0 44px}
    .rd-hero .container{padding:0 24px;height:100%}
    .rd-hero__inner{position:relative}
    .rd-hero__img{display:none}
    .rd-hero__img--mob{display:block}
    /* Кегли макета (54 и 26) нарисованы под ширину 430px с полями 24px,
       то есть под колонку 382px. На 390 и 375 строка «Iryna Benderovska»
       в 54px в такую колонку не влезает и обрезается справа, поэтому кегль
       масштабируется по фактической ширине колонки и упирается в макетный
       потолок на 430px и шире. Первая строка в px — запасная для браузеров
       без min(). Горизонтальные метрики блока переведены в em, чтобы
       масштабироваться вместе с кеглем. */
    .rd-hero__subtitle{
        /* в макете надзаголовок отступает от левого края колонки на 29px
           (чернила 53 при колонке от 24) — строка «Artist Iryna» стоит
           ступенькой относительно «Benderovska». Отступы в em, чтобы
           масштабироваться вместе с кеглем на узких экранах. */
        display:inline;margin-left:1.115em;margin-right:.4em;
        font-size:26px;
        font-size:min(26px,calc((100vw - 48px) * .068063));
        line-height:1.3462;                 /* 35/26 */
    }
    .rd-hero__title{
        font-size:54px;
        font-size:min(54px,calc((100vw - 48px) * .141361));
        line-height:1.1111;                 /* 60/54 */
    }
    /* Немецкий длиннее английского: «Kunstprojekte,» — одно неразрывное слово
       шириной 410px при кегле 54, оно не влезает в колонку даже на макетных
       430px (382px колонки). Коэффициент для DE считается по нему: 54/410. */
    html[lang="de"] .rd-hero__title{
        font-size:50px;
        font-size:min(54px,calc((100vw - 48px) * .131707));
    }
    /* Первая строка — в поток за надзаголовком: перенос «Benderovska»
       браузер делает сам, без зашитого отступа под длину слова. */
    .rd-hero__line{padding-left:0}
    /* именно соседний селектор: :first-child внутри h1 теперь занимает
       надзаголовок, и по нему первая строка не находится */
    .rd-hero__subtitle + .rd-hero__line{display:inline;padding-left:0;text-indent:0}
    .rd-hero__line--2{padding-left:.074em}   /* 4px при кегле 54 */
    .rd-hero__line--3{
        display:-webkit-box;display:-ms-flexbox;display:flex;
        -webkit-box-orient:horizontal;-webkit-box-direction:reverse;
        -ms-flex-direction:row-reverse;flex-direction:row-reverse;
        -webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;
        -webkit-box-align:center;-ms-flex-align:center;align-items:center;
        padding-left:.6111em;               /* 33px при кегле 54 */
    }
    .rd-hero__dash{width:1.1852em;height:2px;margin:0 0 0 .2593em;top:0}
    .rd-hero__actions{
        -webkit-box-orient:vertical;-webkit-box-direction:normal;
        -ms-flex-direction:column;flex-direction:column;
        -webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;
        gap:20px;
    }
    .rd-hero__actions .rd-btn{width:100%;min-width:0;height:50px;font-size:18px}
    .rd-hero__actions .rd-btn--light{border-width:1px}
    .rd-hero__follow{display:none}          /* в мобильном макете его нет */

    .rd-about .container{padding:0 24px}
    .rd-about__inner{padding:40px 0 40px}
    .rd-about__photo{width:100%;height:366px}
    .rd-about__title{margin-top:23px;font-size:30px;line-height:42px}
    .rd-about__text{margin-top:11px;max-width:371px;font-size:18px;line-height:26px}
    .rd-about__btn{margin-top:30px;width:100%;min-width:0;height:50px;font-size:18px}
}

/* ==========================================================================
   Страница контактов (15.09.2026) — шаблон Other (15)
   Макет: фрейм Contacts 3750:113. Блоки: форма 5711:115, доставка 5711:114,
   сертификат 3750:144. Мобильного макета у страницы нет — мобильная
   раскладка собрана по образцу мобильных блоков главной (3705:2).
   Бывшая страница Shipping переехала сюда блоком .rd-shipping (#shipping).
   ========================================================================== */

/* --- первый блок: заголовок, карта, контакты | форма --------------------- */

.rd-contact__title,
.rd-shipping__title{
    margin:0;
    font-family:var(--rd-serif);font-weight:400;color:var(--rd-ink);
}
.rd-contact__map iframe{display:block;width:100%;height:100%;border:0}
.rd-contact__text{font-family:var(--rd-sans);color:var(--rd-ink)}
.rd-contact__text p{margin:0}
.rd-contact__text a{color:inherit;text-decoration:none}
.rd-contact__text a:hover{text-decoration:underline}

/* иконки — спрайт из ноды 3762:107 (160x44): кружки на x=0, 58, 116 */
.rd-contact__social{
    display:-webkit-box;display:-ms-flexbox;display:flex;
    gap:14px;
}
.rd-contact__social-link{
    display:block;width:44px;height:44px;
    background:url(../img/icons/contacts-social.svg) no-repeat 0 0;
    background-size:160px 44px;
    -webkit-transition:.25s all ease-in-out;-o-transition:.25s all ease-in-out;transition:.25s all ease-in-out;
}
.rd-contact__social-link--instagram{background-position:-58px 0}
.rd-contact__social-link--whatsapp{background-position:-116px 0}
.rd-contact__social-link:hover{-webkit-transform:scale(1.08);transform:scale(1.08)}

/* Форма — чанк contact-form (55). Классы .modal__form и .custom-select
   общие с модалкой заказа, поэтому всё только внутри .rd-contact.
   Поля по нодам 3762:44–48: рамка 1px rgba(0,0,0,.5), текст 20px с отступом 20. */
.rd-contact .modal__form>div{max-width:none;width:100%;margin:0 0 24px}
/* в макете шаг между первыми тремя полями 32px, дальше 24 (ноды 3762:44–48) */
.rd-contact .modal__form>div:nth-child(-n+2){margin-bottom:32px}
.rd-contact .modal__form>div.rd-contact__actions{margin-bottom:0}
.rd-contact .modal__form input,
.rd-contact .modal__form textarea,
.rd-contact .select-selected{
    display:block;width:100%;max-width:none;margin:0;
    border:1px solid rgba(0,0,0,.5);border-radius:0;background:#fff;
    font-family:var(--rd-sans);font-size:20px;line-height:1.2;color:var(--rd-ink);
}
.rd-contact .modal__form input{height:50px;padding:0 20px}
.rd-contact .modal__form textarea{height:160px;padding:16px 20px;resize:vertical}
.rd-contact .modal__form input:focus,
.rd-contact .modal__form textarea:focus{border-color:var(--rd-ink)}

.rd-contact .custom-select{max-width:none;margin:0}
.rd-contact .select-selected{
    position:relative;height:50px;padding:0 50px 0 20px;
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-align:center;-ms-flex-align:center;align-items:center;
    white-space:nowrap;overflow:hidden;
}
/* стрелка — нода 3762:66: шеврон 6x11, повёрнутый вниз; центр в 27.5px
   от правого края поля. Размер задан до поворота. */
.rd-contact .select-selected:after{
    right:24.4px;width:6.273px;height:11.047px;
    background:url(../img/icons/select-chevron.svg) no-repeat 0 0;
    background-size:100% 100%;
    -webkit-transform:translateY(-50%) rotate(90deg);-ms-transform:translateY(-50%) rotate(90deg);transform:translateY(-50%) rotate(90deg);
}
.rd-contact .select-selected.select-arrow-active:after{
    -webkit-transform:translateY(-50%) rotate(-90deg);-ms-transform:translateY(-50%) rotate(-90deg);transform:translateY(-50%) rotate(-90deg);
}
.rd-contact .select-items{
    border:1px solid rgba(0,0,0,.5);border-top:0;
}
.rd-contact .select-items>div{
    padding:10px 20px;border-bottom:1px solid rgba(0,0,0,.1);
    font-family:var(--rd-sans);font-size:18px;line-height:24px;
}

/* у старой вёрстки над формой отступ 65px — в макете форма вровень с заголовком */
.rd-contact .contact-form__box{margin-top:0}

/* кнопка — нода 3762:77: 200x60, бежевая заливка без рамки. Старое правило
   .modal__form button (чёрная «пилюля» 179x58, radius 30, margin 15px auto)
   сильнее .rd-btn, поэтому селектор с той же вложенностью. */
.rd-contact .modal__form .rd-contact__submit{
    display:-webkit-box;display:-ms-flexbox;display:flex;
    width:200px;min-width:200px;max-width:none;height:60px;
    margin:0;padding:0 16px;border-radius:0;
    background:var(--rd-beige);border:2px solid var(--rd-beige);color:var(--rd-ink);
    font-family:var(--rd-sans);font-size:20px;line-height:1;font-weight:400;
}
.rd-contact .modal__form .rd-contact__submit:hover{
    background:var(--rd-ink);border-color:var(--rd-ink);color:var(--rd-beige);
}

/* --- блок доставки: содержимое TV contacts__shipping ---------------------
   Разметка .shipping__box досталась от страницы Shipping; её старые правила
   (центровка, жирный абзац, min-width:470) гасим здесь. */

.rd-shipping{background:var(--rd-cream);scroll-margin-top:100px}
.rd-shipping__title{text-align:center}
.rd-shipping .shipping__box{max-width:none;margin:0}
.rd-shipping .shipping__left{
    min-width:0;max-width:none;margin:0;text-align:left;
}
.rd-shipping .shipping__subtitle{font-family:var(--rd-serif);color:var(--rd-ink)}
.rd-shipping .shipping__left p,
.rd-shipping .shipping__right{
    font-family:var(--rd-sans);font-weight:400;color:var(--rd-ink);
}
.rd-shipping .shipping__left p{max-width:none;margin:0}
.rd-shipping .shipping__right p,
.rd-shipping .shipping__right p:first-child,
.rd-shipping .shipping__right p:first-child+p{margin:0 0 30px}
/* «Here you can select:» в макете вплотную к следующему абзацу */
.rd-shipping .shipping__right p:first-child{margin-bottom:0}
.rd-shipping .shipping__right p:last-child{margin-bottom:0}
.rd-shipping .shipping__right strong{font-weight:600}

/* --- сертификат — нода 3750:144: 848x600 в рамке 1px ------------------- */

.rd-certificate__img{
    display:block;width:849px;max-width:100%;height:auto;margin:0 auto;
    border:1px solid var(--rd-ink);
}

@media (min-width:1280px){
    /* Фрейм блока 5711:115 стоит на y=250: 150px под шапкой. Колонки 500
       с зазором 48 (форма на x=548), общая ширина 1048 по центру. */
    .rd-contact{padding:150px 0 142px}
    .rd-contact__inner,
    .rd-shipping .shipping__box{
        display:-ms-grid;display:grid;
        -ms-grid-columns:500px 48px 500px;grid-template-columns:500px 500px;
        -webkit-column-gap:48px;-moz-column-gap:48px;column-gap:48px;
        -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
        -webkit-box-align:start;-ms-flex-align:start;align-items:start;
    }
    /* кегли из Figma: заголовок 60/70 (3750:200), контакты 20/40 (3762:68) */
    .rd-contact__title{font-size:60px;line-height:70px}
    .rd-contact__map{margin-top:24px;height:258px}         /* 3762:87 на y=94 */
    .rd-contact__text{margin-top:29px;font-size:20px;line-height:40px}
    .rd-contact__social{margin-top:19px}                   /* 3762:107 на y=520 */

    /* фрейм 5711:114 — 1090px: заголовок 60/70 на y=100 (3750:125),
       колонки на y=240 и 248 (3750:143, 3750:124). Подзаголовок в макете
       тоже в 6 строк (300px, по чернилам рендера), абзац 3750:142 на y=558 —
       отступ под подзаголовком 18px. */
    /* низ подобран так, чтобы блок был ровно 1090px, как фрейм 5711:114:
       последняя строка правой колонки кончается на 1894, фон — на 2046 */
    .rd-shipping{padding:100px 0 152px}
    .rd-shipping__title{font-size:60px;line-height:70px}
    .rd-shipping .shipping__box{margin-top:70px}
    .rd-shipping .shipping__subtitle{font-size:40px;line-height:50px}
    .rd-shipping .shipping__left p{margin-top:18px;font-size:20px;line-height:30px}
    .rd-shipping .shipping__right{padding-top:8px;font-size:20px;line-height:30px}

    /* группа 3750:144 на y=2196 — 150px от блока доставки. В макете подвал
       на y=3170, то есть снизу 374px пустоты — по решению Павла 15.09
       отступ снизу такой же, как сверху. */
    .rd-certificate{padding:150px 0 150px}
}

/* --- планшет 1024–1279: те же две колонки, но резиновые ------------------ */

@media (min-width:1024px) and (max-width:1279px){
    .rd-contact .container,
    .rd-shipping .container,
    .rd-certificate .container{padding:0 40px}
    .rd-contact{padding:90px 0 100px}
    .rd-contact__inner,
    .rd-shipping .shipping__box{
        display:-ms-grid;display:grid;
        -ms-grid-columns:1fr 48px 1fr;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        -webkit-column-gap:48px;-moz-column-gap:48px;column-gap:48px;
        -webkit-box-align:start;-ms-flex-align:start;align-items:start;
    }
    .rd-contact__title{font-size:52px;line-height:60px}
    .rd-contact__map{margin-top:24px;height:258px}
    .rd-contact__text{margin-top:26px;font-size:18px;line-height:36px}
    .rd-contact__social{margin-top:18px}

    .rd-shipping{padding:80px 0 90px}
    .rd-shipping__title{font-size:52px;line-height:60px}
    .rd-shipping .shipping__box{margin-top:50px}
    .rd-shipping .shipping__subtitle{font-size:34px;line-height:44px}
    .rd-shipping .shipping__left p{margin-top:40px;font-size:18px;line-height:28px}
    .rd-shipping .shipping__right{font-size:18px;line-height:28px}
    .rd-shipping .shipping__right p{margin-bottom:28px}

    .rd-certificate{padding:100px 0 120px}
}

/* --- мобильная: одна колонка (макета нет, кегли — как у блоков главной) --- */

@media (max-width:1023px){
    .rd-contact .container,
    .rd-shipping .container,
    .rd-certificate .container{padding:0 24px}
    .rd-contact{padding:40px 0 60px}
    .rd-contact__inner{
        display:-webkit-box;display:-ms-flexbox;display:flex;
        -webkit-box-orient:vertical;-webkit-box-direction:normal;
        -ms-flex-direction:column;flex-direction:column;
        gap:40px;
    }
    .rd-contact__title{font-size:40px;line-height:48px}
    .rd-contact__map{margin-top:20px;height:258px}
    .rd-contact__text{margin-top:20px;font-size:18px;line-height:34px}
    .rd-contact__social{margin-top:16px}
    .rd-contact .modal__form>div,
    .rd-contact .modal__form>div:nth-child(-n+2){margin-bottom:20px}
    .rd-contact .modal__form input,
    .rd-contact .modal__form textarea,
    .rd-contact .select-selected{font-size:18px}
    .rd-contact .modal__form textarea{height:140px}
    .rd-contact .modal__form .rd-contact__submit{width:100%;min-width:0;height:50px;font-size:18px}

    .rd-shipping{padding:50px 0 60px;scroll-margin-top:60px}
    .rd-shipping__title{font-size:40px;line-height:48px}
    .rd-shipping .shipping__box{
        display:-webkit-box;display:-ms-flexbox;display:flex;
        -webkit-box-orient:vertical;-webkit-box-direction:normal;
        -ms-flex-direction:column;flex-direction:column;
        margin-top:30px;
    }
    .rd-shipping .shipping__subtitle{font-size:28px;line-height:36px}
    .rd-shipping .shipping__left p{margin-top:20px;font-size:18px;line-height:26px}
    .rd-shipping .shipping__right{margin-top:36px;font-size:18px;line-height:26px}
    .rd-shipping .shipping__right p{margin-bottom:26px}

    .rd-certificate{padding:50px 0 60px}
}

/* ==========================================================================
   Хлебные крошки (18.09.2026) — чанк breadcrumbs, на всех страницах кроме главной
   Макет: фрейм 5750:195 (страница коллекции). Стрелка — тот же шеврон,
   что в селекте формы контактов (нода 3734:207), повёрнутый вправо.
   ========================================================================== */

.rd-crumbs{
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -ms-flex-wrap:wrap;flex-wrap:wrap;
    -webkit-box-align:center;-ms-flex-align:center;align-items:center;
    font-family:var(--rd-sans);font-size:18px;line-height:normal;
}
.rd-crumbs__item{color:rgba(0,0,0,.5);text-decoration:none}
.rd-crumbs__item:hover{color:var(--rd-ink)}
.rd-crumbs__item--current{color:var(--rd-ink)}
/* зазор 15px с каждой стороны стрелки (по чернилам макета) */
.rd-crumbs__sep{
    display:block;width:6.273px;height:11.047px;margin:0 15px;
    background:url(../img/icons/select-chevron.svg) no-repeat 50% 50%;
    background-size:100% 100%;
    opacity:.5;
}
/* На страницах, свёрстанных до крошек (About, контакты, карточка работы,
   статья, Color Book), крошки идут первым блоком и сдвигают содержимое вниз
   на свою высоту — в макетах тех страниц крошек нет. */
.rd-crumbs-holder{padding-top:40px}
@media (max-width:1023px){
    .rd-crumbs-holder{padding-top:24px}
}

/* ==========================================================================
   Страница коллекции (18.09.2026) — шаблон Collection
   Макет: контентная часть 5750:196 (ширина 1360 по центру страницы 1920):
   крошки и вкладки 5750:195, заголовок и колонки 5750:194,
   описание 5750:193, сетка работ 5750:192.
   ========================================================================== */

/* --- вкладки коллекций (ноды 3734:180–3734:195) ------------------------- */

.rd-tabs{position:relative}
.rd-tabs__list{
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-align:center;-ms-flex-align:center;align-items:center;
    gap:24px;margin:0;padding:0;list-style:none;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.rd-tabs__list::-webkit-scrollbar{display:none}
.rd-tabs__link{
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-align:center;-ms-flex-align:center;align-items:center;
    height:60px;padding:0 25px;
    border:2px solid var(--rd-ink);background:#fff;
    font-family:var(--rd-sans);font-size:20px;line-height:1;
    text-transform:uppercase;text-align:center;color:var(--rd-ink);
    text-decoration:none;white-space:nowrap;
    -webkit-transition:.25s all ease-in-out;-o-transition:.25s all ease-in-out;transition:.25s all ease-in-out;
}
.rd-tabs__link:hover{background:var(--rd-cream)}
/* активная — бежевая заливка без рамки (3734:180) */
.rd-tabs__item--active .rd-tabs__link{
    background:var(--rd-beige);border-color:var(--rd-beige);
}
/* подсказка о прокрутке: белый градиент у правого края (3734:199) */
.rd-tabs:after{
    content:"";position:absolute;top:0;right:0;bottom:0;width:138px;
    background:-webkit-gradient(linear,right top,left top,from(#fff),to(rgba(255,255,255,0)));
    background:-o-linear-gradient(right,#fff,rgba(255,255,255,0));
    background:linear-gradient(to left,#fff,rgba(255,255,255,0));
    pointer-events:none;
}

/* --- заголовок, описание, сетка ----------------------------------------- */

.rd-collection__title{
    margin:0;
    font-family:var(--rd-serif);font-weight:400;color:var(--rd-ink);
    text-align:center;
}
.rd-collection__title i{font-style:italic}
.rd-collection__aside{font-family:var(--rd-sans);color:var(--rd-ink)}
.rd-collection__aside p{margin:0}
.rd-collection__aside p+p{margin-top:30px}
/* приписка под чёрточкой (3739:253): Lovelace Text 22/32, «Saatchi Art»
   курсивом с бежевой подсветкой (3739:267) */
.rd-collection__note{
    font-family:var(--rd-serif);font-weight:400;color:var(--rd-ink);
}
.rd-collection__note i{font-style:italic}
.rd-collection__note mark{background:var(--rd-beige);color:inherit}

.rd-collection__item{margin:0}
.rd-collection__img{display:block}
.rd-collection__img img{display:block;width:100%;height:auto}
.rd-collection__caption{
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;
    -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
    gap:16px;
}
.rd-collection__name,
.rd-collection__number{
    margin:0;
    font-family:var(--rd-serif);font-weight:400;color:var(--rd-ink);
}
.rd-collection__size{margin:0;font-family:var(--rd-sans);color:var(--rd-ink)}
.rd-collection__link{color:inherit;text-decoration:none}
.rd-collection__link:hover .rd-collection__name{text-decoration:underline}
/* колонки сетки: карточки раскладывает скрипт в шаблоне — каждая в ту
   колонку, которая ниже (в макете колонки идут со смещением) */
.rd-collection__col{
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-orient:vertical;-webkit-box-direction:normal;
    -ms-flex-direction:column;flex-direction:column;
    gap:48px;min-width:0;
}

@media (min-width:1280px){
    /* контент 1360 по центру (фрейм 5750:196 на x=280 при ширине 1920) */
    .rd-collection__inner{width:1360px;margin:0 auto}
    .rd-collection{padding:100px 0 140px}
    .rd-tabs{margin-top:64px}                  /* вкладки на y=102 от крошек */
    .rd-collection__title{margin-top:118px;font-size:60px;line-height:normal}
    /* колонки: описание 394 слева, сетка 848 справа (5750:193 и 5750:192) */
    /* ряд колонок уже контента: описание на 0, сетка на 480 — как в макете
       (5750:193 и 5750:192), справа остаётся 32px поля */
    .rd-collection__cols{
        width:1328px;
        display:-webkit-box;display:-ms-flexbox;display:flex;
        -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
        -webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;
        margin-top:72px;
    }
    .rd-collection__aside{-webkit-box-flex:0;-ms-flex:0 0 394px;flex:0 0 394px;font-size:20px;line-height:30px}
    .rd-collection__note{margin-top:42px;max-width:360px;font-size:22px;line-height:32px}
    /* чёрточка 54px перед припиской (3739:268) */
    .rd-collection__note:before{
        content:"";display:block;width:54px;height:1px;margin:0 0 33px 149px;
        background:var(--rd-ink);
    }
    /* коллекция без описания (у Fine Art текста пока нет) — сетка по центру */
    .rd-collection__grid:only-child{margin-left:auto;margin-right:auto}
    .rd-collection__grid{
        -webkit-box-flex:0;-ms-flex:0 0 848px;flex:0 0 848px;
        display:-ms-grid;display:grid;
        -ms-grid-columns:400px 48px 400px;grid-template-columns:400px 400px;
        -webkit-column-gap:48px;-moz-column-gap:48px;column-gap:48px;row-gap:48px;
        -webkit-box-align:start;-ms-flex-align:start;align-items:start;
    }
    /* подпись под картинкой: название 25 (3733:106), номер справа, размеры 20/30 */
    .rd-collection__caption{margin-top:15px}
    .rd-collection__name,
    .rd-collection__number{font-size:25px;line-height:32px}
    .rd-collection__size{margin-top:4px;font-size:20px;line-height:30px}
}

@media (min-width:1024px) and (max-width:1279px){
    .rd-collection{padding:70px 0 100px}
    .rd-collection .container{padding:0 40px}
    .rd-tabs{margin-top:40px}
    .rd-collection__title{margin-top:70px;font-size:52px;line-height:normal}
    .rd-collection__cols{
        display:-webkit-box;display:-ms-flexbox;display:flex;
        -webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;
        gap:48px;margin-top:50px;
    }
    .rd-collection__aside{-webkit-box-flex:0;-ms-flex:0 0 320px;flex:0 0 320px;font-size:18px;line-height:28px}
    .rd-collection__note{margin-top:36px;font-size:20px;line-height:30px}
    .rd-collection__grid{
        -webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;
        display:-ms-grid;display:grid;
        -ms-grid-columns:1fr 40px 1fr;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        -webkit-column-gap:40px;-moz-column-gap:40px;column-gap:40px;row-gap:40px;
        -webkit-box-align:start;-ms-flex-align:start;align-items:start;
    }
    .rd-collection__caption{margin-top:12px}
    .rd-collection__name,
    .rd-collection__number{font-size:22px;line-height:28px}
    .rd-collection__size{margin-top:4px;font-size:18px;line-height:28px}
}

@media (max-width:1023px){
    .rd-collection{padding:30px 0 60px}
    .rd-collection .container{padding:0 24px}
    .rd-crumbs{font-size:16px}
    .rd-crumbs__sep{margin:0 10px}
    .rd-tabs{margin-top:24px;margin-right:-24px}
    .rd-tabs__list{gap:12px;padding-right:24px}
    .rd-tabs__link{height:50px;padding:0 18px;font-size:16px}
    .rd-tabs:after{width:40px}
    .rd-collection__title{margin-top:40px;font-size:34px;line-height:1.2}
    .rd-collection__cols{margin-top:30px}
    .rd-collection__aside{font-size:18px;line-height:26px}
    .rd-collection__aside p+p{margin-top:26px}
    .rd-collection__note{margin-top:30px;font-size:20px;line-height:30px}
    .rd-collection__note:before{
        content:"";display:block;width:54px;height:1px;margin:0 0 24px;
        background:var(--rd-ink);
    }
    .rd-collection__grid{
        display:-webkit-box;display:-ms-flexbox;display:flex;
        -webkit-box-orient:vertical;-webkit-box-direction:normal;
        -ms-flex-direction:column;flex-direction:column;
        gap:40px;margin-top:40px;
    }
    .rd-collection__caption{margin-top:12px}
    .rd-collection__name,
    .rd-collection__number{font-size:22px;line-height:28px}
    .rd-collection__size{margin-top:4px;font-size:18px;line-height:26px}
}

/* ==========================================================================
   Коллекции на главной (21.09.2026) — этап C
   Макет: заголовок 60px (второе слово курсивом), карточки 600 в две колонки
   с зазором 96 и 150 между рядами (ноды 5704:34…37 и группы Folk в 3714:469).
   Высота картинки не задана: в макете она разная, пропорции оригинала.
   Работы берутся из галереи — их выбирает поле «Показывать на главной».
   ========================================================================== */

.rd-works--cream{background:var(--rd-cream)}
.rd-works__title{
    margin:0;
    font-family:var(--rd-serif);font-weight:400;color:var(--rd-ink);
    text-align:center;
}
.rd-works__title i{font-style:italic}

.rd-work__img{display:block}
.rd-work__img img{display:block;width:100%;height:auto}
.rd-work__collection{
    font-family:var(--rd-sans);text-transform:uppercase;color:var(--rd-ink);
}
.rd-work__title{margin:0;font-family:var(--rd-serif);font-weight:400}
.rd-work__title a{color:var(--rd-ink);text-decoration:none}
.rd-work__title a:hover{color:var(--rd-ink);text-decoration:underline}
.rd-work__size{font-family:var(--rd-serif);color:var(--rd-ink)}
.rd-work__actions{
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-align:center;-ms-flex-align:center;align-items:center;
}
/* квадратные кнопки 60×60 из макета: «поделиться» с рамкой, «заказать» залитая */
.rd-work__icon{
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-align:center;-ms-flex-align:center;align-items:center;
    -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
    width:60px;height:60px;padding:0;
    background:transparent;border:2px solid var(--rd-ink);border-radius:0;
    cursor:pointer;
    -webkit-transition:.25s all ease-in-out;-o-transition:.25s all ease-in-out;transition:.25s all ease-in-out;
}
.rd-work__icon img{display:block;width:auto;height:auto}
.rd-work__share img{width:41px;height:41px}
/* Иконка заказа из макета уже белая, поэтому на чёрной кнопке её не трогаем,
   а инвертируем в чёрную при наведении, когда заливка уходит. */
.rd-work__order{background:var(--rd-ink)}
.rd-work__order img{width:30px;height:39px}
.rd-work__share:hover,
.rd-work__share.is-copied{background:var(--rd-ink)}
.rd-work__share:hover img,
.rd-work__share.is-copied img{-webkit-filter:invert(1);filter:invert(1)}
.rd-work__order:hover{background:transparent}
.rd-work__order:hover img{-webkit-filter:invert(1);filter:invert(1)}
/* Номер в макете — позиция карточки в блоке (/01…/04), а не номер работы
   в галерее. Берём его из поля «Показывать на главной», а ведущий ноль
   дорисовываем здесь: карточек в блоке единицы, двузначных позиций не бывает. */
.rd-work__number{
    margin-left:auto;
    font-family:"Lovelace","LovelaceText-Medium","Times New Roman",serif;
    color:var(--rd-ink);
}
.rd-work__number::before{content:"/0"}

@media (min-width:1280px){
    .rd-works{padding:150px 0}
    .rd-works__title{font-size:60px;line-height:normal}
    /* Две колонки по 600 (в макете x=312 и 1008 при ширине 1920). Именно
       колонки, а не grid: в макете карточки лежат кладкой, каждая начинается
       сразу под предыдущей в своей колонке, а grid ровнял бы ряды по высоте
       самой высокой карточки и оставлял дыры. */
    /* Две явные колонки по 600 (в макете x=312 и 1008 при ширине 1920).
       Колонки — отдельные потоки, поэтому карточки не ровняются рядами
       и не оставляют дыр, а у последней в колонке отступ снимается:
       низ секции отмеряется от неё ровно на 150, как в макете. */
    .rd-works__grid{
        max-width:1296px;margin:100px auto 0;
        display:-webkit-box;display:-ms-flexbox;display:flex;
        -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
        gap:96px;
    }
    .rd-works__col{width:600px}
    .rd-work{margin-bottom:150px}
    .rd-work:last-child{margin-bottom:0}
    /* Кремовая секция: в макете от её верха до заголовка 100 (а не 150,
       как у Fine Art от предыдущего блока), от заголовка до карточек 95. */
    .rd-works--cream{padding-top:100px}
    .rd-works--cream .rd-works__grid{margin-top:95px}
    .rd-work__collection{margin-top:28px;font-size:18px;line-height:normal}
    .rd-work__title{margin-top:17px;font-size:48px;line-height:60px}
    .rd-work__size{margin-top:11px;font-size:30px;line-height:normal}
    .rd-work__actions{margin-top:28px;gap:20px}
    .rd-work__number{font-size:50px;line-height:normal}
}

@media (min-width:1024px) and (max-width:1279px){
    .rd-works{padding:100px 0}
    .rd-works .container{padding:0 40px}
    .rd-works__title{font-size:52px;line-height:normal}
    .rd-works__grid{
        display:-webkit-box;display:-ms-flexbox;display:flex;
        -webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;
        gap:60px;margin-top:70px;
    }
    .rd-works__col{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0}
    .rd-work{margin-bottom:100px}
    .rd-work:last-child{margin-bottom:0}
    .rd-work__collection{margin-top:24px;font-size:16px}
    .rd-work__title{margin-top:14px;font-size:36px;line-height:44px}
    .rd-work__size{margin-top:10px;font-size:24px}
    .rd-work__actions{margin-top:20px;gap:16px}
    .rd-work__number{font-size:40px}
}

@media (max-width:1023px){
    .rd-works{padding:60px 0}
    .rd-works .container{padding:0 24px}
    .rd-works__title{font-size:34px;line-height:1.2}
    /* На мобильной обе колонки вытягиваются в один столбец */
    .rd-works__grid{
        display:-webkit-box;display:-ms-flexbox;display:flex;
        -webkit-box-orient:vertical;-webkit-box-direction:normal;
        -ms-flex-direction:column;flex-direction:column;
        gap:60px;margin-top:40px;
    }
    /* Колонки на мобильной растворяются, и карточки идут одним столбцом
       по порядку из поля «Показывать на главной»: 01, 02, 03, 04.
       Иначе сначала шла бы вся левая колонка, а номера прыгали бы. */
    .rd-works__col{display:contents}
    .rd-work{margin-bottom:0}
    .rd-work__collection{margin-top:20px;font-size:16px}
    .rd-work__title{margin-top:12px;font-size:28px;line-height:34px}
    .rd-work__size{margin-top:8px;font-size:20px}
    .rd-work__actions{margin-top:20px;gap:12px}
    /* кнопка не должна выдавливать иконки и номер за край */
    .rd-work__actions .rd-btn{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;width:auto;height:50px;font-size:16px}
    .rd-work__icon{width:50px;height:50px;-ms-flex-negative:0;flex-shrink:0}
    .rd-work__share img{width:32px;height:32px}
    .rd-work__order img{width:24px;height:31px}
    .rd-work__number{font-size:30px}
}

/* ==========================================================================
   Уроки (22.09.2026) — блок «My Lessons» на главной и раздел Art classes
   Макет блока: композиция 3714:469, область y=7541…8369. Кремовый фон,
   заголовок 60px, карточки 400×320 с оранжевым градиентом снизу и названием
   поверх, кнопка «all lessons» 250×60 по центру, круглые стрелки справа.
   Страницы уроков макета не имеют — свёрстаны по мотивам карточки работы.
   ========================================================================== */

/* Кремовая подложка — только у блока на главной: в макете она принадлежит
   ему, а раздел уроков идёт на общем белом фоне. */
.rd-lessons--home{background:var(--rd-cream)}
.rd-lessons__title{
    margin:0;
    font-family:var(--rd-serif);font-weight:400;color:var(--rd-ink);
    text-align:center;
}
.rd-lessons__title i{font-style:italic}
.rd-lessons__intro{font-family:var(--rd-sans);color:var(--rd-ink);text-align:center}
.rd-lessons__intro p{margin:0}
.rd-lessons__intro p+p{margin-top:20px}

.rd-lessons__grid{
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -ms-flex-wrap:wrap;flex-wrap:wrap;
    -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
}
/* Карточка: кадр, поверх — градиент и название. Ссылка целиком кликабельна. */
.rd-lesson{
    position:relative;display:block;overflow:hidden;
    text-decoration:none;color:var(--rd-ink);
}
.rd-lesson__img{
    display:block;width:100%;height:100%;
    -o-object-fit:cover;object-fit:cover;
    -webkit-transition:.4s -webkit-transform ease-in-out;transition:.4s transform ease-in-out;
}
.rd-lesson:hover .rd-lesson__img{-webkit-transform:scale(1.04);transform:scale(1.04)}
/* Затемнение к низу: фото остаётся видно, а белый текст читается.
   В макете карточки оформлены вразнобой — у одной оранжевая заливка,
   у остальных чёрное затемнение; взят второй вариант, он работает
   с любой фотографией. */
.rd-lesson__veil{
    position:absolute;left:0;right:0;bottom:0;top:30%;
    background:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,.88)));
    background:-o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.88) 100%);
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.88) 100%);
}
/* Текст прижат к низу карточки и растёт вверх внутри неё: у длинных
   названий он иначе вылезает за кадр и обрезается. */
.rd-lesson__text{
    position:absolute;left:0;right:0;top:0;bottom:0;
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-orient:vertical;-webkit-box-direction:normal;
    -ms-flex-direction:column;flex-direction:column;
    -webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;
    overflow:hidden;
}
.rd-lesson__name{
    display:block;
    font-family:var(--rd-serif);font-weight:400;color:#fff;
}
.rd-lesson__name i{font-style:italic}
.rd-lesson__note{display:block;font-family:var(--rd-sans);color:rgba(255,255,255,.85)}

/* Кнопка по центру, стрелки — у правого края, как в макете */
.rd-lessons__footer{
    position:relative;
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
    -webkit-box-align:center;-ms-flex-align:center;align-items:center;
}
.rd-lessons__arrows{
    position:absolute;right:0;top:0;
    display:-webkit-box;display:-ms-flexbox;display:flex;gap:20px;
}
.rd-lessons__arrow{
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-align:center;-ms-flex-align:center;align-items:center;
    -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
    width:60px;height:60px;padding:0;
    background:transparent;border:0;cursor:pointer;
}
.rd-lessons__arrow img{display:block;width:60px;height:60px}
/* Пока уроков мало и листать нечего — стрелки не показываем */
.rd-lessons__arrows[hidden]{display:none}

/* --- страница урока ------------------------------------------------------ */

/* Картинка идёт первой в текстовой колонке — шириной колонки, не на всю
   страницу: так заголовок и врезка с условиями видны сразу. */
.rd-class__banner{margin-bottom:40px}
.rd-class__banner img{display:block;width:100%;height:auto}
.rd-class__title{margin:0;font-family:var(--rd-serif);font-weight:400;color:var(--rd-ink)}
.rd-class__subtitle{font-family:var(--rd-sans);color:rgba(0,0,0,.6)}
.rd-class__text{font-family:var(--rd-sans);color:var(--rd-ink)}
.rd-class__text p{margin:0}
.rd-class__text p+p{margin-top:20px}
.rd-class__text h2{
    margin:40px 0 16px;
    font-family:var(--rd-serif);font-weight:400;
}
.rd-class__text ul{margin:16px 0 0;padding:0;list-style:none}
/* абзац после списка иначе прилипает к последнему пункту */
.rd-class__text ul+p{margin-top:20px}
.rd-class__text li{position:relative;padding-left:24px}
.rd-class__text li+li{margin-top:10px}
.rd-class__text li::before{
    content:"";position:absolute;left:0;top:11px;
    width:8px;height:8px;background:var(--rd-beige);
}
/* врезка с условиями: фон кремовый, чтобы отделиться от текста */
.rd-class__facts{background:var(--rd-cream)}
.rd-class__fact{
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-orient:vertical;-webkit-box-direction:normal;
    -ms-flex-direction:column;flex-direction:column;
    font-family:var(--rd-sans);
}
.rd-class__fact+.rd-class__fact{border-top:1px solid rgba(0,0,0,.1)}
.rd-class__fact span{color:rgba(0,0,0,.55);text-transform:uppercase}
.rd-class__fact b{font-weight:400;color:var(--rd-ink)}
.rd-class__fact--price b{font-family:var(--rd-serif)}

@media (min-width:1280px){
    .rd-lessons--home{padding:100px 0 126px}
    .rd-lessons--page{padding:100px 0 140px}
    .rd-lessons__inner{width:1350px;margin:0 auto}
    .rd-lessons__title{font-size:60px;line-height:normal}
    .rd-lessons__intro{max-width:848px;margin:24px auto 0;font-size:20px;line-height:30px}
    /* карточки 400×320 с шагом 448 (в макете x=312, 760, 1208, 1656) */
    /* карточки идут от левого края контента, как в макете (x=312 при 1920) */
    .rd-lessons__grid{gap:48px;margin-top:11px;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}
    .rd-lesson{width:400px;height:320px}
    .rd-lesson__text{padding:24px}
    .rd-lesson__name{font-size:32px;line-height:36px}
    .rd-lesson__note{margin-top:6px;font-size:18px;line-height:30px}
    /* в разделе плитки крупные: две в ряд при контенте 1350 */
    .rd-lessons--page .rd-lessons__grid{gap:54px;margin-top:60px}
    .rd-lessons--page .rd-lesson{width:648px;height:420px}
    .rd-lessons--page .rd-lesson__text{padding:32px}
    .rd-lessons--page .rd-lesson__name{font-size:40px;line-height:44px}
    .rd-lessons__footer{margin-top:80px}
    .rd-lessons__all{width:250px}

    .rd-class{padding:40px 0 140px}
    .rd-class__head{max-width:848px;margin:40px auto 0;text-align:center}
    .rd-class__title{font-size:48px;line-height:normal}
    .rd-class__subtitle{margin-top:12px;font-size:20px;line-height:30px}
    .rd-class__body{
        display:-webkit-box;display:-ms-flexbox;display:flex;
        -webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;
        gap:96px;margin-top:60px;
    }
    .rd-class__text{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;font-size:20px;line-height:30px}
    .rd-class__text h2{font-size:30px}
    .rd-class__aside{-ms-flex-negative:0;flex-shrink:0;width:400px}
    .rd-class__facts{padding:32px}
    .rd-class__fact{padding:16px 0;font-size:18px;line-height:26px}
    .rd-class__fact span{font-size:14px;letter-spacing:.04em}
    .rd-class__fact--price b{font-size:28px}
    .rd-class__book{margin-top:24px;width:100%}
}

@media (min-width:1024px) and (max-width:1279px){
    .rd-lessons--home{padding:80px 0 90px}
    .rd-lessons--page{padding:70px 0 100px}
    .rd-lessons .container{padding:0 40px}
    .rd-lessons__title{font-size:52px;line-height:normal}
    .rd-lessons__intro{margin-top:20px;font-size:18px;line-height:28px}
    .rd-lessons__grid{gap:40px;margin-top:40px}
    .rd-lesson{width:calc(50% - 20px);height:280px}
    .rd-lesson__text{padding:24px}
    .rd-lesson__name{font-size:30px;line-height:34px}
    .rd-lesson__note{margin-top:6px;font-size:16px;line-height:24px}
    .rd-lessons__footer{margin-top:60px}
    .rd-lessons__all{width:250px}

    .rd-class{padding:30px 0 100px}
    .rd-class .container{padding:0 40px}
    .rd-class__head{margin-top:32px;text-align:center}
    .rd-class__title{font-size:36px;line-height:normal}
    .rd-class__subtitle{margin-top:10px;font-size:18px}
    .rd-class__body{
        display:-webkit-box;display:-ms-flexbox;display:flex;
        -webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;
        gap:48px;margin-top:40px;
    }
    .rd-class__text{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;font-size:18px;line-height:28px}
    .rd-class__text h2{font-size:26px}
    .rd-class__aside{-ms-flex-negative:0;flex-shrink:0;width:320px}
    .rd-class__facts{padding:24px}
    .rd-class__fact{padding:14px 0;font-size:16px;line-height:24px}
    .rd-class__fact span{font-size:13px}
    .rd-class__fact--price b{font-size:24px}
    .rd-class__book{margin-top:20px;width:100%}
}

@media (max-width:1023px){
    .rd-lessons--home{padding:50px 0 60px}
    .rd-lessons--page{padding:30px 0 60px}
    .rd-lessons .container{padding:0 24px}
    .rd-lessons__title{font-size:34px;line-height:1.2}
    .rd-lessons__intro{margin-top:16px;font-size:18px;line-height:26px}
    .rd-lessons__grid{
        -webkit-box-orient:vertical;-webkit-box-direction:normal;
        -ms-flex-direction:column;flex-direction:column;
        gap:24px;margin-top:30px;
    }
    .rd-lesson{width:100%;height:240px}
    .rd-lesson__text{padding:20px}
    .rd-lesson__name{font-size:26px;line-height:30px}
    .rd-lesson__note{margin-top:6px;font-size:16px;line-height:22px}
    .rd-lessons__footer{margin-top:40px}
    .rd-lessons__all{width:100%;min-width:0;height:50px;font-size:18px}
    /* на узком экране стрелки не помещаются рядом с кнопкой */
    .rd-lessons__arrows{display:none}

    .rd-class{padding:24px 0 60px}
    .rd-class .container{padding:0 24px}
    .rd-class__head{margin-top:24px}
    .rd-class__title{font-size:28px;line-height:1.2}
    .rd-class__subtitle{margin-top:8px;font-size:16px}
    .rd-class__body{margin-top:30px}
    .rd-class__text{font-size:18px;line-height:26px}
    .rd-class__text h2{font-size:22px;margin:30px 0 12px}
    .rd-class__aside{margin-top:40px}
    .rd-class__facts{padding:20px}
    .rd-class__fact{padding:12px 0;font-size:16px;line-height:24px}
    .rd-class__fact span{font-size:13px}
    .rd-class__fact--price b{font-size:22px}
    .rd-class__book{margin-top:20px;width:100%;min-width:0;height:50px;font-size:18px}
}

/* --- формы: выбор темы и зависимые списки -------------------------------- */

/* Строка со списком, который относится к выбранной теме. Прячем через
   атрибут, а не класс: разметка остаётся понятной без скрипта, и до его
   загрузки пользователь не видит лишних полей. */
.rd-form__row[hidden]{display:none !important}

/* --- подборка других уроков внизу страницы курса ------------------------- */

.rd-class__related-title{
    margin:0;
    font-family:var(--rd-serif);font-weight:400;color:var(--rd-ink);
    text-align:center;
}

@media (min-width:1280px){
    .rd-class__related{margin-top:120px}
    .rd-class__related-title{font-size:40px;line-height:normal}
    .rd-class__related .rd-lessons__grid{gap:48px;margin-top:40px}
    .rd-class__related .rd-lesson{width:400px;height:320px}
}
@media (min-width:1024px) and (max-width:1279px){
    .rd-class__related{margin-top:90px}
    .rd-class__related-title{font-size:32px;line-height:normal}
    .rd-class__related .rd-lessons__grid{gap:40px;margin-top:32px}
}
@media (max-width:1023px){
    .rd-class__related{margin-top:60px}
    .rd-class__related-title{font-size:26px;line-height:1.2}
    .rd-class__related .rd-lessons__grid{gap:24px;margin-top:24px}
}

/* ==========================================================================
   Навигация между картинами (22.09.2026) — низ страницы работы
   Старая вёрстка показывала только кружок-стрелку и превью 50×50 с тенью,
   а названия были скрыты `display:none` — блок выглядел пустой полосой.
   Здесь он собран заново; старые классы перекрываются своими правилами.
   ========================================================================== */

.rd-artnav{
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
    -webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;
    gap:24px;
}
.rd-artnav__item{
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-align:center;-ms-flex-align:center;align-items:center;
    gap:20px;text-decoration:none;color:var(--rd-ink);
    -webkit-transition:.25s all ease-in-out;-o-transition:.25s all ease-in-out;transition:.25s all ease-in-out;
}
.rd-artnav__item--next{margin-left:auto;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;text-align:right}
.rd-artnav__arrow{
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-align:center;-ms-flex-align:center;align-items:center;
    -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
    -ms-flex-negative:0;flex-shrink:0;
    border:2px solid var(--rd-ink);
}
.rd-artnav__arrow img{display:block}
.rd-artnav__item--prev .rd-artnav__arrow img{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}
.rd-artnav__item:hover .rd-artnav__arrow{background:var(--rd-ink)}
.rd-artnav__item:hover .rd-artnav__arrow img{-webkit-filter:invert(1);filter:invert(1)}
.rd-artnav__img{-ms-flex-negative:0;flex-shrink:0;overflow:hidden}
.rd-artnav__img img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.rd-artnav__label{
    display:block;font-family:var(--rd-sans);text-transform:uppercase;
    color:rgba(0,0,0,.5);
}
.rd-artnav__name{display:block;font-family:var(--rd-serif);color:var(--rd-ink)}
.rd-artnav__item:hover .rd-artnav__name{text-decoration:underline}

@media (min-width:1280px){
    .rd-artnav{margin:120px 0}
    .rd-artnav__arrow{width:60px;height:60px}
    .rd-artnav__arrow img{width:20px}
    .rd-artnav__img{width:120px;height:120px}
    .rd-artnav__label{font-size:14px;line-height:20px;letter-spacing:.04em}
    .rd-artnav__name{margin-top:6px;font-size:24px;line-height:30px}
}
@media (min-width:1024px) and (max-width:1279px){
    .rd-artnav{margin:80px 0}
    .rd-artnav__arrow{width:50px;height:50px}
    .rd-artnav__arrow img{width:18px}
    .rd-artnav__img{width:96px;height:96px}
    .rd-artnav__label{font-size:13px;line-height:18px}
    .rd-artnav__name{margin-top:4px;font-size:20px;line-height:26px}
}
@media (max-width:1023px){
    .rd-artnav{margin:50px 0;gap:16px}
    .rd-artnav__item{gap:12px}
    .rd-artnav__arrow{width:44px;height:44px}
    .rd-artnav__arrow img{width:16px}
    /* на узком экране превью только у текущего направления не помещается */
    .rd-artnav__img{display:none}
    .rd-artnav__label{font-size:12px;line-height:16px}
    .rd-artnav__name{margin-top:2px;font-size:16px;line-height:22px}
}

/* ==========================================================================
   События (21.09.2026) — раздел Events и блок «Last exhibitions» на главной
   Макет блока главной: нода 5760:279 (контент 1350 по центру): заголовок 60,
   карточки 400 с шагом 448 (зазор 48), картинка 400×320, дата 18/30,
   название 24, ссылка 18 в верхнем регистре, кнопка 250×60 по центру.
   ========================================================================== */

.rd-events__title{
    margin:0;
    font-family:var(--rd-serif);font-weight:400;color:var(--rd-ink);
    text-align:center;
}
.rd-events__title i{font-style:italic}
.rd-events__intro{font-family:var(--rd-sans);color:var(--rd-ink)}
.rd-events__intro p{margin:0}
.rd-events__intro p+p{margin-top:30px}

/* Афиши обычно вертикальные, а окно карточки — горизонтальное 400×320:
   вписываем целиком на подложку цвета заглушки, чтобы не срезать плакат. */
.rd-events__img{background:#FBF6E9}
.rd-events__img img{display:block;width:100%;height:320px;-o-object-fit:contain;object-fit:contain}
.rd-events__date{font-family:var(--rd-sans);color:var(--rd-ink)}
.rd-events__name{
    margin:0;
    font-family:var(--rd-serif);font-weight:400;color:var(--rd-ink);
}
.rd-events__more{
    display:inline-block;
    font-family:var(--rd-sans);text-transform:uppercase;
    color:var(--rd-ink);text-decoration:none;
    border-bottom:1px solid var(--rd-ink);
}
.rd-events__more:hover{color:var(--rd-ink);border-bottom-color:transparent}
/* кнопка не должна растягиваться на всю сетку: в макете 250x60 */
.rd-events__all{width:250px;margin:0 auto}

@media (min-width:1280px){
    /* В макете между блоками 150: от кремовой секции до заголовка событий
       и от кнопки «more about me» до следующего блока. */
    .rd-events--home{padding:150px 0}
    .rd-events--page{padding:100px 0 140px}
    .rd-events__inner{width:1350px;margin:0 auto}
    .rd-events__title{font-size:60px;line-height:normal}
    .rd-events__intro{max-width:848px;margin:30px auto 0;font-size:20px;line-height:30px}
    /* три карточки 400 с зазором 48 (в макете шаг 448) */
    .rd-events__grid{
        display:-ms-grid;display:grid;
        -ms-grid-columns:400px 48px 400px 48px 400px;
        grid-template-columns:repeat(3, 400px);
        -webkit-column-gap:48px;-moz-column-gap:48px;column-gap:48px;row-gap:60px;
        -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
        -webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;
        margin-top:3px;                       /* картинки в макете на y=134 */
    }
    .rd-events__date{margin-top:20px;font-size:18px;line-height:30px}
    .rd-events__name{margin-top:12px;font-size:24px;line-height:32px}
    .rd-events__more{margin-top:16px;font-size:18px;line-height:normal}
    .rd-events__all{margin-top:82px;display:-webkit-box;display:-ms-flexbox;display:flex}
}

@media (min-width:1024px) and (max-width:1279px){
    .rd-events--home{padding:90px 0}
    .rd-events--page{padding:70px 0 100px}
    .rd-events .container{padding:0 40px}
    .rd-events__title{font-size:52px;line-height:normal}
    .rd-events__intro{margin-top:24px;font-size:18px;line-height:28px}
    .rd-events__grid{
        display:-ms-grid;display:grid;
        -ms-grid-columns:1fr 40px 1fr 40px 1fr;
        grid-template-columns:repeat(3, minmax(0,1fr));
        -webkit-column-gap:40px;-moz-column-gap:40px;column-gap:40px;row-gap:48px;
        -webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;
        margin-top:40px;
    }
    .rd-events__img img{height:240px}
    .rd-events__date{margin-top:16px;font-size:16px;line-height:26px}
    .rd-events__name{margin-top:10px;font-size:20px;line-height:28px}
    .rd-events__more{margin-top:14px;font-size:16px}
    .rd-events__all{margin-top:50px;display:-webkit-box;display:-ms-flexbox;display:flex}
}

@media (max-width:1023px){
    .rd-events--home{padding:50px 0}
    .rd-events--page{padding:30px 0 60px}
    .rd-events .container{padding:0 24px}
    .rd-events__title{font-size:34px;line-height:1.2}
    .rd-events__intro{margin-top:20px;font-size:18px;line-height:26px}
    .rd-events__grid{
        display:-webkit-box;display:-ms-flexbox;display:flex;
        -webkit-box-orient:vertical;-webkit-box-direction:normal;
        -ms-flex-direction:column;flex-direction:column;
        gap:40px;margin-top:30px;
    }
    .rd-events__img img{height:220px}
    .rd-events__date{margin-top:14px;font-size:16px;line-height:26px}
    .rd-events__name{margin-top:8px;font-size:20px;line-height:28px}
    .rd-events__more{margin-top:12px;font-size:16px}
    .rd-events__all{margin-top:40px;width:100%;min-width:0;height:50px;font-size:18px}
}

/* Страница отдельного события: макета нет, раскладка по образцу карточки работы */
.rd-event__inner{max-width:848px;margin:0 auto}
.rd-event__title{
    margin:0;
    font-family:var(--rd-serif);font-weight:400;color:var(--rd-ink);
}
.rd-event__date{font-family:var(--rd-sans);color:var(--rd-ink)}
.rd-event__img img{display:block;width:100%;height:auto}
.rd-event__text{font-family:var(--rd-sans);color:var(--rd-ink)}
.rd-event__text p{margin:0}
.rd-event__text p+p{margin-top:30px}
.rd-event__more{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:40px}

@media (min-width:1024px){
    .rd-event{padding:60px 0 140px}
    .rd-event__title{font-size:40px;line-height:normal}
    .rd-event__date{margin-top:16px;font-size:18px;line-height:30px}
    .rd-event__img{margin-top:40px}
    .rd-event__text{margin-top:40px;font-size:20px;line-height:30px}
}
@media (max-width:1023px){
    .rd-event{padding:30px 0 60px}
    .rd-event .container{padding:0 24px}
    .rd-event__title{font-size:28px;line-height:1.2}
    .rd-event__date{margin-top:12px;font-size:16px;line-height:26px}
    .rd-event__img{margin-top:24px}
    .rd-event__text{margin-top:24px;font-size:18px;line-height:26px}
    .rd-event__more{width:100%;min-width:0;height:50px;font-size:18px}
}

/* ==========================================================================
   Страница About (15.09.2026) — шаблон About (13)
   Макет: фрейм About 111:0. Блоки: художница 5710:110, цитата 5710:111,
   выставки 5710:112, статьи 5710:113. Мобильного макета у страницы нет.
   Префикс rd-artist, а не rd-about: .rd-about уже занят блоком главной.
   ========================================================================== */

.rd-artist__title,
.rd-artist__quote,
.rd-philosophy__quote,
.rd-exhibitions__title,
.rd-exhibitions__name,
.rd-articles__heading,
.rd-articles__title{
    margin:0;
    font-family:var(--rd-serif);font-weight:400;color:var(--rd-ink);
}
/* курсив макета — Lovelace Text Medium Italic (113:4, 3745:5); в style.min.css
   он объявлен как italic-начертание семейства LovelaceText-Medium */
.rd-artist__title i,
.rd-artist__quote i,
.rd-philosophy__quote i{font-style:italic}
.rd-artist__title,
.rd-artist__quote,
.rd-philosophy,
.rd-exhibitions__title,
.rd-articles__heading{text-align:center}

.rd-artist__caption,
.rd-artist__main,
.rd-philosophy__note,
.rd-exhibitions__date,
.rd-articles__site{font-family:var(--rd-sans);font-weight:400;color:var(--rd-ink)}
.rd-artist__caption p{margin:0}
.rd-philosophy__note{margin:0}
/* правая колонка — content ресурса: абзацы, цитата Делакруа
   (blockquote.rd-artist__quote) и абзац p.rd-artist__collections */
/* интервал — отступом сверху у соседнего абзаца: нижний отступ последнего
   абзаца схлопывался с отступом цитаты (берётся больший) и сдвигал её на 2px */
.rd-artist__main p{margin:0}
.rd-artist__main p+p{margin-top:30px}
.rd-artist__main .rd-artist__quote{margin:0}
.rd-artist__main .rd-artist__collections{margin:0}

/* --- 1. художница: фото с подписью | текст, цитата, коллекции ------------ */

.rd-artist__photo img{
    display:block;width:100%;height:100%;
    -o-object-fit:cover;object-fit:cover;
}

/* --- 2. цитата на кремовом фоне (3750:40, #FBF6E9) ----------------------- */

.rd-philosophy{background:var(--rd-cream)}
/* кавычка — нода 3750:41, 50x44 */
.rd-philosophy__mark{
    display:block;width:50px;height:44px;margin:0 auto;
    background:url(../img/icons/quote-mark.svg) no-repeat 0 0;background-size:50px 44px;
}
.rd-philosophy__quote{margin-left:auto;margin-right:auto}

/* --- 3. выставки: баннер и список в две колонки -------------------------- */

.rd-exhibitions__banner img{display:block;width:100%;height:auto}
/* Афиш в MIGX может быть несколько. Одна — картинка во всю ширину;
   две и больше — слайдер Slick (скрипт в шаблоне About). Пока скрипт
   не отработал или без JS — афиши стоят друг под другом. */
.rd-exhibitions__slide+.rd-exhibitions__slide{margin-top:24px}
.rd-exhibitions__banner--slider{position:relative}
/* style.min.css глобально разносит слайды Slick под слайдер главной:
   .slick-slide{margin:0 235px} и .slick-list{margin:0 -235px}
   (на узких экранах 150/90/40) — в баннере афиш слайды встык */
.rd-exhibitions__banner .slick-list,
.rd-exhibitions__banner .slick-slide{margin:0}
/* там же .slick-track{display:flex;align-items:center}: при афишах разной
   высоты короткая центрируется по высокой и обрезается снизу — прижимаем к верху */
.rd-exhibitions__banner .slick-track{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
/* Slick оборачивает каждый слайд в div с display:inline-block — под картинкой
   оставался запас строки (9px при line-height 30) белой полоской */
.rd-exhibitions__banner .slick-slide{line-height:0}
.rd-exhibitions__banner--slider .rd-exhibitions__slide+.rd-exhibitions__slide{margin-top:0}
/* Стрелки — как у остальных слайдеров сайта (.slider__arrows): белый круг
   60px со стрелкой arrow-short.svg; свои классы, потому что у .slider__arrows
   позиции подогнаны под слайдер главной. Центр — по картинке, без точек снизу. */
.rd-exhibitions__arrow{
    position:absolute;z-index:2;
    top:calc((100% - 39px) / 2);left:auto;right:20px;
    width:60px;height:60px;margin:-30px 0 0;padding:0;
    border:2px solid #fff;border-radius:50%;
    background:rgba(0,0,0,.25) url(../img/icons/arrow-short.svg) no-repeat 50% 50%;
    background-size:31px 16px;
    font-size:0;cursor:pointer;
    -webkit-transition:.3s all ease-in-out;-o-transition:.3s all ease-in-out;transition:.3s all ease-in-out;
}
.rd-exhibitions__arrow--prev{
    left:20px;right:auto;
    -webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);
}
.rd-exhibitions__arrow:hover{background-color:rgba(237,215,182,.4);border-color:rgba(237,215,182,.4)}
/* точки — цвета старой вёрстки (бежевые, активная чёрная), но в потоке под
   картинкой: глобальное .slick-dots стоит абсолютно на 60px ниже слайдера */
.rd-exhibitions__banner .slick-dots{
    position:static;-webkit-transform:none;-ms-transform:none;transform:none;
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
    margin:24px 0 0;padding:0;list-style:none;line-height:0;
}
.rd-exhibitions__banner .slick-dots li{margin:0 6px;line-height:0}
/* оформление точек старой вёрстки на десктопе не действует (там видны
   цифры «1 2»), поэтому задаём целиком: кружок 15px, бежевый, активный чёрный */
.rd-exhibitions__banner .slick-dots button{
    display:block;width:15px;height:15px;padding:0;
    border:0;border-radius:50%;background:var(--rd-beige);
    font-size:0;line-height:0;color:transparent;cursor:pointer;
}
.rd-exhibitions__banner .slick-dots .slick-active button{background:var(--rd-ink)}

/* на мобильной баннер ~121px в высоту, и стрелки закрывали треть афиши —
   по решению Павла 15.09 их нет: листается свайпом, видны точки */
@media (max-width:1023px){
    .rd-exhibitions__arrow{display:none!important}
    .rd-exhibitions__banner .slick-dots{margin-top:16px}
}
.rd-exhibitions__item{margin:0}
.rd-exhibitions__date{display:block}

/* --- 4. статьи -----------------------------------------------------------
   Карточки раскладывает скрипт в шаблоне: каждая — в более низкую колонку
   (.rd-articles__col). Без скрипта и на мобильной — обычная сетка. */

.rd-articles{background:var(--rd-cream)}
.rd-articles__title a{color:inherit;text-decoration:none}
.rd-articles__title a:hover{text-decoration:underline}
.rd-articles__img{display:block}
.rd-articles__img img{display:block;width:100%;height:auto}
/* разворот из двух страниц (второе поле-картинка статьи) — ноды 113:12, 113:14 */
.rd-articles__img--pair{
    display:-ms-grid;display:grid;
    -ms-grid-columns:1fr 4px 1fr;grid-template-columns:1fr 1fr;
    -webkit-column-gap:4px;-moz-column-gap:4px;column-gap:4px;
}
.rd-articles__col{
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-orient:vertical;-webkit-box-direction:normal;
    -ms-flex-direction:column;flex-direction:column;
    gap:40px;min-width:0;
}

@media (min-width:1280px){
    /* фрейм 5710:110 — 1050px по центру (x=436), 150px под шапкой;
       колонки 500 с зазором 48 */
    .rd-artist{padding-top:150px}
    .rd-artist__inner{width:1050px;margin:0 auto}
    /* заголовок 60/72 (3745:5) */
    .rd-artist__title{font-size:60px;line-height:72px}
    .rd-artist__cols{
        display:-ms-grid;display:grid;
        -ms-grid-columns:500px 48px 500px;grid-template-columns:500px 500px;
        -webkit-column-gap:48px;-moz-column-gap:48px;column-gap:48px;
        -webkit-box-align:start;-ms-flex-align:start;align-items:start;
        margin-top:46px;                          /* текст 111:10 на y=190 */
    }
    .rd-artist__photo{margin-top:8px;height:643px}  /* 113:39 на y=198 */
    .rd-artist__caption{margin-top:30px;font-size:20px;line-height:30px}   /* 113:7 */
    .rd-artist__main{font-size:20px;line-height:30px}                      /* 111:10 */
    /* цитата 3745:6: 30/40, бокс 459 на y=908 — отступ подобран по чернилам:
       21 строка текста над ней совпадает с макетом строка в строку */
    .rd-artist__main .rd-artist__quote{width:459px;margin-top:28px;font-size:30px;line-height:40px}
    /* 3745:7 в макете шире колонки: x=542, 508px — иначе абзац не в 2 строки, а в 3 */
    .rd-artist__main .rd-artist__collections{width:508px;margin:26px 0 0 -6px}

    /* фрейм 5710:111 — 550px на y=1496: кавычка на 109, цитата 48/60 на 192,
       подпись 20/30 на 395 */
    /* кремовый фон 3750:40 — 1496..2045; коллекции кончаются на 1364 */
    .rd-philosophy{margin-top:132px;height:550px;padding-top:109px}
    /* бокс ноды 3750:113 — 653px, но строки в макете переносятся уже:
       «Our life can be / colorful and beautiful, / the way we create it.»
       Замерено нашим шрифтом: «colorful and beautiful,» 561px,
       «Our life can be colorful» 579px — ширина 570 даёт переносы макета */
    .rd-philosophy__quote{width:570px;margin-top:39px;font-size:48px;line-height:60px}
    .rd-philosophy__note{margin-top:23px;font-size:20px;line-height:30px}

    /* фрейм 5710:112 — 1048px на y=2186: заголовок 60 (высота строки 84),
       баннер 1048x388 на 121, списки на 578 */
    /* низ подобран по чернилам: от последней даты до фона статей 135px,
       фон статей в макете с 3490 */
    .rd-exhibitions{padding:140px 0 86px}
    .rd-exhibitions__inner{width:1048px;margin:0 auto}
    .rd-exhibitions__title{font-size:60px;line-height:84px}
    .rd-exhibitions__banner{margin-top:37px}
    .rd-exhibitions__cols{
        display:-ms-grid;display:grid;
        -ms-grid-columns:500px 48px 500px;grid-template-columns:500px 500px;
        -webkit-column-gap:48px;-moz-column-gap:48px;column-gap:48px;
        -webkit-box-align:start;-ms-flex-align:start;align-items:start;
        margin-top:69px;
    }
    /* пункт: название 30/40, дата 20/35, пустая строка 35 (111:48) */
    .rd-exhibitions__item{margin-bottom:35px}
    .rd-exhibitions__name{font-size:30px;line-height:40px}
    .rd-exhibitions__date{font-size:20px;line-height:35px}

    /* фрейм 5710:113 — 1422px: «Articles» на 147 (кегль 60, строка 35),
       карточки с 251, колонки 500 | 500 */
    .rd-articles{padding:147px 0 127px}
    .rd-articles__heading{font-size:60px;line-height:35px}
    .rd-articles__items{
        display:-ms-grid;display:grid;
        -ms-grid-columns:500px 48px 500px;grid-template-columns:500px 500px;
        -webkit-column-gap:48px;-moz-column-gap:48px;column-gap:48px;row-gap:40px;
        -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
        -webkit-box-align:start;-ms-flex-align:start;align-items:start;
        margin-top:69px;
    }
    /* заголовок 30/40, источник 20/35 (113:17), скан 500 шириной (113:10) */
    /* бокс заголовка 485, а не 500 (3750:38): иначе «of an Artist» переносится
       не так, как в макете */
    .rd-articles__title{max-width:485px;font-size:30px;line-height:40px}
    .rd-articles__site{margin-top:5px;font-size:20px;line-height:35px}
    .rd-articles__img{margin-top:27px}
}

/* --- планшет 1024–1279: те же колонки, но резиновые ---------------------- */

@media (min-width:1024px) and (max-width:1279px){
    .rd-artist .container,
    .rd-exhibitions .container,
    .rd-articles .container{padding:0 40px}
    .rd-artist{padding-top:90px}
    .rd-artist__title{font-size:52px;line-height:62px}
    .rd-artist__cols,
    .rd-exhibitions__cols,
    .rd-articles__items{
        display:-ms-grid;display:grid;
        -ms-grid-columns:1fr 48px 1fr;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        -webkit-column-gap:48px;-moz-column-gap:48px;column-gap:48px;row-gap:40px;
        -webkit-box-align:start;-ms-flex-align:start;align-items:start;
    }
    .rd-artist__cols{margin-top:40px}
    .rd-artist__photo{height:auto}
    .rd-artist__photo img{height:auto;aspect-ratio:500/643}
    .rd-artist__caption{margin-top:24px;font-size:18px;line-height:28px}
    .rd-artist__main{font-size:18px;line-height:28px}
    .rd-artist__main p+p{margin-top:28px}
    .rd-artist__main .rd-artist__quote{margin-top:50px;font-size:28px;line-height:38px}
    .rd-artist__main .rd-artist__collections{margin-top:24px}

    .rd-philosophy{margin-top:100px;padding:90px 40px}
    .rd-philosophy__quote{max-width:653px;margin-top:32px;font-size:42px;line-height:54px}
    .rd-philosophy__note{margin-top:20px;font-size:18px;line-height:28px}

    .rd-exhibitions{padding:100px 0 90px}
    .rd-exhibitions__title{font-size:52px;line-height:62px}
    .rd-exhibitions__banner{margin-top:32px}
    .rd-exhibitions__cols{margin-top:50px}
    .rd-exhibitions__item{margin-bottom:30px}
    .rd-exhibitions__name{font-size:26px;line-height:34px}
    .rd-exhibitions__date{font-size:18px;line-height:32px}

    .rd-articles{padding:90px 0 100px}
    .rd-articles__heading{font-size:52px;line-height:62px}
    .rd-articles__items{margin-top:50px}
    .rd-articles__title{font-size:26px;line-height:34px}
    .rd-articles__site{margin-top:5px;font-size:18px;line-height:32px}
    .rd-articles__img{margin-top:20px}
}

/* --- мобильная: одна колонка (макета нет, кегли — как у блоков главной) --- */

@media (max-width:1023px){
    .rd-artist .container,
    .rd-exhibitions .container,
    .rd-articles .container{padding:0 24px}
    .rd-artist{padding-top:40px}
    .rd-artist__title{font-size:34px;line-height:42px}
    .rd-artist__cols{margin-top:30px}
    .rd-artist__photo img{height:auto;aspect-ratio:500/643}
    .rd-artist__caption{margin-top:20px;font-size:18px;line-height:26px}
    .rd-artist__main{margin-top:36px;font-size:18px;line-height:26px}
    .rd-artist__main p+p{margin-top:26px}
    .rd-artist__main .rd-artist__quote{margin-top:36px;font-size:26px;line-height:34px}
    .rd-artist__main .rd-artist__collections{margin-top:20px}

    .rd-philosophy{margin-top:60px;padding:50px 24px}
    .rd-philosophy__quote{margin-top:24px;font-size:30px;line-height:40px}
    .rd-philosophy__note{margin-top:16px;font-size:18px;line-height:26px}

    .rd-exhibitions{padding:60px 0 50px}
    .rd-exhibitions__title{font-size:40px;line-height:48px}
    .rd-exhibitions__banner{margin-top:24px}
    .rd-exhibitions__cols{margin-top:30px}
    .rd-exhibitions__item{margin-bottom:26px}
    .rd-exhibitions__name{font-size:24px;line-height:32px}
    .rd-exhibitions__date{font-size:18px;line-height:30px}

    .rd-articles{padding:50px 0 60px}
    .rd-articles__heading{font-size:40px;line-height:48px}
    .rd-articles__items{
        display:-webkit-box;display:-ms-flexbox;display:flex;
        -webkit-box-orient:vertical;-webkit-box-direction:normal;
        -ms-flex-direction:column;flex-direction:column;
        gap:40px;margin-top:30px;
    }
    .rd-articles__title{font-size:24px;line-height:32px}
    .rd-articles__site{margin-top:4px;font-size:18px;line-height:30px}
    .rd-articles__img{margin-top:16px}
}

/* ---------------------------------------------------------------------------
   Селекты в модалках подвала (заказ картины и заявка), 23.09.2026.
   В модалке поля старой вёрстки: белый фон, рамка 1px #ececec, кегль 18,
   высота 42, левый отступ 15. Виджет селекта оставался прозрачным
   с чёрной линией снизу и выпадал из ряда — приводим его к полям.
   На странице контактов у селектов свой стиль по макету (.rd-contact выше),
   поэтому правила ограничены модалками.
   --------------------------------------------------------------------------- */
.modal .custom-select{max-width:500px;margin:0 0 15px}
.modal .select-selected{
    position:relative;
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -webkit-box-align:center;-ms-flex-align:center;align-items:center;
    height:42px;padding:0 40px 0 15px;
    border:1px solid #ececec;border-radius:0;background:#fff;
    font-family:var(--rd-sans);font-size:18px;line-height:1.15;color:var(--rd-ink);
    white-space:nowrap;overflow:hidden;
}
.modal .select-selected:hover{border-color:rgba(0,0,0,.35)}
/* стрелка — тот же шеврон, что на контактах */
.modal .select-selected:after{
    right:15px;width:6.273px;height:11.047px;
    background:url(../img/icons/select-chevron.svg) no-repeat 0 0;
    background-size:100% 100%;
    -webkit-transform:translateY(-50%) rotate(90deg);
    -ms-transform:translateY(-50%) rotate(90deg);
    transform:translateY(-50%) rotate(90deg);
}
.modal .select-selected.select-arrow-active{border-color:rgba(0,0,0,.35)}
.modal .select-selected.select-arrow-active:after{
    -webkit-transform:translateY(-50%) rotate(-90deg);
    -ms-transform:translateY(-50%) rotate(-90deg);
    transform:translateY(-50%) rotate(-90deg);
}
/* у старой вёрстки список тянулся на min-height:138px независимо от числа
   пунктов — в модалке это оставляло пустое белое поле под коротким списком */
.modal .select-items{
    height:auto;min-height:0;max-height:220px;
    border:1px solid #ececec;border-top:0;background:#fff;
}
.modal .select-items>div{
    padding:9px 15px;border-bottom:1px solid rgba(0,0,0,.08);
    font-family:var(--rd-sans);font-size:18px;line-height:22px;
}
.modal .select-items>div:last-child{border-bottom:0}
.modal .select-items>div:hover,
.modal .select-items>div.same-as-selected{background:#faf6ec}

/* на узких экранах поля модалки остаются 42px с кеглем 17 и отступом 15 —
   селект держим ровно тем же, иначе он снова выбивается из ряда */
@media (max-width:767px){
    .modal .select-selected{font-size:17px;height:42px;padding:0 36px 0 15px}
    .modal .select-items>div{font-size:17px;padding:9px 15px}
}