/* ============================================================
   Раскладка страниц. Общая для всех макетов этапа 3.
   Опирается на tokens.css, своих значений цвета и кегля не вводит.
   Мобильный — база, десктоп — надстройка через min-width.

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

/* --- Полоса прокрутки ---------------------------------------
   Страницу ведёт Lenis, системная полоса рядом с ней лишняя:
   она спорит с полноширинными полосами и режет правый край
   кадров. Прокрутка при этом остаётся обычной — колесом,
   клавишами, тачпадом; с клавиатуры фокус тоже ходит.
   ------------------------------------------------------------ */
html { scrollbar-width: none; }              /* Firefox */
html::-webkit-scrollbar { width: 0; height: 0; }   /* Chrome, Safari, Edge */

/* Only page content is captured. The live header/menu never swaps snapshots. */
/* Without scripting, use ordinary navigation rather than an aborted transition. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  @view-transition { navigation:auto; }
  :root { view-transition-name:none; }
  main { view-transition-name:page-content; }
  /* A scrolled main can extend behind the sticky header. Keep its snapshot below it. */
  ::view-transition { clip-path:inset(3.75rem 0 0); }
  ::view-transition-group(page-content) { animation:none; }
  ::view-transition-old(page-content) { animation:page-fade-out 180ms ease-out both; }
  ::view-transition-new(page-content) { animation:page-fade-in 180ms ease-out both; }
  @media (min-width:1200px) {
    ::view-transition { clip-path:inset(5rem 0 0); }
  }
}
@keyframes page-fade-out { to { opacity:0; } }
@keyframes page-fade-in { from { opacity:0; } }

/* --- Шапка -------------------------------------------------
   Мобильный: имя слева, меню раскрывается чекбоксом, без JS.
   Десктоп: одна строка — имя, шесть разделов, почта.

   Переключаем чекбоксом, а не <details>: закрытый <details>
   прячет содержимое силами движка, и раскрыть его обратно
   медиазапросом нельзя. Чекбокс управляется только нашим CSS.
   ------------------------------------------------------------ */

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--color-white);
  color: var(--color-black);
  border-bottom: 1px solid var(--color-sand);
}

/* Шапка липкая, поэтому цель якоря нужно опускать на её высоту,
   иначе заголовок раздела уезжает под шапку. Плюс немного воздуха. */
:target,
.band[id],
section[id],
main[id] { scroll-margin-top: calc(5rem + var(--spacing) * 4); }
.topbar-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--spacing-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  min-height: 3.75rem;
}
/* Горизонтальное меню с 1200 px: на 1000–1199 при кегле 15 px пункты переносились на две строки */
@media (min-width: 1200px) { .topbar-inner { min-height: 5rem; } }

/* Имя набрано одним весом. Разделение на жирное и светлое
   принадлежит знаку медиа (CHECK / IN), а не имени человека:
   в шапке оно превращало подпись в маленький логотип. */
.wordmark {
  font-size: var(--text-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--font-weight-normal);
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}

.nav-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  user-select: none;
}
.nav-label::after { content: "Меню"; }
.nav-toggle:checked ~ .topbar .nav-label::after { content: "Закрыть"; }
.nav-toggle:focus-visible ~ .topbar .nav-label { outline: 2px solid currentColor; outline-offset: 4px; }

.menu-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: none;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-sand);
  padding: calc(var(--spacing) * 2) var(--spacing-gutter) calc(var(--spacing) * 5);
  gap: calc(var(--spacing) * 2);
}
.nav-toggle:checked ~ .topbar .menu-list { display: grid; }

.menu-list a {
  font-size: var(--text-h3);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  color: inherit;
}
.menu-list .mail {
  width: fit-content;
  font-size: var(--text-body);
  margin-top: calc(var(--spacing) * 2);
  padding-top: calc(var(--spacing) * 3);
  border-top: 1px solid var(--color-sand);
}

@media (min-width: 1200px) {
  .nav-label { display: none; }
  .menu-list,
  .nav-toggle:checked ~ .topbar .menu-list {
    display: flex;
    position: static;
    border: 0;
    padding: 0;
    gap: calc(var(--spacing) * 4);
    align-items: baseline;
    flex: 1;
    justify-content: flex-end;
    background: none;
  }
  .wordmark,
  .menu-list a { font-size: var(--text-nav); }
  /* Текущий раздел помечаем линией, а не весом: полужирный
     в строке из шести пунктов читается как нажим. */
  .menu-list a[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
  }
  .menu-list .mail {
    margin: 0 0 0 calc(var(--spacing) * 3);
    padding: 0;
    border: 0;
    font-size: var(--text-small);
  }
}

/* --- Полосы -------------------------------------------------
   Полоса занимает всю ширину экрана, внутри — колонка контента
   шириной не больше 1440 с полями 24/80.
   ------------------------------------------------------------ */

.band { padding-block: var(--spacing-section); }
.band > .inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--spacing-gutter);
}

/* Два блока одной схемы подряд: отступы складываются и дают
   пустоту в 400 px, которая читается не как воздух, а как
   обрыв. На стыке одинаковых схем шов стягиваем; там, где
   схема меняется, полный отступ остаётся — цвет сам делит. */
.scheme-light + .scheme-light,
.scheme-sand  + .scheme-sand,
.scheme-dark  + .scheme-dark { padding-top: calc(var(--spacing-section) * 0.5); }

/* Подпись раздела слева, пункты справа. Подпись — колонки 1–3,
   на десктопе едет вместе с прокруткой, пока раздел на экране;
   пункты — колонки 5–12, колонка 4 держит разрыв. Всё стоит
   от левого поля, как шапка: сдвинутых блоков на сайте нет. */
@media (min-width: 1000px) {
  .inner.aside {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 var(--grid-gap);
    align-items: start;
  }
  .inner.aside > * { grid-column: 5 / 13; }
  .inner.aside > .band-label {
    grid-column: 1 / 4;
    grid-row: 1 / span 20;
    position: sticky;
    top: calc(5rem + var(--spacing) * 5);
    margin: 0;
  }
}

/* --- Заголовок раздела -------------------------------------- */
.band-label {
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: var(--font-weight-normal);
  margin: 0 0 var(--spacing-label);
}

/* --- Ряды с линией ------------------------------------------ */
.rows { margin: 0; padding: 0; list-style: none; }
.rows > li {
  display: grid;
  gap: calc(var(--spacing) * 1);
  padding-block: calc(var(--spacing) * 4.5);
  border-bottom: 1px solid var(--rule);
}
.rows > li:first-child { border-top: 1px solid var(--rule); }
/* Название над текстом на всех ширинах: узкая колонка названия
   ломала заголовки на три строки. Текст не шире строки чтения. */
.rows > li > * { max-width: var(--measure); }
/* В пронумерованном варианте номер стоит отдельной строкой над названием */
.rows.numbered > li { gap: calc(var(--spacing) * 1.5); }
.rows .num {
  font-size: var(--text-small);
  letter-spacing: var(--tracking-caps);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* Активный пункт при прокрутке (главная: «Для кого», стадии).
   Пункт на линии чтения — цветом --fg, остальные --fg-muted.
   Цветом, а не прозрачностью: приглушённый токен проходит AA.
   .is-tracking ставит скрипт — без него ничего не приглушается.
   Телефон и reduced-motion: все пункты полным цветом. */
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .rows.follow.is-tracking > li > * { color: var(--fg-muted); transition: color 400ms var(--ease); }
  .rows.follow.is-tracking > li.is-active > * { color: var(--fg); }
}

/* Стадии: под прилипающей подписью номер активной стадии и линия
   прогресса; каждая стадия выше экранной половины, чтобы прокрутка
   задерживалась на ней. */
.stage-meter { display: none; }
@media (min-width: 1000px) {
  .rows.stages > li { min-height: 45vh; align-content: start; }
  .rows.stages .t-h3 { font-size: var(--text-h2); line-height: var(--leading-snug); }
}
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .inner.aside > .stage-meter {
    display: block;
    grid-column: 1 / 4;
    grid-row: 1 / span 20;
    position: sticky;
    top: calc(5rem + var(--spacing) * 11);   /* под подписью раздела */
    margin-top: calc(var(--spacing) * 6);
  }
}
.stage-now {
  margin: 0;
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.stage-of {
  margin: calc(var(--spacing) * 1) 0 calc(var(--spacing) * 3);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.stage-line {
  position: relative;
  width: 1px;
  height: calc(var(--spacing) * 24);
  background: var(--rule);
}
.stage-line > span {
  position: absolute;
  inset: 0;
  background: var(--fg);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 400ms var(--ease);
}

/* Решение в кейсе: ограничение → что сделали → что получил заказчик */
.triad { display: grid; gap: calc(var(--spacing) * 2.5); margin: calc(var(--spacing) * 1.5) 0 0; }
.rows > li > .triad { max-width: none; }
@media (min-width: 1000px) { .triad { grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); } }
.triad dt {
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: calc(var(--spacing) * 0.75);
}
.triad dd { margin: 0; font-size: var(--text-body); line-height: var(--leading-relaxed); }

/* Пометка макета. Служебный слой, в рабочем сайте его нет. Один вид
   на всех страницах, чтобы пометку нельзя было принять за текст сайта. */
.mock-remark {
  display: flex;
  gap: calc(var(--spacing) * 1.5);
  align-items: baseline;
  max-width: var(--measure);
  margin: 0;
  padding: calc(var(--spacing) * 1.25) calc(var(--spacing) * 2);
  border: 1px dashed var(--rule);
  font-size: var(--text-small);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}
.mock-remark::before {
  content: "Макет";
  flex: none;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg);
}
/* В строке футера пометка выше ссылок: без выравнивания по базовой
   линии ссылки растягиваются на её высоту и подчёркивание уезжает вниз */
footer div:has(> .mock-remark) { align-items: baseline; }

/* --- Сетки -------------------------------------------------- */
.grid { display: grid; gap: calc(var(--spacing) * 7) var(--grid-gap); }
@media (min-width: 700px)  { .grid.cols-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 700px)  { .grid.cols-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
/* /expertise: что получает заказчик и когда звать. Метка — служебным
   стилем, текст — основным; цвет текста не задаём, чтобы приглушение
   неактивной стадии доходило и до него. */
.stage-facts { display: grid; gap: calc(var(--spacing) * 2.5); margin: calc(var(--spacing) * 1) 0 0; }
.rows > li > .stage-facts { max-width: none; }
@media (min-width: 1000px) { .stage-facts { grid-template-columns: 1fr 1fr; gap: var(--grid-gap); } }
.stage-facts dt {
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: calc(var(--spacing) * 0.75);
}
.stage-facts dd { margin: 0; font-size: var(--text-body); line-height: var(--leading-relaxed); }

/* Главный кадр кейса: на телефоне 4:5, иначе 2:1 даёт полосу в 195 px */
.hero-frame { aspect-ratio: 4 / 5; }
@media (min-width: 1000px) { .hero-frame { aspect-ratio: 2 / 1; } }

/* Список проектов: 1 колонка на телефоне, 2 на 700–1199, 3 с 1200 */
@media (min-width: 700px)  { .grid.projects { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .grid.projects { grid-template-columns: repeat(3, 1fr); } }

/* Раскладка «изображение и текст». Фото — колонки 1–6, текст — 8–12:
   колонка 7 остаётся пустой и держит разрыв. Текст стоит по верху;
   на десктопе он прилипает под шапкой и едет вместе с фото, пока
   то на экране — тот же приём, что у подписи раздела. */
.split { display: grid; gap: calc(var(--spacing) * 5); }
@media (min-width: 860px) {
  .split { grid-template-columns: repeat(12, 1fr); gap: 0 var(--grid-gap); align-items: start; }
  .split figure { grid-column: 1 / 7; }
  .split > :last-child { grid-column: 8 / 13; }
  /* Гайд: обложка уже, 1–5, текст 7–12 */
  .split.guide figure { grid-column: 1 / 6; }
  .split.guide > :last-child { grid-column: 7 / 13; }
}
@media (min-width: 1000px) {
  .split > :last-child { position: sticky; top: calc(5rem + var(--spacing) * 5); }
}

/* «Международные стандарты»: текст — колонки 1–6, изображение — 8–12,
   верх изображения на уровне заголовка. Телефон: изображение под текстом. */
.standards { display: grid; gap: calc(var(--spacing) * 6); }
@media (min-width: 1000px) {
  .standards { grid-template-columns: repeat(12, 1fr); gap: 0 var(--grid-gap); align-items: start; }
  .standards > :first-child { grid-column: 1 / 7; }
  .standards > figure { grid-column: 8 / 13; }
}

/* --- Карточки ----------------------------------------------- */
.card { display: block; text-decoration: none; color: inherit; }
.card .frame { background: var(--accent-bg); aspect-ratio: 4 / 5; }
.card .frame img { width: 100%; height: 100%; object-fit: cover; }
.card .t-h3 { margin-top: calc(var(--spacing) * 3); }
@media (hover: hover) {
  a.card:hover .t-h3 { text-decoration: underline; text-underline-offset: 4px; }
}
.card.locked .frame { display: grid; place-items: center; }

/* --- Лента избранных проектов --------------------------------
   Карточки одного размера, кадр 4:5. Лента начинается на колонке 1
   и уходит за правое поле до края экрана: край следующей карточки
   подсказывает, что ленту можно листать. Автопрокрутки нет. */
.rail-band { overflow-x: clip; }   /* лента выходит за поле, страница вбок не едет */

.rail-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
  margin-bottom: var(--spacing-label);
}
.rail-head .band-label { margin: 0; }
.rail-nav { display: flex; align-items: baseline; }
.rail-count,
.rail-btn {
  font: inherit;
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wide);
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
  margin: 0;
}
.rail-count { padding-inline: calc(var(--spacing) * 1.5); }
.rail-btn {
  background: none;
  border: 0;
  padding: calc(var(--spacing) * 1);
  color: var(--fg);
  cursor: pointer;
}
.rail-btn:disabled { color: var(--fg-muted); cursor: default; }

/* Ширина карточек считается от колонки контента (cqi), а не от ленты:
   лента шире колонки на правое поле. */
.rail-wrap { container-type: inline-size; }
.rail {
  --rail-out: calc(var(--spacing-gutter) + max(0px, (100vw - var(--container)) / 2));
  display: flex;
  gap: var(--grid-gap);
  margin-inline-end: calc(-1 * var(--rail-out));
  padding-inline-end: var(--rail-out);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > .card { flex: 0 0 82vw; scroll-snap-align: start; }
@media (min-width: 700px)  { .rail > .card { flex-basis: calc((100cqi - var(--grid-gap)) / 2); } }
/* четыре колонки из двенадцати: 4 × колонка + 3 × промежуток = (ширина − 2 × промежуток) / 3 */
@media (min-width: 1000px) { .rail > .card { flex-basis: calc((100cqi - 2 * var(--grid-gap)) / 3); } }
.rail .zoom > .placeholder { height: 100%; }

/* Карточки выходят по очереди вслед за появлением блока, шаг 70 мс */
.rail > .card {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease);
}
.is-in .rail > .card { opacity: 1; transform: none; }
.rail > .card:nth-child(2) { transition-delay: 70ms; }
.rail > .card:nth-child(3) { transition-delay: 140ms; }
.rail > .card:nth-child(4) { transition-delay: 210ms; }
.rail > .card:nth-child(5) { transition-delay: 280ms; }
.rail > .card:nth-child(6) { transition-delay: 350ms; }
@media (prefers-reduced-motion: reduce) {
  .rail > .card,
  .rail > .card:nth-child(n) { opacity: 1; transform: none; transition-delay: 0s; }
}

/* --- Заглушка под знаки брендов ----------------------------- */
.logos { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 5); align-items: center; }
.logos .slot { height: 2rem; background: var(--accent-bg); }

/* --- Знак медиа --------------------------------------------- */
.brandmark {
  display: block;
  width: 9.5rem;
  aspect-ratio: 75 / 45;
  background: currentColor;
  -webkit-mask: url('../assets/brand/checkin-logo-mono.svg') no-repeat center / contain;
          mask: url('../assets/brand/checkin-logo-mono.svg') no-repeat center / contain;
}

/* --- Строка доказательств: линия над ней ---------------------- */
.proof { position: relative; }
.proof::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--rule);
  transform-origin: left;
}

/* --- Тихие анимации, общие для всех страниц ---------------------
   Только opacity, transform и clip-path; один раз при появлении
   блока (.is-in ставит наблюдатель .reveal); раскладка не сдвигается.
   При reduced-motion этого блока нет — всё сразу в конечном виде. */
@media (prefers-reduced-motion: no-preference) {
  /* линия над строкой доказательств — слева направо */
  .proof::before { transform: scaleX(0); transition: transform 800ms var(--ease); }
  .is-in .proof::before { transform: none; }

  /* кадры и заглушки проявляются шторкой сверху вниз */
  .reveal :is(.rail .frame, figure > .placeholder, .card .preview, .card .frame) {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 700ms var(--ease);
  }
  .reveal.is-in :is(.rail .frame, figure > .placeholder, .card .preview, .card .frame) { clip-path: inset(0); }

  /* линии рядов: рамка остаётся местом, рисует псевдоэлемент, шаг 60 мс */
  .reveal .rows > li { position: relative; border-color: transparent; }
  .reveal .rows > li::after,
  .reveal .rows > li:first-child::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: var(--rule);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 700ms var(--ease);
  }
  .reveal .rows > li::after { bottom: -1px; }
  .reveal .rows > li:first-child::before { top: -1px; }
  .reveal.is-in .rows > li::after,
  .reveal.is-in .rows > li:first-child::before { transform: none; }
  .reveal .rows > li:nth-child(1)::after { transition-delay: 60ms; }
  .reveal .rows > li:nth-child(2)::after { transition-delay: 120ms; }
  .reveal .rows > li:nth-child(3)::after { transition-delay: 180ms; }
  .reveal .rows > li:nth-child(4)::after { transition-delay: 240ms; }
  .reveal .rows > li:nth-child(5)::after { transition-delay: 300ms; }

  /* тезис: предложения по очереди, шаг 90 мс. Только прозрачность —
     сдвиг потребовал бы inline-block и сломал бы перенос строк */
  .thesis .sentence { opacity: 0; transition: opacity 600ms var(--ease); transition-delay: calc(var(--i) * 90ms); }
  .thesis.is-in .sentence { opacity: 1; }
}

/* --- Утилиты вместо инлайн-стилей -------------------------------
   Одна система на все страницы:
   .mt-N      — отступ сверху, N шагов --spacing (8 px);
   .w-Nch     — ширина строки в знаках;
   .ratio-A-B — пропорция кадра;
   .fg-muted, .fw-normal, .pt-0, .m-0 — цвет, вес, обнуление отступа;
   .footer-links, .footer-legal — две строки футера, одинаковые везде.
   С !important: классы заменяют атрибут style и должны перекрывать
   компонентные правила (.card .t-h3, .band-label) так же, как он.
   Уникальные значения остаются инлайн. */
.mt-1 { margin-top: calc(var(--spacing) * 1) !important; }
.mt-2 { margin-top: calc(var(--spacing) * 2) !important; }
.mt-3 { margin-top: calc(var(--spacing) * 3) !important; }
.mt-4 { margin-top: calc(var(--spacing) * 4) !important; }
.mt-5 { margin-top: calc(var(--spacing) * 5) !important; }
.mt-6 { margin-top: calc(var(--spacing) * 6) !important; }
.mt-7 { margin-top: calc(var(--spacing) * 7) !important; }
.mt-8 { margin-top: calc(var(--spacing) * 8) !important; }
.w-14ch { max-width: 14ch !important; }
.w-16ch { max-width: 16ch !important; }
.w-18ch { max-width: 18ch !important; }
.w-20ch { max-width: 20ch !important; }
.w-22ch { max-width: 22ch !important; }
.w-24ch { max-width: 24ch !important; }
.w-30ch { max-width: 30ch !important; }
.ratio-4-5 { aspect-ratio: 4 / 5 !important; }
.ratio-3-4 { aspect-ratio: 3 / 4 !important; }
.ratio-4-3 { aspect-ratio: 4 / 3 !important; }
.ratio-16-9 { aspect-ratio: 16 / 9 !important; }
.ratio-9-5 { aspect-ratio: 9 / 5 !important; }
.fg-muted  { color: var(--fg-muted) !important; }
.fw-normal { font-weight: var(--font-weight-normal) !important; }
.pt-0      { padding-top: 0 !important; }
.m-0       { margin: 0 !important; }
.footer-links {
  display: flex;
  gap: calc(var(--spacing) * 4);
  flex-wrap: wrap;
  margin-top: calc(var(--spacing) * 8);
  padding-top: calc(var(--spacing) * 4);
  border-top: 1px solid var(--rule);
}
.footer-legal {
  display: flex;
  gap: calc(var(--spacing) * 4);
  flex-wrap: wrap;
  margin-top: calc(var(--spacing) * 5);
}

/* --- Интро --------------------------------------------------
   Перекрывает страницу при загрузке, держится и уходит вверх,
   открывая первый экран. Контент под ним отрендерен сразу:
   интро не задерживает отрисовку и не мешает индексации.

   Правила ТЗ: 1,2 с на десктопе и 0,8 с на мобильном, пропуск
   по клику, скроллу и Esc, показ один раз за сессию, полностью
   отключено при prefers-reduced-motion.
   ------------------------------------------------------------ */

.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--spacing-gutter);
  background: var(--color-sand);
  color: var(--color-black);
  will-change: opacity, transform;
  animation: intro-out 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.8s forwards;
}
@media (min-width: 1000px) {
  .intro { animation-delay: 1.2s; }
}

.intro p {
  font-size: var(--text-h2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: var(--font-weight-light);
  margin: 0;
  text-indent: 0.22em;
  text-align: center;
  animation: intro-in 0.55s var(--ease) both;
}

@keyframes intro-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
/* Растворяется, а не уезжает шторкой: панель гаснет и чуть
   поднимается, открывая первый экран. Кривая ровная, без рывка
   в начале — иначе уход читается как скачок, а не как затухание. */
@keyframes intro-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-24px); visibility: hidden; }
}

/* Пропуск по клику, скроллу и Esc: доигрываем мгновенно */
.intro.skip { animation: none; opacity: 0; visibility: hidden; }

/* Пока интро на экране, страница под ним не прокручивается */
html.intro-lock, html.intro-lock body { overflow: hidden; }

/* Тёмный вариант — служебный переключатель макета */
#v-dark:checked ~ .intro { background: var(--color-graphite); color: var(--color-white); }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  html.intro-lock, html.intro-lock body { overflow: visible; }
}

/* --- Служебная панель макета ---------------------------------
   В рабочем сайте её нет.
   ------------------------------------------------------------ */
.introbg { position: absolute; opacity: 0; pointer-events: none; }

.mock-note {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 1);
  align-items: center;
  padding: calc(var(--spacing) * 2) var(--spacing-gutter);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-sand);
}
.mock-note > p {
  flex-basis: 100%;
  font-size: var(--text-small);
  color: var(--color-gray);
  margin: 0 0 calc(var(--spacing) * 1.5);
}
.mock-note label,
.mock-note button {
  font: inherit;
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 1px solid var(--color-sand);
  background: transparent;
  color: var(--color-black);
  padding: 9px 14px;
  cursor: pointer;
}
.mock-note button { margin-left: calc(var(--spacing) * 2); }
@media (hover: hover) { .mock-note button:hover { border-color: var(--color-black); } }

#v-sand:checked ~ .mock-note label[for="v-sand"],
#v-dark:checked ~ .mock-note label[for="v-dark"] {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}
#v-sand:focus-visible ~ .mock-note label[for="v-sand"],
#v-dark:focus-visible ~ .mock-note label[for="v-dark"] {
  outline: 2px solid var(--color-black);
  outline-offset: 3px;
}

/* --- Внутренняя страница ------------------------------------- */
.page-head { padding-block: calc(var(--spacing-block) * 1.4) var(--spacing-block); }
.back {
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  text-decoration: none;
  display: inline-block;
  margin-bottom: calc(var(--spacing) * 4);
}
@media (hover: hover) { .back:hover { color: var(--fg); } }

/* --- Факты объекта ------------------------------------------ */
.facts { display: grid; gap: calc(var(--spacing) * 5); margin: 0; }
@media (min-width: 640px)  { .facts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.facts > div { border-top: 1px solid var(--rule); padding-top: calc(var(--spacing) * 2.5); }
.facts dt {
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: calc(var(--spacing) * 0.75);
}
.facts dd { margin: 0; font-size: var(--text-h3); font-weight: var(--font-weight-normal); }

/* --- Фигура с подписью -------------------------------------- */
figure { margin: 0; }
figure figcaption {
  font-size: var(--text-small);
  color: var(--fg-muted);
  margin-top: calc(var(--spacing) * 2.5);
  max-width: 52ch;
}

/* --- Заглушка вместо фотографии ------------------------------
   Пока Александр не прислал материалы. Пропорции настоящие. */
.placeholder {
  background: var(--accent-bg);
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--spacing) * 3);
}
.placeholder span {
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-on-accent);   /* подложка светлее фона, обычный приглушённый здесь не проходит AA */
  max-width: 26ch;
}

/* Подпись на закрытом кейсе лежит на той же подложке */
.card.locked .frame .t-caps { color: var(--fg-on-accent); }

/* --- Тело статьи ---------------------------------------------
   Единственное место на сайте с длинным связным текстом.
   Подзаголовки внутри текста — h2, иллюстрации разрывают
   колонку и выходят шире неё.
   ------------------------------------------------------------ */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: calc(var(--spacing) * 3); }
.prose h2 {
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 450;
  margin-top: calc(var(--spacing) * 8);
}
.prose p { font-size: var(--text-body); line-height: var(--leading-relaxed); hyphens: auto; }
.prose figure { margin-top: calc(var(--spacing) * 6); }

@media (min-width: 1100px) {
  /* Иллюстрация шире колонки текста: схема и план должны читаться */
  .prose figure { width: min(52rem, 140%); }
}

/* Выводы: врезка на подложке, без рамки и тени. Ширина — по колонке
   текста статьи, иначе на 1440 врезка выпадает из оси на 1280 px */
.takeaways {
  max-width: var(--measure);
  background: var(--accent-bg);
  padding: calc(var(--spacing) * 5);
  margin-top: calc(var(--spacing) * 8);
}
.takeaways ol { margin: calc(var(--spacing) * 3) 0 0; padding-left: 1.2em; }
.takeaways li + li { margin-top: calc(var(--spacing) * 2); }

/* --- Фасад видео ---------------------------------------------
   На странице не должно быть ни одного iframe до клика: три
   встроенных плеера убивают скорость загрузки.
   ------------------------------------------------------------ */
.facade { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--accent-bg); }
.facade img { width: 100%; height: 100%; object-fit: cover; }
/* Кнопка стоит на поле сетки, как текст над и под фасадом.
   Фасад во всю ширину экрана, поэтому на экранах шире 1440
   добавляем половину свободного места. */
.facade .play {
  position: absolute;
  bottom: var(--spacing-gutter);
  left: calc(var(--spacing-gutter) + max(0px, (100% - var(--container)) / 2));
}

/* --- Знак медиа набором ---------------------------------------
   Идентичность CHECK IN / UP / OUT — контраст жирного CHECK (800)
   и светлого слова (200). Набором, а не картинкой; SVG-знак остаётся
   в шапке раздела медиа и на странице выпуска. */
.media-type {
  margin: 0;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--font-weight-light);
}
.media-type b { font-weight: var(--font-weight-bold); }

/* Главная. Десктоп без reduced-motion: знак слева прилипает и меняет
   слово вслед за активной рубрикой, рубрики строками справа.
   Reduced-motion: три колонки по 4 из 12 без знака. Телефон: рубрики
   столбиком, каждая сама набрана знаком. */
.media-mark { display: none; }
.media-rubrics > li { gap: calc(var(--spacing) * 1.5); }
.media-cards-wrap { margin-top: var(--spacing-block); }

@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .inner.aside > .media-mark {
    display: block;
    grid-column: 1 / 4;
    grid-row: 1 / span 20;
    position: sticky;
    top: calc(5rem + var(--spacing) * 5);
    font-size: var(--text-h1);
  }
  .media-mark [data-media="word"] { display: block; }
}
@media (min-width: 1000px) and (prefers-reduced-motion: reduce) {
  .inner.aside.media-aside { display: block; }
  .media-rubrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--grid-gap); }
  .media-rubrics > li,
  .media-rubrics > li:first-child { border-top: 1px solid var(--rule); border-bottom: 0; }
}

/* Превью материала: кадр выпуска с пометкой формата или графитовая
   плашка статьи с рубрикой. Одна пропорция 16:9 для обоих. */
.card .preview {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  margin-bottom: calc(var(--spacing) * 3);
  background: var(--accent-bg);
}
.card .preview.scheme-dark { background: var(--bg); }
.card .preview.video > .placeholder { position: absolute; inset: 0; }
.preview-tag {
  position: absolute;
  left: calc(var(--spacing) * 2);
  bottom: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 0.75) calc(var(--spacing) * 1.5);
  background: var(--color-black);
  color: var(--color-white);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* --- Фильтр ленты медиа -------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 2); }
.chip {
  font: inherit;
  font-size: var(--text-small);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: 10px 16px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease),
              background var(--duration-fast) var(--ease);
}
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
@media (hover: hover) { .chip:hover { border-color: var(--fg); } }
/* Contact heading and email share the site's Manrope family. */
.surface-finale { overflow:hidden; }
.home-contact-row { display:flex; justify-content:space-between; gap:2rem; align-items:baseline; margin-top:2rem; }
.home-contact-row p { line-height:1.6; }
.home-footer-links { display:flex; flex-wrap:wrap; gap:1.5rem 3rem; border-top:1px solid var(--rule); padding-top:2rem; margin-top:3rem; }
footer .contact-display { max-width:none; margin:0; font-family:var(--font-display); font-size:clamp(2.25rem,5.5vw,5rem); font-weight:300; line-height:1.08; letter-spacing:-.035em; }
footer .contact-display span { display:inline; }
footer a[href^="mailto:"] { display:inline-block; max-width:100%; font-family:var(--font-sans); font-size:clamp(1.5rem,3.4vw,3rem); font-weight:300; line-height:1.2; letter-spacing:-.025em; white-space:nowrap; }
footer .home-contact-row { flex-direction:column; align-items:flex-start; gap:1.5rem; }
@media(max-width:699px) {
 footer .contact-display span { display:block; }
}

/* Brand artwork shared by all standards blocks. */
.hotel-logos { display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem; }
.hotel-logos img { display:block; width:5rem; height:auto; }
.hotel-logos img + img { width:8.5rem; }
.menu-list .mail { font-size:1rem; }
@media(min-width:1200px) and (max-width:1350px) {
  .menu-list { gap:1.25rem; }
  .menu-list .mail { margin-left:.5rem; }
  .topbar-inner { gap:1.5rem; }
}
@media(max-width:1199px) {
  .menu-list a { display:flex; align-items:center; min-height:48px; }
  .menu-list {
    display:grid; visibility:hidden; opacity:0; transform:translateY(-.375rem);
    pointer-events:none; max-height:calc(100dvh - 3.75rem); overflow-y:auto;
    transition:opacity var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease), visibility 0s var(--duration-fast);
  }
  .nav-toggle:checked ~ .topbar .menu-list {
    visibility:visible; opacity:1; transform:none; pointer-events:auto; transition-delay:0s;
  }
}
@media(prefers-reduced-motion:reduce) {
  .menu-list, .menu-list a { transition:none; transform:none; }
}

/* Captions follow the same sentence case as navigation and headings. */
.wordmark, .nav-label, .band-label, .t-caps, .chip, .media-kicker,
.xl-count, .preview-tag, .stage-of, .back, .stage-facts dt, .skip-link, .placeholder, .placeholder span, body .sign__by { text-transform:none; letter-spacing:0; }
.topbar-inner { align-items:baseline; }
.wordmark, .nav-label, .menu-list { align-self:center; }
/* Шапка без разделительной линии: она часть первого экрана. */
.topbar { border-bottom:0; box-shadow:none; }
.topbar::after { content:none; }
@media(min-width:1200px) {
  .menu-list { gap:clamp(1rem,2vw,2rem); }
  .wordmark, .menu-list a, .menu-list .mail { font-size:var(--text-nav); line-height:1.45; }
  .menu-list .mail { padding:0; }
}
html:not(.js) .reveal { opacity:1; transform:none; }
html:not(.js) .reveal .sentence { opacity:1; }
html:not(.js) .sign__row, html:not(.js) .sign__by { opacity:1; transform:none; }

/* Phone reveals arrive gently while native touch scrolling stays unchanged. */
@media(max-width:999px) and (prefers-reduced-motion:no-preference) {
  html.js .reveal,
  html.js [data-motion].motion-ready {
    opacity:0;
    transform:translateY(8px);
    transition:opacity 800ms cubic-bezier(.22,.61,.36,1), transform 900ms cubic-bezier(.22,.61,.36,1);
  }
  html.js .reveal.is-in,
  html.js [data-motion].motion-ready.motion-visible { opacity:1; transform:none; }
  html.js .story-cover.motion-ready,
  html.js .reveal :is(.rail .frame, figure > .placeholder, .card .preview, .card .frame) { clip-path:none; }
  html.js .expertise-image.is-in img { animation:none; }
  html.js .xg-card[data-motion].motion-ready .project-preview-frame { clip-path:none; transition:none; }
  html.js .xg-card[data-motion].motion-ready :is(.project-preview-controls,.xg-cap) { opacity:1; transform:none; transition:none; }
}

/* Без масштабирования щипком и двойным касанием на телефонах и планшетах. */
html { touch-action: pan-x pan-y; }

/* Shared press feedback. These transitions never defer a click or navigation. */
body :is(button, .button, .nav-label, .media-pagination a,
  .project-preview-controls button[data-preview-prev],
  .project-preview-controls button[data-preview-next]) {
  transition: background-color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              opacity var(--duration-fast) var(--ease),
              scale var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease);
}
body :is(button, .button, .nav-label, .media-pagination a):where(:not(:disabled):not([aria-disabled="true"])):is(:active, [data-pressed]) {
  opacity: .68;
  scale: .97;
  transition-duration: var(--duration-press);
}
/* Photos keep their full frame; only their tone acknowledges the press. */
body button.story-image:is(:active, [data-pressed]) { scale: none; opacity: .88; }
.project-preview-frame:is(:active, [data-pressed]) { opacity: .88; }

body :is(.wordmark, .menu-list a, .link, .back, .project-preview-story,
  .story-viewer-toolbar a, .media-topic-list a) {
  transition: opacity var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              background-color var(--duration-fast) var(--ease),
              background-size var(--duration-fast) var(--ease);
}
body :is(.wordmark, .menu-list a, .link, .back, .project-preview-story,
  .story-viewer-toolbar a, .media-topic-list a):is(:active, [data-pressed]) {
  opacity: .6;
  transition-duration: var(--duration-press);
}
@media (hover: hover) {
  .topbar :is(.nav-label, .menu-list a):hover { opacity: .65; }
  .story-viewer-toolbar button:not(:disabled):hover { background: rgba(255,255,255,.1); }
}
@media (prefers-reduced-motion: reduce) {
  body :is(button, .button, .nav-label, .media-pagination a):is(:active, [data-pressed]) { scale: none; }
}