/* ============================================================
   VisArtis — ЖУРНАЛ. Витрина записей (/journal) и страница
   очерка (/journal/{slug}). Поверх tokens.css + base.css.

   По ЗАКОНУ витрины: белое полотно --page-white, текст
   --ink-black, акцент --accent, антиква Source Serif 4 в
   заголовках и именах вещей, Inter в тексте, контейнер 1400,
   скругления 2 / 6 / 8 / 10, у карточек теней НЕТ.

   Единственное, чем журнал отличается от каталога, — колонка
   чтения: 720px и кегль 18.5/1.7. Очерк на 6000 знаков читают
   подряд, и строка каталога в 16px здесь не работает.
   ============================================================ */

/* Полотно плоское, как на главной: атмосферных слоёв нет */
body {
  background: var(--page-white);
  background-image: none;
  color: var(--ink-black);
}
body::before { content: none; }


/* ------------------------------------------------------------
   1. Общие детали обеих страниц
   ------------------------------------------------------------ */

/* Метка типа записи: очерк, поступление, итоги торгов */
.jr-kind {
  display: block;
  margin: 0 0 8px;
  font-size: 11px; font-weight: 500; line-height: 1.4;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent);
}

/* Дата, время чтения — одна строка мелкого служебного текста */
.jr-meta {
  display: block;
  font-size: 13.5px; line-height: 1.5;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* Хлебная крошка — тот же рецепт, что в каталоге и карточке лота */
.jr-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  min-height: 24px;
  font-size: 13.5px; color: var(--ink-2);
}
.jr-crumbs a:hover { color: var(--accent); }
.jr-crumbs .sep { color: var(--ink-3); }
.jr-crumbs .here { color: var(--ink-black); }


/* ------------------------------------------------------------
   2. Витрина: шапка раздела
   ------------------------------------------------------------ */

/* Боковое поле держит .container из base.css — здесь только вертикаль:
   короткая запись `padding` затирала бы его и клала текст на край окна. */
.journal { padding-top: var(--s3); padding-bottom: var(--s10); }

.journal-head { margin: var(--s2) 0 0; max-width: 62ch; }
.journal-head h1 {
  margin: 0;
  font-family: var(--serif); font-weight: 400;
  font-size: 34px; line-height: 1.15;
  color: var(--ink-black);
}
.journal-head__lede {
  margin: 12px 0 0;
  font-size: 16px; line-height: 1.6;
  color: var(--ink-2);
}

/* Активная метка: показана, только когда журнал отфильтрован ?tag= */
.journal-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: var(--s3);
  font-size: 13.5px; color: var(--ink-2);
}
.journal-filter__chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 32px; padding: 0 6px 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-control);
  background: var(--page-white);
  font-size: 13.5px; color: var(--ink-black);
}
.journal-filter__off {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: var(--r-control);
  background: none; color: var(--ink-2);
  font-size: 14px; line-height: 1;
}
.journal-filter__off:hover { color: var(--accent); background: var(--accent-bg); }

.journal-feed { margin-top: var(--gap-section); }


/* ------------------------------------------------------------
   3. Крупная первая запись
   ------------------------------------------------------------ */

.jr-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--s6);
  align-items: center;
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--line);
}
.jr-lead__photo {
  display: block; position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--r-hero);
  background: var(--photo);
}
.jr-lead__photo img { width: 100%; height: 100%; object-fit: cover; }
.jr-lead__body { display: block; }
.jr-lead__title {
  display: block; margin: 0 0 12px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2;
  color: var(--ink-black);
  text-wrap: balance;
}
.jr-lead:hover .jr-lead__title { color: var(--accent-dark); }
.jr-lead__lead {
  display: block; margin: 0 0 var(--s2);
  font-size: 17px; line-height: 1.6;
  color: var(--ink-2);
  max-width: 52ch;
}

/* Запись без обложки: вместо серой плашки — тонкая линия акцента,
   чтобы карточка не выглядела сломанной картинкой */
.jr-lead--flat { grid-template-columns: minmax(0, 1fr); gap: 0; }
.jr-lead--flat .jr-lead__body {
  border-top: 2px solid var(--accent);
  padding-top: var(--s3);
  max-width: 68ch;              /* без фото строка иначе тянется на весь 1400 */
}


/* ------------------------------------------------------------
   4. Сетка записей
   ------------------------------------------------------------ */

.jr-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s6) var(--s4);
  margin-top: var(--s6);
}

.jr-card { display: block; background: transparent; border: 0; box-shadow: none; }
.jr-card__photo {
  display: block; position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--r-photo);
  background: var(--photo);
  margin-bottom: 14px;
}
.jr-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.jr-card__body { display: block; }
.jr-card__title {
  display: block; margin: 0 0 8px;
  font-family: var(--serif); font-weight: 600;
  font-size: 20px; line-height: 1.3;
  color: var(--ink-black);
  overflow-wrap: anywhere;
}
.jr-card:hover .jr-card__title { color: var(--accent-dark); }
.jr-card__lead {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 10px;
  font-size: 15px; line-height: 1.6;
  color: var(--ink-2);
}
.jr-card--flat .jr-card__body {
  border-top: 2px solid var(--accent);
  padding-top: var(--s2);
}


/* ------------------------------------------------------------
   5. «Показать ещё»
   ------------------------------------------------------------ */

.journal-more { margin-top: var(--s6); text-align: center; }
.journal-more p { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-2); }


/* ------------------------------------------------------------
   6. Пусто и ошибка
   ------------------------------------------------------------ */

.jr-empty {
  border: 1px solid var(--line); border-radius: var(--r-panel);
  background: var(--surface-1);
  padding: var(--s8) var(--s3);
  text-align: center;
}
.jr-empty__title {
  margin: 0 0 8px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 2.4vw, 27px); line-height: 1.2;
  color: var(--ink-black);
  text-wrap: balance;
}
.jr-empty p { margin: 0 auto; max-width: 46ch; font-size: 16px; color: var(--ink-2); }
.jr-empty__actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: var(--s3);
}


/* ------------------------------------------------------------
   7. Скелетоны: те же пропорции, что у настоящих карточек
   ------------------------------------------------------------ */

.sk-line { height: 13px; border-radius: var(--r-control); }
.sk-line + .sk-line { margin-top: 10px; }
.sk-line--title { height: 22px; width: 80%; }
.sk-line--short { width: 55%; }
.jr-sk__photo { aspect-ratio: 3 / 2; border-radius: var(--r-photo); margin-bottom: 14px; }
.jr-sk-lead__photo { aspect-ratio: 16 / 10; border-radius: var(--r-hero); }


/* ------------------------------------------------------------
   8. Страница очерка: колонка чтения
   ------------------------------------------------------------ */

.entry-page { padding-top: var(--s3); padding-bottom: var(--s10); }
.entry-page .jr-crumbs,
.entry { max-width: 720px; margin-left: auto; margin-right: auto; }

.entry { margin-top: var(--s5); }

.entry__cover {
  margin: 0 0 var(--s5);
  overflow: hidden;
  border-radius: var(--r-hero);
  background: var(--photo);
  aspect-ratio: 3 / 2;
}
.entry__cover img { width: 100%; height: 100%; object-fit: cover; }

.entry__head { margin-bottom: var(--s5); }
.entry__head h1 {
  margin: 0;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 3.6vw, 40px); line-height: 1.15;
  color: var(--ink-black);
  text-wrap: balance;
}
.entry__meta { margin: var(--s2) 0 0; }
.entry__lead {
  margin: var(--s3) 0 0;
  font-family: var(--serif); font-size: 21px; line-height: 1.5;
  color: var(--ink-2);
}


/* ------------------------------------------------------------
   9. Тело очерка. Кегль 18.5/1.7 — здесь читают подряд.
   ------------------------------------------------------------ */

.entry__body {
  font-size: 18.5px; line-height: 1.7;
  color: var(--ink-black);
}
.entry__body > * { margin: 0 0 var(--s3); }
.entry__body > *:last-child { margin-bottom: 0; }

.entry__body h2 {
  margin: var(--s7) 0 var(--s2);
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 2.4vw, 27px); line-height: 1.25;
  color: var(--ink-black);
  text-wrap: balance;
}
.entry__body h3 {
  margin: var(--s5) 0 12px;
  font-family: var(--serif); font-weight: 600;
  font-size: 20px; line-height: 1.3;
  color: var(--ink-black);
}
.entry__body h4 {
  margin: var(--s4) 0 10px;
  font-family: var(--sans); font-weight: 600;
  font-size: 16px; line-height: 1.4; letter-spacing: .01em;
  color: var(--ink-black);
}
.entry__body h2:first-child,
.entry__body h3:first-child { margin-top: 0; }

.entry__body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-light);
  text-underline-offset: 3px;
}
.entry__body a:hover { color: var(--accent-dark); }

.entry__body ul,
.entry__body ol { padding-left: 1.3em; }
.entry__body li { margin-bottom: 10px; }
.entry__body li::marker { color: var(--accent); }

.entry__body blockquote {
  margin: var(--s4) 0;
  padding: 4px 0 4px var(--s3);
  border-left: 2px solid var(--accent);
  font-family: var(--serif); font-size: 20px; font-style: italic;
  line-height: 1.55; color: var(--ink-2);
}
.entry__body blockquote p { margin: 0 0 12px; }
.entry__body blockquote p:last-child { margin-bottom: 0; }

.entry__body code {
  padding: 2px 6px;
  border-radius: var(--r-control);
  background: var(--surface-2);
  font-size: .88em;
}

.entry__body .journal-rule,
.entry__body hr {
  height: 0; margin: var(--s6) auto;
  width: 120px;
  border: 0; border-top: 1px solid var(--line);
}

.entry__body strong { font-weight: 600; }


/* ------------------------------------------------------------
   10. Врезка предмета: маркер [[public_id]] из тела очерка
   ------------------------------------------------------------ */

.entry-inset {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--s3);
  align-items: center;
  margin: var(--s5) 0;
  padding: var(--s2);
  border: 1px solid var(--line); border-radius: var(--r-panel);
  background: var(--page-white);
}
/* Врезка живёт внутри .entry__body, где всякая ссылка подчёркнута.
   Целая карточка подчёркиванием не размечается — подчёркивают слова. */
.entry__body a.entry-inset,
.entry__body a.entry-inset:hover { text-decoration: none; color: var(--ink-black); }
.entry-inset:hover { border-color: var(--accent-light); }
.entry-inset__photo {
  display: block; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--r-photo); background: var(--photo);
}
.entry-inset__photo img { width: 100%; height: 100%; object-fit: cover; }
.entry-inset__cap {
  display: block; margin: 0 0 6px;
  font-size: 12px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2);
  font-family: var(--sans);
}
.entry-inset__title {
  display: block; margin: 0 0 4px;
  font-family: var(--serif); font-weight: 600; font-size: 18px; line-height: 1.3;
  color: var(--ink-black);
}
.entry-inset:hover .entry-inset__title { color: var(--accent-dark); }
.entry-inset__note {
  display: block; font-size: 14px; line-height: 1.5; color: var(--ink-2);
  font-family: var(--sans);
}
.entry-inset__price {
  display: block; margin-top: 6px;
  font-family: var(--serif); font-weight: 600; font-size: 17px;
  color: var(--ink-black); font-variant-numeric: tabular-nums;
}

/* Строчное упоминание внутри абзаца — обычная ссылка каталога */
.entry__body a.lot-mark { font-family: var(--serif); font-weight: 600; }


/* ------------------------------------------------------------
   11. Метки записи
   ------------------------------------------------------------ */

.entry__tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: var(--s7) 0 0; padding: 0;
}
.entry__tags li { margin: 0; }
.jr-tag {
  display: inline-flex; align-items: center;
  min-height: 32px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-control);
  font-size: 13.5px; color: var(--ink-2);
}
.jr-tag:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }


/* ------------------------------------------------------------
   12. Хвост очерка: предметы и «Читать дальше».
   Колонка шире текстовой — это уже не чтение, а выход из него.
   ------------------------------------------------------------ */

.entry-foot {
  max-width: 960px; margin: 0 auto;
  padding-top: var(--s10);
}
.entry-foot > section + section {
  margin-top: var(--s10);
  padding-top: var(--s10);
  border-top: 1px solid var(--line);
}
.entry-foot h2 {
  margin: 0 0 var(--s4);
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 2.4vw, 27px); line-height: 1.2;
  color: var(--ink-black);
}
.entry-foot .jr-grid { margin-top: 0; gap: var(--s5) var(--s4); }
.entry-foot .jr-card__title { font-size: 18px; }

/* Ошибка и «записи нет» на странице очерка */
.entry-fail { max-width: 720px; margin: var(--s8) auto 0; }


/* ------------------------------------------------------------
   13. Узкие экраны
   ------------------------------------------------------------ */

@media (max-width: 1023px) {
  .jr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .jr-lead { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .jr-lead__photo { aspect-ratio: 3 / 2; }
}

@media (max-width: 760px) {
  .journal, .entry-page { padding-bottom: var(--s8); }
  .journal-head h1 { font-size: 28px; }
  .journal-feed { margin-top: var(--s5); }
  .jr-grid { gap: var(--s5) var(--s3); margin-top: var(--s5); }

  .entry { margin-top: var(--s4); }
  .entry__cover { aspect-ratio: 4 / 3; margin-bottom: var(--s4); }
  .entry__head { margin-bottom: var(--s4); }
  .entry__lead { font-size: 19px; }

  /* С руки читают ближе — кегль не уменьшаем, но и не раздуваем */
  .entry__body { font-size: 17.5px; }
  .entry__body blockquote { font-size: 18px; }

  .entry-foot { padding-top: var(--s8); }
  .entry-foot > section + section { margin-top: var(--s8); padding-top: var(--s8); }
}

@media (max-width: 560px) {
  .jr-grid { grid-template-columns: minmax(0, 1fr); }
  .entry-inset { grid-template-columns: 72px minmax(0, 1fr); gap: var(--s2); }
}

/* Палец — 44px: метки и «показать ещё» на тач-экране крупнее */
@media (hover: none), (pointer: coarse) {
  .jr-tag { min-height: 44px; padding: 0 16px; }
  .journal-filter__chip { min-height: 44px; }
  .journal-filter__off { width: 32px; height: 32px; }
}