/* Midweek Synapse section styling.

   Theme tokens, the background wash, hero images, post lists, and the
   light/dark toggle all live in assets/css/site.css now — they went site-wide
   so /tech and the homepage stop being light-only next to a dark /synapse.
   What remains here is only what is specific to the series: the badge, the
   longer reading measure, figure captions, and the outro.

   Loaded after site.css, and every rule is still scoped to
   body[class*="layout--synapse"] or .synapse-wrap. */

/* The --synapse-* names are kept as aliases: they are threaded through the
   rules below and through post-level inline styles, and renaming them buys
   nothing. */
body[class*='layout--synapse'] {
  --synapse-ink: var(--ink);
  --synapse-accent: var(--accent);
  --synapse-accent-soft: var(--accent-soft);
  --synapse-muted: var(--muted);
}

/* ---- The reading column ---- */
.synapse-wrap {
  position: relative;
}

.synapse-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.6rem;
  padding: 0.3rem 0.75rem 0.3rem 0.3rem;
  border-radius: 999px;
  background: var(--synapse-accent-soft);
  color: var(--synapse-accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.synapse-mark {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--synapse-ink);
  color: var(--s-bg);
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: none;
}

/* Long-form reading: a touch more air than the tech section. */
.synapse-wrap p {
  line-height: 1.75;
}

.synapse-wrap h2 {
  margin-top: 2.4rem;
  padding-top: 0.9rem;
  border-top: 2px solid var(--synapse-accent-soft);
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: var(--s-title);
}

/* The lede carries the hook; give it presence. */
.synapse-wrap > p:first-of-type,
.synapse-badge + p {
  font-size: 1.12rem;
  color: var(--synapse-ink);
}

.synapse-wrap img,
.synapse-wrap svg,
.synapse-wrap video {
  display: block;
  margin: 1.6rem auto 0.6rem;
}

/* SVG diagrams are often drawn for white paper, so they get a light card to
   stay legible on dark. A no-op in light. */
.synapse-wrap svg,
.synapse-wrap img[src$='.svg'] {
  background: var(--s-svg-card);
  border-radius: 10px;
  padding: var(--s-svg-pad);
  box-shadow: none;
}

/* Figure captions: the italic line under a diagram or video. Only an italic
   paragraph DIRECTLY after an image (or video) counts — a bare
   p > em:only-child also matches prose whose one styled phrase is a
   mid-sentence italic (e.g. a book title), which was getting ripped out
   and centered as a fake caption. */
.synapse-wrap img + em,
.synapse-wrap video + p em,
.synapse-wrap p:has(> img) + p > em:only-child,
.synapse-wrap .synapse-watch + p > em:only-child {
  display: block;
  text-align: center;
  font-size: 0.88rem;
  color: var(--synapse-muted);
  font-style: italic;
}

.synapse-rule {
  margin: 2.8rem 0 1.2rem;
  border: 0;
  border-top: 1px solid var(--s-rule);
}

.synapse-outro {
  font-size: 0.92rem;
  color: var(--synapse-muted);
}
.synapse-outro a {
  color: var(--synapse-accent);
}