/* Blog-only styles, layered on top of the shared /styles.css tokens. */

.brand-link { color: inherit; text-decoration: none; }

.blog-main { max-width: 720px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

.blog-title { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 1.5rem; }

.post-list { display: flex; flex-direction: column; gap: 1.75rem; }

.post-card {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1rem;
  align-items: start;
}
.post-card-photo {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--moss-light);
}
.post-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card-body h2 { font-size: 1.15rem; margin: .15rem 0 .35rem; }
.post-card-body h2 a { color: var(--ink); text-decoration: none; }
.post-card-body h2 a:hover { text-decoration: underline; }
.post-date { color: #75695a; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.post-desc { color: #4a4235; font-size: .95rem; }

@media (max-width: 520px) {
  .post-card { grid-template-columns: 1fr; }
}

/* ---------- Single post ---------- */
.post .post-date { margin-top: 1rem; }
.post h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin: .3rem 0 1rem; }
.post-hero {
  width: 100%;
  border-radius: 14px;
  margin-bottom: 1.5rem;
  display: block;
}
.post-body { font-size: 1.02rem; }
.post-body h2 { font-size: 1.25rem; margin: 1.75rem 0 .6rem; }
.post-body h3 { font-size: 1.05rem; margin: 1.25rem 0 .5rem; }
.post-body p { margin: .8rem 0; }
.post-body ul, .post-body ol { margin: .8rem 0 .8rem 1.25rem; }
.post-body li { margin: .3rem 0; }
.post-body a { color: var(--forest); }
.post-body em { color: #75695a; }
.post-body img { max-width: 100%; border-radius: 10px; }

.post-links { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.post-links h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; color: #75695a; margin-bottom: .5rem; }
.post-links ul { list-style: none; }
.post-links li { margin: .3rem 0; }
.post-links a { color: var(--forest); font-weight: 700; text-decoration: none; }
.post-links a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer { background: var(--forest); color: var(--moss); padding: 1.5rem 1.25rem; margin-top: 2rem; }
.site-footer .wrap { max-width: 960px; margin: 0 auto; font-size: .85rem; }
.site-footer a { color: var(--marigold); }