/* ═══════════════════════════════════════════════════════════════
   KIYAMOV-SITE-V2 — Base Tokens (Layout, Typography Scale, Spacing)
   Не зависят от темы. Задают ритм, сетку и пропорции по правилам Opus.
   ═══════════════════════════════════════════════════════════════ */

html {
  /* 30.09: резервируем место под scrollbar (как в боевом tw1.ru). Без этого появление/исчезновение
     scrollbar сужает viewport на ~17px → весь контент (включая меню) сдвигается по X = «дёрганье»
     при загрузке/переключении вкладок. Chrome 94+, FF 97+, Safari 18+; в старых — без эффекта. */
  scrollbar-gutter: stable;
  /* Плавный переход по якорям (пункты меню /#directions, #contact) — 1:1 как в старом
     сайте (css/style.css). Lenis крутит колесо отдельно (scroll.js), поэтому конфликта нет. */
  scroll-behavior: smooth;
  /* 30.09: якорные ссылки (/#directions, #contact) останавливаются НА 74px ниже верха — под
     прилипшей шапкой, а не под ней. Без этого плавный скролл «закидывает» раздел под шапку,
     а липкий элемент за кадр пересчитывает позицию = «прыжок» всей панели. Высота шапки
     измерена живо: 74px (десктоп) / 73px (мобайл) → берём 74px, покрывает все разрешения. */
  scroll-padding-top: 74px;
}

/* 30.09: уважение к prefers-reduced-motion (как в боевом tw1.ru). Плавный скролл + липкая
   шапка без offset давали «прыжок». Для тех, кто в системе включил «отключить анимацию»,
   отключаем анимацию скролла. !important: scroll-behavior задан в инлайн <style> в <head>
   (загружается последним, специфичность 0,1,1), поэтому обычный селеktor html (0,1,0) его
   не перебьёт. */
@media (prefers-reduced-motion: reduce) {
  html, body {
    scroll-behavior: auto !important;
  }
}

:root {
  /* ── ШРИФТЫ ── */
  --font-display:   'Playfair Display', 'Georgia', serif;
  --font-editorial: 'Cormorant Garamond', 'Georgia', serif;
  --font-ui:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ── ТИПОГРАФИЧЕСКАЯ ШКАЛА (Fluid clamp: mobile 375px → desktop 1440px) ── */
  --font-size-hero:     clamp(2.5rem, 6vw + 1rem, 5.5rem);       /* 40–88px */
  --font-size-h1:       clamp(2.125rem, 4vw + 0.5rem, 3.75rem);   /* 34–60px */
  --font-size-h2:       clamp(1.625rem, 2.5vw + 0.5rem, 2.5rem);  /* 26–40px */
  --font-size-h3:       clamp(1.25rem, 1.5vw + 0.25rem, 1.75rem); /* 20–28px */
  --font-size-h4:       clamp(1.0625rem, 1vw + 0.25rem, 1.25rem); /* 17–20px */
  --font-size-body:     clamp(1rem, 0.4vw + 0.85rem, 1.125rem);   /* 16–18px */
  --font-size-small:    clamp(0.8125rem, 0.2vw + 0.75rem, 0.875rem); /* 13–14px */
  --font-size-caption:  0.75rem;                                  /* 12px */
  --font-size-overline: 0.6875rem;                                /* 11px */

  /* Высоты строк */
  --line-height-tight:    1.08;
  --line-height-heading:  1.22;
  --line-height-body:     1.7;
  --line-height-relaxed:  1.85;

  /* Трекинг (разрядка) */
  --tracking-tight:      -0.02em;
  --tracking-normal:      0;
  --tracking-wide:        0.05em;
  --tracking-ultra-wide:  0.18em; /* для overline-лейблов капсом */

  /* ── ОТСТУПЫ (8px ритм) ── */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  --section-gap: clamp(4rem, 8vw, 8rem);
  --grid-max-width: 1440px;
  --grid-content-width: 960px;
  --grid-margin: clamp(1.25rem, 5vw, 5rem);

  /* ── ВИЗУАЛЬНЫЕ ПРАВИЛА (Luxury Archetype) ── */
  --radius-sharp: 0px;      /* Острые углы — редакционная строгость */
  --border-hairline: 1px;   /* Тонкие 1px разделители */

  /* ── АНИМАЦИИ (Luxury Easing) ── */
  --ease-luxury: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 180ms;
  --duration-normal: 320ms;
  --duration-slow: 600ms;
}

/* ── REVEAL ПРИ СКРОЛЛЕ (data-fade) ───────────────────────────────
   Паттерн 1:1 с tw1.ru + фиксы:
   • Скрытие только при html.js (inline-скрипт в <head>): если JS упал —
     контент виден, а не пустая страница.
   • Только opacity/transform → layout не двигается → CLS = 0.
   • prefers-reduced-motion — показ без движения. */
html.js [data-fade] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s var(--ease-luxury),
    transform 0.7s var(--ease-luxury);
}

html.js [data-fade].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-fade] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── БРЕНДОВЫЙ КОЛОФОН В ПОДВАЛЕ (МОНОГРАММА AK) ── */
.footer-colophon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-colophon__mark {
  display: block;
  width: 34px;
  height: 27px;
  margin-bottom: 0.75rem;
  opacity: 0.92;
  transition: opacity 0.25s ease;
}

.footer-colophon__mark:hover {
  opacity: 1;
}

/* ── ГРУППЫ ССЫЛОК В ПОДВАЛЕ (NAV-3, 09.10.2026, вердикт Opus банк #37) ──
   Префикс-свободные классы: подвал инлайнится во все 23 страницы с разными BEM-префиксами
   (pg-footer у страниц и кейсов, sv-footer у money), а css/tokens.css подключён везде —
   поэтому раскладка и микро-метки живут здесь ОДИН раз, а сами ссылки наследуют
   существующий стиль подвала страницы ({{p}}__nav). Новый CSS в 17 инлайн-блоков не добавляем. */
.footer-groups {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.footer-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.footer-group__label {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-tertiary, #8a8378);
}