/* =====================================================================
   xurprise — blog-specific styles
   =====================================================================
   Loaded AFTER shared.css on blog index + blog posts.
   Keeps long-form reading column narrower and adds essay-specific
   components (subtitle, byline-end, section-break).
   ===================================================================== */

article {
  max-width: var(--reading);
  margin: 0 auto;
  padding: 2.75rem 1.5rem 2rem;
}

article h1 { font-size: 2.2rem; letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 0.75rem; }
article .subtitle {
  font-size: 1.12rem;
  color: var(--muted);
  margin: 0 0 1.5rem;
  font-weight: 400;
  line-height: 1.45;
}

article h2 { font-size: 1.35rem; margin: 2.75rem 0 1rem; }
article p  { color: var(--fg-body); font-size: 1.02rem; }
article ul, article ol { color: var(--fg-body); font-size: 1.02rem; }

article strong { color: var(--fg); }

hr.section-break {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.75rem 0 2rem;
}

.byline-end {
  font-size: 0.88rem;
  color: var(--subtle);
  margin-bottom: 0;
}
.byline-end a { color: var(--subtle); }
.byline-end a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Blog index — a list of article cards */
.blog-index {
  max-width: var(--reading);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 2rem;
}
.blog-index h1 { margin-bottom: 0.5rem; }
.blog-index .index-lede {
  font-size: 1.05rem;
  color: var(--muted);
  margin: 0 0 2rem;
  line-height: 1.5;
}
.blog-index ul.post-list { list-style: none; padding: 0; margin: 0; }
.blog-index ul.post-list li {
  padding: 1.35rem 0;
  border-top: 1px solid var(--border);
}
.blog-index ul.post-list li:last-child { border-bottom: 1px solid var(--border); }
.blog-index ul.post-list h2 {
  font-size: 1.15rem;
  margin: 0 0 0.35rem;
}
.blog-index ul.post-list h2 a {
  color: var(--fg);
  border-bottom: none;
}
.blog-index ul.post-list h2 a:hover { color: var(--accent); }
.blog-index ul.post-list p {
  margin: 0 0 0.3rem;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.55;
}
.blog-index ul.post-list .post-meta {
  font-size: 0.82rem;
  color: var(--subtle);
  margin: 0;
}

@media (max-width: 520px) {
  article h1 { font-size: 1.75rem; }
  article .subtitle { font-size: 1rem; }
  article h2 { font-size: 1.2rem; }
  article p, article ul, article ol { font-size: 0.98rem; }
}