/* ============================================================
   HISTORY — базовые стили: шрифты, сброс, типографика, сетка
   ============================================================ */

@font-face {
  font-family: "Prata";
  src: url("../fonts/prata-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Google Sans";
  src: url("../fonts/googlesans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans";
  src: url("../fonts/googlesans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans";
  src: url("../fonts/googlesans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans";
  src: url("../fonts/googlesans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

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

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-t2);
  line-height: var(--lh-t2);
  color: var(--brown-2);
  background: var(--back-warm-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

/* --- Типографика --- */
.display { font-family: var(--font-display); font-weight: 400; }

.h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  text-wrap: balance;
}
.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  text-wrap: balance;
}
.h3 { font-family: var(--font-text); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); }
.h4 { font-family: var(--font-text); font-weight: 700; font-size: var(--fs-h4); line-height: var(--lh-h4); }

.t1 { font-size: var(--fs-t1); line-height: var(--lh-t1); text-wrap: balance; }
.t2 { font-size: var(--fs-t2); line-height: var(--lh-t2); text-wrap: balance; }
.t3 { font-size: var(--fs-t3); line-height: var(--lh-t3); }
.marker {
  font-size: var(--fs-marker);
  line-height: var(--lh-marker);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* --- Контейнер --- */
.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--content-pad);
}

/* --- Кнопки --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.btn-l { font-size: 14px; line-height: 1; min-height: 52px; padding: 0 28px; }
.btn-m { font-size: 12px; line-height: 1; min-height: 44px; padding: 0 24px; }

/* --- Видимость по брейкпоинтам --- */
@media (min-width: 768px) {
  .only-mob { display: none !important; }
}
@media (max-width: 767px) {
  .only-desktop { display: none !important; }
}

::selection { background: var(--bezh-2); }