/* ===== Blog post (single) ===== */
body { background: var(--cream); }
.post-page { padding-top: 90.5px; font-family: var(--sans); color: var(--text); }

/* Title, meta, share, featured image */
.post-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 15px;
}
.post-crumbs { display: flex; align-items: center; margin-top: 30px; line-height: 22.41px; color: #aaafb6; }
.post-crumbs a { color: var(--sage); transition: color .2s; }
.post-crumbs a:hover { color: var(--rust); }
.post-crumbs__sep { display: flex; margin: 0 3px; }
.post-crumbs__sep svg { margin: 0 1.5px; }
.post-head__title { font: 500 56px/1.08 var(--serif); letter-spacing: -.02em; color: var(--brown); }
.post-head__bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 46px; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: 14px; font-weight: 500; line-height: 19.6px; }
.post-meta__item { display: inline-flex; align-items: center; gap: 4px; line-height: 22px; }
.post-meta__item:last-child { line-height: 19.6px; }
.post-meta__item:first-child { margin-right: 2px; }
.post-meta__avatar { border-radius: 50%; }
.post-head__img {
  width: 100%;
  height: 460px;
  margin: 20px 0 44.91px;
  object-fit: cover;
  border-radius: 16px;
}

/* Article */
.post-body { max-width: 860px; margin: 0 auto; padding: 0 15px; }
.post-content { padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.post-content { font-size: 16px; line-height: 1.85; }
.post-content p { margin-bottom: 18px; }
.post-content h2 { margin: 40px 0 14px; font: 500 34px/1.15 var(--serif); letter-spacing: -.01em; color: var(--brown); }
.post-content a { font-weight: 600; color: var(--rust); transition: color .2s; }
.post-content a:hover { color: var(--rust-dark); }
.post-content .post-content__source { margin: 0; }
.post-content small { font-size: 12.8px; }

/* Related stories slider */
.related { max-width: 1320px; margin: 0 auto; padding: 95px 15px; }
.related__head { position: relative; margin-bottom: 20px; padding-bottom: 12px; }
.related__title { font: 500 36px/1.1 var(--serif); color: var(--brown); }
.related__nav { position: absolute; top: -1px; right: 0; display: flex; gap: 8px; }
.related__arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 200px;
  transition: background-color .2s, color .2s, opacity .2s;
}
.related__arrow:not(:disabled):hover { color: #fff; background: var(--sage); }
.related__arrow:disabled { opacity: .4; cursor: default; }
.related__track {
  --gap: 30px;
  --per: 3;
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.related__track::-webkit-scrollbar { display: none; }
.mini-card {
  display: flex;
  flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  scroll-snap-align: start;
}
.mini-card__img { width: 100%; height: 245px; margin-bottom: 8px; object-fit: cover; border-radius: 16px; }
.mini-card__cat {
  align-self: flex-start;
  padding: 4px 8px;
  font-size: 14px;
  line-height: 22.4px;
  color: var(--sage);
  background: #eef0e8;
  border-radius: 4px;
  transition: color .2s, background-color .2s;
}
.mini-card__cat:hover { color: #fff; background: var(--sage); }
.mini-card__title { margin: 0; font: 500 22px/1.25 var(--serif); color: var(--brown); }
.mini-card__title a { transition: color .2s; }
.mini-card__title a:hover { color: var(--rust); }
.mini-card__excerpt { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mini-card__date { font-size: 14px; line-height: 19.6px; color: var(--sage); }

@media (max-width: 1024px) {
  .post-page { padding-top: 97.02px; }
  .post-meta__item { line-height: 22.4px; }
  .post-head { max-width: 1024px; }
  .post-head__img { height: 360px; }
  .related { max-width: 1024px; padding: 60px 15px; }
  .related__track { --gap: 15px; --per: 2; }
}
@media (max-width: 767px) {
  .post-page { padding-top: 77px; }
  .post-head__title { font-size: 36px; line-height: 1.12; }
  .post-head__bar { flex-direction: column; align-items: flex-start; gap: 16px; }
  .post-head__img { height: 240px; margin-top: 20px; }
  .post-content h2 { margin-top: 32px; font-size: 28px; }
  .related__title { font-size: 30px; line-height: 1.1; }
  .related__nav { top: -9px; }
  .related__track { --gap: 30px; --per: 1; }
  .mini-card__img { height: 210px; }
}