/* ============================================================
   base.css — сброс, типографика, сетка страницы.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    /* Убираем перемещение, оставляем прозрачность и цвет. */
    transition-property: opacity, background-color, border-color, color, box-shadow !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.005em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  line-height: 1.05;
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); line-height: 1.2; }
h4 { font-size: var(--step-0); line-height: 1.3; }

p { margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-color: var(--accent); }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

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

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* — Сетка страницы — */
.wrap {
  width: min(100% - var(--gutter) * 2, var(--page));
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - var(--gutter) * 2, 780px); }

.section { padding-block: var(--space-6); }
.section--tight { padding-block: var(--space-5); }

.stack > * + * { margin-top: var(--space-3); }

/* — Заголовок секции: вертикальный стек, без «большой слева, абзац справа» — */
.section-head { margin-bottom: var(--space-4); }
.section-head p { margin-top: var(--space-2); color: var(--muted); max-width: 52ch; }

/* Второй столбец допустим, только когда справа настоящий элемент, а не текст. */
.section-head--action {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-3);
}

.lede { font-size: var(--step-1); line-height: 1.45; color: var(--muted); }

.u-muted { color: var(--muted); }

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

.skip-link {
  position: absolute; left: var(--gutter); top: -100%;
  z-index: 100; padding: 0.7em 1.2em;
  background: var(--ink); color: var(--bg);
  border-radius: var(--radius-pill); text-decoration: none;
}
.skip-link:focus { top: var(--space-2); }


/* — Один авторский момент на страницу: афиша въезжает каскадом, потому что
     это лента дат и порядок в ней несет смысл. Остальные секции стоят на месте —
     одинаковый вход у каждой секции читается как шаблон, а не как замысел. — */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] .events > * {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity var(--dur-reveal) var(--ease-out),
      transform var(--dur-reveal) var(--ease-out);
  }
  [data-reveal='in'] .events > * { opacity: 1; transform: none; }

  [data-reveal='in'] .events > :nth-child(2) { transition-delay: 55ms; }
  [data-reveal='in'] .events > :nth-child(3) { transition-delay: 110ms; }
  [data-reveal='in'] .events > :nth-child(4) { transition-delay: 165ms; }
  [data-reveal='in'] .events > :nth-child(n + 5) { transition-delay: 220ms; }
}