@import "./fonts/fonts.css";

:root {
  /* Палитра дека: три грунта и два приглушённых. Акцента нет намеренно. */
  --ink: #000000;
  --sage: #DCDBCE;
  --paper: #FFFFFF;
  --muted: #6E6E6E;
  /* sage светлый, поэтому вторичный текст на нём обязан быть темнее:
     #6E6E6E на #DCDBCE даёт около 3.6:1 и нечитаем на мелком кегле. */
  --muted-sage: #55554E;
  --on-dark: #FFFFFF;
  --on-dark-muted: #9B9B96;

  --display: "Inter Tight", "Inter", Arial, sans-serif;
  --body: "Inter", Arial, sans-serif;
  --micro: "JetBrains Mono", monospace;

  /* Четыре ступени масштабируются через clamp, поэтому размеры не дублируются
     в медиа-запросах. Микролейбл намеренно фиксирован: служебная подпись,
     которая растёт вместе с заголовком, начинает спорить с ним за внимание. */
  --t-hero: clamp(2.75rem, 7vw, 5.5rem);
  --t-title: clamp(1.75rem, 3.6vw, 3rem);
  --t-lead: clamp(1.125rem, 1.6vw, 1.5rem);
  --t-body: clamp(1rem, 1.05vw, 1.125rem);
  --t-micro: 0.8125rem;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --stack: clamp(3.5rem, 9vw, 9rem);
  --measure: 34rem;
}

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

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

body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  text-rendering: optimizeLegibility;
}

/* Грунты. Иерархия несётся масштабом, поэтому ни рамок, ни теней, ни карточек. */
.ground--paper { background: var(--paper); color: var(--ink); --secondary: var(--muted); }
.ground--sage  { background: var(--sage);  color: var(--ink); --secondary: var(--muted-sage); }
.ground--ink   { background: var(--ink);   color: var(--on-dark); --secondary: var(--on-dark-muted); }

.section { padding: var(--stack) var(--gutter); }
.section__inner { max-width: 80rem; margin: 0 auto; }

.measure { max-width: var(--measure); }

/* Микролейбл -- веб-аналог угловой служебной разметки слайдов. */
.micro {
  font-family: var(--micro);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--secondary, var(--muted));
}

.display {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

h1 { font-family: var(--display); font-weight: 800; font-size: var(--t-hero); line-height: 1; margin: 0; text-transform: uppercase; }
h2 { font-family: var(--display); font-weight: 700; font-size: var(--t-title); line-height: 1.08; margin: 0 0 1.5rem; text-transform: uppercase; }

a { color: inherit; }

/* Метка -- единственный орнамент. Красится currentColor, поэтому на чёрном
   грунте не нужен отдельный светлый файл. */
.mark { display: block; width: 1.15rem; height: 1.15rem; flex: none; }
.mark--cover { width: clamp(6rem, 20vw, 15rem); height: auto; margin-bottom: var(--stack); }

/* Шапка не липкая и не прозрачная: она просто продолжение грунта первой
   секции страницы, который ей передаёт shell. Липкая шапка поверх трёх
   разных грунтов требует либо инверсии, либо подложки -- и то и другое
   спорит с системой, где иерархию несёт только масштаб. */
.page__chrome {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gutter);
  padding: 0.9rem var(--gutter);
}
.page__home { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.lang { display: inline-flex; gap: .75rem; }
.lang__current { opacity: .45; }

.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--gutter); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Одна точка слома: многоколоночные блоки становятся одной колонкой,
   микролейблы остаются на месте. */
@media (max-width: 52rem) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

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

/* Единственное движение на сайте. */
.reveal { opacity: 0; transform: translateY(1rem); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- Блоки страницы -------------------------------------------------------
   Ни рамок, ни подложек, ни теней: разница между уровнями несётся кеглем,
   гарнитурой и вторичным цветом, который каждый грунт задаёт сам. */

/* Ведущий абзац блока: на ступень крупнее основного текста. */
.lead { font-size: var(--t-lead); line-height: 1.35; }

/* Ключевое утверждение блока — то, ради чего блок существует. Дисплейная
   гарнитура и кегль заголовка, но без верхнего регистра: это фраза в три
   строки с тире, а не заголовок, и капитель её ломает. */
.statement {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-title);
  line-height: 1.12;
  letter-spacing: -0.01em;
  max-width: 46rem;
  margin: 0 0 var(--gutter);
}

/* Служебная подпись, вводящая перечисление под утверждением. На странице
   кейса она же -- <h2>: заголовок там нужен для навигации по заголовкам,
   а вид обязан остаться прежним. Поэтому насыщенность и интерлиньяж заданы
   явно -- иначе элемент h2 принёс бы свои 700 и 1.08. Для <p> это те же
   значения, что и без правила. */
.section__label { display: block; margin: 0 0 1.25rem; font-weight: 400; line-height: 1.55; }

.list { list-style: none; margin: 0; padding: 0; }
.list__item { margin: 0; }

/* Ячейка перечисления. Только вертикальный ритм: колонки и промежутки
   между ними уже заданы grid-2/3/4. */
.item > * { margin: 0 0 .5rem; }
.item > *:last-child { margin-bottom: 0; }
.item__n { display: block; margin-bottom: .85rem; }
.item__title { font-family: var(--display); font-weight: 700; font-size: var(--t-lead); line-height: 1.1; text-transform: uppercase; }
.item__promise { font-size: var(--t-lead); line-height: 1.25; }
.item__result { font-family: var(--display); font-weight: 700; line-height: 1.2; }

/* Обложка. */
.cover__studio { font-size: var(--t-lead); letter-spacing: .12em; margin: .75rem 0 0; }
.cover__descriptor { font-size: var(--t-lead); color: var(--secondary); margin: var(--stack) 0 0; }

.zero-point__body { margin-top: 1.25rem; }
.concept__denial { color: var(--secondary); margin: 0 0 1.5rem; }

/* Карточка работы -- не карточка: кадр, метка, заголовок и клиент,
   без подложки и рамки. Ссылка целиком, поэтому кликабельно изображение. */
.case-card { display: block; text-decoration: none; }
.case-card > p, .case-card > h3 { margin: .65rem 0 0; }
.case-card img { margin-bottom: 1rem; }
.case-card__title { font-size: var(--t-lead); line-height: 1.1; }
.case-card__client { color: var(--secondary); }

/* Принцип: слева кто, справа что нашли. На узком экране строка складывается. */
.principle__list { margin: 0 0 var(--stack); }
.principle__row { display: grid; grid-template-columns: 14rem 1fr; gap: 1rem var(--gutter); padding: .6rem 0; align-items: baseline; }
.principle__connect { font-size: var(--t-lead); line-height: 1.3; }
.principle__conclusion { margin-bottom: 0; }

@media (max-width: 52rem) {
  .principle__row, .case__shift-row { grid-template-columns: 1fr; gap: .25rem; }
}

/* Zero Method: слой, шаги, вопрос. */
.method__steps { font-family: var(--micro); font-size: var(--t-micro); line-height: 1.6; }
.method__question { font-family: var(--display); font-weight: 700; font-size: var(--t-lead); line-height: 1.15; }

/* Манифест: отказ крупнее, чем то, что делаем вместо него. */
.refusal__no { font-family: var(--display); font-weight: 700; font-size: var(--t-lead); line-height: 1.15; text-transform: uppercase; }
.refusal__yes { color: var(--secondary); }

/* Цифры о студии. */
.facts { margin-top: var(--stack); }
.fact__n { font-size: var(--t-title); line-height: 1; }

/* Контакты -- последнее, что видно, поэтому набраны как заголовок. */
.contact__links { display: flex; flex-wrap: wrap; gap: 1rem var(--gutter); margin: 0; }
.contact__link {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-title);
  line-height: 1.1;
  text-transform: uppercase;
  text-underline-offset: .18em;
}

/* --- Страница кейса -------------------------------------------------------
   Те же средства, что на главной: масштаб, гарнитура и вторичный цвет грунта.
   Ни одной новой краски, ни одной рамки. */

/* Шапка кейса: метка, заголовок, клиент, кадр. Метке своего правила не нужно --
   она набрана .section__label, тем же, чем подписи остальных блоков. Кадр
   отделён целым шагом сетки: он открывает кейс, а не иллюстрирует строку
   клиента. */
.case__client { color: var(--secondary); margin: .9rem 0 0; }
.case__hero { margin-top: var(--stack); }

/* Напряжение и сдвиг стоят рядом в двух колонках, поэтому оба абзаца
   заканчиваются вровень: нижний отступ утверждения здесь лишний. */
.case__shift { margin-bottom: 0; }

/* «Было → стало»: слева прежний язык бренда, справа новый. Числа отличаются
   от .principle__row нарочно -- в этой строке фразы длиннее. */
.case__shift-row { display: grid; grid-template-columns: 16rem 1fr; gap: .35rem var(--gutter); padding: .8rem 0; align-items: baseline; }
.case__shift-to { font-size: var(--t-lead); line-height: 1.15; }

/* Решения перечислены, а не сгруппированы: строке нужен только воздух. */
.case__decisions > .list__item { padding: .7rem 0; }

/* Роль студии — вывод кейса, набрана как утверждение и закрывает секцию. */
.case__role { margin-bottom: 0; }

/* Переход дальше. Ссылка на следующий кейс набрана как контакты: последнее,
   что видно на странице, и единственное, что с неё ведёт вперёд.
   text-decoration: none на самой ссылке снимает подчёркивание со всего её
   содержимого, включая микролейбл, -- подчёркнута обратно только строка
   названия, иначе подчёркивание тянулось бы и под служебной подписью. */
.case__back { display: block; margin-bottom: var(--stack); }
.case__next { display: block; text-decoration: none; }
.case__next-title {
  display: block;
  font-size: var(--t-title);
  line-height: 1.1;
  margin-top: .7rem;
  text-decoration: underline;
  text-underline-offset: .18em;
}