/* ==========================================================================
   Esperanto. Базовые стили.
   Только теги и сквозное поведение. Компоненты живут в глобальных классах Bricks.
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--e-paper);
  color: var(--e-ink);
  font-family: var(--e-sans);
  font-size: var(--e-fs-body);
  line-height: var(--e-lh-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}

/* --- Заголовки ------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--e-serif);
  font-weight: var(--e-fw-semi);
  color: var(--e-ink);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--e-fs-h1); line-height: var(--e-lh-tight); letter-spacing: var(--e-ls-h1); }
h2 { font-size: var(--e-fs-h2); line-height: 1.12; letter-spacing: -0.02em; }
h3 { font-size: var(--e-fs-h3); line-height: var(--e-lh-head); letter-spacing: var(--e-ls-head); }
h4 { font-size: var(--e-fs-h4); line-height: var(--e-lh-head); letter-spacing: var(--e-ls-head); }

/* --- Текст ---------------------------------------------------------------- */

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--e-dur-fast) var(--e-ease-out);
}
a:hover { color: var(--e-accent); }

strong, b { font-weight: var(--e-fw-semi); }
small { font-size: var(--e-fs-legal); }

hr {
  border: 0;
  border-top: var(--e-rule-w) solid var(--e-rule);
  margin: var(--e-block-y) 0;
}

blockquote {
  margin: var(--e-block-y) 0;
  padding-left: clamp(18px, 2.4vw, 30px);
  border-left: 3px solid var(--e-accent);
  font-family: var(--e-serif);
  font-size: var(--e-fs-quote);
  line-height: var(--e-lh-snug);
  letter-spacing: var(--e-ls-head);
}

/* Цифры в перечнях и ценах выравниваются по разрядам */
.e-tabular, td, th { font-variant-numeric: tabular-nums; }

/* --- Формы ---------------------------------------------------------------- */

input, button, textarea, select { font: inherit; color: inherit; }

input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="number"], textarea, select {
  background: var(--e-paper);
  border: var(--e-rule-w) solid var(--e-rule);
  border-radius: 0;
  padding: var(--e-field-pad);
  font-size: var(--e-field-fs);
  outline: none;
  width: 100%;
}
input:focus, textarea:focus, select:focus { border-color: var(--e-ink); }

input[type="checkbox"] { accent-color: var(--e-accent); }

button { cursor: pointer; }

::placeholder { color: var(--e-ink-faint); opacity: 1; }
::selection { background: var(--e-accent); color: var(--e-accent-ink); }

/* --- Медиа ----------------------------------------------------------------- */

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

/* --- Доступность ------------------------------------------------------------ */

:focus-visible { outline: 2px solid var(--e-accent); outline-offset: 2px; }

.e-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}