/* =========================================================================
   Mission 301 — Информационная страница (simplepage)
   Шапка — общий компонент .ahero из style.css. Здесь только то, что есть
   на этой странице и больше нигде: фоновая картинка шапки из TV и
   типографика текста из поля «Содержимое».
   ========================================================================= */

.simplepage { padding-top: var(--header-h); }

/* ---------------- Шапка ---------------- */
/* Сама шапка — общий компонент .ahero из style.css.
   Фоновая картинка приходит из TV и кладётся на body::before ровно так же,
   как ангел на About: секции своего фона не имеет. Правило подставляется
   инлайном в simplepage.tpl, потому что путь известен только в рантайме. */

/* ---------------- Текст страницы ---------------- */
.pagebody { padding: clamp(36px, 5vw, 68px) 0 clamp(60px, 8vw, 100px); }

/* Содержимое приходит из визуального редактора, поэтому стилизуем теги,
   а не классы — разметку тут задаёт контент-менеджер, а не мы */
.prose {
  max-width: 820px;
  color: var(--body-text);
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.75;
}

.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

.prose h2,
.prose h3,
.prose h4 {
  margin: 1.8em 0 .6em;
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .06em;
  color: var(--gold-bright);
}
.prose h2 { font-size: clamp(24px, 2.6vw, 34px); text-transform: uppercase; }
.prose h3 { font-size: clamp(20px, 2vw, 26px); }
.prose h4 { font-size: clamp(18px, 1.6vw, 21px); color: var(--text); }

.prose p { margin: 0 0 1.15em; }

.prose a {
  color: var(--gold-bright);
  border-bottom: 1px solid var(--line);
  transition: color .2s ease, border-color .2s ease;
}
.prose a:hover { color: #FBAB04; border-bottom-color: #FBAB04; }

.prose strong, .prose b { color: var(--text); font-weight: 600; }
.prose em, .prose i { color: var(--text); }

.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.prose li { margin-bottom: .5em; }
.prose ul li::marker { color: var(--gold-muted); }
.prose ol li::marker { color: var(--gold-muted); font-family: var(--font-head); }

.prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 1px solid var(--gold-muted);
  font-style: italic;
  font-size: 1.08em;
  color: var(--text);
}

.prose hr {
  height: 1px;
  margin: 2em 0;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--gold-muted), transparent);
  opacity: .7;
}

.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.6em 0;
  border: 1px solid var(--line-soft);
}

/* широкие таблицы прокручиваются сами, а не ломают колонку текста */
.prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
  margin: 1.6em 0;
  border-collapse: collapse;
  font-size: .95em;
}
.prose th, .prose td { padding: 10px 14px; border: 1px solid var(--line-soft); text-align: left; }
.prose th { font-family: var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-bright); }

@media (max-width: 760px) {
  .prose { font-size: 17px; }
}