/* 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,
.post-prose .btn {
  display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
  min-height:44px; 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,
.post-prose .btn:hover { background:#d8a373; }

/* A .btn placed directly in article prose (not inside the flex-wrapping
   .post-cta box) has no sibling to wrap around it, so on narrow viewports it
   must be able to shrink and wrap its own label instead of forcing the whole
   button (and the document) wider than the viewport. */
.post-prose .btn {
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  text-align:center;
}

.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; }