/* ==========================================================================
   PRISM — Single blog post template (shared by every article page: this
   is "the template" — new posts are made by duplicating one of the
   existing blog-*.html files and swapping content, so keep this in sync
   for all of them rather than editing one post's layout in isolation)
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* Post hero — category badge, title, dek, byline, then a large image      */
/* ---------------------------------------------------------------------- */
.post-hero {
/*   padding-top: clamp(2rem, 4vw, 4rem);
  padding-bottom: var(--space-8); */
  position: relative;
  overflow: clip;
	padding-bottom: 30px;
}
.post-hero__inner { position: relative; z-index: 1; max-width: 1130px; margin-inline: auto; text-align: center; padding-top:40px; }
.post-hero__back {
  display: none !important;
}

.post-hero__category {
  display: block;
  margin-inline: auto;
  margin-bottom: var(--space-5);
  text-align: center;
  width: fit-content;
}


/* Post titles are free-form content (unlike the hand-tuned homepage hero
   copy), so at h1 display size the site's default tight tracking
   (--ls-tight, -0.03em) can pull an "ff"/"fi" pair close enough to visibly
   collide — e.g. "Difference". Even --ls-snug (-0.015em) still collides
   noticeably on dark backgrounds (light-on-dark strokes read thicker), so
   this is reset to normal tracking rather than just "less tight". */
.post-hero__title {
  text-align: center;
  text-transform: capitalize;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: normal;
  margin-inline: auto;
  max-width: 680px;
  margin-bottom: var(--space-5);
}
.post-hero__dek { font-size: var(--fs-lead); color: var(--ink-500); max-width: 62ch; margin-inline: auto; margin-bottom: var(--space-6); }

.post-hero__meta { font-size: 0.875rem; color: var(--ink-300); }

.post-hero .bg-mesh__blob--1 { width: 380px; height: 380px; top: -120px; right: -80px; opacity: 0.3; }
.post-hero .bg-mesh__blob--2 { width: 320px; height: 320px; bottom: -140px; left: -100px; opacity: 0.24; }
[data-theme="dark"] .post-hero .bg-mesh__blob--1 { opacity: 0.2; }
[data-theme="dark"] .post-hero .bg-mesh__blob--2 { opacity: 0.16; }

.post-hero__image {
  position: relative;
  z-index: 1;
  width: min(920px, 100% - (var(--container-pad) * 2));
  margin: var(--space-8) auto 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--brand-gradient-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--glass-shadow-sm);
}
.post-hero__image img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.post-hero__image svg { position: relative; z-index: 0; width: 15%; height: 15%; color: var(--brand-indigo); opacity: 0.85; }
[data-theme="dark"] .post-hero__image svg { color: var(--brand-aqua); }

/* ---------------------------------------------------------------------- */
/* Post body — a readable prose column, not a full-width section          */
/* ---------------------------------------------------------------------- */
.post-body {
  margin-inline: auto;
  font-size: 1.0625rem;
  color: var(--ink-700);
}
.post-body > * + * { margin-top: var(--space-5); }
.post-body h2 { font-size: var(--fs-h3); margin-top: var(--space-8); }
.post-body h2:first-child { margin-top: 0; }
.post-body h3 { font-size: var(--fs-h4); margin-top: var(--space-6); }
.post-body p { line-height: var(--lh-body); }
.post-body ul, .post-body ol { padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--space-3); }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { line-height: var(--lh-body); }
.post-body li::marker { color: var(--brand-indigo); }
[data-theme="dark"] .post-body li::marker { color: var(--brand-aqua); }
.post-body strong { color: var(--ink-900); font-weight: 700; }
.post-body a { color: var(--brand-indigo); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
[data-theme="dark"] .post-body a { color: var(--brand-aqua); }

.post-body__table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border); }
.post-body table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.post-body th, .post-body td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.post-body thead th { background: var(--bg-alt); font-family: var(--font-display); font-weight: 700; color: var(--ink-900); }
.post-body tbody tr:last-child td { border-bottom: none; }
.post-body tbody td:first-child { font-weight: 600; color: var(--ink-900); white-space: normal; }

.post-callout {
  padding: var(--space-5);
  background: var(--brand-gradient-soft);
  border-left: 3px solid var(--brand-indigo);
  border-radius: var(--radius-sm);
  color: var(--ink-900);
  font-size: 1.0625rem;
}
[data-theme="dark"] .post-callout { border-left-color: var(--brand-aqua); }

/* ---------------------------------------------------------------------- */
/* Keep reading — compact links to the other posts                        */
/* ---------------------------------------------------------------------- */
.post-related__grid { grid-template-columns: repeat(2, 1fr); }
.post-related-card { display: flex; flex-direction: column; gap: var(--space-2); }
.post-related-card__category { font-size: 0.75rem; }
.post-related-card__title { font-size: 1.0625rem; }

@media (max-width: 640px) {
  .post-related__grid { grid-template-columns: 1fr; }
  .post-body { font-size: 1rem; }
}