/* ЦМТ «Мост» — стили сайта.
   Макет нарисован на ширине 1920px. 1rem = 10px на 1920, дальше масштабируется
   вместе с окном: размер из макета N px пишем как N/10 rem. */

:root {
  --ink: #2c2f36;
  --mint: #f2fdfb;
  --green: #3f8259;
  --green-deep: #254339;
  --bg-soft: #f3f7f3;
  --tag: #d6efde;
  --date: #7c8a81;
  --stroke: #e2ebe4;
  --white: #fff;

  /* до 1920px поле 115px как в макете, шире — контент стоит по центру, фон тянется на всю ширину.
     100% считается от ширины блока, где переменная используется (все такие блоки во всю ширину) */
  --gutter: max(11.5rem, calc((100% - 169rem) / 2));
  --section-gap: 16rem;
  --hero-edge: 6rem; /* поле первого экрана: сверху до шапки и снизу под кнопкой */
  --radius-l: 2.4rem;
  --radius-m: 1.6rem;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-alt: "Roboto", "Inter", system-ui, Arial, sans-serif;
}

html {
  font-size: clamp(6.4px, calc(100vw / 192), 10px);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 2.4rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
svg { display: block; flex-shrink: 0; }

:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.page { overflow-x: clip; background: var(--white); }
.container { padding-inline: var(--gutter); }

/* ---------- типографика ---------- */
.h2 { font-size: 8rem; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.lead { font-size: 2.8rem; font-weight: 300; line-height: 1.4; }
.section-head { display: flex; flex-direction: column; gap: 4rem; }
.section-head--row { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 4rem; }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 1.6rem;
  height: 8.6rem; padding: 0 1.3rem 0 2rem; border-radius: var(--radius-m);
  font-size: 2.4rem; font-weight: 500; text-transform: uppercase; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn__icon {
  width: 6rem; height: 6rem; border-radius: 1.2rem; background: var(--ink); color: var(--white);
  display: grid; place-items: center; transition: background-color .2s;
}
.btn__icon svg { width: 2.8rem; height: auto; }
.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--mint); }
.btn--light:hover .btn__icon, .btn--outline:hover .btn__icon { background: var(--green); }
.btn--outline { background: var(--white); border: 2px solid var(--green); color: var(--ink); }
.btn--outline:hover { background: var(--bg-soft); }
.btn--ghost {
  height: auto; padding: 1.8rem 2.4rem; border: 2px solid var(--ink); border-radius: 1.2rem;
  font-size: 2rem; justify-content: center;
}
.btn--ghost:hover { background: var(--ink); color: var(--white); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 1.2rem;
  font-size: 1.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: -0.05rem;
  color: var(--green);
}
.link-arrow svg { width: 2rem; height: 2rem; transition: transform .2s; }
.link-arrow:hover svg { transform: translateX(.4rem); }
.link-arrow--up svg { transform: none; }
/* «Все новости», «все публикации» у заголовка раздела: крупнее обычной ссылки со стрелкой */
.link-arrow--all { font-size: 2.4rem; font-weight: 400; gap: 1.4rem; }
.link-arrow--all svg { width: 2.2rem; height: 2.2rem; }

.square-btn {
  width: 8.2rem; height: 8.2rem; border-radius: 1.64rem; display: grid; place-items: center;
  background: var(--ink); color: var(--white); transition: background-color .2s, opacity .2s;
}
.square-btn svg { width: 5.6rem; height: 5.6rem; }
.square-btn:hover:not(:disabled) { background: var(--green); }
.square-btn:disabled { background: #676a72; cursor: default; }

.tag {
  display: inline-flex; align-items: center; padding: .8rem 1.6rem; border-radius: 2.9rem;
  background: var(--tag); color: var(--green);
  font-size: 1.8rem; line-height: 1.4; letter-spacing: -0.05rem; text-transform: uppercase; white-space: nowrap;
}
.tag--outline { background: transparent; border: 1px solid var(--tag); }
.tags { display: flex; flex-wrap: wrap; gap: .8rem .6rem; }

/* ---------- шапка ---------- */
.site-header {
  position: absolute; inset: var(--hero-edge) var(--gutter) auto; z-index: 20;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 3rem;
}
/* английский логотип выше русского (3:1 против 4.5:1): при той же ширине он вышел бы в полтора раза
   выше, поэтому все ширины логотипа умножаются на --logo-k, у английских страниц он меньше */
:root { --logo-k: 1; }
:root[lang="en"] { --logo-k: .82; }
.site-header__logo img { width: calc(36.4rem * var(--logo-k)); height: auto; }
.site-header__right { display: flex; align-items: flex-start; gap: 3.2rem; }

.nav { position: relative; }
.nav__bar {
  display: flex; gap: .8rem; padding: .8rem 1.6rem; border-radius: var(--radius-m);
  background: rgba(242, 253, 251, .25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.nav__item {
  height: 6.6rem; padding: 0 1.2rem; border-radius: var(--radius-m);
  display: flex; align-items: center; gap: .8rem;
  font-size: 2.4rem; font-weight: 500; text-transform: uppercase; color: var(--mint); white-space: nowrap;
  transition: background-color .2s;
}
.nav__item:hover { background: rgba(242, 253, 251, .2); }
.nav__item.is-active, .nav__item[aria-expanded="true"] { background: rgba(242, 253, 251, .4); }
.nav__item svg { width: 2rem; height: 1.6rem; transition: transform .2s; }
.nav__item[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__dropdown {
  position: absolute; top: calc(100% + 1.6rem); left: 0; right: 0;
  display: flex; gap: 3.2rem; padding: 1.6rem; border-radius: var(--radius-m);
  background: rgba(242, 253, 251, .25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.nav__card {
  flex: 1; min-height: 14rem; padding: 1.6rem; border-radius: var(--radius-m);
  background: rgba(242, 253, 251, .8); color: var(--ink);
  display: flex; justify-content: space-between; align-items: flex-start;
  font-size: 2.4rem; font-weight: 500; line-height: 1.15; text-transform: uppercase;
  transition: background-color .2s;
}
.nav__card:hover { background: var(--white); }
.nav__card .card-arrow { width: 4.8rem; height: 4.8rem; align-self: flex-end; border-radius: 1rem; }
/* viewBox стрелки 82x82 = кнопка целиком, иначе svg 5.6rem вылезает из кнопки 4.8rem */
.nav__card .card-arrow svg { width: 100%; height: 100%; }

.lang {
  height: 8.2rem; padding: 0 .8rem; border-radius: var(--radius-m);
  display: flex; align-items: center; background: rgba(242, 253, 251, .25);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.lang__inner { display: flex; align-items: center; gap: 2rem; padding: 1.2rem; }
.lang__btn {
  padding: 1.2rem; border-radius: .8rem; font-size: 2.46rem; font-weight: 600; line-height: 1; text-transform: uppercase;
  background: var(--mint); color: var(--ink);
}
.lang__btn.is-active { background: var(--ink); color: var(--mint); }
.lang__btn[aria-disabled="true"] { cursor: not-allowed; }
.lang__divider { width: 2px; height: 4.3rem; background: rgba(242, 253, 251, .6); }

.burger { display: none; }

/* ---------- первый экран ---------- */
/* Первый экран не выше окна: в невысоком окне сжимаются отступы, а не шрифты.
   Контент прижат к низу на --hero-edge, тем же отступом, что шапка сверху,
   поэтому поля сверху (до логотипа и меню) и снизу (под кнопкой) одинаковые. */
.hero { position: relative; height: min(109rem, 100vh); min-height: 64rem; color: var(--mint); overflow: hidden; background: #0d1a14; }
.hero--short { height: min(91.1rem, 100vh); }
.hero__bg { position: absolute; inset: -2%; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(7.5px); transform: scale(1.02); }
.hero--direction .hero__bg img { filter: blur(16px); }
/* фото команды в лесу: солнечное и пестрое, поэтому общее затемнение плюс сильнее слева снизу, где заголовок */
.hero--photo .hero__bg img { filter: brightness(.6) saturate(.9); transform: none; }
/* верх самой высокой головы (33% высоты фото 4:3, снимок от 21.08.2026) на 4rem ниже шапки (низ шапки 10.8rem):
   фото шириной 104vw имеет высоту 78vw, отсюда сдвиг 10.8 + 4 + 2% высоты первого экрана - 0.33 * 78vw.
   При замене фото мерить заново, где у него верх самой высокой головы */
@media (min-width: 1101px) {
  .hero--photo .hero__bg img { object-position: center calc(16.6rem - 25.74vw); }
}
.hero--photo .hero__bg::after { background: linear-gradient(62deg, rgba(9, 9, 11, .62) 18%, rgba(9, 9, 11, .25) 48%, rgba(9, 9, 11, 0) 75%); }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(60.8deg, rgba(9, 9, 11, .5) 35.45%, rgba(9, 9, 11, 0) 100%);
}
.hero--direction .hero__bg::after { background: linear-gradient(60.8deg, rgba(9, 9, 11, .55) 30%, rgba(9, 9, 11, .15) 100%); }
.hero__content {
  position: absolute; left: var(--gutter); right: var(--gutter);
  top: calc(var(--hero-edge) + 12rem); bottom: var(--hero-edge);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero__back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .8rem; margin-bottom: 6.8rem;
  font-size: 1.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: -0.05rem; color: var(--white);
}
.hero__back svg { width: 2.1rem; height: 2.1rem; transform: rotate(180deg); transition: transform .2s; }
.hero__back:hover svg { transform: rotate(180deg) translateX(.4rem); }
/* обрезаем пустое место строки над заглавными и под базовой линией, как text-box-trim в макете,
   чтобы отступы вокруг заголовка на глаз были такими же, как в CSS */
.hero__title { font-size: 12rem; font-weight: 400; line-height: 1; letter-spacing: -0.02em; max-width: 125rem; text-box: trim-both cap alphabetic; }
.hero__back { text-box: trim-both cap alphabetic; }
.hero--home .hero__title { line-height: .97; }
/* названия направлений: строки выровнены по длине; размер и ширина для десктопа в блоке «компактная шапка» */
[data-page="direction"] .hero__title { max-width: none; text-wrap: balance; }
.hero__title em { font-style: italic; font-weight: 300; }
.hero__bottom {
  margin-top: 6.2rem;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 4rem;
}
.hero__subtitle { font-size: 3.2rem; font-weight: 300; line-height: 1.45; letter-spacing: -0.016rem; max-width: 91.4rem; }

/* ---------- появление первого экрана при открытии страницы ----------
   Чистый CSS: анимация стартует с первой отрисовки, скрипты не ждем, поэтому нет мигания.
   fill-mode backwards держит начальное состояние только на время задержки, после анимации
   у элементов снова обычные стили (эффекты наведения не перебиваются).
   Шапку дорисовывает layout.js, ее анимация стартует в момент вставки. */
@keyframes intro-bg { from { opacity: 0; transform: scale(1.08); } }
@keyframes intro-rise { from { opacity: 0; transform: translateY(3.2rem); } }
@keyframes intro-drop { from { opacity: 0; transform: translateY(-1.6rem); } }
.hero__bg { animation: intro-bg 1.6s cubic-bezier(.2, .7, .2, 1) backwards; }
.page > .site-header { animation: intro-drop .8s cubic-bezier(.2, .7, .2, 1) .15s backwards; }
.hero__back { animation: intro-rise .8s cubic-bezier(.2, .7, .2, 1) .25s backwards; }
.hero__title { animation: intro-rise 1s cubic-bezier(.2, .7, .2, 1) .35s backwards; }
.hero__subtitle { animation: intro-rise .9s cubic-bezier(.2, .7, .2, 1) .6s backwards; }
.hero__bottom .btn { animation: intro-rise .9s cubic-bezier(.2, .7, .2, 1) .72s backwards; }
@media (prefers-reduced-motion: reduce) {
  .hero__bg, .page > .site-header, .hero__back, .hero__title, .hero__subtitle, .hero__bottom .btn { animation: none; }
}

/* ---------- анимации при прокрутке и мелкие отклики (логика в layout.js, initMotion) ---------- */
/* блоки ниже первого экрана: один раз мягко поднимаются, в группах по очереди (--d) */
.reveal { opacity: 0; transform: translateY(3.2rem); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), transform .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms);
}

/* линия этапов в «Индустрии» прорисовывается слева направо, этапы проявляются, когда линия доходит до их точки */
.timeline.is-pending .timeline__line { clip-path: inset(0 100% 0 0); }
.timeline.is-pending .timeline__steps li { opacity: 0; transform: translateY(1.6rem); }
.timeline.is-drawn .timeline__line { clip-path: inset(0 -1% 0 0); transition: clip-path 1.4s cubic-bezier(.45, .05, .55, .95); }
.timeline.is-drawn .timeline__steps li {
  transition: opacity .6s ease var(--d), transform .6s cubic-bezier(.2, .7, .2, 1) var(--d);
}
.timeline__steps li:nth-child(1) { --d: .05s; }
.timeline__steps li:nth-child(2) { --d: .38s; }
.timeline__steps li:nth-child(3) { --d: .74s; }
.timeline__steps li:nth-child(4) { --d: 1.1s; }

/* «Написать»: при наведении точки в иконке чата «печатают» */
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: .6; } 30% { transform: translateY(-2.4px); opacity: 1; } }
.btn:hover .btn__icon circle { transform-box: fill-box; transform-origin: center; animation: typing 1s ease-in-out infinite; }
.btn:hover .btn__icon circle:nth-of-type(2) { animation-delay: .15s; }
.btn:hover .btn__icon circle:nth-of-type(3) { animation-delay: .3s; }

/* стрелки ↗ «узнать подробнее»: при наведении чуть уходят по диагонали и возвращаются */
@keyframes nudge-ur { 45% { transform: translate(.5rem, -.5rem); } }
.dir-card:hover .square-btn svg, .nav__card:hover .card-arrow svg, .btn:hover .btn__icon--arrow svg,
.f-ext:hover svg, .link-arrow--up:hover svg { animation: nudge-ur .55s cubic-bezier(.3, .7, .3, 1); }

/* «Наверх»: стрелка уходит вверх и возвращается (иконка повернута на 90°, поэтому сдвиг вдоль ее оси X) */
@keyframes nudge-up { 0%, 100% { transform: rotate(90deg); } 45% { transform: rotate(90deg) translateX(-.7rem); } }
.back-top:hover svg { animation: nudge-up .55s cubic-bezier(.3, .7, .3, 1); }

/* меню «Наука» и меню-бургер раскрываются плавно */
@keyframes menu-in { from { opacity: 0; transform: translateY(-.8rem); } }
.nav__dropdown:not([hidden]) { animation: menu-in .22s cubic-bezier(.2, .7, .2, 1); }

/* ---------- компактная шапка (2026-09-17) ----------
   Логотип и меню мельче макета примерно на 20%: меню 20px вместо 24, логотип 305px вместо 364.
   Заголовок, подзаголовок и кнопка первого экрана остаются как в макете.
   Поле над шапкой 40px на окне 1920+, как у sohub.digital; поле под подзаголовком и кнопкой 80px (было 60).
   Только десктоп. Откат: удалить этот блок. */
@media (min-width: 1101px) {
  :root { --hero-edge: 8rem; }
  .site-header { top: 4rem; }
  .site-header__logo img { width: calc(30.5rem * var(--logo-k)); }
  .site-header__right { gap: 2.4rem; }
  .nav__bar { gap: .6rem; padding: .7rem 1.1rem; border-radius: 1.4rem; }
  .nav__item { height: 5.4rem; border-radius: 1.2rem; gap: .7rem; font-size: 2rem; }
  .nav__item svg { width: 1.7rem; height: 1.3rem; }
  .nav__dropdown { top: calc(100% + 1.3rem); gap: 2.2rem; padding: 1.3rem; border-radius: 1.4rem; }
  .nav__card { min-height: 12rem; padding: 1.4rem; border-radius: 1.2rem; font-size: 2rem; }
  .nav__card .card-arrow { width: 4.2rem; height: 4.2rem; border-radius: .9rem; }
  .lang { height: 6.8rem; padding: 0 .7rem; border-radius: 1.4rem; }
  .lang__inner { gap: 1.6rem; padding: .9rem; }
  .lang__btn { padding: 1rem; border-radius: .7rem; font-size: 2rem; }
  .lang__divider { height: 3.5rem; }

  /* заголовок направления 100px (в макете 120) и не правее конца слова «Индустрия» в меню
     (117rem от левого края контента), так длинные названия укладываются в 3 строки */
  [data-page="direction"] .hero__title { font-size: 10rem; max-width: 117rem; }
  /* строка, заданная вручную (<span class="line">), не переносится, даже если шире границы — исключения по просьбе владельца */
  [data-page="direction"] .hero__title .line { white-space: nowrap; }
  /* подзаголовок уменьшен в той же пропорции, что заголовок: 32px * 100/120 */
  /* на странице направления подзаголовок длиннее, ему нужна строка пошире,
     иначе заданный владельцем перенос дает лишнюю строку */
  [data-page="direction"] .hero__subtitle { font-size: 2.67rem; max-width: 106rem; }
}

/* ---------- главная: о центре ---------- */
/* промежуток между заголовком и метриками идет по той же шкале, что и промежутки между секциями:
   иначе на планшете (761–1100px) внутри блока получалось просторнее, чем между блоками */
.about { padding-top: var(--section-gap); display: flex; flex-direction: column; gap: 16rem; }
.about__head { max-width: 90.8rem; }
/* места одинаковой ширины: цифры в них сменяются, и от разной длины подписи
   колонки иначе прыгали бы вбок */
.metrics { display: flex; justify-content: space-between; gap: 4rem; }
.metrics > .metric { flex: 1 1 0; min-width: 0; }
.metric__body { transition: opacity .5s ease, transform .5s ease; }
.metric__body.is-out { opacity: 0; transform: translateY(-1rem); }
.metric { display: flex; flex-direction: column; gap: 4rem; }
.metric:nth-child(1) { width: 51.7rem; }
.metric:nth-child(2) { width: 43.2rem; }
.metric:nth-child(3) { width: 41rem; }
.metric__icon { position: relative; height: 5.2rem; }
.metric__icon img { position: absolute; max-width: none; }
/* иконки цифр собраны из частей макета: у каждой части свое место в поле 5x5rem */
.metric__icon .mi-p1 { left: 2.873rem; top: 2.434rem; width: 3.48rem; height: 1.649rem; transform: rotate(180deg); }
.metric__icon .mi-p2 { left: 3.593rem; top: .45rem; width: 1.995rem; height: 1.995rem; }
.metric__icon .mi-p3 { left: .036rem; top: 2.744rem; width: 4.056rem; height: 1.976rem; transform: rotate(180deg); }
.metric__icon .mi-p4 { left: .889rem; top: .494rem; width: 2.349rem; height: 2.261rem; }
/* иконка публикаций сдвинута на 0.3rem вверх: ее низ на одной линии с низом соседних */
.metric__icon .mi-d1 { left: -.1rem; top: -.2rem; width: 5rem; height: 5rem; }
.metric__icon .mi-d2 { left: 3.433rem; top: 3.3rem; width: 1.367rem; height: 1.4rem; }
.metric__icon .mi-l1, .metric__icon .mi-l2, .metric__icon .mi-l3 { left: .7rem; width: 3.4rem; height: .2rem; }
.metric__icon .mi-l1 { top: .933rem; }
.metric__icon .mi-l2 { top: 1.717rem; }
.metric__icon .mi-l3 { top: 2.517rem; }
.metric__icon .mi-t { left: 0; top: -.1rem; width: 41rem; height: 5.2rem; }
.metric__title { font-size: 3.6rem; font-weight: 500; line-height: 1; margin-bottom: 2.8rem; }
/* перенос \n в подписи ставится руками там, где строка сама не ломается пополам */
.metric__text { font-size: 2.4rem; font-weight: 300; line-height: 1.35; text-transform: lowercase; white-space: pre-line; }
/* русские подписи выверены по строкам руками, английские выравниваются по длине строк сами */
:root[lang="en"] .metric__text { text-wrap: balance; }

/* ---------- главная: наука ---------- */
.science { margin-top: var(--section-gap); padding-block: 10rem; background: var(--bg-soft); }
.science__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 4rem; }
.science__head .lead { max-width: 54.4rem; }
/* шапка «Индустрии»: заголовок с подзаголовком слева, ссылка «Наши продукты» справа по низу подзаголовка,
   как «Все новости» у новостей */
.industry__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 4rem; }
.industry__head .link-arrow { flex: none; }
.slider-arrows { display: flex; gap: 1.6rem; }
.slider-arrows .square-btn:first-child svg { transform: rotate(180deg); }

/* прокрутка по горизонтали обрезает и вертикаль, поэтому сверху и снизу запас под подъем карточки и тень,
   а отрицательные поля возвращают блок на место из макета */
.carousel {
  margin-top: 5rem; margin-bottom: -6rem; padding-block: 3rem 6rem;
  display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none;
}
/* поле справа такое же, как слева: в конце ленты последняя карточка встает правым краем
   ровно по правой стрелке (владелец 24.09.2026). У ленты команды так же */
.carousel::-webkit-scrollbar { display: none; }

.dir-card {
  flex: 0 0 55.4rem; height: 66.8rem; scroll-snap-align: end;
  display: flex; flex-direction: column; gap: 4rem; padding-top: 4rem;
  background: var(--white); border-radius: var(--radius-l); overflow: hidden;
  isolation: isolate; /* без этого Chrome на время анимации теряет скругление углов у картинки */
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s cubic-bezier(.2, .7, .2, 1);
}
.dir-card:hover { transform: translateY(-.8rem); box-shadow: 0 2rem 4rem rgba(37, 67, 57, .12); }
.dir-card__top { height: 25.8rem; padding-inline: 2.8rem; display: flex; flex-direction: column; justify-content: space-between; }
.dir-card__title { font-size: 4rem; font-weight: 400; line-height: 1.16; letter-spacing: -0.05rem; }
.dir-card__row { display: flex; justify-content: space-between; align-items: center; }
.dir-card__stats { display: flex; gap: 4rem; }
.stat__value { font-size: 4rem; font-weight: 700; line-height: 3.6rem; color: var(--green); min-width: 9.9rem; }
.stat__label { margin-top: 1.5rem; font-size: 2.04rem; line-height: 1.87rem; opacity: .6; white-space: nowrap; }
.dir-card__img { height: 33rem; border-radius: var(--radius-l); overflow: hidden; flex-shrink: 0; isolation: isolate; }
.dir-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
/* направление без своей фотографии: плашка фирменного цвета вместо картинки */
.dir-card__img.is-empty { background: linear-gradient(160deg, #35664c, #1c3a2c); }
.dir-card:hover .square-btn { background: var(--green); }

/* ---------- главная: индустрия ---------- */
.industry { padding-top: var(--section-gap); }
.industry .section-head { max-width: 95.2rem; }
.timeline { margin-top: 14.4rem; position: relative; }
.timeline__line { width: 100%; height: auto; }
.timeline__steps { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 4.4rem; }
.timeline__steps li { font-size: 2.8rem; line-height: 1.2; letter-spacing: -0.05rem; color: var(--green-deep); padding-right: 2rem; }
.timeline__steps li:nth-child(2) { margin-left: -1.35rem; }
.timeline__bar { display: none; }

.ind-grid { margin-top: 8rem; display: grid; grid-template-columns: 43.9rem 1fr 1fr; gap: 2.2rem; }
.ind-card {
  background: var(--bg-soft); border-radius: var(--radius-l); padding: 3.6rem 5.4rem 5.4rem 4.6rem;
  color: var(--green-deep); display: flex; flex-direction: column; gap: 6.4rem; min-height: 40.1rem;
}
.ind-card--wide { grid-column: 1 / span 2; }
.ind-card:nth-child(1) { grid-column: 1 / span 2; }
.ind-card:nth-child(2) { grid-column: 3; }
.ind-card--wide { grid-column: 2 / span 2; min-height: 31.8rem; }
.ind-card__title { font-size: 4rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.05rem; max-width: 62rem; }
.ind-card--wide .ind-card__title { max-width: none; }
.bullets { display: flex; flex-direction: column; gap: 1.8rem; }
.bullets li { display: flex; gap: 1.4rem; font-size: 2.4rem; line-height: 1.4; letter-spacing: -0.05rem; }
.bullets li::before {
  content: ""; flex: 0 0 1.6rem; height: 1.6rem; margin-top: .9rem;
  background: url("../icons/bullet.svg") center / contain no-repeat;
}
.bullets .tags { margin-top: 1.9rem; }

.ind-photo {
  position: relative; border-radius: var(--radius-l); overflow: hidden; min-height: 31.8rem; color: var(--white);
  padding: 3.6rem 5.4rem 5.4rem 4.6rem; display: flex; flex-direction: column; justify-content: space-between;
}
.ind-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: bottom; transition: transform .5s; }
.ind-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35)); }
.ind-photo > *:not(img) { position: relative; z-index: 1; }
.ind-photo:hover img { transform: scale(1.05); }
.ind-photo__title { font-size: 4rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.05rem; }
.ind-photo .link-arrow { color: var(--white); }

/* ---------- главная: образование ---------- */
.education {
  margin-top: var(--section-gap); padding: 10rem var(--gutter); background: var(--bg-soft);
  display: flex; justify-content: space-between; gap: 7.5rem;
}
/* низ фото ровно по низу кнопки «подробнее о треке» (владелец 24.09.2026, было на 1rem короче;
   29.09.2026 +3.36rem, одна строка текста: название программы стало в три строки) */
.education__photo { flex: 0 0 79.3rem; height: 91.9rem; border-radius: var(--radius-l); overflow: hidden; }
.education__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 38% center; }
/* английский текст трека короче русского: фото ниже на столько же, низ фото тоже по низу кнопки
   (замер после загрузки шрифтов 24.09.2026, разница 6.7rem на любой ширине) */
@media (min-width: 1101px) { :root[lang="en"] .education__photo { height: 81.8rem; } }
/* вертикальный ритм по макету: заголовок и фото начинаются на одной линии, низ кнопки = низ фото */
.education__body { flex: 0 1 82.2rem; display: flex; flex-direction: column; }
.education .section-head { gap: 2.1rem; }
.education__sub { font-family: var(--font-alt); font-size: 3.2rem; line-height: 1.25; }
/* на десктопе строки идут строго по разбивке макета (br-desk): первая строка занимает колонку почти целиком,
   и при чуть другой отрисовке шрифта браузер добавлял лишнюю строку, кнопка уезжала ниже фото */
/* межбуквенный интервал обычный: с отрицательным (-0.05rem из макета) длинный абзац читался сжатым
   (замечание 29.09.2026); русское название программы из-за этого разбито на три строки, а не на две */
/* название программы ближе к подзаголовку трека, текст о треке отступает от названия (владелец 29.09.2026);
   сумма отступов прежняя, 5.2rem, поэтому высота колонки и выравнивание по фото не меняются */
.education__text { font-size: 2.4rem; line-height: 1.4; margin-top: 2.8rem; white-space: nowrap; }
.education__program { font-weight: 600; margin-bottom: 2.4rem; }
.education .facts { margin-top: 5.2rem; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 2px solid var(--stroke); }
.fact { padding: 3.55rem 0 4.55rem 4.5rem; font-family: var(--font-alt); }
.fact:first-child { padding-left: 0; }
.fact + .fact { border-left: 2px solid var(--stroke); }
.fact__label { font-size: 1.9rem; text-transform: uppercase; margin-bottom: .65rem; }
.fact__value { font-size: 2.4rem; font-weight: 600; }
.fact__note { margin-top: .15rem; font-size: 1.8rem; font-weight: 300; }
.education .btn { align-self: flex-start; margin-top: 4rem; }
.btn__icon--arrow svg { width: 3.6rem; height: 3.6rem; }

/* ---------- карточка новости ---------- */
.news { padding-top: var(--section-gap); }
.news__grid { margin-top: 9.6rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6.7rem; }
.news-card {
  display: flex; flex-direction: column; gap: 2rem; background: var(--bg-soft); border-radius: var(--radius-l);
  overflow: hidden; text-align: left; transition: transform .25s, box-shadow .25s;
}
.news-card:hover { transform: translateY(-.6rem); box-shadow: 0 1.6rem 4rem rgba(37, 67, 57, .12); }
.news-card__img { height: 33rem; border-radius: var(--radius-l); overflow: hidden; }
.news-card__img img { width: 100%; height: 100%; object-fit: cover; }
/* фотография есть не у всех новостей: без нее место снимка занимает плашка фирменного цвета */
.news-card__img.is-empty { background: linear-gradient(160deg, #35664c, #1c3a2c); }
.news-card__body { flex: 1; display: flex; flex-direction: column; gap: 4rem; padding: 0 4.1rem 3.5rem; }
.news-meta { display: flex; align-items: center; gap: 1.76rem; }
.news-meta__date { font-family: var(--font-alt); font-size: 2rem; color: var(--date); }
/* заголовок и анонс у всех карточек занимают одинаковое место: три строки заголовка
   и пять строк анонса. Так текст и ссылка «читать» стоят на одной линии во всем ряду.
   Три строки это около 70 знаков, заголовки под эту меру переписаны (content/manual/news_titles.json).
   Что длиннее, обрезается многоточием */
/* Перенос, поставленный владельцем в заголовке, работает, пока страница масштабируется
   вместе с окном: базовый размер это clamp(6.4px, 100vw/192, 10px), ниже 1229 пикселей он
   упирается в минимум, колонка продолжает сужаться и заданные строки начинают ломаться.
   Там перенос скрываем, как и в окне новости, где колонка другой ширины. */
.modal__title br { display: none; }
.news-card__title {
  font-size: 2.7rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.05rem; min-height: 3.6em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card__text {
  margin-top: 2rem; font-family: var(--font-alt); font-size: 2rem; font-weight: 300; line-height: 1.35;
  min-height: 6.75em;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card .link-arrow { margin-top: auto; align-self: flex-end; }
/* нажимается вся карточка, а не только «читать»: невидимый слой ссылки на всю площадь */
.news-card { position: relative; }
.news-card .link-arrow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* ---------- подвал ---------- */
.site-footer { position: relative; margin-top: var(--section-gap); color: var(--mint); overflow: hidden; background: #0d1a14; }
.site-footer__bg { position: absolute; inset: -30% -2%; }
.site-footer__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(30px); }
.site-footer__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(60.8deg, rgba(9, 9, 11, .5) 35.45%, rgba(9, 9, 11, 0) 100%);
}
.site-footer__inner { position: relative; padding: 5.2rem var(--gutter) 4.2rem; }
.site-footer__top { display: flex; justify-content: space-between; align-items: flex-start; }
.site-footer__logo img { width: calc(40rem * var(--logo-k)); height: auto; }
.back-top {
  width: 8.2rem; height: 8.2rem; border-radius: 1.6rem; background: rgba(242, 253, 251, .25);
  display: grid; place-items: center; margin-top: 1.2rem; margin-right: -.05rem; transition: background-color .2s;
}
/* viewBox иконки 82x82 = вся кнопка из макета, поэтому svg во всю кнопку */
.back-top svg { width: 100%; height: 100%; transform: rotate(90deg); }
.back-top:hover { background: rgba(242, 253, 251, .4); }
.site-footer__cols {
  margin-top: 8.2rem; display: grid; gap: 4rem;
  grid-template-columns: 22.2rem 37.8rem 1fr 26.9rem;
  min-height: 28.3rem;
}
.f-col { display: flex; flex-direction: column; gap: 4rem; font-size: 2.4rem; line-height: 2.6rem; }
.f-col__title { font-weight: 500; text-transform: uppercase; }
.f-col ul { display: flex; flex-direction: column; gap: 2.4rem; font-weight: 300; }
.f-col a:hover { text-decoration: underline; text-underline-offset: .4rem; }
.f-ext { display: inline-flex; align-items: center; gap: 2rem; font-weight: 500; text-transform: uppercase; }
.f-ext svg { width: 1.65rem; height: 1.65rem; }
.f-contacts { justify-content: space-between; gap: 3rem; align-items: flex-start; }
.f-contacts ul a { text-decoration: underline; text-underline-offset: .4rem; }
/* адрес ведет на Яндекс Карты: строки заданы в site.json и внутри не рвутся, подчеркивание только
   при наведении (стрелку и постоянное подчеркивание владелец отверг 29.09.2026) */
.f-contacts ul a.f-addr { display: inline-block; text-decoration: none; line-height: 1.5; }
.f-addr span { white-space: nowrap; }
.f-addr:hover span { text-decoration: underline; text-underline-offset: .4rem; }
.site-footer__bottom {
  margin-top: 10.5rem; padding-top: 4.1rem; border-top: 1px solid rgba(242, 253, 251, .3);
  display: flex; justify-content: space-between; gap: 2rem;
  font-family: var(--font-alt); font-size: 2.4rem; font-weight: 300; text-transform: uppercase; opacity: .6;
}

/* ---------- страница направления ---------- */
.dir-about { padding-top: var(--section-gap); }
/* Правило блока «О направлении»: левая и правая колонки заканчиваются на одной линии.
   Та колонка, что короче, прижимает свой последний блок к низу: слева это карточка-приглашение
   (margin-top: auto), справа — облако ключевых слов (space-between). Высоту задает колонка
   подлиннее, поэтому низ у них всегда общий при любой длине текста и любом числе слов. */
.dir-about__grid { margin-top: 6.2rem; display: flex; justify-content: space-between; gap: 6rem; }
.dir-about__main { max-width: 108.2rem; display: flex; flex-direction: column; gap: 6rem; }
.dir-about__main > .dir-cta { margin-top: auto; }
.dir-about__text { font-size: 2.4rem; font-weight: 300; line-height: 1.4; }
/* карточка-приглашение под описанием: занимает место, где было пусто, и ведет к «Написать» */
.dir-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 4rem;
  padding: 4rem 4rem 4rem 4.6rem; border-radius: var(--radius-l); background: var(--bg-soft);
}
.dir-cta__title { font-size: 3.2rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.05rem; color: var(--green-deep); }
.dir-cta__text { margin-top: 1.2rem; max-width: 62rem; font-size: 2rem; font-weight: 300; line-height: 1.4; color: var(--ink); }
.dir-cta__btn { flex-shrink: 0; }
.dir-about__text p + p { margin-top: 1.6rem; }
.dir-about__side { flex: 0 0 52.7rem; display: flex; flex-direction: column; gap: 6.8rem; justify-content: space-between; }
.dir-stats { display: grid; grid-template-columns: 19.1rem 19.1rem; column-gap: 9.2rem; row-gap: 4rem; }
.dir-stats .stat__label { opacity: .4; }
.dir-about__side .tags { gap: 1.3rem .8rem; }

/* заголовок «Команда» со стрелками, как у «Науки» на главной; стрелки скрыты, если все карточки помещаются */
.people-head { margin-top: 14rem; display: flex; justify-content: space-between; align-items: flex-end; gap: 4rem; }
.people.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
@media (hover: hover) and (pointer: fine) { .people { cursor: grab; } }
.people {
  margin-top: 5rem; display: flex; gap: 7.8rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 70%, rgba(0,0,0,.55));
  mask-image: linear-gradient(90deg, #000 70%, rgba(0,0,0,.55));
}
/* затемнение справа подсказывает, что дальше есть еще люди; в конце ленты оно лишнее */
.people.is-end { -webkit-mask-image: none; mask-image: none; }
.people::-webkit-scrollbar { display: none; }
/* margin: 0 — у figure браузерные поля по 40px, из-за них промежуток был 158px вместо 78px из макета */
.person { margin: 0; position: relative; flex: 0 0 42.8rem; height: 52.7rem; border-radius: var(--radius-m); overflow: hidden; scroll-snap-align: end; color: var(--white); }
/* лента встает так, что правый край очередной карточки ровно по правой стрелке (владелец 24.09.2026),
   а в начале первая карточка стоит у левого поля. На телефоне в книжной стрелок нет, там по левому краю */
.dir-card:first-child, .person:first-child { scroll-snap-align: start; }
@media (max-width: 760px) and (orientation: portrait) { .dir-card, .person { scroll-snap-align: start; } }
.person img { width: 100%; height: 100%; object-fit: cover; }
.person::after { content: ""; position: absolute; inset: 0; background: linear-gradient(179.85deg, rgba(255,255,255,0) 33.9%, var(--ink) 99%); }
/* карточка сотрудника без фотографии: плашка фирменного цвета, затемнение снизу не нужно */
.person--plain { background: linear-gradient(160deg, #35664c, #1c3a2c); }
.person--plain::after { display: none; }
.person__text { position: absolute; left: 3.9rem; right: 3.9rem; bottom: 4.2rem; z-index: 1; }
.person__name { font-size: 3rem; font-weight: 500; line-height: 1; }
/* подпись прижата к низу карточки, поэтому без min-height однострочная должность
   опускала имя ниже, чем двухстрочная. Резервируем две строки: имя и первая строка
   должности встают на одном уровне у всех сотрудников, а длинная должность не обрезается */
.person__role { margin-top: 2.8rem; font-size: 2rem; font-weight: 300; line-height: 1.4; min-height: 2.8em; }

/* ---------- публикации ---------- */
.pubs { padding-top: var(--section-gap); }
/* на странице публикаций список идет сразу под первым экраном */
.pubs.pubs--page { padding-top: 12rem; }
.pubs__sub { margin-top: 1.6rem; font-size: 2rem; color: var(--date); }
.view-toggle { margin-top: 7rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2.8rem; }
.view-toggle__btn {
  height: 8.6rem; padding: 0 2.4rem; border-radius: var(--radius-m); border: 2px solid var(--green);
  display: flex; align-items: center; gap: 1.6rem;
  font-size: 2.4rem; font-weight: 500; text-transform: uppercase; background: var(--white); color: var(--ink);
  transition: background-color .2s, color .2s;
}
/* флекс ставит иконку по середине строки, а прописные надписи сидят чуть выше нее:
   поднимаем иконку, чтобы ее центр совпал с центром букв (замер 28.09.2026) */
.view-toggle__btn svg { width: 2.4rem; height: 2.4rem; transform: translateY(-.07rem); }
.view-toggle__btn[aria-pressed="true"] { background: var(--green); color: var(--mint); }
.view-toggle__btn:not([aria-pressed="true"]):hover { background: var(--bg-soft); }

.pub-list { margin-top: 3.2rem; }
.pub { padding: 3rem var(--gutter) 5rem; display: flex; flex-direction: column; gap: 4rem; }
.pub:nth-child(even) { background: var(--bg-soft); }
.pub__meta { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.pub__meta-left { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 2rem; font-size: 2rem; line-height: 2.95rem; }
.pub__date { color: var(--date); }
.pub__cite { display: inline-flex; align-items: center; gap: 1.4rem; font-size: 2rem; color: var(--green); letter-spacing: -0.05rem; white-space: nowrap; transition: color .2s; }
/* иконка стоит на месте: при наведении под ней проявляется мягкая плашка, при нажатии она темнеет */
.pub__cite svg {
  box-sizing: content-box; width: 1.62rem; height: 1.89rem; padding: .8rem .9rem; margin: -.8rem -.9rem;
  border-radius: .8rem; transition: background-color .2s, color .2s;
}
.pub__cite:hover { color: var(--green-deep); }
.pub__cite:hover svg { background: var(--tag); }
.pub__cite:active svg { background: var(--green); color: var(--white); }

/* ---------- всплывающее окно: написать нам, цитирование ---------- */
.sheet {
  width: min(78rem, calc(100vw - 3.2rem)); max-height: calc(100dvh - 6rem); padding: 0; border: 0;
  border-radius: var(--radius-l); background: var(--white); color: var(--ink); font-size: 2rem; overflow: auto;
  box-shadow: 0 2.4rem 8rem rgba(9, 9, 11, .25);
}
.sheet[open] { animation: sheet-in .22s cubic-bezier(.2, .7, .2, 1); }
.sheet::backdrop { background: rgba(9, 9, 11, .45); animation: fade .2s; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(1.6rem) scale(.98); } }
.sheet__head {
  position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 2rem;
  padding: 2.8rem 3.2rem 2rem 4rem; background: var(--white); border-bottom: 1px solid var(--stroke);
}
.sheet__title { font-size: 3.2rem; font-weight: 500; letter-spacing: -0.05rem; }
.sheet__close {
  width: 4.8rem; height: 4.8rem; border-radius: 1.2rem; display: grid; place-items: center;
  background: var(--bg-soft); transition: background-color .2s, color .2s;
}
.sheet__close:hover { background: var(--ink); color: var(--white); }
.sheet__close svg { width: 2rem; height: 2rem; }
.sheet__body { padding: 3.2rem 4rem 4rem; }

.write__lead { font-size: 2.2rem; line-height: 1.4; color: var(--date); }
.write__mail { margin-top: 2rem; font-size: 3.6rem; font-weight: 500; letter-spacing: -0.05rem; }
.write__mail a { border-bottom: 2px solid var(--tag); transition: border-color .2s, color .2s; }
.write__mail a:hover { color: var(--green); border-color: var(--green); }
.write__actions { margin-top: 3.6rem; display: flex; flex-wrap: wrap; gap: 1.2rem; }
.btn--dark { background: var(--ink); color: var(--white); height: 6.4rem; font-size: 2rem; }
.btn--dark .btn__icon { width: 4.6rem; height: 4.6rem; background: var(--white); color: var(--ink); }
.btn--dark .btn__icon svg { width: 2.2rem; }
.btn--dark:hover { background: var(--green); }
.sheet .btn--ghost { height: 6.4rem; padding-block: 0; }
.btn.is-done, .cite__copy.is-done { border-color: var(--green); color: var(--green); background: var(--white); }

.cite__rows { display: flex; flex-direction: column; }
.cite__row {
  display: grid; grid-template-columns: 7rem 1fr auto; gap: 2.4rem; align-items: start;
  padding-block: 2.2rem; border-bottom: 1px solid var(--stroke);
}
.cite__row:first-child { padding-top: 0; }
.cite__style { font-size: 1.8rem; font-weight: 500; color: var(--date); text-align: right; line-height: 2.8rem; }
.cite__text { font-size: 2rem; line-height: 1.4; overflow-wrap: anywhere; user-select: all; }
.cite__copy {
  font-size: 1.6rem; font-weight: 500; text-transform: uppercase; padding: .6rem 1.2rem; border-radius: .8rem;
  border: 1px solid var(--stroke); color: var(--ink); white-space: nowrap; transition: border-color .2s, color .2s;
}
.cite__copy:hover { border-color: var(--ink); }
.cite__exports { margin-top: 2.8rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 3.2rem; }
.cite__export { font-size: 2rem; color: var(--green); border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
.cite__export:hover { color: var(--green-deep); border-color: currentColor; }
.pub__main { display: flex; gap: 6rem; align-items: stretch; }
/* колонка с текстом тянется на высоту картинки: заголовок по ее верхнему краю,
   ключевые теги по нижнему, абстракт занимает то, что осталось между ними */
.pub__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 2.4rem; }
/* заголовок не длиннее трех строк, иначе текст перерастает картинку */
.pub__title {
  font-size: 2.8rem; font-weight: 300; line-height: 1.4; text-transform: uppercase;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pub__title a:hover { color: var(--green); }
/* химические формулы и обозначения в названии не переводим в верхний регистр */
.pub__title .keep-case { text-transform: none; }
/* список авторов не длиннее трех строк, иначе текст перерастает картинку;
   полный состав остается в данных и в окне «Цитировать» */
.pub__authors {
  margin-top: 2.8rem; font-size: 2.8rem; font-weight: 500; line-height: 1.4; max-width: 97.5rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pub__desc {
  position: relative; flex: 1 1 0; min-height: 5.5rem; display: flex; gap: 1.2rem;
  align-items: flex-start; overflow: hidden; cursor: pointer;
}
.pub__desc-btn { flex: none; color: inherit; transition: transform .25s; }
.pub__desc svg { width: 3.24rem; height: 4.44rem; margin-top: -1rem; }
.pub__desc-text { max-width: 92.4rem; font-family: var(--font-alt); font-size: 2.2rem; line-height: 1.25; }
.pub__desc-text p + p { margin-top: 1.4rem; }
/* затуманивание нижней строки, пока абстракт свернут */
.pub__desc::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5.1rem; pointer-events: none;
  background: linear-gradient(0deg, var(--row-bg, #fff) 2.5%, transparent 96%);
}
.pub__desc.is-open { flex: none; overflow: visible; }
.pub__desc.is-open::after { display: none; }
.pub__desc.is-open .pub__desc-btn { transform: rotate(90deg); }
/* ключевые теги всегда в одну строку: что не поместилось, не показываем */
.pub__tags .tags { max-height: 4.2rem; overflow: hidden; }
.pub:nth-child(even) { --row-bg: var(--bg-soft); }
.pub__desc-toggle, .pub__foot, .dir-about__more, .fact__short { display: none; }
.pub__tags-title { font-size: 3.2rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.05rem; margin-bottom: 2rem; }
.pub__img {
  position: relative; flex: 0 0 58.4rem; height: 43.2rem; border-radius: var(--radius-m); overflow: hidden;
  background: linear-gradient(135deg, #cfe3d6, #3f8259);
}
.pub__img img { width: 100%; height: 100%; object-fit: cover; filter: blur(14px); transform: scale(1.1); transition: filter .35s, transform .35s; }
.pub__img::after { content: ""; position: absolute; inset: 0; background: rgba(63, 130, 89, .3); transition: opacity .35s; }
.pub__img:hover img { filter: blur(0); transform: scale(1); }
.pub__img:hover::after { opacity: .15; }
.pub__img-link {
  position: absolute; left: 3.8rem; bottom: 4.2rem; z-index: 1; display: inline-flex; align-items: center; gap: 1.8rem;
  font-size: 2.5rem; font-weight: 500; text-transform: uppercase; letter-spacing: -0.07rem; color: var(--white);
  text-decoration: underline; text-underline-offset: .5rem;
}
.pub__img-link svg { width: 3rem; height: 3rem; }
.pub__img-placeholder {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 4rem; text-align: center;
  font-size: 3.2rem; font-weight: 300; color: var(--white);
}
.pub-list.is-list .pub__img, .pub-list.is-list .pub__tags-title { display: none; }
.pub-list.is-list .pub__main { align-items: stretch; }
.pub-list.is-list .pub__title { font-size: 2.8rem; -webkit-line-clamp: unset; display: block; }
.pub-list.is-list .pub__authors { margin-top: 1.2rem; font-size: 2.4rem; max-width: none; -webkit-line-clamp: unset; display: block; }
.pub-list.is-list .pub__desc { max-height: 7rem; }
.pub-list.is-list .pub__desc.is-open { max-height: none; }
.pub-list.is-list .pub__desc-text { max-width: 152.8rem; }
.pub-list.is-list .pub__body { gap: 2.8rem; }

.more { margin-top: 6.4rem; display: flex; flex-direction: column; align-items: center; gap: 2.4rem; }
.more__count { font-size: 2rem; color: var(--date); }
.empty { padding: 8rem var(--gutter); font-size: 2.8rem; font-weight: 300; color: var(--date); }

/* фильтры */
.filters { padding: 4rem var(--gutter); border-bottom: 2px solid var(--stroke); display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; }
.field {
  height: 6.6rem; padding: 0 2rem; border: 2px solid var(--stroke); border-radius: 1.2rem; background: var(--white);
  font: inherit; font-size: 2rem; color: var(--ink); transition: border-color .2s;
}
.field:hover, .field:focus { border-color: var(--green); outline: none; }
.field--search { flex: 1 1 40rem; display: flex; align-items: center; gap: 1.4rem; padding: 0 2rem; }
.field--search svg { width: 2.2rem; height: 2.2rem; color: var(--date); }
.field--search input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; color: inherit; background: none; }
select.field {
  flex: 0 1 30rem; min-width: 20rem; appearance: none; -webkit-appearance: none; padding-right: 5rem; cursor: pointer;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%232C2F36' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 2rem center / 1.4rem no-repeat;
}
.filters__reset { font-size: 2rem; color: var(--date); padding: 1rem; }
.filters__reset:hover { color: var(--green); }

/* ---------- новости ---------- */
.featured { padding-top: 12rem; }
/* размеры из макета: карточка 1690x559, фото 900 (скруглено только слева, обрезает карточка),
   текстовая часть 799 с полями 40/80, между блоками 54, между заголовком и текстом 24 */
.featured__card {
  /* высота из макета это минимум: с длинным заголовком карточка растет, а не режет текст */
  margin-top: 6rem; display: grid; grid-template-columns: 90fr 79fr; grid-template-rows: minmax(0, 1fr); min-height: 55.9rem;
  background: var(--bg-soft); border-radius: var(--radius-l); overflow: hidden; text-align: left; width: 100%;
  transition: box-shadow .25s;
}
.featured__card:hover { box-shadow: 0 1.6rem 4rem rgba(37, 67, 57, .12); }
.featured__card.no-image { grid-template-columns: 1fr; height: auto; }
.modal__dialog.no-image { grid-template-columns: 1fr; max-width: 100rem; }
.modal__dialog.no-image .modal__img { display: none; }
/* в файле уже тот же кадр, что в Figma (оригинал в data/figma/source-img), поэтому cover без смещения */
.featured__img { position: relative; background: #d9e4dc; }
.featured__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.featured__body { padding: 4rem 8rem; display: flex; flex-direction: column; justify-content: center; gap: 5.4rem; }
.featured__main { display: flex; flex-direction: column; gap: 2.4rem; }
/* в макете заголовок 666px шире поля 639px, заходит в правый отступ */
.featured__title {
  font-size: 4.4rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.05rem; margin-right: -2.7rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* анонс не длиннее 4 строк, как в макете: полный текст открывается в окне новости */
.featured__text {
  font-family: var(--font-alt); font-size: 2.4rem; font-weight: 300; line-height: 1.2; max-width: 51.5rem;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.featured .link-arrow { align-self: flex-start; }
.news-all { padding-top: 12rem; }
.news-all .news__grid { margin-top: 6rem; gap: 6rem 5rem; }

/* попап. Размеры из макета (1690×990), в единицах --u: 1 --u = 10px макета.
   --u не больше 1rem и такое, чтобы попап высотой 99 --u влез в окно с полями 3rem сверху и снизу. */
.modal {
  --u: min(1rem, calc((100vh - 6rem) / 99));
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 3rem var(--gutter);
}
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); animation: fade .2s; }
.modal__dialog {
  position: relative; width: 100%; max-width: calc(169 * var(--u)); max-height: calc(100vh - 6rem);
  display: grid; grid-template-columns: calc(90 * var(--u)) 1fr; grid-template-rows: minmax(0, 1fr);
  background: var(--bg-soft); border-radius: var(--radius-l); overflow: hidden;
  animation: pop .25s cubic-bezier(.2, .8, .2, 1);
}
.modal__scroll { display: contents; }
.modal__img { position: relative; background: #d9e4dc; min-height: calc(40 * var(--u)); }
.modal__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.modal__body {
  min-height: 0; overflow-y: auto; padding: calc(4 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u));
  display: flex; flex-direction: column; gap: calc(2.4 * var(--u));
  scrollbar-width: thin; scrollbar-color: #c3d4c7 transparent;
}
/* длинный текст новости прокручивается внутри окна. Чтобы это было видно, нижний край
   текста затуманивается, а в конце прокрутки подсказка убирается (класс ставит main.js) */
.modal__dialog::after {
  content: ""; position: absolute; left: calc(90 * var(--u)); right: 0; bottom: 0; height: calc(7 * var(--u));
  background: linear-gradient(rgba(243, 247, 243, 0), var(--bg-soft));
  pointer-events: none; opacity: 1; transition: opacity .2s;
}
.modal__dialog.no-image::after, .modal__dialog.at-end::after { opacity: 0; }
.modal__dialog.no-image::after { left: 0; }
.modal__meta { min-height: calc(4.1 * var(--u)); }
.modal__close {
  position: absolute; top: calc(4 * var(--u)); right: calc(8 * var(--u));
  width: calc(4.1 * var(--u)); height: calc(4.1 * var(--u)); border-radius: calc(.8 * var(--u));
  background: var(--ink); color: var(--mint); display: grid; place-items: center; transition: background-color .2s;
  z-index: 2;
}
.modal__close:hover { background: var(--green); }
.modal__close svg { width: calc(2 * var(--u)); height: calc(2 * var(--u)); }
.modal .tag { font-size: calc(1.8 * var(--u)); padding: calc(.8 * var(--u)) calc(1.6 * var(--u)); }
.modal .news-meta__date { font-size: calc(2 * var(--u)); }
/* английская дата с месяцем словом (7 Sep 2026) длиннее цифровой и с заглавной буквой,
   рядом с тегом она казалась крупнее русской, поэтому на английских страницах на 10% мельче */
@media (min-width: 761px) {   /* на телефоне мельче 12 px нельзя, там размер как у русской */
  :root[lang="en"] .news-meta__date { font-size: 1.8rem; }
  :root[lang="en"] .modal .news-meta__date { font-size: calc(1.8 * var(--u)); }
  :root[lang="en"] .pub__date { font-size: .9em; }
}
.modal__title { font-size: calc(4.8 * var(--u)); font-weight: 500; line-height: 1.2; letter-spacing: -0.05rem; padding-right: calc(4 * var(--u)); }
.modal__text {
  font-family: var(--font-alt); font-size: calc(2.4 * var(--u)); font-weight: 300; line-height: 1.2;
  display: flex; flex-direction: column; gap: calc(1.5 * var(--u));
}
.modal__text blockquote {
  margin: 0; padding-left: calc(2 * var(--u)); border-left: 3px solid var(--green);
  display: flex; flex-direction: column; gap: calc(2 * var(--u));
}
.modal__text .note { font-style: italic; }
/* Интервью читается как разговор: вводка крупнее остального текста, вопрос набран
   фирменным зеленым и отбит сверху, ответ идет обычным абзацем с отступом слева,
   так видно, где чья реплика. */
.nb { white-space: nowrap; }
.modal__text .intro { font-size: calc(2.6 * var(--u)); line-height: 1.25; }
.modal__text .q {
  font-weight: 500; color: var(--green); margin-top: calc(2.4 * var(--u));
  padding-top: calc(2.4 * var(--u)); border-top: 1px solid rgba(63, 130, 89, .25);
}
.modal__text .intro + .q { margin-top: calc(1.2 * var(--u)); }
.modal__text .a { padding-left: calc(2.4 * var(--u)); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(2rem) scale(.98); } }

.toast {
  position: fixed; left: 50%; bottom: 3rem; z-index: 200; transform: translate(-50%, 2rem); opacity: 0;
  padding: 1.6rem 2.8rem; border-radius: 1.2rem; background: var(--ink); color: var(--mint); font-size: 2rem;
  transition: opacity .25s, transform .25s; pointer-events: none;
}
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* ---------- страница «не найдено» (404.html) ----------
   Отдельная от остальных страниц: без шапки и подвала, все стоит по центру одного экрана.
   Фон и типографика те же, что на первом экране сайта. */
/* Страница целиком помещается в окно, в том числе в широкое и невысокое: размеры взяты через
   min() от обычного значения и от высоты окна, поэтому в низком окне сжимается верстка, а не шрифты
   до нечитаемого. Прокрутки нет — единственный экран. */
.oops {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  padding: min(6rem, 6vh) var(--gutter) min(5rem, 5vh); color: var(--mint); background: #0d1a14;
}
.oops__bg { position: absolute; inset: 0; overflow: hidden; }
.oops__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(7.5px); transform: scale(1.06); }
.oops__bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 70% at 50% 45%, rgba(9, 9, 11, .35) 0%, rgba(9, 9, 11, .72) 100%);
}
.oops__inner, .oops__foot { position: relative; z-index: 1; }
/* логотип стоит там же, где в шапке остальных страниц: левый верхний угол, те же поля */
.oops__logo { position: absolute; z-index: 2; top: min(4rem, 4vh); left: var(--gutter); }
.oops__logo img { width: calc(30.5rem * var(--logo-k)); height: auto; }
.oops__inner {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding-block: min(12rem, 12vh) min(4rem, 4vh);
}

/* Мост из логотипа разведен посередине. Половины разъезжаются при загрузке, а при наведении
   на «на главную» сходятся обратно. Заливка backwards, а не forwards: после анимации у половины
   снова обычное значение, иначе анимация перебила бы наведение. */
.bridge { width: min(30rem, 26vh); max-width: 62vw; height: auto; margin: 0 0 min(5.2rem, 5.5vh); color: var(--mint); }
.bridge__half { transform-box: view-box; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.bridge__half--left { transform: translateX(-10px); }
.bridge__half--right { transform: translateX(10px); }
@keyframes bridge-part { from { transform: none; } }
.bridge__half--left, .bridge__half--right { animation: bridge-part 1.1s cubic-bezier(.2, .7, .2, 1) .35s backwards; }
.oops:has(.oops__home:hover) .bridge__half { transform: none; }

.oops__title {
  font-size: min(8.8rem, 9.4vh); font-weight: 400; line-height: 1.02; letter-spacing: -0.02em;
  text-box: trim-both cap alphabetic;
}
.oops__text { margin-top: min(3.6rem, 4vh); font-size: min(2.8rem, 3.1vh); font-weight: 300; line-height: 1.45; max-width: 66rem; }
.oops__actions { margin-top: min(5.6rem, 6vh); display: flex; align-items: center; gap: 4rem; flex-wrap: wrap; justify-content: center; }
.oops__link {
  font-size: 2rem; font-weight: 500; text-transform: uppercase; letter-spacing: -0.05rem;
  border-bottom: 2px solid rgba(242, 253, 251, .35); padding-bottom: .4rem; transition: border-color .2s, color .2s;
}
.oops__link:hover { color: var(--white); border-color: var(--white); }
.oops__foot { font-size: 1.8rem; text-transform: uppercase; color: rgba(242, 253, 251, .55); }

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

/* ---------- планшеты и телефоны ----------
   Телефонная верстка включается на ширине до 760 px и еще на любом невысоком экране до 1100 px:
   так телефон в альбомной (iPhone 16, Pixel, Galaxy шириной 830–956 px и высотой 370–440 px)
   получает телефонную верстку, а не планшетную, рассчитанную на высокий экран.
   Поправки именно под альбомную стоят отдельным блоком ниже («телефон в альбомной»). */
@media (max-width: 1228px) {
  .news-card__title br, .featured__title br { display: none; }
  /* базовый размер уперся в минимум, а колонки продолжают сужаться: заголовок мельче
     и карточек в ряду две, иначе заголовок перестает помещаться в три строки */
  .news-card__title { font-size: 2.4rem; }
  .news__grid, .news-all .news__grid { grid-template-columns: 1fr 1fr; }
  .featured__card { grid-template-columns: 1fr; }
  .featured__img { height: 40rem; }
  .featured__title { font-size: 3.6rem; }
}

@media (max-width: 1100px) {
  /* на узком экране перенос, заданный владельцем в подзаголовке, только мешает:
     строка и так короткая, текст переносится сам */
  .hero__subtitle br { display: none; }
  /* без ручного переноса строки подзаголовка выравниваются по длине: «Мост» не остается один */
  .hero__subtitle { text-wrap: balance; }
  html { font-size: 6.4px; }
  :root { --gutter: 4rem; --section-gap: 12rem; }
  .site-header__right { gap: 1.6rem; }
  .nav__item { font-size: 2rem; padding: 0 .8rem; }
  /* РУ/EN тем же кеглем, что пункты меню слева */
  .lang__btn { font-size: 2rem; }
  .ind-grid { grid-template-columns: 1fr 1fr; }
  .ind-card:nth-child(1) { grid-column: 1; }
  .ind-card:nth-child(2) { grid-column: 2; }
  .ind-photo { grid-column: 1 / -1; }
  .ind-card--wide { grid-column: 1 / -1; }
  .education { flex-direction: column; }
  .education__photo { flex: none; height: 60rem; }
  .education__body { flex: none; min-height: 0; }
  .education .section-head { margin-top: 0; }
  .education .btn { margin-top: 4.8rem; }
  .br-desk { display: none; }
  .education__text { white-space: normal; }
  .news__grid { grid-template-columns: 1fr 1fr; }
  /* на планшете колонка новости месяца узкая, поэтому заголовок мельче: иначе он выходит
     за три строки, а мера в три строки одна для всех экранов */
  .featured__title { font-size: 3.2rem; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; row-gap: 6rem; }
  .pub__img { flex-basis: 44rem; height: 34rem; }
  /* новость прокручивается целиком вместе с фото, как обычная страница, крестик стоит на месте.
     Размеры окна на планшете и телефоне не зависят от высоты экрана (--u = 1rem),
     иначе в невысоком окне текст мельчал до нечитаемого */
  .modal { --u: 1rem; }
  .modal__dialog { display: flex; flex-direction: column; }
  .modal__dialog::after { left: 0; }
  .modal__scroll { display: block; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-radius: inherit; }
  .modal__img { height: auto; min-height: 0; aspect-ratio: 3 / 2; }
  .modal__body { overflow: visible; }
}

@media (max-width: 760px), (max-width: 1100px) and (max-height: 500px) {
  html { font-size: 6.25px; }
  :root { --gutter: 2.6rem; --section-gap: 9.6rem; --hero-edge: 4rem; }
  body { font-size: 2.56rem; }
  .h2 { font-size: 5.6rem; }
  .lead { font-size: 2.72rem; }
  .section-head--row { flex-direction: column; align-items: flex-start; gap: 2.4rem; }

  .site-header__logo img { width: calc(26rem * var(--logo-k)); }

  .hero, .hero--short { height: auto; min-height: 100svh; }
  .hero__content, .hero--home .hero__content, .hero--short .hero__content { position: relative; left: auto; right: auto; top: auto; bottom: auto; padding: 24rem var(--gutter) var(--hero-edge); min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; }
  .hero--home .hero__content { top: auto; }
  .hero__back { margin-bottom: 4rem; }
  .hero__title { font-size: 7.2rem; line-height: 1.02; }
  .hero__bottom, .hero--home .hero__bottom, .hero--short .hero__bottom { position: static; margin-top: 4rem; flex-direction: column; align-items: flex-start; gap: 4rem; }
  .hero__subtitle { font-size: 2.8rem; }

  .btn { height: 7.2rem; font-size: 2.24rem; }
  .btn__icon { width: 5rem; height: 5rem; }

  .about { gap: 8rem; }
  .metrics { flex-direction: column; gap: 6rem; }
  .metric, .metric:nth-child(n) { width: auto; gap: 2.4rem; }
  .metric__title { font-size: 3.6rem; margin-bottom: 1.6rem; }
  .metric__text { font-size: 2.4rem; }

  .science { padding-block: 8rem; }
  .science__head { flex-direction: column; align-items: flex-start; }
  .slider-arrows { display: none; }
  .industry__head { flex-direction: column; align-items: flex-start; gap: 2.4rem; }  /* как у «Все новости» */
  .carousel { margin-top: 2rem; gap: 1.6rem; }
  .cite__row { grid-template-columns: 1fr; gap: 1rem; }
  .cite__style { text-align: left; line-height: 1.4; }
  .cite__copy { justify-self: start; }
  .sheet { width: 100vw; max-width: none; max-height: 90svh; margin: auto 0 0; border-radius: var(--radius-l) var(--radius-l) 0 0; }
  .sheet__head { padding: 2.4rem 2.6rem 1.6rem; }
  .sheet__body { padding: 2.6rem 2.6rem 4rem; }
  .write__mail { font-size: 3rem; overflow-wrap: anywhere; }
  .dir-card { flex-basis: 84vw; height: auto; }
  .dir-card__top { height: auto; gap: 4rem; }
  .dir-card__title { font-size: 3.6rem; }
  .dir-card__img { height: 36rem; }
  .square-btn { width: 7rem; height: 7rem; }

  .timeline { margin-top: 6rem; }
  .timeline__line { display: none; }
  .timeline__steps { grid-template-columns: 1fr; gap: 2.4rem; margin-top: 0; border-left: 3px solid var(--stroke); padding-left: 3rem; }
  .timeline__steps li { position: relative; font-size: 2.72rem; }
  .timeline__steps li:nth-child(2) { margin-left: 0; }
  .timeline__steps li::before { content: ""; position: absolute; left: -4.3rem; top: .6rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--c); }
  .timeline__steps li:nth-child(1) { --c: #e2ebe4; }
  .timeline__steps li:nth-child(2) { --c: #9db3a4; }
  .timeline__steps li:nth-child(3) { --c: #708d79; }
  .timeline__steps li:nth-child(4) { --c: #2b5639; }
  .ind-grid { grid-template-columns: 1fr; margin-top: 6rem; }
  .ind-card, .ind-card:nth-child(n), .ind-card--wide, .ind-photo { grid-column: 1; min-height: 0; padding: 3.6rem 3.2rem; gap: 3.6rem; }
  .ind-photo { min-height: 32rem; }
  .ind-card__title, .ind-photo__title { font-size: 3.6rem; }
  .bullets li { font-size: 2.56rem; }

  .education { padding: 8rem var(--gutter); gap: 5rem; }
  .education__photo { height: 50rem; }
  .education__sub { font-size: 3rem; }
  .education__text { margin-top: 4.8rem; }
  .education .facts { margin-top: 4.8rem; }
  .facts { grid-template-columns: 1fr; }
  .fact, .fact:first-child { padding: 2.8rem 0; }
  .fact + .fact { border-left: 0; border-top: 2px solid var(--stroke); }

  .news__grid, .news-all .news__grid { grid-template-columns: 1fr; gap: 3.2rem; margin-top: 5rem; }
  .news-card__img { height: 38rem; }
  .news-card__body { padding: 0 3.2rem 3.2rem; gap: 3rem; }
  .news-card__title { font-size: 3rem; }
  .news-card__text { font-size: 2.4rem; }

  .site-footer__logo img { width: calc(30rem * var(--logo-k)); }
  .site-footer__cols { grid-template-columns: 1fr; margin-top: 6rem; }
  .f-col { font-size: 2.56rem; }
  .site-footer__bottom { flex-direction: column; font-size: 2rem; margin-top: 6rem; }

  .dir-about__grid { flex-direction: column; margin-top: 4rem; }
  .dir-about__side { flex: none; }
  .dir-about__text { font-size: 2.56rem; }
  .dir-about__main { gap: 4rem; }
  .dir-cta { flex-direction: column; align-items: flex-start; gap: 2.8rem; padding: 3.2rem 2.8rem; }
  .dir-cta__title { font-size: 3rem; }
  .dir-cta__text { font-size: 2.4rem; }
  .people-head { margin-top: 8rem; }
  .people { margin-top: 3.2rem; gap: 1.6rem; -webkit-mask-image: none; mask-image: none; }
  .person { flex-basis: 72vw; height: 52rem; }

  .view-toggle { gap: 1.2rem; margin-top: 4rem; }
  .view-toggle__btn { height: 7.2rem; font-size: 2.24rem; }
  .pub__meta { flex-direction: column; align-items: flex-start; }
  .pub__main { flex-direction: column; align-items: stretch; gap: 4rem; }
  .pub__img { flex: none; height: 36rem; }
  .pub__img.is-empty { display: none; }
  .pub__title { font-size: 2.72rem; }
  .pub__authors, .pub-list.is-list .pub__authors { font-size: 2.56rem; }
  .pub__desc svg { display: none; }
  .pub__desc p { font-size: 2.56rem; }
  .pub__tags-title { font-size: 3rem; }

  .filters { flex-direction: column; align-items: stretch; }
  .field--search, select.field { flex: none; }
  .field { font-size: 2.56rem; height: 7.2rem; }

  .featured { padding-top: 9.6rem; }
  .featured__card { grid-template-columns: 1fr; height: auto; }
  .featured__img { height: 44rem; }
  .featured__body { padding: 4rem 3.2rem; }
  .featured__title { font-size: 3.4rem; }
  .featured__text { font-size: 2.56rem; }

  .modal { padding: 0; align-items: end; }
  .modal__dialog { max-height: 92svh; border-radius: var(--radius-l) var(--radius-l) 0 0; }
  .modal__img { height: 30svh; }
  .modal { --u: .8rem; }
  .modal__body { padding: 4rem 3.2rem 5rem; }
  .modal__close { top: 4rem; right: 3.2rem; }
  .modal__title { font-size: 3.6rem; }
  .modal__text { font-size: 2.56rem; }

  .oops { padding: 4rem var(--gutter); }
  .oops__logo { top: var(--hero-edge); }
  .oops__logo img { width: calc(26rem * var(--logo-k)); }
  .oops__inner { padding-block: 10rem 4rem; }
  .bridge { width: 24rem; margin-bottom: 4.4rem; }
  .oops__title { font-size: 5.6rem; }
  .oops__text { font-size: 2.56rem; margin-top: 2.8rem; }
  .oops__actions { margin-top: 4.4rem; gap: 3.2rem; flex-direction: column; }
  .oops__foot { font-size: 2rem; }
}

/* ---------- меню бургером ----------
   На телефоне и на узком планшете (iPad Mini в книжной, раскрытые складные до 900 px): полная
   строка меню рядом с логотипом там не помещается и сжимает логотип до 100 px (24.09.2026) */
@media (max-width: 900px), (max-width: 1100px) and (max-height: 500px) {
  .site-header { align-items: center; }
  .burger {
    display: grid; place-items: center; width: 6.4rem; height: 6.4rem; border-radius: 1.2rem;
    background: rgba(242, 253, 251, .25); color: var(--mint);
  }
  .burger svg { width: 3.2rem; height: 3.2rem; }
  .site-header__right {
    display: none; position: absolute; top: calc(100% + 1.6rem); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 1.2rem; padding: 1.6rem; border-radius: var(--radius-m);
    background: rgba(20, 35, 28, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  }
  .site-header.is-open .site-header__right { display: flex; animation: menu-in .22s cubic-bezier(.2, .7, .2, 1); }
  .nav__bar { flex-direction: column; background: none; padding: 0; backdrop-filter: none; }
  .nav__item { font-size: 2.56rem; height: 7.2rem; justify-content: space-between; }
  .nav__dropdown { position: static; flex-direction: column; gap: 1.2rem; margin-top: .8rem; background: none; padding: 0; backdrop-filter: none; }
  .nav__card { min-height: 9rem; font-size: 2.2rem; }
  .lang { align-self: flex-start; background: rgba(242, 253, 251, .15); }

  /* меню: пункты строками с разделителями, «Наука» раскрывается прямо под собой,
     текущая страница отмечена точкой, а не плашкой */
  .burger { width: 7rem; height: 7rem; }
  .burger svg + svg, .site-header.is-open .burger svg:first-child { display: none; }
  .site-header.is-open .burger svg + svg { display: block; width: 2.8rem; height: 2.8rem; }
  .site-header__right { gap: 0; padding: .8rem 2.8rem 2.8rem; }
  .nav { display: flex; flex-direction: column; }
  .nav__bar { display: contents; }
  .nav__bar > :nth-child(1) { order: 1; }
  .nav__bar > :nth-child(2) { order: 2; }
  /* подменю встает прямо под своим пунктом: «Наука» 2, ее подменю 3, «Индустрия» 4, ее подменю 5 */
  .nav__dropdown--science { order: 3; }
  .nav__bar > :nth-child(3) { order: 4; }
  .nav__dropdown--industry { order: 5; }
  .nav__bar > :nth-child(4) { order: 6; }
  .nav__bar > :nth-child(5) { order: 7; }
  .nav__item {
    position: relative; height: 8rem; padding: 0; border-radius: 0; font-size: 2.56rem;
    border-bottom: 1px solid rgba(242, 253, 251, .14);
  }
  .nav__item:hover, .nav__item.is-active, .nav__item[aria-expanded="true"] { background: none; }
  .nav__item.is-active::before {
    content: ""; position: absolute; left: -1.8rem; top: 50%; width: .9rem; height: .9rem; margin-top: -.45rem;
    border-radius: 50%; background: #8fd6aa;
  }
  .nav__item svg { width: 2.2rem; height: 1.8rem; }
  .nav__dropdown { margin: 0; padding: 1.2rem 0 2rem 2.4rem; gap: 1.2rem; border-radius: 0; border-bottom: 1px solid rgba(242, 253, 251, .14); }
  .nav__card {
    min-height: 0; height: 6.4rem; padding: 0; border-radius: 0; align-items: center;
    background: none; color: rgba(242, 253, 251, .85); font-size: 2.4rem; font-weight: 400; text-transform: none;
  }
  .nav__card br { display: none; }
  .nav__card:hover { background: none; color: var(--white); }
  .nav__card .card-arrow { align-self: center; width: 4.4rem; height: 4.4rem; background: rgba(242, 253, 251, .12); }
  .lang { align-self: flex-start; height: auto; margin-top: 3.2rem; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .lang__inner { gap: 1.2rem; padding: 0; }
  .lang__divider { display: none; }
  .lang__btn { padding: 1.4rem 2.4rem; border-radius: 1.2rem; font-size: 2.2rem; background: rgba(242, 253, 251, .12); color: var(--mint); }
  .lang__btn.is-active { background: var(--mint); color: var(--ink); }
  .lang__btn[aria-disabled="true"] { opacity: .5; }
}

/* ---------- доводка телефонов в книжной ориентации (23.09.2026, по замечаниям владельца) ---------- */
@media (max-width: 760px), (max-width: 1100px) and (max-height: 500px) {
  /* длинное слово в названии направления («микротехнология») не должно упираться в край экрана */
  [data-page="direction"] .hero__title { font-size: min(7.2rem, 9.6vw); }

  /* карусель направлений: карточки одной высоты без пустоты снизу, цифры у всех на одной линии,
     промежуток равен полю страницы, поэтому от соседней карточки слева не торчит край */
  .carousel { gap: var(--gutter); }
  /* картинки у всех карточек одной высоты: лишнее место при коротком названии
     уходит между заголовком и цифрами, цифры у всех стоят на одной линии над картинкой */
  .dir-card__top { flex: 1; justify-content: space-between; }
  .dir-card__img { flex: none; height: 36rem; }

  /* этапы работы (вариант «полоса и строки», выбран владельцем 23.09.2026): сверху полоса
     из четырех отрезков, как линия этапов на компьютере, под ней этапы строками через тонкие линии */
  .timeline__bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: .64rem; }
  .timeline__bar i { height: 1rem; border-radius: .5rem; }
  .timeline__bar i:nth-child(1) { background: #e2ebe4; }
  .timeline__bar i:nth-child(2) { background: #9db3a4; }
  .timeline__bar i:nth-child(3) { background: #708d79; }
  .timeline__bar i:nth-child(4) { background: #2b5639; }
  .timeline__steps { margin-top: 1.6rem; gap: 0; border-left: 0; padding-left: 0; counter-reset: step; }
  .timeline__steps li {
    counter-increment: step; display: grid; grid-template-columns: 9.3rem 1fr; align-items: baseline;
    padding-block: 2.24rem; border-bottom: 1px solid var(--stroke);
    font-size: 2.72rem; line-height: 1.25; color: var(--green-deep);
  }
  .timeline__steps li br { display: none; }
  .timeline__steps li::before {
    content: "этап " counter(step); position: static; width: auto; height: auto; border-radius: 0; background: none;
    font-size: 2rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--g);
  }
  .timeline__steps li:nth-child(1) { --g: #7c8a81; }
  .timeline__steps li:nth-child(2) { --g: #708d79; }
  .timeline__steps li:nth-child(3) { --g: #3f8259; }
  .timeline__steps li:nth-child(4) { --g: var(--green-deep); }

  /* «Оборудование» уходит в конец, после «Производства микро- и наноструктур» */
  .ind-photo { order: 1; }

  /* образование: заголовок и трек, под ними фото, дальше текст, факты и кнопка */
  .education { gap: 4.8rem; }
  .education__body { display: contents; }
  .education__photo { order: 1; }
  .education__text { order: 2; margin-top: 0; }
  .education .facts { order: 3; margin-top: 0; }
  .education .btn { order: 4; margin-top: 0; }

  /* факты об обучении в одну строку из трех колонок, как на компьютере */
  .facts { grid-template-columns: repeat(3, 1fr); }
  .fact, .fact:first-child { padding: 2.8rem 0 2.8rem 2rem; }
  .fact:first-child { padding-left: 0; }
  .fact + .fact { border-top: 0; border-left: 2px solid var(--stroke); }
  .fact__label { font-size: 2rem; line-height: 1.3; min-height: 2.6em; margin-bottom: .8rem; }
  .fact__value { font-size: 2.56rem; }
  .fact__note { font-size: 2rem; }

  /* подвал: кнопка «написать» отделена от почты заметнее */
  .f-contacts { gap: 5rem; }

  /* новости: «читать» слева у всех карточек, как у новости месяца */
  .news-card .link-arrow { align-self: flex-start; }

  /* окно новости: фото во всю ширину в пропорции 3:2, прокручивается вместе с текстом;
     крестик крупный и стоит в углу окна поверх фото */
  .modal { --u: 1rem; }
  .modal__img { height: auto; }
  .modal__close { top: 2rem; right: 2rem; width: 7rem; height: 7rem; border-radius: 1.4rem; background: rgba(44, 47, 54, .82); }
  .modal__close svg { width: 2.6rem; height: 2.6rem; }
  .modal__dialog.no-image .modal__title { padding-right: 8rem; }

  /* страница направления: сначала цифры сеткой три на два, потом текст (первый абзац,
     остальное по кнопке «читать полностью»), облако ключевых слов на телефоне не показываем */
  .dir-about__tags { display: none; }
  .dir-about__side { order: -1; }
  /* от заголовка до цифр отступ больше, чем от цифр до текста (решение владельца 23.09.2026); под каждую подпись
     две строки, поэтому ряды цифр одной высоты, даже если подпись встала в одну строку */
  .dir-about__grid { margin-top: 8rem; gap: 3.2rem; }
  .dir-stats { grid-template-columns: repeat(3, 1fr); column-gap: 2rem; row-gap: 3.2rem; }
  .dir-stats .stat__value { min-width: 0; font-size: 3.6rem; line-height: 1; }
  .dir-stats .stat__label { margin-top: 1rem; font-size: 2rem; line-height: 1.3; white-space: normal; min-height: 2.6em; }
  .dir-about__text:not(.is-open) p + p { display: none; }
  .dir-about__more {
    display: inline-flex; align-self: flex-start; align-items: center; gap: 1.2rem; margin-top: -2.4rem; padding-block: 1.2rem;
    font-size: 2.24rem; font-weight: 500; text-transform: uppercase; color: var(--green);
  }
  .dir-about__more svg { width: 1.8rem; height: 1.4rem; transition: transform .2s; }
  .dir-about__more[aria-expanded="true"] svg { transform: rotate(180deg); }
  .dir-about__more-close, .dir-about__more[aria-expanded="true"] .dir-about__more-open { display: none; }
  .dir-about__more[aria-expanded="true"] .dir-about__more-close { display: inline; }

  /* фильтры публикаций: сетка в две колонки, поля не шире экрана.
     Раньше форма была колонкой с переносом, и все поля тянулись по самому длинному
     названию направления в списке, уезжая за правый край */
  .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .field--search, .filters [name=direction] { grid-column: 1 / -1; }
  select.field { min-width: 0; width: 100%; padding-left: 1.8rem; padding-right: 4.4rem; background-position: right 1.6rem center; text-overflow: ellipsis; }
  .field--search input { text-overflow: ellipsis; }
  .filters__reset { grid-column: 1 / -1; justify-self: end; font-size: 2.24rem; padding: 1.2rem 0; }

  /* карточка публикации: сверху картинка (или плашка с журналом), «Цитировать» внизу,
     под абстрактом явная кнопка «весь абстракт» */
  /* порядок: дата и журнал, название с авторами, картинка, абстракт, теги, «Цитировать» */
  .pub { gap: 3.2rem; }
  .pub__main, .pub__body { display: contents; }
  .pub__body > div:first-child { order: 1; }
  .pub__img, .pub__img.is-empty { display: block; order: 2; height: 36rem; }
  .pub__desc { order: 3; }
  .pub__desc-toggle { order: 4; }
  .pub__tags { order: 5; }
  .pub__foot { order: 6; }
  .pub__meta .pub__cite { display: none; }
  .pub__foot { display: flex; }
  .pub__foot .pub__cite {
    height: 7rem; padding: 0 2.4rem; gap: 1.6rem; border: 2px solid var(--stroke); border-radius: 1.2rem;
    font-size: 2.24rem; font-weight: 500; text-transform: uppercase;
  }
  .pub__foot .pub__cite svg { padding: 0; margin: 0; background: none; }
  .pub__desc { flex: none; max-height: 12.8rem; min-height: 0; }
  .pub__desc-btn { display: none; }
  .pub__desc.is-open { max-height: none; }
  .pub__desc-text { font-size: 2.56rem; }
  .pub__desc-toggle {
    display: inline-flex; align-self: flex-start; align-items: center; gap: 1.2rem; margin-top: -1.2rem; padding-block: 1.2rem;
    font-size: 2.24rem; font-weight: 500; text-transform: uppercase; color: var(--green);
  }
  .pub__desc-toggle svg { width: 1.8rem; height: 1.4rem; transition: transform .2s; }
  .pub__desc-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .pub__desc-less, .pub__desc-toggle[aria-expanded="true"] .pub__desc-more { display: none; }
  .pub__desc-toggle[aria-expanded="true"] .pub__desc-less { display: inline; }
  .pub__desc.is-short + .pub__desc-toggle { display: none; }
  .pub__desc.is-short::after { display: none; }
}

/* ---------- телефон в альбомной ориентации (23.09.2026, по замечаниям владельца) ----------
   Экран широкий и низкий: 667–956 px в ширину и 370–440 px в высоту. Поверх телефонной верстки
   раскладываем блоки в строку и ничего не растягиваем на всю ширину. */
@media (max-width: 1100px) and (max-height: 500px) and (orientation: landscape) {
  /* первый экран целиком в окне: шапка, заголовок, подзаголовок и кнопка «написать» */
  .hero__content, .hero--home .hero__content, .hero--short .hero__content { padding-top: 15rem; }
  .hero__title { font-size: 6rem; }
  [data-page="direction"] .hero__title { font-size: 5.6rem; }
  .hero__back { margin-bottom: 2.4rem; }
  .hero__bottom, .hero--home .hero__bottom, .hero--short .hero__bottom {
    flex-direction: row; align-items: flex-end; justify-content: space-between; margin-top: 3.2rem; gap: 4rem;
  }
  .hero__subtitle { font-size: 2.56rem; max-width: 88rem; }

  /* цифры центра в одну строку */
  .metrics { flex-direction: row; gap: 4rem; }
  .metric__title { font-size: 2.8rem; white-space: nowrap; }
  .metric__text { font-size: 2.24rem; text-wrap: balance; }

  /* карточки направлений и команды той же ширины, что на телефоне в книжной, без растяжения */
  .dir-card { flex-basis: 50.4rem; }
  .dir-card { gap: 2.4rem; padding-top: 2.8rem; }
  .dir-card__top { gap: 2.4rem; }
  .dir-card__title { font-size: 3.2rem; }
  .dir-card__img { height: 24rem; }
  .person { flex-basis: 43.2rem; height: 46rem; }

  /* этапы как на компьютере: линия с точками и четыре колонки */
  .timeline__bar { display: none; }
  .timeline__line { display: block; }
  .timeline__steps { grid-template-columns: repeat(4, 1fr); margin-top: 2.4rem; gap: 0; border-left: 0; padding-left: 0; }
  .timeline__steps li { display: block; padding: 0 1.6rem 0 0; border-bottom: 0; font-size: 2.4rem; line-height: 1.25; }
  .timeline__steps li::before { content: none; }
  .timeline__steps li br { display: inline; }

  /* новости: фото слева, текст справа, кадр не режет лица */
  .news__grid, .news-all .news__grid { grid-template-columns: 1fr; }
  .news-card { flex-direction: row; gap: 0; }
  .news-card__img { flex: 0 0 42%; height: auto; min-height: 30rem; }
  .news-card__body { padding: 3.2rem; gap: 2.4rem; }
  .featured__card { grid-template-columns: 42fr 58fr; }
  /* фото новости месяца скруглено со всех сторон, как у карточек в списке */
  .featured__img { height: auto; min-height: 36rem; border-radius: var(--radius-l); overflow: hidden; }

  /* окно новости как на компьютере: фото слева в своем почти квадратном кадре (лица целиком),
     текст справа прокручивается отдельно; крестик в углу над текстом */
  .modal__dialog { display: grid; grid-template-columns: 40% 1fr; grid-template-rows: minmax(0, 1fr); height: 92svh; }
  .modal__scroll { display: contents; overflow: visible; }
  .modal__img { aspect-ratio: auto; height: auto; }
  .modal__body { min-height: 0; overflow-y: auto; padding: 3.2rem 3.2rem 4rem; }
  .modal__dialog::after { left: 40%; }
  .modal__title { padding-right: 8rem; }
  .modal__dialog.no-image { grid-template-columns: 1fr; }

  /* карточка публикации: справа колонка с картинкой (или плашкой журнала) постоянной высоты
     и под ней «Цитировать», слева текст */
  .pub { display: grid; grid-template-columns: 1fr 38%; grid-template-rows: auto auto 1fr; column-gap: 3.2rem; row-gap: 2.4rem; align-items: start; }
  .pub__meta { grid-column: 1 / -1; }
  .pub__main { display: contents; }
  .pub__body { grid-column: 1; grid-row: 2 / span 2; display: flex; flex-direction: column; min-width: 0; gap: 2.4rem; }
  .pub__img, .pub__img.is-empty { grid-column: 2; grid-row: 2; height: 26rem; }
  .pub__foot { grid-column: 2; grid-row: 3; justify-content: flex-end; }
  /* в виде «список» картинки нет, «Цитировать» стоит под текстом слева */
  .pub-list.is-list .pub { grid-template-columns: 1fr; }
  .pub-list.is-list .pub__foot { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  /* ключевые теги у публикаций в альбомной не показываем (решение владельца 23.09.2026) */
  .pub__tags { display: none; }
  .pub__img-placeholder { font-size: 2.56rem; padding: 3.2rem 3.2rem 8rem; }
  .pub__img-link { left: 3.2rem; bottom: 3.2rem; font-size: 2.24rem; }

  /* стрелки у ленты направлений и команды, как на компьютере */
  .science__head, .people-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .slider-arrows { display: flex; gap: 1.2rem; }
  .slider-arrows[hidden] { display: none; }
  .square-btn { width: 6.4rem; height: 6.4rem; border-radius: 1.4rem; }
  .square-btn svg { width: 4.4rem; height: 4.4rem; }

  /* подвал в две колонки: меню и документы, ссылки и контакты */
  .site-footer__cols { grid-template-columns: 1fr 1fr; column-gap: 4.8rem; row-gap: 6rem; }
  .site-footer__bottom { flex-direction: row; justify-content: space-between; }

  /* приглашение на странице направления в строку: текст слева, кнопка справа по нижней строке текста */
  .dir-cta { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 4rem; }

  /* страница 404 в одно окно */
  .oops__inner { padding-block: 6rem 2rem; }
  .bridge { width: 16rem; margin-bottom: 2.4rem; }
  .oops__title { font-size: 4.4rem; }
  .oops__text { margin-top: 1.6rem; }
  .oops__actions { flex-direction: row; margin-top: 3.2rem; }
}

/* меню телефона в альбомной и узкого планшета помещается в экран и не тянется во всю ширину:
   панель по размеру содержимого у правого края, слева пункты, справа подменю «Науки»
   (сверху, напротив пункта) и языки (снизу) */
@media (max-width: 1100px) and (max-height: 500px) and (orientation: landscape), (min-width: 761px) and (max-width: 900px) {
  .site-header__right.site-header__right {
    left: auto; right: 0; display: none; grid-template-columns: 30rem auto; column-gap: 4.8rem; align-items: start;
    max-height: calc(100svh - 13rem); overflow-y: auto;
  }
  .site-header.is-open .site-header__right { display: grid; }
  .nav { display: contents; }
  .nav__bar > * { grid-column: 1; }
  .nav__item { height: 6.4rem; }
  .nav__dropdown { grid-column: 2; grid-row: 1 / span 3; padding: 0; border-bottom: 0; min-width: 34rem; }
  .lang { grid-column: 2; grid-row: 4 / span 2; align-self: end; justify-self: end; margin: 0 0 .8rem; }
}

/* ---------- планшет (24.09.2026, по замечаниям владельца) ----------
   То же, что у телефона в альбомной, под размеры планшета: iPad Mini 768×1024 и 1024×768,
   раскрытые Pixel 9 Pro Fold и Galaxy Z Fold 6, iPad Pro 13 и Surface Pro 10 в книжной.
   Цифры в строку, этапы линией, стрелки и подвал в две колонки у планшета и так как на компьютере.
   Сначала общее для обеих ориентаций, ниже отдельно альбомная и книжная. */
@media (min-width: 761px) and (max-width: 1100px) and (min-height: 501px) {
  /* подписи под цифрами центра: строки примерно равной длины, без одинокого слова */
  .metric__text { text-wrap: balance; }

  /* «Оборудование» уходит в конец, после «Производства микро- и наноструктур» */
  .ind-photo { order: 1; }

  /* образование: заголовок и трек, под ними фото, дальше текст, факты и кнопка */
  .education { gap: 4.8rem; }
  .education__body { display: contents; }
  .education__photo { order: 1; }
  .education__text { order: 2; margin-top: 0; }
  .education .facts { order: 3; margin-top: 0; }
  .education .btn { order: 4; margin-top: 0; }

  /* новости: у новости месяца фото слева, текст справа, фото скруглено со всех сторон.
     Так же лежат карточки на главной и последняя карточка в списке, если она одна в ряду.
     «Читать» слева у всех, как у новости месяца */
  .featured__card { grid-template-columns: 42fr 58fr; }
  .featured__img { height: auto; min-height: 40rem; border-radius: var(--radius-l); overflow: hidden; }
  .featured__body { padding: 4rem 5rem; }
  .news .news__grid { grid-template-columns: 1fr; gap: 3.2rem; }
  .news .news-card, .news-all .news-card:last-child:nth-child(odd) { flex-direction: row; gap: 0; }
  .news-all .news-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .news .news-card__img, .news-all .news-card:last-child:nth-child(odd) .news-card__img { flex: 0 0 42%; height: auto; min-height: 32rem; }
  .news .news-card__body, .news-all .news-card:last-child:nth-child(odd) .news-card__body { padding: 3.6rem 4rem; gap: 2.4rem; }
  .news-card .link-arrow { align-self: flex-start; }

  /* крестик в окне новости крупный, в него легко попасть пальцем */
  .modal__close { width: 7rem; height: 7rem; border-radius: 1.4rem; }
  .modal__close svg { width: 2.6rem; height: 2.6rem; }

  /* приглашение на странице направления: кнопка справа по нижней строке текста,
     текст приглашения тем же кеглем, что текст направления над ним */
  .dir-cta { align-items: flex-end; }
  .dir-cta__text { font-size: 2.4rem; max-width: 72rem; }

  /* карточка публикации: справа картинка (или плашка журнала) и под ней кнопка «Цитировать»,
     слева текст; в строке с датой «Цитировать» больше нет */
  .pub { display: grid; grid-template-columns: 1fr 44rem; grid-template-rows: auto auto 1fr; column-gap: 4.8rem; row-gap: 2.4rem; align-items: start; }
  .pub__meta { grid-column: 1 / -1; }
  .pub__main { display: contents; }
  .pub__body { grid-column: 1; grid-row: 2 / span 2; align-self: stretch; }
  .pub__img, .pub__img.is-empty { grid-column: 2; grid-row: 2; height: 30rem; }
  .pub__foot { grid-column: 2; grid-row: 3; display: flex; justify-content: flex-end; }
  .pub__meta .pub__cite { display: none; }
  .pub__foot .pub__cite {
    height: 6.4rem; padding: 0 2.4rem; gap: 1.6rem; border: 2px solid var(--stroke); border-radius: 1.2rem;
    font-size: 2rem; font-weight: 500; text-transform: uppercase;
  }
  .pub__foot .pub__cite svg { padding: 0; margin: 0; background: none; }
  .pub__img-placeholder { font-size: 2.56rem; padding: 3.2rem 3.2rem 8rem; }
  .pub__img-link { left: 3.2rem; bottom: 3.2rem; font-size: 2.24rem; }
  /* в виде «список» картинки нет, «Цитировать» стоит под текстом слева */
  .pub-list.is-list .pub { grid-template-columns: 1fr; }
  .pub-list.is-list .pub__body, .pub-list.is-list .pub__foot { grid-column: 1; grid-row: auto; }
  .pub-list.is-list .pub__foot { justify-content: flex-start; }
}

/* планшет в альбомной и широкий планшет в книжной (iPad Pro 13, Surface Pro 10): все новости
   по одной в ряд, фото слева. В две колонки карточка там выходит широкой, а фото узкой полосой */
@media (min-width: 761px) and (max-width: 1100px) and (min-height: 501px) and (orientation: landscape),
       (min-width: 901px) and (max-width: 1100px) and (min-height: 501px) {
  .news-all .news__grid { grid-template-columns: 1fr; gap: 3.2rem; }
  .news-all .news-card { flex-direction: row; gap: 0; }
  .news-all .news-card__img { flex: 0 0 42%; height: auto; min-height: 32rem; }
  .news-all .news-card__body { padding: 3.6rem 4rem; gap: 2.4rem; }
}

/* планшет в альбомной: окно новости как на компьютере, фото слева в почти квадратном кадре,
   текст справа прокручивается отдельно */
@media (min-width: 761px) and (max-width: 1100px) and (min-height: 501px) and (orientation: landscape) {
  .modal__dialog { display: grid; grid-template-columns: 44% 1fr; grid-template-rows: minmax(0, 1fr); height: calc(100svh - 6rem); }
  .modal__scroll { display: contents; overflow: visible; }
  .modal__img { aspect-ratio: auto; height: auto; }
  .modal__body { min-height: 0; overflow-y: auto; padding: 4rem 4.8rem 5rem; }
  .modal__dialog::after { left: 44%; }
  .modal__dialog.no-image { grid-template-columns: 1fr; }
  .modal__dialog.no-image::after { left: 0; }
  .modal__title { padding-right: 8rem; }
  .modal__close { top: 3.2rem; right: 3.2rem; }
}

/* планшет в книжной */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  /* окно новости: колонка удобной для чтения ширины по центру экрана, фото сверху в кадре 3:2
     не выше 40% экрана, поэтому заголовок и начало текста видны сразу */
  .modal__dialog { max-width: 112rem; }
  .modal__img { flex: none; aspect-ratio: auto; height: min(40svh, calc(min(100vw - 2 * var(--gutter), 112rem) / 1.5)); }

  /* фильтры публикаций: две ровные строки. Поиск на две трети, рядом направления;
     ниже годы и сортировка, «Сбросить» у правого края */
  .filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
  .field--search { grid-column: span 2; }
  select.field { min-width: 0; width: 100%; text-overflow: ellipsis; }
  .field--search input { text-overflow: ellipsis; }
  .filters__reset { justify-self: end; }

  /* страница направления: колонка текста узкая, поэтому как на телефоне. Сначала цифры сеткой
     три на два, потом первый абзац и кнопка «читать полностью», облако ключевых слов не показываем */
  .dir-about__grid { flex-direction: column; margin-top: 8rem; gap: 4rem; }
  .dir-about__main { max-width: none; gap: 4.8rem; }
  .dir-about__side { flex: none; order: -1; }
  .dir-about__tags { display: none; }
  .dir-stats { grid-template-columns: repeat(3, 1fr); column-gap: 3.2rem; row-gap: 4rem; }
  .dir-stats .stat__value { min-width: 0; }
  .dir-about__text:not(.is-open) p + p { display: none; }
  .dir-about__more {
    display: inline-flex; align-self: flex-start; align-items: center; gap: 1.2rem; margin-top: -2.4rem; padding-block: 1.2rem;
    font-size: 2.24rem; font-weight: 500; text-transform: uppercase; color: var(--green);
  }
  .dir-about__more svg { width: 1.8rem; height: 1.4rem; transition: transform .2s; }
  .dir-about__more[aria-expanded="true"] svg { transform: rotate(180deg); }
  .dir-about__more-close, .dir-about__more[aria-expanded="true"] .dir-about__more-open { display: none; }
  .dir-about__more[aria-expanded="true"] .dir-about__more-close { display: inline; }
}

/* узкий планшет (до 900 px): заголовок первого экрана чуть мельче, иначе он занимает всю ширину */
@media (min-width: 761px) and (max-width: 900px) and (min-height: 501px) {
  .hero__title { font-size: 10.4rem; }

  /* подписи под цифрами центра чуть мельче и колонки чуть шире: так все девять подписей
     встают в две-три строки, без одинокого слова в строке (замерено 24.09.2026 на 768 px) */
  .metrics { gap: 2.4rem; }
  /* ручной перенос \n здесь снят: колонка узкая, и после него оставалось одинокое «уровня» */
  .metric__text { font-size: 2.24rem; white-space: normal; }
}

/* факты об обучении на телефоне в книжной: короткие подписи в одну строку, без пояснений */
@media (max-width: 760px) and (orientation: portrait) {
  .fact__full, .fact__note { display: none; }
  .fact__short { display: inline; }
  .fact__label { min-height: 0; }
}

/* на сенсорном экране наведения нет, поэтому картинка публикации сразу четкая, без размытия */
@media (hover: none) {
  .pub__img img { filter: none; transform: none; }
  .pub__img::after { opacity: .15; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Докладчица у левого края снимка: сохраняем ее при адаптивном кадрировании. */
img[src*="news-gerasimova-saratov-fall-meeting-2025"] { object-position: left bottom; }