/* ============================================================
   СТРАНИЦА НАПРАВЛЕНИЯ /for/<slug>/ — РУЧНОЙ ДОБОР ПОД ALCHEMY
   Anna Gorodetskaya — Portfolio · 13 сент 2026

   Рукописный файл — тот же статус, что у case-alchemy-tune.css
   (никогда не перегенерируется). Подключается в buildPractice()
   ПОСЛЕ practiceCss (=practice-jelly.css) через ключ
   practiceTuneCss — тот же приём, что caseTuneCss у buildCase().

   ПОЧЕМУ ЭТОТ ФАЙЛ ВООБЩЕ НУЖЕН (важно — не дублирует мост):

   practice-jelly.css написан «поверх home-jelly.css» — сам он это
   говорит в своём заголовке: сетка стены (.wall__grid), карточка
   проекта (.wl__card/.wl__cover/.wl__foot) и офферы (.offer внутри
   .ps-offers .offers, само правило живёт в home-jelly.css через
   :is(.jservices__grid, .ps-offers .offers)) — «те же, что на
   главной, и описаны там». Он не переопределяет их с нуля, а
   ДОБАВЛЯЕТ то, чего на главной нет (обложка направления, .wid,
   «как я работаю»).

   У alchemy pageCss практики — тот же homeCss, что у главной
   (home-alchemy.css). Но alchemy-главная построена на совершенно
   другой, тоже бесплатной только этой странице, разметке
   (.project-card, .services-grid, alchemyProjectCard() в build.mjs)
   — ни .wall__grid, ни .card/.wl__card, ни .offer там не объявлены
   вовсе (проверено grep'ом). Мост токенов (_alchemy-bridge.css)
   здесь не спасает: он умеет только переименовать переменную,
   которую страничный CSS уже читает, а не добавить отсутствующий
   компонент — тот же принцип, что уже объяснён в
   case-alchemy-tune.css.

   Разметку карточки стены практика получает не через
   practice-jelly.css, а через buildPractice() → wallSection() →
   wallCardsLight() (build.mjs) — теперь и для alchemy тоже: ключ
   wallCard:'alchemy' раньше никуда не читался (см. правку
   wallSection() и комментарий рядом с wallCard:'alchemy' в
   THEMES.alchemy), из-за чего практика получала бы тёмную карточку
   с ховер-панелью — разметку, под которую НИ practice-jelly.css,
   НИ этот файл не писаны. Починка ветки — часть той же правки.

   Итого три реальных дыры, которые не закрывает ни practiceCss,
   ни мост:
     1. .wall__grid — сетка стены (в practice-jelly.css её нет).
     2. .wl__card и вся его начинка — карточка проекта.
     3. .offers/.offer — офферы практики.
   Плюс два переопределения хардкод-цветов practice-jelly.css,
   которых мост не достаёт (тот же смысл, что «остаток» в
   case-alchemy-tune.css): розовый хэйрлайн обложки направления и
   белая полупрозрачная карточка .wid__item (жelly читает её на
   светлом розовом фоне, на тёмном оливковом это блёклое пятно).

   ------------------------------------------------------------
   ДОБАВЛЕНО 14.09.2026 — Анна забраковала два блока страницы:

   1. «Who this is for» (.aud, audienceSection() в build.mjs) —
      «важный блок, люди должны в нём себя узнавать, он должен
      быть сильно виден». Четвёртая дыра, которую не закрывал ни
      один из файлов выше: .aud печатается тем же общим кодом, что
      и на главной, но стилизуют его ТОЛЬКО home.css/home-jelly.css
      (проверено grep'ом — ни practice-jelly.css, ни home-alchemy.css
      не знают этого класса), а ни один из них не подключается на
      alchemy-практике. До этой правки блок рендерился вообще без
      единого правила — голый список без рамки, фона, отступов.
      Решение — секция 4 ниже, тот же рецепт карточки, что уже
      держат .offer/.wl__card в этом файле (--g-card/--rule/--sheen
      /--lift), auto-fit вместо фиксированных колонок — число строк
      разное на разных практиках (technology 3, ai-automation 2,
      creative-culture 2, communication 3, см. practices.json).

   2. «What I can do here» (.wid, capabilities) — «по 5 карточек
      плохо выглядит, дыра в сетке; сделай эффект скролла карточек,
      как 02/Services на главной». practice-jelly.css кладёт
      .wid__list фиксированной сеткой repeat(2,...) — на пяти
      элементах (creative-culture, communication) это пустая
      клетка в последнем ряду; на четырёх (technology, ai-automation)
      сетка ровная, но эффекта, который Анна просит, там всё равно
      нет. Секция 6 ниже переписывает .wid__list на ту же механику
      липких карточек-стопки, что .services-grid .service держит в
      home-alchemy.css (строки 441/447 сгенерированного файла):
      .shell внутри .wid держит ровно двух прямых детей — .sect-head
      и .wid__list, тот же порядок, что .section-head/.services-grid
      на главной — поэтому двухколоночная сетка .9fr/1.1fr и залипание
      воспроизводятся ЧИСТЫМ CSS, без единой правки build.mjs или
      practice.html. У стопки нет сетки — значит нет и дыры ни на 4,
      ни на 5 элементах.
   ------------------------------------------------------------

   Желейный декор: home-jelly.css красит .offer текстурой
   --jelly-wave (soft-light блик, файл jelly-wave.webp) — тот самый
   декоративный элемент, который задача просит заменить на
   alchemy-фамильяра. Здесь он не заменён одним из двух фамильяров
   (яйцо/уроборос), а просто снят: у alchemy на собственной главной
   офферы (.service) уже читаются плоской стеклянной карточкой без
   текстуры поверх градиента — фамильяр как текстура на карточке
   офферов не имеет прецедента в принятой раскладке главной, а
   заводить его здесь значило бы придумывать новое решение, а не
   красить существующее. Полноразмерный фамильяр остаётся там, где
   его уже поставила Анна, — в Next-блоке кейса уровня A.
   ============================================================ */

/* ------------------------------------------------------------
   1. ОБЛОЖКА НАПРАВЛЕНИЯ (.ps1) — хэйрлайн под токен моста.
      practice-jelly.css красит .ps1 сам (padding, --g-hero,
      заголовок); здесь только один хардкод-цвет, которого мост не
      достаёт: розовый rgba(181,118,155,0.4) читается инородным
      пятном на тёмном оливковом грунте, на своём розовом --g-hero
      jelly он был почти незаметной подписью снизу.
   ------------------------------------------------------------ */
.ps1 { border-bottom: 1px solid var(--rule); }

/* ------------------------------------------------------------
   2. СЕТКА СТЕНЫ — .wall__grid структурно не объявлен ни в
      practice-jelly.css, ни в home-alchemy.css. Layout один в один
      с home-jelly.css (её же берёт practice-jelly.css как базу),
      цвета в этом правиле нет — сетку можно скопировать как есть.
   ------------------------------------------------------------ */
.wall__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ------------------------------------------------------------
   3. КАРТОЧКА ПРОЕКТА (.wl__card, wallCardsLight() в build.mjs) —
      разметка идентична jelly, но её ротация из пяти пастельных
      цветов (жelly-декор, см. home-jelly.css) заменена одним
      тёмным градиентом --g-card — тем же приёмом и тем же
      буквальным значением, каким home-alchemy.css уже красит свою
      .project-card (см. комментарий у --g-card в _alchemy-bridge.css).
      Структура (флекс, отступы, aspect-ratio) — с home-jelly.css,
      без изменений: там нет цвета, только раскладка.
   ------------------------------------------------------------ */
.wl__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 11px;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--g-card);
  box-shadow: var(--sheen), var(--lift);
  color: var(--ink);
  transition: box-shadow 0.35s, transform 0.35s;
}
.wl__card:hover { box-shadow: var(--sheen), var(--lift-hover); }

.wl__cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: calc(var(--r-card) - 8px);
  background: var(--ground);
}
.wl__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out, ease); }
.wl__card:hover .wl__img { transform: scale(1.04); }

/* Проект без очищенной обложки — та же плашка-подпись, что у jelly,
   перекрашена в грунт кейса (--g-work) вместо жelly-фиолетового. */
.wl__cover--plate {
  display: flex;
  align-items: flex-end;
  padding: 25px;
  background: var(--g-work);
  color: var(--ink-80);
}
.wl__plate-label { color: inherit; max-width: 90%; line-height: 1.5; }

.wl__foot { position: relative; flex: 1; padding: 23px 15px 16px; }
.wl__kicker { display: block; margin-bottom: 9px; color: var(--ink-55); text-transform: uppercase; }
.wl__title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(23px, 2.2vw, 34px);
  font-variation-settings: "wght" 550;
  line-height: 1.15;
  letter-spacing: -0.05em;
  padding-right: 26px;
  overflow-wrap: break-word;
  color: var(--ink);
}
.wl__meta { display: block; margin-top: 13px; line-height: 1.6; color: var(--ink-80); }

.wl__foot::after {
  content: "↗";
  position: absolute;
  right: 10px;
  top: 27px;
  font-size: 25px;
  line-height: 1;
  color: var(--accent);
}

/* замыкающая карточка стены — CTA к #contact, та же диагональ
   --g-card плюс акцентная рамка вместо жelly пурпурного градиента */
.wl__card--cta {
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: 34px;
  background: var(--g-card);
  border: 1px solid var(--accent);
  color: var(--ink);
}
.wl__cta-label { font-family: var(--font-display); font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.05em; line-height: 1.15; color: var(--accent); }
.wl__cta-arrow { font-size: 26px; color: var(--accent); }

/* ------------------------------------------------------------
   4. WHO THIS IS FOR (.aud, .aud__list/.aud__i) — см. «ДОБАВЛЕНО
      14.09.2026» выше. Секция стоит на странице ДО офферов (после
      стены работ), но у неё нет ни одного правила ни в
      practice-jelly.css, ни в home-alchemy.css — только общий
      .section (padding-block) из base.css. Фон секции нарочно не
      переопределён: карточки несут собственный --g-card на
      нейтральном --ground страницы, тот же приём, что уже держат
      .wl__card/.offer на своих грунтах.

      auto-fit(minmax(300px,1fr)) вместо repeat(2,...) — строк на
      разных практиках разное число (2 или 3, см. practices.json),
      а не фиксированные четыре, как написано в задаче. С двумя
      строками карточки растягиваются шире, с тремя — сетка сама
      садится в три узких столбца; ни при одном из двух реальных
      значений и ни при большем (если строки добавятся) не остаётся
      пустой клетки — в отличие от repeat(2,...), которую пришлось
      бы чинить отдельно под нечётное число.
   ------------------------------------------------------------ */
.aud__head { margin-bottom: 40px; }
.aud--tight .aud__head { margin-bottom: 28px; }

.aud__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aud__i {
  display: flex;
  flex-direction: column;
  padding: 36px 34px;
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--g-card);
  box-shadow: var(--sheen), var(--lift);
  color: var(--ink);
  transition: box-shadow 0.35s, transform 0.35s;
}
.aud__i:hover { box-shadow: var(--sheen), var(--lift-hover); transform: translateY(-3px); }

.aud__n {
  display: block;
  margin-bottom: 18px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.aud__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(23px, 2vw, 30px);
  font-variation-settings: "wght" 550;
  line-height: 1.15;
  letter-spacing: -0.05em;
  color: var(--ink);
}
.aud__body {
  margin: 0;
  max-width: 42ch;
  line-height: 1.65;
  color: var(--ink-80);
}

/* ------------------------------------------------------------
   5. ОФФЕРЫ (.ps-offers .offers .offer) — сетка и карточка тоже не
      объявлены ни в practice-jelly.css (только фон/подпись секции),
      ни в home-alchemy.css. База — та же :is(.jservices__grid,
      .ps-offers .offers) из home-jelly.css, взят только контекст
      .ps-offers .offers (jservices__grid у alchemy не существует —
      главная не печатает офферы этим селектором). Пять пастельных
      /жelly-тканевых деталей (nth-child градиенты, --jelly-wave
      текстура) не перенесены — единая карточка --g-card, тот же
      выбор, что у .wl__card и у .project-card на главной.
   ------------------------------------------------------------ */
.ps-offers .offers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ps-offers .offers .offer {
  display: flex;
  flex-direction: column;
  min-height: 380px;
  padding: 28px;
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--g-card);
  box-shadow: var(--sheen), var(--lift);
  color: var(--ink);
  overflow: hidden;
}
.ps-offers .offers .offer__n { color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; }
.ps-offers .offers .offer__title {
  margin: 32px 0 22px;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.8vw, 42px);
  font-variation-settings: "wght" 550;
  line-height: 1.05;
  letter-spacing: -0.05em;
  color: var(--ink);
}
.ps-offers .offers .offer__body { max-width: 280px; margin-bottom: 29px; line-height: 1.65; color: var(--ink-80); }
.ps-offers .offers .offer__kw {
  margin-top: auto;
  min-height: calc(2 * 1.4em + 14px);
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  color: var(--ink-55);
}

/* ------------------------------------------------------------
   6. WHAT I CAN DO HERE (.wid) — карточки-стопка со скроллом. См.
      «ДОБАВЛЕНО 14.09.2026» выше за причиной; здесь — сама механика,
      снятая построчно с home-alchemy.css:

        .services-section{display:grid;grid-template-columns:.9fr 1.1fr}
        .services-section>.section-head{position:sticky;top:60px;
          align-self:start}
        .services-grid{display:flex;flex-direction:column;gap:28px}
        .services-grid .service{position:sticky;top:54px}
        .services-grid .service:nth-child(2){top:76px}  (+22px)
        .services-grid .service:nth-child(3){top:98px}  (+22px)

      Работает это так: у `.service` нет обёртки-скролл-контейнера
      — каждая карточка сама `position:sticky` внутри `.services-grid`
      (обычный flex-column в потоке, без своего overflow). Пока в
      документе выше карточки есть запас скролла, она едет вместе со
      страницей; как только её `top` совпадает с прокруткой — она
      «прилипает» на этом месте и перестаёт двигаться, а следующая
      карточка (со своим `top`, на 22px больше) продолжает ехать
      поверх нее — за счёт этого сдвига предыдущая карточка не
      закрывается целиком, а остаётся видна узкой полосой сверху,
      как настоящая стопка бумаг. Тень (box-shadow с отрицательным
      first-offset у сервиса) читает эту полосу как приподнятый край.
      `.section-head` рядом sticky с собственным `top` — держится на
      месте, пока вся стопка проезжает мимо.

      practice.html печатает `.wid > .shell` ровно с двумя прямыми
      детьми — `.sect-head` и `.wid__list` (см. шаблон, секция
      #capabilities) — тем же порядком, что `.section-head` и
      `.services-grid` у home-alchemy.html. Разметки category-wrapper
      не хватало бы, будь у .wid ещё какие-то дети между ними или
      сама .sect-head не первым элементом — здесь оба условия уже
      выполнены, поэтому вся механика ниже — чистый CSS-оверрайд
      сетки practice-jelly.css (.wid__list{display:grid;
      grid-template-columns:repeat(2,...)}), без построчного
      копирования разметки и без правки build.mjs/practice.html.

      top у .wid__item начинается с той же базы 54px и растёт тем же
      шагом +22px, что и у сервисов — не совпадение, а сохранение
      одного и того же зрительного ритма стопки на обеих страницах.
      До пяти позиций (creative-culture/communication держат по 5
      capabilities) — nth-child длиннее, чем у home (там максимум 3
      сервиса), это единственное реальное отличие.

      Цвет карточки — тот же --g-card/--rule, что уже держит .offer/
      .wl__card в этом файле; постоянный var(--lift-hover) вместо
      состояния покоя var(--lift) — карточки в стопке уже визуально
      «приподняты» друг над другом, а не лежат плоско на странице.
   ------------------------------------------------------------ */
.wid .shell {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 7%;
}

.wid .sect-head {
  position: sticky;
  top: 60px;
  align-self: start;
  margin-bottom: 0;
}

.wid__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  margin: 0;
  padding: 0 0 40px;
  list-style: none;
}

.wid__item {
  position: sticky;
  top: 54px;
  min-height: 240px;
  border: 1px solid var(--rule);
  background: var(--g-card);
  box-shadow: var(--sheen), var(--lift-hover);
  color: var(--ink);
}
.wid__item:nth-child(2) { top: 76px; }
.wid__item:nth-child(3) { top: 98px; }
.wid__item:nth-child(4) { top: 120px; }
.wid__item:nth-child(5) { top: 142px; }

.wid__item p { color: var(--ink-80); }

/* ============================================================
   АДАПТИВ — те же точки, что у practice-jelly.css/home-jelly.css.
   ============================================================ */

@media (max-width: 1150px) {
  .wall__grid { gap: 21px; }
  .ps-offers .offers { gap: 17px; }
  .ps-offers .offers .offer { min-height: 340px; padding: 24px; }

  .aud__list { gap: 18px; }
  .aud__i { padding: 30px 28px; }

  .wid .shell { gap: 5%; }
  .wid__item { min-height: 220px; }
}

@media (max-width: 760px) {
  .wall__grid { grid-template-columns: 1fr; gap: 19px; }
  .wl__card { padding: 8px; }
  .wl__foot { padding: 17px 10px 12px; }
  .wl__foot::after { right: 6px; top: 17px; font-size: 21px; }

  .ps-offers .offers { grid-template-columns: 1fr; }
  .ps-offers .offers .offer { min-height: 0; padding: 25px 28px; }
  .ps-offers .offers .offer__title { margin: 25px 0 17px; }
  .ps-offers .offers .offer__body { max-width: 350px; margin-bottom: 24px; }

  /* «Who this is for» линеаризуется в одну колонку — тот же приём,
     что .wall__grid/.ps-offers .offers выше в этом же блоке. */
  .aud__list { grid-template-columns: 1fr; gap: 16px; }
  .aud__i { padding: 28px 26px; }

  /* «What I can do here» — залипание требует места для прокрутки
     сверху карточки, на 390px его нет; мобильный читает блок
     подряд, тем же приёмом, что home-alchemy.css делает для
     .services-section на этой же ширине (@media(max-width:760px)
     .services-section{display:block}, строка 463). */
  .wid .shell { display: block; }
  .wid .sect-head { position: relative; top: auto; margin-bottom: 24px; }
  .wid__list { gap: 16px; padding: 0; }
  .wid__item { position: relative; top: auto !important; min-height: 0; }
}

/* короткий вьюпорт — той стопке некуда прокручиваться (тот же приём,
   что home-alchemy.css держит для .services-grid: @media(max-height:
   650px), строка 467) — залипание снимается тем же способом. */
@media (max-height: 650px) {
  .wid .sect-head, .wid__item { position: relative; top: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  .wl__card:hover .wl__img { transform: none; }
  .aud__i, .aud__i:hover { transition: none; transform: none; }
  .wid .sect-head, .wid__item { position: relative; top: auto !important; }
}

/* Копирайт-ревью 14.09.2026: пункты строки работ набираются жирным —
   это якорь для сканирующего взгляда, не украшение. */
.service-tags strong,
.offer__kw strong { font-weight: 700; color: var(--ink); }