@font-face {
  font-family: "MailmanRegular";
  src: url("MailmanRegular.woff2") format("woff2"),
       url("MailmanRegular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
html.font-loading body {
  opacity: 0;
}

html.font-loaded body {
  opacity: 1;
  transition: opacity 0.4s ease;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  background: #fff;
  color: #111;
  overflow-x: hidden;
  padding-top: 85px;
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 10px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0);
  backdrop-filter: blur(0px);
  z-index: 10;
  transition: padding 0.1s ease;
}

header h1 {
  font-family: "MailmanRegular", Helvetica, Arial, sans-serif;
  font-size: 50px;
  letter-spacing: 0.05em;
  font-weight: 500;
  /*text-transform: uppercase;*/
  transition: font-size 0.1s ease, transform 0.1s ease;
  user-select: none;
  line-height: 1;
}

header .contact-link {
  position: absolute;
  right: 24px;
  font-size: 14px;
  text-decoration: none;
  color: #111;
  letter-spacing: 0.05em;
  transition: font-size 0.1s ease, transform 0.1s ease;
}

main {
/*  padding-top: 80px;*/
  display: flex;
  flex-direction: column;
  gap: 96px;
}

.session-title {
  margin-left: 32px;
  margin-bottom: 20px;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #777;
}

.session-row {

  display: flex;
  align-items: center;
  padding-left: var(--row-offset);
  padding-right: 32px;
  padding-bottom: 40px;

  overflow-x: auto;
   overflow-y: hidden;
  cursor: grab;

  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.session-row::-webkit-scrollbar {
  display: none;
}

.session-row:active {
  cursor: grabbing;
}

/*стрелочка --------------*/
.scroll-hint {
  position: absolute;
  right: 42vw;
  bottom: 40px;

  opacity: 0;
  pointer-events: none;
}

.scroll-hint.show {
  animation: arrow-in 1.5s ease forwards;
}

.scroll-hint.hide {
  animation: arrow-out 0.7s ease forwards;
}


@keyframes arrow-in {
  from {
    opacity: 0;
    transform: translateX(0);
  }
  to {
    opacity: 1;
    transform: translateX(-44px);
  }
}

@keyframes arrow-out {
  from {
    opacity: 1;
    transform: translateX(-44px); /* остаёмся в конце */
  }
  to {
    opacity: 0;
    transform: translateX(-44px);
  }
}

/*-------------------------*/


._spacer {
  flex: 0 0 auto;
  width: 100px;
}


/* Разрешаем контейнеру с обложкой подстраиваться под контент (фото + текст) */
.photo.cover {
  position: relative;
  display: block;
  flex: 0 0 auto;
  height: auto; 
  align-self: stretch; /* Растягиваем, чтобы он не схлопнулся */
}

/* Ограничиваем высоту только самой картинки внутри этого контейнера */
.photo.cover img {
  height: min(75vh, 640px);
  width: auto;
  border: 5px solid #E7131A;
  object-fit: cover;
}
.photo.cover .session-title {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 20px;
  margin-left: 0;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #777;
  text-align: left;

  height: 0;            /* Контейнер не занимает места по вертикали */
  overflow: visible;    /* Но текст внутри него виден */
  white-space: nowrap;
}

.photo {
  flex: 0 0 auto;
  height: min(75vh, 640px);
  user-select: none;
}

.photo img {
  height: 100%;
  width: auto;
  display: block;
  border: 5px solid black;
  object-fit: cover;
  filter: blur(24px);
  transform: scale(1.08);
  transition: filter 0.8s ease, transform 0.8s ease;
  user-select: none;
  -webkit-user-drag: none;
}

.photo img.loaded {
  filter: blur(0);
  transform: scale(1);
}

.photo .video-element {
  height: 100%;
  width: auto;
  display: block;
  border: 5px solid black; /* Такая же рамка, как у фото */
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  filter: blur(24px);
  transform: scale(1.08);
  transition: filter 0.8s ease, transform 0.8s ease;
}
.video-element.loaded {
  filter: blur(0);
  transform: scale(1);
}
#page-transition {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
}

#page-transition.active {
  opacity: 1;
  pointer-events: all;
}

.text-accent {
  font-family: Cambria, cursive;
  font-size: 19px;
  font-style: italic;
  color: #76bae8;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  text-decoration: none;
}
.widget-box {
  transform-origin: center;

  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    height 0.25s ease,
    margin 0.25s ease;

}

.artefact img {
  width: 60%;
  display: block;
  margin: auto; 
}

footer {
  width: 100%;
  padding: 80px 20px; /* Отступы сверху и снизу */
  display: flex;
  justify-content: center; /* Центрирование по горизонтали */
  align-items: center;     /* Центрирование по вертикали */
  background-color: #fff; 
}

.footer-container {
  max-width: 600px;        /* Ограничиваем ширину, чтобы получился прямоугольник */
  text-align: center;      /* Выравнивание самого текста внутри */
}

.footer-text {
  font-size: 10px;         /* Маленький шрифт */
  line-height: 1.6;        /* Межстрочный интервал для читаемости */
  color: #999;             /* Неяркий цвет, чтобы не отвлекать от фото */
  letter-spacing: 0.02em;
  text-transform: uppercase; /* Опционально: делает текст более "архитектурным" */
}
@media (min-width: 1026px) {
  header {
    flex-direction: column;
    align-items: center;
  }

  header .contact-link {
    position: absolute;
    right: 24px;
    top: 20%;
    transform: translateY(-50%);
  }
}

@media (max-width: 1025px) {
  main {
    gap: 64px;
    padding-top: 120px;
  }
  .session-row {
    padding-left: 0px;
    padding-right: 0px; /* Убираем отступы ряда, чтобы фото прилегало к краям */
  }

  /* Специфические настройки для обложки */
  .photo.cover {
    width: 100vw;      /* Ширина на весь экран */
    height: auto;      /* Высота подстроится под контент */
    align-self: start; /* Чтобы текст снизу не растягивал контейнер по высоте соседа */
  }

  .photo.cover img {
    width: 100%;       /* Картинка занимает всю ширину контейнера */
    height: auto;      /* Высота вычисляется пропорционально */
    max-height: none;  /* Снимаем ограничения, если они были */
  }

  /* Корректируем заголовок под фото, так как теперь ширина 100% */
  .photo.cover .session-title {
    position: static;  /* Возвращаем в поток, чтобы не перекрывал следующие фото */
    margin-top: 10px;
    padding-left: 16px; /* Добавляем отступ тексту, раз у фото его нет */
    white-space: normal; /* Разрешаем перенос текста, если он длинный */
    height: auto;
  }

  header {
    padding: 20px 16px;
    justify-content: center;
  }

  header h1 {
    font-size: 32px;
    text-align: center;
  }

  header .contact-link {
    position: static;           /* убираем absolute */
    margin-top: 8px;
    font-size: 12px;
    display: block;
  }

  header {
    flex-direction: column;     /* имя сверху, контакт снизу */
    gap: 6px;
  }

  .artefact img {
    width: 90%;
  }

  .scroll-hint {
    right: auto;
    left: 40%;
    top: 175px;

    transform: translateX(-50%);
  }
  .scroll-hint .arrow {
    transform: scaleY(0.6);
  }


}