/* ============================================================
   /assets/styles.css
   Общий стилевой слой для всех lecture-* страниц сайта:
   палитра, сброс, типографика body, навигация (sidenav +
   мобильный hamburger), и весь повторяющийся "каркас" страницы
   лекции (breadcrumb, hero, lang-bar, layout, outline,
   prev/next-навигация, sidebar).

   Что остаётся в <style> каждой страницы:
   - <title>, подключение шрифтов (Google Fonts <link>)
   - уникальный контент (.lecture-desc p текст, .lo-item тексты,
     .sb-* содержимое конкретной страницы)
   - responsive-подстройки, специфичные именно для этой страницы
     (если где-то понадобится отступить от общих брейкпоинтов)
   ============================================================ */

/* ── Палитра (идентична во всех lecture-* страницах) ── */
:root {
  --bg:          #fdfcfb;
  --ink:         #1c1c22;
  --ink-strong:  #0f0f14;
  --ink-muted:   #888;
  --accent:      #c0392b;
  --accent-text: #3d1f1a;
  --accent-bg:   #fdf4f3;
  --rule:        #ddd;
  --navy:        #1a2e4a;
  --navy-light:  #e8edf4;
  --sage:        #2d4a3e;
  --sage-light:  #e8f0ec;
  --amber:       #8a5c1a;
  --amber-light: #fdf4e3;
  --slate:       #3a4a5c;
  --slate-light: #edf0f4;
}

/* ── Сброс + базовая типографика ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Merriweather', serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
}

/* ── Sidenav (desktop) ── */
.sidenav {
  position: fixed;
  top: 0; left: 0;
  width: 200px; height: 100vh;
  background: var(--ink-strong);
  padding: 32px 0 24px;
  display: flex; flex-direction: column;
  z-index: 100; overflow-y: auto;
}
.nav-logo {
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  padding: 0 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 20px;
}
.nav-back {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; color: rgba(255,255,255,0.5);
  text-decoration: none; padding: 0 20px 5px; display: block;
}
.nav-back:hover { color: rgba(255,255,255,0.85); }
.nav-section {
  font-family: 'Inter', sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  padding: 16px 20px 10px;
}
.sidenav a.nav-item {
  display: block; font-family: 'Inter', sans-serif;
  font-size: 11px; color: rgba(255,255,255,0.55);
  text-decoration: none; padding: 5px 20px; transition: color 0.15s;
}
.sidenav a.nav-item:hover { color: rgba(255,255,255,0.9); }
.sidenav a.nav-item.active { color: #fff; }
.nav-lang-group { padding: 16px 20px 0; }
.nav-lang-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.25); margin-bottom: 8px;
}
.nav-lang-btn {
  display: block; font-family: 'Inter', sans-serif;
  font-size: 11px; color: rgba(255,255,255,0.55);
  text-decoration: none; padding: 4px 0; transition: color 0.15s;
}
.nav-lang-btn:hover { color: rgba(255,255,255,0.9); }
.nav-lang-btn.active { color: #fff; font-weight: 600; }
.nav-cta {
  margin: 20px 20px 0; display: block; padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.15); border-radius: 2px;
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 500;
  color: rgba(255,255,255,0.6); text-decoration: none; text-align: center;
  transition: color 0.15s, border-color 0.15s;
}
.nav-cta:hover { border-color: rgba(255,255,255,0.4); color: #fff; }

/* Отступ контента под фиксированный sidenav */
.main { margin-left: 200px; min-height: 100vh; }

/* ── Мобильный topbar + hamburger (скрыт на десктопе) ── */
#mobile-topbar { display: none; }
#nav-overlay { display: none; }

@media (max-width: 860px) {
  #mobile-topbar {
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; top: 0; left: 0; right: 0; height: 52px;
    background: var(--ink-strong); border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 0 16px; z-index: 110;
  }
  #mobile-topbar .mt-logo {
    font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55);
  }
  #mobile-topbar .mt-toggle {
    display: flex; flex-direction: column; gap: 3px;
    background: none; border: none; padding: 8px; cursor: pointer;
  }
  #mobile-topbar .mt-toggle span {
    display: block; width: 18px; height: 1.5px; background: rgba(255,255,255,0.85);
  }

  .sidenav {
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    top: 0; height: 100vh; padding-top: 68px;
    width: 78vw; max-width: 280px;
    box-shadow: 2px 0 18px rgba(0,0,0,0.35);
  }
  .sidenav.open { transform: translateX(0); }

  #nav-overlay.open {
    display: block; position: fixed; inset: 52px 0 0 0;
    background: rgba(0,0,0,0.45); z-index: 95;
  }

  .main { margin-left: 0; padding-top: 52px; }
}

/* ============================================================
   Каркас страницы лекции (общий для всех lecture-* страниц)
   ============================================================ */

/* ── Breadcrumb ── */
.breadcrumb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 48px;
  border-bottom: 1px solid var(--rule);
}
.breadcrumb {
  font-family: 'Inter', sans-serif; font-size: 10.5px;
  color: var(--ink-muted);
}
.breadcrumb a { color: var(--ink-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }
.bc-sep { margin: 0 6px; }
.bc-cur { color: var(--ink); }
.lang-switch { display: flex; align-items: center; gap: 8px; }
.lang-switch a {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 6px 14px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.lang-switch a:hover { border-color: var(--navy); color: var(--navy); background: var(--navy-light); }

/* ── Hero: title then video, stacked ── */
.lecture-hero {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--rule);
}
.lh-title-panel {
  padding: 44px 52px 36px 52px;
  display: flex; flex-direction: column; justify-content: center;
  border-bottom: 1px solid var(--rule);
}
.lh-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
.lh-title,
.ph-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.85rem; line-height: 1.25;
  color: var(--ink-strong); margin-bottom: 22px;
}
/* ── Optional subtitle line for .lh-title ──
   Opt-in, page by page: split an overlong title into a short main
   title (.lh-title) plus a lighter second line (.lh-subtitle). Not
   used by default — most lecture titles are short enough on their
   own. Spacing is handled here, no per-page rule needed:
   - a .lh-title that is immediately followed by a .lh-subtitle gets a
     tight 2px gap (title → subtitle);
   - .lh-subtitle leaves 22px before the description (subtitle → desc);
   - a .lh-title without a subtitle keeps its default 22px margin.
   The :has() selector is deliberately more specific than a plain
   `.lh-title` rule, so it also wins over any older per-page
   `.lh-title { margin-bottom: … }` override. */
.lh-title:has(+ .lh-subtitle) {
  margin-bottom: 2px;
}
.lh-subtitle {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.3;
  color: #4a4a52;
  margin-bottom: 22px;
}
.lh-desc,
.ph-desc {
  font-family: 'Merriweather', serif;
  font-weight: 300; font-size: 13px; line-height: 1.8;
  color: var(--ink-muted);
}

/* .ph-title / .ph-desc (project index hero) share the .lh-title / .lh-desc
   type styles above, so a project index and a lecture page open identically.
   Index-only extras (spacing, italic tagline) stay in the index page. */
/* ── Shared width constraint for hero/lead title+description blocks ──
   Used on lecture-* pages (.lh-title / .lh-desc) and on project/index
   pages built on the same layout (.ph-title / .ph-desc / .overview-body).
   Keeps lead copy from stretching edge-to-edge on wide viewports. */
.lh-title, .lh-desc,
.ph-title, .ph-desc,
.overview-body,
.essay-body-wrap {
  max-width: 75%;
}
.lh-desc strong { color: var(--ink); font-weight: 700; }
.lh-desc em { font-style: italic; }
.lh-meta {
  margin-top: 24px;
  display: flex; align-items: center; gap: 20px;
  flex-wrap: wrap;
}
.lh-meta-item {
  font-family: 'Inter', sans-serif;
  font-size: 10px; color: var(--ink-muted);
}
.lh-meta-item strong { color: var(--ink); font-weight: 500; }

/* Right: video thumbnail */
.lh-video-panel {
  background: #0f1e30;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 28px 52px; gap: 16px;
}
.lv-thumb {
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16/9;
  background: linear-gradient(145deg, #1a2e4a 0%, #0a1522 100%);
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  transition: border-color 0.2s;
}
.lv-thumb:hover { border-color: rgba(255,255,255,0.2); }
.lv-play {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.4);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.15s;
}
.lv-thumb:hover .lv-play {
  background: rgba(255,255,255,0.2);
  transform: scale(1.06);
}
.lv-play svg { margin-left: 4px; }
.lv-label {
  font-family: 'Inter', sans-serif;
  font-size: 8px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  position: absolute; bottom: 10px; left: 12px;
}
.lv-platform {
  font-family: 'Inter', sans-serif;
  font-size: 9px; color: rgba(255,255,255,0.4);
  text-align: center;
}
.lv-platform a { color: rgba(255,255,255,0.6); text-decoration: none; }
.lv-platform a:hover { color: #fff; }

/* ── Language access bar ── */
.lang-bar {
  display: flex; align-items: center; gap: 0;
  border-bottom: 1px solid var(--rule);
}
.lb-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted);
  padding: 14px 24px 14px 52px;
  border-right: 1px solid var(--rule);
  white-space: nowrap;
  flex-shrink: 0;
}
.lang-options { display: flex; gap: 0; }
.lang-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 24px;
  border-right: 1px solid var(--rule);
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--ink-muted);
  transition: background 0.12s, color 0.12s;
}
.lang-opt:hover { background: var(--navy-light); color: var(--ink); }
.lang-opt.active {
  background: var(--navy-light);
  color: var(--navy);
  font-weight: 600;
}
.lo-badge {
  font-family: 'Inter', sans-serif;
  font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 2px;
}
.lo-en { background: var(--navy-light); color: var(--navy); }
.lo-ru { background: var(--accent-bg); color: var(--accent-text); }
.lo-fr { background: var(--sage-light); color: var(--sage); }

/* ── Body: content + sidebar ── */
.lecture-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  align-items: start;
}
.lecture-content {
  padding: 44px 52px 64px 52px;
  border-right: 1px solid var(--rule);
}
.section-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 16px; padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.lecture-desc p {
  font-family: 'Merriweather', serif;
  font-weight: 300; font-size: 13.5px;
  line-height: 1.85; color: var(--ink);
  margin-bottom: 18px;
}
.lecture-desc strong { color: var(--ink-strong); font-weight: 700; }
.lecture-desc em { font-style: italic; }
/* Буквица на первом абзаце — опционально, включать классом
   .lecture-desc.dropcap на нужной странице */
.lecture-desc.dropcap p:first-of-type::first-letter {
  font-family: 'DM Serif Display', serif;
  font-size: 3em; line-height: 0.9;
  float: left; padding: 4px 6px 0 0;
  color: var(--ink-strong);
}

/* ── Lecture outline (timed blocks) ── */
.lecture-outline { margin-top: 60px; margin-bottom: 40px; }
.lo-item {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.lo-item:first-child { border-top: 1px solid var(--rule); }
.lo-time {
  font-family: 'Inter', sans-serif;
  font-size: 10px; color: var(--ink-muted);
  padding-top: 1px;
}
.lo-item-title {
  font-family: 'Merriweather', serif;
  font-size: 13px; font-weight: 400;
  color: var(--ink); line-height: 1.5;
}
.lo-item-title.core { color: var(--accent-text); font-weight: 700; }
.lo-note {
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-style: italic;
  color: var(--ink-muted);
  margin-top: 4px; margin-bottom: 28px;
}

/* ── Lecture navigation (prev / next) ── */
.lecture-nav {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.ln-item {
  display: block;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.12s;
}
.ln-item:hover { border-color: var(--navy); background: var(--navy-light); }
.ln-item.ln-next { text-align: right; }
.ln-direction {
  font-family: 'Inter', sans-serif;
  font-size: 8.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 6px;
}
.ln-title {
  font-family: 'Merriweather', serif;
  font-size: 12px; font-weight: 300;
  color: var(--ink); line-height: 1.4;
}
.ln-set {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px; color: var(--ink-muted);
  margin-top: 5px;
}
.ln-item.ln-empty { opacity: 0.35; pointer-events: none; border-style: dashed; }

/* ── Sidebar ── */
.lecture-sidebar { padding: 40px 28px 40px 24px; }

.sb-block { margin-bottom: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--rule); }
.sb-block:last-child { border-bottom: none; }
.sb-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 14px;
}

/* Project card */
.sb-project-card {
  display: block; border: 1px solid var(--rule);
  border-radius: 3px; padding: 14px 16px;
  text-decoration: none; transition: border-color 0.15s;
  margin-bottom: 10px;
}
.sb-project-card:last-child { margin-bottom: 0; }
.sb-project-card:hover { border-color: var(--navy); }
.spc-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 5px;
}
.spc-title {
  font-family: 'Merriweather', serif;
  font-size: 11.5px; font-weight: 300;
  color: var(--ink); line-height: 1.45; margin-bottom: 8px;
}
.spc-link { font-family: 'Inter', sans-serif; font-size: 10px; color: var(--navy); }

/* Book card (sidebar variant) — same cover asset and 86:128 ratio as .book-cover-img,
   scaled down to the sidebar; author omitted at this size */
.sb-book-card { display: flex; gap: 14px; align-items: center; }
.sb-book-cover {
  flex-shrink: 0;
  width: 52px; aspect-ratio: 86 / 128; height: auto;
  object-fit: cover;
  border-radius: 1px;
  box-shadow: 2px 3px 8px rgba(0,0,0,0.3);
  display: block;
}
.sb-book-info { min-width: 0; }
.sb-book-title {
  font-family: var(--book-title-font, 'DM Serif Display', serif);
  font-size: 14px; line-height: 1.3;
  color: var(--ink-strong); margin-bottom: 6px;
}
.sb-book-sub {
  font-family: 'Merriweather', serif; font-style: italic; font-weight: 300;
  font-size: 10px; line-height: 1.5; color: var(--ink-muted);
  margin-bottom: 8px;
}

/* Related lectures list */
.sb-lec-item { padding: 9px 0; border-bottom: 1px solid var(--rule); }
.sb-lec-item:first-child { padding-top: 4px; }
.sb-lec-item:last-child { border-bottom: none; padding-bottom: 4px; }
.sli-tag {
  font-family: 'Inter', sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 3px;
}
.sli-title {
  font-family: 'Merriweather', serif;
  font-size: 11px; font-weight: 300;
  color: var(--ink); line-height: 1.4;
}
.sli-title a { text-decoration: none; color: inherit; }
.sli-title a:hover { color: var(--navy); }
.sli-title.current { color: var(--accent); font-style: italic; }
.sli-doi {
  font-family: 'Inter', sans-serif;
  font-size: 9px; color: var(--ink-muted);
  margin-top: 2px;
}

/* Detail rows */
.sb-detail-row {
  display: flex; justify-content: space-between;
  align-items: baseline; padding: 6px 0;
  border-bottom: 1px solid var(--rule);
  font-family: 'Inter', sans-serif; font-size: 10.5px;
}
.sb-detail-row:last-child { border-bottom: none; }
.sdr-key { color: var(--ink-muted); }
.sdr-val { color: var(--ink); font-weight: 500; }

/* Publications list (Related Publications block) */
.sb-pub-item { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.sb-pub-item:last-child { border-bottom: none; }
.spi-doi {
  font-family: 'Inter', sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 3px;
}
.spi-title {
  font-family: 'Merriweather', serif;
  font-size: 11px; font-weight: 300;
  color: var(--ink); line-height: 1.4; margin-bottom: 4px;
}
.spi-title a { text-decoration: none; color: inherit; }
.spi-title a:hover { color: var(--navy); }
.spi-link { font-family: 'Inter', sans-serif; font-size: 10px; color: var(--navy); text-decoration: none; }
.spi-link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════
   BOOK CARD (used across project pages)
   — mirrors the .book-row treatment on the
     homepage (index.html / styles-index.css)
═══════════════════════════════════════ */
.book-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color 0.15s;
  max-width: 640px;
}
.book-card:hover { border-color: var(--navy); }
.book-cover {
  padding: 40px 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy);
}
.book-cover-img {
  width: 86px; height: 128px;
  object-fit: cover;
  border-radius: 1px;
  box-shadow: 2px 3px 10px rgba(0,0,0,0.4);
  display: block;
}
.book-card-info {
  padding: 26px 28px 24px 20px;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.book-eyebrow {
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted);
  margin-bottom: 10px;
}
.book-title {
  font-family: var(--book-title-font, 'Alegreya', serif); font-weight: 500; font-size: 1.15rem;
  color: var(--ink-strong); line-height: 1.35; margin-bottom: 10px;
}
.book-desc {
  font-family: 'Merriweather', serif; font-style: italic; font-weight: 300;
  font-size: 0.85rem; line-height: 1.55; color: var(--ink-muted);
  margin-bottom: 8px;
}
/* Book pages (.book-body) reuse the class name .book-desc for their long-form
   "About the book" wrapper. The rule above styles the lecture sidebar's book
   card; without this reset its italic leaks into every paragraph (and into
   .key-argument) on book pages, and <em> loses its emphasis. */
.book-body .book-desc { font-style: normal; }
.book-author {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 0.03em; color: var(--ink-muted);
  margin-top: 20px;
}

/* ═══════════════════════════════════════
   RESPONSIVE — MID-SIZE (laptop/small desktop)
═══════════════════════════════════════ */
@media (max-width: 1100px) {
  .lh-title, .lh-desc,
  .ph-title, .ph-desc,
  .overview-body,
  .essay-body-wrap { max-width: 88%; }
}

/* ═══════════════════════════════════════
   RESPONSIVE — TABLET & MOBILE
   (значения ниже согласованы между всеми lecture-* страницами —
   если для конкретной страницы нужно другое значение, переопределяй
   в её собственном <style> ПОСЛЕ подключения styles.css)
═══════════════════════════════════════ */
@media (max-width: 860px) {
  .breadcrumb-row { padding: 14px 20px; align-items: flex-start; }
  .breadcrumb { font-size: 9px; }
  /* Language buttons live in the hamburger menu (.nav-lang-group) on mobile —
     hide the top-right duplicate in the breadcrumb row. */
  .lang-switch { display: none; }

  .lh-title-panel { padding: 32px 20px 28px 20px; }
  .lh-title, .ph-title { font-size: 1.35rem; }
  .lh-subtitle { font-size: 1.1rem; }
  .lh-desc, .ph-desc { font-size: 12.5px; }
  .lh-title, .lh-desc,
  .ph-title, .ph-desc,
  .overview-body,
  .essay-body-wrap { max-width: 100%; }
  .lh-video-panel { padding: 24px 20px; }
  .lh-meta { gap: 12px 20px; }

  .lang-bar { flex-wrap: wrap; }
  .lb-label { padding: 12px 20px; border-right: none; border-bottom: 1px solid var(--rule); width: 100%; }
  .lang-options { flex-wrap: wrap; }
  .lang-opt { padding: 12px 16px; }

  .lecture-body { grid-template-columns: 1fr; }
  .lecture-content { padding: 32px 20px; border-right: none; border-bottom: 1px solid var(--rule); }
  .lecture-sidebar { padding: 32px 20px; }

  .lecture-nav { grid-template-columns: 1fr; }
  .ln-item.ln-next { text-align: left; }

  .lo-item { grid-template-columns: 68px 1fr; gap: 12px; }
}

@media (max-width: 480px) {
  .lh-title, .ph-title { font-size: 1.25rem; }
  .lh-subtitle { font-size: 1rem; }
  .lh-eyebrow { font-size: 8.5px; }
  .lh-meta { gap: 12px; }
  .lo-item { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================
   KEY LECTURES — shared component across all project-* pages
   (grid of lecture cards with thumbnail, title, caption)

   .kl-title reserves a fixed 2-line box (min-height + line-clamp
   fallback) so a 1-line title and a 2-line title in the same row
   both push their .kl-thumb-wrap down by the same amount. Without
   this, cards with short titles have taller top-aligned thumbnails
   than the ones next to them. .kl-card is a flex column so every
   child stacks against this fixed reference point instead of
   plain block flow.
   ============================================================ */
.kl-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px;
}
.kl-grid.kl-grid-3 { grid-template-columns: repeat(2, 1fr); gap: 36px 32px; }

/* Medium screens: sidenav (196px) eats into the available width, so a
   2-up video grid gets cramped well before the 860px mobile breakpoint.
   Drop to a single column through this range so thumbnails stay legible. */
@media (min-width: 861px) and (max-width: 1180px) {
  .kl-grid.kl-grid-3 { grid-template-columns: 1fr; gap: 32px; }
}

.kl-card { display: flex; flex-direction: column; }
.kl-eyebrow {
  font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted);
  margin-bottom: 8px;
}
.kl-title {
  font-family: var(--book-title-font, 'DM Serif Display', serif); font-size: 1.1rem;
  color: var(--ink-strong); line-height: 1.35; margin-bottom: 14px;
  min-height: calc(1.35em * 2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
a.kl-title-link { display: block; text-decoration: none; color: inherit; }
a.kl-title-link:hover .kl-title { color: var(--accent); }
.kl-thumb-wrap { display: block; margin-bottom: 14px; }
.kl-lang-note {
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 300;
  color: var(--ink-muted); margin-top: auto; padding-top: 10px;
}
.kl-lang-note a {
  color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--navy-light);
}
.kl-lang-note a:hover { border-bottom-color: var(--navy); }

@media (max-width: 860px) {
  .kl-grid { grid-template-columns: 1fr !important; gap: 32px; }
}

/* ============================================================
   Russian typography layer — html:lang(ru)
   ------------------------------------------------------------
   Why: DM Serif Display has no Cyrillic glyphs. On RU pages any
   heading set in it silently falls back to the browser's default
   serif, and each page ended up patching that differently.
   This block puts every display-serif element on Alegreya, the
   face the RU lecture pages already use.

   How it works
   - Keyed on html:lang(ru): EN / FR pages are not affected.
   - html:lang(ru) .x has specificity (0,2,1), so it also wins over
     per-page rules such as `.x` or `.a .b` — pages need no override
     of their own.
   - Weights: 500 for titles, 400 for section headings, subtitles,
     pull-quotes and callouts (italic stays italic where the element
     already is). Alegreya starts at 400, so there is nothing lighter.
   - Font sizes are deliberately NOT set here. Adjust per element if
     Alegreya needs optical compensation (index .kl-title does this).
   - Alegreya is for Russian text only. Text in another language inside
     a RU page (e.g. the original English titles of Zenodo papers) keeps
     DM Serif Display: put lang="en" on that element and the last block
     of this layer applies the Latin face. Nothing else to do.

   Rules for RU pages
   - The page's Google Fonts <link> must include Alegreya
     (ital,wght@0,400;0,500;1,400;1,500). Without it the text falls
     back to the default serif again.
   - A new display-serif class used on RU pages must be added to
     the lists below.
   ============================================================ */

/* Shared hook already read by .sb-book-title / .kl-title / .book-title */
html:lang(ru) {
  --book-title-font: 'Alegreya', serif;
}

/* Titles and headings — Alegreya 500 */
html:lang(ru) .lh-title,
html:lang(ru) .ph-title,
html:lang(ru) .sb-book-title,
html:lang(ru) .kl-title,
html:lang(ru) .bmp-title,
html:lang(ru) .bmp-fact-val,
html:lang(ru) .pa-title,
html:lang(ru) .pf-title,
html:lang(ru) .essay-title,
html:lang(ru) .topic-title,
html:lang(ru) .hdr-stat-val,
html:lang(ru) .ph-stat-val,
html:lang(ru) .sh-count,
html:lang(ru) .db-num,
html:lang(ru) .pmb-title--display,
html:lang(ru) .pi-meta-val,
html:lang(ru) .venture-title,
html:lang(ru) .zpi-title,
html:lang(ru) .vid-mock .vm-title,
html:lang(ru) .dsp-val,
html:lang(ru) .lecture-desc.dropcap p:first-of-type::first-letter {
  font-family: 'Alegreya', serif;
  font-weight: 500;
}

/* Section headings, subtitles, pull-quotes, callouts — Alegreya 400
   (400 is the lightest weight Alegreya has) */
html:lang(ru) .ws-section-title,
html:lang(ru) .sh-series-label,
html:lang(ru) .db-title,
html:lang(ru) .lh-subtitle,
html:lang(ru) .bmp-subtitle,
html:lang(ru) .key-thesis,
html:lang(ru) .key-argument,
html:lang(ru) .closing-statement p {
  font-family: 'Alegreya', serif;
  font-weight: 400;
}

/* Non-Russian text on a RU page — DM Serif Display (single weight, 400).
   Trigger: lang="en" (or fr, …) on the element itself, e.g.
   <div class="zpi-title" lang="en">Cosmic Energy Radiometry: …</div>
   Elements without a lang attribute inherit ru and are not matched.
   Keep this list identical to the two lists above. */
html:lang(ru) :is(
  .lh-title, .sb-book-title, .kl-title, .bmp-title, .bmp-fact-val,
  .pa-title, .pf-title, .essay-title, .topic-title, .hdr-stat-val, .ph-stat-val,
  .sh-count, .db-num, .pmb-title--display, .pi-meta-val, .ph-title, .ws-section-title, .sh-series-label,
  .db-title, .venture-title,
  .zpi-title, .vid-mock .vm-title, .dsp-val,
  .lh-subtitle, .bmp-subtitle, .key-thesis, .key-argument,
  .closing-statement p
):not(:lang(ru)) {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
}
html:lang(ru) .lecture-desc.dropcap p:first-of-type:not(:lang(ru))::first-letter {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
}