/* Blog post (live /blog/<slug>), shared by every blog-<slug>.html. Builds on blog.css.
   An 800px article column on the dot grid; the column's 1px side rules take
   layout space here, so side padding next to them is 39px (40 live). */
.post-page { display: flex; justify-content: center; background-image: var(--dots); }
.post-col { width: 100%; max-width: 800px; background: var(--bg-primary); border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); }
.crumbs { display: flex; align-items: center; gap: 8px; padding: 20px 39px; box-shadow: inset 0 -1px 0 var(--border-primary); }
.crumbs a { color: var(--text-primary); }
.crumbs a:hover { color: var(--text-secondary); }
.crumbs svg { flex: none; fill: #9da2b3; }
.crumbs .cur { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-tertiary); }
.post-head { display: flex; flex-direction: column; gap: 20px; padding: 40px 39px; }
.post-hero { padding: 0 39px 40px; }
.post-hero img { width: 720px; height: 525px; object-fit: cover; border: 1px solid var(--border-primary); }
.post-text { display: flex; flex-direction: column; gap: 40px; padding: 0 39px 80px; }
.post-text p { font-size: 16px; line-height: 24px; color: var(--text-secondary); }
.post-text a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.post-text a:hover { color: var(--text-secondary); }
.post-text section { display: flex; flex-direction: column; gap: 20px; }

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
  .post-page { padding: 0; }
}

/* ---------- Phone ---------- */
@media (max-width: 809px) {
  .post-page { background: none; }
  .post-col { max-width: none; border: 0; }
  .crumbs { padding: 20px; }
  .post-head { padding: 20px 20px 40px; }
  .post-hero { padding: 0 20px 40px; }
  .post-hero img { width: 100%; height: auto; aspect-ratio: 350 / 362; }
  .post-text { padding: 0 20px 20px; }
}