/* scromno studio — сетка взята из макета 1920×1080: 1 единица макета = var(--u) */

/* Courier Prime (лицензия OFL, fonts/OFL.txt) — замена Courier New там, где его нет (Android).
   Браузер скачивает файл только если Courier New на устройстве не нашёлся. */
@font-face { font-family: "Courier Prime"; src: url(fonts/courier-prime-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url(fonts/courier-prime-700.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --u: calc(100vw / 1920);
  --ink: rgba(0, 0, 0, 0.7);
  --font: "Courier New", "Courier Prime", Courier, monospace;
  --text: max(14px, calc(20.83 * var(--u)));
  --title: max(16px, calc(24.8 * var(--u)));
}

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

html, body { background: #fff; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: var(--text);
  line-height: 1.4;
  letter-spacing: -0.025em;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* при наведении текст ссылок и кнопок становится жирным; Courier New моноширинный, поэтому текст не сдвигается */
a:hover, button:hover:not(:disabled), a:focus-visible, button:focus-visible { font-weight: bold; }
.top a.is-active { font-weight: bold; }

/* ---------- Курсор-квадратик ---------- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  html, body, a, button { cursor: none; }
  .cursor {
    display: block;
    position: fixed;
    top: 0; left: 0;
    width: max(12px, calc(20 * var(--u)));
    height: max(12px, calc(20 * var(--u)));
    background: #000;
    pointer-events: none;
    z-index: 1000;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .2s, width .15s, height .15s;
  }
  .cursor.is-visible { opacity: 1; }
  .cursor.is-link { width: max(8px, calc(12 * var(--u))); height: max(8px, calc(12 * var(--u))); }
}

/* ---------- Шапка ---------- */
.top {
  position: fixed;
  top: calc(30 * var(--u));
  left: calc(30 * var(--u));
  right: calc(31 * var(--u));
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: calc(var(--text) * .8);
  z-index: 50;
  pointer-events: none;
}
.top a { pointer-events: auto; }
.top sup { font-size: .55em; font-weight: normal; vertical-align: .9em; margin-left: .25em; }
.top a.is-active { text-decoration: underline; text-underline-offset: .25em; }

/* ---------- Главная: коллаж ---------- */
.collage {
  position: relative;
  height: calc(var(--collage-h, 2928) * var(--u));
  min-height: 100vh;
  /* по бокам обрезаем; вниз фото может уйти за край коллажа — под текст футера */
  overflow-x: clip;
}
/* скрытые пустые места не оставляют пустоты: высота по нижнему видимому фото + 233 как в макете */
body:not(.is-editing) .collage:has(.work--home-05.is-empty) { --collage-h: 2529; }
body:not(.is-editing) .collage:has(.work--home-05.is-empty):has(.work--home-04.is-empty) { --collage-h: 1916; }
body:not(.is-editing) .collage:has(.work--home-05.is-empty):has(.work--home-04.is-empty):has(.work--home-03.is-empty) { --collage-h: 1261; }
.work {
  position: absolute;
  display: block;
}
.work__link { position: relative; display: block; width: 100%; height: 100%; }
.work__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work__hover {
  position: absolute;
  inset: var(--grow);
  width: calc(100% - 2 * var(--grow));
  height: calc(100% - 2 * var(--grow));
  object-fit: cover;
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.work__title {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: var(--title);
  color: #000;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
/* пустое место для фото: посетителям не видно, редактору — пунктирная рамка */
.work.is-empty { display: none; }
.is-editing .work.is-empty { display: block; outline: 1px dashed rgba(0,0,0,.35); outline-offset: -1px; }
.work.is-empty .work__hover { display: none; }
.work:hover .work__hover, .work:hover .work__title,
.work:focus-visible .work__hover, .work:focus-visible .work__title { opacity: 1; }

/* позиции из макета */
.work--beregovoy { left: calc(var(--pos-x, 153) * var(--u)); top: calc(var(--pos-y, -68) * var(--u)); width: calc(528 * var(--u)); height: calc(793 * var(--u)); --grow: calc(-9 * var(--u)); z-index: 2; }
.work--academy   { left: calc(var(--pos-x, 837) * var(--u)); top: calc(var(--pos-y, 334) * var(--u)); width: calc(1034 * var(--u)); height: calc(694 * var(--u)); --grow: calc(-6 * var(--u)); z-index: 1; }
.work--home-03   { left: calc(var(--pos-x, 126) * var(--u)); top: calc(var(--pos-y, 1144) * var(--u)); width: calc(768 * var(--u)); height: calc(539 * var(--u)); --grow: calc(-6 * var(--u)); }
.work--home-04   { left: calc(var(--pos-x, 1221) * var(--u)); top: calc(var(--pos-y, 1325) * var(--u)); width: calc(650 * var(--u)); height: calc(971 * var(--u)); --grow: calc(-6 * var(--u)); }
.work--home-05   { left: calc(var(--pos-x, 229) * var(--u)); top: calc(var(--pos-y, 1909) * var(--u)); width: calc(864 * var(--u)); height: calc(786 * var(--u)); --grow: calc(-6 * var(--u)); }

.work__title[hidden] { display: none; }

/* перемещение фото редактором (только компьютер) */
.is-editing .work.is-movable .work__link { cursor: move; }
.work.is-dragging { z-index: 4; opacity: .85; }
.work.is-dragging .work__hover, .work.is-dragging .work__title { opacity: 0 !important; }
.move-bar { position: absolute; left: 8px; top: 8px; z-index: 11; display: flex; gap: 4px; }
.move-bar[hidden] { display: none; }
.move-bar button { width: 36px; height: 36px; font: inherit; font-size: 20px; line-height: 1; color: #000; background: #fff; border: 0; }

/* стрелки карусели: видны, когда у фото больше одного кадра */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: calc(18 * var(--u));
  height: calc(31 * var(--u));
  min-width: 10px; min-height: 18px;
  background: none;
  border: 0;
  z-index: 3;
}
.arrow svg { display: block; width: 100%; height: 100%; }
.arrow--prev { left: calc(6 * var(--u)); }
.arrow--next { right: calc(4 * var(--u)); }
.arrow[hidden] { display: none; }
/* первое фото уходит за верх экрана: стрелки по центру видимой части, как в макете */
.work--beregovoy .arrow { top: calc(381 * var(--u)); transform: none; }

/* ---------- Страница проекта ---------- */
.project__text {
  position: fixed;
  left: calc(29 * var(--u));
  top: calc(331 * var(--u));
  width: calc(470 * var(--u));
  white-space: pre-line;
}
.project__text p + p { margin-top: 1.4em; }
.project__gallery {
  margin-left: calc(531 * var(--u));
  width: calc(860 * var(--u));
}
.project__gallery img { display: block; width: 100%; height: auto; }
/* белая полоса 2px между фото */
.project__gallery img + img { margin-top: 2px; }

/* ---------- Info ---------- */
.info {
  padding-top: calc(331 * var(--u));
  text-align: center;
}
.info__about { margin-bottom: 1.4em; }
.team {
  display: flex;
  justify-content: center;
  gap: calc(82 * var(--u));
  margin-top: calc(170 * var(--u));
  padding-bottom: calc(120 * var(--u));
  text-align: left;
}
.person { width: calc(220 * var(--u)); min-width: 160px; }
.person img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: calc(40 * var(--u)); }
.person p { white-space: nowrap; }
/* info в футере главной */
html { scroll-behavior: smooth; }
/* отступ от последнего фото: 233 под фото в коллаже + 117 здесь = 350 (в 1,5 раза больше макета) */
.info--footer { position: relative; padding-top: calc(117 * var(--u)); scroll-margin-top: calc(120 * var(--u)); }
/* текст футера всегда поверх фото; сквозь пустые места футера фото можно взять мышью */
.info--footer { z-index: 5; pointer-events: none; }
.info--footer a, .info--footer img, .info--footer button, .info--footer .photo-edit { pointer-events: auto; }
/* ссылка на вход для редакторов: правый нижний угол футера, размер как в шапке */
.login-link {
  position: absolute;
  right: calc(31 * var(--u));
  bottom: calc(30 * var(--u));
  font-size: calc(var(--text) * .8);
}

/* ---------- Редактор фото (виден только после входа) ---------- */
.project__gallery, .person { position: relative; }
.photo-edit { position: absolute; z-index: 10; }
.photo-edit button { display: block; font: inherit; color: #000; background: #fff; border: 0; }
.photo-edit .photo-edit__add { width: 36px; height: 36px; font-size: 22px; line-height: 1; }
.photo-edit__menu { position: absolute; right: 0; bottom: calc(100% + 4px); background: #fff; }
.photo-edit__menu[hidden] { display: none; }
.photo-edit__menu button { width: 100%; padding: 8px 12px; text-align: left; white-space: nowrap; }
.photo-edit__form { padding: 10px 12px; width: min(300px, calc(100vw - 48px)); }
.photo-edit__form label { display: block; margin-bottom: 8px; font-size: 12px; color: var(--ink); }
.photo-edit__form input { display: block; width: 100%; margin-top: 2px; padding: 4px 0; font: inherit; font-size: 14px; color: #000; background: none; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; outline: 0; }
.photo-edit__form input:focus { border-bottom-color: #000; }
.photo-edit__form .photo-edit__actions { display: flex; gap: 12px; }
.photo-edit__form .photo-edit__actions button { width: auto; padding: 4px 0; text-decoration: underline; text-underline-offset: .25em; }
/* пустая галерея нового проекта: редактору видно место под фото */
.is-editing .project__gallery.is-empty { min-height: 50vh; outline: 1px dashed rgba(0,0,0,.35); outline-offset: -1px; }
/* окно правки текста проекта */
.project-edit { position: fixed; left: 12px; bottom: 56px; z-index: 70; width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 80px); overflow: auto; padding: 14px 16px; background: #fff; box-shadow: 0 2px 16px rgba(0,0,0,.15); font-size: 14px; }
.project-edit[hidden] { display: none; }
.project-edit label { display: block; margin-bottom: 12px; font-size: 12px; }
.project-edit input, .project-edit textarea { display: block; width: 100%; margin-top: 4px; padding: 6px 0; font: inherit; font-size: 14px; color: #000; background: none; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; outline: 0; resize: vertical; }
.project-edit textarea { border: 1px solid var(--ink); padding: 6px 8px; line-height: 1.4; }
.project-edit p { margin: -6px 0 12px; font-size: 12px; opacity: .7; }
.project-edit__actions { display: flex; gap: 16px; }
.project-edit__actions button { font: inherit; color: inherit; background: none; border: 0; padding: 4px 0; text-decoration: underline; text-underline-offset: .25em; }
@media (pointer: coarse) { .photo-edit .photo-edit__add { width: 44px; height: 44px; } }

.edit-bar {
  position: fixed;
  left: 12px; bottom: 12px;
  z-index: 60;
  display: flex;
  gap: 12px;
  max-width: calc(100vw - 24px);
  padding: 6px 10px;
  background: #fff;
  font-size: 12px;
}
.edit-bar button { font: inherit; color: inherit; background: none; border: 0; text-decoration: underline; text-underline-offset: .25em; white-space: nowrap; }

/* ---------- Вход ---------- */
.login { display: flex; flex-direction: column; gap: 16px; width: min(320px, 100%); margin: 0 auto; text-align: left; }
.login label { display: block; }
.login label[hidden] { display: none; }
.login input { display: block; width: 100%; margin-top: 4px; padding: 8px 0; font: inherit; color: inherit; background: none; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; outline: 0; }
.login input:focus { border-bottom-color: #000; }
.login button { align-self: flex-start; font: inherit; color: inherit; background: none; border: 0; padding: 8px 0; text-decoration: underline; text-underline-offset: .25em; }
.login button:disabled { opacity: .5; }

/* ---------- Телефоны и узкие экраны ---------- */
@media (max-width: 599px), (max-width: 900px) and (max-height: 599px) {
  :root { --text: 14px; --title: 16px; }
  /* шапка — белая полоса сверху, чтобы не наезжала на фото при прокрутке; сверху 16px + 120% = 35.2px */
  .top { top: 0; left: 0; right: 0; padding: 35.2px 16px 12px; background: #fff; }

  .collage { height: auto; min-height: 0; overflow: visible; padding: 75.2px 16px 32px; display: flex; flex-direction: column; gap: 32px; }
  .work { position: relative; left: auto; top: auto; width: 100%; height: auto; --grow: 0px; }
  .work__link { height: auto; }
  .work--beregovoy .work__img { aspect-ratio: 528 / 793; height: auto; }
  .work--academy .work__img { aspect-ratio: 1034 / 694; height: auto; }
  .work--home-03 .work__img { aspect-ratio: 768 / 539; height: auto; }
  .work--home-04 .work__img { aspect-ratio: 650 / 971; height: auto; }
  .work--home-05 .work__img { aspect-ratio: 864 / 786; height: auto; }
  /* на телефоне наведения нет: мозаику прячем, название проекта — подписью под фото */
  .work__hover { display: none; }
  .work__title {
    position: static; display: block; transform: none; opacity: 1;
    margin-top: 10px; font-size: var(--text); white-space: normal;
    color: inherit; text-decoration: none;
  }
  /* стрелки: увеличенная зона нажатия 44px, сама стрелка остаётся маленькой */
  /* стрелки по центру фото, подпись под фото не считается */
  .work { --title-h: 30px; }
  .work.no-title { --title-h: 0px; }
  .work .arrow { top: calc((100% - var(--title-h)) / 2); transform: translateY(-50%); width: 44px; height: 44px; padding: 10px 15px; }
  .arrow--prev { left: 0; } .arrow--next { right: 0; }

  .project__text { position: static; width: auto; padding: 91.2px 16px 32px; }
  .project__gallery { margin: 0; width: 100%; }

  .info { padding: 139.2px 16px 0; }
  .team { margin-top: 64px; gap: 24px; padding-bottom: 48px; flex-wrap: wrap; }
  .person { width: calc(50% - 12px); min-width: 0; }
  .person p { white-space: normal; word-break: break-word; }
  .person img { margin-bottom: 12px; }
  /* на телефоне не поверх фото, а в конце страницы */
  .info--footer { padding: 64px 16px 0; scroll-margin-top: 60px; } /* 32 коллажа + 64 = 96, в 1,5 раза больше прежнего */
  .login-link { position: static; display: block; width: max-content; margin: 0 0 20px auto; padding: 12px 0; }
}

/* ---------- Планшеты ---------- */
@media (min-width: 600px) and (max-width: 900px) and (min-height: 600px),
       (min-width: 901px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  :root { --text: 15px; --title: 16px; --side: 24px; --first: .56; }
  .top { top: 0; left: 0; right: 0; padding: 24px var(--side) 16px; background: #fff; }
  .top a { padding: 12px 0; margin: -12px 0; }

  .collage { height: auto; min-height: 0; overflow: visible; padding: 88px var(--side) 48px; display: flex; flex-direction: column; gap: 48px; }
  .work { position: relative; left: auto; top: auto; height: auto; --grow: 0px; }
  .work__link { height: auto; }
  .work--beregovoy { width: calc((100vw - 2 * var(--side)) * var(--first)); }
  .work--academy { width: 78%; align-self: flex-end; }
  .work--beregovoy .work__img { aspect-ratio: 528 / 793; height: auto; }
  .work--academy .work__img { aspect-ratio: 1034 / 694; height: auto; }
  .work--home-03 { width: 70%; }
  .work--home-04 { width: 56%; align-self: flex-end; }
  .work--home-05 { width: 78%; }
  .work--home-03 .work__img { aspect-ratio: 768 / 539; height: auto; }
  .work--home-04 .work__img { aspect-ratio: 650 / 971; height: auto; }
  .work--home-05 .work__img { aspect-ratio: 864 / 786; height: auto; }
  /* на планшете наведения нет: мозаику прячем, название проекта — подписью под фото */
  .work__hover { display: none; }
  .work__title {
    position: static; display: block; transform: none; opacity: 1;
    margin-top: 12px; font-size: var(--text); white-space: normal;
    color: inherit; text-decoration: none;
  }
  /* стрелки: зона нажатия 44px по центру фото */
  .work { --title-h: 33px; }
  .work.no-title { --title-h: 0px; }
  .work .arrow { top: calc((100% - var(--title-h)) / 2); transform: translateY(-50%); width: 44px; height: 44px; padding: 10px 15px; }
  .arrow--prev { left: 0; } .arrow--next { right: 0; }

  /* проект: описание над галереей, в две колонки */
  .project__text { position: static; width: auto; display: grid; grid-template-columns: 1fr 2fr; gap: var(--side); padding: 104px var(--side) 48px; }
  .project__text p + p { margin-top: 0; }
  .project__gallery { margin: 0 var(--side); width: auto; padding-bottom: var(--side); }

  .info { padding: 200px var(--side) 0; }
  .info--footer { padding: 96px var(--side) 0; scroll-margin-top: 80px; } /* 48 + 96 = 144, в 1,5 раза больше */
  .team { margin-top: 96px; gap: 6vw; padding-bottom: 72px; }
  .person { width: min(30vw, 240px); min-width: 0; }
  .person img { margin-bottom: 16px; }

  /* горизонтальный планшет */
  @media (orientation: landscape) {
    :root { --first: .36; }
    .collage { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6vw 0; }
    .work--academy { width: 58%; margin-top: 12vw; align-self: auto; }
    .work--home-03 { width: 44%; }
    .work--home-04 { width: 36%; margin-top: 8vw; align-self: auto; }
    .work--home-05 { width: 48%; margin-left: 6%; }
    /* подтягивается вверх, только когда над ним оба фото: иначе наедет на Academy */
    .work--home-03:not(.is-empty) + .work--home-04:not(.is-empty) + .work--home-05 { margin-top: -12vw; }

    /* как на десктопе: текст закреплён слева, фото прокручиваются справа */
    .project__text { position: fixed; display: block; left: var(--side); top: 104px; width: 28vw; padding: 0; }
    .project__text p + p { margin-top: 1.4em; }
    .project__gallery { margin: 0 var(--side) 0 32vw; padding-bottom: var(--side); }
    .project__gallery img:first-child { margin-top: 88px; }

    .info { padding-top: 136px; }
    .info--footer { padding-top: 60px; } /* 48 + 60 = 108, в 1,5 раза больше */
    .team { margin-top: 64px; }
  }
}