/* ─────────────────────────────────────────────────────────────
   ЖУРНАЛ — типографика статей и списка.
   Подключается ТОЛЬКО на страницах журнала, после styles.css.
   Наследует переменные (--ink, --pad-x, --menu-size, --track-70)
   и шрифтовую пару сайта: Inter + EB Garamond italic.
───────────────────────────────────────────────────────────── */

:root {
  --read-w:  68ch;                       /* ширина колонки чтения */
  --muted:   #6E6B63;                    /* вторичный текст, даты, подписи */
  --rule:    #E4E2DC;                    /* тонкие разделители */
}

/* ─── Общий каркас страниц журнала ─────────────────────────── */
.journal-page {
  padding: clamp(90px, 16vh, 170px) var(--pad-x) 0;
}
.journal-inner {
  max-width: var(--read-w);
  margin: 0 auto;
}

/* ─── Хлебные крошки ───────────────────────────────────────── */
.breadcrumb {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track-70);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(28px, 5vh, 52px);
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span[aria-current] { color: var(--ink); }

/* ─── Заголовки ────────────────────────────────────────────── */
.journal-page h1 {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: clamp(16px, 2.6vh, 26px);
}
.journal-page h2 {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.2;
  margin: clamp(44px, 7vh, 76px) 0 14px;
}
.journal-page h3 {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  letter-spacing: var(--track-70);
  text-transform: uppercase;
  margin: clamp(30px, 4.5vh, 46px) 0 10px;
}

/* ─── Текст ────────────────────────────────────────────────── */
.journal-page p,
.journal-page li {
  font-size: clamp(1rem, 1.5vw, 1.13rem);
  line-height: 1.62;
}
.journal-page p + p { margin-top: 1.05em; }

/* Лид — первый абзац. Это тот самый прямой ответ в первых 40–60 словах,
   который цитируют генеративные движки. Стилистически крупнее корпуса. */
.journal-lede {
  font-size: clamp(1.12rem, 1.9vw, 1.35rem) !important;
  line-height: 1.5 !important;
  margin-bottom: clamp(30px, 5vh, 52px);
}

.journal-page ul, .journal-page ol {
  margin: 1.05em 0 1.05em 1.2em;
}
.journal-page li + li { margin-top: 0.5em; }

.journal-page a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.journal-page a:hover { text-decoration-thickness: 2px; }

.journal-page blockquote {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.45;
  margin: clamp(34px, 5vh, 56px) 0;
  padding-left: 1.1em;
  border-left: 1px solid var(--ink);
}

/* ─── Мета статьи (дата, рубрика, время чтения) ────────────── */
.journal-meta {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track-70);
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.6em;
  margin-bottom: clamp(26px, 4vh, 42px);
  padding-bottom: clamp(18px, 3vh, 28px);
  border-bottom: 1px solid var(--rule);
}

/* ─── Изображения внутри статьи ────────────────────────────── */
.journal-figure { margin: clamp(36px, 6vh, 72px) 0; }
.journal-figure img { width: 100%; height: auto; }
.journal-figure figcaption {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-top: 10px;
}
/* Изображение шире колонки чтения — «выход на поля» */
.journal-figure.wide {
  width: min(100vw - 2 * var(--pad-x), 1400px);
  margin-left: 50%;
  transform: translateX(-50%);
}

/* ─── FAQ-блок (питает FAQPage schema и цитаты в AI-ответах) ── */
.journal-faq { margin-top: clamp(50px, 8vh, 90px); }
.journal-faq .q {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.08rem);
  margin-top: clamp(26px, 4vh, 40px);
  margin-bottom: 8px;
  letter-spacing: 0;
  text-transform: none;
}

/* ─── Список записей на индексе журнала ────────────────────── */
.journal-list {
  list-style: none;
  margin: clamp(40px, 6vh, 70px) 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.journal-list li { margin: 0; }
.journal-list a {
  display: block;
  padding: clamp(22px, 3.4vh, 34px) 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
.journal-list a:hover .entry-title { text-decoration: underline; text-underline-offset: 0.18em; }
.entry-kicker {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track-70);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.entry-title {
  display: block;
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.18;
  margin-bottom: 8px;
}
.entry-dek {
  display: block;
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.5;
  color: var(--muted);
  max-width: 58ch;
}

/* ─── Подвал статьи: соседние записи ───────────────────────── */
.journal-next {
  margin-top: clamp(60px, 10vh, 110px);
  padding-top: clamp(22px, 3.4vh, 34px);
  border-top: 1px solid var(--rule);
  font-size: 12px;
  letter-spacing: var(--track-70);
  text-transform: uppercase;
}

/* ─── Статический футер журнала (без JS: ссылки видны краулеру) ── */
.journal-footer {
  margin-top: clamp(70px, 12vh, 130px);
  padding: clamp(26px, 4vh, 40px) var(--pad-x) clamp(30px, 5vh, 50px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(20px, 5vw, 60px);
}
.journal-footer a {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--menu-size);
  letter-spacing: var(--track-70);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.journal-footer a:hover { text-decoration: underline; }

/* ─── Мобильные ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .journal-page { padding-top: clamp(76px, 13vh, 110px); }
  .journal-figure.wide { width: 100%; margin-left: 0; transform: none; }
}