/* ============================================================
   02 — LAYOUT / СЕТКА / ОБЁРТКИ
   ============================================================ */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* Ниже первого экрана — отложенный рендер (кроме cinematic: там тяжёлые фоны) */
.section:not(.hero):not(.section--cine) {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

/* Тонкая разделительная линия между секциями (не трогаем ::before у cinematic — там фон) */
.section + .section:not(.section--cine)::before {
  content: "";
  position: absolute;
  top: 0; left: var(--gutter); right: var(--gutter);
  height: 1px;
  background: var(--line);
  z-index: 3;
  pointer-events: none;
}
.section--cine + .section:not(.section--cine)::before {
  opacity: 0.35;
}

/* --- Заголовок секции: индекс + лейбл --- */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7ch;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--rust-3);
}
.eyebrow::before {
  content: "";
  width: 2.4rem;
  height: 2px;
  background: var(--red);
}

.section-title {
  font-size: var(--step-3);
  max-width: 18ch;
  text-wrap: balance;
}
.section-title .accent { color: var(--red); }

.section-head__aside {
  max-width: 38ch;
  color: var(--bone-dim);
  font-size: var(--step-0);
}

/* --- Универсальные сетки --- */
.grid { display: grid; gap: clamp(1rem, 0.6rem + 1.4vw, 1.6rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

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

/* Декоративная диагональная штриховка (опасность) */
.hazard-bar {
  height: 14px;
  width: 100%;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--hazard) 0 18px,
    #000 18px 36px
  );
  background-size: 51px 51px;
}