/* stil.css — стиль варианта C «Олива» (утверждён Таней 07.11.2026).
   Значения сняты с образца первого экрана
   и с системы contoret.ru (шрифт, прописные заголовки, подписи с разрядкой, кнопка со стрелкой). */

@font-face{font-family:"Solomon Sans";font-weight:400;font-display:swap;src:url(fonts/SolomonSans-Normal.woff2) format("woff2")}
@font-face{font-family:"Solomon Sans";font-weight:600;font-display:swap;src:url(fonts/SolomonSans-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Solomon Sans";font-weight:700;font-display:swap;src:url(fonts/SolomonSans-Bold.woff2) format("woff2")}

:root {
  /* Цвета: семь, у каждого роль */
  --c-fon: #f6f3ea;          /* светлые блоки, текст и кнопка на тёмном */
  --c-fon-2: #66753f;        /* оливковый: первый экран, блок «Проводник», основная кнопка (Таня 08.11: светлее, ближе к оливковому; было #0f2a1d, затем #004922). Светлый текст на нём 4,5:1 — самый светлый оливковый, где мелкий текст ещё читается */
  --c-tekst: #14201a;        /* текст и заголовки на светлом */
  --c-tekst-2: #5f645a;      /* метки, подписи */
  --c-akcent: #4a5a2e;       /* тёмный оливковый: кнопка при наведении, номера дней, полоса квиза */
  --c-liniya: #e2ddcf;       /* тонкие линии, плашка-маркер под заголовком */
  --c-liniya-temn: rgba(246, 243, 234, .18); /* те же линии и маркер на тёмных блоках (светлый фон на 18%) */

  /* Шрифт: один, как на contoret.ru */
  --f-zag: "Solomon Sans", system-ui, sans-serif;
  --f-tekst: "Solomon Sans", system-ui, sans-serif;

  /* Шесть ступеней шрифта, телефон → компьютер */
  --fs-h1: clamp(34px, 1.5rem + 3.4vw, 68px);
  --fs-h2: clamp(30px, 1.35rem + 2.6vw, 55px);
  --fs-h3: clamp(20px, 1rem + 1vw, 24px);
  --fs-tekst: 18px;
  --fs-melkiy: 16px;
  --fs-nadzag: 12px;

  --lh-zag: 1.06;
  --lh-tekst: 1.55;
  --razryadka-zag: .015em;
  --razryadka-nadzag: .2em;

  --shirina-teksta: 640px;
  --shirina: 1160px;
  --otstup-bloka: clamp(64px, 8vw, 104px);
  --otstup-kraya: clamp(24px, 4vw, 56px);
  --radius: 0;
  --radius-knopki: 0;
}

/* Кнопки: два вида. .btn — на светлом, .btn-vtor — на тёмном и на фото. */
.btn, .btn-vtor {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 54px; padding: 0 26px; border: 0; border-radius: var(--radius-knopki);
  font: 600 14px/1 var(--f-tekst); text-transform: uppercase; letter-spacing: .12em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.btn { background: var(--c-fon-2); color: var(--c-fon); }
.btn:hover, .btn:active { background: var(--c-akcent); }
.btn-vtor { background: var(--c-fon); color: var(--c-fon-2); }
.btn-vtor:hover, .btn-vtor:active { background: #fff; }
/* Стрелка кнопки рисуется стилем, а не знаком в тексте: в шрифте Solomon Sans нет «↗»,
   запасной шрифт сдвигал знак на 2 px, и проверка считала кнопку двухстрочной (07.11.2026). */
.btn::after, .btn-vtor::after { content: "↗"; content: "↗" / ""; display: inline-block; transition: transform .25s ease; }
.btn:hover::after, .btn-vtor:hover::after { transform: rotate(45deg); }

@media (max-width: 600px) {
  .btn, .btn-vtor { padding: 0 14px; font-size: min(14px, calc((100vw - 90px) / 21)); }
}