/* Надстройка над стандартной темой блога Webasyst: шаблоны штатные (их обновляет «Установщик»),
   кроме main.html — свой макет без сайдбара. Здесь приведение к виду сайта «Мять».
   Подключается последней. */

.app-shell { padding-top: calc(var(--u) * 8); padding-bottom: calc(var(--u) * 12); min-height: 60vh; }
/* Контейнер — общий для сайта (.wrap, 1160px), контент от линии логотипа, как на страницах.
   Ширину ограничиваем только строкам ленты и записи — ради читаемости, без центрирования. */
#post-stream, #stream-paging, article.post, .blog-back { max-width: 860px; }
.app-shell, .app-shell input, .app-shell select, .app-shell textarea, .app-shell button { font-family: var(--font); }
.app-shell a { color: var(--black); }
.app-shell p { margin: 0 0 calc(var(--u) * 3); }
.app-shell .userpic, .app-shell .rss, .app-shell .icon16, .app-shell .pageless-wrapper { display: none !important; }
.app-shell a:has(> .userpic:only-child) { display: none !important; }
/* Штатная тема рисует запись карточкой с тенью и скруглением — у сайта острые углы и линии */
.app-shell .post { margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.app-shell .post .text { margin: 0; }

/* ── Шапка раздела и ссылка назад ─────────────────────────────────── */
.blog-head { padding-bottom: calc(var(--u) * 6); border-bottom: 1px solid var(--black); }
.blog-head h1, .app-shell h1 { font-weight: 300; font-size: clamp(36px, 5vw, 60px); line-height: 1.08; letter-spacing: -.01em; margin: 0; }
.blog-head .lead { margin-top: calc(var(--u) * 3); color: var(--graphite); }
.blog-back { display: inline-block; margin-bottom: calc(var(--u) * 5); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--gray) !important; }
.blog-back:hover { color: var(--black) !important; }

.app-shell .credentials { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); }
.app-shell .credentials a { color: var(--gray); text-decoration: none; }
.app-shell .credentials { column-gap: calc(var(--u) * 3); row-gap: calc(var(--u) * .5); }

/* ── Лента ─────────────────────────────────────────────────────────── */
#post-stream .post { padding: calc(var(--u) * 7) 0; border-bottom: 1px solid var(--line); }
#post-stream .post h3 { font-weight: 300; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: -.005em; margin: 0 0 calc(var(--u) * 2); }
#post-stream .post h3 a { text-decoration: none; }
#post-stream .post h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
#post-stream .post .credentials { margin-bottom: calc(var(--u) * 3); }
#post-stream .post .text { color: var(--graphite); }
/* Обложка записи — первая фигура в тексте до ката */
#post-stream .post .text .post-cover { margin: 0 0 calc(var(--u) * 4); }
#post-stream .post .text .post-cover figcaption { display: none; }
#post-stream .post .text .button {
  display: inline-block !important; margin-top: calc(var(--u) * 1); background: transparent; color: var(--black); border: 1px solid var(--black);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3.5); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
#post-stream .post .text .button:hover { background: var(--black); color: var(--paper); }
#stream-paging { display: flex; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 5); font-size: 16px; }
#stream-paging:has(li:only-child) { display: none; }
#stream-paging li.selected a { text-decoration: none; border-bottom: 1px solid var(--black); }

/* ── Запись ────────────────────────────────────────────────────────── */
article.post h1 { margin-bottom: calc(var(--u) * 3); }
article.post .credentials { padding-bottom: calc(var(--u) * 5); margin-bottom: calc(var(--u) * 6); border-bottom: 1px solid var(--line); }
article.post .text { font-size: 20px; line-height: 1.6; }
article.post .text .lead { font-size: clamp(21px, 2.2vw, 26px); line-height: 1.45; color: var(--black); }
article.post .text h2 { font-weight: 300; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; letter-spacing: -.005em; margin: calc(var(--u) * 10) 0 calc(var(--u) * 3); padding-top: calc(var(--u) * 4); border-top: 1px solid var(--black); }
article.post .text h3 { font-weight: 500; font-size: 21px; margin: calc(var(--u) * 5) 0 calc(var(--u) * 2); }
article.post .text strong { font-weight: 500; }
article.post .text ul, article.post .text ol { margin: 0 0 calc(var(--u) * 3); padding: 0; list-style: none; }
article.post .text ul li { position: relative; padding-left: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 1); }
article.post .text ul li::before { content: "—"; position: absolute; left: 0; color: var(--gray); }
article.post .text ol { counter-reset: n; border-top: 1px solid var(--line); }
article.post .text ol li { counter-increment: n; position: relative; padding: calc(var(--u) * 2) 0 calc(var(--u) * 2) calc(var(--u) * 7); border-bottom: 1px solid var(--line); }
article.post .text ol li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: calc(var(--u) * 2 + 5px); font-size: 14px; letter-spacing: .2em; color: var(--gray); }
article.post .text blockquote { margin: calc(var(--u) * 6) 0; padding: calc(var(--u) * 4) calc(var(--u) * 5); background: var(--cream); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.4; }
article.post .text .note { font-size: 15px; color: var(--gray); }

/* Слайды и иллюстрации: в цвете, с тонкой рамкой — белый слайд не сливается с фоном */
.app-shell .text figure { margin: calc(var(--u) * 5) 0 calc(var(--u) * 6); }
.app-shell .text figure img { width: 100%; margin: 0; border: 1px solid var(--line); filter: none; }
.app-shell .text figcaption { margin-top: calc(var(--u) * 1.5); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); }
.app-shell .text img { filter: none; }

/* ── Комментарии и формы (если включены) ──────────────────────────── */
.app-shell input[type="submit"], .app-shell button, .app-shell .comments .button {
  border-radius: 0; box-shadow: none; background: var(--black); border: 1px solid var(--black); color: var(--paper);
  padding: calc(var(--u) * 2) calc(var(--u) * 4.5); font-weight: 300; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.app-shell input[type="text"], .app-shell input[type="email"], .app-shell textarea { border: 1px solid var(--line); border-radius: 0; padding: calc(var(--u) * 1.5); font-size: 19px; font-weight: 300; }

@media (max-width: 720px) {
  .app-shell { padding-top: calc(var(--u) * 5); }
  article.post .text { font-size: 18px; }
  article.post .text h2 { margin-top: calc(var(--u) * 7); }
  article.post .text blockquote { padding: calc(var(--u) * 3); }
  article.post .text ol li { padding-left: calc(var(--u) * 5); }
}