/* ── Article Layout ── */
.article-body { max-width: 800px; margin: 0 auto; }
.article-body p { color: var(--color-text-secondary); line-height: 1.9; margin-bottom: 24px; font-size: 16px; }
.article-body h2 { font-size: 24px; font-weight: 700; color: var(--color-text); margin-top: 56px; margin-bottom: 16px; }
.article-body h3 { font-size: 18px; font-weight: 700; color: var(--color-text); margin-top: 40px; margin-bottom: 12px; }
.article-body ul,
.article-body ol { color: var(--color-text-secondary); line-height: 1.9; margin-bottom: 24px; padding-left: 24px; }
.article-body li { margin-bottom: 8px; }
.article-body strong { color: var(--color-text); }

/* ── Article Meta ── */
.article-meta { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .05em; color: var(--color-text-muted); margin-bottom: 32px; display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.article-tag { display: inline-block; padding: 4px 12px; background: rgba(252,130,0,.08); border: 1px solid rgba(252,130,0,.2); color: var(--color-primary); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }

/* ── Callout Box ── */
.article-callout { background: var(--color-dark-elevated); border-left: 3px solid var(--color-primary); padding: 24px 28px; margin: 32px 0; }
.article-callout p { margin-bottom: 0; font-size: 15px; }
.article-callout strong { color: var(--color-primary); }

/* ── Formula Box ── */
.formula-box { background: var(--color-dark-elevated); border: 1px solid var(--color-dark-subtle); padding: 20px 24px; margin: 24px 0; font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--color-text); overflow-x: auto; }
.formula-block { background: var(--color-dark-elevated); border: 1px solid var(--color-dark-subtle); padding: 20px 24px; margin: 24px 0; font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--color-text); overflow-x: auto; }
.formula-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 12px; }
.formula-note { font-size: 13px; color: var(--color-text-muted); margin-top: 12px; }

/* ── Spec Table ── */
.spec-table { width: 100%; border-collapse: collapse; margin: 24px 0 32px; }
.spec-table th,
.spec-table td { padding: 12px 16px; text-align: left; font-size: 14px; border: 1px solid var(--color-dark-subtle); }
.spec-table th { background: var(--color-dark-elevated); color: var(--color-text); font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.spec-table td { color: var(--color-text-secondary); }
.spec-table tr:hover td { background: rgba(252,130,0,.02); }

/* ── Related Grid ── */
.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 48px; }
.related-card { background: var(--color-dark-elevated); border: 1px solid var(--color-dark-subtle); padding: 20px; text-decoration: none; transition: border-color .2s; }
.related-card:hover { border-color: var(--color-primary); }
.related-card__cat { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 8px; }
.related-card__title { font-size: 15px; font-weight: 600; color: var(--color-text); line-height: 1.4; }

/* ── Event Card (IMS etc.) ── */
.event-card { background: var(--color-dark-elevated); border: 1px solid var(--color-dark-subtle); padding: 28px 32px; margin: 32px 0; }
.event-card__label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 16px; }
.event-card__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.event-card__item { display: flex; flex-direction: column; gap: 4px; }
.event-card__key { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .05em; color: var(--color-text-muted); text-transform: uppercase; }
.event-card__val { font-size: 16px; font-weight: 600; color: var(--color-text); }

/* ── Signal Flow / Flow Note ── */
.signal-flow { background: var(--color-dark-elevated); border: 1px solid var(--color-dark-subtle); padding: 20px 24px; margin: 24px 0; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--color-text); overflow-x: auto; text-align: center; letter-spacing: .02em; }
.flow-note { font-size: 13px; color: var(--color-text-muted); margin-top: 8px; font-style: italic; }

/* ── Section Label ── */
.section-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 8px; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .related-grid { grid-template-columns: 1fr; }
    .event-card__grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .card[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
}