/* stil.css — стиль сайта Provokado для экспертов ретритов, «Путевой журнал» (стиль лидген-лендинга в5).
   Собран 14.11.2026 после «ок» Макса на пробе dizayn/proba-v5/index.html (первый экран вариант 2, кейсы, блоки 2, 3, 6).
   Значения сняты с пробы, не придуманы. Вёрстка (этап 5) только ссылается на эти переменные и классы.
   Новых цветов, размеров шрифта и видов кнопок в вёрстке не создавать: не хватает значения — вернуться сюда и показать Максу. */

@font-face { font-family:'Literata'; src:url('fonts/Literata.woff2') format('woff2'); font-weight:200 900; font-display:swap; }
@font-face { font-family:'Evolventa'; src:url('fonts/Evolventa-Regular.woff') format('woff'); font-weight:400; font-display:swap; }
@font-face { font-family:'Evolventa'; src:url('fonts/Evolventa-Bold.woff') format('woff'); font-weight:700; font-display:swap; }
@font-face { font-family:'Caveat'; src:url('fonts/Caveat.woff2') format('woff2'); font-weight:400 700; font-display:swap; }

:root {
  /* Цвета: 7, у каждого своя роль */
  --c-fon: #E8DBC2;          /* фон страницы: бумага журнала */
  --c-fon-2: #FBF8F0;        /* листки, карточки, полароиды; текст на тёмной кнопке */
  --c-tekst: #2A2622;        /* основной текст, заголовки, кнопка */
  --c-tekst-2: #5D554B;      /* подписи, второстепенный текст, «вложили» */
  --c-akcent: #B4432E;       /* штампы, номера пунктов, тень кнопки */
  --c-ruchka: #24407A;       /* пометки от руки, стрелки, номера шагов */
  --c-marker: #F2D25C;       /* жёлтый маркер под словами, листок «получили» */
  --ten: 0 6px 16px rgba(40, 25, 10, .22); /* тень листков и фото */

  /* Шрифты: заголовки, текст и пометки от руки */
  --f-zag: 'Literata', Georgia, serif;
  --f-tekst: 'Evolventa', Arial, sans-serif;
  --f-ruka: 'Caveat', 'Comic Sans MS', cursive; /* только «стр. N», цифры на полях; не для текста */

  /* Размеры шрифта: шесть ступеней, телефон → компьютер */
  --fs-h1: clamp(36px, 11vw, 62px);   /* цифры первого экрана */
  --fs-h2: clamp(25px, 3vw, 38px);    /* заголовки блоков */
  --fs-h3: clamp(19px, 2vw, 22px);    /* подзаголовки карточек, строка первого экрана */
  --fs-tekst: 16px;                   /* основной текст */
  --fs-melkiy: 15px;                  /* надзаголовок, подписи */
  --fs-nadzag: 13px;                  /* слова в штампах и ярлыках */
  --fs-ruka: 22px;                    /* пометки от руки */

  /* Межстрочные */
  --lh-zag: 1.14;
  --lh-tekst: 1.55;

  /* Ширина и отступы */
  --shirina-teksta: 720px;
  --pole: 20px;                                  /* поля страницы на телефоне */
  --otstup-bloka: clamp(46px, 7vw, 68px);         /* сверху и снизу блока */
  --radius: 2px;                                  /* листки и фото почти без скругления */
  --radius-knopki: 6px;
}

/* Кнопки: ровно два вида. Третий не заводить. */
.btn,
.btn-vtor {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  min-width: 280px;
  padding: 14px 30px;
  border-radius: var(--radius-knopki);
  font-family: var(--f-zag);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, background-color .12s;
}
.btn { background: var(--c-tekst); color: var(--c-fon-2); border: none; box-shadow: 4px 4px 0 var(--c-akcent); }
.btn:hover { background: #000; transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--c-akcent); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--c-akcent); }
.btn-vtor { background: transparent; color: var(--c-tekst); border: 2px solid var(--c-tekst); }
.btn-vtor:hover { background: var(--c-fon-2); }
.btn-vtor:active { transform: translate(1px, 1px); }
.btn:focus-visible, .btn-vtor:focus-visible { outline: 2px solid var(--c-ruchka); outline-offset: 4px; }

/* Узкий телефон: кнопка во всю ширину */
@media (max-width: 360px) {
  .btn, .btn-vtor { min-width: 0; width: 100%; padding-left: 14px; padding-right: 14px; }
}
@media (prefers-reduced-motion: reduce) { .btn, .btn-vtor { transition: none; } }