/* ============================================================
   DIALOG — ТЕМА ALCHEMY, РУЧНЫЕ ПРАВКИ
   Anna Gorodetskaya — Portfolio · 14 сентября 2026

   Модалка проекта на главной (.project-dialog, site/js/alchemy-
   work.js) годами не подключала ни одной строки CSS вовсе: все
   правила .dialog-* лежат в case-alchemy.css (сгенерирован
   site/tools/split-alchemy-css.mjs из research/alchemy-reference/
   index.html, снятого 12 сентября), а тот файл никогда не грузился
   на главной (тема alchemy читает раскладку кейса из caseCss:
   'case-jelly.css', этот файл просто оказался рядом при сплите).
   Отсюда все три жалобы Анны: медиа в натуральную величину, текст
   подряд без иерархии, видео без эмбеда.

   Этот файл — НЕ форк case-alchemy.css, а рукописный слой поверх
   него (в build.mjs THEMES.alchemy.dialogCss = 'case-alchemy.css'
   подключается первым, dialogTuneCss = этот файл — последним;
   печатаются оба только в buildHome(), см. extraCss). Генератор
   case-alchemy.css не трогается вовсе — его собственная зелёная
   палитра (снятая с того же референса) и базовая рамка/паддинги/
   сетка .dialog-meta остаются как есть.

   Что здесь правится:
   1. Формула высоты медиа — доля экрана с родным соотношением,
      никогда жёсткий пиксель. Те же числа и тот же приём, что уже
      держат .panel__asset в трёх темах (home.css/home-light.css:
      62vh десктоп / 46vh мобильный), с собственным потолком в
      пикселях под масштаб модалки — min(56vh, 440px). Кадр
      показывается ЦЕЛИКОМ (object-fit:contain), вертикаль
      (urban-russia, 1080×1920) не режется в полосу.
   2. Result / Recognition — подписанные блоки вместо сплошного
      текста, рецепт подписи — дословно .dialog-meta dt.
   3. Подпись кадра (media label) под героем модалки.
   4. Вторая строка эйброу — уровень/происхождение/период.
   5. Двойной разделитель над AI-заметкой (.dialog-system несёт
      свою рамку+отступ, .ain внутри — свою) сведён к одному.

   Цвета — только токены темы (--ink-55, --ink-80, --ground и т.д.), сырых hex нет:
   case-alchemy.css правило это не нарушает — он отдельно
   сгенерированный файл со своей замороженной палитрой, но новый
   рукописный слой обязан жить по общему правилу проекта.
   ============================================================ */

/* ------------------------------------------------------------
   1. МЕДИА — доля экрана, не жёсткий пиксель
   ------------------------------------------------------------ */

/* case-alchemy.css: .dialog-hero{height:360px;margin-top:-44px} —
   360px рассчитан на кадры эталона (16:10), у нас в реестре есть
   вертикали. height:auto — контейнер сам оборачивает содержимое
   (кадр + подпись), верхнюю границу держит не он, а сама картинка/
   видео/iframe (ниже). margin-top снят: проверено в браузере
   (14.09.2026) — с фиксированной height:360px это утаскивало кадр
   НАД видимым верхом диалога и подрезалось клипом overflow:auto
   самого .project-dialog; с auto-высотой эффект был бы тем же,
   просто на другую величину, а компенсировать здесь нечем. */
.dialog-hero {
  height: auto;
  margin-top: 0;
  background: var(--ground);
}

.dialog-hero img,
.dialog-hero video {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(56vh, 440px);
  object-fit: contain;
  background: var(--ground);
}

/* iframe (YouTube-эмбед) — object-fit на iframe непостоянно
   поддержан в браузерах, поэтому вместо letterbox-контейна держим
   его родное 16:9 через aspect-ratio (все четыре видео в реестре —
   ratio: ar-169) и ту же верхнюю границу, что у картинки/видео. */
.dialog-hero iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: min(56vh, 440px);
  border: 0;
}

/* подпись кадра — по образцу .panel__caption (home.css/home-
   light.css): мелкий, приглушённый, отдельной строкой под медиа.
   Собственные горизонтальные отступы — .dialog-hero не несёт
   паддинга .dialog-body (45px/25px, case-alchemy.css), повторяем
   те же значения и тот же брейкпоинт 760px, чтобы подпись
   выравнивалась с текстом модалки, а не шла от края до края. */
.dialog-caption {
  margin: var(--s-1) 45px 0;
  color: var(--ink-55);
  font-size: 12px;
  letter-spacing: 0.02em;
}

@media (max-width: 760px) {
  .dialog-hero img,
  .dialog-hero video,
  .dialog-hero iframe { max-height: 46vh; }
  .dialog-caption { margin: var(--s-1) 25px 0; }
}

/* ------------------------------------------------------------
   2. ЭЙБРОУ УРОВНЯ/ПРОИСХОЖДЕНИЯ/ПЕРИОДА — вторая строка
   Типографику даёт общий .eyebrow (type-6-manrope-oxanium.css,
   подключён на каждой странице темы) — здесь только отступ,
   чтобы вторая строка не слипалась с первой (типы проекта). */
.dialog-tier { margin-top: 6px; }

/* ------------------------------------------------------------
   3. RESULT / RECOGNITION — подписанные блоки
   Подпись — рецепт .dialog-meta dt (case-alchemy.css: 10px,
   uppercase, letter-spacing .1em, margin-bottom 6px), не
   продублирован в разметку, только в этот класс.
   ------------------------------------------------------------ */
.dialog-note { margin-bottom: 19px; }
.dialog-note__label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
  margin: 0 0 6px;
  color: var(--ink-55);
}
.dialog-note__body {
  margin: 0;
  font-size: 15px;
  color: var(--ink-80);
}

/* ------------------------------------------------------------
   4. AI-ЗАМЕТКА — один разделитель, не два
   aiNoteHtml(p) несёт готовую разметку .ain (стилизована case-
   jelly.css, подключён на главной как panelCss — margin-top/
   padding-top/border-top уже есть у самого .ain). Обёртка
   .dialog-system (case-alchemy.css) рисует ту же пару рамка+
   отступ ещё раз поверх неё — без этой правки перед AI-заметкой
   стояли бы два хэйрлайна почти впритык. Снимаем верхний отступ/
   рамку с .dialog-system, когда внутри лежит .ain: разметка
   aiNoteHtml() при этом не переписывается ни на строку. */
.dialog-system:has(.ain) {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}