/*
 * Общие стили brain.sport.mos.ru («Московская Интеллиада»).
 * Значения (px, line-height, цвета) повторяют оригинал на Тильде один в один —
 * не округлять и не переводить в rem. Брейкпоинты только тильдовские:
 * стандартные блоки 1200 / 980 / 960 / 640 / 560 / 480, Zero-полосы 1199 / 959 / 639 / 479.
 */

/* ---------- Шрифты ---------- */

/* Семейство 'Mossport' собрано так же, как в проекте на Тильде: под одним именем
   Gotham Pro (300/400/500/700) и фирменный акцидентный шрифт «Московского спорта»
   на месте начертания 600. Поэтому «жирность 600» везде означает акцидентный шрифт. */
@font-face {
  font-family: 'Mossport';
  src: url('/assets/fonts/gothampro-light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Mossport';
  src: url('/assets/fonts/gothampro-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Mossport';
  src: url('/assets/fonts/gothampro-medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Mossport';
  src: url('/assets/fonts/mossport.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Mossport';
  src: url('/assets/fonts/gothampro-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

/* ---------- База ---------- */

:root {
  --font: 'Mossport', Arial, sans-serif;
  --c-blue: #24a5de;
  --c-ink: #1e1e1e;
  --c-paper: #fafafa;
}

/* Как в сетке Тильды: content-box у всех, включая кнопки и поля, у которых
   браузер по умолчанию ставит border-box. Где нужен border-box, он задан явно. */
*,
*::before,
*::after {
  box-sizing: content-box;
}

/* Шрифт у body намеренно не задан, как в оригинале: всё, что набрано без явного
   шрифта, падает в шрифт браузера по умолчанию. */
body {
  margin: 0;
}

div, span, h1, h2, h3, h4, h5, h6, p, a, img, b, u, i, table, tr, th, td, video {
  margin: 0;
  padding: 0;
  border: 0;
}

.page {
  -webkit-font-smoothing: antialiased;
}

/* Элементы Zero-полос с видимым переполнением могут торчать за край окна.
   Тильда в этом случае ставит всей странице overflow: hidden — повторяем. */
.page--clip {
  overflow: hidden;
}

a {
  color: var(--c-blue);
  text-decoration: none;
}

a, button {
  outline: none;
}

a:focus-visible,
button:focus-visible {
  outline-color: #2015ff;
  outline-offset: 4px;
  outline-style: auto;
}

b, strong {
  font-weight: 700;
}

ul {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 20px;
}

ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 22px;
}

img:not([src]) {
  visibility: hidden;
}

/* Ссылки внутри текстов подчёркнуты тенью, а не text-decoration (в текстах Zero-полос
   ссылок сейчас нет; если появятся — подчеркнуть так же) */
.program__text a,
.text a {
  box-shadow: inset 0 -1px 0 0 var(--c-blue);
}

/* Тап-подсветка как у Тильды */
@media (max-width: 1024px) {
  a:active,
  button:active {
    -webkit-tap-highlight-color: rgba(255, 255, 255, .1);
  }
}

/* ---------- Появление страницы ---------- */

/* Шире 980px страница проявляется за 1 с, а при переходе по ссылке на другую
   страницу гаснет за 0.5 с. Страница-заглушка без такого перехода проявляется
   за 0.2 с и только при первом заходе в этой вкладке. Без JavaScript видно сразу. */
@media (min-width: 980px) {
  .js .page:not(.page--first-visit),
  .js.is-first-visit .page--first-visit {
    opacity: 0;
  }
  .js .page.page--animated {
    transition: opacity 1s ease-in-out;
  }
  .js .page--first-visit.page--animated {
    transition: opacity .2s ease-in-out;
  }
  .js .page.page--visible {
    opacity: 1;
  }
}

/* Полоска загрузки над страницей */
.loadbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 9999999999;
}

.loadbar__bar {
  width: 0;
  height: 2px;
  background-color: #030bff;
  transition: all .3s ease-in-out;
}

.loadbar__bar--progress {
  width: 70%;
}

.loadbar__bar--finished {
  width: 100%;
}

.loadbar__bar--hidden {
  width: 100%;
  opacity: 0;
}

/* ---------- Zero-полосы ---------- */

/* Монтажная область: элементы позиционируются абсолютно, координаты — в CSS страницы.
   Высота области — переменная --h (в px без единиц), по полосам брейкпоинтов. */
.zero {
  -webkit-text-size-adjust: 100%;
  font-family: var(--font);
}

.zero__board {
  position: relative;
  height: calc(var(--h) * 1px);
  overflow: var(--board-overflow, hidden);
  background-color: var(--board-bg, transparent);
}

.zero__el {
  position: absolute;
  box-sizing: border-box;
  margin: 0;
}

.zero__el ul,
.zero__el ol {
  margin-bottom: 0;
}

img.zero__el,
.zero__el > svg {
  display: block;
}

/* Плашки-кнопки Zero-полос: текст по центру, рамка внутри размера */
.zero__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Уже 640px Тильда масштабирует полосу целиком: zoom = ширина окна / 480 (или / 320),
   координаты при этом берутся без смещения сетки. Коэффициент и итоговую высоту
   (с округлением вниз, как у Тильды) считает site.js, --zoom ставится до отрисовки. */
@media (max-width: 639px) {
  .zero__el {
    zoom: var(--zoom, 1);
  }
}

/* Появление элементов снизу вверх: 150px за 1.5 с, когда элемент входит в окно.
   Порядок и тайминги — в initReveal (site.js) */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 150px, 0);
  transition-property: opacity, transform;
  transition-duration: 1.5s;
  transition-timing-function: cubic-bezier(.19, 1, .22, 1);
  backface-visibility: hidden;
}

/* Пока элемент ждёт своей очереди, сдвиг снят — как у Тильды (transform: unset) */
.js [data-reveal].is-waiting {
  transform: none;
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}


/* «Шторка» в обложке: при показе падает на 400px и за 3 с уезжает вверх на 310px.
   Уже 480px — свои значения (500px, −90px, задержка 0.5 с). Ключевые кадры —
   из тех, что генерирует tilda-animation-sbs. */
.js .is-curtain-run [data-curtain] {
  animation: zero-curtain 3.2s linear forwards;
  backface-visibility: hidden;
}

@keyframes zero-curtain {
  0% { transform: translateY(0); animation-timing-function: linear; }
  1% { transform: translateY(400px); animation-timing-function: linear; }
  7.25% { transform: translateY(400px); animation-timing-function: ease-in-out; }
  100% { transform: translateY(var(--curtain-shift, -310px)); }
}

@media (max-width: 479px) {
  .js .is-curtain-run [data-curtain] {
    animation-name: zero-curtain-sm;
    animation-duration: 3.5s;
  }
}

@keyframes zero-curtain-sm {
  0% { transform: translateY(0); animation-timing-function: linear; }
  1% { transform: translateY(500px); animation-timing-function: linear; }
  15.29% { transform: translateY(500px); animation-timing-function: ease-in-out; }
  100% { transform: translateY(var(--curtain-shift-sm, -90px)); }
}

/* ---------- Сетка стандартных блоков ---------- */

/* Повторяет сетку Тильды: 12 колонок по 60px с полями 20px в контейнере 1200px,
   уже 1200px — контейнер 960px и поля 10px, уже 960px — колонки во всю ширину. */
.container {
  width: 100%;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding: 0;
}

.container::before,
.container::after {
  content: " ";
  display: table;
  width: 0;
}

.container::after {
  clear: both;
}

.container--flex {
  display: flex;
}

.col {
  display: inline;
  float: left;
  width: 100%;
  margin-right: 20px;
  margin-left: 20px;
}

.col--2 { max-width: 160px; }
.col--6 { max-width: 560px; }
.col--7 { max-width: 660px; }
.col--8 { max-width: 760px; }
.col--9 { max-width: 860px; }
.col--10 { max-width: 960px; }
.col--11 { max-width: 1060px; }
.col--12 { max-width: 1160px; }
.col--prefix-1 { padding-left: 100px; }
.col--prefix-2 { padding-left: 200px; }

@media (max-width: 1200px) {
  .container {
    max-width: 960px;
  }
  .col {
    margin-right: 10px;
    margin-left: 10px;
  }
  .col--2 { max-width: 140px; }
  .col--6 { max-width: 460px; }
  .col--7 { max-width: 540px; }
  .col--8 { max-width: 620px; }
  .col--9 { max-width: 700px; }
  .col--10 { max-width: 780px; }
  .col--11 { max-width: 860px; }
  .col--12 { max-width: 940px; }
  .col--prefix-1 { padding-left: 80px; }
  .col--prefix-2 { padding-left: 160px; }
}

@media (max-width: 960px) {
  .container {
    max-width: 640px;
  }
  .container--flex {
    display: block;
  }
  .col,
  .col--prefix-1,
  .col--prefix-2 {
    display: block;
    float: none;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-right: 20px;
    padding-left: 20px;
  }
}

/* ---------- Типографика стандартных блоков ---------- */

.title {
  color: #000;
  font-family: var(--font);
  font-weight: 600;
  font-size: 42px;
  line-height: 1.23;
}

.descr-xl {
  color: #000;
  font-family: var(--font);
  font-weight: 300;
  font-size: 24px;
  line-height: 1.5;
}

.text {
  color: #000;
  font-family: var(--font);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.55;
}

@media (max-width: 1200px) {
  .title { font-size: 38px; }
  .descr-xl { font-size: 22px; }
  .text { font-size: 16px; }
}

@media (max-width: 640px) {
  .title { font-size: 30px; }
  .descr-xl { font-size: 20px; line-height: 1.4; }
  .text { font-size: 14px; line-height: 1.45; }
}

/* ---------- Программа ---------- */

.program {
  padding-top: 150px;
  padding-bottom: 150px;
}

.program--alt {
  background-color: #e3f1f8;
}

/* Заглушка до анонса программы: под датой нет пунктов, отступ под ней не нужен */
.program--soon .program__date {
  margin-bottom: 0;
}

.program__head {
  text-align: center;
}

.program__title {
  margin-bottom: 40px;
  overflow-wrap: break-word;
}

.program__date {
  max-width: 560px;
  margin-right: auto;
  margin-bottom: 90px;
  margin-left: auto;
  overflow-wrap: break-word;
}

.program__line {
  position: relative;
  height: 1px;
  background: #000;
  opacity: .1;
}

.program__row::after {
  content: '';
  display: block;
  clear: both;
  height: 0;
}

.program__left,
.program__right {
  margin-top: 45px;
  margin-bottom: 45px;
}

.program__time {
  color: #000;
  font-family: var(--font);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.35;
}

.program__name {
  color: #000;
  font-family: var(--font);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.23;
}

.program__person {
  display: table;
  color: #000;
  font-family: var(--font);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.55;
}

.program__gap {
  margin-bottom: 35px;
}

@media (max-width: 1200px) {
  .program__time { font-size: 18px; }
  .program__name { font-size: 24px; }
  .program__person { font-size: 16px; }
}

@media (max-width: 960px) {
  .program__title { margin-bottom: 20px; }
  .program__date { margin-bottom: 75px; }
  .program__right { margin-top: 0; }
  .program__left { margin-bottom: 20px; }
  .program__gap { margin-bottom: 20px; }
}

@media (max-width: 640px) {
  .program__time { font-size: 16px; }
  .program__name { font-size: 22px; }
  .program__person { font-size: 14px; line-height: 1.45; }
}

@media (max-width: 480px) {
  .program {
    padding-top: 90px;
    padding-bottom: 90px;
  }
}

/* «Подробнее»: кнопка внутри текста, по клику на её месте раскрывается полный текст */
.more {
  display: inline;
}

.more__btn {
  display: inline;
  margin: 0;
  padding: 0;
  border-top: none;
  border-right: none;
  border-bottom: 1px var(--more-style) var(--more-color);
  border-left: none;
  background: none;
  color: var(--more-color);
  font: inherit;
  line-height: 1 !important;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

/* ---------- Соцсети ---------- */

.social {
  padding-top: 60px;
  padding-bottom: 60px;
  background-color: var(--c-blue);
}

.social__wrap {
  display: flex;
  justify-content: center;
}

.social__list {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.social__item {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
}

.social__link {
  display: inline-block;
}

/* ---------- Партнёры ---------- */

.partners {
  padding-top: 135px;
  padding-bottom: 135px;
  background-color: #0085c0;
}

.partners__grid {
  flex-wrap: wrap;
}

.partners__item {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 20px;
  overflow: hidden;
}

.partners__link {
  flex-shrink: 0;
  height: auto;
  color: inherit;
}

.partners__logo {
  width: 200px;
  max-width: 100%;
}

.partners__descr {
  color: #f8f8f8;
  font-weight: 400;
}

.partners__descr:not(:first-child) {
  margin-left: 40px;
}

@media (max-width: 1200px) {
  .partners__item {
    padding: 10px;
  }
}

@media (max-width: 960px) {
  .partners__logo {
    width: 80px;
  }
  .partners__descr:not(:first-child) {
    margin-left: 20px;
  }
}

@media (max-width: 480px) {
  .partners {
    padding-top: 90px;
    padding-bottom: 90px;
  }
}

/* ---------- Подвал ---------- */

.footer {
  background-color: var(--c-blue);
}

/* .footer__wrap ещё и .container: до 960px он ограничивает ширину */
.footer__wrap {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 50px 0;
}

.footer__col--left {
  flex-shrink: 0;
  margin-right: auto;
  margin-left: 15px;
  padding-right: 50px;
}

.footer__col--right {
  width: auto;
  margin-right: 15px;
}

.footer__logo-wrap {
  display: flex;
  align-items: center;
  height: 100%;
}

.footer__logo {
  display: block;
  width: 100%;
  max-width: 170px;
  color: #fff;
  font-size: 20px;
}

.footer__menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 5px;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.footer__item {
  margin-right: 15px;
  margin-bottom: 10px;
}

.footer__item:last-child {
  margin-right: 0;
}

.footer__link {
  color: #fff;
  font-family: 'Mossport';
  font-weight: 700;
  text-transform: uppercase;
}

@media (max-width: 960px) {
  .footer__wrap {
    display: block;
    box-sizing: border-box;
    max-width: none;
    padding: 50px 20px;
  }
  .footer__col--left {
    display: inline-block;
    box-sizing: border-box;
    margin-right: 0;
    margin-bottom: 20px;
    margin-left: 0;
    padding: 0;
  }
  .footer__col--right {
    width: auto;
    margin-right: 0;
  }
}

@media (max-width: 640px) {
  .footer__col {
    display: block;
    width: 100%;
  }
  .footer__col--left {
    display: block;
  }
  .footer__menu {
    font-size: 12px;
  }
  .footer__logo {
    max-width: 140px;
  }
}

/* ---------- Кнопки ---------- */

/* Кнопки Тильды: высота задаётся переменной, отступы по вертикали считаются от неё */
.btn {
  --line-height: 1.4;
  --border-width: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1ch;
  box-sizing: border-box;
  max-width: 100%;
  padding-top: calc(((var(--height) - 1em * var(--line-height)) / 2) - var(--border-width));
  padding-bottom: calc(((var(--height) - 1em * var(--line-height)) / 2) - var(--border-width));
  overflow: hidden;
  border-width: var(--border-width);
  border-style: solid;
  border-color: transparent;
  border-radius: 0;
  background-color: transparent;
  background-image: none;
  color: inherit;
  font-family: var(--font);
  font-weight: 600;
  line-height: var(--line-height);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  -webkit-appearance: none;
}

.btn__text {
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  white-space: inherit;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .btn {
    white-space: normal;
  }
}

/* ---------- Уведомление о cookie ---------- */

.cookie {
  position: fixed;
  right: 20px;
  bottom: 30px;
  z-index: 100001;
}

.cookie[hidden] {
  display: none;
}

.cookie__box {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  width: 600px;
  padding: 15px 25px;
  border-radius: 5px;
  background-color: #ebebeb;
  box-shadow: 0 0 5px rgba(0, 0, 0, .1);
}

.cookie__text {
  display: table-cell;
  padding-right: 10px;
  color: #000;
  font-family: var(--font);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.55;
  text-align: left;
  vertical-align: middle;
}

/* Размер «sm» Тильды (14px), но высоту и поля переопределяет правило блока */
.cookie__btn {
  --height: 30px;
  --border-width: 1px;
  font-size: 14px;
  flex-shrink: 0;
  margin-left: auto;
  padding-right: 20px;
  padding-left: 20px;
  border-style: solid;
  border-color: #999;
  border-radius: 5px;
  background-color: #ebebeb;
  color: #555;
  font-weight: 500;
  transition: background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out,
    box-shadow .2s ease-in-out, opacity .2s ease-in-out, transform .2s ease-in-out, gap .2s ease-in-out;
}

@media (hover: hover) {
  .cookie__btn:hover,
  .cookie__btn:focus-visible {
    border-color: #111;
    background-color: #e8e8e8;
    color: #111;
  }
}

@media (max-width: 1200px) {
  .cookie__text { font-size: 14px; }
}

@media (max-width: 980px) {
  .cookie {
    right: 0;
    bottom: 0;
    left: 0;
  }
  .cookie__box {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    border-radius: 0;
  }
}

@media (max-width: 640px) {
  .cookie__text { font-size: 12px; line-height: 1.45; }
}

/* ---------- Шапка с навигацией по блокам (шире 640px) ---------- */

/* Без JS шапка видна всегда; со скриптом прячется, пока не прокручено 500px */
.topnav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 9000;
  background-color: var(--c-blue);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
  transition: transform .3s ease-in-out, visibility 0s;
}

.js .topnav--hidden {
  visibility: hidden;
  transform: translateY(-100%);
  transition: transform .3s ease-in-out, visibility 0s .3s;
}

.topnav__wrap {
  display: flex;
  align-items: center;
  max-width: 1160px;
  height: 64px;
  margin: 0 auto;
  padding: 0 20px;
}

.topnav__logo-link {
  flex-shrink: 0;
  margin-right: auto;
}

.topnav__logo {
  display: block;
  height: 40px;
}

.topnav__list {
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topnav__link {
  display: block;
  padding: 8px 0;
  color: var(--c-paper);
  font-family: 'Mossport';
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 0 transparent;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}

.topnav__link--active {
  color: #feb737;
  box-shadow: inset 0 -2px 0 0 #feb737;
}

@media (hover: hover) {
  .topnav__link:hover {
    color: #feb737;
  }
}

.topnav__link:focus-visible {
  color: #feb737;
}

/* Якоря не прячутся под шапку */
html:has(.topnav) {
  scroll-padding-top: 64px;
}

@media (max-width: 960px) {
  .topnav__logo-link {
    display: none;
  }
  .topnav__wrap {
    justify-content: center;
  }
  .topnav__list {
    gap: 16px;
  }
  .topnav__link {
    font-size: 12px;
  }
}

@media (max-width: 640px) {
  .topnav {
    display: none;
  }
  html:has(.topnav) {
    scroll-padding-top: 0;
  }
}

/* ---------- Кнопка «Наверх» ---------- */

/* Без JS кнопка видна всегда; со скриптом прячется, пока не прокручено 500px */
.totop {
  position: fixed;
  right: 20px;
  bottom: 30px;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  border: 2px solid var(--c-paper);
  border-radius: 50%;
  background-color: var(--c-blue);
  color: var(--c-paper);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  transition: opacity .3s ease-in-out, transform .3s ease-in-out, visibility 0s, background-color .2s ease-in-out;
}

.js .totop--hidden {
  visibility: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .3s ease-in-out, transform .3s ease-in-out, visibility 0s .3s;
}

/* Плашка о cookie стоит в том же углу: пока она открыта, кнопки нет */
body:has(.cookie:not([hidden])) .totop {
  display: none;
}

.totop__icon {
  display: block;
}

@media (hover: hover) {
  .totop:hover {
    background-color: #feb737;
  }
}

.totop:focus-visible {
  outline: 2px solid #feb737;
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .totop {
    right: 15px;
    bottom: 20px;
    width: 44px;
    height: 44px;
  }
}

/* ---------- Боковое меню (до 640px) ---------- */

.menu__burger-wrap {
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: end;
  width: auto;
  transition: opacity .2s ease-in-out;
}

.menu__burger-wrap--hidden {
  opacity: 0;
  z-index: -1;
}

.menu__burger-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 30px;
  cursor: pointer;
  transition: opacity .2s ease-in-out;
}

.menu__burger-bg {
  position: absolute;
  inset: 0;
  background-color: #111;
  opacity: 0;
}

.burger {
  position: relative;
  z-index: 999;
  flex-shrink: 0;
  width: 28px;
  height: 20px;
  padding: 0;
  border: none;
  background-color: transparent;
  outline: none;
  transform: rotate(0deg);
  transition: transform .5s ease-in-out;
  cursor: pointer;
}

.burger span {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 3px;
  background-color: #323232;
  opacity: 1;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2),
.burger span:nth-child(3) { top: 8px; }
.burger span:nth-child(4) { top: 16px; width: 70%; right: 0; left: unset; }

/* Состояния «открыто» у этой кнопки нет: панель меню закрывает её целиком */
@media (hover) {
  .burger:hover span:nth-child(4) { width: 100%; }
}

.menu__overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: none;
  opacity: 0;
  transition: opacity .3s ease-in-out;
}

.menu__overlay--shown {
  z-index: 99999;
  display: block;
  opacity: 1;
}

.menu__overlay-bg {
  position: absolute;
  inset: 0;
  background-color: #000;
  opacity: .6;
}

/* max-width: 100vh стоит в оригинале в атрибуте style и перекрывает 300px из CSS
   блока: на телефоне панель занимает всю ширину экрана */
.menu__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  width: 100%;
  max-width: 100vh;
  overflow: hidden;
  background-color: var(--c-blue);
  transform: translate(100%, 0);
  transition: transform .3s ease-in-out;
}

.menu__panel--shown {
  z-index: 999999;
  transform: translate(0, 0);
}

.menu__panel--overflowed {
  overflow-y: scroll;
}

.menu__close {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background-color: var(--c-blue);
  cursor: pointer;
}

/* Крестик — бургер Тильды в состоянии «открыто» */
.menu__close-icon {
  z-index: 999;
  display: block;
  width: 24px;
  height: 20px;
  margin: 0;
  color: var(--c-paper);
  transform: rotate(0deg);
}

.menu__close-icon span {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  background-color: currentcolor;
  opacity: 1;
  transform: rotate(0deg);
}

.menu__close-icon span:nth-child(1),
.menu__close-icon span:nth-child(4) { top: 8px; left: 50%; width: 0%; }
.menu__close-icon span:nth-child(2) { top: 8px; transform: rotate(45deg); }
.menu__close-icon span:nth-child(3) { top: 8px; transform: rotate(-45deg); }

.menu__container {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: auto;
  min-height: 100%;
  padding: 48px 40px 38px;
}

.menu__logo-wrap {
  margin-bottom: 25px;
}

.menu__logo-wrap a {
  display: block;
  color: #000;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.menu__logo {
  display: block;
  width: 100%;
  max-width: 120px;
}

.menu__list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.menu__item {
  display: block;
  clear: both;
  margin: 0;
  color: #000;
  font-family: var(--font);
  font-size: 16px;
}

.menu__link {
  display: inline-block;
  margin-bottom: 15px;
  color: var(--c-paper);
  font-family: 'Mossport';
  font-weight: 700;
  text-decoration: none;
  transition: color .3s ease-in-out, opacity .3s ease-in-out;
}

.menu__item:last-child .menu__link {
  margin-bottom: 0;
}

.menu__link--active {
  color: #feb737;
  font-weight: 500;
}

@media (hover: hover) {
  .menu__link:not(.menu__link--active):hover {
    color: #feb737;
  }
}

.menu__link:not(.menu__link--active):focus-visible {
  color: #feb737;
}

.menu__bottom {
  position: relative;
  margin-top: auto;
}

.menu__social {
  margin-top: 24px;
}

.menu__social-list {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.menu__social-item {
  display: inline-block;
  margin-top: 2px;
  margin-right: 4px;
  vertical-align: top;
}

.menu__social-item:last-child {
  margin-right: 0;
}

.menu__social-item a {
  margin-top: 24px;
}

body.is-menu-shown {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

@media (max-width: 640px) {
  .menu__container {
    padding: 42px 25px 25px;
  }
}

@media (min-width: 641px) {
  .menu {
    display: none;
  }
}

/* ---------- Карта (Яндекс Карты) ---------- */

.map {
  padding-top: 45px;
  padding-bottom: 45px;
}

.map__wrap {
  width: 100%;
  max-width: 1160px;
  margin-right: auto;
  margin-left: auto;
}

/* Подложка цвета карты, пока не загрузились тайлы */
.map__frame {
  overflow: hidden;
  background-color: rgb(229, 227, 223);
  transform: translateZ(0);
}

.map__canvas {
  position: relative;
  width: 100%;
  height: 385px;
}

@media (max-width: 1200px) {
  .map__wrap { max-width: 940px; }
}

/* ---------- Текстовая заглушка (страница /later) ---------- */

.stub {
  padding-top: 45px;
  padding-bottom: 45px;
}

.stub__text {
  color: #000;
  font-family: var(--font);
  font-size: 30px;
  font-weight: 300;
  line-height: 1.35;
  opacity: .7;
}

.stub__text p {
  margin: 0;
}

@media (min-width: 960px) {
  .stub__text { margin-top: -1px; }
}

@media (max-width: 640px) {
  .stub__text { font-size: 22px; }
}