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

@font-face {
  font-family: "Helvetica Neue";
  src: url(assets/fonts/HelveticaNeue-Roman.otf);
  font-weight: 400;
  font-style: normal;
}

body {
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.04em;
  line-height: 23px;
  margin: 0;
  overflow: hidden;
  cursor: none;
  background-color: #fff;   /* add this */
}

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  padding: 20px;
  width: 100%;
  position: relative;
  min-height: 100vh;
  /* Добавляем начальную прозрачность */
  opacity: 1; /* По умолчанию видим, JavaScript изменит на 0 */
}

.sidebar {
  grid-column: 1 / span 3;
  grid-row: 1;
}

.sidebar img {
  width: 359px;
  height: 118px;
}

.subtitle {
  margin-top: 8px;
}

.contacts {
  grid-column: 1 / span 3;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: center;
  height: 100%;
  justify-content: center;
}

.contact {
  display: flex;
}

.label {
  letter-spacing: 0.9em;
}

.value {
  letter-spacing: -0.04em;
}

.text-block {
  grid-column: 1 / span 3;
  grid-row: 3;
  width: 356px;
  height: 506px;
  overflow: hidden;
  align-self: end;
  display: flex; /* Добавляем flex */
  flex-direction: column; /* Колонка */
  justify-content: flex-end; /* Прижимаем контент к низу */
}

.text-block p {
  margin: 0;
}

.content {
  grid-column: 4 / span 9;
  grid-row: 1 / span 3;
  height: calc(100vh - 40px);
  overflow-y: auto;
  scrollbar-width: none;
  /* Убираем padding-right, оставляем только основной padding контейнера */
}

.content::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.cards {
  display: grid;
  grid-template-columns: repeat(4, 236px);
  column-gap: 12px;
  row-gap: 32px;
  justify-content: end;
}

.card {
  display: flex;
  flex-direction: column;
  width: 236px;
}

.card, .card * {
  user-select: none; /* Запрещает выделение */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.content {
  cursor: grab;
}

.content:active,
.content.dragging {
  cursor: grabbing;
}

/* Для предотвращения выделения при drag */
.card img, .card-title, .card .text {
  pointer-events: none; /* События проходят сквозь к родителю (.card) */
}

/* Но разрешаем клики на карточках */
.card {
  pointer-events: auto;
}

.card img {
  width: 236px;
  display: block;
}

.card-title {
  display: flex;
  align-items: center;
  margin-top: 4px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 8px;
  flex-shrink: 0;
}

/* Стили для проекта - ОСНОВНАЯ ВЕРСИЯ (1512px) */
.project-content {
  display: none;
  position: absolute;
  top: 20px;
  right: 20px;
  width: calc((100% - 40px) * 8 / 12); /* 8 колонок = 235 + 12 + 730 = 977px */
  height: calc(100vh - 40px);
  background: white;
  z-index: 10;
}

.project-content.active {
  display: block;
}

/* Скрываем контент когда проект активен */
.project-content.active ~ .content {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Контейнер для текста и кнопки */
.project-bottom-container {
  grid-column: 1 / span 3;
  grid-row: 2;
  display: grid;
  /* Текст занимает 730px, кнопка в оставшемся пространстве справа */
  grid-template-columns: 730px 1fr;
  align-items: start; /* Оба элемента начинаются сверху */
  margin-top: 32px; /* Расстояние от контента с картинками */
}

/* Автоматическая высота для текстового блока */
.project-text-block {
  grid-column: 1;
  width: 730px;
  max-height: none; /* Убираем фиксированную высоту */
  overflow-y: visible; /* Убираем скролл */
  overflow-x: hidden;
  scrollbar-width: none;
  display: block; /* Меняем flex на block */
}

/* Обертка проекта */
.project-wrapper {
  display: grid;
  grid-template-columns: 235px 12px 730px;
  grid-template-rows: auto auto; /* Автоматические строки вместо фиксированных */
  height: auto; /* Автоматическая высота */
  align-content: start; /* Выравниваем элементы по верху */
  justify-content: end;
  gap: 0; /* Убираем промежутки между строками */
}

.project-go-back {
  grid-column: 2;
  width: 87px;
  height: 22px;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0;
  justify-self: right;
}

/* Скрываем скроллбар */
.project-text-block::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.project-text-block p {
  margin: 0;
  font-size: 18px;
  line-height: 23px;
  letter-spacing: -0.04em;
  width: 100%;
}

.back-dot {
  width: 16px;
  height: 16px;
  background: black;
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0;
}

.back-text {
  font-size: 18px;
  letter-spacing: -0.04em;
  text-decoration: underline;
  text-underline-offset: 3px;
  line-height: 22px; /* Высота текста кнопки */
  white-space: nowrap;
}

/* Левая колонка - маленькие изображения */
.project-left-column {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: start; /* Прижимаем к верху */
}

.project-small-img {
  width: 235px;
  height: 292px;
  overflow: hidden;
}

.project-small-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.more-photos {
  display: inline-block;
  margin-top: 10px;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: black;
  font-size: 18px;
  letter-spacing: -0.04em;
  transition: opacity 0.2s ease;
}

.more-photos:hover {
  opacity: 0.7;
}

/* Большое изображение */
.project-large-img {
  grid-column: 3;
  grid-row: 1;
  width: 730px;
  height: 595px;
  overflow: hidden;
  align-self: start; /* Прижимаем к верху */
}

.project-large-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============ 1380px ============ */
@media (max-width: 1379px) {
  body {
    font-size: 16px;
    line-height: 20px;
  }
  
  .project-content {
    top: 15px;
    right: 15px;
    width: calc((100% - 30px) * 8 / 12);
    height: calc(100vh - 30px);
  }
  
  .project-wrapper {
    grid-template-columns: 200px 12px 600px;
  }
  
  .project-large-img {
    width: 600px;
    height: 490px;
  }
  
  .project-small-img {
    width: 200px;
    height: 248px;
  }
  
  .project-text-block {
    width: 600px;
    max-height: 180px;
  }
  
  .project-text-block p {
    font-size: 16px;
    line-height: 20px;
  }
  
  .back-dot {
    width: 14px;
    height: 14px;
  }
  
  .project-go-back,
  .back-text,
  .more-photos {
    font-size: 16px;
    line-height: 20px;
  }
  
  .back-text {
    line-height: 20px;
  }
}

/* ============ 1024px ============ */
@media (max-width: 1023px) {
  body {
    font-size: 14px;
  }
  
  .project-content {
    top: 12px;
    right: 12px;
    width: calc((100% - 24px) * 8 / 12);
    height: calc(100vh - 24px);
  }
  
  .project-wrapper {
    grid-template-columns: 180px 12px 500px;
  }
  
  .project-large-img {
    width: 500px;
    height: 408px;
    padding-top: calc(108px * 0.69); /* 69% от 108px ≈ 75px */
  }
  
  .project-small-img {
    width: 180px;
    height: 223px;
  }
  
  .project-text-block {
    width: 500px;
    max-height: 160px;
  }
  
  .project-text-block p {
    font-size: 14px;
    line-height: 18px;
  }
  
  /* Пропорциональный отступ сверху */
  .project-left-column {
    padding-top: calc(108px * 0.69); /* 69% от 108px ≈ 75px */
  }
  
  .project-go-back,
  .back-text,
  .more-photos,
  .project-text-block p {
    font-size: 14px;
    line-height: 18px;
  }
  
  .back-text {
    line-height: 18px;
  }
}

/* ============ 768px ============ */
@media (max-width: 767px) {
  body {
    font-size: 14px;
    line-height: 18px;
  }
  
  .project-content {
    position: static;
    width: 100%;
    height: auto;
    min-height: 50vh;
    margin-top: 20px;
  }
  
  .project-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  .project-left-column {
    order: 1;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 0; /* На мобильных убираем фиксированный отступ */
    margin-bottom: 15px;
  }
  
  .project-small-img {
    width: calc(50% - 6px); /* Учитываем gap 12px */
    height: 200px;
  }
  
  .project-large-img {
    order: 2;
    width: 100%;
    height: 300px;
    padding-top: 0; /* На мобильных убираем фиксированный отступ */
    margin-bottom: 15px;
  }
  
  .more-photos {
    order: 3;
    width: 100%;
    margin-top: 5px;
  }
  
  .project-text-block {
    order: 4;
    width: 100%;
    max-height: none;
    height: auto;
    padding-right: 0;
    margin-top: 15px;
    position: relative;
    display: block;
  }
  
  .project-text-block p {
    font-size: 14px;
    line-height: 18px;
  }
  
  .project-go-back {
    order: 5;
    position: static;
    width: 87px;
    height: 22px;
    margin-top: 15px;
    margin-bottom: 10px;
  }
  
  .project-go-back,
  .back-text,
  .more-photos {
    font-size: 14px;
  }
  
  .back-text {
    line-height: 18px;
  }
}

/* ============ 428px ============ */
@media (max-width: 428px) {
  body {
    font-size: 14px;
    line-height: 18px;
  }
  
  .project-content {
    height: auto;
    margin-top: 15px;
  }
  
  .project-large-img {
    height: 250px;
  }
  
  .project-small-img {
    height: 150px;
  }
  
  .project-go-back,
  .back-text,
  .more-photos {
    font-size: 14px;
  }

    .project-text-block {
    height: auto;
  }
  
  .project-text-block p {
    font-size: 14px;
    line-height: 18px;
  }
}

/* Стили для mindplug проекта - одна большая гифка 977x595 */
.project-content.mindplug-project .project-left-column {
  grid-column: 1 / span 3 !important;
  width: 977px !important;
  height: 595px !important;
  overflow: hidden;
  margin-bottom: 0; /* Убираем отступ снизу */
}

/* Добавляем отступ только для mindplug текстового блока */
.project-content.mindplug-project .project-bottom-container {
  margin-top: 32px; /* Сохраняем отступ */
}

.project-content.mindplug-project .project-left-column video,
.project-content.mindplug-project .project-left-column img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Скрываем элементы для mindplug */
.project-content.mindplug-project .project-large-img,
.project-content.mindplug-project .more-photos {
  display: none !important;
}

/* Адаптивность */
@media (max-width: 1379px) {
  .project-content.mindplug-project .project-left-column {
    width: 842px !important; /* 200 + 12 + 600 */
    height: 490px !important;
  }
  .project-content.mindplug-project .project-bottom-container {
    margin-top: 32px;
  }
}


@media (max-width: 1023px) {
  .project-content.mindplug-project .project-left-column {
    width: 692px !important; /* 180 + 12 + 500 */
    height: 408px !important;
  }
  .project-content.mindplug-project .project-bottom-container {
    margin-top: 24px;
  }
}

@media (max-width: 767px) {
  .project-content.mindplug-project .project-left-column {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 977 / 595;
    grid-column: 1 !important;
  }
  .project-content.mindplug-project .project-bottom-container {
    margin-top: 16px;
  }
}

/* Стили для проекта Calendar - структура как у music zine с видео */
.project-content.calendar-project .project-bottom-container {
  display: none !important; /* Скрываем нижний контейнер */
}

/* Кнопка "4 more photos" для calendar - позиционируем отдельно */
.project-content.calendar-project .more-photos {
  position: absolute;
  left: 0;
  top: 595px; /* Под видео */
  margin-top: 32px; /* Отступ от видео */
  font-size: 18px;
  letter-spacing: -0.04em;
  z-index: 2;
}

/* Кнопка "go back" для calendar - позиционируем отдельно */
.project-content.calendar-project .project-go-back {
  position: absolute;
  left: 247px; /* 235px + 12px - начало видео */
  top: 607px; /* 595px + 32px + 12px */
  margin-top: 0;
  z-index: 2;
}

/* Левая колонка с 2 маленькими фото */
.project-content.calendar-project .project-left-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 595px; /* Такая же высота как у видео */
}

.project-content.calendar-project .project-small-img {
  width: 235px;
  height: 292px; /* Стандартная высота как в других проектах */
  overflow: hidden;
}

/* Адаптивность для Calendar */

@media (max-width: 1379px) {
  .project-content.calendar-project .project-left-column {
    height: 490px;
  }
  
  .project-content.calendar-project .project-small-img {
    width: 200px;
    height: 248px; /* Стандартная высота для адаптивного */
  }
}

@media (max-width: 1023px) {
  .project-content.calendar-project .project-left-column {
    height: 408px;
  }
  
  .project-content.calendar-project .project-small-img {
    width: 180px;
    height: 223px; /* Стандартная высота для адаптивного */
  }
}

@media (max-width: 767px) {
  .project-content.calendar-project .project-left-column {
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .project-content.calendar-project .project-small-img {
    width: calc(50% - 6px); /* 2 фото в ряд на мобильных */
    height: 200px;
  }
}

/* Стили для проекта Terracotta - структура как у mindplug */
.project-content.terracotta-project .project-left-column {
  grid-column: 1 / span 3 !important;
  width: 977px !important;
  height: 595px !important;
  overflow: hidden;
  margin-bottom: 0;
}

/* Добавляем отступ для terracotta текстового блока */
.project-content.terracotta-project .project-bottom-container {
  margin-top: 32px;
}

.project-content.terracotta-project .project-left-column video,
.project-content.terracotta-project .project-left-column img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Скрываем элементы для terracotta */
.project-content.terracotta-project .project-large-img,
.project-content.terracotta-project .more-photos {
  display: none !important;
}

/* Адаптивность для Terracotta */
@media (max-width: 1379px) {
  .project-content.terracotta-project .project-left-column {
    width: 842px !important;
    height: 490px !important;
  }
  .project-content.terracotta-project .project-bottom-container {
    margin-top: 32px;
  }
}

@media (max-width: 1023px) {
  .project-content.terracotta-project .project-left-column {
    width: 692px !important;
    height: 408px !important;
  }
  .project-content.terracotta-project .project-bottom-container {
    margin-top: 24px;
  }
}

@media (max-width: 767px) {
  .project-content.terracotta-project .project-left-column {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 977 / 595;
    grid-column: 1 !important;
  }
  .project-content.terracotta-project .project-bottom-container {
    margin-top: 16px;
  }
}

/* Стили для проекта Music Zine - классическая структура */
.project-content.music-zine-project .project-text-block {
  display: none !important; /* Скрываем текстовый блок */
}

/* Нижний контейнер для music zine */
.project-content.music-zine-project .project-bottom-container {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-top: 32px;
  grid-template-columns: 1fr !important; /* Переопределяем grid */
}

/* Кнопка "5 more photos" для music zine */
.project-content.music-zine-project .more-photos {
  order: 1;
  align-self: flex-start;
  margin-top: 0;
  font-size: 18px;
  letter-spacing: -0.04em;
}

/* Кнопка "go back" для music zine */
.project-content.music-zine-project .project-go-back {
  order: 2;
  align-self: flex-start;
  justify-self: flex-start;
  width: auto;
}

/* Адаптивность для Music Zine */

@media (max-width: 1379px) {
  .project-content.music-zine-project .project-bottom-container {
    margin-top: 32px;
    gap: 18px;
  }
  
  .project-content.music-zine-project .more-photos {
    font-size: 16px;
  }
  
  .project-content.music-zine-project .back-text {
    font-size: 16px;
  }
}

@media (max-width: 1023px) {
  .project-content.music-zine-project .project-bottom-container {
    margin-top: 24px;
    gap: 16px;
  }
  
  .project-content.music-zine-project .more-photos {
    font-size: 14px;
  }
  
  .project-content.music-zine-project .back-text {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .project-content.music-zine-project .project-bottom-container {
    display: flex !important;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
  }
  
  .project-content.music-zine-project .more-photos {
    order: 1;
    align-self: flex-start;
  }
  
  .project-content.music-zine-project .project-go-back {
    order: 2;
    align-self: flex-start;
  }
}

@media (max-width: 428px) {
  .project-content.music-zine-project .project-bottom-container {
    margin-top: 16px;
    gap: 12px;
  }
}

/* Стили для проекта Vintage - структура как у mindplug */
.project-content.vintage-project .project-left-column {
  grid-column: 1 / span 3 !important;
  width: 977px !important;
  height: 595px !important;
  overflow: hidden;
  margin-bottom: 0;
}

/* Добавляем отступ только для vintage текстового блока */
.project-content.vintage-project .project-bottom-container {
  margin-top: 32px; /* Сохраняем отступ */
}

.project-content.vintage-project .project-left-column img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Скрываем элементы для vintage */
.project-content.vintage-project .project-large-img,
.project-content.vintage-project .more-photos {
  display: none !important;
}

/* Адаптивность для Vintage */
@media (max-width: 1379px) {
  .project-content.vintage-project .project-left-column {
    width: 842px !important; /* 200 + 12 + 600 */
    height: 490px !important;
  }
  .project-content.vintage-project .project-bottom-container {
    margin-top: 32px;
  }
}

@media (max-width: 1023px) {
  .project-content.vintage-project .project-left-column {
    width: 692px !important; /* 180 + 12 + 500 */
    height: 408px !important;
  }
  .project-content.vintage-project .project-bottom-container {
    margin-top: 24px;
  }
}

@media (max-width: 767px) {
  .project-content.vintage-project .project-left-column {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 977 / 595;
    grid-column: 1 !important;
  }
  .project-content.vintage-project .project-bottom-container {
    margin-top: 16px;
  }
}

/* Минималистичная галерея - исправленная версия */
.gallery-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 1000;
  display: none;
  cursor: pointer;
}

.gallery-overlay.active {
  display: block;
}

.gallery-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* Важно: контент не перехватывает клики */
}

.gallery-content img {
  max-width: 90%;
  max-height: 80%;
  object-fit: contain;
  pointer-events: none; /* Изображение не кликабельно */
}

.gallery-nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Навигация не перехватывает клики на фон */
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: white;
  font-size: 32px;
  cursor: pointer;
  pointer-events: all; /* Но стрелки кликабельны */
  opacity: 0.3;
  transition: opacity 0.2s ease;
  padding: 30px;
  z-index: 1001;
}

.gallery-arrow:hover {
  opacity: 1;
}

.gallery-arrow.prev {
  left: 0;
}

.gallery-arrow.next {
  right: 0;
}

.gallery-counter {
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 100%;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
  pointer-events: none;
}

/* Отключаем кастомный курсор в галерее */
.gallery-overlay.active ~ .custom-cursor {
  display: none !important;
}


.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  background-color: #fff;      /* white, not black — difference needs a bright base color */
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  display: none;
  mix-blend-mode: difference;  /* the key addition */
}


/* Показываем курсор только на устройствах с мышью */
@media (hover: hover) and (pointer: fine) {
  .custom-cursor {
    display: block;
  }
}

/* Убираем курсор на всем только для десктопов */
@media (hover: hover) and (pointer: fine) {
  * {
    cursor: none !important;
  }
}

/* ============ 1920px и выше ============ */
@media (min-width: 1920px) {
  .sidebar img {
    width: 380px;
    height: 125px;
  }
  
  .text-block {
    width: 380px;
    height: 540px;
  }
  
  .cards {
    grid-template-columns: repeat(4, 260px);
  }
  
  .card,
  .card img {
    width: 260px;
  }
}

/* ============ 1512px ============ */
@media (max-width: 1511px) and (min-width: 1290px) { /* Добавляем min-width */
  body {
    font-size: 16px;
    line-height: 20px;
  }
  
  .cards {
    grid-template-columns: repeat(4, 220px); /* Оставляем 4 колонки до 1300px */
  }
  
  .card,
  .card img {
    width: 220px;
  }
  
  .sidebar img {
    width: 320px;
    height: 105px;
  }
  
  .text-block {
    width: 320px;
    height: 480px;
  }
  
  .subtitle {
    font-size: 16px;
  }
  
  .contacts {
    font-size: 16px;
  }
  
  .card-title {
    font-size: 16px;
  }
}

/* ============ 1290px ============ */
@media (max-width: 1289px) {
  body {
    font-size: 16px;
    line-height: 20px;
  }
  
  .container {
    padding: 15px;
    gap: 10px;
  }
  
  .sidebar img {
    width: 280px;
    height: 92px;
  }
  
  .contacts {
    gap: 30px;
  }
  
  .label {
    letter-spacing: 0.7em;
  }
  
  .text-block {
    width: 280px;
    height: 420px;
  }
  
  .content {
    height: calc(100vh - 30px);
  }
  
  .cards {
    grid-template-columns: repeat(3, 220px); /* 3 колонки с 1300px */
    justify-content: end;
  }
  
  .card,
  .card img {
    width: 220px;
  }
  
  .dot {
    width: 12px;
    height: 12px;
  }
}

/* ============ 1024px ============ */
@media (max-width: 1023px) {
  body {
    font-size: 14px;
  }
  
  .container {
    grid-template-columns: repeat(12, 1fr);
    padding: 12px;
    /* Убираем min-height для правильной работы сетки */
    min-height: 100vh;
    display: grid;
    align-items: center; /* Центрируем все по вертикали */
  }
  
  .sidebar {
    grid-column: 1 / span 3;
    grid-row: 1;
    align-self: start; /* Логотип вверху */
  }
  
  .sidebar img {
    width: 200px;
    height: 66px;
  }
  
  .contacts {
    grid-column: 1 / span 3;
    grid-row: 2;
    gap: 20px;
    font-size: 14px;
    /* Центрируем контакты */
    align-self: center;
    margin: 0;
  }
  
  .text-block {
    grid-column: 1 / span 3;
    grid-row: 3;
    width: 200px;
    height: 320px;
    font-size: 14px;
    line-height: 18px;
    overflow: visible;
    align-self: end; /* Текст внизу */
    justify-content: flex-end;
  }
  
  .content {
    grid-column: 5 / span 8;
    grid-row: 1 / span 3;
    height: calc(100vh - 24px);
    align-self: start; /* Контент прижимаем к верху */
  }
  
  .cards {
    grid-template-columns: repeat(3, 180px);
    justify-content: end;
  }
  
  .card,
  .card img {
    width: 180px;
  }
  
  .subtitle {
    font-size: 14px;
  }
  
  .label {
    letter-spacing: 0.5em;
  }
  
  .dot {
    width: 10px;
    height: 10px;
  }
  
  .card-title {
    font-size: 14px;
  }
}

/* ============ 768px ============ */
@media (max-width: 767px) {
  body {
    font-size: 14px;
    line-height: 18px;
  }
  
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    padding: 10px;
    gap: 20px; /* Увеличиваем общий gap для лучшего разделения */
  }
  
  .sidebar {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
    margin-bottom: 0;
  }
  
  .sidebar img {
    width: 180px;
    height: 59px;
  }
  
  .contacts {
    grid-column: 1;
    grid-row: 2;
    flex-direction: row;
    justify-content: flex-start;
    gap: 30px;
    margin: 15px 0;
    height: auto;
    font-size: 14px;
  }
  
  .contact {
    flex-direction: row;
    align-items: baseline;
    text-align: left;
  }
  
  /* ВАЖНОЕ ИЗМЕНЕНИЕ: меняем порядок элементов */
  .content {
    grid-column: 1;
    grid-row: 3;
    height: auto; /* Автоматическая высота */
    max-height: 50vh; /* Но ограничиваем максимальную высоту */
    overflow-y: auto;
    margin-bottom: 0; /* Убираем отступ снизу */
  }
  
  .text-block {
    grid-column: 1;
    grid-row: 4; /* Текст идет ПОСЛЕ карточек */
    width: 100%;
    max-width: none;
    height: auto; /* Автоматическая высота */
    min-height: 200px;
    margin-top: 16px !important; /* ТОЧНО добавляем верхний отступ */
    align-self: start;
    font-size: 14px;
    line-height: 18px;
    overflow: visible;
  }
  
  .cards {
    grid-template-columns: repeat(2, 1fr);
    justify-content: start;
    column-gap: 10px;
    row-gap: 20px;
  }
  
  .card,
  .card img {
    width: 100%;
    max-width: none;
  }
  
  .card-title {
    font-size: 14px;
  }
  
  .dot {
    width: 10px;
    height: 10px;
  }
  
  .label {
    letter-spacing: 0.4em;
  }
  
  body {
    overflow: auto;
  }
  
  .custom-cursor {
    display: none !important;
  }
  
  * {
    cursor: auto !important;
  }
}

/* ============ 428px ============ */
@media (max-width: 428px) {
  body {
    font-size: 14px;
    line-height: 18px;
  }
  
  .container {
    padding: 8px;
    gap: 16px; /* Уменьшаем общий gap на маленьких экранах */
  }
  
  .sidebar img {
    width: 160px;
    height: 53px;
  }
  
  .contacts {
    flex-direction: column;
    gap: 12px;
    margin: 12px 0;
    font-size: 14px;
  }
  
  .text-block {
    margin-top: 16px !important; /* Оставляем отступ */
    font-size: 14px;
    line-height: 18px;
    min-height: 150px; /* Немного меньше минимальная высота */
  }
  
  .cards {
    grid-template-columns: 1fr;
    row-gap: 15px;
  }
  
  .card-title {
    font-size: 14px;
  }
  
  .dot {
    width: 10px;
    height: 10px;
    margin-right: 6px;
  }
  
  .subtitle {
    font-size: 14px;
    margin-top: 4px;
  }
  
  .label {
    letter-spacing: 0.3em;
  }
}

/* Убираем лишние отступы для текстового блока в проектах на мобильных */
@media (max-width: 767px) {
  .project-text-block {
    margin-top: 16px;
  }
  
  .project-bottom-container {
    margin-top: 16px !important;
  }
}

/* полька дот */

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 9999;
  overflow: hidden;
}

.preloader-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  /* Динамические колонки и строки */
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: minmax(100px, 1fr);
  gap: 2vw; /* Используем vw для адаптивности */
  box-sizing: border-box;
  place-items: center;
}

.preloader-dot {
  /* Адаптивный размер точек */
  width: min(200px, 19vw, 19vh); /* Максимум 200px, но адаптивно */
  height: min(200px, 19vw, 19vh);
  background: black;
  border-radius: 50%;
  opacity: 1;
}

/* Ряд 1 (нечетный) - колонки 2, 4, 6, 8 */
.preloader-dot-1 { grid-column: 2; grid-row: 1; }
.preloader-dot-2 { grid-column: 4; grid-row: 1; }
.preloader-dot-3 { grid-column: 6; grid-row: 1; }
.preloader-dot-4 { grid-column: 8; grid-row: 1; }

/* Ряд 2 (четный) - колонки 1, 3, 5, 7, 9 */
.preloader-dot-5 { grid-column: 1; grid-row: 2; }
.preloader-dot-6 { grid-column: 3; grid-row: 2; }
.preloader-dot-7 { grid-column: 5; grid-row: 2; }
.preloader-dot-8 { grid-column: 7; grid-row: 2; }
.preloader-dot-9 { grid-column: 9; grid-row: 2; }

/* Ряд 3 (нечетный) - колонки 2, 4, 6, 8 */
.preloader-dot-10 { grid-column: 2; grid-row: 3; }
.preloader-dot-11 { grid-column: 4; grid-row: 3; }
.preloader-dot-12 { grid-column: 6; grid-row: 3; }
.preloader-dot-13 { grid-column: 8; grid-row: 3; }

/* Ряд 4 (четный) - колонки 1, 3, 5, 7, 9 */
.preloader-dot-14 { grid-column: 1; grid-row: 4; }
.preloader-dot-15 { grid-column: 3; grid-row: 4; }
.preloader-dot-16 { grid-column: 5; grid-row: 4; }
.preloader-dot-17 { grid-column: 7; grid-row: 4; }
.preloader-dot-18 { grid-column: 9; grid-row: 4; }

/* Ряд 5 (нечетный) - колонки 2, 4, 6, 8 */
.preloader-dot-19 { grid-column: 2; grid-row: 5; }
.preloader-dot-20 { grid-column: 4; grid-row: 5; }
.preloader-dot-21 { grid-column: 6; grid-row: 5; }
.preloader-dot-22 { grid-column: 8; grid-row: 5; }

/* Ряд 6 (четный) - колонки 1, 3, 5, 7, 9 */
.preloader-dot-23 { grid-column: 1; grid-row: 6; }
.preloader-dot-24 { grid-column: 3; grid-row: 6; }
.preloader-dot-25 { grid-column: 5; grid-row: 6; }
.preloader-dot-26 { grid-column: 7; grid-row: 6; }
.preloader-dot-27 { grid-column: 9; grid-row: 6; }

/* Ряд 7 (нечетный) - колонки 2, 4, 6, 8 */
.preloader-dot-28 { grid-column: 2; grid-row: 7; }
.preloader-dot-29 { grid-column: 4; grid-row: 7; }
.preloader-dot-30 { grid-column: 6; grid-row: 7; }
.preloader-dot-31 { grid-column: 8; grid-row: 7; }

.preloader-letter {
  position: absolute;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 60px;
  font-weight: bold;
  color: black;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  /* УБИРАЕМ transition */
  z-index: 10;
}

/* Анимация размытия для точек */
@keyframes blurOutDots {
  0% { 
    opacity: 1;
    filter: blur(0);
  }
  80% {
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    opacity: 0;
    filter: blur(10px);
    display: none; /* Полностью скрываем после анимации */
  }
}

/* Анимация подъема для буквы */
@keyframes letterSlideUp {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -150%) scale(0.8); /* Уезжает вверх */
  }
}

@keyframes blurOut {
  from { 
    opacity: 1;
    filter: blur(0);
  }
  to { 
    opacity: 0;
    filter: blur(10px);
  }
}

.preloader.slide-up {
  animation: blurOut 0.9s ease forwards;
}