/* ============ Articles list & post pages ============ */
.post-head{ padding:56px 0 6px }
.post-head-inner{ display:flex; flex-direction:column; align-items:flex-start; gap:14px }
.post-back{ display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:.95rem; padding:8px 14px; border:1px solid var(--border); border-radius:var(--r-pill) }
.post-back:hover{ color:var(--accent); border-color:var(--border-strong) }
.post-back svg{ width:16px; height:16px }
.post-head h1{ font-size:clamp(1.9rem,5vw,2.9rem); font-weight:700; line-height:1.35; margin:0 }
.post-meta{ display:flex; flex-wrap:wrap; gap:10px 18px; color:var(--muted); font-size:.95rem }
.post-tags{ display:flex; flex-wrap:wrap; gap:8px }
.post-tag{ padding:4px 12px; border:1px solid var(--border); border-radius:var(--r-pill); color:var(--muted); font-size:.85rem }
.post-lead{ color:var(--muted); font-size:1.1rem; line-height:1.9; max-width:65ch; margin:0 }
.post-cover{ margin-top:22px }
.post-cover img{ display:block; width:100%; border-radius:var(--r-card); border:1px solid var(--border) }

.prose{ max-width:74ch; margin-inline:auto; padding:34px 0 8px; font-size:1.085rem; line-height:1.95; color:var(--text) }
.prose > *:first-child{ margin-top:0 }
.prose h2{ font-size:1.5rem; font-weight:700; margin:2.1em 0 .65em }
.prose h3{ font-size:1.22rem; font-weight:700; margin:1.7em 0 .55em }
.prose p{ margin:0 0 1.15em }
.prose a{ color:var(--accent); text-decoration:underline; text-underline-offset:4px }
.prose ul,.prose ol{ margin:0 0 1.2em; padding-inline-start:1.5em }
.prose li{ margin:.45em 0 }
.prose li::marker{ color:var(--accent) }
.prose blockquote{ margin:1.5em 0; padding:16px 20px; border-inline-start:3px solid var(--accent); background:var(--surface); border-radius:12px; color:var(--muted) }
.prose img{ display:block; max-width:100%; height:auto; margin:1.6em 0; border-radius:16px; border:1px solid var(--border) }
.prose figure{ margin:1.6em 0 }
.prose figcaption{ color:var(--muted); font-size:.9rem; text-align:center; margin-top:10px }
.prose code{ background:var(--surface-2); border:1px solid var(--border); padding:2px 7px; border-radius:7px; font-size:.9em }
.prose pre{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 18px; overflow-x:auto; margin:0 0 1.4em }
.prose pre code{ background:transparent; border:0; padding:0 }
.prose hr{ border:0; border-top:1px solid var(--border); margin:2.4em 0 }
.prose table{ width:100%; border-collapse:collapse; margin:0 0 1.4em; font-size:.98rem }
.prose th,.prose td{ border:1px solid var(--border); padding:10px 12px; text-align:start }
.prose th{ background:var(--surface) }
.video-embed{ position:relative; margin:1.7em 0; border:1px solid var(--border); border-radius:16px; overflow:hidden; background:#000 }
.video-embed iframe{ display:block; width:100%; aspect-ratio:16/9; border:0 }

.post-foot{ padding:26px 0 76px }
.article-main h3 a{ color:inherit }
.article-main h3 a:hover{ color:var(--accent) }
.read-more{ white-space:nowrap }
.post-date{ color:var(--muted); font-size:.85rem; white-space:nowrap; margin-inline-end:6px }
.hl-teal{ color:#2DD4BF }
.hl-amber{ color:#FBBF24 }
.hl-red{ color:#F87171 }
.hl-muted{ color:var(--muted) }
.prose iframe{ display:block; width:100%; aspect-ratio:16/9; height:auto; margin:1.6em 0; border:1px solid var(--border); border-radius:14px }
.prose h1{ font-size:1.9rem; font-weight:700; margin:2.2em 0 .7em }
.prose strong{ color:#FFFFFF }
@media print{ .post-back,.post-foot,.site-header,.site-footer{ display:none } }