/* ============================================================
   БАЗА: то, из чего собрана любая страница ТОЧКИ.

   Токены, сброс, сетка, шапка с меню, кнопки, панели, заголовки
   секций. Лежало инлайном в index.html, пока страница была одна.
   Теперь путь заказа разложен по трём (главная → map.html →
   editor.html), и база обязана быть общей: иначе шапка на второй
   странице через месяц уже не та шапка.

   Здесь НЕТ ничего про конкретные блоки — ни плёнки, ни витрины, ни
   формы. Это остаётся в своих файлах и в своих страницах.
   ============================================================ */

:root{
  --paper:#EDEAE3;
  --ink:#1A1C20;
  --ink-70: rgba(26,28,32,.7);
  --ink-55: rgba(26,28,32,.66);
  --grid: rgba(26,28,32,.14);
  --route:#E0562C;
  --route-ink:#C4451F; /* тёмный вариант акцента: держит 4.5:1 на бумаге */
  /* Зелёный только для одного: «сделано». Ни в палитре карты, ни в
     оформлении секций его нет — тем он и работает, что появляется
     ровно там, где надо сказать «получилось», и нигде больше.
     Тёмный: на нём стоит белый текст, и 4.5:1 обязаны держаться. */
  --ok:#2F7A4F;

  /* Кривые и длительности переехали в assets/motion.css: редактор
     карточек не подключает этот файл, а моторика нужна и ему. */
}
*{box-sizing:border-box;}
/* Переходы по кнопкам и меню — МГНОВЕННЫЕ.

   Плавная прокрутка казалась вежливой, а на этой странице вредна: между
   кнопкой и целью лежит плёнка длиной в восемь тысяч пикселей, и
   браузер честно проматывал её всю. Человек нажимал «Собрать карту» и
   несколько секунд смотрел, как мимо едет анимация, которую он уже
   видел. Прыжок отвечает на нажатие сразу. */
html{scroll-behavior:auto;}
/* ВВЕРХ ЗА ВЕРХ СТРАНИЦЫ НЕ ТЯНЕТСЯ.

   У самого верха резиновая прокрутка (macOS, iOS, Android) отводит всю
   страницу вниз, а залипающая шапка остаётся приклеенной к окну — и
   между её нижней границей и первым экраном раскрывается полоса
   бумаги. Читается это как «шапка растягивается»: ничего не
   растягивается, просто под ней показали пустоту.

   На этой странице цена такой пружины особенно высока: сразу под
   шапкой стоит плёнка, кадр которой залипает на весь экран, и любой
   сдвиг всей страницы вниз сдвигает вместе с ней и кадр.

   overscroll-behavior-y: none снимает и пружину, и «потяни, чтобы
   обновить» — второе на лендинге не нужно тем более. Прокрутке внутри
   страницы это не мешает: правило про то, что делать НА КРАЮ, а не
   про сам ход. Ставится и на html, и на body: Safari слушает второй. */
/* САЙТ СВЕТЛЫЙ, И БРАУЗЕР ДОЛЖЕН ОБ ЭТОМ ЗНАТЬ.

   Без color-scheme браузер с включённой тёмной темой считает, что
   страница просто не заботилась о цветах, и «помогает»: сам
   выворачивает фон, а иногда и текст. У Chrome это называется Auto Dark
   Mode и включено по умолчанию на части Android-сборок; так же ведут
   себя встроенные просмотрщики в мессенджерах.

   Наш фон и чернила заданы явно — выворачивать нечего, и разрешать
   этого нельзя: палитра сайта и есть его лицо. */
:root{ color-scheme: light; }
html, body{ overscroll-behavior-y:none; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
button{font:inherit;}

.grid{
  display:grid; grid-template-columns:repeat(12,1fr); gap:24px;
  max-width:1400px; margin:0 auto; padding:0 40px;
}
@media (max-width:900px){ .grid{ grid-template-columns:repeat(6,1fr); padding:0 24px; gap:16px; } }
@media (max-width:560px){ .grid{ grid-template-columns:repeat(4,1fr); padding:0 18px; } }

/* ---------- HEADER ---------- */
header{ position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--ink); }
/* Поля берём из .grid и ничем не перебиваем: логотип обязан стоять на
   той же вертикали, что и текст секций и текст плёнки, на любой
   ширине. Раньше здесь стоял инлайновый padding:0 40px — на узких
   экранах он оставлял шапку на сорока пикселях, пока вся страница
   уезжала на двадцать четыре, и логотип висел правее всего остального. */
.nav{ display:flex; align-items:center; justify-content:space-between; }
.logo{ font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:700; font-size:22px; letter-spacing:-.01em; display:flex; align-items:center; gap:9px; text-decoration:none; }
.logo-icon{ width:26px; height:26px; flex:none; }
ul.menu{ display:flex; gap:0; list-style:none; margin:0; padding:0; }
ul.menu li{ margin-left:-1px; }
ul.menu li:first-child{ margin-left:0; }
/* Кнопка в меню набрана вместе со ссылками: «Контакты» открывает окно
   помощи, а не ведёт на страницу, — но в ряду шапки обязана выглядеть
   тем же пунктом. Собственные умолчания кнопки (рамка, своя гарнитура,
   выравнивание текста) снимаются здесь же. */
ul.menu a,
ul.menu button{
  display:inline-flex; align-items:center; white-space:nowrap;
  font-family:inherit; border:0; cursor:pointer;
  font-size:13px; font-weight:700; text-decoration:none; color:var(--ink);
  text-transform:uppercase; letter-spacing:.04em;
  background:var(--paper); padding:11px 16px;
  transition:background-color var(--t-tap) var(--ease-soft), color var(--t-tap) var(--ease-soft);
}
ul.menu a:hover, ul.menu a:focus-visible,
ul.menu button:hover, ul.menu button:focus-visible{ background:var(--route); color:#fff; font-weight:700; }
/* «Заказать» — единственная кнопка в ряду ссылок: тёмная плашка,
   бумажный текст. Ведёт на /order — к заявке через штору. */
ul.menu a.menu-cta, .mobile-menu a.menu-cta{ background:var(--ink); color:var(--paper); font-weight:700; }
ul.menu a.menu-cta{ margin-left:8px; }
ul.menu a.menu-cta:hover, ul.menu a.menu-cta:focus-visible,
.mobile-menu a.menu-cta:hover, .mobile-menu a.menu-cta:focus-visible{ background:var(--route); color:#fff; }
@media (max-width:1040px){ ul.menu{ display:none; } }

.menu-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:flex-end; gap:7px;
  width:32px; height:32px; background:none; border:none; cursor:pointer; padding:0;
}
.menu-toggle span{
  display:block; width:100%; height:2.5px; background:var(--route);
  transition:transform var(--t-menu) var(--ease-out), opacity var(--t-menu) var(--ease-out);
}
.menu-toggle.open span:nth-child(1){ transform:translateY(4.75px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ transform:translateY(-4.75px) rotate(-45deg); }
@media (max-width:1040px){ .menu-toggle{ display:flex; } }

.mobile-menu{
  position:absolute; top:100%; left:0; right:0; z-index:40;
  background:var(--paper); border-bottom:1px solid var(--ink);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--t-menu) var(--ease-out), transform var(--t-menu) var(--ease-out), visibility 0s linear var(--t-menu);
}
.mobile-menu-inner{ display:flex; flex-direction:column; }
.mobile-menu a,
.mobile-menu button{
  padding:18px 24px; text-decoration:none; color:var(--ink);
  font-family:inherit; border:0; border-top:1px solid var(--grid);
  background:none; text-align:left; cursor:pointer;
  font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.04em;
  transition:background-color var(--t-tap) var(--ease-soft), color var(--t-tap) var(--ease-soft);
}
.mobile-menu a:hover, .mobile-menu a:focus-visible,
.mobile-menu button:hover, .mobile-menu button:focus-visible{ background:var(--route); color:#fff; }
.mobile-menu.open{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity var(--t-menu) var(--ease-out), transform var(--t-menu) var(--ease-out);
}

/* ---------- КНОПКИ ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; background:var(--route); color:var(--ink);
  font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.03em;
  padding:14px 22px; border:none; cursor:pointer; text-decoration:none;
}
.btn:hover, .btn:focus-visible{ background:var(--ink); color:var(--paper); }
.btn:disabled{ opacity:.6; cursor:default; }
.btn.on-red{ background:var(--ink); color:var(--paper); }
.btn.on-red:hover{ background:var(--paper); color:var(--ink); }
.btn-ghost{
  display:inline-flex; align-items:center; background:none; cursor:pointer;
  border:1px solid var(--ink); color:var(--ink);
  font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.03em;
  padding:13px 20px;
}
.btn-ghost:hover, .btn-ghost:focus-visible{ background:var(--ink); color:var(--paper); }

/* ---------- ОБЩЕЕ ДЛЯ СЕКЦИЙ ---------- */
section.panel{ padding:0 0 104px; }
/* Первая панель после плёнки. Плёнка заканчивается сплошным оранжевым
   полем во весь экран, а сразу под ним начиналась цена — двух блоков
   встык, без единого пустого пикселя между ними. Верхнее поле здесь не
   украшение: ему надо дать оранжевому уйти за верхний край прежде, чем
   появится первая строка следующего блока. */
/* ВИТРИНА НАЧИНАЕТСЯ БЕЗ ВЕРХНЕГО ПОЛЯ.

   Правило про запас после плёнки (clamp(104px,13vw,196px)) стояло
   сначала на #price, потом переехало сюда — и здесь оказалось
   вредным. Между оранжевым полем, которым кончается плёнка, и картой
   ложилась полоса пустой бумаги во всю ширину экрана: два блока,
   разделённые ничем, вместо одного цельного куска карты.

   Полю там и нечего делать. Оно нужно было цене — блоку с
   заголовком и текстом, которому надо было дать оранжевому уйти за
   край прежде, чем начнётся чтение. Витрина не читается, а
   смотрится, и стык с оранжевым для неё не помеха, а край карты. */
section.panel#showcase{ padding-top:0; }
/* Вертикально секция НЕ обрезает: из неё свисает окно выбора города, и
   свисать ему положено — оно перекрывает начало «Коротко о главном», для
   чего у него и тень (см. .cfg-city-menu в configurator.css). При
   overflow:hidden нижние сто с лишним пикселей списка просто исчезали, и
   выглядело это так, будто окно уходит ПОД следующий блок.

   По горизонтали обрезка остаётся: overflow-x:clip — единственное
   значение, которое не превращает вторую ось в скролл-контейнер
   (overflow-x:hidden + overflow-y:visible браузер молча читает как
   hidden/auto, и окно снова обрезано, только со скроллом). */
.panel-red{ background:var(--route); color:var(--ink); padding-bottom:72px; position:relative; overflow-x:clip; overflow-y:visible; }
@media (max-width:900px){ section.panel{ padding-bottom:72px; } .panel-red{ padding-bottom:64px; } }

.dossier-bar{
  grid-column:1/-1; display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--grid);
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-55);
}
.panel-red .dossier-bar{ border-color:rgba(23,21,18,.3); color:var(--ink); }

/* ОДИН РАЗМЕР НА ВСЕ ЗАГОЛОВКИ СЕКЦИЙ.

   Их было четыре: 24 в плёнке, 34 на панелях, 40 у призыва и 46 у
   заказа. Каждый выбирался под свой блок и по-своему был оправдан, а
   вместе они читались тем, что страница собрана из кусков. Уровень у
   всех этих строк один — это название секции, — значит и кегль обязан
   быть один; разницу между блоками несут фон, сетка и ритм, а не
   размер шрифта.

   Хиро остаётся крупнее (clamp(30px,3.4vw,54px)): он не секция, он
   первый уровень. Разрыв между ним и секциями небольшой и нарочно: два
   соседних уровня, а не два разных мира. */
h2.section-title{
  font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:700; font-size:clamp(28px,3.1vw,46px);
  letter-spacing:-.025em; line-height:1.02; margin:0 0 24px; text-wrap:balance;
}
.section-lede{ color:var(--ink-70); max-width:52ch; margin:0 0 44px; font-size:17px; }
.panel-red .section-lede{ color:var(--ink); }
.accent{ color:var(--route-ink); }
.mark{ font-weight:700; color:var(--route-ink); }

/* Кружок вместо точки в конце фразы — тот самый объект, который в
   хиро выходит из строки и становится плёнкой. */
.dot-circle{
  display:inline-block; width:.16em; height:.16em; border-radius:50%;
  background:var(--route); margin-left:.07em; vertical-align:baseline;
  transform:translateY(-.03em);
}
/* Кружок в заголовке хиро гаснет, когда его подхватывает плёнка
   (см. подписку на сегмент 0 внизу страницы).

   ПЕРЕХОДА ПО ВРЕМЕНИ ЗДЕСЬ БЫТЬ НЕ ДОЛЖНО. Стоял transition .12s, и
   он ссорился с прокруткой: плотность кружка ехала по своим 120 мс, а
   нарисованная точка — по времени плёнки, то есть по руке. На первом
   же движении колеса это читалось дёрганьем. Плотность теперь считает
   сама подписка, из T, и меняется она в том же кадре, что и кадр
   плёнки. */
#heroDot{ will-change:opacity; }

/* .pending — рамка «[нужно от тебя]» на месте недостающих данных —
   удалена вместе с последней такой дыркой: цены, сроки и состав
   наборов теперь настоящие и приходят из админки. Правила для неё
   были и здесь, и в film.css. */

@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(14px); transition:opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out); }
  .reveal.in{ opacity:1; transform:none; }
}
/* Класс .in снимает скрипт. Без скриптов половина страницы осталась бы
   прозрачной — а текст должен читаться в любом случае. */