/* article.css — общие стили страницы статьи блога «Журнал» (подключается всеми пост-страницами) */

/* Fjalla One (display latin) не содержит кириллицы → латиница/цифры и кириллица в заголовках
   раскладывались разными шрифтами. Унифицируем на Oswald (покрывает оба алфавита). */
.font-grotesk-ru { font-family: 'Oswald', sans-serif; font-weight: 700; }
.prose h2, .prose h3 { font-family: 'Oswald', sans-serif; font-weight: 700; }

.article-col { max-width: 760px; margin-left: auto; margin-right: auto; }

.article-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 26px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 18px, rgba(255,255,255,0.015) 18px 36px),
    radial-gradient(120% 130% at 80% 100%, #0a1c54 0%, #060f33 55%, #030b26 100%); }
.article-cover-label { position: absolute; left: 16px; bottom: 16px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--text) / 0.5);
  border: 1px solid rgb(var(--text) / 0.16); border-radius: 999px; padding: 5px 12px; }

/* prose body */
.prose { color: rgb(var(--text) / 0.8); }
.prose p { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; line-height: 1.82; margin: 0 0 22px; }
.prose h2 { font-family: 'Fjalla One','Oswald',sans-serif; text-transform: uppercase; color: rgb(var(--text)); font-size: clamp(23px,4vw,30px); line-height: 1.08; letter-spacing: 0.005em; margin: 48px 0 18px; }
.prose h3 { font-family: 'Fjalla One','Oswald',sans-serif; text-transform: uppercase; color: rgb(var(--text)); font-size: 19px; line-height: 1.15; margin: 34px 0 12px; }
.prose ul, .prose ol { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; line-height: 1.75; margin: 0 0 22px; padding-left: 0; list-style: none; }
.prose ul li { position: relative; padding-left: 26px; margin-bottom: 11px; }
.prose ul li::before { content: ''; position: absolute; left: 4px; top: 11px; width: 7px; height: 7px; border-radius: 2px; background: rgb(var(--neon)); }
.prose ol { counter-reset: n; }
.prose ol li { position: relative; padding-left: 38px; margin-bottom: 13px; counter-increment: n; }
.prose ol li::before { content: counter(n); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: rgb(var(--neon));
  background: rgb(var(--neon) / 0.12); border: 1px solid rgb(var(--neon) / 0.3); }
.prose strong { color: rgb(var(--text)); font-weight: 600; }
.prose a { color: rgb(var(--neon)); text-decoration: none; border-bottom: 1px solid rgb(var(--neon) / 0.4); }
.prose a:hover { border-bottom-color: rgb(var(--neon)); }

/* comparison table */
.ts-table-wrap { overflow-x: auto; margin: 0 0 24px; border-radius: 18px; }
.ts-table { width: 100%; border-collapse: collapse; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; min-width: 480px; }
.ts-table th { text-align: left; text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; color: rgb(var(--text) / 0.6);
  padding: 14px 16px; border-bottom: 1.5px solid rgb(var(--neon) / 0.45); }
.ts-table td { padding: 13px 16px; color: rgb(var(--text) / 0.82); border-bottom: 1px solid rgb(var(--text) / 0.08); }
.ts-table tr:last-child td { border-bottom: none; }
.ts-table td:first-child { color: rgb(var(--text)); }
.ts-num { color: rgb(var(--neon)) !important; }

.article-fig { margin: 8px 0 28px; }
.article-fig .ph { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 16px, rgba(255,255,255,0.015) 16px 32px), #0a1330; }
.article-fig figcaption { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: rgb(var(--text) / 0.5); margin-top: 12px; text-align: center; }

.related-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 720px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }
.rel-cover { aspect-ratio: 16 / 9;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 14px, rgba(255,255,255,0.015) 14px 28px), radial-gradient(120% 130% at 80% 100%, #0a1c54 0%, #050f33 60%, #030b26 100%); }
.rel-card:hover .rel-title { color: #6FFF00; }