/* ============================================================
   Дизайн-система сайта Александра Ганакова
   Этап 2 по PRD. Источник значений — ТЗ, раздел 11.

   Имена переменных даны в неймспейсах Tailwind v4
   (--color-*, --text-*, --font-*, --tracking-*, --spacing-*),
   чтобы на этапе 4 они перенеслись в @theme без переименования.
   ============================================================ */

:root {

  /* --- Цвет -------------------------------------------------
     Палитра из заставки CHECK IN. Больше цветов нет:
     состояния и ошибки решаются чёрным и серым.          */

  --color-white:      #FFFFFF;
  --color-black:      #000000;
  --color-sand:       #D0D0BD;  /* фирменный, снят с заставки */
  --color-sand-light: #EDEDE6;
  --color-hairline:   #E3E3DA;  /* линии на светлом: тише песка, но виднее sand-light */
  --color-graphite:   #2E2E2B;  /* тёплый тёмно-серый под песок */
  --color-gray:       #75756D;  /* контраст на белом 4,64:1 — AA */

  /* --- Гарнитура --------------------------------------------
     Manrope 200–800 — весь сайт, включая заголовки.
     Различия задаются размером и весом. SIL OFL 1.1. */

  --font-sans: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-weight-display: 400;

  --font-weight-light:    200;  /* светлое: IN / UP / OUT в логотипе */
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-bold:     800;  /* жирное: CHECK в логотипе */

  /* --- Кегли ------------------------------------------------
     Шкала ТЗ: 96/64/40/28/20/16/13 на десктопе,
     44/32/24/18/16/13 на мобильном. Между ними — плавно,
     опорные ширины 375 и 1440.                            */

  --text-display: clamp(2.75rem,  1.606rem + 4.883vw, 6rem);     /* 44 → 96 */
  --text-h1:      clamp(2rem,     1.296rem + 3.005vw, 4rem);     /* 32 → 64 */
  --text-h2:      clamp(1.5rem,   1.148rem + 1.502vw, 2.5rem);   /* 24 → 40 */
  --text-h3:      clamp(1.125rem, 0.905rem + 0.939vw, 1.75rem);  /* 18 → 28 */
  --text-lead:    clamp(1rem,     0.912rem + 0.376vw, 1.25rem);  /* 16 → 20 */
  --text-body:    1rem;                                          /* 16      */
  --text-small:   0.8125rem;                                     /* 13      */
  --text-nav:     0.9375rem;                                     /* 15, шапка на десктопе */

  --leading-display: 1.02;
  --leading-tight:   1.12;
  --leading-snug:    1.22;
  --leading-normal:  1.45;
  --leading-relaxed: 1.62;  /* тело статьи */

  --tracking-display: -0.025em;
  --tracking-tight:   -0.015em;
  --tracking-caps:    0.08em;   /* прописные, как в логотипе */
  --tracking-wide:    0.14em;   /* служебные подписи мельче 13px */

  /* --- Ритм и сетка -----------------------------------------
     Вертикальный шаг 8. Отступ между разделами 96 → 160.
     Поля 24 → 80. Контент не шире 1440.                   */

  --spacing:         0.5rem;                                       /* 8  */
  --spacing-section: clamp(7rem,    5.239rem + 7.512vw, 12.5rem);  /* 112 → 200 */
  --spacing-block:   clamp(3rem,    2.296rem + 3.005vw, 5rem);     /* 48 → 80   */
  --spacing-gutter:  clamp(1.5rem,  0.268rem + 5.258vw, 5rem);     /* 24 → 80   */
  --spacing-label:   clamp(2rem,    1.472rem + 2.254vw, 3.5rem);   /* 32 → 56, подпись до содержания */

  --container: 90rem;   /* 1440 */
  --measure:   62ch;    /* длина строки в теле статьи */
  --grid-gap:  1.5rem;  /* 24, промежуток между колонками 12-колоночной сетки */

  /* --- Движение ---------------------------------------------
     Минимальное и функциональное: появление блоков,
     переходы, увеличение фото на 1,02. Ничего больше.     */

  --ease:            cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   160ms;
  --duration-press:  80ms;
  --duration-slow:   520ms;
}

/* ============================================================
   ТРИ ФОНОВЫЕ СХЕМЫ

   Решение заказчика от 11.09.2026: чёрного фона нет.
   Схема назначается блоку целиком, на всю ширину экрана.
   Внутри блока фон не меняется.

   Правила: две одинаковые схемы подряд не идут; тёмных
   блоков на странице не больше двух; тёмная схема никогда
   не стоит первым экраном.
   ============================================================ */

.scheme-light,
.scheme-sand,
.scheme-dark { background: var(--bg); color: var(--fg); }

/* основная: белый фон, чёрный текст */
.scheme-light {
  --bg:        var(--color-white);
  --fg:        var(--color-black);
  --fg-muted:  var(--color-gray);       /* 4,64:1 на белом — AA */
  --fg-on-accent: #66665F;              /* 4,92:1 на --accent-bg — AA */
  --rule:      var(--color-hairline);
  --rule-soft: var(--color-sand-light);
  --accent-bg: var(--color-sand-light);
}

/* песочная: тезис, стандарты, акцентные врезки, интро */
.scheme-sand {
  --bg:        var(--color-sand);
  --fg:        var(--color-black);
  --fg-muted:  #57574C;                 /* 4,68:1 на песке — AA. --color-gray здесь даёт 2,2 и запрещён */
  --fg-on-accent: #57574C;              /* 5,23:1 на --accent-bg — AA */
  --rule:      rgba(0, 0, 0, 0.16);
  --rule-soft: rgba(0, 0, 0, 0.09);
  --accent-bg: rgba(255, 255, 255, 0.28);
}

/* тёмная: пауза и смена ритма. Не «премиальность» */
.scheme-dark {
  --bg:        var(--color-graphite);
  --fg:        var(--color-white);
  --fg-muted:  #B2B2A8;                 /* 6,37:1 на графите — AA. --color-gray здесь даёт 3,9 и запрещён */
  --fg-on-accent: #B2B2A8;              /* подложка едва светлее фона, цвет тот же */
  --rule:      rgba(255, 255, 255, 0.15);
  --rule-soft: rgba(255, 255, 255, 0.08);
  --accent-bg: rgba(255, 255, 255, 0.06);
}

/* ============================================================
   БАЗА
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Replace the browser's tap rectangle with the site's own pressed state. */
:where(a, button, [role="button"], label[for], .project-preview-frame) {
  -webkit-tap-highlight-color: transparent;
}
:where(a, button, [role="button"], label[for]) { touch-action: manipulation; }

body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  font-weight: var(--font-weight-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

/* Заголовок, нужный структуре, но не нужный глазу:
   например, раздел подписан знаком медиа, а не текстом. */
.vis-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Переход к содержанию: не видна, пока на неё не встали с клавиатуры */
.skip-link {
  position: absolute;
  left: var(--spacing-gutter);
  top: 0;
  z-index: 200;
  transform: translateY(-120%);
  background: var(--color-black);
  color: var(--color-white);
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

::selection { background: var(--color-sand); color: var(--color-black); }

/* Фокус виден всегда и на любой схеме. Контраст обводки не ниже 3:1 */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--fg, var(--color-black));
  outline-offset: 3px;
}

/* ============================================================
   ТИПОГРАФИКА
   ============================================================ */

/* Крупный набор идёт обычным весом, не полужирным: на кегле
   64–96 полужирный читается как нажим, а не как масштаб.
   text-wrap: balance выравнивает длину строк, поэтому жёсткие
   переносы в разметке не нужны.
   Отрицательный отступ снимает боковой полуапрош первой прописной:
   без него заголовок визуально стоит правее колонки текста. */
/* One family for editorial headings, reading and functional information. */
h1, h2, h3, h4, h5, h6,
.t-display, .t-h1, .t-h2, .t-h3 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
}
.wordmark, .nav-label, .media-type, .sign,
.home-proof p, .facts dd, .project-fact dd,
.band-label, .catalog-divider h2, .expertise-case-copy h3, b, strong {
  font-family: var(--font-sans);
}

.t-display {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--font-weight-display);
  text-wrap: balance;
  margin: 0 0 0 -0.04em;
}
.t-h1 {
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  font-weight: var(--font-weight-display);
  text-wrap: balance;
  margin: 0 0 0 -0.08em;
}
.t-h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--font-weight-display);
  text-wrap: balance;
  margin: 0;
}
.t-h3 {
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--font-weight-display);
  margin: 0;
}
.t-lead {
  font-size: var(--text-lead);
  line-height: var(--leading-normal);
  margin: 0;
  max-width: 46ch;
}
/* Переносов в общем тексте нет: в рядах и ссылках «над-зор» и
   «реко-мендации» режут строку. Переносы включены только в теле
   статьи — .prose p в layout.css, на колонке в 62 знака. */
.t-body {
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-width: var(--measure);
}
.t-small {
  font-size: var(--text-small);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
  margin: 0;
}
/* служебные строки: прописные с трекингом, как подпись в логотипе */
.t-caps {
  font-size: var(--text-small);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: var(--font-weight-normal);
  margin: 0;
}

/* ============================================================
   РАСКЛАДКА
   ============================================================ */

.section { padding-block: var(--spacing-section); }
.wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--spacing-gutter);
}
.stack > * + * { margin-top: calc(var(--spacing) * 3); }

/* ============================================================
   ССЫЛКИ И ЕДИНСТВЕННЫЕ ДВЕ КНОПКИ

   Кнопок-призывов на сайте нет. Почта, «все проекты» и
   прочее — текстовые ссылки тем же кеглем, что окружающий
   текст. Кнопка существует только для оплаты гайда и
   запуска видео: это действия, а не призывы.
   ============================================================ */

.link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 2px;
  transition: background-size var(--duration-fast) var(--ease),
              opacity var(--duration-fast) var(--ease);
}
@media (hover: hover) {
  .link:hover { background-size: 0 1px; background-position: 100% 100%; }
}
.link:active { opacity: 0.6; }

/* Кнопка: оплата гайда и запуск видео. Больше нигде */
.button {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3.5);
  border: 1px solid var(--fg);
  border-radius: 0;                    /* острые углы по всей системе */
  background: var(--fg);
  color: var(--bg);
  font: inherit;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease);
}
@media (hover: hover) {
  .button:hover { background: transparent; color: var(--fg); }
}
.button[disabled],
.button[aria-disabled="true"] {
  border-color: var(--fg-muted);
  background: transparent;
  color: var(--fg-muted);
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   ДВИЖЕНИЕ

   Появление блока по скроллу: fade + 12px. Фото при
   наведении 1,02. Всё остальное запрещено ТЗ.
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duration-slow) var(--ease),
              transform var(--duration-slow) var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Первый экран выходит по очереди, в порядке чтения: имя, роль,
   тезис, почта. Шаг 70 мс, задержка 240 мс — столько нужно, чтобы
   интро успело растаять и строки не спорили с ним. */
.enter > * {
  opacity: 0;
  transform: translateY(12px);
  animation: enter 0.62s var(--ease) forwards;
}
.enter > *:nth-child(1) { animation-delay: 0.24s; }
.enter > *:nth-child(2) { animation-delay: 0.31s; }
.enter > *:nth-child(3) { animation-delay: 0.38s; }
.enter > *:nth-child(4) { animation-delay: 0.45s; }

@keyframes enter {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .enter > * { opacity: 1; transform: none; animation: none; }
}

.zoom { overflow: hidden; }
.zoom img,
.zoom > .placeholder { transition: transform var(--duration-slow) var(--ease); }
@media (hover: hover) {
  .zoom:hover img,
  .zoom:hover > .placeholder { transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}