/* Стили блога. Наследует переменные из styles.css */

.breadcrumbs {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 22px var(--gutter) 0;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--soft);
}
.breadcrumbs a:hover { color: var(--ink); }

.blog-hero { padding: 40px var(--gutter) 24px; max-width: var(--max-width); margin: 0 auto; }
.blog-hero h1 { font-size: clamp(34px, 4.4vw, 58px); letter-spacing: -0.035em; line-height: 1.02; }
.blog-hero p { font-family: var(--sans); font-size: 18px; line-height: 1.6; color: var(--soft); max-width: 680px; margin-top: 18px; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.post-card {
  padding: 28px 26px;
  background: rgba(239, 232, 218, 0.5);
  display: flex;
  flex-direction: column;
  gap: 12px;
  clip-path: polygon(0.4% 1.2%, 22% 0.2%, 48% 1.4%, 74% 0.1%, 99.6% 1%, 99% 26%, 99.8% 52%, 99.2% 78%, 99.6% 99%, 76% 99.7%, 50% 98.8%, 24% 99.9%, 0.3% 99%, 1% 74%, 0.2% 48%, 0.8% 24%);
}
.post-card:nth-child(3n + 1) { transform: rotate(var(--tilt-a)); }
.post-card:nth-child(3n + 2) { transform: rotate(var(--tilt-b)); }
.post-card:nth-child(3n) { transform: rotate(var(--tilt-c)); }
.post-card h2 { font-size: 25px; letter-spacing: -0.025em; line-height: 1.15; }
.post-card p { font-family: var(--sans); font-size: 16px; line-height: 1.5; color: var(--soft); }
.post-meta { font-family: var(--sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }
.post-more { font-family: var(--hand); font-size: 22px; color: var(--ink); margin-top: auto; }
.post-empty { font-family: var(--hand); font-size: 26px; color: var(--ink); padding: 30px 0; }

.article-shell { max-width: 760px; margin: 0 auto; padding: 30px var(--gutter) 70px; }
.article-header { margin-bottom: 44px; }
.article-header h1 { font-size: clamp(32px, 4.2vw, 54px); letter-spacing: -0.035em; line-height: 1.06; margin-bottom: 0; }
.article-meta { font-family: var(--sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); margin-bottom: 16px; }
.article-lead { font-family: var(--serif); font-size: 21px; line-height: 1.5; color: var(--soft); margin: 26px 0 0; }

/* Оглавление: листок с неровными краями */
.toc {
  position: relative;
  padding: 24px 26px;
  margin-bottom: 38px;
  background: rgba(239, 232, 218, 0.62);
  transform: rotate(-0.35deg);
  clip-path: polygon(0.5% 2%, 18% 0.4%, 42% 2.2%, 68% 0.3%, 88% 1.8%, 99.5% 0.6%, 98.8% 24%, 99.7% 50%, 98.9% 76%, 99.4% 98.5%, 72% 99.6%, 46% 98.4%, 20% 99.8%, 0.6% 98.6%, 1.2% 72%, 0.3% 46%, 1% 22%);
}
.toc h2 { font-family: var(--sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft); margin-bottom: 10px; }
.toc ol { font-family: var(--sans); font-size: 16px; line-height: 1.75; padding-left: 20px; }
.toc a:hover { color: var(--ink); }

.article-body { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--graphite); }
.article-body h2 { font-family: var(--serif); font-size: 32px; letter-spacing: -0.03em; line-height: 1.12; margin: 58px 0 22px; }
.article-body h3 { font-family: var(--serif); font-size: 23px; line-height: 1.22; margin: 44px 0 14px; }
.article-body h4 { font-family: var(--serif); font-size: 20px; line-height: 1.25; margin: 32px 0 12px; }
.article-body p { margin-bottom: 30px; }
.article-body ul, .article-body ol { margin: 0 0 30px 22px; }
.article-body li { margin-bottom: 14px; line-height: 1.5; }
.article-body strong { font-weight: 700; }
.article-body img { display: block; width: 100%; height: auto; }

/* Цитата: вертикальная черта ручкой вместо ровной полосы */
.article-body blockquote {
  font-family: var(--hand);
  font-size: 28px;
  line-height: 1.3;
  color: var(--ink);
  margin: 28px 0;
  padding-left: 22px;
  border-left: 0;
  background-image: var(--hand-line-vertical);
  background-repeat: repeat-y;
  background-position: left top;
  background-size: 8px 160px;
  transform: rotate(-0.4deg);
}

/* Разделитель между большими блоками статьи */
.article-body hr {
  border: 0;
  height: 8px;
  margin: 34px 0;
  background-image: var(--hand-line-soft);
  background-repeat: repeat-x;
  background-size: 420px 8px;
}

.callout {
  background: rgba(239, 232, 218, 0.72);
  padding: 24px 26px;
  margin: 28px 0;
  transform: rotate(var(--tilt-b));
  clip-path: polygon(0.6% 3%, 26% 0.5%, 52% 2.6%, 78% 0.4%, 99.4% 2%, 98.8% 30%, 99.6% 60%, 99% 98%, 74% 99.5%, 48% 97.8%, 22% 99.6%, 0.5% 98%, 1.2% 66%, 0.4% 34%);
}

/* Блок призыва: рваные края, как у тёмных полос на главной */
.article-cta {
  background: var(--ink);
  color: var(--paper-3);
  padding: 40px 34px 38px;
  margin: 44px 0;
  display: grid;
  gap: 16px;
  justify-items: start;
  transform: rotate(0.35deg);
  clip-path: polygon(0 2.5%, 12% 0.8%, 28% 2.2%, 44% 0.4%, 61% 2%, 78% 0.6%, 92% 2.4%, 100% 1%, 99.4% 24%, 100% 48%, 99.2% 72%, 100% 97.5%, 86% 99.4%, 68% 97.6%, 50% 99.6%, 32% 97.8%, 14% 99.5%, 0 98%, 0.7% 74%, 0 50%, 0.8% 26%);
}
.article-cta h2 { font-family: var(--serif); font-size: 28px; letter-spacing: -0.02em; }
.article-cta p { font-family: var(--sans); font-size: 16px; color: rgba(239, 232, 218, 0.78); }
.article-cta .cta-button {
  background: var(--paper-3);
  color: var(--ink);
  transform: rotate(-1.1deg);
  clip-path: polygon(1% 6%, 18% 1.5%, 39% 5%, 58% 1%, 79% 5.5%, 99% 2%, 98% 32%, 99.4% 62%, 97.8% 95%, 78% 99%, 57% 95%, 36% 99.4%, 16% 95.5%, 1.5% 98.5%, 2.2% 66%, 0.6% 34%);
}
.article-cta .cta-button:hover { transform: rotate(-1.1deg) translateY(-2px); background: var(--paper-2); }

.related {
  margin-top: 48px;
  border-top: 0;
  padding-top: 30px;
  background-image: var(--hand-line);
  background-repeat: repeat-x;
  background-position: left top;
  background-size: 420px 8px;
}
.related h2 { font-size: 24px; margin-bottom: 14px; }
.related-links { display: grid; gap: 10px; font-family: var(--sans); font-size: 16px; }
.related-links a:hover { color: var(--ink); }

@media (max-width: 1080px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .post-grid { grid-template-columns: 1fr; }
  .post-card, .callout, .toc, .article-cta { transform: none; }
  .article-body { font-size: 18px; }
  .article-body p { margin-bottom: 26px; }
  .article-header { margin-bottom: 34px; }
  .article-cta { padding: 32px 24px; }
}