/* Витрина М-СИСТЕМЫ. Ведет изображение — светлый стеклянный корпус в холодных
   тонах; интерфейс отступает и живет в его пустой левой части. Отсюда все
   решения: марка одной строкой в углу, карточки низкие и полупрозрачные,
   ни одного собственного цвета сверх тех, что уже есть в кадре.

   Tektur на названия (выбор Андрея из пяти вариантов, 16.08.2026), Gilroy
   на текст — те же гарнитуры, что у транскрибации: один дом на две системы. */

@font-face{font-family:'Gilroy'; font-weight:400; font-style:normal; font-display:swap;
  src:url('/шрифты/Gilroy-Regular.otf') format('opentype');}
@font-face{font-family:'Gilroy'; font-weight:600; font-style:normal; font-display:swap;
  src:url('/шрифты/Gilroy-Semibold.otf') format('opentype');}
@font-face{font-family:'Gilroy'; font-weight:700; font-style:normal; font-display:swap;
  src:url('/шрифты/Gilroy-Bold.otf') format('opentype');}
/* Запасная — Gilroy, а не системный гротеск: пока Tektur грузится, марка
   не должна мигать чужим характером. */
@font-face{font-family:'Tektur'; font-weight:500; font-style:normal; font-display:swap;
  src:url('/шрифты/Tektur-Medium.ttf') format('truetype');}

:root{
  --navy:#1E3A6B;            /* темно-синий с кадра: им набрана марка */
  --ink:#2B3A55;
  --mute:#5A6B87;
  --черта-цвет:#A7B4CB;
  --небо:#EAF0F7;            /* тон неба в кадре — им же залит запасной фон */
  --стекло:rgba(255,255,255,.74);
  --стекло-край:rgba(255,255,255,.9);
  --контур:rgba(30,58,107,.16);
}
*{box-sizing:border-box;}
html,body{height:100%;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; color:var(--ink);
  font-family:'Gilroy',system-ui,-apple-system,sans-serif; font-weight:400;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}

/* ——— сцена ——— */
/* Изображение — фон, а не <img>: оно занимает первый экран целиком
   и обрезается по центру интереса, а не диктует высоту блока.
   Пока файла нет, виден спокойный градиент в тонах кадра. */
.сцена{
  min-height:100dvh; display:flex;
  background:linear-gradient(160deg,#F4F8FC 0%,var(--небо) 55%,#DCE6F1 100%);
  background-image:url('/фон-широкий.jpg?v=3');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
/* Пелены слева больше нет. Она была нужна прежнему кадру, у которого левая
   треть пустовала; новый занят корпусом целиком, и засветка съедала его.
   Грунт под текстом теперь дают сами карточки — стеклом и размытием. */

.содержимое{
  display:flex; flex-direction:column; justify-content:space-between;
  gap:40px; padding:44px 48px; width:min(680px,100%);
}

/* ——— разделитель ——— */
/* Линейка, а не знак «|». У каждой гарнитуры своя высота и толщина
   вертикальной черты: она то короче прописных, то тоньше их штриха, и знак
   читается как пририсованный. Здесь высота идет от кегля соседнего имени,
   поэтому разделитель везде одинаков. */
.черта{display:inline-block; width:2px; height:.72em; background:var(--черта-цвет);
  border-radius:1px; transform:translateY(.02em); flex:0 0 auto;}

/* ——— марка ——— */
.марка-блок{display:flex; align-items:baseline; gap:13px; flex-wrap:wrap;}
.марка-блок .имя-марки{font-family:'Tektur','Gilroy',sans-serif; font-weight:500;
  font-size:28px; letter-spacing:.02em; color:var(--navy); line-height:1;}
.марка-блок .черта{font-size:28px;}
/* Подпись — тем же Tektur и прописными, что и имя: марка читается одной
   надписью, а не именем со строчной припиской. Мельче и с разрядкой, иначе
   две прописные строки спорят за первое место. */
.марка-блок .подпись{font-family:'Tektur','Gilroy',sans-serif; font-weight:500;
  font-size:14px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--navy); opacity:.82; line-height:1.2;}

/* ——— проекты ——— */
.проекты{display:flex; flex-direction:column; gap:10px;}
.проект{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
  gap:3px 16px; padding:14px 18px; border-radius:10px;
  background:var(--стекло); border:1px solid var(--контур);
  text-decoration:none; color:inherit;
  /* Размытие тут работой, а не украшением: под карточкой идет корпус с
     людьми и дорогой, и без него подпись на них рассыпается. Пелены,
     которая раньше готовила ровный грунт, больше нет — держит стекло. */
  -webkit-backdrop-filter:blur(16px) saturate(115%);
  backdrop-filter:blur(16px) saturate(115%);
  box-shadow:0 6px 20px rgba(30,58,107,.10);
}
/* Марка проекта одной строкой: «М-СИСТЕМА | Транскрибация». Разнесенная
   на две строки, она оставляла линейку висеть в конце первой без пары.
   Родительское имя тише названия — иначе «М-СИСТЕМА» звучит во весь голос
   трижды на одном экране. */
.проект .строка{grid-column:1; display:flex; align-items:baseline; gap:10px;
  flex-wrap:wrap; min-width:0;}
.проект .родитель{font-family:'Tektur','Gilroy',sans-serif; font-weight:500;
  font-size:13px; color:var(--mute); letter-spacing:.02em;}
.проект .строка .черта{font-size:16px; width:1px; height:.95em;
  background:#9AA9C2; transform:translateY(.05em);}
.проект .назв{font-family:'Tektur','Gilroy',sans-serif; font-weight:500;
  font-size:16.5px; color:var(--navy); overflow-wrap:anywhere;}
.проект .суть{grid-column:1; font-size:13px; color:var(--mute);}
.проект .метка{
  grid-column:2; grid-row:1/3; align-self:center;
  font-size:12px; font-weight:600; white-space:nowrap;
  padding:4px 11px; border-radius:20px;
  background:var(--navy); color:#fff;
}
/* Обведенная метка вместо залитой: залитое значит «работает», и путать
   эти два состояния нельзя — иначе «скоро» читается как готовое. */
.проект .метка.тихая{background:transparent; color:var(--mute);
  border:1px solid var(--контур);}

.проект.готов{background:var(--стекло-край); border-color:rgba(30,58,107,.3);}
.проект.готов:hover{background:#fff; border-color:var(--navy);}
.проект.готов:focus-visible{outline:2px solid var(--navy); outline-offset:3px;}
@media (prefers-reduced-motion:no-preference){
  .проект.готов{transition:background-color .14s ease-out,
    border-color .14s ease-out;}
}

/* ——— узкий экран ——— */
/* Вертикальный кадр вместо широкого: на телефоне широкий обрезался бы
   до середины дороги, и корпус — то, ради чего кадр и взят, — пропадал. */
@media (max-width:760px){
  .сцена{
    /* Прозрачная середина шире: под маркой и карточками пелена нужна,
       а посередине она гасила сам корпус. */
    background-image:url('/фон-узкий.jpg?v=3');
  }
  .содержимое{width:100%; padding:30px 20px 26px; gap:0;}
  /* Карточки прижаты к низу: середина вертикального кадра — сам корпус,
     закрывать его нечем. */
  .проекты{margin-top:auto;}
  .марка-блок{gap:2px 10px;}
  .марка-блок .имя-марки{font-size:23px;}
  /* Подпись переносится на свою строку, и линейка повисает в конце первой
     без пары. Она разделитель — без соседа справа не нужна. */
  .марка-блок .черта{display:none;}
  .марка-блок .подпись{font-size:11.5px; letter-spacing:.07em; flex-basis:100%;}
  .проект{padding:12px 15px;}
  .проект .назв{font-size:15.5px;}
  .проект .суть{font-size:12.5px;}
}

/* Экран без запаса высоты (ландшафт на телефоне): марка и карточки
   не должны наезжать друг на друга. */
@media (max-height:520px){
  .содержимое{gap:22px; padding:20px 24px;}
}