/* Страницы. Первая половина файла — маркетинговый регистр (чистый войд),
   вторая — рабочий: там появляются волосяные линии, но не плашки. */

/* Герой --------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: var(--s-60);
  align-items: center;
  min-height: calc(100svh - var(--nav-height));
  padding-block: var(--s-60) var(--s-96);
}

/* Кегль героя чуть скромнее общей дисплейной шкалы: русский заголовок
   в три строки должен уместиться в экран вместе с логотипом. */
.hero__title {
  max-width: 13ch;
  font-size: clamp(42px, 6vw, 96px);
  line-height: 1.06;
  letter-spacing: var(--tr-display);
  font-weight: var(--w-regular);
}

.hero__lead {
  max-width: 42ch;
  margin-top: var(--s-30);
  color: var(--mist);
  font-size: clamp(17px, 1.3vw, 19px);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-30);
  margin-top: var(--s-36);
}

/* Правая половина отдана сцене: канвас фиксирован, здесь только якорь,
   по размеру которого сцена вычисляет положение логотипа. */
.hero__stage {
  position: relative;
  justify-self: center;
  /* Ограничение по высоте экрана: логотип не должен уезжать под сгиб,
     даже когда колонка широкая. */
  width: min(100%, 60svh);
  aspect-ratio: 1;
  min-height: 260px;
}

/* Пока Three.js не поднялся — на месте сцены стоит плоский знак. Без
   WebGL страница остаётся законченной, а не пустой. */
.hero__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--iris);
  transition: opacity 0.8s var(--ease);
}

.hero__fallback svg {
  width: min(58%, 300px);
}

.hero__stage[data-scene="on"] .hero__fallback {
  opacity: 0;
}

.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: var(--s-12);
  margin-top: var(--s-60);
  color: var(--ash);
  font-size: var(--text-caption);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.hero__scroll i {
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--ash), transparent);
}

/* Бегущая строка тем ---------------------------------------------------- */

.marquee {
  overflow: hidden;
  padding-block: var(--s-30);
  border-block: 1px solid var(--hair);
  user-select: none;
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--s-36);
  animation: marquee 46s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee span {
  display: inline-flex;
  align-items: center;
  gap: var(--s-36);
  color: var(--ash);
  font-size: var(--text-nav);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
  white-space: nowrap;
}

.marquee span::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--iris);
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}

/* Связка двух курсов --------------------------------------------------- */

/* Две колонки, знак между ними — вне потока. Сетка не может поставить его
   посередине между названиями: колонки равной ширины, а заголовки в них
   разной длины, и центр сетки почти никогда не совпадает с серединой
   промежутка между текстами. Координаты считает alignDuetJoin. */
.duet {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(72px, 9vw, 150px);
  align-items: start;
}

.duet__card {
  display: block;
  padding-block: var(--s-30);
}

/* Блок с явной высотой строки: инлайновый span набрал бы высоту по строке
   родителя (18px × 1.5), а не по своей, и знак между курсами промахнулся
   бы мимо названий ровно на эту разницу. */
.duet__code {
  display: block;
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--text-caption);
  line-height: 1.5;
  letter-spacing: var(--tr-nav);
}

.duet__name {
  margin-top: var(--s-18);
  font-size: var(--text-h3);
  letter-spacing: var(--tr-display);
}

.duet__lead {
  margin-top: var(--s-18);
  max-width: 34ch;
  color: var(--ash);
  font-size: var(--text-small);
}

.duet__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-18);
  margin-top: var(--s-24);
}

/* Знак сложения между курсами рисуем двумя линиями, а не глифом «⊕»:
   у символа своя оптическая середина, и в круге он всегда сидит криво.

   По вертикали знак встаёт на уровень названий курсов, а не в середину
   карточки: «A ⊕ B» читается по заголовкам, и посаженный по общей высоте
   круг выглядел сползшим вниз. Отступ собирается из того, что лежит выше
   названия: паддинг карточки, строка кода курса и её отбивка. */
.duet__join {
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 64px;
  border: 1px solid var(--hair-strong);
  border-radius: 50%;
  color: var(--mist);
  /* До первого замера знак не показываем, иначе он мигает в левом
     верхнем углу и только потом встаёт на место. */
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.duet__join[data-placed="true"] {
  opacity: 1;
}

.duet__join::before,
.duet__join::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
}

.duet__join::before {
  width: 20px;
  height: 1px;
  transform: translate(-50%, -50%);
}

.duet__join::after {
  width: 1px;
  height: 20px;
  transform: translate(-50%, -50%);
}

/* Карта занятий -------------------------------------------------------- */

.map__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
  gap: clamp(30px, 5vw, 96px);
  align-items: end;
  margin-bottom: var(--s-96);
}

.act {
  padding-block: var(--s-60) var(--s-30);
}

.act__head {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: var(--s-24);
  align-items: baseline;
  padding-bottom: var(--s-30);
}

.act__numeral {
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--text-h4);
  line-height: 1;
}

.act__title {
  font-size: var(--text-h3);
  letter-spacing: var(--tr-display);
}

.act__lead {
  margin-top: var(--s-12);
  max-width: 52ch;
  color: var(--ash);
  font-size: var(--text-small);
}

.lesson {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: var(--s-24);
  align-items: start;
  padding-block: var(--s-30);
  border-top: 1px solid var(--hair);
  transition: background-color 0.4s var(--ease), padding-left 0.4s var(--ease);
}

a.lesson:hover {
  padding-left: var(--s-12);
  background: rgba(255, 255, 255, 0.025);
}

.lesson[aria-disabled="true"] {
  opacity: 0.55;
}

.lesson__num {
  color: var(--ash);
  font-family: var(--mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tr-nav);
  padding-top: 6px;
}

.lesson__title {
  font-size: var(--text-h6);
  letter-spacing: -0.02em;
}

.lesson__short {
  margin-top: 8px;
  max-width: 60ch;
  color: var(--ash);
  font-size: var(--text-small);
}

.lesson__side {
  display: flex;
  align-items: center;
  gap: var(--s-18);
  padding-top: 4px;
}

/* Конспект занятия ----------------------------------------------------- */

.workspace {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(30px, 4vw, 72px);
  align-items: start;
}

.sidebar {
  position: sticky;
  top: calc(var(--nav-height) + var(--s-24));
}

.sidebar__title {
  margin-bottom: var(--s-18);
  color: var(--ash);
  font-size: var(--text-caption);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.sidebar__link {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--s-12);
  padding-block: 9px;
  color: var(--ash);
  font-size: var(--text-small);
  transition: color 0.25s var(--ease);
}

.sidebar__link:hover {
  color: var(--bone);
}

.sidebar__link[aria-current="true"] {
  color: var(--bone);
}

.sidebar__link[aria-current="true"] i {
  color: var(--accent);
}

.sidebar__link i {
  font-family: var(--mono);
  font-size: var(--text-caption);
  font-style: normal;
}

.doc {
  max-width: 76ch;
}

.doc__lead {
  margin-top: var(--s-24);
  color: var(--mist);
  font-size: clamp(18px, 1.4vw, 20px);
}

/* Строка ключевых формул под заголовком конспекта. */
.doc__strip {
  margin-top: var(--s-30);
  padding: var(--s-18) 0;
  border-block: 1px solid var(--hair);
  overflow-x: auto;
}

.doc__strip code {
  color: var(--accent);
  font-size: var(--text-small);
  white-space: nowrap;
}

.doc section {
  padding-top: var(--s-60);
}

.doc__section-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--s-18);
  align-items: baseline;
  margin-bottom: var(--s-30);
}

.doc__section-head span {
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tr-nav);
}

.doc__section-head h3 {
  font-size: var(--text-h4);
  letter-spacing: var(--tr-heading);
}

.doc p {
  margin-bottom: var(--s-18);
  color: var(--mist);
}

.doc sup,
.doc sub {
  font-size: 0.68em;
  line-height: 0;
}

/* Блоки конспекта ------------------------------------------------------ */

.blk-formula {
  margin-block: var(--s-24);
  padding: var(--s-24) var(--s-30);
  border-left: 2px solid var(--accent);
  overflow-x: auto;
}

.blk-formula code {
  color: var(--bone);
  font-size: 16px;
  white-space: nowrap;
}

.blk-list,
.blk-steps {
  margin-block: var(--s-24);
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  counter-reset: step;
}

.blk-list li,
.blk-steps li {
  position: relative;
  padding-left: 34px;
  color: var(--mist);
}

.blk-list li::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.blk-steps li {
  counter-increment: step;
}

.blk-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--text-caption);
}

.blk-table {
  margin-block: var(--s-30);
  /* Широкие таблицы прокручиваются внутри себя, страницу не тянут. */
  overflow-x: auto;
}

.blk-table th,
.blk-table td {
  padding: var(--s-12) var(--s-18) var(--s-12) 0;
  border-bottom: 1px solid var(--hair);
  text-align: left;
  font-size: var(--text-small);
  white-space: nowrap;
}

.blk-table th {
  color: var(--ash);
  font-weight: var(--w-semi);
  font-size: var(--text-caption);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.blk-table td {
  color: var(--mist);
}

.blk-code {
  margin-block: var(--s-30);
  padding-left: var(--s-24);
  border-left: 1px solid var(--hair-strong);
}

.blk-code figcaption {
  display: flex;
  align-items: baseline;
  gap: var(--s-12);
  margin-bottom: var(--s-12);
  color: var(--ash);
  font-size: var(--text-caption);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.blk-code figcaption b {
  color: var(--mist);
  font-weight: var(--w-regular);
  text-transform: none;
  letter-spacing: 0;
}

.blk-code pre {
  margin: 0;
  overflow-x: auto;
}

.blk-code code {
  color: var(--mist);
  font-size: var(--text-small);
  line-height: 1.7;
}

.blk-note {
  margin-block: var(--s-30);
  padding-left: var(--s-24);
  border-left: 2px solid var(--saffron);
}

.blk-note span {
  display: block;
  margin-bottom: var(--s-6);
  color: var(--saffron);
  font-size: var(--text-caption);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.blk-note p {
  margin: 0;
  color: var(--bone);
}

.blk-example {
  margin-block: var(--s-30);
}

.blk-example b {
  display: block;
  margin-bottom: var(--s-6);
  color: var(--bone);
  font-weight: var(--w-regular);
}

.blk-example p {
  margin: 0;
}

/* Домашняя работа ------------------------------------------------------ */

.hw {
  max-width: 84ch;
}

.hw__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-18);
  padding-bottom: var(--s-30);
  border-bottom: 1px solid var(--hair);
}

.hw__block {
  padding-block: var(--s-60) var(--s-30);
}

.hw__block-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--s-18);
  align-items: baseline;
  margin-bottom: var(--s-18);
}

.hw__block-head span {
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tr-nav);
}

.hw__block-head h3 {
  font-size: var(--text-h4);
}

.hw__hint {
  max-width: 62ch;
  margin-bottom: var(--s-30);
  color: var(--ash);
  font-size: var(--text-small);
}

.hw-test {
  padding-block: var(--s-30);
  border-top: 1px solid var(--hair);
}

.hw-test__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-12);
  margin-bottom: var(--s-12);
}

.hw-test__head span {
  color: var(--ash);
  font-family: var(--mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tr-nav);
}

.hw-test__head b {
  font-weight: var(--w-regular);
}

.hw-test__head i {
  margin-left: auto;
  color: var(--ash);
  font-size: var(--text-caption);
  font-style: normal;
}

.hw-test > p {
  margin-bottom: var(--s-18);
  color: var(--mist);
}

.hw-test ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

/* Вариант ответа — строка с рамкой в одну волосяную линию. Заливка
   появляется только у выбранного, и только тонированная. */
.hw-option {
  width: 100%;
  padding: 13px var(--s-18);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  color: var(--mist);
  font-size: var(--text-small);
  text-align: left;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease),
    background-color 0.25s var(--ease);
}

.hw-option:hover {
  color: var(--bone);
  border-color: var(--hair-strong);
}

.hw-option.is-picked {
  color: var(--bone);
  border-color: rgba(var(--iris-rgb), 0.7);
  background: rgba(var(--iris-rgb), 0.1);
}

.hw-option.is-correct {
  color: var(--bone);
  border-color: rgba(var(--verdant-rgb), 0.8);
  background: rgba(var(--verdant-rgb), 0.14);
}

.hw-option.is-wrong {
  color: var(--saffron);
  border-color: rgba(var(--saffron-rgb), 0.55);
  background: transparent;
}

.hw-verdict {
  margin-top: var(--s-12);
  color: var(--ash);
  font-size: var(--text-caption);
}

.hw-test.is-correct .hw-verdict {
  color: var(--verdant);
}

.hw-test.is-wrong .hw-verdict {
  color: var(--saffron);
}

.hw-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-18);
  margin-top: var(--s-30);
}

.hw-check__score {
  color: var(--ash);
  font-size: var(--text-small);
}

.hw-check__score.is-full {
  color: var(--verdant);
}

.hw-match {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px);
}

.hw-match ol {
  display: flex;
  flex-direction: column;
}

.hw-match ol li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 28px;
  gap: var(--s-12);
  align-items: center;
  padding-block: var(--s-12);
  border-bottom: 1px solid var(--hair);
}

.hw-match ol li b {
  font-size: var(--text-small);
  font-weight: var(--w-regular);
}

.hw-match select {
  padding: 8px var(--s-12);
  color: var(--bone);
  background: var(--void);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-pill);
  font-family: var(--mono);
  font-size: var(--text-caption);
}

.hw-match ol li i {
  font-family: var(--mono);
  font-size: var(--text-caption);
  font-style: normal;
  text-align: center;
}

.hw-match ol li i.is-ok {
  color: var(--verdant);
}

.hw-match ol li i.is-fixed {
  color: var(--saffron);
}

.hw-match ol li i.is-neutral {
  color: var(--ash);
}

.hw-match ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}

.hw-match ul li {
  color: var(--mist);
  font-size: var(--text-small);
}

.hw-task,
.hw-contest {
  padding-block: var(--s-30);
  border-top: 1px solid var(--hair);
}

.hw-task__head,
.hw-contest__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-12);
  margin-bottom: var(--s-12);
}

.hw-task__head span,
.hw-contest__head span {
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--text-caption);
}

.hw-task__head b,
.hw-contest__head b {
  font-weight: var(--w-regular);
}

.hw-task__head i,
.hw-contest__head i {
  margin-left: auto;
  color: var(--ash);
  font-size: var(--text-caption);
  font-style: normal;
}

.hw-task p,
.hw-contest > p {
  color: var(--mist);
  font-size: var(--text-small);
}

.hw-io {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-24);
  margin-top: var(--s-18);
}

.hw-io small,
.hw-samples small {
  display: block;
  margin-bottom: var(--s-6);
  color: var(--ash);
  font-size: var(--text-caption);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.hw-samples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-18);
  margin-top: var(--s-18);
}

.hw-samples pre {
  margin: 0;
  padding-left: var(--s-18);
  border-left: 1px solid var(--hair-strong);
  overflow-x: auto;
}

.hw-samples code {
  color: var(--mist);
  font-size: var(--text-caption);
  line-height: 1.7;
}

.hw-req {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: var(--s-18);
}

.hw-req li {
  position: relative;
  padding-left: 20px;
  color: var(--ash);
  font-size: var(--text-small);
}

.hw-req li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.hw-complexity {
  margin-top: var(--s-12);
  color: var(--ash);
  font-family: var(--mono);
  font-size: var(--text-caption);
}

.hw-bonus__label {
  margin-top: var(--s-18);
  color: var(--ash);
  font-size: var(--text-caption);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.hw-bonus ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: var(--s-12);
}

.hw-bonus li {
  position: relative;
  padding-left: 20px;
  color: var(--mist);
  font-size: var(--text-small);
}

.hw-bonus li::before {
  content: "·";
  position: absolute;
  left: 6px;
  color: var(--accent);
}

.hw-bonus__source {
  margin-top: var(--s-18);
  color: var(--ash);
  font-size: var(--text-caption);
}

.hw-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}

.hw-checklist li {
  position: relative;
  padding-left: 30px;
  color: var(--mist);
  font-size: var(--text-small);
}

.hw-checklist li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 14px;
  height: 14px;
  border: 1px solid var(--hair-strong);
  border-radius: 4px;
}

/* Практика и калибровка ------------------------------------------------ */

.trial {
  padding-block: var(--s-30);
  border-top: 1px solid var(--hair);
}

.trial__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-12);
  margin-bottom: var(--s-12);
}

.trial__head span {
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--text-caption);
}

.trial__head i {
  margin-left: auto;
  color: var(--ash);
  font-size: var(--text-caption);
  font-style: normal;
}

.trial p {
  margin-bottom: var(--s-18);
  color: var(--mist);
  font-size: var(--text-small);
}

.trial__answer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-18);
  max-width: 520px;
}

.trial__answer .field {
  flex: 1 1 220px;
}

.trial__solution {
  margin-top: var(--s-18);
  padding-left: var(--s-18);
  border-left: 1px solid var(--hair-strong);
  color: var(--ash);
  font-size: var(--text-small);
}

.trial.is-correct .trial__solution {
  border-left-color: var(--verdant);
}

.trial.is-wrong .trial__solution {
  border-left-color: var(--saffron);
}

/* Страница преподавателей ---------------------------------------------- */

/* Развёрнутая карточка одного преподавателя. Регистр маркетинговый: плашек
   нет, людей разделяет одна волосяная линия, а не рамка вокруг каждого.
   Портрет и текст меняются местами через строку — тот же зигзаг, что и в
   каталоге направлений. */
.mentor {
  display: grid;
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 90px);
  align-items: start;
  padding-block: var(--section-gap);
  border-top: 1px solid var(--hair);
}

.mentor:first-child {
  border-top: 0;
  padding-top: var(--s-36);
}

.mentor--mirror .mentor__portrait {
  order: 2;
  justify-self: end;
}

/* Портрет крупнее, чем в карусели на главной, но с тем же кадрированием:
   лицо на портретах всегда выше геометрического центра. */
.mentor__portrait {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.mentor__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 26%;
}

.mentor__initials {
  font-size: var(--text-h1);
  font-weight: var(--w-light);
  letter-spacing: var(--tr-heading);
  color: rgba(255, 255, 255, 0.3);
}

.mentor__soon {
  position: absolute;
  bottom: var(--s-24);
  color: var(--ash);
  font-size: var(--text-caption);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.mentor__name {
  font-size: var(--text-h2);
  letter-spacing: var(--tr-display);
}

.mentor__about {
  margin-top: var(--s-18);
  max-width: 42ch;
  color: var(--mist);
  font-size: clamp(17px, 1.3vw, 19px);
}

.mentor__focus {
  margin-top: var(--s-12);
  max-width: 52ch;
  color: var(--ash);
  font-size: var(--text-small);
}

.mentor__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-30);
  margin-block: var(--s-36);
}

.mentor__facts b {
  display: block;
  font-family: var(--mono);
  font-size: var(--text-h4);
  font-weight: var(--w-regular);
  line-height: 1;
  letter-spacing: var(--tr-heading);
}

.mentor__facts span {
  display: block;
  margin-top: var(--s-12);
  max-width: 18ch;
  color: var(--ash);
  font-size: var(--text-caption);
}

.mentor__lessons {
  margin-top: var(--s-30);
}

.mentor__actions {
  margin-top: var(--s-30);
}

/* Экраны платформы ----------------------------------------------------- */

.auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
  min-height: calc(100svh - var(--nav-height) - var(--s-96));
  padding-block: var(--s-60);
}

.auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
  width: 100%;
  max-width: 420px;
}

.auth__switch {
  display: flex;
  gap: var(--s-24);
  margin-bottom: var(--s-12);
}

.profile__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-30);
  align-items: end;
  padding-bottom: var(--s-30);
  border-bottom: 1px solid var(--hair);
}

.profile__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-30);
  padding-block: var(--s-36);
}

.profile__facts div span {
  display: block;
  margin-bottom: 6px;
  color: var(--ash);
  font-size: var(--text-caption);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.profile__facts div b {
  font-size: var(--text-h6);
  font-weight: var(--w-regular);
  letter-spacing: -0.02em;
}

.studio__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
}

.studio__panel {
  padding-block: var(--s-30);
  border-top: 1px solid var(--hair);
}

.studio__panel h3 {
  margin-bottom: var(--s-24);
  font-size: var(--text-h6);
}

.studio__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-18);
}

.unit {
  padding-block: var(--s-24);
  border-top: 1px solid var(--hair);
}

.unit__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-12);
}

.unit__head span {
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--text-caption);
}

.unit__lessons {
  margin-top: var(--s-12);
}

.unit__lesson {
  display: flex;
  align-items: baseline;
  gap: var(--s-12);
  padding-block: 9px;
  color: var(--mist);
  font-size: var(--text-small);
  transition: color 0.25s var(--ease);
}

.unit__lesson:hover {
  color: var(--bone);
}

.unit__lesson i {
  color: var(--ash);
  font-family: var(--mono);
  font-size: var(--text-caption);
  font-style: normal;
}

/* Навигация между уроками ---------------------------------------------- */

.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-18);
  margin-top: var(--s-60);
  padding-top: var(--s-30);
  border-top: 1px solid var(--hair);
}

.pager span {
  display: block;
  margin-bottom: 6px;
  color: var(--ash);
  font-size: var(--text-caption);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.pager a b {
  font-size: var(--text-h6);
  font-weight: var(--w-regular);
  letter-spacing: -0.02em;
  transition: color 0.25s var(--ease);
}

.pager a:hover b {
  color: var(--accent);
}

.pager__next {
  text-align: right;
  margin-left: auto;
}

/* Пустое состояние — тот же войд, просто с честной подписью. */
.empty {
  padding-block: var(--s-96);
  border-top: 1px solid var(--hair);
}

.empty h3 {
  max-width: 20ch;
  font-size: var(--text-h4);
}

.empty p {
  margin-top: var(--s-18);
  max-width: 48ch;
  color: var(--ash);
  font-size: var(--text-small);
}

.empty .row {
  margin-top: var(--s-30);
}

@media (max-width: 1024px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding-top: var(--s-30);
  }

  .hero__stage {
    order: -1;
    min-height: 260px;
    max-height: 46svh;
  }

  .duet,
  .map__head,
  .workspace,
  .studio__grid,
  .auth,
  .profile__head,
  .mentor {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Портрет встал над текстом — зигзаг больше нечем чередовать, и обе
     карточки выравниваются одинаково. */
  .mentor--mirror .mentor__portrait {
    order: 0;
    justify-self: start;
  }

  .mentor__portrait {
    max-width: 320px;
  }

  /* Колонки встали друг под друга — знак возвращается в поток и просто
     разделяет два курса по вертикали. */
  .duet {
    gap: var(--s-36);
  }

  .duet__join {
    position: static;
    opacity: 1;
    justify-self: start;
  }

  .sidebar {
    position: static;
  }
}

@media (max-width: 760px) {
  .act__head,
  .lesson,
  .doc__section-head,
  .hw__block-head {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-12);
  }

  .lesson__side {
    padding-top: var(--s-12);
  }

  .hw-match,
  .hw-io {
    grid-template-columns: minmax(0, 1fr);
  }

  .mentor__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-24);
  }

  .hw-match ol li {
    grid-template-columns: minmax(0, 1fr) 72px 28px;
  }
}