/* ============================================================
   Персональный сайт И. А. Колесниковой
   Страницы 3–8 — перевод эскизов .doc в HTML/CSS
   Стиль взят из исходных Word-макетов: белый текст Arial/Georgia
   на цветном градиентном фоне каждой страницы.
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #ffffff;
  /* фон-градиент задаётся для каждой страницы инлайн (background-color + background-image) */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
}

/* страница, где исходный макет использовал шрифт Georgia */
body.serif { font-family: Georgia, "Times New Roman", serif; }

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

a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: #fff8e6; }

/* ---------- контейнер «листа» ---------- */
.wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 34px 26px 70px;
}

/* ---------- шапка (как в макете) ---------- */
.doc-head {
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.35;
  margin-bottom: 26px;
}
.doc-head p { margin: 0; }

/* ---------- заголовок страницы ---------- */
.doc-title {
  text-align: center;
  font-weight: 700;
  font-size: 1.9rem;
  letter-spacing: .02em;
  margin: 8px 0 22px;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}

/* ---------- эпиграфы ---------- */
.epigraph {
  font-style: italic;
  text-align: right;
  margin: 0 0 8px;
  font-size: .98rem;
  line-height: 1.45;
}
.epigraph .author { display: block; font-style: italic; opacity: .92; }
.epigraph + .epigraph { margin-top: 14px; }

/* ---------- разделы / под-разделы ---------- */
.section { margin: 30px 0; }
.section__title {
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 0 10px;
}
.section__num { margin-right: .35em; }

.lead { font-size: 1.05rem; }
p.body { text-align: justify; margin: 12px 0; }

/* биографические абзацы (в макете — более мелкий кегль) */
.bios p.body { font-size: .94rem; margin: 9px 0; }
.fnref { text-decoration: none; }
.fnref sup { font-size: .7em; }

/* ---------- иллюстрации ---------- */
figure { margin: 18px 0; }
figure.center { text-align: center; }
figure img {
  display: inline-block;
  border: 3px solid rgba(255,255,255,.85);
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  border-radius: 2px;
}
figure.right { text-align: right; }
figcaption { margin-top: 6px; font-style: italic; font-size: .95rem; }

/* ---------- ссылки-списки (как «Ссылки на папки/файлы») ---------- */
.links-label { text-align: center; font-weight: 700; margin: 22px 0 10px; }
ol.links, ul.links { margin: 0 auto; padding-left: 1.4em; max-width: 560px; }
ol.links li, ul.links li { margin: 7px 0; font-size: 1.02rem; }
ul.links.plain { list-style: none; padding-left: 0; text-align: center; }

/* ---------- белая «карточка»-меню (как в макетах 4 и 5) ---------- */
.card {
  background: #fff;
  color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 3px;
  padding: 16px 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.card ul { list-style: none; margin: 0; padding: 0; }
.card li { margin: 9px 0; }
.card a { color: #1a3a6b; text-decoration: none; }
.card a:hover { text-decoration: underline; }

/* блок «карточка + изображение» рядом */
.media-row {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
  margin: 22px 0;
}
.media-row .card { flex: 0 0 230px; }
.media-row figure { margin: 0; flex: 0 1 auto; }

/* placeholder-рамка (пустая картинка-заглушка из макета) */
.placeholder-box {
  width: 176px; height: 254px;
  border: 1px dashed rgba(255,255,255,.7);
  border-radius: 2px;
}

/* ---------- сноска ---------- */
.footnote {
  margin-top: 34px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.55);
  font-size: .85rem;
  max-width: 33%;
}

/* ---------- нижняя навигация по разделам ---------- */
.site-nav {
  margin-top: 48px;
  padding: 18px 0 4px;
  border-top: 1px solid rgba(255,255,255,.45);
  text-align: center;
  font-size: .92rem;
}
.site-nav a { margin: 0 .5em; white-space: nowrap; display: inline-block; }
.note { text-align: right; font-size: .92rem; margin: 6px 0 16px; }

/* ---------- адаптивность ---------- */
@media (max-width: 600px) {
  .doc-title { font-size: 1.5rem; }
  .wrap { padding: 22px 16px 56px; }
  .footnote { max-width: 100%; }
  .epigraph { text-align: left; }
}