/* Base public-site chrome (header/nav/footer/draft banner). Section and
   theme-token CSS is bundled separately per-page via /assets/theme/{hash}.css. */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--theme-font-body, sans-serif);
  color: var(--theme-color-text, #1d2327);
  background: var(--theme-color-surface, #fff);
}
a { color: var(--theme-color-primary, #2271b1); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--theme-font-heading, sans-serif); }
img { max-width: 100%; display: block; }

.draft-banner {
  background: #fcf3e0;
  color: #996800;
  text-align: center;
  padding: 8px 16px;
  font-size: 14px;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  flex-wrap: wrap;
  gap: 12px;
}
.site-title {
  font-weight: 700;
  font-size: 20px;
  color: var(--theme-color-text, #1d2327);
}
.site-nav { display: flex; gap: 20px; }
.nav-item { position: relative; }
.nav-item > a { font-size: 15px; }
.nav-item .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--theme-color-surface, #fff);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: var(--theme-radius, 6px);
  min-width: 160px;
  padding: 6px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
  z-index: 10;
}
.nav-item:hover .submenu,
.nav-item:focus-within .submenu { display: block; }
.nav-item .submenu a { display: block; padding: 8px 14px; font-size: 14px; }

.site-main { min-height: 60vh; }

.site-footer {
  text-align: center;
  padding: 24px;
  color: var(--theme-color-muted, #646970);
  font-size: 13px;
  border-top: 1px solid rgba(0, 0, 0, .08);
}

/* ---------- Blog ---------- */
.blog-index { max-width: 800px; margin: 0 auto; padding: 48px 24px; }
.blog-index h1 { font-size: 34px; margin-bottom: 32px; }
.blog-list { display: flex; flex-direction: column; gap: 32px; }
.blog-list-item { display: flex; gap: 20px; }
.blog-list-cover { flex-shrink: 0; width: 200px; }
.blog-list-cover img { border-radius: var(--theme-radius, 6px); aspect-ratio: 4 / 3; object-fit: cover; }
.blog-list-body h2 { font-size: 22px; margin-bottom: 6px; }
.blog-list-body .post-meta { color: var(--theme-color-muted, #646970); font-size: 13px; margin-bottom: 8px; }
.blog-list-body p:not(.post-meta) { color: var(--theme-color-text, #1d2327); }
.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; }

.blog-post-header { max-width: 800px; margin: 0 auto; padding: 48px 24px 24px; }
.blog-post-header img { border-radius: var(--theme-radius, 6px); margin-bottom: 24px; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-post-header h1 { font-size: 36px; margin-bottom: 8px; }
.blog-post-header .post-meta { color: var(--theme-color-muted, #646970); font-size: 14px; }

@media (max-width: 640px) {
  .site-header { flex-direction: column; align-items: flex-start; }
  .site-nav { flex-wrap: wrap; gap: 12px; }
  .nav-item .submenu { position: static; box-shadow: none; border: none; display: block; padding-left: 12px; }
  .blog-list-item { flex-direction: column; }
  .blog-list-cover { width: 100%; }
}