/* BL Guide — article pages */

.article { padding-block: var(--sp-7) var(--band); }
.article__col { width: min(100% - 2.5rem, 720px); margin-inline: auto; }

.article__meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; margin-top: var(--sp-6); }
.article__title { margin-top: var(--sp-4); font-size: clamp(2rem, 4.6vw, 3.6rem); }
.article__lede { margin-top: var(--sp-5); }

.article__hero { margin-block: var(--sp-7); width: min(100% - 2.5rem, 1240px); margin-inline: auto; }
.article__hero img { width: 100%; filter: saturate(0.75) brightness(0.85); }

.prose { font-size: 1.0625rem; line-height: 1.72; color: var(--ink-2); }
.prose > * + * { margin-top: var(--sp-5); }
.prose h2 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.05; letter-spacing: -0.025em;
  color: var(--ink); margin-top: var(--sp-8);
}
.prose h3 {
  font-family: var(--font-data); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mark); margin-top: var(--sp-7);
}
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--ink); box-shadow: inset 0 -1px 0 var(--edge); }
.prose a:hover { box-shadow: inset 0 -2px 0 var(--mark); }
.prose ul { list-style: none; display: grid; gap: var(--sp-3); }
.prose li { display: grid; grid-template-columns: 12px 1fr; gap: var(--sp-3); }
.prose li::before { content: ''; width: 12px; height: 2px; background: var(--mark); margin-top: 0.78em; }

.article__foot { margin-top: var(--sp-8); padding-top: var(--sp-4); border-top: 1px solid var(--edge-soft); }

/* data tables inside guides: scroll sideways on narrow screens instead of breaking the column */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap .spec { min-width: 520px; }
.prose .spec td, .prose .spec th { line-height: 1.5; vertical-align: top; }
.prose nav[aria-label="Breadcrumb"] a, .article__col > nav a { color: var(--ink-2); }