/* Макет «Палитра».

   Собран по образцу витрин с категориями товаров. Что там сделано и что
   повторено здесь:

     * белый фон, а цвет — не заливка экрана, а большое мягкое пятно справа.
       Первая моя версия закрашивала слайд целиком, и это было совсем не то:
       страница получалась плакатной, а не спокойной;
     * поверх всей страницы — тонкая сетка вертикальных линеек. Она ничего
       не разделяет, но задаёт ритм и делает пустоту осмысленной;
     * заголовок крупный и лёгкий: 80 пикселей нормальным начертанием, а не
       жирным. Жирный на таком размере давит;
     * подпись под ним — моноширинная и мелкая. Контраст с огромным
       заголовком и держит всю композицию;
     * кнопка-таблетка в цвете слайда, подпись капителью;
     * слева на поле — номер слайда, внизу по центру — точки.

   Перелистывание сделано прокруткой с прилипанием, без скрипта: палец
   на телефоне, колесо и стрелки на компьютере. Без JavaScript остаётся
   просто длинная лента — ломаться нечему.

   Тёмные темы к макету не применяются: он единственный светлый в проекте
   (см. pages.NO_MAIN_THEME). */

:root{
  --paper:#ffffff;
  --ink:#231f20;
  --ink-soft:#6b6a6b;
  --hair:rgba(35,31,32,.10);   /* линейки сетки: заметны только вблизи */
  --radius:999px;

  /* Пять пар «пятно — кнопка». Пятно бледное, кнопка насыщенная: на бледном
     фоне читается предмет, на насыщенной кнопке — белая подпись. */
  --b1:#e6f4f1;  --a1:#0f766e;
  --b2:#e8efff;  --a2:#1f4fd8;
  --b3:#fdeee6;  --a3:#c2410c;
  --b4:#f1e9fe;  --a4:#7c3aed;
  --b5:#fde9e9;  --a5:#b91c1c;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html{ background:var(--paper); scroll-behavior:smooth; }
body{ background:var(--paper); color:var(--ink); line-height:1.5;
      font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; }
a{ color:inherit; text-decoration:none; }
.wrap{ width:100%; max-width:1180px; margin:0 auto; padding:0 40px; }

/* ─── сетка линеек ────────────────────────────────────────────────────────
   Рисуется одним фиксированным слоем: четыре вертикали по краям и одна
   посередине. Слой не перехватывает нажатия и не участвует в прокрутке. */
.grid-lines{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--hair), var(--hair)),
    linear-gradient(var(--hair), var(--hair)),
    linear-gradient(var(--hair), var(--hair)),
    linear-gradient(var(--hair), var(--hair)),
    linear-gradient(var(--hair), var(--hair));
  background-size:1px 100%, 1px 100%, 1px 100%, 1px 100%, 1px 100%;
  background-position:40px 0, 120px 0, 50% 0, calc(100% - 120px) 0, calc(100% - 40px) 0;
  background-repeat:no-repeat;
}
main, header, footer{ position:relative; z-index:1; }

/* ─── шапка ───────────────────────────────────────────────────────────── */
.bar{ position:sticky; top:0; z-index:60; background:var(--paper); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px;
      padding:22px 40px; }
.brand{ display:inline-flex; align-items:center; gap:10px; font-weight:700;
        font-size:19px; letter-spacing:.14em; text-transform:uppercase; }
.brand-mark{ width:26px; height:26px; }

/* ─── кнопки ──────────────────────────────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; justify-content:center;
      border:0; border-radius:var(--radius); padding:14px 30px; font-size:11px;
      font-weight:700; letter-spacing:.13em; text-transform:uppercase;
      cursor:pointer; font-family:inherit; transition:opacity .15s, background .15s; }
.btn:hover{ opacity:.85; }
.btn-lg{ padding:17px 38px; font-size:12px; }
.btn-solid{ background:var(--ink); color:#fff; }
.btn-line{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px rgba(35,31,32,.2); }

/* ─── заглавный экран ─────────────────────────────────────────────────── */
.intro{ padding:70px 0 40px; }
.kicker{ display:inline-block; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
         font-size:12px; letter-spacing:.16em; text-transform:uppercase;
         color:var(--ink-soft); margin-bottom:26px; }
h1{ font-size:clamp(40px,7vw,82px); line-height:1.02; font-weight:400;
    letter-spacing:-.02em; max-width:15ch; }
.lead{ margin-top:24px; max-width:44ch; color:var(--ink);
       font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
       font-size:14px; line-height:1.6; }
.intro-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.note{ margin-top:16px; color:var(--ink-soft);
       font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; }

/* ─── лента слайдов ───────────────────────────────────────────────────────
   Листается вверх-вниз. Это отдельный скроллер, а не прокрутка страницы:
   автолистание не должно уводить экран, пока человек читает первый блок.
   Полоса прокрутки спрятана — её роль играют точки справа. */
.deck{ display:block; height:clamp(560px,86vh,900px); overflow-y:auto;
       scroll-snap-type:y mandatory; overscroll-behavior:contain;
       scrollbar-width:none; -ms-overflow-style:none; }
.deck::-webkit-scrollbar{ display:none; }

.slide{ position:relative; height:100%; scroll-snap-align:start;
        display:flex; align-items:center; overflow:hidden; }
.slide .wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
              gap:40px; align-items:center; position:relative; z-index:1; }

/* Пятно: мягкая асимметричная форма, уходящая за правый край экрана.
   Именно она даёт слайду цвет — фон страницы остаётся белым. */
.blob{ position:absolute; top:-6%; right:-16%; width:74%; height:112%;
       border-radius:58% 42% 52% 48% / 62% 56% 44% 38%;
       transform:rotate(-8deg); z-index:0;
       animation:morph 18s ease-in-out infinite alternate,
                 drift 24s ease-in-out infinite alternate; }
/* Форма и качание разведены в две анимации с разной длиной цикла: если
   двигать одним ключевым кадром, движение читается как ровная петля */
@keyframes morph{
  0%{   border-radius:58% 42% 52% 48% / 62% 56% 44% 38%; }
  50%{  border-radius:44% 56% 38% 62% / 48% 42% 58% 52%; }
  100%{ border-radius:52% 48% 60% 40% / 56% 62% 38% 44%; }
}
@keyframes drift{
  0%{   transform:rotate(-8deg) translate3d(0, 0, 0) scale(1); }
  50%{  transform:rotate(-4deg) translate3d(-2%, 2%, 0) scale(1.04); }
  100%{ transform:rotate(-10deg) translate3d(1%, -2%, 0) scale(.98); }
}
.slide:nth-child(5n+1) .blob{ background:var(--b1); }
.slide:nth-child(5n+2) .blob{ background:var(--b2); }
.slide:nth-child(5n+3) .blob{ background:var(--b3); }
.slide:nth-child(5n+4) .blob{ background:var(--b4); }
.slide:nth-child(5n+5) .blob{ background:var(--b5); }
.slide:nth-child(5n+1) .go{ background:var(--a1); }
.slide:nth-child(5n+2) .go{ background:var(--a2); }
.slide:nth-child(5n+3) .go{ background:var(--a3); }
.slide:nth-child(5n+4) .go{ background:var(--a4); }
.slide:nth-child(5n+5) .go{ background:var(--a5); }

.slide .num{ position:absolute; left:8px; top:24px;
             font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
             font-size:12px; color:var(--ink-soft); z-index:2; }
.slide .num::after{ content:''; display:block; width:1px; height:38px;
                    background:rgba(35,31,32,.25); margin:8px auto 0; }

.slide h2{ font-size:clamp(44px,8.4vw,96px); line-height:.98; font-weight:400;
           letter-spacing:-.025em; }
.slide .say{ margin-top:22px; max-width:40ch;
             font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
             font-size:13.5px; line-height:1.7; color:#3b3839; }
.slide .go{ display:inline-flex; align-items:center; justify-content:center;
            margin-top:34px; color:#fff; border-radius:var(--radius);
            padding:15px 32px; font-size:11px; font-weight:700;
            letter-spacing:.13em; text-transform:uppercase; }
.slide .go:hover{ opacity:.9; }

/* Предмет на пятне: наш знак, крупно. Место под фотографию тоже есть —
   если в слайде задана картинка, она встаёт сюда же. */
.thing{ position:relative; display:flex; align-items:center; justify-content:center;
        min-height:clamp(240px,42vh,420px); }
.thing img, .thing svg{ width:clamp(150px,26vw,300px); height:auto;
                        filter:drop-shadow(0 24px 44px rgba(35,31,32,.14)); }

/* ─── точки сбоку ─────────────────────────────────────────────────────────
   Раньше стояли внизу строкой — при вертикальной ленте это сбивает: точки
   показывают положение, а положение теперь по вертикали. */
.dots{ position:absolute; right:26px; top:50%; transform:translateY(-50%);
       display:flex; flex-direction:column; gap:14px; z-index:3; }
.deck-wrap{ position:relative; }
.dots a{ width:9px; height:9px; border-radius:50%; background:rgba(35,31,32,.22);
         /* Цифра внутри ссылки нужна на случай, если стили не загрузятся:
            тогда это просто «01 02 03». В обычном виде её прячем — в образце
            под лентой стоят точки, а не номера. */
         font-size:0; line-height:0; overflow:hidden; }
.dots a:hover{ background:var(--ink); }
/* Активную точку ставит скрипт по фактической прокрутке. Без скрипта все
   точки одинаковы — это не мешает, лента листается вручную. */
.dots a.on{ background:var(--ink); transform:scale(1.35); }

/* ─── финал ───────────────────────────────────────────────────────────── */
.finish{ padding:70px 0 90px; text-align:center; }
.finish h2{ font-size:clamp(30px,4.6vw,56px); line-height:1.04; font-weight:400;
            letter-spacing:-.02em; }
.finish .lead{ margin-inline:auto; margin-top:18px; text-align:center; }
.finish .btn{ margin-top:30px; }

/* ─── подвал ──────────────────────────────────────────────────────────── */
footer{ padding:30px 0 44px; }
.links{ display:flex; flex-wrap:wrap; gap:8px 22px;
        font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; }
.links a{ color:var(--ink-soft); }
.links a:hover{ color:var(--ink); }
.muted{ margin-top:18px; color:var(--ink-soft);
        font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11.5px; }

/* ─── узкие экраны ────────────────────────────────────────────────────────
   Горизонтальная прокрутка на телефоне читается как поломка: слайды встают
   в столбик, пятно уезжает наверх за предмет, линейки прячем — на 375
   пикселях они превращаются в мусор. */
@media (max-width:820px){
  .wrap{ padding:0 22px; }
  /* На телефоне внутренний скроллер убираем: две прокрутки в одном экране
     ощущаются как поломка. Лента становится обычными блоками страницы. */
  .deck{ height:auto; overflow:visible; scroll-snap-type:none; }
  .slide{ height:auto; min-height:auto; padding:52px 0 44px; }
  .slide .wrap{ grid-template-columns:1fr; gap:26px; }
  .slide .num{ position:static; transform:none; display:block; margin-bottom:12px; }
  .slide .num::after{ display:none; }
  .blob{ top:auto; bottom:-8%; right:-30%; width:120%; height:64%; }
  .thing{ min-height:200px; order:-1; }
  .dots{ display:none; }
  .grid-lines{ display:none; }
  .intro{ padding:44px 0 30px; }
  .nav{ padding:16px 22px; }
}

/* ─── экономный режим и просьба уменьшить движение ────────────────────── */
html[data-lite] *,
html[data-lite] *::before,
html[data-lite] *::after{
  animation:none !important;
  transition:none !important;
}
html[data-lite]{ --rk-cursor:0; }
/* Пятна перестают жить на слабых устройствах: это полноэкранная фигура,
   и её перерисовка — самое дорогое, что есть на странице */
html[data-lite] .blob{ animation:none !important; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .blob{ animation:none !important; }
}