body {
    font-family: "Archivo Black", sans-serif;
    background-color: #e9e7e7;
    color: #1a1a1a;
    padding: 60px 20px;
    min-height: 100vh;
}
.wiki-editor-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 45px;
}
.editor-text-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* min-width: 0 ОБЯЗАТЕЛЕН. У элемента внутри flex по умолчанию
       min-width: auto — то есть он не может стать УЖЕ своего содержимого.
       Одно длинное слово без пробелов («ДОООО…») распирало колонку до
       12239px при карточке в 1308: замерено. Картинка следом брала свои
       «100% ширины колонки» и раздувалась вместе с ней — то есть обе беды
       росли из одного корня. */
    min-width: 0;
}
/* Обложка статьи показывается ЦЕЛИКОМ, без обрезки.
   Раньше у обёртки стояла жёсткая height: 320px, а у картинки
   object-fit: cover. Коробка выходила почти квадратной (на телефоне
   316x320), а фотографии широкие — и замер показал, что срезалось
   44–47% кадра, почти половина.
   Теперь размер диктует сама картинка: ширина и высота ограничены
   сверху, пропорции свои. */
.article-image-wrap {
    width: 100%;
    display: none; /* показываем только когда есть картинка */
}
.article-image-wrap.has-image {
    display: block;
}
.article-image-wrap img {
    display: block;
    /* width/height: auto + два потолка = картинка вписывается в оба
       ограничения, сохраняя пропорции. Полей по бокам не остаётся,
       поэтому фон и скругление держит сама картинка, а не обёртка. */
    width: auto;
    height: auto;
    max-width: 100%;
    /* Вертикальные кадры иначе занимали бы весь экран телефона */
    max-height: 70vh;
    margin: 0 auto;
    border-radius: 16px;
    background-color: #f0f0f0;
}
.article-heading {
    font-family: "Archivo Black", sans-serif;
    font-weight: 800;
    font-size: 24px;
    color: #1a1a1a;
    line-height: 1.3;
    /* Текст пишет человек, и он вправе прислать слово в тысячу букв.
       Без переноса такое слово уезжает за край экрана вместе со всей
       колонкой — см. min-width выше. */
    overflow-wrap: break-word;
    word-break: break-word;
}
/* Пустое состояние статьи. Сам класс .state-empty живёт в base.css; здесь
   только шрифт: body на этой странице набран Archivo Black, а он для строки
   текста слишком тяжёлый — берём шрифт основного текста статьи. */
.editor-text-column .state-empty {
    font-family: "Inter", sans-serif;
}

/* Текст статьи набран Inter, а НЕ Gotham. Замерено 25 августа.
   ---------------------------------------------------------------------------
   Автор пожаловался: «шрифт в статьях странный, одни буквы больше других».
   Причина оказалась в самом файле `gotham_light.otf`: его кириллица
   нарисована небрежно. «л» — острый значок без левой стойки (похож на «ʌ»),
   «д» — без опор. Рядом с нормальными буквами они читаются как знаки
   другого шрифта и оптически мельче.

   Проверялось по порядку, и первые две догадки оказались неверными:
     • подмены шрифта нет — браузер отрисовал абзац целиком в Gotham
       (CDP: 982 глифа, один шрифт);
     • пропусков в шрифте нет — все 33 строчные и 33 заглавные на месте,
       проверено разбором таблицы cmap в самом файле.
   То есть шрифт «работает», просто нарисован так. Видно это только глазами,
   на увеличенном снимке рядом с обычным шрифтом.

   Inter уже подключён на всех страницах (Google Fonts, в base.css) и им
   набран `body` — то есть новых загрузок не появляется, а кириллица у него
   правильная.

   ЧТО НЕ ТРОГАЕМ: подписи карточек (`.kart-iteml p`) и заголовки. Там Gotham
   остаётся — это лицо сайта, а на коротком слове огрехи «л» не читаются.
   К тому же подгонка кегля подписей (UI.fitCaptions) меряет ширину именно
   этим шрифтом, и смена семейства сдвинула бы её расчёты. */
.article-body {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: #2e2e2e;
    /* pre-wrap сохраняет переводы строк и пробелы автора, но переносит
       только ПО ПРОБЕЛАМ. Слово без пробелов он не разорвёт — для этого
       и нужен overflow-wrap. */
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
}
/* ---- Полоса «у вас есть правка на проверке» (этап 8, волна 2) ----
   Статья открывается ОПУБЛИКОВАННОЙ версией, свой вариант — по кнопке.
   Наоборот было бы хуже: автор правки перестал бы понимать, что из
   написанного видно другим. */
.article-edit-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    padding: 12px 16px;
    border-left: 4px solid #b8860b;
    border-radius: 8px;
    background: #fdf6e3;
    font-size: 15px;
    color: #4a3c14;
}

/* Пока показан свой вариант — полоса меняет цвет. Без этого легко забыть,
   что на экране непринятый текст, и решить, что правку уже одобрили. */
.article-edit-bar--mine {
    border-left-color: #1f7a3f;
    background: #eef7f0;
    color: #1d3d28;
}

/* «Эта статья удалена». Красная, а не жёлтая, как полоса правки: жёлтая
   значит «идёт работа», а здесь состояние другое — статьи на сайте нет.
   Видит её только автор и модерация, обычному читателю страница вообще
   не отдаётся (см. renderDeletedNotice в article.js). */
.article-deleted-bar {
    border-left-color: #a33a3a;
    background: #fdf1f0;
    color: #5d2020;
}

.article-deleted-bar .wiki-link {
    color: #5d2020;
    text-decoration: underline;
}

.article-edit-bar-btn {
    flex-shrink: 0;
    padding: 7px 14px;
    border: 1px solid currentColor;
    border-radius: 8px;
    background: transparent;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: inherit;
    cursor: pointer;
}

.article-edit-bar-btn:hover { background: rgba(0, 0, 0, .06); }

@media (max-width: 560px) {
    .article-edit-bar { flex-direction: column; align-items: flex-start; }
    .article-edit-bar-btn { width: 100%; }
}

/* ---- Обсуждения статьи ----
   Со стороны обсуждения ссылка на статью была с самого начала, обратной
   не существовало. Раздел стоит ПОД текстом: сначала статья, потом спор
   о ней. */

.article-threads {
    max-width: 1100px;
    margin: 40px auto 80px;
    padding: 0 20px;
}

.article-threads-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid #d5d3d3;
}

.article-threads-title {
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(19px, 3vw, 24px);
}

.article-threads-new {
    flex-shrink: 0;
    padding: 8px 16px;
    border: 1px solid #cacaca;
    border-radius: 10px;
    background: #ffffff;
    font-size: 14px;
    color: #1a1a1a;
    text-decoration: none;
    transition: border-color .2s ease;
}

.article-threads-new:hover { border-color: #1a1a1a; }

/* Сетка, а не лента: обсуждений у статьи единицы, листать нечего.
   Размеров карточки здесь НЕТ намеренно — ширину задают колонки
   (раздел 4 CLAUDE.md). */
.article-threads-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.article-threads-empty {
    font-size: 15px;
    color: #6b6b6b;
}

@media (max-width: 560px) {
    .article-threads { padding: 0 14px; }
    .article-threads-head { flex-direction: column; align-items: stretch; }
    .article-threads-new { text-align: center; }
}