/* Insauty — базовые стили каркаса: сброс, типографика, контейнер, шапка,
   подвал, кнопка и фокус. Стили конкретных блоков страниц живут в pages.css
   (создаётся следующей задачей), сюда их не добавлять. */

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

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

body {
  margin: 0;
  /* фон обязан совпадать с фоном тушевых картинок: они идут через multiply,
     иначе вокруг проступит прямоугольник */
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* тонкие линии-разделители — текст на просвет, не новый цвет */
:root {
  --line: rgba(46, 44, 28, .16);
  --line-strong: rgba(46, 44, 28, .34);
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }

/* подпись-капитель направления F: тот же гротеск, что и текст, с широкой разрядкой.
   Класс остался .mono — его читают 12 страниц и pages.css. */
.mono {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- заголовок страницы: H1 + вступительный абзац ---------- */

.page-head { padding-block: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 44px); }

.page-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(38px, 6.4vw, 92px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.lede {
  margin: 20px 0 0;
  max-width: 56ch;
  font-size: clamp(16px, 1.6vw, 18px);
  color: var(--muted);
}

/* ---------- кнопка: рамка тушью, без радиуса ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  padding: 0 22px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  text-decoration: none;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 20px;
  min-height: 44px;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.btn:hover, .btn:focus-visible { background: var(--ink); color: var(--paper); }

/* Залитая тушью кнопка — главное действие экрана. Ставится по одной на экран:
   если таких две, обе перестают быть главными. */
/* Залитая кнопка — главное действие экрана, заливка вином. Одна на экран:
   если таких две, обе перестают быть главными. */
.btn--solid { background: var(--wine); color: var(--paper); border-color: var(--wine); }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- фокус: обязателен на всех интерактивных элементах ---------- */

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- шапка ---------- */

/* Шапка — одна чернильная полоса: логотип слева, меню правее в той же
   строке. Раньше они стояли друг под другом и полоса выходила вдвое выше. */
/* Полоса лежит поверх хиро: мазок поднят под неё отрицательным отступом
   и без этого перекрывал пункты меню. */
/* Шапка направления F — на бумаге, без плашки: полоса краски вверху спорила бы
   с акварелью в хиро. Логотип слева, меню и кнопка держатся правого края. */
.site-head {
  position: relative;
  z-index: 2;
  background: transparent;
  color: var(--ink);
  padding-block: clamp(16px, 2.4vw, 24px);
}

/* Кнопка расчёта стоит рядом с <nav>, а не внутри него: только так на
   телефоне её можно поднять в одну строку с логотипом, оставив пункты меню
   строкой ниже. Логотип раздвигает их автоотступом — меню и кнопка держатся
   правого края, как при прежнем space-between. */
.head-row {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

/* Логотип набирается шрифтом: капитель Cormorant и курсивное studio под ней.
   Знака в направлении F нет — чернильный всплеск снят. */
.lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: none;
  margin-right: auto;
  text-decoration: none;
  color: inherit;
  line-height: 1;
}

.lockup-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(17px, 2vw, 21px);
  text-transform: uppercase;
  letter-spacing: .22em;
  margin-right: -.22em;
}

.lockup-sub {
  font-family: 'Cormorant Garamond', var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(12px, 1.4vw, 15px);
}

.nav-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 26px; }

.nav-bar a, .nav-cta {
  color: var(--muted);
  text-decoration: none;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}

/* Кнопка расчёта в шапке: единственный элемент навигации, который зовёт
   к действию, поэтому набран не как ссылка, а как кнопка в рамке. */
.nav-cta {
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 10px 18px;
  color: var(--ink);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.nav-cta:hover, .nav-cta:focus-visible {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.nav-bar a:hover, .nav-bar a:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }
.nav-bar a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--line-strong); }

/* Телефон: полоса складывается в две строки вместо трёх. Верхняя — логотип
   и кнопка расчёта по одной оси, нижняя — разделы. Раньше кнопка стояла
   третьей строкой во всю ширину и полоса занимала 174 px, пятую часть
   экрана. */
@media (max-width: 640px) {
  .head-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "logo cta"
      "nav  nav";
    align-items: center;
    gap: 14px 16px;
  }

  .site-head .lockup { grid-area: logo; margin-right: 0; }
  .nav-bar { grid-area: nav; }
  .nav-cta { grid-area: cta; justify-self: end; }
}

/* Узкий телефон (320–360 px): логотип и кнопка вместе перестают помещаться
   в строку, кнопка ломается на два ряда. Ужимаем оба, а не переносим. */
@media (max-width: 380px) {
  .lockup-name { font-size: 15px; letter-spacing: .16em; margin-right: -.16em; }
  .nav-cta { padding: 7px 10px; letter-spacing: .12em; }
  .head-row { column-gap: 10px; }
}

/* ---------- подвал ---------- */

/* Подвал начинается мхом, поэтому последняя секция страницы растворяется в него:
   без этого мховая плашка обрывала бумагу ровной линией. */
.site-foot { position: relative; }

.site-foot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: clamp(110px, 12vw, 170px);
  /* та же кривая smoothstep, что на стыках главной (pages.css, .works::after):
     у ленты пологие концы, поэтому подвал не начинается видимой линией */
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--sand) 0%, transparent),
      color-mix(in srgb, var(--sand) 14%, transparent) 40%,
      color-mix(in srgb, var(--sand) 16%, transparent) 55%,
      color-mix(in srgb, var(--sand) 0%, transparent) 88%),
    linear-gradient(to bottom,
    color-mix(in srgb, var(--moss) 0%, transparent),
    color-mix(in srgb, var(--moss) 6%, transparent) 15%,
    color-mix(in srgb, var(--moss) 22%, transparent) 30%,
    color-mix(in srgb, var(--moss) 50%, transparent) 50%,
    color-mix(in srgb, var(--moss) 78%, transparent) 70%,
    color-mix(in srgb, var(--moss) 94%, transparent) 85%,
    var(--moss));
  pointer-events: none;
}

/* Подвал направления F — мховая плашка: страница заканчивается цветом, а не линией */
.site-foot {
  margin-top: clamp(56px, 8vw, 96px);
  background: var(--moss);
  color: var(--on-dark);
  padding-block: clamp(44px, 6vw, 76px);
}

.site-foot .mono { color: rgba(246, 237, 234, .75); }
.site-foot :focus-visible { outline-color: var(--blush); }
.lockup--foot { margin-right: 0; }

.site-foot .wrap { display: flex; align-items: center; gap: clamp(22px, 4vw, 44px); flex-wrap: wrap; }

/* .seal и .foot-name больше не используются: чернильный знак и картинка-логотип
   сняты в направлении F, вместо них текстовый локап .lockup */

.site-foot .mono { display: block; margin-top: 10px; }

/* ---------- каркас внутренней страницы ---------- */
/* Секция, её лид, нумерованные шаги, простой список, почтовая ссылка
   и призыв внизу. Живут здесь, а не в pages.css: этот набор нужен любой
   странице сайта, включая «Про студію», «Контакт» и 404, которые тяжёлый
   pages.css не подключают и подключать не должны — там 65 КБ помічника,
   брифа и каруселей ради шести правил. */

.page-section {
  padding-block: clamp(40px, 6vw, 72px);
  border-top: 1px solid var(--line);
}

.page-section > .wrap > .mono { display: block; margin-bottom: 10px; }

.page-section h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .09em;
  margin: 0;
  text-wrap: balance;
}

.section-lede { margin: 14px 0 0; max-width: 66ch; color: var(--muted); font-size: 15px; line-height: 1.65; }

/* Шаги — настоящий нумерованный список: порядок здесь несёт смысл,
   аудит идёт до дизайна, а не после. */
.steps {
  margin: clamp(24px, 3.4vw, 34px) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  max-width: 72ch;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding: 14px 0 14px 46px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.steps li:last-child { border-bottom: none; }

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--wash);
  font-variant-numeric: lining-nums;
}

.steps strong { font-weight: 400; color: var(--ink); }

.plain-list { margin: clamp(20px, 2.6vw, 28px) 0 0; padding: 0; list-style: none; max-width: 66ch; }

.plain-list li {
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.plain-list li:last-child { border-bottom: none; }

.mail-link { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.mail-link:hover, .mail-link:focus-visible { border-bottom-color: var(--ink); }

.page-cta {
  padding-block: clamp(40px, 6vw, 72px);
  border-top: 1px solid var(--line);
}

.page-cta h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.16;
  letter-spacing: -.005em;
  margin: 0;
}

.page-cta p { margin: 14px 0 clamp(22px, 3vw, 30px); max-width: 62ch; color: var(--muted); font-size: 15px; }

/* Ссылка внутри текста — тушью и на подчёркнутой линии, как .mail-link.
   Без этого браузер красит её синим, а в направлении E цвета нет вовсе. */
.section-lede a,
.plain-list a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}

.section-lede a:hover, .section-lede a:focus-visible,
.plain-list a:hover, .plain-list a:focus-visible { border-bottom-color: var(--ink); }

/* Текст только для экранного диктора: подпись таблицы, которую видящий
   читает по заголовку раздела, а слепой иначе не получит вовсе. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}