/* Сброс и базовая типографика */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* страховка от горизонтального скролла */
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; padding: 0; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

input, select, textarea { font: inherit; }

h1, h2, h3, h4 { font-weight: inherit; line-height: 1.1; }

/* Контейнер 1240 + поля */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Появление блоков при скролле (только при включённом JS — иначе контент виден сразу) */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* Заголовки секций (Cormorant) */
.h-serif {
  font-family: var(--font-serif);
  font-weight: 600;
}

/* Кнопки */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1;
  border-radius: var(--r-pill);
  padding: 13px 21px;
  white-space: nowrap;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn--accent {
  background: var(--accent);
  color: var(--accent-on);
  box-shadow: var(--shadow-accent);
}
.btn--accent:hover { background: var(--accent-dark); }

/* Бренд (логотип-марка + название) — общий для шапки и подвала */
.brand { display: inline-flex; align-items: center; gap: var(--r-sm); }
.brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 21px;
  background: var(--ink);
  color: var(--accent-on);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1;
}
.brand__mark--accent { background: var(--accent); }
.brand__name { display: inline-flex; flex-direction: column; min-width: 0; }
.brand__name strong {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.36px;
  line-height: 1.05;
}
.brand__name em {
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: 1.84px;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1;
}