/* Article prose for blog post pages. Loaded only on /blog/<slug>/ pages.
   Reuses the tokens defined in style.css (:root). No inline styles — CSP-clean. */

.post-wrap{padding-top:40px;padding-bottom:24px;max-width:760px}
.post-wrap .prompt{margin-bottom:22px}

/* ---- post header ---- */
.post-head{margin:0 0 34px;padding:0 0 22px;border-bottom:1px solid var(--line)}
.post-head h1{
  font-family:var(--mono-d);font-weight:700;
  font-size:clamp(26px,5vw,40px);line-height:1.12;letter-spacing:-.01em;
  color:var(--fg);margin:0;
}
.post-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:16px 0 0;font-size:12.5px;color:var(--fg-faint);
  font-variant-numeric:tabular-nums;
}
.post-meta .pm-sep{color:var(--line)}
.post-meta .pm-author{color:var(--cyan)}
.post-meta .sev{margin-left:2px}
.post-tags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.post-tags .ref{font-size:11px;color:var(--fg-faint);font-family:var(--mono-b)}

/* ---- prose body ---- */
.post{color:var(--fg);font-size:15.5px;line-height:1.75}
.post > *:first-child{margin-top:0}
.post h2,.post h3,.post h4{
  font-family:var(--mono-d);color:var(--fg);line-height:1.25;
  margin:2em 0 .6em;letter-spacing:-.01em;scroll-margin-top:48px;
}
.post h2{font-size:23px;padding-top:.3em;border-top:1px solid var(--line);padding-top:1.4em}
.post h3{font-size:18px}
.post h4{font-size:15.5px;color:var(--fg-dim)}
.post p{margin:0 0 1.15em}
.post a{color:var(--cyan)}
.post strong{color:var(--fg);font-weight:700}
.post em{color:var(--fg-dim)}

.post ul,.post ol{margin:0 0 1.15em;padding-left:1.4em}
.post li{margin:.35em 0}
.post li::marker{color:var(--fg-faint)}

.post blockquote{
  margin:1.4em 0;padding:.4em 0 .4em 18px;
  border-left:3px solid var(--orange);
  color:var(--fg-dim);background:rgba(255,204,102,.04);
}
.post blockquote p:last-child{margin-bottom:0}

/* inline + block code */
.post code{
  font-family:var(--mono-b);font-size:.88em;
  background:var(--panel-2);border:1px solid var(--line);border-radius:3px;
  padding:.1em .38em;color:var(--med);
}
.post pre{
  margin:1.4em 0;padding:14px 16px;overflow-x:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:5px;
  font-size:13px;line-height:1.6;
}
.post pre code{
  background:none;border:0;padding:0;color:var(--fg-dim);font-size:inherit;
  white-space:pre;
}

.post img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:4px;display:block;margin:1.4em 0}
.post hr{border:0;border-top:1px solid var(--line);margin:2em 0}

.post-table-wrap,.post .table-wrap{overflow-x:auto;margin:1.4em 0}
.post table{border-collapse:collapse;width:100%;font-size:13.5px}
.post th,.post td{border:1px solid var(--line);padding:8px 12px;text-align:left}
.post th{background:var(--panel-2);color:var(--fg);font-weight:700}
.post td{color:var(--fg-dim)}

/* ---- footer nav ---- */
.post-nav{margin:44px 0 0;padding:22px 0 0;border-top:1px solid var(--line)}
.post-back{font-family:var(--mono-b);font-size:14px;color:var(--cyan)}
.post-back::before{content:'← ';color:var(--fg-faint)}

/* ---- blog index hero tweaks ---- */
.blog-hero{padding:60px 0 20px}
.blog-title{font-size:clamp(44px,10vw,84px)}
.blog-title .x{color:var(--orange)}