/* ═══════════════════════════════════════════════════════════════
   AURA — раскладка: полотно, секции, шапка, меню, крошки, подвал.

   До рефакторинга каждая из трёх страниц описывала шапку, бургер,
   меню и подвал по-своему. Совпадали они не полностью: бургер
   разъехался на пиксель сразу по трём измерениям (left 11 против 12,
   width 22 против 20, height 2 против 1), пункт меню имел три разные
   высоты и три разных веса.

   Здесь — общая часть. Всё, что действительно отличается на
   конкретной странице, объявлено в css/pages/*.css отдельным блоком
   с объяснением, почему отличается. Молчаливых расхождений
   больше нет.
   ═══════════════════════════════════════════════════════════════ */

/* ── полотно ── */
/* clip, а не hidden: hidden делает обёртку контейнером прокрутки,
   и прокруточные анимации внутри отсчитывали бы ход по ней —
   а она не прокручивается никогда. clip обрезает так же. */
.page{max-width:1920px;margin:0 auto;position:relative;overflow:clip}
.wrap{padding-left:var(--pad);padding-right:var(--pad)}
.sec{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}

/* ══════════ ШАПКА ══════════ */
/* Общая часть. Отступы и кегль у страниц свои — они объявлены
   в файлах страниц, потому что различие намеренное. */
.hd{position:relative;z-index:var(--z-header);display:flex;align-items:center;
  justify-content:space-between;background:var(--bg);color:var(--ink);
  border-bottom:1px solid var(--line)}
.hd a{padding:12px 0;transition:opacity .3s}
.hd .lock:hover{opacity:.7}
.hd nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap-l)}
.hd nav a,.hd__r a{display:inline-flex;align-items:center;min-height:44px;
  color:var(--mute);transition:color var(--t-fast)}
.hd nav a:hover,.hd__r a:hover{color:var(--acc)}
.hd__r{display:flex;align-items:center;gap:var(--gap-m);white-space:nowrap}
/* Единственная золотая строка в шапке — она же единственное действие.
   Селектор с двумя классами и элементом: правило `.hd__r a` выше по
   специфичности, чем одиночный класс, и раньше это лечили !important.
   Специфичность лечится специфичностью, а не силой. */
.hd__r a.hd__go{color:var(--acc);font-weight:var(--w-label)}
.hd__r a.hd__go:hover{color:var(--acc-hi)}
.hd__r a.hd__tel{font-weight:var(--w-label);color:var(--ink);
  font-variant-numeric:tabular-nums}
@media(max-width:1099px){
  .hd nav,.hd__r a:not(.hd__tel){display:none}
  .hd__tel{display:inline-flex;align-items:center;min-height:44px}
}
@media(max-width:519px){.hd__r .hd__tel{display:none}}

/* ── знак ── */
.lock{display:flex;align-items:center;gap:11px;min-height:44px;color:var(--ink)}
/* Знак в кольце. Вращается только надпись, знак внутри стоит:
   если крутить всё вместе, он плывёт и читается индикатором
   загрузки, а не маркой.

   52 px — предел для шапки высотой 80: больше, и шапка растёт. */
/* 64 px: на 52 надпись в кольце превращалась в шум. Шапка при этом
   не растёт — у неё 12 px полей и высота 80. */
.lock__z{width:64px;height:64px;flex:0 0 64px;color:var(--ink)}
.lock__ring{transform-origin:100px 100px;animation:lock-vrash 1.6s var(--e) 1}
@keyframes lock-vrash{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* Оборот один раз при загрузке и один по наведению. Бесконечное
   вращение читается индикатором загрузки, а не маркой. */
.lock:hover .lock__ring{animation:lock-vrash 1.6s var(--e) 1}
@media(prefers-reduced-motion:reduce){.lock__ring{animation:none}}
/* Кегли локапа сведены к шкале: 15 и 11 были двумя лишними
   размерами на первом экране, а медиана сегмента — пять всего. */
.lock i{display:block;font-style:normal;font-weight:var(--w-head);font-size:var(--t-s);
  letter-spacing:.22em;text-indent:.22em;line-height:1}
.lock s{display:block;margin-top:5px;font-size:var(--t-label);font-weight:var(--w-label);
  letter-spacing:var(--tr-label);text-indent:var(--tr-label);line-height:1;
  text-transform:uppercase;color:var(--mute);text-decoration:none}
@media(max-width:519px){.lock s{display:none}}

/* ── бургер ──
   Канон взят с главной. На старой второй странице он был на пиксель уже
   и на волосок тоньше — разница ничего не сообщала, это был просто
   дрейф трёх копий одного кода. */
.burger{display:none;width:44px;height:44px;border:0;background:0;position:relative;
  cursor:pointer}
.burger span{position:absolute;left:11px;width:22px;height:2px;background:var(--ink);
  transition:transform .4s var(--e)}
.burger span:nth-child(1){top:19px}
.burger span:nth-child(2){top:26px}
.burger.is-on span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger.is-on span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
@media(max-width:1099px){.burger{display:block}}

/* ══════════ МЕНЮ ══════════ */
.menu{position:fixed;inset:0;z-index:var(--z-menu);background:var(--bg);color:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  padding:96px var(--pad) 40px;overflow-y:auto;
  clip-path:inset(0 0 100% 0);transition:clip-path .55s cubic-bezier(.65,0,.35,1)}
.menu[hidden]{display:none}
.menu.is-open{clip-path:inset(0 0 0 0)}
.menu a{display:flex;align-items:center;min-height:56px;font-size:clamp(1.5rem,6vw,2.4rem);
  font-weight:var(--w-label);letter-spacing:-.02em;border-bottom:1px solid var(--hair)}
.menu a:last-child{border-bottom:0}
.menu__tel{margin-top:20px;font-size:1.15rem;color:var(--mute)}
body.is-locked{overflow:hidden}
@media(prefers-reduced-motion:reduce){
  .menu{transition:none}
  .burger span{transition:none}
}

/* ══════════ КРОШКИ ══════════ */
/* Только на внутренних страницах. Кнопка «Назад» ведёт назад
   по истории, если пришли со своего сайта, иначе — на главную. */
.crumbs__back{display:inline-flex;align-items:center;gap:7px;min-height:44px;
  padding-right:2px;font-weight:var(--w-label);text-decoration:none;color:inherit}
.crumbs__back svg{width:14px;height:14px;flex:0 0 14px}

/* ══════════ ПОДВАЛ ══════════ */
.ft{padding-top:var(--gap-l);padding-bottom:var(--gap-l);
  border-top:1px solid var(--line)}
/* Межстрочный здесь был задан жёстко: 30px на кегле 14 — это 2,14,
   вдвое больше нужного. Взят относительный, как в каталоге: заголовок
   отделяется отступом, а не разгонкой строк. */
.ft b{display:block;font-weight:var(--w-label);font-size:var(--t-body);
  margin-bottom:var(--s-2)}
.ft p{margin:0;font-size:var(--t-s);font-weight:var(--w-label);line-height:1.5;
  color:var(--dim);max-width:52ch}
.ft a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-s);
  font-weight:var(--w-label);line-height:20px;color:var(--dim)}
.ft__soon{display:inline-flex;align-items:center;min-height:44px;font-size:14px;
  font-weight:var(--w-label);line-height:20px;color:var(--dim);opacity:.6}
.ft__grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:720px){.ft__grid{grid-template-columns:2fr 1fr 1fr}}
.ft__grid>div{display:flex;flex-direction:column;align-items:flex-start}
/* Нижняя строка подвала — второстепенная: год, город, копирайт.
   На главной она была 16px основным цветом и спорила с контентом. */
.ft__bot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:var(--s-4);margin-top:var(--gap-l);font-size:var(--t-s);
  font-weight:var(--w-label);color:var(--dim)}
.ft__mark{width:56px;height:70px}
.ft__mark svg{width:100%;height:100%;fill:var(--gold)}


/* Шапка на главной больше не ложится на кадр: первый экран стал
   светлым, и белые ссылки на белом исчезали. Правила сняты целиком,
   шапка работает так же, как на остальных страницах. */


/* Приписка в шапке главной: волосяная линия и две строки мелко.
   На узких экранах её нет — там в шапке остаётся только телефон. */
.hd__pod{max-width:22ch}
@media(max-width:1279px){.hd__pod{display:none}}


/* ══════════ КНОПКИ В ШАПКЕ ══════════
   Пункты набраны обычным текстом, телефон — рамкой. Раньше телефон
   и «Подобрать квартиру» были такими же ссылками, как разделы,
   и шапка читалась строкой из семи равных слов. Действие должно
   отличаться от навигации формой, а не только цветом — цвета
   на чёрно-белом сайте для этого нет. */
.hd nav a{position:relative;padding:var(--s-2) 0}
.hd nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-fast) var(--e)}
.hd nav a:hover::after{transform:scaleX(1)}
.hd__r a.hd__tel{padding:0 var(--gap-s);min-height:44px;
  border:1px solid var(--line);transition:border-color var(--t-fast),background var(--t-fast)}
.hd__r a.hd__tel:hover{border-color:var(--ink);background:var(--ink);color:var(--bg)}


/* ══════════ ШАПКА: ЧУЖАЯ РАЗМЕТКА В СИСТЕМЕ ══════════
   Классы пришли из правки, сделанной не мной. Разметка сохранена,
   потому что она новее и приносит переключатель языка; сюда
   переносится только то, что раньше делали .lock i и .lock s. */
.lock__word{display:block;font-size:var(--t-s);font-weight:var(--w-label);
  letter-spacing:.22em;text-indent:.22em;line-height:1}
.lock__caption{display:block;margin-top:5px;font-size:var(--t-label);
  font-weight:var(--w-label);letter-spacing:var(--tr-label);
  text-indent:var(--tr-label);line-height:1;text-transform:uppercase;
  color:var(--dim)}
@media(max-width:519px){.lock__caption{display:none}}

.hd__r .header-contact{display:inline-flex;align-items:center;min-height:44px;
  color:var(--dim);transition:color var(--t-fast)}
.hd__r .header-contact:hover{color:var(--ink)}

/* Приписка справа: волосяная линия и две строки мелко.
   Не ссылка и не действие — голос компании в углу. */
/* Перенос возвращён явно: .hd__r запрещает переносы ради телефона,
   и приписка вытягивалась в одну строку поверх переключателя языка. */
.header-note{display:none;grid-template-columns:auto 1fr;gap:var(--gap-s);
  align-items:start;margin:0;max-width:22ch;white-space:normal;
  font-size:var(--t-s);line-height:1.45;color:var(--dim)}
.header-note>span:first-child{display:block;width:28px;height:1px;
  margin-top:.62em;background:var(--dim)}
/* На 1440 ряд шапки занят целиком. Приписка выходит с 1600 —
   там, где поле для неё действительно есть. */
@media(min-width:1600px){.header-note{display:grid}}

/* Переключатель языка. Собственный селект браузера оставлен:
   родной список открывается там, где человек его ждёт, и работает
   с клавиатуры без единой строки кода. Высота доведена до 44 —
   цель указателя по WCAG 2.5.8. */
.language{display:inline-flex;align-items:center}
.language select{min-height:44px;padding:0 var(--s-3);
  font:inherit;font-size:var(--t-s);font-weight:var(--w-label);
  color:var(--ink);background:transparent;
  border:1px solid var(--line);border-radius:0;cursor:pointer;
  transition:border-color var(--t-fast)}
.language select:hover{border-color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}


/* Надпись в кольце снята: на 64 px она нечитаема и работает шумом.
   Остаётся волосяная окружность и знак — печать, а не значок.
   Полный бейдж с надписью лежит в images/badge.svg для печати. */
.lock__z text,.lock__z textPath{display:none}
.lock__z::after{content:none}
.lock__krug{fill:none;stroke:currentColor;stroke-width:2;opacity:.42}

.lock__z{color:#C2A574}