/* Blog + Library article + index typography. Uses tokens from tokens.css / v2.css. */
.content-article { max-width: 72ch; margin: 0 auto; padding: 48px 24px 96px; line-height: 1.7; }
.content-article h1 { font-family: var(--display); font-weight: 800; letter-spacing: -0.025em;
  font-size: 2.4rem; line-height: 1.12; margin: 0 0 12px; }
.content-article h2 { font-family: var(--display); font-weight: 700; font-size: 1.6rem;
  margin: 44px 0 16px; letter-spacing: -0.02em; }
.content-article h3 { font-weight: 700; font-size: 1.2rem; margin: 32px 0 12px; }
.content-article p, .content-article li { color: var(--text); font-size: 1.08rem; }
.content-article p { margin: 0 0 1.3em; }
.content-article a { color: var(--amber); text-underline-offset: 3px; }
.content-article ul, .content-article ol { margin: 0 0 1.3em; padding-left: 1.4em; }
.content-article li { margin: 6px 0; }
.content-article li > ul, .content-article li > ol { margin: 6px 0 0; }
.content-article pre { margin: 0 0 1.5em; background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: 8px;
  padding: 16px 18px; overflow-x: auto; font-family: 'JetBrains Mono', monospace; font-size: 0.9rem;
  line-height: 1.6; }
.content-article code { font-family: 'JetBrains Mono', monospace; font-size: 0.92em; }
.content-article :not(pre) > code { background: color-mix(in srgb, var(--text) 8%, transparent);
  padding: 1px 5px; border-radius: 4px; }
.content-article blockquote { border-left: 3px solid var(--amber); margin: 24px 0;
  padding: 4px 0 4px 20px; color: var(--muted); }
.content-article blockquote p:last-child { margin-bottom: 0; }
.content-article hr { border: 0; height: 1px; margin: 44px 0;
  background: color-mix(in srgb, var(--text) 14%, transparent); }
.content-article > :first-child { margin-top: 0; }
.content-article > :last-child { margin-bottom: 0; }
.content-meta { color: var(--muted); font-size: 0.92rem; margin: 0 0 36px; }
.content-tags { color: var(--muted); }
.content-discuss { margin-top: 56px; padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
.content-discuss a { color: var(--amber); margin-right: 16px; }

.content-index { max-width: 72ch; margin: 0 auto; padding: 48px 24px 96px; }
.content-index h1 { font-family: var(--display); font-weight: 800; font-size: 2.2rem; margin: 0 0 8px; }
.content-card { display: block; padding: 24px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent); text-decoration: none; }
.content-card h2 { font-family: var(--display); font-weight: 700; font-size: 1.35rem;
  margin: 0 0 6px; color: var(--text); }
.content-card p { color: var(--muted); margin: 0; }
.content-card-date { color: var(--muted); font-size: 0.85rem; }
.content-card:hover h2 { color: var(--amber); }

/* Blog index: featured latest post + "more posts" nav. */
.content-index-featured { max-width: 72ch; margin: 0 auto; padding: 48px 24px 96px; }
.content-index-featured .content-article { max-width: none; margin: 0; padding: 0; }
.content-kicker { color: var(--amber); font-family: 'JetBrains Mono', monospace; font-size: 0.8rem;
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 10px; }
.content-more { margin-top: 72px; padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.content-more h2 { font-family: var(--display); font-weight: 700; font-size: 1.4rem; margin: 24px 0 4px; }
.content-more .content-card:first-of-type { padding-top: 8px; }