@layer base {
  /* Вариативное начертание: один файл на весь диапазон 250–1000. */
  @font-face {
    font-family: "Tilda Sans";
    src:
      url("../assets/fonts/TildaSans-VF.woff2") format("woff2-variations"),
      url("../assets/fonts/TildaSans-VF.woff") format("woff-variations");
    font-weight: 250 1000;
    font-style: normal;
    font-display: swap;
  }

  body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-snug);
    color: var(--color-body);
    background-color: var(--color-surface);
    overflow-x: clip;
  }

  ::selection {
    background-color: var(--color-brand);
    color: var(--color-on-dark);
  }

  :focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
  }

  /* ---------- Каркас страницы ---------- */

  .shell {
    inline-size: 100%;
    max-inline-size: calc(var(--shell-max) + var(--space-shell) * 2);
    margin-inline: auto;
    padding-inline: var(--space-shell);
  }

  .shell--narrow {
    max-inline-size: calc(var(--shell-narrow) + var(--space-shell) * 2);
  }

  .section {
    padding-block: var(--space-section);
    position: relative;
  }

  .section--lg {
    padding-block: var(--space-section-lg);
  }

  .section--tinted {
    background-color: var(--color-surface-3);
  }

  .section--muted {
    background-color: var(--color-surface-2);
  }

  /* Диагональный паттерн из макета — чисто декоративный слой.
     Картинка 1920×586, в макете сидит у верхнего края, а не по центру. */
  .section--patterned::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      url("../assets/img/pattern-lines.webp") center top / 100% auto no-repeat;
    opacity: 0.5;
    pointer-events: none;
  }

  .section > .shell {
    position: relative;
  }

  /* ---------- Типографика ---------- */

  .display {
    font-size: var(--fs-display);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--color-ink);
  }

  .headline {
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--color-ink);
  }

  .lead {
    font-size: var(--fs-lead);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    color: var(--color-body);
  }

  /* Шапка секции: плашка + заголовок + подзаголовок по центру. */
  .section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
    text-align: center;
    margin-block-end: var(--space-5xl);
  }

  .section-head__title {
    max-inline-size: 22ch;
  }

  .section-head__text {
    max-inline-size: 46.875rem;
    /* В макете от заголовка до лида ~10px, а не полный gap шапки. */
    margin-block-start: calc(var(--space-xs) - var(--space-xl));
  }
}