/* The blog, on top of legal.css: the same column of prose, plus the list of
   posts on /blog/ and the few elements an article needs that a policy does not
   (a byline, a lede, code blocks, a pull quote, the "next" strip). */

/* --- the list ------------------------------------------------------------ */
.posts { list-style: none; margin: 0; padding: 0; }
.posts li { border-top: 1px solid var(--hairline); padding: 1.75rem 0; }
.posts li:last-child { border-bottom: 1px solid var(--hairline); }
.posts h2 { margin: 0 0 0.5rem; padding: 0; border: 0; font-size: 1.5rem; }
.posts h2 a { text-decoration: none; }
.posts h2 a:hover { color: var(--accent); }
.posts p { margin: 0 0 0.6rem; }
.meta { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); margin: 0; }
.meta a { color: var(--muted); text-decoration: none; }
.meta a:hover { color: var(--accent); }
.meta time { color: var(--ink-soft); }

/* --- the article --------------------------------------------------------- */
.eyebrow { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0 0 1rem; }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }
article h1 { margin-bottom: 0.75rem; }
.byline { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); margin: 0 0 2rem; }
.byline time { color: var(--ink-soft); }
.lede { font-size: 1.25rem; line-height: 1.5; color: var(--ink); margin: 0 0 2.5rem; text-wrap: pretty; }
article h2 { margin-top: 3rem; }
article h2 + p, article h3 + p { margin-top: 0; }
pre {
  font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.6;
  background: #161614; color: var(--ink); border: 1px solid var(--hairline); border-radius: 6px;
  padding: 1rem 1.25rem; margin: 0 0 1.25rem; overflow-x: auto; tab-size: 2;
}
pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
pre .c { color: var(--muted); }
pre .k { color: var(--accent); }
blockquote {
  margin: 2rem 0; padding: 0 0 0 1.25rem; border-left: 2px solid var(--accent);
  font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 1.25rem; line-height: 1.4; letter-spacing: -0.01em;
}
blockquote p { margin: 0; }
.aside { border: 1px solid var(--hairline); border-radius: 6px; background: var(--surface); padding: 1rem 1.25rem; margin: 1.5rem 0; font-size: 0.9375rem; }
.aside p:last-child { margin-bottom: 0; }

/* --- the strip after a post: try it, or read the next one ---------------- */
.next {
  margin-top: 3.5rem; padding: 1.5rem; border: 1px solid var(--hairline); border-radius: 6px; background: var(--surface);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
}
.next p { margin: 0; color: var(--ink); }
.next .cta {
  display: inline-block; background: var(--accent); color: #1a1a18; text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem;
  padding: 0.6rem 1.1rem; border-radius: 999px; white-space: nowrap;
}
.next .cta:hover { filter: brightness(1.08); color: #1a1a18; }
.more { margin-top: 1.5rem; font-size: 0.9375rem; }
.more ul { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.more li { margin: 0 0 0.35rem; }