/* Blog article styles — scoped to the article container.
   The site's header/footer + base styles come from site.css (generated from
   public/index.html by build.py), so nothing here redefines body/:root/edges. */
.blog-main{max-width:720px;margin:0 auto;padding:0 24px;font-size:17px;line-height:1.65}
article{padding:48px 0 64px}
.eyebrow{font:500 12px "DM Mono",monospace;letter-spacing:.14em;color:var(--salmon);text-transform:uppercase}
h1{font-size:clamp(30px,5vw,44px);font-weight:600;letter-spacing:-.03em;line-height:1.12;margin:14px 0 18px}
.meta{font:500 13px "DM Mono",monospace;color:var(--ink2);letter-spacing:.04em;margin-bottom:32px;padding-bottom:20px;border-bottom:1px solid var(--line)}
h2{font-size:23px;font-weight:600;letter-spacing:-.02em;margin:36px 0 12px}
p{margin:0 0 18px}
p.lead{font-size:20px;line-height:1.5;color:var(--ink2);margin-bottom:24px}
ul,ol{margin:0 0 18px 22px}
li{margin-bottom:9px}
code{font:500 15px "DM Mono",monospace;background:var(--bg2);padding:2px 6px;border-radius:4px}
.callout{background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:8px;padding:20px 22px;margin:26px 0}
.callout .t{font:500 12px "DM Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.callout p{margin:0;font-size:16px}
.cta{margin:40px 0 0;padding:26px 28px;background:var(--rose);border:1px solid var(--line);border-radius:10px}
.cta p{font-size:16px;margin-bottom:16px}
.btn{display:inline-flex;align-items:center;gap:8px;font:500 14px "DM Mono",monospace;padding:12px 22px;background:var(--ink);color:#faece3;text-decoration:none;border-radius:8px}
.btn:hover{background:var(--blue);color:#fff}
.related{margin-top:40px;border-top:1px solid var(--line);padding-top:24px}
.related .t{font:500 12px "DM Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin-bottom:12px}
.related a{display:block;color:var(--ink);text-decoration:none;font-weight:500;padding:8px 0;border-bottom:1px solid var(--line)}
.related a:hover{color:var(--blue)}
.related a:last-child{border-bottom:none}