/*
 * The blog: the post list at /blog/ and each post page, as render-posts.js
 * writes them, in the site's own type and colours. Also loaded into the CMS's
 * post preview (admin/post-preview.js), so a post looks the same while it is
 * being written.
 */

/* The base the site's other pages set in their own heads. */
html, body { margin: 0; padding: 0; background: #F6F1E8; }
* { box-sizing: border-box; }
a { color: #1A1712; text-decoration: none; }
a:hover { color: #9A6B10; }
::selection { background: #F3DC93; color: #1A1712; }

/* Hidden only while the runtime is drawing the header and footer; templates/
   blog.html moves <main> into the page once they exist. */
#dc-root ~ #post-main { display: none; }

.blog {
  display: block;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 28px) 110px;
  color: #1A1712;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.blog a { color: #9A6B10; }
.blog a:hover { color: #1A1712; }

.post-hero { max-width: 820px; padding: clamp(28px, 5vw, 60px) 0 36px; }
.post__meta, .post-row__meta {
  margin: 0 0 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9A6B10;
}
.post__title {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 6.5vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.036em;
  text-wrap: balance;
}
.post__excerpt {
  margin: 18px 0 0;
  max-width: 640px;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(26,23,18,0.6);
}

.post-section { max-width: 820px; }
.post__cover {
  margin: 0 0 32px;
  border-radius: 32px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 20px 30px rgba(90,70,40,0.12);
}
.post__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

.post {
  padding: clamp(24px, 4vw, 44px);
  border-radius: 40px;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 20px 20px rgba(90,70,40,0.10);
}
.post__body { font-size: 17px; line-height: 1.75; color: rgba(26,23,18,0.8); }
.post__body > :first-child { margin-top: 0; }
.post__body h2, .post__body h3 {
  margin: 1.8em 0 0.5em;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.02em;
  color: #1A1712;
}
.post__body h2 { font-size: 28px; line-height: 1.15; }
.post__body h3 { font-size: 21px; line-height: 1.2; }
.post__body p, .post__body ul, .post__body ol { margin: 0 0 1.1em; }
.post__body blockquote {
  margin: 1.4em 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid #F0D586;
  color: rgba(26,23,18,0.7);
}
.post__body a { text-decoration: underline; text-underline-offset: 3px; }
.post-figure { margin: 1.6em 0; }
.post-figure img { display: block; width: 100%; height: auto; border-radius: 22px; }
.post-figure figcaption { padding: 10px 4px 0; font-size: 14px; color: rgba(26,23,18,0.55); }

.post-nav { display: flex; justify-content: space-between; gap: 18px; margin: 28px 0 0; }
.post-nav__step { display: grid; gap: 4px; font-weight: 600; }
.post-nav__step--older { text-align: right; }
.post-nav__label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.1em; }
.post__back { margin: 28px 0 0; font-weight: 600; }

.post-list { display: grid; gap: 18px; max-width: 980px; }
.post-row {
  display: grid;
  grid-template-columns: minmax(0, 260px) 1fr;
  gap: 22px;
  align-items: center;
  padding: 14px;
  border-radius: 32px;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 20px 20px rgba(90,70,40,0.08);
}
.post-row__media { display: block; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; }
.post-row__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-row__title { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: 24px; letter-spacing: -0.02em; }
.post-row__title a { color: #1A1712; }
.post-row__excerpt { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: rgba(26,23,18,0.6); }
@media (max-width: 640px) { .post-row { grid-template-columns: 1fr; } }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 28px 0 0; max-width: 980px; }
.pager__count { margin: 0; font-size: 14px; color: rgba(26,23,18,0.55); }
.empty-state {
  max-width: 820px;
  padding: 28px;
  border-radius: 28px;
  border: 1px dashed rgba(154,107,16,0.35);
  font-size: 15px;
  color: rgba(26,23,18,0.6);
}
.empty-state p { margin: 0; }