/* Article presentation: prose width, article header, reusable editorial components
   (docs/DESIGN-SYSTEM.md §4). Components are semantic classes; content never carries inline styling. */
.article-header { display: grid; gap: var(--space-3); padding-block: var(--space-5) var(--space-4); border-bottom: var(--rule); margin-bottom: var(--space-5); }
.article-header__title { font-size: var(--fs-6); text-transform: uppercase; line-height: var(--lh-tight); max-width: 20ch; }
.article-header__deck { font-size: var(--fs-3); color: var(--ink-2); max-width: var(--prose-max); }
.article-header__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.article-header__media { margin-top: var(--space-4); }
.article-header__media figcaption { font-size: var(--fs-0); color: var(--ink-3); padding-top: var(--space-2); }

.prose { max-width: var(--prose-max); font-size: 1.125rem; line-height: 1.65; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--fs-4); text-transform: uppercase; margin-top: 2em; }
.prose h3 { font-size: var(--fs-3); margin-top: 1.6em; }
.prose p:first-of-type::first-letter { font-family: var(--font-display); font-size: 3.4em; line-height: 0.8; float: left; padding: 0.08em 0.12em 0 0; color: var(--red); }
.prose img { border: var(--rule); }
.prose figure { margin: 1.5em 0; }
.prose figcaption { font-size: var(--fs-0); color: var(--ink-3); padding-top: var(--space-2); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 0.35em; }
.prose blockquote { margin: 1.5em 0; padding-left: var(--space-4); border-left: 4px solid var(--red); font-style: italic; color: var(--ink-2); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-1); }
.prose th, .prose td { text-align: left; padding: 0.5em 0.6em; border-bottom: var(--rule-thin); }
.prose th { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; }
.prose .wp-caption { max-width: 100%; }
.prose iframe { max-width: 100%; }

/* Pull quote */
.pullquote { border-top: var(--rule); border-bottom: var(--rule); padding: var(--space-4) 0; margin: 2em 0; font-family: var(--font-display); font-size: var(--fs-4); text-transform: uppercase; line-height: 1.1; }
.pullquote cite { display: block; margin-top: var(--space-2); font-family: var(--font-body); font-style: normal; font-size: var(--fs-0); text-transform: none; color: var(--ink-3); }

/* Gangster Fact */
.gangster-fact { background: var(--ink); color: var(--paper-2); padding: var(--space-5); margin: 2em 0; border-left: 6px solid var(--red); }
.gangster-fact__label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--red); font-size: var(--fs-0); }
.gangster-fact__label::before { content: "\2605\00a0"; }
.gangster-fact p { margin: var(--space-2) 0 0; }

/* Gear Snapshot / Tone Settings / Key Facts share a table-like frame */
.fact-box { border: var(--rule); background: var(--paper-2); margin: 2em 0; }
.fact-box__head { background: var(--ink); color: var(--paper-2); padding: var(--space-2) var(--space-4); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-1); }
.fact-box__head b { color: var(--accent, var(--gold)); font-weight: inherit; }
.fact-box dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.4em var(--space-4); padding: var(--space-4); margin: 0; }
.fact-box dt { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-0); color: var(--ink-3); }
.fact-box dd { margin: 0; }
.gear-snapshot { --accent: var(--gold); }
.tone-settings { --accent: var(--teal); }
.tone-settings dd { font-variant-numeric: tabular-nums; }
.key-facts { --accent: var(--red); }

/* Related blocks under the article */
.related { margin-top: var(--space-7); }
.related__title { font-size: var(--fs-4); text-transform: uppercase; border-bottom: var(--rule); padding-bottom: var(--space-2); margin-bottom: var(--space-4); }

/* Source / evidence footer */
.sources { margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--rule-thin); font-size: var(--fs-0); color: var(--ink-3); }
.sources ol { padding-left: 1.2em; }