/* Blog listing + article styling (rides on top of site.css) */
.wrap-narrow{max-width:760px}

/* listing grid */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
.blog-card{display:flex;flex-direction:column;background:var(--surface,#1a1a1e);border:1px solid var(--line,rgba(255,255,255,.1));border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s ease,border-color .15s ease}
.blog-card:hover{transform:translateY(-3px);border-color:var(--amber,#E9A23B)}
.bc-img{aspect-ratio:16/9;background-size:cover;background-position:center;background-color:#232228}
.bc-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.bc-date{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted,#928E84);text-transform:uppercase;letter-spacing:.04em}
.blog-card h3{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:21px;line-height:1.25;margin:0}
.bc-body p{color:var(--muted,#928E84);font-size:14.5px;line-height:1.55;margin:0;flex:1}
.bc-more{color:var(--amber,#E9A23B);font-weight:600;font-size:14px;margin-top:4px}

/* article */
.post{padding-top:26px}
.post-back{margin:0 0 14px}
.post-back a{color:var(--muted,#928E84);font-size:14px;text-decoration:none}
.post-back a:hover{color:var(--bone,#ECE8E0)}
.post-meta{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--muted,#928E84);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.post h1{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(28px,5vw,44px);line-height:1.12;margin:0 0 22px}
.post-hero{width:100%;height:auto;border-radius:16px;border:1px solid var(--line,rgba(255,255,255,.1));margin-bottom:28px;display:block}

.post-body{font-size:17.5px;line-height:1.75;color:var(--bone,#ECE8E0)}
.post-body>*{max-width:100%}
.post-body h2{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:26px;line-height:1.2;margin:38px 0 14px}
.post-body h3{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:21px;margin:28px 0 10px}
.post-body p{margin:0 0 18px}
.post-body ul,.post-body ol{margin:0 0 18px;padding-left:24px}
.post-body li{margin:0 0 9px}
.post-body a{color:var(--amber,#E9A23B);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.post-body strong{color:#fff}
.post-body img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line,rgba(255,255,255,.1));margin:8px 0 22px}
.post-body blockquote{margin:0 0 20px;padding:6px 0 6px 20px;border-left:3px solid var(--amber,#E9A23B);color:var(--muted,#928E84);font-style:italic}
.post-body code{font-family:'JetBrains Mono',monospace;font-size:.9em;background:rgba(255,255,255,.06);padding:2px 6px;border-radius:6px}
.post-body pre{background:#111114;border:1px solid var(--line,rgba(255,255,255,.1));border-radius:12px;padding:16px;overflow-x:auto;margin:0 0 20px}
.post-body pre code{background:none;padding:0}
.post-body table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px}
.post-body th,.post-body td{border:1px solid var(--line,rgba(255,255,255,.1));padding:9px 12px;text-align:left}

.post-cta{margin-top:44px}

@media(max-width:520px){
  .post-body{font-size:16.5px}
  .blog-grid{grid-template-columns:1fr}
}