/* Blog: shared styling for the listing and post pages.
   Inherits brand tokens from theme.css (loaded first). No inline scripts;
   this is a plain stylesheet served from 'self' to satisfy the site CSP. */

.blog-wrap { flex:1; padding:96px 24px 80px; }
.blog-inner { max-width:1100px; margin:0 auto; }

/* ── Listing header ── */
.blog-head { text-align:center; margin-bottom:64px; }
.blog-head .eyebrow {
  font-family:var(--font-sans); text-transform:uppercase; letter-spacing:0.16em;
  font-size:0.72rem; color:var(--bronze); margin:0 0 14px;
}
.blog-head h1 {
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.4rem,6vw,3.6rem); line-height:1.05; margin:0 0 16px;
  text-wrap:balance;
}
.blog-head p {
  color:var(--text-muted); max-width:620px; margin:0 auto; line-height:1.65;
  font-size:1.05rem;
}

/* ── Listing cards ── */
.post-list { display:grid; gap:24px; max-width:820px; margin:0 auto; }
.post-card {
  display:block; padding:32px 32px 28px; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--bg-card);
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.post-card:hover { border-color:var(--accent-border); background:var(--bg-surface); transform:translateY(-2px); }
.post-card:focus-visible { transform:translateY(-2px); }
.post-card .post-meta {
  font-family:var(--font-sans); text-transform:uppercase; letter-spacing:0.1em;
  font-size:0.7rem; color:var(--text-faint); margin:0 0 12px;
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
}
.post-card .post-kind { color:var(--bronze); }
.post-card h2 {
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.5rem,3.2vw,2rem); line-height:1.12; margin:0 0 10px; color:var(--text-bright);
}
.post-card p { color:var(--text-muted); line-height:1.6; margin:0; font-size:0.98rem; }
.post-card .read-more {
  display:inline-block; margin-top:16px; color:var(--bronze);
  font-size:0.9rem; font-family:var(--font-sans);
}

/* ── Single post ── */
.post {
  max-width:720px; margin:0 auto;
}
.post-header { margin-bottom:44px; }
.post-header .post-meta {
  font-family:var(--font-sans); text-transform:uppercase; letter-spacing:0.1em;
  font-size:0.72rem; color:var(--text-faint); margin:0 0 18px;
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
}
.post-header .post-kind { color:var(--bronze); }
.post-header h1 {
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.1rem,5.4vw,3.1rem); line-height:1.06; margin:0; text-wrap:balance;
}

.post-prose { color:var(--text-secondary); font-size:1.05rem; line-height:1.75; }
.post-prose > p:first-of-type { font-size:1.2rem; color:var(--text-primary); line-height:1.65; }
.post-prose p { margin:0 0 1.4em; }
.post-prose h2 {
  font-family:var(--font-display); font-weight:600; color:var(--text-bright);
  font-size:1.7rem; line-height:1.2; margin:2.2em 0 0.6em;
}
.post-prose h3 {
  font-family:var(--font-sans); font-weight:600; color:var(--text-primary);
  font-size:1.05rem; margin:1.8em 0 0.5em; letter-spacing:0.01em;
}
.post-prose ul, .post-prose ol { margin:0 0 1.4em; padding-left:22px; }
.post-prose li { margin:0 0 0.6em; }
.post-prose a { color:var(--bronze); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.post-prose a:hover { color:var(--text-bright); }
.post-prose strong { color:var(--text-primary); font-weight:600; }
.post-prose code {
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:4px;
  padding:1px 6px; font-size:0.9em; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color:var(--text-primary);
}
.post-prose blockquote {
  margin:1.6em 0; padding:4px 0 4px 22px; border-left:2px solid var(--accent-border);
  color:var(--text-tertiary); font-style:italic;
}
.post-prose pre {
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:18px 20px; overflow-x:auto; margin:0 0 1.6em; font-size:0.9rem; line-height:1.6;
}
.post-prose pre code { background:none; border:none; padding:0; }

/* Callout for the honest "what's gated / still open" notes */
.post-note {
  margin:1.8em 0; padding:20px 22px; border:1px solid var(--accent-border);
  border-radius:var(--radius-sm); background:var(--accent-subtle); color:var(--text-secondary);
  line-height:1.65; font-size:0.98rem;
}
.post-note strong { color:var(--bronze); }

/* Post footer: internal links + CTA */
.post-foot { margin-top:64px; padding-top:36px; border-top:1px solid var(--border); }
.post-foot h3 {
  font-family:var(--font-sans); text-transform:uppercase; letter-spacing:0.1em;
  font-size:0.74rem; color:var(--text-faint); margin:0 0 16px;
}
.post-foot ul { list-style:none; padding:0; margin:0 0 32px; display:flex; flex-wrap:wrap; gap:8px 20px; }
.post-foot a { color:var(--bronze); text-decoration:none; font-size:0.95rem; }
.post-foot a:hover { color:var(--text-bright); text-decoration:underline; text-underline-offset:3px; }
.post-cta {
  display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:24px 26px;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-card);
}
.post-cta p { margin:0; color:var(--text-secondary); flex:1; min-width:220px; line-height:1.5; }
.post-cta .btn {
  display:inline-block; padding:12px 24px; border-radius:999px; background:var(--bronze);
  color:#1a0f07; font-weight:600; font-family:var(--font-sans); font-size:0.95rem;
  white-space:nowrap;
}
.post-cta .btn:hover { background:#d8a373; }

.post-back { display:inline-block; margin-bottom:28px; color:var(--text-faint); font-size:0.9rem; }
.post-back:hover { color:var(--bronze); }

@media (max-width:640px) {
  .blog-wrap { padding:80px 20px 64px; }
  .post-card { padding:26px 22px; }
  .post-prose > p:first-of-type { font-size:1.12rem; }
}

/* About the author */
.blog-author { max-width:640px; margin:72px auto 0; padding-top:36px; border-top:1px solid var(--border); text-align:center; }
.blog-author h2 { font-family:var(--font-sans); text-transform:uppercase; letter-spacing:0.1em; font-size:0.74rem; color:var(--text-faint); margin:0 0 14px; }
.blog-author p { color:var(--text-muted); line-height:1.7; margin:0; font-size:1rem; }
.blog-author a { color:var(--bronze); text-decoration:underline; text-underline-offset:3px; }