/* ─────────────────────────────────────────────────────────────────────
   Graphik LC — гарнитура Центрального университета. Файлы взяты из
   брендовой дизайн-системы и лежат рядом, поэтому колода набирается
   правильно на любой машине, а не только там, где шрифт установлен.
   ───────────────────────────────────────────────────────────────────── */
@font-face { font-family:'Graphik LC'; src:url('fonts/graphik-lc-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Graphik LC'; src:url('fonts/graphik-lc-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Graphik LC'; src:url('fonts/graphik-lc-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

/* ─────────────────────────────────────────────────────────────────────
   Центральный университет · дизайн-система колод курса
   «Чёрные ящики и цифровые агенты: социология искусственного интеллекта»

   Тёмная тема — состояние по умолчанию. Светлая работает как «вдох»
   между тёмными слайдами, а не как второй бренд.
   Все цветовые литералы объявлены здесь, в :root; ниже — только var().
   ───────────────────────────────────────────────────────────────────── */
:root {
  --bg:       #141414;
  --surface:  #1f1f1f;
  --fg:       #ffffff;
  --muted:    #b0b0b0;
  --border:   #454545;
  --accent:   #3995a1;
  --accent-2: #2cb9ff;

  --font-display: 'Graphik LC', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-body:    'Graphik LC', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-mono:    'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

  --r: 8px;
}

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

/* Перенос слов: заголовки не рвём посреди слова — только мягкий перенос в узких
   колонках основного текста. Язык страницы задан как ru, поэтому hyphens: auto
   использует русские правила переноса. */
.lead, .stat-caption, .def-body, .def-test p,
.pt p, .step p, .conds p, .mrow p, .gterm .d, .row h3 span, .qs p, .panel p {
  hyphens: auto;
  -webkit-hyphens: auto;
}
.gterm .t, .conds .t, .mrow strong, .step h3, .chain .link {
  overflow-wrap: break-word;
}
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
body::-webkit-scrollbar { display: none; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* ─── поверхность слайда ────────────────────────────────────────────── */
.slide {
  flex: 0 0 100vw;
  width: 100vw;
  height: 100vh;
  scroll-snap-align: start;
  padding: clamp(40px, 5.4vw, 104px) clamp(44px, 6.2vw, 128px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--s-bg);
  color: var(--s-fg);
}
.slide.dark {
  /* Бирюза как ТЕКСТ допустима только на тёмном: на #141414 контраст 5.25,
     на белом — 3.51, что ниже порога. На светлой поверхности акцент несёт
     графика (засечки, линейки, заливки), а выделение текста — полный контраст. */
  --s-accent-text: var(--accent);
  --s-bg: var(--bg);
  --s-fg: var(--fg);
  --s-muted: var(--muted);
  --s-border: var(--border);
  --s-surface: var(--surface);
}
.slide.light {
  --s-accent-text: var(--bg);
  --s-bg: var(--fg);
  --s-fg: var(--bg);
  --s-muted: var(--border);
  --s-border: color-mix(in oklch, var(--bg) 24%, var(--fg));
  --s-surface: color-mix(in oklch, var(--bg) 4%, var(--fg));
}
.slide.hero { padding-block: clamp(56px, 7vw, 136px); }
.slide.center { align-items: center; text-align: center; justify-content: center; }
.slide.center .lead, .slide.center .stat-caption { margin-inline: auto; }

/* ─── эйбрау: акцент живёт в засечке, не в мелком тексте ─────────────── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.74vw, 15px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--s-muted);
  margin: 0 0 clamp(20px, 1.8vw, 34px);
  display: flex;
  align-items: center;
  gap: 10px;
}
.slide.center .eyebrow { justify-content: center; }
.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--accent);
  flex: none;
}

/* ─── типографика: плотный блок, трекинг 0 (правило бренда) ──────────── */
.h-hero {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(46px, 6.2vw, 122px);
  line-height: 1.02;
  letter-spacing: 0;
  margin: 0 0 clamp(16px, 1.5vw, 28px);
  max-width: 17ch;
}
.slide.center .h-hero { margin-inline: auto; }
.h-xl {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 4.1vw, 78px);
  line-height: 1.06;
  letter-spacing: 0;
  margin: 0 0 clamp(14px, 1.3vw, 26px);
  max-width: 22ch;
}
.h-md {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(25px, 2.5vw, 46px);
  line-height: 1.1;
  letter-spacing: 0;
  margin: 0 0 clamp(12px, 1vw, 20px);
  max-width: 28ch;
}
.lead {
  font-size: clamp(18px, 1.5vw, 29px);
  line-height: 1.5;
  color: var(--s-muted);
  max-width: 54ch;
  margin: 0;
}
.lead strong { color: var(--s-fg); font-weight: 500; }
.meta {
  font-family: var(--font-mono);
  font-size: clamp(12px, 0.82vw, 16px);
  letter-spacing: 0.04em;
  color: var(--s-muted);
}

/* ─── большое число ─────────────────────────────────────────────────── */
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(112px, 16vw, 320px);
  line-height: 0.88;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 clamp(12px, 1.2vw, 24px);
}
.stat-num .unit { font-size: 0.34em; letter-spacing: 0; margin-left: 6px; }
.stat-caption {
  font-size: clamp(18px, 1.5vw, 29px);
  line-height: 1.45;
  color: var(--s-muted);
  max-width: 30ch;
  margin: 0;
}

/* ─── цитата ────────────────────────────────────────────────────────── */
.quote-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 2.9vw, 56px);
  line-height: 1.18;
  letter-spacing: 0;
  max-width: 26ch;
  margin: 0 auto clamp(20px, 1.8vw, 34px);
  position: relative;
}
.quote-text::before {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  background: var(--accent);
  margin: 0 auto clamp(22px, 2vw, 40px);
}
.slide:not(.center) .quote-text, .slide:not(.center) .quote-text::before { margin-inline: 0; }
.quote-author {
  font-family: var(--font-mono);
  font-size: clamp(12px, 0.85vw, 16px);
  letter-spacing: 0.04em;
  color: var(--s-muted);
  margin: 0;
}

/* ─── сетка тезисов ─────────────────────────────────────────────────── */
.pt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.2vw, 44px);
  margin-top: clamp(24px, 2.6vw, 52px);
}
.pt-grid.two  { grid-template-columns: repeat(2, 1fr); }
.pt-grid.four { grid-template-columns: repeat(4, 1fr); }
.pt { border-top: 1px solid var(--s-border); padding-top: clamp(12px, 1.1vw, 22px); }
.pt::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--s-border);
  margin: calc(-1 * clamp(12px, 1.1vw, 22px) - 1px) 0 clamp(12px, 1.1vw, 22px);
}
.pt.on::before { background: var(--accent); }
.pt h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.42vw, 28px);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 8px;
}
.pt p {
  color: var(--s-muted);
  margin: 0;
  font-size: clamp(16px, 1.34vw, 27px);
  line-height: 1.45;
}

/* ─── пронумерованные шаги ──────────────────────────────────────────── */
.pipeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 36px);
  margin-top: clamp(24px, 2.6vw, 52px);
}
.pipeline.three { grid-template-columns: repeat(3, 1fr); }
.pipeline.five  { grid-template-columns: repeat(5, 1fr); }
.step { border-top: 1px solid var(--s-border); padding-top: clamp(12px, 1.1vw, 22px); }
.step .nb {
  font-family: var(--font-mono);
  font-size: clamp(12px, 0.8vw, 15px);
  color: var(--s-muted);
  letter-spacing: 0.06em;
}
.step.on .nb { color: var(--s-accent-text); }
.step h3 {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.3vw, 25px);
  font-weight: 500;
  margin: 6px 0 6px;
  line-height: 1.15;
}
.step p {
  color: var(--s-muted);
  margin: 0;
  font-size: clamp(15px, 1.24vw, 25px);
  line-height: 1.45;
}

/* ─── до / после ────────────────────────────────────────────────────── */
.ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 80px);
  margin-top: clamp(20px, 2.2vw, 44px);
}
.ba-col .ba-label {
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.76vw, 15px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s-muted);
  margin: 0 0 12px;
}
.ba-col h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 1.95vw, 38px);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 14px;
  max-width: 17ch;
}
.ba-col p {
  color: var(--s-muted);
  font-size: clamp(15px, 1.2vw, 23px);
  line-height: 1.45;
  margin: 0;
}
.ba-col.now h3 { color: var(--s-accent-text); }

/* ─── нумерованный список / повестка ────────────────────────────────── */
.rows { margin-top: clamp(20px, 2.2vw, 44px); display: grid; gap: 0; }
.row {
  display: grid;
  grid-template-columns: clamp(56px, 5vw, 104px) 1fr auto;
  gap: clamp(16px, 1.6vw, 32px);
  align-items: baseline;
  padding: clamp(12px, 1.15vw, 22px) 0;
  border-top: 1px solid var(--s-border);
}
.row:last-child { border-bottom: 1px solid var(--s-border); }
.row .nb {
  font-family: var(--font-mono);
  font-size: clamp(12px, 0.86vw, 17px);
  letter-spacing: 0.06em;
  color: var(--s-muted);
}
.row h3 {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.38vw, 27px);
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}
.row h3 span { display: block; color: var(--s-muted); font-weight: 400; font-size: 0.84em; margin-top: 5px; line-height: 1.35; }
.row .tag {
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.78vw, 15px);
  letter-spacing: 0.06em;
  color: var(--s-muted);
  white-space: nowrap;
}
.row.on .tag { color: var(--s-accent-text); }
.row.on h3 { color: var(--s-fg); }

/* ─── карточка / панель ─────────────────────────────────────────────── */
.panel {
  background: var(--s-surface);
  border: 1px solid var(--s-border);
  border-radius: var(--r);
  padding: clamp(18px, 1.8vw, 34px);
}
.panel h3 {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.35vw, 26px);
  font-weight: 500;
  margin: 0 0 10px;
  line-height: 1.2;
}
.panel p { color: var(--s-muted); font-size: clamp(15px, 1.18vw, 22px); line-height: 1.45; margin: 0; }
.panel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 1.6vw, 32px); margin-top: clamp(20px, 2.2vw, 44px); }
.panel-grid.three { grid-template-columns: repeat(3, 1fr); }

/* ─── диаграмма весов: заполненные полосы, не контуры ───────────────── */
.bars { margin-top: clamp(22px, 2.4vw, 48px); display: grid; gap: clamp(12px, 1.15vw, 22px); }
.bar-row { display: grid; grid-template-columns: clamp(150px, 15vw, 300px) 1fr clamp(56px, 4.6vw, 92px); gap: clamp(14px, 1.4vw, 28px); align-items: center; }
.bar-row .bar-label { font-size: clamp(15px, 1.22vw, 24px); }
.bar-track { height: clamp(14px, 1.15vw, 22px); background: var(--s-surface); border: 1px solid var(--s-border); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--s-muted); border-radius: 999px; }
.bar-row.on .bar-fill { background: var(--accent); }
.bar-row .bar-val { font-family: var(--font-mono); font-size: clamp(14px, 1.05vw, 21px); text-align: right; color: var(--s-muted); }
.bar-row.on .bar-val { color: var(--s-fg); }

/* ─── подпись под контентом ─────────────────────────────────────────── */
.foot {
  margin-top: clamp(20px, 2.2vw, 44px);
  font-family: var(--font-mono);
  font-size: clamp(12px, 0.84vw, 16px);
  letter-spacing: 0.04em;
  color: var(--s-muted);
}

/* ─── хром колоды ───────────────────────────────────────────────────── */
.deck-counter {
  position: fixed;
  bottom: 20px; right: 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg);
  background: var(--surface);
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  letter-spacing: 0.04em;
  z-index: 20;
}
.deck-hint {
  position: fixed;
  bottom: 20px; left: 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  z-index: 20;
  display: flex;
  gap: 14px;
  align-items: center;
}
.deck-hint a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  transition: color .15s ease, border-color .15s ease;
}
.deck-hint a:hover { color: var(--fg); border-color: var(--fg); }
.deck-hint a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 2px; }
.deck-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--accent);
  width: 0;
  z-index: 20;
  transition: width 0.18s ease;
}

/* ─── заметки докладчика (клавиша N) ────────────────────────────────── */
.notes { display: none; }
.notes-panel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--fg);
  padding: 22px 28px 60px;
  font-size: 16px;
  line-height: 1.5;
  z-index: 30;
  max-height: 42vh;
  overflow-y: auto;
  transform: translateY(101%);
  transition: transform .2s ease;
}
.notes-panel.open { transform: translateY(0); }
.notes-panel h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
  font-weight: 400;
}
.notes-panel p { margin: 0 0 10px; max-width: 92ch; color: var(--fg); }
.notes-panel p:last-child { margin-bottom: 0; }

/* ─── обложка с предметом недели ────────────────────────────────────── */
.slide.cover-media {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  align-items: center;
  padding: 0;
  text-align: left;
}
.cover-copy {
  min-width: 0;
  padding: clamp(48px, 6vw, 120px) clamp(28px, 3vw, 64px)
           clamp(48px, 6vw, 120px) clamp(44px, 6.2vw, 128px);
}
.cover-copy .h-hero { max-width: 14ch; }
.cover-copy .lead   { max-width: 40ch; }
.cover-art {
  margin: 0;
  min-width: 0;
  height: 100%;
  /* маска гасит стык кадра с полем слайда: в маске значим только альфа-канал */
  -webkit-mask-image: linear-gradient(to right, transparent 0, var(--fg) 15%);
          mask-image: linear-gradient(to right, transparent 0, var(--fg) 15%);
}
.cover-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% 50%;
  display: block;
}

@media (max-width: 900px) {
  .slide.cover-media { grid-template-columns: 1fr; grid-template-rows: 40% 1fr; }
  .cover-art {
    order: -1;
    -webkit-mask-image: linear-gradient(to bottom, var(--fg) 58%, transparent 100%);
            mask-image: linear-gradient(to bottom, var(--fg) 58%, transparent 100%);
  }
  .cover-copy { padding: 0 clamp(24px, 6vw, 48px) clamp(32px, 6vw, 64px); }
}

/* ─── слайд с боковым заголовком: заголовок слева, плотный контент справа ── */
.slide.split {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
  gap: clamp(26px, 3.2vw, 68px);
  align-content: center;
}
.split .col-head, .split .col-body { min-width: 0; }
.split .col-head .h-md { max-width: 15ch; }
.split .col-head .lead { font-size: clamp(16px, 1.32vw, 26px); max-width: 32ch; margin-top: clamp(14px, 1.4vw, 26px); }
.split .col-body > *:first-child { margin-top: 0; }

/* ─── определение с проверочным тестом ──────────────────────────────── */
.def { margin-top: clamp(18px, 2vw, 40px); display: grid; gap: clamp(14px, 1.4vw, 26px); }
.def-term {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(23px, 2.2vw, 40px);
  line-height: 1.08;
  letter-spacing: 0;
  margin: 0;
  max-width: 24ch;
}
.def-body { margin: 0; font-size: clamp(17px, 1.5vw, 30px); line-height: 1.46; color: var(--s-muted); max-width: 56ch; }
.def-body strong { color: var(--s-fg); font-weight: 500; }
.def-test {
  border-top: 1px solid var(--s-border);
  padding-top: clamp(11px, 1.05vw, 19px);
  display: flex;
  gap: clamp(12px, 1.2vw, 22px);
  align-items: baseline;
}
.def-test .k {
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.74vw, 14px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s-accent-text);
  white-space: nowrap;
}
.def-test p { margin: 0; font-size: clamp(16px, 1.36vw, 27px); line-height: 1.42; max-width: 52ch; }

/* ─── матрица разбора ───────────────────────────────────────────────── */
.matrix { margin-top: clamp(18px, 2vw, 38px); display: grid; }
.mrow {
  display: grid;
  grid-template-columns: var(--cols, repeat(4, 1fr));
  gap: clamp(14px, 1.5vw, 30px);
  padding: clamp(12px, 1.25vw, 26px) 0;
  border-top: 1px solid var(--s-border);
  align-items: baseline;
}
.mrow:last-child { border-bottom: 1px solid var(--s-border); }
.mhead { border-top: 0; padding-top: 0; }
.mhead span {
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.84vw, 17px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s-muted);
}
.mrow strong { font-family: var(--font-display); font-weight: 500; font-size: clamp(16px, 1.46vw, 30px); line-height: 1.18; }
.mrow p { margin: 0; font-size: clamp(14px, 1.26vw, 26px); line-height: 1.4; color: var(--s-muted); }

/* ─── цепочка со стрелками ──────────────────────────────────────────── */
.chain { margin-top: clamp(20px, 2.2vw, 44px); display: flex; flex-wrap: wrap; align-items: center; gap: clamp(8px, 0.9vw, 16px); }
.chain .link {
  border: 1px solid var(--s-border);
  border-radius: var(--r);
  padding: clamp(9px, 0.9vw, 16px) clamp(13px, 1.2vw, 22px);
  font-size: clamp(15px, 1.32vw, 27px);
  line-height: 1.25;
}
.chain .link.on { border-color: var(--accent); }
.chain .arw { font-family: var(--font-mono); color: var(--s-muted); font-size: clamp(13px, 1.05vw, 20px); }

/* ─── словарь недели ────────────────────────────────────────────────── */
.gloss { margin-top: clamp(18px, 2vw, 38px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(24px, 2.6vw, 56px); }
/* термин над определением: русские составные термины не влезают в узкую колонку */
.gterm {
  display: block;
  padding: clamp(10px, 1.1vw, 22px) 0;
  border-top: 1px solid var(--s-border);
}
.gterm .t {
  display: block;
  font-weight: 500;
  font-size: clamp(15px, 1.3vw, 27px);
  line-height: 1.22;
  margin-bottom: 5px;
}
.gterm .d {
  display: block;
  color: var(--s-muted);
  font-size: clamp(14px, 1.2vw, 25px);
  line-height: 1.4;
}

/* ─── вопросы для самопроверки ──────────────────────────────────────── */
.qs {
  margin-top: clamp(18px, 2vw, 38px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.5vw, 32px) clamp(28px, 3vw, 62px);
  counter-reset: q;
}
.qs p {
  margin: 0;
  position: relative;
  padding-left: clamp(28px, 2.3vw, 44px);
  font-size: clamp(16px, 1.42vw, 29px);
  line-height: 1.4;
}
.qs p::before {
  counter-increment: q;
  content: counter(q, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.15em;
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.78vw, 15px);
  letter-spacing: 0.06em;
  color: var(--s-muted);
}

/* ─── условия и чек-листы ───────────────────────────────────────────── */
.conds { margin-top: clamp(18px, 2vw, 38px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 38px) clamp(20px, 2.1vw, 44px); }
.conds.two { grid-template-columns: repeat(2, 1fr); }
.conds.four { grid-template-columns: repeat(4, 1fr); }
.conds > div { border-top: 1px solid var(--s-border); padding-top: clamp(11px, 1.15vw, 23px); }
.conds .t { display: block; font-weight: 500; font-size: clamp(16px, 1.4vw, 29px); margin-bottom: 7px; line-height: 1.18; }
.conds p { margin: 0; color: var(--s-muted); font-size: clamp(14px, 1.22vw, 25px); line-height: 1.42; }