/* Blog — static pages generated at build time by scripts/build-blog.mjs
   from content/blog/*.md (/blog, /blog/<slug>). Loaded alongside the app's
   main stylesheet, which defines the :root tokens this file reads via
   var(...); kept separate from src/styles.css to avoid growing that file.
   Self-contained rules (not shared with .landing-header/.landing-footer) so
   every tap target here is independently >= 44px and body copy >= 16px. */

.blog-shell { display: flex; flex-direction: column; min-height: 100%; }
.blog-header { padding: 20px 32px; }
.blog-header-inner {
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.blog-nav { display: flex; align-items: center; gap: 4px; }
.blog-nav a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 12px;
  color: var(--muted); text-decoration: none; font-size: 16px;
}
.blog-nav a:hover { color: var(--text); }

.blog-main { flex: 1; max-width: 720px; margin: 0 auto; padding: 20px 32px 60px; width: 100%; }
.blog-index-title { font-size: 32px; margin: 10px 0 6px; letter-spacing: -0.02em; }
.blog-index-sub { color: var(--muted); font-size: 16px; margin: 0 0 32px; }
.blog-index-list { display: flex; flex-direction: column; gap: 16px; }
.blog-card {
  display: block; padding: 20px; min-height: 44px;
  border: 1px solid var(--border); border-radius: var(--radius);
  text-decoration: none; color: inherit;
}
.blog-card:hover { border-color: var(--accent); }
.blog-card-date { font-size: 14px; color: var(--muted); margin: 0 0 6px; }
.blog-card-title { font-size: 20px; font-weight: 700; margin: 0 0 8px; color: var(--text); }
.blog-card-desc { font-size: 16px; line-height: 1.55; color: #d5d5db; margin: 0; }

.blog-post-back {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--muted); text-decoration: none; font-size: 16px;
}
.blog-post-back:hover { color: var(--text); }
.blog-post-title { font-size: 32px; margin: 16px 0 6px; letter-spacing: -0.02em; }
.blog-post-date { color: var(--muted); font-size: 14px; margin: 0 0 28px; }
.blog-post-body h1 { font-size: 26px; margin: 28px 0 10px; }
.blog-post-body h2 { font-size: 22px; margin: 28px 0 10px; }
.blog-post-body h3 { font-size: 18px; margin: 22px 0 8px; }
.blog-post-body p, .blog-post-body li { font-size: 16px; line-height: 1.6; color: #d5d5db; }
.blog-post-body ul { padding-left: 22px; }
.blog-post-body li + li { margin-top: 4px; }
.blog-post-body a { color: var(--accent); }
.blog-post-body a:hover { text-decoration: underline; }
.blog-post-body strong { color: var(--text); }
.blog-post-body code {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 5px; font-size: 0.95em;
}

.blog-footer {
  border-top: 1px solid var(--border);
  margin-top: 40px; padding: 40px 32px 28px;
  background: color-mix(in oklab, var(--bg) 85%, black);
}
.blog-footer-inner {
  max-width: 720px; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: start;
}
.blog-footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-footer-cols > div { display: flex; flex-direction: column; }
.blog-footer-cols a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--muted); text-decoration: none; font-size: 16px; text-align: left;
}
.blog-footer-cols a:hover { color: var(--text); }
.blog-footer-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text); font-weight: 700; margin-top: 6px; }
.blog-footer-copy { max-width: 720px; margin: 40px auto 0; text-align: center; color: var(--muted); font-size: 12px; }

@media (max-width: 600px) {
  .blog-header, .blog-main { padding-left: 20px; padding-right: 20px; }
  .blog-footer { padding-left: 20px; padding-right: 20px; }
  .blog-footer-inner { grid-template-columns: 1fr; }
  .blog-footer-cols { grid-template-columns: repeat(3, 1fr); }
  .blog-index-title, .blog-post-title { font-size: 26px; }
}