/* Post prose. Renders WP the_content() with a Tailwind-Typography
   (prose) feel: generous vertical rhythm, optical heading spacing,
   calibrated list markers, pill-styled inline code, branded blockquote,
   and a reading column centered inside the full-width section
   container. Spacing uses em units so scale responds to font-size.  */

.post-prose {
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

.post-prose__body {
  max-width: 48rem;
  margin-inline: auto;
  color: color-mix(in oklch, var(--color-foreground) 92%, transparent);
  font-size: 1.0625rem;
  line-height: 1.75;
  text-align: left;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* --- Vertical rhythm. Every child gets a top margin; the first and
   last child are zeroed so the prose column hugs the section padding
   cleanly on both ends. ---------------------------------------------- */

.post-prose__body > * {
  margin-top: 1.25em;
  margin-bottom: 0;
}
.post-prose__body > :first-child { margin-top: 0; }
.post-prose__body > :last-child  { margin-bottom: 0; }

/* --- Paragraphs ---------------------------------------------------- */

.post-prose__body p {
  margin-top: 1.25em;
}

/* Lead paragraph: the first paragraph reads larger and slightly
   muted, just like tailwind's `prose-lead`. */
.post-prose__body > p:first-child {
  font-size: 1.2em;
  line-height: 1.6;
  color: color-mix(in oklch, var(--color-foreground) 82%, transparent);
}

/* --- Headings. Optical tuning: more margin on top than bottom so the
   next element is visually "owned" by the heading. --------------- */

.post-prose__body h2,
.post-prose__body h3,
.post-prose__body h4,
.post-prose__body h5,
.post-prose__body h6 {
  font-family: var(--font-display);
  color: var(--color-foreground);
  font-weight: var(--font-weight-display);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.post-prose__body h2 {
  font-size: 1.5em;
  line-height: 1.3333;
  margin-top: 2em;
  margin-bottom: 0.6em;
}
.post-prose__body h3 {
  font-size: 1.25em;
  line-height: 1.45;
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}
.post-prose__body h4 {
  font-size: 1.0625em;
  line-height: 1.5;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

/* Heading + immediate sibling gets less top margin so the block reads
   as one unit. */
.post-prose__body h2 + *,
.post-prose__body h3 + *,
.post-prose__body h4 + * { margin-top: 0.625em; }

/* --- Lists --------------------------------------------------------- */

.post-prose__body ul,
.post-prose__body ol {
  margin-top: 1.25em;
  padding-left: 1.625em;
}

.post-prose__body ul { list-style-type: disc; }
.post-prose__body ol { list-style-type: decimal; }

.post-prose__body li {
  margin-top: 0.5em;
  padding-left: 0.375em;
}
.post-prose__body li::marker {
  color: color-mix(in oklch, var(--brand-teal) 55%, var(--color-muted-foreground));
  font-weight: var(--font-weight-medium);
}

/* Nested lists tighten up. */
.post-prose__body li > ul,
.post-prose__body li > ol {
  margin-top: 0.5em;
}

/* Paragraphs inside list items don't need extra top margin. */
.post-prose__body li > p {
  margin-top: 0.5em;
}

/* --- Inline formatting -------------------------------------------- */

.post-prose__body strong,
.post-prose__body b {
  color: var(--color-foreground);
  font-weight: var(--font-weight-display);
}

.post-prose__body em,
.post-prose__body i { font-style: italic; }

.post-prose__body a {
  color: var(--brand-teal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: var(--font-weight-medium);
  transition: color var(--dur-fast) var(--ease);
}
.post-prose__body a:hover { color: var(--brand-blue); }

/* --- Inline code (pill style) + code blocks ----------------------- */

.post-prose__body code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  font-weight: var(--font-weight-medium);
  color: var(--color-foreground);
  background: color-mix(in oklch, var(--color-foreground) 5%, transparent);
  border: 1px solid color-mix(in oklch, var(--color-foreground) 8%, transparent);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.375em;
}

.post-prose__body pre {
  margin-top: 1.7em;
  padding: 1em 1.25em;
  background: color-mix(in oklch, var(--color-foreground) 3%, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-size: 0.875em;
  line-height: 1.7;
}
.post-prose__body pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 1em;
}

/* --- Blockquote ---------------------------------------------------- */

.post-prose__body blockquote {
  margin-top: 1.6em;
  padding: 0.25em 1.25em;
  border-left: 3px solid var(--brand-teal);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-style: italic;
  font-size: 1.0625em;
  color: var(--color-foreground);
}
.post-prose__body blockquote p { margin-top: 0.5em; }
.post-prose__body blockquote p:first-child { margin-top: 0; }
.post-prose__body blockquote cite {
  display: block;
  margin-top: 0.5em;
  font-family: var(--font-mono, var(--font-text));
  font-size: 0.75em;
  font-style: normal;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.06em;
  color: var(--color-muted-foreground);
}

/* --- Images, figures, HR ------------------------------------------ */

.post-prose__body figure {
  margin-top: 2em;
  margin-bottom: 0;
}
.post-prose__body figure img {
  width: 100%;
  border-radius: var(--radius-md);
}
.post-prose__body figcaption {
  margin-top: 0.75em;
  font-size: 0.875em;
  color: var(--color-muted-foreground);
  line-height: 1.5;
  text-align: center;
}

.post-prose__body img {
  margin-top: 2em;
  border-radius: var(--radius-md);
}

.post-prose__body hr {
  margin-block: 3em;
  border: 0;
  border-top: 1px solid var(--color-border);
}

/* --- Tables -------------------------------------------------------- */

.post-prose__body table {
  width: 100%;
  margin-top: 2em;
  font-size: 0.9375em;
  line-height: 1.55;
  border-collapse: collapse;
  text-align: left;
}
.post-prose__body thead {
  border-bottom: 1px solid var(--color-border);
}
.post-prose__body th {
  padding: 0.625em 0.75em;
  font-family: var(--font-mono, var(--font-text));
  font-size: 0.75em;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}
.post-prose__body td {
  padding: 0.75em;
  border-top: 1px solid color-mix(in oklch, var(--color-border) 60%, transparent);
  vertical-align: top;
}

/* --- Responsive nudges -------------------------------------------- */

@media (max-width: 540px) {
  .post-prose__body { font-size: 1rem; }
  .post-prose__body h2 { font-size: 1.375em; }
  .post-prose__body h3 { font-size: 1.125em; }
}