/* WAH HR - база: сброс, шрифт, типографика, контейнер. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/Inter.woff2') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture, svg { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink-900);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); }

.display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.lead { font-size: var(--fs-lg); line-height: var(--lh-lg); color: var(--ink-700); }
.muted { color: var(--ink-500); }
.small { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.eyebrow {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--ink-500);
}

a { color: var(--brand-red-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; }
.section--muted { background: var(--bg-muted); }
.section--dark { background: var(--bg-dark); color: #fff; }

.grid { display: grid; gap: var(--gutter); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}