/* Blog public layout */
:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Lora", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --content-width: 672px;

  --pico-font-family-sans-serif: var(--font-sans);
  --pico-font-family-serif: var(--font-serif);
}

body {
  font-family: var(--font-sans);
}

/* Nav brand */
header nav strong a {
  text-decoration: none;
  color: inherit;
}

/* Constrain all content to 672px (matching overreacted.io) */
header.container,
main.container,
footer.container {
  max-width: var(--content-width) !important;
}

/* ── Homepage ───────────────────────────────────────── */

.blog-header {
  padding: 3rem 0 2rem;
  margin-bottom: 0;
}

.blog-header h1 {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.blog-header p {
  color: var(--pico-muted-color);
  font-size: 1rem;
  margin: 0;
}

.post-list {
  width: 100%;
}

.post-card {
  border-bottom: 1px solid var(--pico-muted-border-color);
  transition: transform 0.15s ease;
  transform-origin: left center;
}

.post-card:last-child {
  border-bottom: none;
}

.post-card:hover {
  transform: scale(1.02);
}

.post-card:hover h2 {
  color: var(--pico-primary);
}

.post-card-link {
  display: block;
  padding: 1.75rem 0;
  text-decoration: none;
  color: inherit;
}

.post-card time {
  display: block;
  font-size: 0.85rem;
  color: var(--pico-muted-color);
  margin-bottom: 0.4rem;
}

.post-card h2 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.6rem;
  line-height: 1.3;
  transition: color 0.15s ease;
}

.post-excerpt {
  color: var(--pico-muted-color);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.no-posts {
  color: var(--pico-muted-color);
  padding: 2rem 0;
}

/* ── Post page ──────────────────────────────────────── */

article h1 {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.2;
}

article time {
  display: block;
  color: var(--pico-muted-color);
  font-size: 0.875rem;
  font-family: var(--font-sans);
  margin-bottom: 2rem;
}

/* Body text — fixed 18px to avoid Pico's fluid scaling */
article div {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.75;
}

/* Headings inside post revert to sans-serif with controlled sizes */
article div h2 {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 2.5rem;
}

article div h3 {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 2rem;
}

article div h4,
article div h5,
article div h6 {
  font-family: var(--font-sans);
  font-weight: 700;
}

/* Code */
article div code,
article div pre {
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

/* Responsive video embeds */
article div iframe {
  max-width: 100%;
}