/* Стили блога. В отличие от index.html, privacy и terms, где CSS встроен в страницу,
   здесь он вынесен файлом: страниц блога много, и один закэшированный файл выгоднее,
   чем та же простыня, скачанная заново на каждом посте. Палитра повторяет лендинг. */

:root{
  --bg:#07070c; --ink:#ECEAF6; --muted:#9a96b4;
  --violet:#a86bff; --line:rgba(255,255,255,.08);
  --prose:#cec9e2;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,sans-serif;
  background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;
  line-height:1.65; overflow-x:hidden;
}
a{color:var(--violet);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60vw 60vw at 80% 0%, rgba(168,107,255,.12), transparent 60%);
}

/* Шапка-остров: плавающая панель, а не полоса во всю ширину. Повторяет лендинг,
   чтобы переход на блог не читался как другой сайт.
   Именно по классу, а не по тегу: <nav> на странице ещё три — крошки, соседние
   посты и подвал, — и они бы тоже стали липкими панелями с фоном. */
.site-nav{
  position:sticky;top:14px;z-index:50;
  width:min(1120px,calc(100% - 32px));margin:14px auto 0;
  border:1px solid rgba(255,255,255,.10);border-radius:999px;
  background:rgba(10,9,18,.42);backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 10px 40px rgba(0,0,0,.38);
}
.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;
  height:58px;max-width:none;padding:0 10px 0 22px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.3px;
  font-size:19px;color:var(--ink)}
.logo:hover{text-decoration:none}
.logo .dot{width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#e7d5ff,var(--violet));
  box-shadow:0 0 14px var(--violet)}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-links a{color:var(--muted);font-size:15px}
.nav-links a:hover{color:var(--ink);text-decoration:none}
.nav-links a.here{color:var(--ink)}
.btn-nav{display:inline-flex;align-items:center;padding:9px 18px;border-radius:999px;
  font-weight:600;font-size:14px;color:#fff !important;
  background:linear-gradient(180deg,#b885ff,#7d44e6);
  box-shadow:0 8px 30px rgba(125,68,230,.35);transition:.2s}
.btn-nav:hover{transform:translateY(-1px);box-shadow:0 12px 38px rgba(125,68,230,.55)}

/* Ширина колонки под текст: у длинной статьи это главный фактор читаемости.
   Растягивать прозу на всю страницу нельзя, поэтому ширину добирает сайдбар. */
main{max-width:74ch;margin:0 auto;padding:52px 24px 96px}
main.wide{max-width:1120px}

/* Пост: текст плюс колонка справа. Колонка контента остаётся около 70 символов
   в строке, сайдбар занимает остальное. */
main.post-layout{
  max-width:1120px;display:grid;align-items:start;
  grid-template-columns:minmax(0,1fr) 300px;gap:0 60px;
}
.post-layout .crumbs{grid-column:1 / -1}
.post-main{min-width:0}

.sidebar{display:flex;flex-direction:column;gap:16px;position:sticky;top:96px}
.side-block{border:1px solid var(--line);border-radius:18px;padding:20px 22px;
  background:rgba(255,255,255,.02)}
.side-block h2{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:14px}
.side-posts{list-style:none;margin:0}
.side-posts li{padding:13px 0;border-top:1px solid var(--line)}
.side-posts li:first-child{border-top:0;padding-top:0}
.side-posts li:last-child{padding-bottom:0}
.side-posts a{display:block;color:var(--ink);font-size:15px;font-weight:600;line-height:1.4}
.side-posts a:hover{color:var(--violet);text-decoration:none}
.side-posts time{display:block;color:var(--muted);font-size:13px;margin-top:6px}
.side-toc ol{list-style:none;margin:0;counter-reset:toc}
.side-toc li{counter-increment:toc;margin:0 0 2px}
.side-toc a{display:flex;gap:10px;color:var(--muted);font-size:14px;line-height:1.4;
  padding:7px 0;border-left:2px solid transparent;padding-left:0}
.side-toc a::before{content:counter(toc,decimal-leading-zero);color:var(--violet);
  font-size:11px;font-weight:700;padding-top:2px;opacity:.75}
.side-toc a:hover{color:var(--ink);text-decoration:none}

.side-cta{background:linear-gradient(180deg,rgba(168,107,255,.12),rgba(255,255,255,.01))}
.side-cta h2{color:var(--violet)}
.side-cta p{color:var(--muted);font-size:14px;line-height:1.55;margin-bottom:16px}
.side-cta .btn-nav{font-size:14px}
.side-meta{display:flex;gap:18px;font-size:14px;padding:15px 22px}
.side-meta a{color:var(--muted)}
.side-meta a:hover{color:var(--ink);text-decoration:none}

.crumbs{font-size:14px;color:var(--muted);margin-bottom:22px}
.crumbs a{color:var(--muted)}
.crumbs span{margin:0 8px;opacity:.5}

h1{font-size:clamp(30px,5vw,44px);font-weight:800;letter-spacing:-.8px;line-height:1.12}
.meta{color:var(--muted);font-size:14px;margin-top:14px;display:flex;flex-wrap:wrap;
  align-items:center;gap:10px}
.meta .sep{opacity:.45}
.lede{margin-top:26px;font-size:19px;color:#d8d3ea;line-height:1.6}
/* Обложка поста. Размеры проставлены в разметке, чтобы место под неё резервировалось
   до загрузки и страница не прыгала. */
img.hero{display:block;width:100%;height:auto;margin-top:30px;border-radius:20px;
  border:1px solid var(--line)}

/* Выжимка в начале поста */
.tldr{margin-top:34px;border:1px solid var(--line);border-radius:18px;padding:22px 26px;
  background:linear-gradient(180deg,rgba(168,107,255,.10),rgba(255,255,255,.01))}
.tldr h2{font-size:13px;letter-spacing:1.6px;text-transform:uppercase;color:var(--violet);
  font-weight:700;margin-bottom:12px}
.tldr ul{margin:0 0 0 20px}
.tldr li{margin:8px 0;color:#ddd6f2;font-size:16px}

/* Текст поста. 17px вместо базовых 16: колонка стала шире из-за сайдбара, и более
   крупный шрифт держит длину строки в районе 75 символов. */
.prose{margin-top:34px;font-size:17px}
/* Отступ под липкую шапку, чтобы переход по ссылке из оглавления не прятал заголовок */
.prose h2,.faq,.sources{scroll-margin-top:92px}
.prose h2{font-size:26px;font-weight:700;letter-spacing:-.4px;margin:46px 0 14px}
.prose h3{font-size:19px;font-weight:700;margin:32px 0 10px;color:#cfc9e8}
.prose p{margin:16px 0;color:var(--prose)}
.prose strong{color:var(--ink)}
.prose ul,.prose ol{margin:16px 0 16px 22px}
.prose li{margin:9px 0;color:var(--prose)}
.prose blockquote{border-left:2px solid var(--violet);padding:2px 0 2px 20px;margin:26px 0;
  color:#ddd6f2;font-size:18px}
.prose img{max-width:100%;height:auto;border-radius:16px;border:1px solid var(--line);
  margin:28px 0;display:block}
.prose figure{margin:28px 0}
.prose figcaption{color:var(--muted);font-size:14px;margin-top:10px;text-align:center}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:6px;
  padding:2px 6px}
.prose pre{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;
  padding:18px;margin:24px 0;overflow-x:auto}
.prose pre code{background:none;border:0;padding:0;font-size:14px}
.prose hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.prose table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px;display:block;
  overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left;
  color:var(--prose)}
.prose th{color:var(--ink);font-weight:600}

/* Цитата с атрибуцией — шорткод {% quote %} */
.quote{margin:32px 0}
.quote blockquote{border-left:2px solid var(--violet);padding:2px 0 2px 20px;margin:0}
.quote blockquote p{font-size:19px;color:#e2dcf5;line-height:1.55;margin:0}
.quote figcaption{color:var(--muted);font-size:14px;margin-top:12px;padding-left:22px}
.quote figcaption a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.quote figcaption a:hover{color:var(--ink)}

/* Врезка о границах доказательств — шорткод {% caveat %}. Намеренно спокойная, не
   красная: это не предупреждение об ошибке, а честная часть текста. */
.caveat{margin:30px 0;border:1px solid rgba(92,242,217,.28);border-radius:16px;
  padding:18px 22px;background:linear-gradient(180deg,rgba(92,242,217,.07),rgba(255,255,255,.01))}
.caveat-label{color:#5cf2d9;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;
  font-weight:700;margin:0 0 8px}
.caveat p{color:var(--prose);margin:0;font-size:16px}

/* FAQ: вопросы видимым текстом, без раскрывашек — скрытый ответ хуже читается
   и ассистентами, и людьми с экранной лупой */
.faq{margin-top:56px;border-top:1px solid var(--line);padding-top:36px}
.faq > h2{font-size:26px;font-weight:700;letter-spacing:-.4px;margin-bottom:8px}
.faq-item{margin-top:26px}
.faq-item h3{font-size:18px;font-weight:700;color:#cfc9e8;margin-bottom:8px}
.faq-item p{color:var(--prose);margin:0}

/* Источники */
.sources{margin-top:52px;border-top:1px solid var(--line);padding-top:36px}
.sources > h2{font-size:20px;font-weight:700;letter-spacing:-.3px;margin-bottom:14px}
.sources ol{margin:0 0 0 20px}
.sources li{color:var(--muted);font-size:15px;margin:10px 0}
.sources a{color:#bda3ff}

/* Теги */
.topics{display:flex;flex-wrap:wrap;gap:8px}
.topic{display:inline-block;font-size:13px;color:var(--muted);border:1px solid var(--line);
  border-radius:999px;padding:5px 12px;background:rgba(255,255,255,.03)}
.topic:hover{color:var(--ink);text-decoration:none;background:rgba(255,255,255,.07)}

/* Врезка «в приложении это работает так» в конце поста */
.cta{margin-top:64px;border:1px solid var(--line);border-radius:22px;padding:30px;
  background:linear-gradient(180deg,rgba(168,107,255,.10),rgba(255,255,255,.01))}
.cta h2{font-size:22px;font-weight:700;letter-spacing:-.3px}
.cta p{color:var(--muted);margin:10px 0 20px}
.cta .btn-nav{font-size:15px;padding:11px 20px}

/* Соседние посты */
.around{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px}
.around a{border:1px solid var(--line);border-radius:18px;padding:18px 20px;
  background:rgba(255,255,255,.02);color:var(--ink)}
.around a:hover{background:rgba(255,255,255,.05);text-decoration:none}
.around .dir{display:block;font-size:12px;color:var(--muted);letter-spacing:1.2px;
  text-transform:uppercase;margin-bottom:8px}
.around .to-next{text-align:right}

/* Список постов */
.blog-head{padding:60px 0 10px}
.blog-head h1{font-size:clamp(34px,5vw,50px)}
.blog-head .lede{max-width:60ch}
/* Список постов карточками: в первый экран попадает больше заголовков, чем в
   вертикальной ленте. auto-fit, а не фиксированные две колонки, чтобы единственная
   карточка занимала всю ширину, а не половину с пустотой справа. */
.posts{list-style:none;margin:44px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:20px}
.posts li{border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  transition:background .2s}
.posts li:hover{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.posts li{overflow:hidden}
.posts article{padding:26px 28px}
.card-image{display:block;margin:-1px -1px 0;border-bottom:1px solid var(--line)}
/* Высота превью фиксирована, а не считается из пропорций картинки: карточка
   единственного поста растягивается на всю ширину, и обложка 1200×630 заняла бы
   пол-экрана раньше заголовка. */
.card-image img{display:block;width:100%;height:210px;object-fit:cover;object-position:center}
.posts li:has(.card-image) article{padding-top:22px}
.posts h2{font-size:23px;font-weight:700;letter-spacing:-.3px;line-height:1.3}
.posts h2 a{color:var(--ink)}
.posts h2 a:hover{color:var(--violet);text-decoration:none}
.posts p{color:var(--muted);margin:10px 0 14px;font-size:16px}
.posts .meta{margin:0 0 10px}
.draft-flag{color:#f0d9a8;border:1px solid #d9a441;background:rgba(217,164,65,.10);
  border-radius:999px;padding:3px 10px;font-size:12px}

.pager{display:flex;justify-content:space-between;align-items:center;margin-top:40px;
  color:var(--muted);font-size:15px}
.pager a{color:var(--muted)}
.pager a:hover{color:var(--ink)}

.empty{color:var(--muted);margin-top:36px}

footer{border-top:1px solid var(--line);padding:30px 0;color:var(--muted);font-size:14px;
  margin-top:40px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
footer a{color:var(--muted)}
footer .links{display:flex;gap:18px;flex-wrap:wrap}

/* Ниже 980px сайдбар не помещается рядом с читаемой колонкой: уводим его под текст,
   где он работает как обычный блок «читайте дальше». */
@media (max-width:980px){
  main.post-layout{grid-template-columns:minmax(0,1fr);max-width:74ch}
  .sidebar{position:static;margin-top:56px;gap:16px}
}

@media (max-width:760px){
  .posts{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:640px){
  .around{grid-template-columns:1fr}
  .around .to-next{text-align:left}
  .nav-links{gap:14px}
  main{padding-top:36px}
}
