/* Blog-only styling. Layers on the Darkroom tokens + .prose from site.css; it adds
   the post layout, the listing grid, the draft banner, and the prose elements that
   markdown emits but the base .prose doesn't cover (ol, blockquote, pre/code, img,
   hr, figures). No new colors — everything reuses the existing CSS variables. */

/* ---------- Draft banner (preview only) ---------- */
.draft-banner {
  position: sticky; top: 68px; z-index: 40;
  background: var(--accent); color: #fff;
  font-family: var(--body); font-weight: 600; font-size: 14px;
  text-align: center; padding: 10px 18px; letter-spacing: 0.01em;
}

/* ---------- Post page ---------- */
/* The whole article lives in one narrow column, centered in the viewport. Header
   and body share .post-col so the title lines up with the body text. */
.post-col { width: 100%; max-width: 72ch; margin: 0 auto; padding: 0 24px; }
.post-head { position: relative; padding: 88px 0 28px; }
.post-head h1 { font-size: clamp(32px, 5.2vw, 52px); font-weight: 800; margin: 14px 0 16px; }
/* Inside the centered column, let prose and sources fill its width. */
.post .prose, .post .post-sources { max-width: none; }
.post-meta { color: var(--text-faint); font-size: 14px; letter-spacing: 0.02em; }
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.post-tags li {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-dim); border: 1px solid var(--border-strong); padding: 5px 10px;
}
.post-body { padding-bottom: 64px; }

/* Extend .prose for elements marked emits beyond the base set. */
.prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose ol li { color: var(--text-dim); margin-bottom: 11px; padding-left: 6px; }
.prose ol li::marker { color: var(--accent); font-weight: 700; }
.prose blockquote {
  margin: 24px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent);
  color: var(--text); font-size: 18px;
}
.prose blockquote p { color: var(--text); }
.prose img { max-width: 100%; height: auto; display: block; margin: 28px 0; border: 1px solid var(--border); }
.prose figure { margin: 28px 0; }
.prose figcaption { color: var(--text-faint); font-size: 13.5px; margin-top: 8px; }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 40px 0; }
.prose code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.88em;
  background: var(--panel); border: 1px solid var(--border); padding: 1px 6px;
}
.prose pre {
  background: var(--bg-soft); border: 1px solid var(--border);
  padding: 18px 20px; overflow-x: auto; margin: 0 0 22px; font-size: 14px;
}
.prose pre code { background: none; border: none; padding: 0; font-size: inherit; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.prose thead th { color: var(--text); background: var(--panel); font-weight: 700; }
.prose td { color: var(--text-dim); }

/* ---------- Sources ---------- */
.post-sources { max-width: 70ch; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border); }
.post-sources h2 { font-size: 18px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px; }
.post-sources ol { padding-left: 22px; }
.post-sources li { color: var(--text-dim); margin-bottom: 9px; font-size: 15px; word-break: break-word; }
.post-sources a { color: var(--accent-bright); }
.post-sources a:hover { text-decoration: underline; }

.post-back { margin-top: 40px; }
.post-back a { color: var(--text-dim); font-weight: 600; }
.post-back a:hover { color: var(--text); }

/* ---------- Listing ---------- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.post-card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--border); background: var(--bg-soft); padding: 28px 26px 24px;
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.post-card:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }
.post-card h2 { font-size: 22px; font-weight: 700; margin: 12px 0 10px; }
.post-card p { color: var(--text-dim); font-size: 15.5px; flex: 1; margin-bottom: 18px; }
.post-card .go { color: var(--accent-bright); font-weight: 600; font-size: 14px; }
.post-card.is-draft { border-style: dashed; }
.post-card-flag {
  position: absolute; top: 14px; right: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: var(--accent); padding: 3px 8px;
}

@media (max-width: 640px) {
  .post-grid { grid-template-columns: 1fr; }
  .draft-banner { top: 0; }
}