/* =========================================================================
   SINGLE BLOG POST (single.php)
   Hero/footer/.call are the shared components (vbs.css, folds.css). Below is
   the article itself: full width of the page shell (same width as the hero
   above it), with its own typography for the
   headings, lists, quotes, images and tables a post body can contain.
   Everything is scoped to .sp-* so it can never collide with the homepage
   components that share names with WordPress's own post classes (e.g. the
   .post journal row in folds.css).
   ========================================================================= */

/* --- hero ------------------------------------------------------------------ */
/* blog titles are sentences, not one-word page names: smaller than the
   sitewide hero size and wide enough not to wrap every other word */
.sp-hero .vbs-hero-h {
  max-width: 24ch;
  font-size: clamp(2rem, 1.4rem + 3.4vw, 4rem);
  line-height: 1;
}
.sp-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em;
  font-size: var(--fs-sm);
  color: var(--ink-mid);
}
.sp-meta span[aria-hidden] { color: var(--ink-quiet); }

/* --- body ------------------------------------------------------------------ */
.sp-body { padding: clamp(2.25rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); background: var(--void); }
.sp-article { max-width: none; margin: 0; }

.sp-content { font-size: var(--fs-lead); line-height: 1.75; color: var(--ink-mid); }
.sp-content > :first-child { margin-top: 0; }
.sp-content p { margin: 0 0 1.35em; }
.sp-content strong, .sp-content b { color: var(--ink); font-weight: 700; }
.sp-content em, .sp-content i { color: var(--ink); }
.sp-content a { color: var(--gold); text-decoration: underline; text-underline-offset: 0.18em; }
.sp-content a:hover { color: var(--brand-lit); }

.sp-content h2,
.sp-content h3,
.sp-content h4 {
  font-family: var(--font-ui);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}
.sp-content h2 {
  margin: clamp(2.25rem, 4.5vw, 3.25rem) 0 0.75rem;
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: var(--hair) solid rgba(var(--white-rgb), 0.12);
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
}
.sp-content > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.sp-content h3 { margin: clamp(1.6rem, 3vw, 2.2rem) 0 0.5rem; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); }
.sp-content h4 { margin: 1.5rem 0 0.4rem; font-size: var(--fs-md); }

.sp-content ul,
.sp-content ol { margin: 0 0 1.5em; padding: 0; list-style: none; }
.sp-content li { position: relative; margin: 0 0 0.55em; padding-left: 1.6em; }
.sp-content ul li::before {
  content: '';
  position: absolute;
  left: 0.15em; top: 0.7em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-lit);
}
.sp-content ol { counter-reset: sp-ol; }
.sp-content ol li { counter-increment: sp-ol; padding-left: 2.2em; }
.sp-content ol li::before {
  content: counter(sp-ol);
  position: absolute;
  left: 0; top: 0.2em;
  display: grid;
  place-items: center;
  width: 1.5em; height: 1.5em;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--gold-rgb), 0.55);
  font-family: var(--font-poster);
  font-size: 0.72em;
  color: var(--gold);
}
.sp-content li > ul,
.sp-content li > ol { margin: 0.55em 0 0; }

.sp-content blockquote {
  margin: 1.75em 0;
  padding: 0.25em 0 0.25em 1.25em;
  border-left: 3px solid var(--gold);
  font-style: italic;
  color: var(--ink);
}
.sp-content blockquote p:last-child { margin-bottom: 0; }

.sp-content img,
.sp-content video,
.sp-content iframe { max-width: 100%; height: auto; border-radius: var(--r-md); }
.sp-content figure { margin: 1.75em 0; }
.sp-content figcaption { margin-top: 0.6em; font-size: var(--fs-sm); color: var(--ink-quiet); text-align: center; }

.sp-content hr { margin: 2.25em 0; border: 0; border-top: var(--hair) solid rgba(var(--white-rgb), 0.14); }

.sp-content table { width: 100%; margin: 1.75em 0; border-collapse: collapse; font-size: var(--fs-body); }
.sp-content th,
.sp-content td { padding: 0.7em 0.9em; border: var(--hair) solid rgba(var(--white-rgb), 0.14); text-align: left; }
.sp-content th { color: var(--ink); background: rgba(var(--white-rgb), 0.04); }

.sp-content code {
  padding: 0.12em 0.4em;
  border-radius: 4px;
  background: rgba(var(--white-rgb), 0.08);
  font-size: 0.9em;
  color: var(--ink);
}
.sp-content pre {
  margin: 1.5em 0;
  padding: 1em 1.2em;
  overflow-x: auto;
  border-radius: var(--r-md);
  background: rgba(var(--white-rgb), 0.05);
}
.sp-content pre code { padding: 0; background: none; }

.sp-back { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(1.5rem, 3vw, 2rem); border-top: var(--hair) solid rgba(var(--white-rgb), 0.12); }

@media (max-width: 640px) {
  .sp-content { font-size: var(--fs-body); line-height: 1.7; }
}