/* Shared article styling for /blog/ posts — MarsAI design language */
.article-main { max-width: 780px; margin: 0 auto; padding: 80px 32px 120px; }
.article-crumbs { font-family: var(--f-mono); font-size: 11px; color: var(--tx-3); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 28px; }
.article-crumbs a { color: var(--tx-3); text-decoration: none; }
.article-crumbs a:hover { color: var(--tx); }
.article-crumbs .sep { margin: 0 10px; color: var(--tx-4); }
.article-tag { display: inline-block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--or); padding: 5px 10px; border: 1px solid rgba(255,90,31,.3); border-radius: 4px; background: rgba(255,90,31,.08); margin-bottom: 22px; }
.article-h1 { font-size: clamp(36px, 5vw, 60px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 22px; }
.article-h1 em { font-family: var(--f-serif); font-style: italic; font-weight: 300; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.article-lede { font-size: 20px; line-height: 1.5; color: var(--tx-2); margin-bottom: 28px; }
.article-meta { display: flex; gap: 14px; align-items: center; font-family: var(--f-mono); font-size: 12px; color: var(--tx-3); padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 44px; flex-wrap: wrap; }
.article-meta .sep { color: var(--tx-4); }
.article-body { font-size: 17px; line-height: 1.65; color: var(--tx); }
.article-body p { margin: 0 0 22px; }
.article-body p strong { color: var(--tx); font-weight: 600; }
.article-body h2 { font-size: 32px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; margin: 56px 0 20px; }
.article-body h2 em { font-family: var(--f-serif); font-style: italic; font-weight: 300; color: var(--or); }
.article-body h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; margin: 40px 0 16px; }
.article-body ul, .article-body ol { margin: 0 0 22px 22px; padding: 0; }
.article-body li { margin: 0 0 10px; }
.article-body a { color: var(--or); text-decoration: underline; text-decoration-color: rgba(255,90,31,.4); text-underline-offset: 3px; }
.article-body a:hover { text-decoration-color: var(--or); }
.article-body blockquote { margin: 32px 0; padding: 22px 28px; border-left: 3px solid var(--or); background: var(--bg-1); font-family: var(--f-serif); font-style: italic; font-weight: 300; font-size: 22px; line-height: 1.4; color: var(--tx); border-radius: 0 6px 6px 0; }
.article-body blockquote cite { display: block; margin-top: 12px; font-family: var(--f-mono); font-style: normal; font-size: 12px; color: var(--tx-3); letter-spacing: .06em; }
.article-body code { font-family: var(--f-mono); font-size: .9em; background: var(--bg-2); padding: 2px 6px; border-radius: 3px; color: var(--or); }
.stat-block { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 36px 0; }
.stat-block .stat { padding: 22px 20px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; }
.stat-n { font-size: 36px; font-weight: 500; letter-spacing: -0.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.stat-d { font-family: var(--f-mono); font-size: 11px; color: var(--tx-3); letter-spacing: .08em; text-transform: uppercase; margin-top: 10px; }
.article-cta { margin-top: 60px; padding: 40px 36px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 10px; text-align: left; }
.article-cta .h { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 10px; }
.article-cta p { color: var(--tx-2); margin-bottom: 18px; }
.related { margin-top: 80px; padding-top: 40px; border-top: 1px solid var(--line); }
.related-h { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 20px; }
.related-list { display: grid; gap: 10px; }
.related-list a { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: var(--tx); transition: border-color .15s, background .15s; }
.related-list a:hover { border-color: var(--line-b); background: var(--bg-2); }
.related-list .arr { color: var(--or); }

@media (max-width: 720px) {
  .article-main { padding: 48px 22px 80px; }
  .article-body { font-size: 16px; }
  .article-body h2 { font-size: 26px; margin: 40px 0 16px; }
  .stat-block { grid-template-columns: 1fr; }
}