.art { padding: 8px 0 20px; max-width: 820px; margin: 0 auto; }
.art h1 { font-size: clamp(27px, 4.3vw, 44px); line-height: 1.1; letter-spacing: -0.03em; margin: 6px 0 0; font-weight: 700; }
.art .meta { color: var(--lp-text-3); font-size: 13.5px; margin-top: 12px; }
.art-body { margin: 22px 0 0; font-size: 16.5px; line-height: 1.7; color: var(--lp-text); }
.art-body h2 { font-size: clamp(21px, 2.6vw, 28px); letter-spacing: -0.02em; margin: 36px 0 12px; scroll-margin-top: 90px; }
.art-body h3 { font-size: 19px; margin: 26px 0 10px; scroll-margin-top: 90px; }
.art-body p { margin: 14px 0; }
.art-body ul, .art-body ol { margin: 14px 0; padding-left: 22px; }
.art-body li { margin: 7px 0; }
.art-body a:not(.btn) { color: var(--lp-accent); }
.art-body a.btn, .art-body .btn { color: inherit; }
.art-body a.btn-primary { color: #fff; }
.art-body a.btn-ghost { color: var(--lp-accent); }
.art-body strong { font-weight: 700; }

.art-toc { background: var(--lp-surface); border: 1px solid var(--lp-hairline); border-radius: var(--lp-radius-lg); padding: 18px 20px; margin: 26px 0; }
.art-toc h2 { margin: 0 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lp-text-3); }
.art-toc ol { margin: 0; padding-left: 20px; }
.art-toc li { margin: 6px 0; font-size: 15px; }
.art-toc a { color: var(--lp-text); }
.art-toc a:hover { color: var(--lp-accent); }

.callout { border-radius: 16px; padding: 16px 18px; margin: 22px 0; font-size: 15px; line-height: 1.6; }
.callout.warn { background: #fff6e5; border: 1px dashed #e0a53e; color: #7a5312; }
.callout.info { background: var(--lp-accent-soft); border: 1px solid rgba(10, 132, 255, 0.3); color: var(--lp-text); }

.art-cta { background: var(--lp-surface); border: 1px solid var(--lp-hairline); border-radius: var(--lp-radius-lg); box-shadow: var(--lp-shadow); padding: 24px; margin: 36px 0 8px; }
.art-cta h3 { margin: 0 0 8px; font-size: 20px; }
.art-cta p { margin: 0 0 16px; color: var(--lp-text-2); }
.art-cta .row { display: flex; gap: 12px; flex-wrap: wrap; }

.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: 26px 0; }
.post { display: block; background: var(--lp-surface); border: 1px solid var(--lp-hairline); border-radius: var(--lp-radius-lg); padding: 20px; transition: 0.2s; }
.post:hover { transform: translateY(-3px); box-shadow: var(--lp-shadow); }
.post .tag { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lp-accent); font-weight: 700; }
.post h3 { margin: 8px 0; font-size: 18px; letter-spacing: -0.01em; }
.post p { margin: 0; color: var(--lp-text-2); font-size: 14.5px; line-height: 1.5; }

.art-footnote { margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--lp-hairline-2); color: var(--lp-text-3); font-size: 13.5px; line-height: 1.6; }