/* Современная вёрстка архива leokrokholev — замена вывода Adobe Muse.
 *
 * Задача (формулировка заказчика 2026-07-27): отказ от Muse, современная профессиональная
 * лёгкая вёрстка, при 100% соответствии оригиналу.
 *
 * Что это значит на практике:
 *   — один DOM вместо 3–9 брейкпоинт-копий одного контента;
 *   — раскладка потоком и сеткой вместо абсолютных координат;
 *   — на опорной ширине (1200 и шире) — попиксельное совпадение с оригиналом;
 *   — на любой промежуточной ширине — тот же дизайн, плавно подстроенный, без наездов
 *     и обрезки. Оригинал там разваливается, поэтому сравнивать не с чем: критерий
 *     «не разваливается».
 *
 * Размеры выведены замером живого оригинала на 1200px (report/styles-*.json), а не на глаз.
 * Опорные величины вынесены в переменные — на них держится совпадение с эталоном.
 */

:root {
  --page: 1200px;        /* холст архива: #page{max-width:1200px} */
  --gut: 40px;           /* поле страницы; контент внутри — 1120px */
  --ink: #313131;        /* основной текст */
  --ink-strong: #000;    /* заголовок работы */
  --muted: #7f7f7f;      /* пояснение в заголовке */
  --faint: #b4b4b4;      /* неактивные хлебные крошки */
  --accent: #ff2255;     /* фирменный акцент: текущая крошка */
  --paper: #fff;         /* полосы шапки и подвала */
  --ground: #f4f4f4;     /* фон холста */

  --hdr-h: 110px;        /* высота полосы шапки */
  --ftr-h: 230px;        /* высота полосы подвала */

  /* Подвал у разных страниц оригинала свой: на странице работы иконки 34px с шагом 67,
     на about — 43px с шагом 84. Это данные страницы, поэтому вынесены в переменные
     и переопределяются в разметке. */
  --social-size: 34px;
  --social-gap: 33px;
  --social-top: 93px;
  --copy-gap: 63px;
  --ftr-top: 269px;      /* отступ от контента до полосы подвала — тоже свой у каждой страницы */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 17px;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Полоса во всю ширину окна с центрированным содержимым внутри.
   У Muse это был .browser_width — отдельный слой, высоту которого рантайм считал скриптом. */
.wrap {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* ---------------------------------------------------------------- шапка */

.hdr {
  background: var(--paper);
  height: var(--hdr-h);
}
.hdr__in {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  font-size: 26px;
  line-height: 31px;
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--ink);
  white-space: nowrap;
  margin-top: 40px;
  margin-left: 1px;    /* эталон ставит логотип на 1px правее прочего контента */
}
/* В оригинале «LEO» набрано без разрядки, а «KROKHOLEV» — с 3px. Разница ровно
   3 символа × 3px = 9px, и без неё логотип шире эталона. */
.logo span { letter-spacing: 0; }

.nav { display: flex; gap: 2px; margin-top: 39px; }
.nav a {
  /* Ширина пункта в оригинале задана мастер-шаблоном (112 у первых двух, 113 у прочих),
     а не текстом. Держим её же: иначе на опорной ширине меню разъедется с эталоном. */
  width: 113px;
  height: 40px;
  padding-top: 11px;  /* посадка строки как в эталоне; центрирование по grid давало сдвиг */
  text-align: center;
  font-size: 14px;
  line-height: 17px;
  font-weight: 300;   /* решение заказчика: 100 в оригинале нечитаем, см. css/fonts.css */
  letter-spacing: 3px;
  text-indent: 0.9px; /* разрядка добавляет 3px справа от последней буквы — компенсируем сдвиг центра */
  color: var(--faint);
}
.nav a:nth-child(-n+2) { width: 112px; }
.nav a:hover { color: var(--accent); }

/* Кнопка меню и монограмма — только на узких экранах, см. блок «Телефон» ниже.
   В оригинале это виджет Muse Pamphlet: красный плюс в углу, при открытии — косой крест. */
.plus, .mark { display: none; }

/* ------------------------------------------------------------ содержимое */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  margin-top: 31px;
  height: 20px;
  /* Крошки и заголовок работы в оригинале набраны Trebuchet, а не основным семейством. */
  font-family: Trebuchet, "Trebuchet MS", Tahoma, Arial, sans-serif;
  font-size: 14px;
  line-height: 17px;
  color: var(--faint);
}
/* Ширина каждой крошки — данные страницы: в оригинале дизайнер растягивал блоки вручную,
   и от них зависят позиции соседей. Приходит из разметки как --w, на узких экранах
   отпускается по тексту. */
.crumbs > * { width: var(--w, auto); flex: 0 0 auto; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--accent); }

.title {
  margin: 60px 0 0;
  height: 17px;
  font-family: Trebuchet, "Trebuchet MS", Tahoma, Arial, sans-serif;
  font-size: 16px;
  line-height: 17px;
  font-weight: 700;
  color: var(--ink-strong);
}
.title span { color: var(--muted); font-weight: 700; }

/* --------------------------------------------------------------- слайдшоу */

.show {
  position: relative;
  margin-top: 23px;
  /* Кадр в эталоне на 1px шире поля страницы и начинается на 1px левее. */
  margin-left: -1px;
  /* Пропорция кадра снята с оригинала: 1121×955 на опорной ширине.
     aspect-ratio держит её на любой ширине — этого у Muse не было вовсе. */
  aspect-ratio: 1121 / 955;
}
.show__track { position: relative; width: 100%; height: 100%; }
.show__track img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Оригинал показывает файл в натуральном размере (700×747) по центру кадра 1121×955 —
     не растягивает и не обрезает. scale-down делает ровно это: натуральный размер, пока
     помещается, и вписывание, когда кадр становится уже картинки. Отсюда же берётся
     резиновость: на узком экране картинка сама ужмётся, а не вылезет за край. */
  object-fit: scale-down;
  opacity: 0;
  transition: opacity 500ms ease;   /* тот же тайминг, что у Muse: замерено 499.7 мс */
}
.show__track img.is-on { opacity: 1; }

.show__dots {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 2;
}
.show__dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: url(../images/u602014.png) no-repeat 0 0;
}
/* Пять точек в оригинале ссылались на пять КОПИЙ одной картинки (совпадает md5).
   Здесь одна картинка на состояние. */
.show__dots button[aria-current] { background-image: url(../images/u602014-a.png); }

.show__arr {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  cursor: pointer;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 0 0;
  z-index: 2;
}
.show__arr--prev { left: calc(var(--gut) * -1 + 1px); background-image: url(../images/arrow_left2-u601752.png); }
.show__arr--next { right: calc(var(--gut) * -1); background-image: url(../images/arrow_right2-u601740.png); }

/* ------------------------------------------------------------ главная: плитки
 *
 * Регулярная сетка 4×N. У Muse каждая плитка стояла на своих абсолютных координатах,
 * и рядов было столько же, сколько копий макета. Здесь одна сетка, которая сама
 * перестраивается: 4 колонки → 3 → 2 → 1 по мере сужения.
 *
 * Опорные величины: плитка 265×265, шаг по горизонтали 285 (значит зазор 20),
 * подпись через 19px под плиткой, следующий ряд через 61px после подписи.
 */

.tiles {
  margin-top: 130px;                       /* первый ряд начинается на y=240 при шапке 110 */
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* на 1120px это ровно 265px при зазоре 20 */
  column-gap: 20px;
  row-gap: 64px;             /* шаг ряда 365 = 265 + 19 + 17 + 64 */
}

.tile { display: block; }
.tile__pic {
  display: block;
  position: relative;
  aspect-ratio: 1;        /* плитка квадратная на любой ширине */
  overflow: hidden;       /* картинки крупнее квадрата — обрезаются, как в оригинале */
  background: var(--paper);
}
/* Картинка лежит в плитке ровно так, как её положил Muse: свои смещение и размер
   у каждой. Доли (--fx/--fy/--fw/--fh) приходят из разметки, поэтому кадрирование
   сохраняется и когда плитка ужимается вместе со страницей. */
.tile__pic > img,
.tile__pic .show__track img {
  position: absolute;
  left: var(--fx, 0);
  top: var(--fy, 0);
  width: var(--fw, 100%);
  height: var(--fh, 100%);
  object-fit: var(--fit, cover);
}
.tile__cap {
  display: block;
  text-transform: uppercase;   /* в оригинале подписи заглавными, сам текст — как есть */
  margin-top: 19px;
  height: 17px;
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  color: var(--faint);
  overflow: hidden;
}
.tile:hover .tile__cap { color: var(--accent); }

/* Плитка-слайдшоу: тот же механизм, что у большого кадра на странице работы. */
.tile__pic.show { margin: 0; aspect-ratio: 1; }
.tile__pic.show .show__track { position: absolute; inset: 0; }

/* ------------------------------------------------------- страница «о себе»
 *
 * Две колонки: текст слева, фотография справа во всю высоту блока.
 * У Muse это были два абсолютно позиционированных блока; здесь — сетка,
 * которая на узком экране складывается в одну колонку.
 */

.about {
  background: var(--paper);   /* блок контента в оригинале белый, а не в цвет холста */
  margin-top: 150px;                  /* блок начинается на y=260 при шапке 110 */
  display: grid;
  /* Доли, а не пиксели: на опорной ширине 509fr/611fr от 1120px дают ровно 509 и 611,
     как в оригинале, но при сужении колонки ужимаются вместе со страницей.
     С жёсткими 509px/611px блок не помещался и вылезал за край на 696px. */
  grid-template-columns: 509fr 611fr;
  min-height: 716px;
}
.about__text {
  padding: 49px 0 0 50.141px;         /* текст начинается на 130.141,309 — дробь важна:
                                         при ровных 50px буквы сдвигаются на 0.141px и
                                         субпиксельное сглаживание красит их иначе */
  font-family: Verdana, Geneva, sans-serif;
  font-size: 16px;
  line-height: 22px;
  color: var(--ink-strong);
}
.about__text { min-width: 0; }   /* иначе длинная строка распирает колонку сетки */
.about__text p { margin: 0; max-width: 414px; }
.about__text a { color: var(--ink); text-decoration: underline; }
.about__text a:hover { color: var(--accent); }
.about__pic {
  background: url(../images/cover_blog_my13.jpg) center / cover no-repeat;
}

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

.ftr {
  background: var(--paper);
  margin-top: var(--ftr-top);
  height: var(--ftr-h);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ftr__social {
  display: flex;
  gap: var(--social-gap);
  margin-top: var(--social-top);
}
.ftr__social img { width: var(--social-size); height: var(--social-size); }
.ftr__social a:hover { opacity: .7; }
.ftr__copy {
  margin: var(--copy-gap) 0 0;
  align-self: stretch;   /* блок во всю ширину окна, текст по центру — как в эталоне */
  height: 40px;
  text-align: center;
  font-size: 14px;
  line-height: 17px;
  font-weight: 100;
  color: var(--ink);
}

/* =================================================================
 * Резиновость — то, чего у оригинала не было ни на одной ширине.
 *
 * Muse рисовал 3–9 отдельных макетов фиксированной ширины и переключал их
 * медиазапросами; между ними раскладка либо не помещалась, либо тонула в пустоте.
 * Здесь один макет, который течёт непрерывно, а брейкпоинты меняют только то,
 * что действительно должно меняться: раскладку меню и поля страницы.
 * ================================================================= */

/* Планшет и узкий ноутбук: поля ужимаются, меню сохраняется. */
@media (max-width: 1100px) {
  :root { --gut: clamp(16px, 3.6vw, 40px); }
  /* width, а не min-width: опорная ширина пункта задана жёстко ради совпадения с эталоном,
     и отпустить её надо тем же свойством, иначе меню не ужмётся и вылезет за край. */
  .nav a { width: auto; min-width: 0; text-indent: 0; padding-inline: clamp(6px, 1.5vw, 20px); }
  .nav { gap: 0; }
  .logo { font-size: clamp(19px, 2.4vw, 26px); letter-spacing: clamp(1px, .28vw, 3px); }
  /* Стрелки внутрь кадра: за его пределами им уже нет места. */
  .show__arr--prev { left: 8px; }
  .show__arr--next { right: 8px; }
  .tiles { grid-template-columns: repeat(3, 1fr); row-gap: clamp(28px, 5vw, 61px); }
  .about { margin-top: clamp(40px, 12vw, 150px); min-height: 0; }
  .about__text { padding: clamp(20px, 4vw, 49px) clamp(16px, 4vw, 50px); }
  .ftr { margin-top: clamp(60px, 22vw, 269px); }
  .ftr__social { gap: clamp(12px, 3vw, 33px); margin-top: clamp(40px, 8vw, 93px); }
}

/* Телефон.
 *
 * Оформление здесь взято у оригинала, а не придумано заново: на узком экране Muse
 * показывает монограмму вместо надписи, а меню открывает виджетом Pamphlet — красный
 * плюс в углу, при нажатии подложка на весь экран, косой крест и пункты столбиком.
 * Все размеры и цвета замерены на bp_360 оригинала.
 */
@media (max-width: 720px) {
  :root { --hdr-h: 200px; --ftr-h: auto; }
  .hdr { position: relative; }
  /* padding, а не margin у монограммы: внешний отступ первого потомка выходит наружу
     (схлопывание полей), выталкивает белую полосу вниз, и над ней проступает фон
     страницы — та самая серая полоса, которой нет в оригинале. */
  .hdr__in { position: relative; height: var(--hdr-h); display: block; padding: 30px 0 0; }

  /* Надпись уступает место монограмме. */
  .logo { display: none; }
  .mark { display: block; width: 105px; margin-inline: auto; }
  .mark img { width: 105px; height: 128px; }

  /* Кнопка меню: плюс из двух полос 30×11 и 11×30, левый верхний угол.
     fixed — как в оригинале (#u609974: position:fixed, z-index:100000): кнопка
     закреплена на экране и при прокрутке остаётся на месте. */
  .plus {
    display: block;
    position: fixed;
    left: 6px;
    top: 20px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    z-index: 100;
  }
  .plus::before, .plus::after {
    content: "";
    position: absolute;
    background: var(--accent);
    transition: rotate 200ms ease;
  }
  .plus::before { left: 10px; top: 0;  width: 11px; height: 30px; }   /* вертикальная */
  .plus::after  { left: 0;  top: 10px; width: 30px; height: 11px; }   /* горизонтальная */

  /* Открытое меню: подложка во весь экран, крест по центру, пункты столбиком. */
  .nav {
    position: fixed;
    inset: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 17px;              /* шаг между пунктами 48px = 31 высота + 17 */
    padding-top: 234px;      /* первый пункт на той же высоте, что в оригинале */
    background: rgb(255 255 255 / .93);
    z-index: 10;
    overflow-y: auto;
  }
  .nav:not(.is-open) { display: none; }
  /* Перебивает десктопное правило ширины первых двух пунктов (112px). */
  .nav a, .nav a:nth-child(-n+2) {
    width: 186px;
    height: 31px;
    padding: 0;
    text-indent: 0;
    font-family: Trebuchet, "Trebuchet MS", Tahoma, Arial, sans-serif;
    font-size: 26px;
    line-height: 31px;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--ink-strong);
  }

  /* При открытом меню плюс превращается в косой крест и встаёт по центру. */
  .plus[aria-expanded="true"] {
    left: 50%;
    top: 147px;
    translate: -50% 0;
    width: 37px;
    height: 37px;
  }
  .plus[aria-expanded="true"]::before { left: 13px; width: 11px; height: 37px; rotate: 45deg; }
  .plus[aria-expanded="true"]::after  { top: 13px; width: 37px; height: 11px; rotate: 45deg; }

  /* Две колонки складываются в одну: снимок под текстом. */
  .tiles { grid-template-columns: repeat(2, 1fr); column-gap: 12px; margin-top: clamp(24px, 6vw, 130px); }
  .tile__cap { font-size: 12px; margin-top: 12px; }
  .about { grid-template-columns: 1fr; }
  .about__pic { min-height: 300px; }
  .crumbs { gap: 14px; font-size: 13px; height: auto; margin-top: 20px; }
  .title { margin-top: 26px; height: auto; font-size: 15px; }
  .show { margin-top: 16px; }
  .show__arr { width: 32px; height: 32px; background-size: contain; }
  .ftr { padding-bottom: 28px; }
  .ftr__social { flex-wrap: wrap; justify-content: center; }
  .ftr__copy { margin-top: 24px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .show__track img { transition: none; }
}