/* ITIVNIK: стилі статей блогу (/blog/*.html). Токени і базові стилі беруться з /styles.css. */
.post-h1{font-size:clamp(32px,4.8vw,58px);line-height:1.06;letter-spacing:-.03em;font-weight:800;margin:0 0 22px;text-wrap:balance;overflow-wrap:anywhere}
.post-lead{font-size:20px;line-height:1.5;color:var(--muted);margin:0 0 32px;text-wrap:pretty}
.prose{flex:1 1 520px;max-width:760px;min-width:0;display:grid;gap:22px;font-size:18px;line-height:1.7;color:var(--fg2)}
.prose p{margin:0;text-wrap:pretty}
.prose h2{font-size:clamp(25px,3vw,34px);line-height:1.15;letter-spacing:-.02em;font-weight:800;margin:26px 0 0;color:var(--fg);scroll-margin-top:90px;text-wrap:balance}
.prose h3{font-size:21px;line-height:1.3;font-weight:700;margin:12px 0 0;color:var(--fg)}
.prose ul,.prose ol{margin:0;padding-left:1.3em;display:grid;gap:10px}
.prose li::marker{color:var(--accent-text)}
.prose strong{color:var(--fg);font-weight:700}
.prose a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{text-decoration-thickness:2px}
.prose code{font-family:'Geist Mono',ui-monospace,monospace;font-size:.86em;background:var(--s3);border:1px solid var(--line2);border-radius:6px;padding:.1em .4em}
.prose pre{margin:0;background:var(--s2);border:1px solid var(--line2);border-radius:14px;padding:18px 20px;overflow-x:auto;font-size:14.5px;line-height:1.6}
.prose pre code{background:none;border:0;padding:0;font-size:inherit;white-space:pre}
.post-cover{width:100%;height:auto;border-radius:20px;border:1px solid var(--line2);display:block}
.post-cta{margin:10px 0;border-radius:20px;padding:28px;background:var(--accent);color:var(--ink);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:20px;align-items:center}
.post-cta a{text-decoration:none}
.post-aside{flex:1 1 240px;max-width:300px;min-width:0;position:sticky;top:90px;display:grid;gap:24px;overflow-wrap:anywhere}
@media (max-width:820px){
  [data-m="art"]{padding-top:36px!important;padding-bottom:48px!important}
  .post-aside{position:static;max-width:none;flex-basis:100%}
  .prose{font-size:17px}
  .post-lead{font-size:18px}
}
@media (max-width:480px){
  [data-m="art"]{padding-left:18px!important;padding-right:18px!important}
  .post-cta{padding:22px}
}
.prose a:focus-visible,.post-cta a:focus-visible,.toc a:focus-visible,#grid a:focus-visible,#featured:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){.post-h1,.post-lead,.post-cover{animation:none!important;transition:none!important}}