/* ==========================================================
   ШРИФТ
   Montserrat лежит в assets/fonts/ рядом с сайтом, а не грузится
   с Google: иначе страница перестаёт открываться из папки и отдаёт
   запрос на чужой домен. Подключены только кириллица и латиница —
   других символов в текстах нет. Начертания настоящие, 400 и 700.
   ========================================================== */

@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/montserrat-cyrillic-400.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/montserrat-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/montserrat-cyrillic-700.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/montserrat-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/montserrat-cyrillic-400-italic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/montserrat-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================
   Елизавета Кистень — стили главной
   Всё заперто внутри .lk — можно безопасно добавлять чужие блоки рядом
   ========================================================== */

.lk {
  /* ---- токены ---- */
  --ink:      #0A0A0A;
  --paper:    #FAF9F4;  /* газетная бумага, почти белая */
  --card:     transparent;  /* карточки без заливки — бумага и текстура проходят насквозь */
  --lemon:    #EDFF27;
  --muted:    #6B6760;   /* было #85817A — на бумаге не дочитывался */
  --rule:     #E1DED4;
  /* пунктир рамок и разделителей — те же чернила, но на 40%: сплошь
     чёрные пунктиры рябили. Не новый цвет, а ослабленный --ink. */
  --dash:     color-mix(in srgb, var(--ink) 40%, transparent);

  --pad:      56px;
  --gap:      44px;   /* половина, вторая половина — паддинг у .lk-main */
  --side-w:   265px;
  --sec-gap:  88px;   /* линий между разделами нет — их разводит воздух,
                         втрое больше, чем от заголовка до карточек */

  /* ---- каркас ---- */
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;

  max-width: 1440px;
  margin: 0 auto;
  padding: 48px var(--pad);
  box-sizing: border-box;

  background: var(--paper);
  color: var(--ink);
  font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

.lk p,
.lk h1, .lk h2, .lk h3,
.lk ul, .lk figure, .lk blockquote { margin: 0; padding: 0; }

.lk ul { list-style: none; }

.lk a {
  color: inherit;
  text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}

.lk a:focus-visible,
.lk button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ==========================================================
   ЛЕВАЯ КОЛОНКА
   ========================================================== */

.lk-side {
  position: sticky;
  top: 40px;
  align-self: start;

  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vh, 40px);

  /* колонка ровно по высоте окна: контакты внизу всегда на виду,
     скроллить за ними не нужно */
  height: calc(100vh - 80px);
}

/* текст и ссылки не сжимаются — ужимается только фото */
.lk-ident,
.lk-nav,
.lk-contacts { flex: none; }

.lk-ident { display: flex; flex-direction: column; gap: 12px; }

.lk-name a { display: inline; }

.lk-name {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .5px;
}

/* лимонная подсветка имени — не блок, а маркер по тексту */
.lk-mark {
  background: var(--lemon);
  padding: 3px 8px 3px 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-color .12s ease, color .12s ease;
}

/* на ховер инвертируется — как кнопки, единая логика на всей странице */
.lk-name a:hover .lk-mark,
.lk-name a:focus-visible .lk-mark {
  background: var(--ink);
  color: var(--paper);
}

/* Имя разобрано на буквы, у каждой свой `transition-delay` — поэтому
   на чёрном они розовеют не слева направо, а вразнобой. Задержки
   перемешаны вручную: это перестановка шага 0.03s, а не случайные
   числа, иначе пришлось бы звать JS ради украшения.
   Буквы обёрнуты в span, поэтому у ссылки есть aria-label, а сама
   надпись помечена aria-hidden: иначе скринридер читает по буквам. */
.lk-mark span { transition: color .16s ease; }

.lk-name a:hover .lk-mark span,
.lk-name a:focus-visible .lk-mark span { color: var(--lk-cursor); }

.lk-mark span:nth-child(1)  { transition-delay: .27s; }
.lk-mark span:nth-child(2)  { transition-delay: .06s; }
.lk-mark span:nth-child(3)  { transition-delay: .42s; }
.lk-mark span:nth-child(4)  { transition-delay: .15s; }
.lk-mark span:nth-child(5)  { transition-delay: .33s; }
.lk-mark span:nth-child(6)  { transition-delay: 0s;   }
.lk-mark span:nth-child(7)  { transition-delay: .21s; }
.lk-mark span:nth-child(8)  { transition-delay: .45s; }
.lk-mark span:nth-child(9)  { transition-delay: .09s; }
.lk-mark span:nth-child(10) { transition-delay: .36s; }
.lk-mark span:nth-child(11) { transition-delay: .18s; }
.lk-mark span:nth-child(12) { transition-delay: .03s; }
.lk-mark span:nth-child(13) { transition-delay: .39s; }
.lk-mark span:nth-child(14) { transition-delay: .24s; }
.lk-mark span:nth-child(15) { transition-delay: .12s; }
.lk-mark span:nth-child(16) { transition-delay: .30s; }

/* тач: ховера нет, а задержки остались бы висеть на :focus — обнуляем */
@media (hover: none) {
  .lk-mark span { transition-delay: 0s; }
}

.lk-role { font-size: 13.5px; line-height: 1.55; }

/* ---- бургер (только телефон) ----

   Без JS: состояние держит чекбокс, видимая кнопка — его label.
   Чекбокс не `display: none`, а уведён за край экрана, иначе он
   перестаёт быть фокусируемым и меню не открыть с клавиатуры.
   Показ меню включается только там, где работает `:has()`;
   где не работает — меню просто остаётся раскрытым, как было. */
.lk-menu-toggle {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  /* без pointer-events: none — с ним клик по label не доходит
     до самого чекбокса, и меню не открывается */
}

.lk-burger { display: none; }

@media (max-width: 760px) {
  .lk-ident { position: relative; }

  .lk-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -4px;
    right: 0;
    /* 44px — минимальная тач-цель, как у пунктов меню */
    width: 44px;
    height: 44px;
    cursor: pointer;
  }

  /* три полоски: средняя — сам span, крайние — его псевдоэлементы */
  .lk-burger span,
  .lk-burger span::before,
  .lk-burger span::after {
    content: "";
    display: block;
    width: 24px;
    height: 2px;
    background: var(--lk-cursor);
    transition: transform .18s ease, opacity .12s ease;
  }
  .lk-burger span { position: relative; }
  .lk-burger span::before { position: absolute; top: -7px; }
  .lk-burger span::after  { position: absolute; top: 7px; }

  /* открыто — полоски складываются в крест */
  .lk-menu-toggle:checked + .lk-burger span { background: transparent; }
  .lk-menu-toggle:checked + .lk-burger span::before { transform: translateY(7px) rotate(45deg); }
  .lk-menu-toggle:checked + .lk-burger span::after  { transform: translateY(-7px) rotate(-45deg); }

  .lk-menu-toggle:focus-visible + .lk-burger {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }

  @supports selector(:has(*)) {
    /* `.lk .lk-nav`, а не `.lk-nav`: базовое правило `.lk-nav { display: flex }`
       стоит ниже по файлу, и при равной специфичности побеждало бы оно —
       медиазапрос веса не добавляет. */
    .lk .lk-nav { display: none; }
    .lk-side:has(.lk-menu-toggle:checked) .lk-nav { display: flex; }
  }
}

/* ---- «наверх» на телефоне ----
   Текста на страницах много, и возвращаться к меню прокруткой долго.
   Кнопка нарочно без цвета: лимон и розовый в проекте что-то значат,
   а это служебный элемент. */
.lk-up { display: none; }

@media (max-width: 760px) {
  .lk-up {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;

    background: var(--paper);
    border: 1px dashed var(--dash);
    font-size: 15px;
    line-height: 1;
  }
  .lk-up:hover { background: var(--ink); color: var(--paper); }
}

.lk-nav { display: flex; flex-direction: column; gap: 9px; }

.lk-nav a {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  width: fit-content;
  box-shadow: inset 0 -1px 0 transparent;
}
.lk-nav a:hover { box-shadow: inset 0 -1px 0 var(--ink); }

/* Текущий раздел: розовая черта под словом — тем же цветом размечены
   маркеры списков в кейсах и курсор. Подчёркивание через text-decoration,
   а не рамкой снизу: на телефоне у пункта 13px паддинга сверху и снизу
   под тач-цель, и линия-рамка ушла бы на 13px ниже текста. */
.lk-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--lk-cursor);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* фото показывается целиком, в родных пропорциях — не кадрируется.
   Забирает ровно ту высоту, что осталась, и уменьшается вместе с окном. */
.lk-portrait {
  flex: 1 1 auto;
  min-height: 0;
  max-width: 230px;
  background: none;

  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.lk-portrait img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;

  /* фото «печатается» на бумагу: светлые зоны снимка забирают
     тон и текстуру фона, вместо серого прямоугольника поверх */
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.06);
}

.lk-contacts { display: flex; flex-direction: column; }

.lk-contact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  font-size: 12px;
  border-bottom: 1px dashed var(--rule);
}
.lk-contact span:last-child { color: var(--muted); }
.lk-contact:hover { background: var(--lemon); padding-left: 8px; padding-right: 8px; }
.lk-contact:hover span:last-child { color: var(--ink); }

/* ==========================================================
   ПРАВАЯ КОЛОНКА
   ========================================================== */

.lk-main {
  display: flex;
  flex-direction: column;
  gap: var(--sec-gap);
  min-width: 0;

  /* вертикальная пунктирная линия между колонками.
     Живёт на .lk-main, потому что это самый высокий элемент —
     линия тянется на всю страницу, а не только на высоту сайдбара. */
  padding-left: 44px;
  border-left: 1px dashed var(--rule);
}

/* ---- 01 лид ---- */
.lk-lead { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }

.lk-lead-text {
  font-size: 20px;
  line-height: 1.6;
  /* Главный оффер. Мера 32em — строки по 50–55 знаков: на 46em они
     растягивались почти на 90 и главное размывалось. Уже 24em нельзя —
     лид вытягивается в узкий высокий столбик. */
  max-width: 32em;
}
/* Текст оффера обычным набором, а то, что получает художник, —
   жирным с лимонным маркером по нижней половине строки: глаз
   выхватывает выгоды, не читая подряд. Лимон на сайте и значит
   «главное». box-decoration-break — маркер идёт по строкам при переносе. */
.lk-lead-text strong {
  font-weight: 700;
  background: linear-gradient(transparent 58%, var(--lemon) 58%, var(--lemon) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- бегущая строка под лидом ---- */

/* Лента продублирована в разметке. Сдвиг ровно на -50% ставит копию
   на место оригинала, поэтому шов не виден и петля бесконечна.
   overflow: hidden здесь не украшение: без него лента в две длины
   растянула бы страницу по горизонтали на всех экранах. */
.lk-ticker {
  align-self: stretch;   /* .lk-lead жмёт детей по контенту, а строка во всю ширину */
  overflow: hidden;
  /* пунктир розовый — так заказчица нарисовала в макете */
  border-top: 1px dashed var(--dash);
  border-bottom: 1px dashed var(--dash);
}

.lk-ticker-track {
  display: flex;
  width: max-content;
  animation: lk-ticker-run 70s linear infinite;
}

/* навёл курсор — строка встала, можно дочитать */
.lk-ticker:hover .lk-ticker-track { animation-play-state: paused; }

.lk-ticker-list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lk-ticker-list li {
  padding: 12px 0;
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
}

/* разделитель висит на элементе, а не между ними: так он есть и на стыке
   двух лент, и шов не выдаёт себя пропущенной точкой */
.lk-ticker-list li::after {
  content: "\2022";
  margin: 0 20px;
  color: var(--muted);
}

@keyframes lk-ticker-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* кому движение мешает — строка останавливается и листается пальцем */
@media (prefers-reduced-motion: reduce) {
  .lk-ticker { overflow-x: auto; }
  .lk-ticker-track { animation: none; }
  .lk-ticker-list[aria-hidden="true"] { display: none; }
}

/* ---- кнопки ---- */
.lk-btns { display: flex; flex-wrap: wrap; gap: 12px; }

.lk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 18px 20px 18px 22px;
  border: 1px solid var(--ink);
  background: var(--card);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.lk-btn--lemon { background: var(--lemon); }

.lk-btn:hover { background: var(--ink); color: var(--paper); }

/* ---- заголовок секции ---- */
.lk-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  /* пунктира над заголовком больше нет: заказчица просила убрать
     линии между разделами, их разводит воздух --sec-gap */
  padding: 0 0 6px;
}
/* это главные заголовки страницы, а не подписи: набор крупный, а разрядку
   при таком кегле приходится убавлять — на 1.6px строка расползалась */
.lk-head h2 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.lk-count {
  flex: none;
  /* счётчик не переносится по словам — иначе на узком экране длинный
     заголовок ломает его на «4 / КЕЙСА». Переносится сам заголовок. */
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 1.6px;
  color: var(--muted);
  text-transform: uppercase;
}

/* ---- 04 услуги ---- */
/* сетка карточек-объявлений */
.lk-svc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

/* Ниже 900px контента остаётся 380-500px, и две карточки в ряд сжимаются
   до ~185px — уже слова «профессионального» (190px в Montserrat Bold),
   и заголовок вылезает за карточку. Переходим в одну колонку раньше. */
@media (max-width: 900px) {
  .lk-svc-grid { grid-template-columns: minmax(0, 1fr); }
}

/* карточка: пунктирный контур — «вырезать по линии», как в газетной рубрике.
   Карточка больше не ссылка целиком: внутри две разные кнопки, а вложенные
   друг в друга ссылки невалидны. Поэтому и ховера на всей карточке нет —
   подсвечивается только то, что действительно нажимается.
   Тот же контур носят карточки кейсов внизу главной. */
.lk-svc,
.lk-work {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 18px 16px;
  border: 1px dashed var(--dash);
  background: var(--card);
}

.lk-svc-title { font-size: 20px; font-weight: 700; line-height: 1.3; }

.lk-svc-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

/* перечень того, что входит в формат */
.lk-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  /* тянется именно список: описания разной длины, а цена и кнопки
     должны стоять на одной линии во всех четырёх карточках */
  flex: 1 1 auto;
  font-size: 12.5px;
  line-height: 1.5;
}
.lk-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
/* точка вместо тире и розовая: тем же знаком размечены списки
   в карточках кейсов, перечни по всему сайту теперь одинаковые */
.lk-list li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: .55em;
  border-radius: 50%;
  background: var(--lk-cursor);
}

/* цена — главное число карточки, поэтому крупнее всего остального набора */
/* Линий внутри карточки нет: заказчица просила, чтобы карточка
   читалась цельно. Группы разделяет одинаковый отступ `gap` у .lk-svc,
   .lk-card и .lk-work — 14px. Цена с кнопкой — отдельный блок «купить»,
   поэтому над ценой отбивка втрое больше: 14 + 18 = 32px.
   .lk впереди: иначе в материалах цену перебивает .lk-card p (12.5px). */
.lk .lk-price {
  padding-top: 18px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.lk-price span {
  margin-left: 10px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
}

.lk-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding-top: 4px;
}

/* Лимонная заливка в чернильной рамке, текст чернилами: лимон на сайте
   и значит действие. Была розовая — заказчица сочла, что слишком розово.
   Рамка обязательна: лимон на бумаге сам по себе почти не держит край.
   .lk впереди: иначе .lk a { color: inherit } весомее и цвет текста теряется */
.lk .lk-apply {
  padding: 10px 14px;
  border: 1px solid var(--ink);
  background: var(--lemon);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
/* ховер — инверсия в чёрное, как у остальных кнопок сайта */
.lk .lk-apply:hover { background: var(--ink); color: var(--paper); }

/* Вторичная кнопка: та же форма и кегль, что у «Подать заявку»,
   но без заливки — прозрачная в чернильной рамке. Ссылкой без рамки
   её не хотелось нажимать, а лимон остаётся за главной кнопкой.
   На ховер — инверсия в чёрное, стрелка сдвигается вперёд. */
.lk .lk-more {
  padding: 10px 14px;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.lk .lk-more span { display: inline-block; transition: transform .15s ease; }
.lk .lk-more:hover { background: var(--ink); color: var(--paper); }
.lk .lk-more:hover span { transform: translateX(3px); }

/* сколько мест осталось — приписка, не заголовок */
.lk-svc-slots {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--ink);
}
.lk-svc-slots::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: var(--lemon);  /* «места есть»: лимон в чернильном контуре, иначе на бумаге не виден */
}

/* ---- страница форматов работы ---- */

/* Каждый формат — отдельная секция с якорем: с главной «Подробнее»
   ведёт прямо в свой формат (services.html#consultation и т.д.).
   scroll-margin, чтобы заголовок не прилипал к верхней кромке окна. */
.lk-fmt { scroll-margin-top: 28px; }

/* Между разделами сайта линий нет, но форматы здесь идут подряд
   и сливались — заказчица просила вернуть пунктир именно между ними. */
/* Заголовок страницы «Форматы работы» — отдельная секция без содержимого,
   поэтому первый формат отстоял от него на целый --sec-gap. Подтягиваем
   на те же 28px, что от заголовка до текста на «Обо мне» (6 + 22). */
.lk-section:not(.lk-fmt) + .lk-fmt { margin-top: calc(22px - var(--sec-gap)); }

.lk-fmt + .lk-fmt {
  /* линия ровно посередине между форматами: половину --sec-gap
     забираем отрицательным отступом и отдаём вниз, под линию */
  margin-top: calc(var(--sec-gap) / -2);
  padding-top: calc(var(--sec-gap) / 2);
  border-top: 1px dashed var(--dash);
}

/* Заголовок страницы «Форматы работы» — раздел, а «Консультация»,
   «Менторство» — его карточки. Оба набраны .lk-head h2, поэтому
   у форматов кегль снижен до уровня заголовков карточек на главной. */
.lk-fmt .lk-head h2 { font-size: 20px; }

/* Разворот: слева рассказ, справа колонка с составом, ценой и кнопкой.
   Так заполняется вся ширина, но строка прозы остаётся в читабельной
   мере: раньше текст был заперт в 46em, а правая половина экрана
   пустовала. Замерено — в развороте на 1440px в строке 60 знаков. */
.lk-fmt-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 0 40px;
  padding-top: 20px;
}

.lk-fmt-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Мера строки. Без потолка на 1199px (разворот уже сложился) в строке
   оказывалось 80 знаков, а вступление вверху страницы растягивалось
   на 109 — глаз терял начало следующей строки. 42em держат 66. */
.lk-fmt-text {
  max-width: 42em;
  line-height: 1.75;
}

/* Линии между колонками нет: заказчица просила убрать, как и внутри
   карточек. Столбцы разводит отбивка в 40px, этого достаточно. */
.lk-fmt-aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-left: 40px;
}

.lk-fmt-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lk-fmt-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink);
}

.lk-fmt .lk-list { flex: none; font-size: 13px; line-height: 1.5; }
.lk-fmt .lk-actions { border-top: 0; padding-top: 0; }

/* Ниже 1200px разворот складывается: левой колонке остаётся 343px —
   это 38 знаков в строке, вдвое меньше нормальной меры, текст начинает
   сыпаться лесенкой. Правому столбцу там же меньше 280px, а в нём
   строки вроде «поиск и анализ опен-коллов, резиденций и выставочных
   возможностей». */
@media (max-width: 1200px) {
  .lk-fmt-cols { grid-template-columns: minmax(0, 1fr); gap: 22px 0; }
  .lk-fmt-aside {
    padding-left: 0;
    padding-top: 6px;
  }
}

@media (max-width: 760px) {
  .lk-fmt .lk-list { font-size: 12.5px; }
}

/* ---- кейсы на главной ---- */

/* Та же карточка, что у форматов и материалов: пунктирный контур,
   тот же внутренний ритм. Пороги колонок как у резюме — в колонке
   уже 190px «институциональные» рвёт строку за край. */
.lk-works {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-top: 24px;
}
@media (max-width: 1200px) { .lk-works { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .lk-works { grid-template-columns: minmax(0, 1fr); } }

.lk-work-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.lk-work-name { font-size: 17px; font-weight: 700; line-height: 1.3; }
.lk-work-term {
  flex: none;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* Три части карточки: шапка (имя, срок, медиум) → успехи → «Подробнее».
   Внутри шапки медиум подтянут к имени (gap 14 − 10 = 4px), между
   частями — по 24px.
   .lk впереди: иначе сброс .lk p { margin: 0 } весомее. */
.lk .lk-work-medium {
  margin-top: -10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* Главное в карточке кейса — результаты. Сплошь жирный перечень
   рябил, поэтому иерархия внутри: обычный набор, а самые весомые
   пункты жирные (подчёркивание заказчица просила убрать). */
.lk-work .lk-list {
  padding-top: 10px;
  gap: 5px;
  font-size: 13px;
  line-height: 1.4;
}
/* успехи — галочкой, как в списке успехов на странице кейсов */
.lk-work .lk-list li::before {
  content: "\2713";           /* ✓ */
  width: auto;
  height: auto;
  margin-top: 0;
  border-radius: 0;
  background: none;
  color: var(--lk-cursor);
  font-weight: 700;
}
/* «Подробнее» в кейсе — отдельное действие, а не ещё строка перечня:
   отбиваем его от успехов так же, как цену в карточках форматов */
.lk-work .lk-actions { padding-top: 10px; }

.lk-work-key {
  font-style: normal;
  font-weight: 700;
}

/* ---- сетки карточек ---- */
.lk-grid { display: grid; gap: 20px; padding-top: 24px; }
.lk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.lk-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px 20px;
  border: 1px dashed var(--dash);   /* как у карточек услуг */
  background: var(--card);
}

.lk-card h3 { font-weight: 700; line-height: 1.3; }

.lk-card h3 { font-size: 20px; }   /* как .lk-svc-title: карточки на главной одного ранга */
.lk-card p  { font-size: 12.5px; line-height: 1.6; color: var(--ink); }

/* перечень под описанием: объём и формат. Формат курсивом — так он
   отделён от количества, не заводя ещё одного размера набора. */
.lk-card-meta {
  display: flex;
  flex-direction: column;
  gap: 7px;
  /* тянется перечень, а не описание: тексты разной длины, а цена
     и кнопка должны стоять на одной линии в обеих карточках */
  flex: 1 1 auto;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
}
.lk-card-meta li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.lk-card-meta li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: .55em;
  border-radius: 50%;
  background: var(--lk-cursor);
}
.lk-card-meta i { font-style: italic; }

/* ---- 07 футер ---- */
.lk-foot {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-top: 34px;
  border-top: 2px dashed var(--dash);
}
.lk-foot-text { font-size: 24px; line-height: 1.45; }
/* Реквизиты и оферта. Стоят во всех футерах, а не только на главной:
   футер один на все страницы, а оферта по закону должна быть доступна
   с любой страницы, где можно начать покупку. */
.lk-legal {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 22px;
  border-top: 1px dashed var(--rule);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--muted);
}

.lk-legal-who {
  font-style: italic;
  color: var(--ink);
}

/* почта и телеграм в строку, но на узком экране переносятся
   и не склеиваются: разделитель — отступ, а не точка */
.lk-legal-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}
.lk-legal a { box-shadow: inset 0 -1px 0 var(--rule); }
.lk-legal a:hover { box-shadow: inset 0 -1px 0 var(--ink); color: var(--ink); }

.lk-legal-oferta { font-weight: 700; color: var(--ink); }

.lk-foot-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 20px;
  font-size: 11px;
  color: var(--muted);
}

/* ==========================================================
   АДАПТИВ
   ========================================================== */

@media (max-width: 1100px) {
  .lk { --gap: 48px; --side-w: 225px; --pad: 32px; --sec-gap: 72px; }
  .lk-lead-text { font-size: 18px; }
  .lk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .lk {
    grid-template-columns: minmax(0, 1fr);
    --gap: 44px;
    --pad: 20px;
    --sec-gap: 60px;
    padding-top: 28px;
    padding-bottom: 40px;
  }

  .lk-side {
    position: static;
    gap: 28px;
    height: auto;
  }
  .lk-portrait { flex: none; max-width: 220px; }

  .lk-lead-text { max-width: none; }
  .lk-foot-text { font-size: 18px; }

  .lk-btn { width: 100%; font-size: 13px; padding: 16px 18px; }

  .lk-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .lk-foot-meta { flex-direction: column; gap: 6px; }
}

/* низкое окно (ландшафт телефона, невысокий ноутбук): в липкую колонку
   высотой во весь экран портрет уже не влезает — он схлопывается в ноль,
   а контакты вылезают за её пределы и обрезаются. Здесь колонка перестаёт
   быть липкой и просто едет со страницей. */
@media (min-width: 761px) and (max-height: 700px) {
  .lk-side {
    position: static;
    height: auto;
    gap: 22px;
  }
  .lk-portrait { flex: none; max-width: 200px; }
}

/* тач-устройства: ховеры не липнут */
@media (hover: none) {
  .lk-contact:hover { background: none; padding-left: 0; padding-right: 0; color: inherit; }
  .lk-btn:hover { background: transparent; color: var(--ink); }
  .lk-btn--lemon:hover { background: var(--lemon); }
}

@media (prefers-reduced-motion: reduce) {
  .lk * { transition: none !important; }
  /* иначе буквы имени продолжают розоветь по очереди за счёт задержек */
  .lk-mark span { transition-delay: 0s !important; }
}


/* ==========================================================
   ТЕКСТУРА БУМАГИ
   Три слоя: тон + типографский растр + зерно волокна.
   Всё на CSS, ничего грузить в Cargo не нужно.
   ========================================================== */

/* фон за пределами колонки (широкие экраны) */
html { scroll-behavior: smooth; }
html, body { background: #FAF9F4; }

.lk {
  background-color: var(--paper);

  /* растр офсетной печати: две сетки точек со смещением — розетка */
  background-image:
    radial-gradient(circle, rgba(40, 32, 10, .035) .5px, transparent .6px),
    radial-gradient(circle, rgba(40, 32, 10, .025) .5px, transparent .6px);
  background-size: 5px 5px, 5px 5px;
  background-position: 0 0, 2.5px 2.5px;

  position: relative;
  isolation: isolate;
}

/* зерно волокна поверх всего — не тайлится и не «плывёт» при скролле */
.lk::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .38;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

/* контент — над текстурой.
   ВАЖНО: .lk-side НЕ трогаем position — там sticky, relative его убьёт.
   z-index работает и так, sticky уже позиционирован. */
.lk-main { position: relative; z-index: 1; }
.lk-side { z-index: 1; }

/* портрет-заглушка на кремовом читается лучше чуть темнее */


@media (prefers-reduced-motion: reduce) {
  .lk::before { opacity: .3; }
}


/* пятна неравномерного старения — крупная турбулентность поверх тона.
   Даёт «эту бумагу уже полежала», но без ухода в жёлтый. */
.lk::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .62  0 0 0 0 .58  0 0 0 0 .44  0 0 0 -.55 .62'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23m)'/%3E%3C/svg%3E");
  background-size: 900px 900px;
}

@media (prefers-reduced-motion: reduce) {
  .lk::after { opacity: .16; }
}


/* ==========================================================
   МЯТАЯ БУМАГА
   feDiffuseLighting поверх турбулентности даёт рельеф со светом
   и тенью — это читается как заломы, а не как пятна.
   Режим soft-light: слой не темнит страницу, только гнёт свет.
   ========================================================== */

.lk-paper {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: soft-light;
  background-size: 780px 780px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='780' height='780'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.016' numOctaves='4' seed='11' stitchTiles='stitch' result='t'/%3E%3CfeDiffuseLighting in='t' lighting-color='%23ffffff' surfaceScale='2.6'%3E%3CfeDistantLight azimuth='48' elevation='62'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='780' height='780' filter='url(%23c)'/%3E%3C/svg%3E");
}

/* на мобильном линия между колонками не нужна — они сложены друг под друга */
@media (max-width: 760px) {
  .lk-main {
    padding-left: 0;
    border-left: none;
  }
}


/* ==========================================================
   СТРАНИЦА «ОБО МНЕ»
   ========================================================== */

/* вводный текст с газетной буквицей */
.lk-bio {
  padding-top: 22px;
  font-size: 14px;
  line-height: 1.75;
  max-width: 62em;
}
/* абзацы идут сплошным потоком с красной строкой — газетный набор,
   а не блоки с отбивкой */
/* Буквица убрана: заказчица сказала, что большая «М» читается оторванно
   от текста. Отступ абзаца вместо неё не нужен — абзацы теперь разделяет
   воздух, а не красная строка, иначе текст выглядит простынёй. */
.lk-bio {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* три газетные колонки */
.lk-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

/* вертикальные пунктиры между колонками — как между сайдбаром и контентом */
.lk-col { padding: 0 22px; }
.lk-col:first-child { padding-left: 0; }
.lk-col:last-child  { padding-right: 0; }
.lk-col + .lk-col { border-left: 1px dashed var(--rule); }

.lk-cv + .lk-cv { margin-top: 34px; }

.lk-cv-head {
  padding: 10px 0 12px;
  border-top: 1px solid var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

/* строка резюме: год слева, текст справа */
.lk-cv-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-top: 1px dashed var(--rule);
}
.lk-cv-item p { font-size: 12.5px; line-height: 1.6; }

.lk-year {
  font-size: 11px;
  letter-spacing: .5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* места работы: период, должность, описание — в столбик */
.lk-job {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 0;
  border-top: 1px dashed var(--rule);
}
.lk-job h4 { margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.lk-job p  { font-size: 12.5px; line-height: 1.65; color: var(--muted); }

/* В колонке резюме на текст остаётся ширина минус 46px под год. Чтобы
   туда влезали слова вроде «исследовательский» (129px), колонка должна
   быть не уже ~193px: три колонки набирают столько только выше 1200px,
   две — выше 900px. Ниже уходим в одну, иначе длинные слова вылезают
   за край (текстовая колонка — minmax(0, 1fr), она сжимается ниже
   своего минимума и обрезает). */
@media (max-width: 1200px) {
  .lk-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lk-col:nth-child(3) {
    padding-left: 0;
    border-left: none;
    border-top: 1px dashed var(--rule);
    padding-top: 28px;
    margin-top: 28px;
  }
}

@media (max-width: 900px) {
  .lk-cols { grid-template-columns: minmax(0, 1fr); }
  .lk-col {
    padding: 0;
    border-left: none;
  }
  .lk-col + .lk-col {
    border-top: 1px dashed var(--rule);
    padding-top: 28px;
    margin-top: 28px;
  }
  .lk-col:nth-child(3) { margin-top: 28px; padding-top: 28px; }
}

@media (max-width: 760px) {

  .lk-bio { font-size: 13.5px; gap: 16px; }
  .lk-cv-item { grid-template-columns: 44px minmax(0, 1fr); }
}


/* примечание к формату — курсив. Лимонная подложка и пунктир снизу
   убраны по просьбе заказчицы. */
.lk-svc-note {
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.55;
}


/* «наверх» в футере */
.lk-top {
  font-weight: 700;
  color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--ink);
}
.lk-top:hover { background: var(--lemon); }

@media (max-width: 760px) {
  .lk-lead-text { font-size: 16px; }

  /* Иерархия: заголовок раздела крупнее заголовка карточки, тот —
     крупнее текста. На телефоне разница в 3px между 20 и 17 не читалась,
     тем более что заголовок раздела набран капителью и выглядит мельче
     своего кегля. Разводим шаги. */
  .lk-head h2 { font-size: 24px; }
  .lk-fmt .lk-head h2,
  .lk-svc-title,
  .lk-card h3 { font-size: 18px; }
  .lk-work-name { font-size: 16px; }

  .lk-ticker-list li { font-size: 12px; padding: 11px 0; }
  .lk-ticker-list li::after { margin: 0 14px; }
  /* Сайдбар раскрывается в родительскую сетку (display: contents),
     и дальше его части раскладываются через order. До этого на телефоне
     перед первой строчкой контента приходилось пролистать имя,
     навигацию, портрет во всю ширину и три контактные ссылки — около
     780px прокрутки, лид не попадал на первый экран вообще.
     Теперь порядок: имя → навигация → контент → портрет → контакты. */
  .lk-side { display: contents; }

  .lk-ident    { order: 1; }
  .lk-nav      { order: 2; }
  .lk-main     { order: 3; }
  .lk-portrait { order: 4; }
  .lk-contacts { order: 5; }

  /* z-index жил на .lk-side как на элементе сетки. Элемента больше нет —
     значит, поднимать над текстурой бумаги нужно каждую часть отдельно,
     иначе фиксированные слои фона накроют их сверху. */
  .lk-ident,
  .lk-nav,
  .lk-portrait,
  .lk-contacts { z-index: 1; }

  /* расстояния теперь задаёт шаг родительской сетки — делаем его мелким,
     а воздух добавляем там, где он нужен */
  .lk { --gap: 22px; }
  .lk-main     { margin-top: 10px; }
  .lk-portrait { margin-top: 18px; }

  /* тач-цели: строчка навигации была 18px в высоту — пальцем не попасть.
     Ровно 44px = 18px текста + 13px паддинга сверху и снизу. */
  .lk-nav { gap: 2px; }
  .lk-nav a { padding: 13px 0; }

  /* контактные строки были 38px — добираем до тех же 44px */
  .lk-contact { padding: 12px 0; }

  /* «наверх»: паддинг растянул бы подчёркивание вниз и оторвал его
     от текста, поэтому линию рисуем отдельно и держим у базовой линии */
  .lk-top {
    /* в колонке футера элемент растягивался на всю ширину, и подчёркивание
       уезжало через весь экран — прижимаем коробку к тексту */
    align-self: flex-start;
    display: inline-block;
    position: relative;
    padding: 13px 0;
    box-shadow: none;
  }
  .lk-top::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 13px;
    border-bottom: 1px solid var(--ink);
  }
}


/* ==========================================================
   СТАТИЧЕСКИЙ САЙТ: то, что нельзя было сделать в Cargo
   ========================================================== */

/* ссылка для клавиатуры — первое, на что попадает Tab */
.lk-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99;
  padding: 12px 18px;
  background: var(--lemon);
  border: 1px solid var(--ink);
  color: var(--ink);
  font: 700 13px/1.2 'Courier New', Courier, monospace;
  text-decoration: none;
}
.lk-skip:focus { left: 12px; top: 12px; }

/* Плавный переход между страницами: сайдбар не мигает при навигации —
   визуально он остаётся на месте, как и хотелось.
   Браузеры без поддержки просто перезагружают страницу как обычно. */
@view-transition { navigation: auto; }

.lk-side { view-transition-name: sidebar; }
.lk-main { view-transition-name: content; }

::view-transition-old(content) { animation-duration: .18s; }
::view-transition-new(content) { animation-duration: .18s; }

/* сайдбар не анимируем вовсе — он должен выглядеть неподвижным */
::view-transition-group(sidebar),
::view-transition-old(sidebar),
::view-transition-new(sidebar) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* печать: убрать текстуру и интерфейсные элементы */
@media print {
  .lk-paper, .lk-skip, .lk-top { display: none; }
  .lk { display: block; padding: 0; }
  .lk-main { border-left: none; padding-left: 0; }
  .lk-portrait { max-width: 180px; }
  a { text-decoration: none; color: #000; }
}


/* ==========================================================
   СТРАНИЦА «КЕЙСЫ»
   Один кейс — одна карточка, рамка пунктирная — как у карточек
   форматов и материалов. Внутри всё разделено пунктиром потоньше.
   Лимона здесь нет вовсе: номера кейсов убраны, а итоговая цифра
   подчёркнута розовым — тем же, что маркеры списков и курсор.
   ========================================================== */

/* Один кейс в ряд: карточки длинные и текстовые, в две колонки они
   превращались в два узких столбика, которые читаешь зигзагом. */
.lk-cases {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding-top: 24px;
}

.lk-case {
  scroll-margin-top: 28px;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 22px;
  border: 1px dashed var(--dash);
  background: var(--card);
}

.lk-case-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  /* имя и медиум — одна шапка, поэтому почти вплотную */
  padding-bottom: 4px;
}
/* срок работы прижат к правому краю шапки */
.lk-case-term {
  flex: none;
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);   /* как срок в карточках кейсов на главной */
  white-space: nowrap;
}

/* медиум художника — строка под именем */
/* .lk впереди: иначе сброс .lk p { padding: 0 } весомее и отбивки нет */
.lk .lk-case-medium {
  /* от шапки до «Запроса» — заметная отбивка: это уже другая часть.
     Почти как между блоками (32px), чтобы шапка не прилипала к «Запросу». */
  padding-bottom: 28px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.lk-case-name { font-size: 18px; font-weight: 700; line-height: 1.3; }

/* блок кейса: запрос / что сделали / успехи / не получилось */
/* Ярлык уходит в боковую колонку, как год в резюме на «Обо мне»:
   на всю ширину карточки «ЗАПРОС» отдельной строкой съедал высоту,
   а текст оставался без ограничения по мере. Теперь ярлык слева,
   текст справа и в читабельной мере. */
/* Линий между ЗАПРОС / УСПЕХИ / КАК МЫ ЭТО СДЕЛАЛИ нет — заказчица
   просила убрать. Группы разводит отбивка 32px и ярлык в боковой колонке. */
.lk-case-block {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 0 28px;
}
.lk-case-block + .lk-case-block { margin-top: 32px; }

.lk-case-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 40em;
}

/* Ниже 1100px на ярлык и текст рядом места нет: 136px колонки плюс
   28px отбивки оставляют тексту 341px — это 36 знаков в строке,
   вдвое меньше нормальной меры. Ярлык встаёт сверху. */
@media (max-width: 1100px) {
  .lk-case-block {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px 0;
  }
}

.lk-case-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink);
}

/* формулировка задачи — обычный набор */
.lk-case-goal {
  font-size: 13px;
  line-height: 1.65;
}
.lk-case-goal + .lk-case-goal { margin-top: -2px; }

/* прямая речь художника — курсивом, чтобы читалось как цитата */
.lk-case-quote {
  font-size: 13px;
  line-height: 1.65;
  font-style: italic;
}
.lk-case-quote + .lk-case-quote { margin-top: -2px; }

/* маркер держим висячим отступом, а не флексом: у флекс-элемента
   min-width: auto, и на узком экране строка перестаёт сжиматься —
   страница уезжает в горизонтальный скролл */
/* Линий между пунктами нет: заказчица просила оставить разделение
   только на ЗАПРОС / УСПЕХИ / КАК МЫ ЭТО СДЕЛАЛИ. Пункты разводит
   отбивка — внутри группы они и так читаются как одно целое. */
.lk-case-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lk-case-list li {
  padding-left: 18px;
  text-indent: -18px;
  font-size: 12.5px;
  line-height: 1.55;
}
.lk-case-list li::before {
  content: "\2022";           /* • */
  margin-right: 7px;
  font-size: 1.4em;
  line-height: 0;
  vertical-align: -.05em;
  color: var(--lk-cursor);
}

/* успехи — не точка, а галочка: список достижений читается как
   отмеченный, и это не требует пятого цвета, только другой знак */
.lk-case-list--win li::before {
  content: "\2713";           /* ✓ */
  font-size: 1.15em;
  line-height: inherit;
  vertical-align: 0;
}

/* Итоговая цифра по заявкам — главное в карточке. Лимонная подложка
   убрана по просьбе заказчицы, вместо неё розовая черта: тем же цветом
   размечены маркеры списков и курсор. Подчёркивание идёт по строкам,
   поэтому работает и когда фраза переносится. */
.lk-case-score {
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.9;
  text-decoration: underline;
  text-decoration-color: var(--lk-cursor);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.lk-case-list a { box-shadow: inset 0 -1px 0 var(--muted); }
.lk-case-list a:hover { box-shadow: inset 0 -2px 0 var(--lk-cursor); }

@media (max-width: 760px) {
  .lk-case { padding: 18px 16px 20px; }
  .lk-case-name { font-size: 17px; }
  .lk-case-term { font-size: 11px; }
  .lk .lk-case-medium { font-size: 12px; }
  .lk-case-goal,
  .lk-case-quote { font-size: 12.5px; }
}


/* ==========================================================
   ОТЗЫВЫ — карусель
   Прокрутка нативная (scroll-snap), без единой строчки JS: пальцем
   на телефоне, трекпадом, shift+колесом и полосой на десктопе,
   стрелками с клавиатуры. Треку дан tabindex, иначе до него не
   добраться табом.

   Кнопок «вперёд/назад» нет намеренно: без JS их роль могут играть
   только ссылки-якоря, а они дерутся со scroll-snap — браузер уводит
   трек не к той карточке и вдобавок прокручивает всю страницу
   вертикально. Полоса прокрутки и выглядывающая следующая карточка
   показывают, что секцию можно листать.
   ========================================================== */

.lk-quotes {
  display: flex;
  align-items: stretch;   /* рамки одной высоты — иначе трек тянется
                             под самый длинный отзыв, а под короткими
                             остаётся полтысячи пикселей пустоты */
  gap: 16px;
  padding: 24px 0 16px;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ink) transparent;
}
.lk-quotes:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.lk-quote {
  flex: 0 0 min(520px, 82%);
  scroll-snap-align: start;

  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 22px 20px;
  border: 1px dashed var(--dash);   /* как у карточек кейсов */
  background: var(--card);
}

/* длинные отзывы прокручиваются внутри карточки: текст сохраняется
   целиком, но секция не вырастает до высоты самого разговорчивого */
.lk-quote-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}

.lk-quote-text {
  font-size: 13px;
  line-height: 1.7;
}

/* подпись прижата к низу карточки — у коротких отзывов рамка
   не провисает пустотой между текстом и именем */
.lk-quote-by {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--rule);
}
.lk-quote-name { font-size: 14px; font-weight: 700; }

@media (max-width: 760px) {
  .lk-quote { padding: 18px 16px 18px; }
  .lk-quote-text { font-size: 12.5px; }

  /* карточка узкая — тот же текст занимает больше строк. При 300px
     внутренняя прокрутка появлялась даже у коротких отзывов, и на
     телефоне получались две полосы сразу. Поднимаем потолок так,
     чтобы прокручивался только самый длинный. */
  .lk-quote-body { max-height: 380px; }
}


/* ==========================================================
   КУРСОР
   Только десктоп: (hover: hover) and (pointer: fine) отсекает
   тач — на телефоне и планшете курсора нет и картинку грузить незачем.
   ВАЖНО: браузеры не умеют анимированные курсоры (.ani — формат Windows,
   Chrome/Safari/Firefox его игнорируют). Взят первый — «покойный» — кадр
   исходной анимации, 32×32, остриё в (1, 0).
   Вторым значением обязателен системный фолбэк, иначе правило отбросится.
   ========================================================== */

@media (hover: hover) and (pointer: fine) {
  /* единственное правило вне .lk — иначе поля body и полосы по краям
     на широком экране (за пределами max-width: 1440px) остались бы
     с системной стрелкой. Курсор — свойство страницы, а не блока. */
  html { cursor: url("cursor.png") 1 0, auto; }

  /* ссылкам и кнопкам браузер сам ставит pointer — перебиваем явно */
  .lk a,
  .lk button { cursor: url("cursor.png") 1 0, auto; }

  /* нажатие: стрелка загорается лимоном с контуром чернилами — тот же
     приём, что у кнопок. :active поднимается по дереву до html,
     поэтому лимон появляется при клике в любом месте страницы. */
  html:active,
  .lk a:active,
  .lk button:active { cursor: url("cursor-active.png") 1 0, auto; }
}


/* ==========================================================
   ПОЛОСЫ ПРОКРУТКИ — планшет и телефон
   Курсора на тач-устройствах нет, и его розовый остаётся не у дел.
   Отдаём цвет полосе прокрутки: единственное, что движется по экрану
   вслед за пальцем, окрашено ровно так же, как курсор на десктопе.
   Выше 1100px полосы остаются чернильными — там работает курсор.

   Правило живёт вне .lk по той же причине, что и курсор: полоса
   принадлежит странице и внутренним скроллерам, а не блоку.
   ========================================================== */

/* не палитра сайта, а собственный цвет курсора из cursor.png */
:root { --lk-cursor: #FF63B0; }  /* один розовый на весь сайт: Hot Lips из айдентики */

@media (max-width: 1100px) {
  html,
  .lk-quotes,
  .lk-quote-body {
    scrollbar-width: thin;
    scrollbar-color: var(--lk-cursor) transparent;
  }
}


/* ==========================================================
   НАБОР ПО ФОРМАТУ — как в газете
   Абзацы прозы выровнены по ширине. Без переносов в узких колонках
   между словами зияли бы дыры, поэтому hyphens: auto — у всех страниц
   lang="ru", браузер переносит по-русски. Перечни, цены, подписи
   и заголовки не выравниваем: короткие строки растянуло бы в разрядку.
   ========================================================== */

.lk-lead-text,
.lk-svc-desc,
.lk-card > p:not(.lk-price),
.lk-fmt-text,
.lk-bio p,
.lk-case-goal,
.lk-case-quote,
.lk-quote-body p {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* ==========================================================
   ПЕЧАТНЫЙ ГОЛОС — Courier New
   Имя, заголовки и «штампы»: всё, что набрано капителью с разрядкой,
   номера, индексы и годы. Проза идёт Montserrat.
   Блок в конце файла намеренно: иначе правила ниже перебивают его
   по порядку при равной специфичности.
   ========================================================== */

.lk-name,
.lk h2,
.lk h3,
.lk h4,
.lk-count,
.lk-svc-slots,
.lk-case-term,
.lk-case-medium,
.lk-case-label,
.lk-work-term,
.lk-work-medium,
.lk-year {
  font-family: 'Courier New', Courier, 'Nimbus Mono PS', 'Liberation Mono', monospace;
}