/* FROST 5 · блог (Ч6). Подключается ПОСЛЕ site.css и dir.css: шапка, подвал, кнопки, плотные поверхности (--e1/--e2), хлебные крошки (.crumbs),
   «Связанные направления» (.rlg/.rlc), финальный блок (.askb) берутся оттуда как есть — блог обязан выглядеть тем же сайтом.
   Здесь только то, чего на сайте нет: обложка статьи, карточка списка, читаемая колонка, оглавление. Цвета — только токены family.css:
   светлая тема перекрашивает переменные, вбитый hex её сломал бы. */

main{display:block}
.b-wrap{padding-left:28px;padding-right:28px}
a.lnk[aria-current]{color:var(--fg);background:var(--p2);border-radius:9px}

/* ===== Обложка: карточка в стиле og-картинок (сетка, метки-перекрестья, знак, заголовок с акцентом); фото не нужны и запрещены ===== */
.cov{position:relative;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:1200/630;min-height:0;padding:clamp(14px,4.2%,30px);overflow:hidden;
  border:1px solid var(--edge);border-radius:var(--r1);background-color:var(--p1);
  background-image:linear-gradient(var(--edge) 1px,transparent 1px),linear-gradient(90deg,var(--edge) 1px,transparent 1px);background-size:34px 34px;background-position:-1px -1px;
  container-type:inline-size}
.cov::before,.cov::after{content:"";position:absolute;width:15px;height:15px;border:solid var(--edge2);border-width:0 0 1px 1px;pointer-events:none}
.cov::before{right:14px;top:14px;border-width:1px 1px 0 0} .cov::after{left:14px;bottom:14px}
.cov .cv-top{display:flex;align-items:center;gap:10px;position:relative}
.cov .cv-top svg{width:clamp(22px,6cqw,34px);height:clamp(22px,6cqw,34px);flex:none}
.cov .cv-top b{font:800 italic clamp(14px,4cqw,22px)/1 var(--disp);letter-spacing:.01em;color:var(--fg)}
.cov .cv-t{position:relative;margin:0;font:800 italic clamp(22px,8.6cqw,64px)/1.04 var(--disp);text-transform:uppercase;letter-spacing:-.01em;color:var(--fg);max-width:88%}
.cov .cv-t em{font-style:italic;color:var(--ice-t)}
.cov .cv-b{position:relative;display:flex;align-items:center;gap:10px;font:800 italic clamp(11px,3.1cqw,17px)/1.2 var(--disp);text-transform:uppercase;color:var(--fg)}
.cov .cv-b i{width:.7em;height:.7em;border-radius:2px;background:var(--volt);box-shadow:0 0 0 1px var(--edge2);flex:none}
.cov .cv-b .mono{margin-left:auto;font:600 clamp(10px,2.4cqw,13px) var(--mono);text-transform:none;color:var(--mu)}
@container (max-width:460px){.cov .cv-b .mono{display:none}}   /* на узкой обложке адрес не помещается — остаётся рубрика */

/* ===== Список ===== */
.bl-head{padding:30px 28px 0}
/* Текст прямо по живому фону (иней, снег) читается хуже, чем на поверхности: подложка как у заголовков разделов сайта (.sh) */
.scrimbox{width:fit-content;max-width:100%;padding:14px 18px;border-radius:14px;background:var(--scrim);background:color-mix(in srgb,var(--bg) 84%,transparent)}
.bl-head .lb{margin-bottom:8px}
.bl-head h1{margin:0;font:800 italic clamp(34px,5vw,64px)/1 var(--disp);text-transform:uppercase;letter-spacing:-.01em}
.bl-head p{margin:14px 0 0;color:var(--mu);font-size:17px;line-height:1.5;max-width:52ch}
.bl-chips{display:flex;flex-wrap:wrap;gap:8px;padding:22px 28px 0}
.bl-chips button{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:12px;border:1px solid var(--edge2);background:transparent;color:var(--mu);font:700 13.5px var(--f);cursor:pointer}
.bl-chips button[aria-pressed=true]{background:var(--fg);color:var(--bg);border-color:transparent}
.bl-chips button:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.bl-feat{display:grid;grid-template-columns:1.15fr 1fr;gap:26px;align-items:center;margin:26px 0 0;padding:18px;color:var(--fg);text-decoration:none;
  background:var(--p1);border:1px solid var(--edge);border-radius:var(--r1);box-shadow:var(--e1);transition:transform var(--t2) var(--spring),box-shadow var(--t2)}
/* Наведение действует только там, где указатель умеет наводиться. На телефоне наведения нет: браузер
   вешает :hover после КАСАНИЯ и держит, пока не тапнешь в другое место — кнопка остаётся подсвеченной,
   стрелка уехавшей. Владелец 28.10: «интерфейсы кнопки все былмает». */
@media (hover:hover){.bl-feat:hover{box-shadow:var(--e2)}}
.bl-feat:focus-visible,.bc:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.bl-feat .tx{display:grid;gap:12px;padding-right:10px}
.bl-feat h2{margin:0;font:800 clamp(24px,2.6vw,34px)/1.18 var(--f);letter-spacing:-.01em}
.bl-feat p{margin:0;color:var(--mu);font-size:16px;line-height:1.55;max-width:56ch}
.bc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font:600 12.5px var(--f);color:var(--mu)}
.bc-meta .mono{font:600 12px var(--mono);color:var(--mu)}
.bc-more{display:inline-flex;align-items:center;gap:8px;font:800 14px var(--f);color:var(--ice-t)}
.bl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:14px 28px 0}
.bc{display:flex;flex-direction:column;gap:14px;padding:14px;color:var(--fg);text-decoration:none;background:var(--p1);border:1px solid var(--edge);border-radius:var(--r1);box-shadow:var(--e1);
  transition:transform var(--t2) var(--spring),box-shadow var(--t2)}
@media (hover:hover){.bc:hover{box-shadow:var(--e2)}}
.bc h3{margin:0;font:800 19px/1.25 var(--f);letter-spacing:-.005em}
.bc p{margin:0;color:var(--mu);font-size:14.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bc .bcb{display:grid;gap:8px;flex:1;align-content:start}
.bc .bc-more{margin-top:auto}
.bl-empty{padding:30px 28px;color:var(--mu)}

/* ===== Статья ===== */
.art{padding:0 28px}
.ahead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:34px;align-items:center;padding:26px 0 8px}
.ahead .lb{margin-bottom:10px}
.ahead h1{margin:0;font:800 clamp(28px,3.4vw,44px)/1.14 var(--f);font-style:normal;text-transform:none;letter-spacing:-.015em;max-width:22ch}
.ameta{display:flex;flex-wrap:wrap;gap:4px 14px;margin:16px 0 0;font:600 13px var(--f);color:var(--mu)}
.ameta .mono{font:600 12.5px var(--mono)}
.alead{margin:16px 0 0;color:var(--mu);font-size:18px;line-height:1.55;max-width:46ch}
.agrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start;padding:34px 0 0}
/* Читаемая колонка: 31em ≈ до 65 знаков в строке (Manrope, замер measure.py), больше глаз не удерживает */
.post-body{max-width:calc(31em + 72px);box-sizing:border-box;padding:34px 36px;background:var(--p1);border:1px solid var(--edge);border-radius:var(--r1);box-shadow:var(--e1);font-size:18px;line-height:1.72;color:var(--fg)}
.post-body p{margin:0 0 1.15em}
.post-body h2{margin:2em 0 .65em;font:800 italic clamp(21px,2.1vw,26px)/1.15 var(--disp);text-transform:uppercase;letter-spacing:-.005em;scroll-margin-top:84px}
.post-body h2:first-child{margin-top:0}
.post-body ul,.post-body ol{margin:0 0 1.25em;padding-left:1.25em}
.post-body li{margin:0 0 .7em;padding-left:.2em}
.post-body li::marker{color:var(--ice-t)}
.post-body a{color:var(--ice-t);text-decoration:underline;text-underline-offset:3px}
.post-body strong{font-weight:800}
.post-body code{font:600 .88em var(--mono);padding:1px 6px;border-radius:6px;background:var(--p2)}
.aside{position:sticky;top:84px;display:grid;gap:14px}
.toc{padding:16px 16px 12px;background:var(--p1);border:1px solid var(--edge);border-radius:var(--r1);box-shadow:var(--e1)}
.toc .lb{margin-bottom:6px}
.toc ol{margin:0;padding:0;list-style:none;display:grid;gap:0}
.toc a{display:flex;align-items:center;min-height:40px;padding:6px 8px;margin:0 -8px;border-radius:9px;color:var(--mu);font:600 14px/1.3 var(--f);text-decoration:none}
@media (hover:hover){.toc a:hover{background:var(--p2);color:var(--fg)}}
.toc a:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.toc a[aria-current]{color:var(--fg);font-weight:800;box-shadow:inset 3px 0 0 var(--ice)}   /* текст светлее на ΔL* ≥ 12 + линия слева; заливка p2 на p1 отличалась бы лишь на ΔL* 5,9 */
.acta{padding:18px;background:var(--p2);border:1px solid var(--edge2);border-radius:var(--r1);box-shadow:var(--e1);display:grid;gap:10px}
.acta b{font:800 italic 17px/1.2 var(--disp);text-transform:uppercase}
.acta p{margin:0;color:var(--mu);font-size:14px;line-height:1.5}
.pnx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pnx a{position:relative;display:flex;flex-direction:column;gap:6px;min-height:92px;padding:16px 18px;color:var(--fg);text-decoration:none;background:var(--p1);border:1px solid var(--edge);border-radius:var(--r1);box-shadow:var(--e1);transition:transform var(--t2) var(--spring),box-shadow var(--t2)}
@media (hover:hover){.pnx a:hover{box-shadow:var(--e2)}}
.pnx a:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.pnx a.nx{text-align:right;align-items:flex-end}
.pnx small{font:700 12px var(--f);color:var(--mu)}
.pnx b{font:800 16px/1.3 var(--f)}
.pnx .none{opacity:.6}
.sec.tight{padding-top:56px}

@media (max-width:1100px){
  .ahead{grid-template-columns:1fr;gap:22px}
  .ahead h1{max-width:26ch}
  .agrid{grid-template-columns:1fr;gap:28px}
  .aside{position:static;order:2}
  .toc{display:none}   /* на узком экране оглавление длиннее самой статьи — не нужно */
  .bl-feat{grid-template-columns:1fr}
}
@media (max-width:700px){
  .b-wrap,.bl-head,.bl-chips,.art{padding-left:16px;padding-right:16px}
  .bl-head{padding-top:14px}
  .bl-chips{padding-top:16px}
  .bl-chips button{min-height:44px}
  .bl-feat{margin:18px 16px 0;padding:12px}
  .bl-grid{grid-template-columns:1fr;padding:12px 16px 0}
  .ahead{padding-top:8px}
  .post-body{font-size:17px;line-height:1.7;padding:22px 18px}
  .toc a{min-height:44px}
  .pnx{grid-template-columns:1fr}
  .pnx a.nx{text-align:left;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.bl-feat,.bc,.pnx a{transition-duration:60ms}}

/* Чипы тем — ссылки (работают без скрипта: тема — отдельный адрес ?topic=, а не клиентский фильтр) */
.bl-chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:12px;border:1px solid var(--edge2);background:transparent;color:var(--mu);font:700 13.5px var(--f);text-decoration:none}
.bl-chip[aria-pressed=true]{background:var(--fg);color:var(--bg);border-color:transparent}
.bl-chip:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
@media (max-width:700px){.bl-chip{min-height:44px}}
@media (pointer:coarse){.bl-chip,.toc a{min-height:44px}}