/* ==========================================================================
   Articles — maps the Bootstrap markup used inside articles onto the identity.
   Loaded after Bootstrap and before styles.css, scoped to .article-shell.
   ========================================================================== */

.article-shell {
    --bs-body-color: #0e0e0d;
    --bs-body-bg: transparent;
    --bs-secondary-color: #6d6b64;
    --bs-border-color: #d6d1c4;
    --bs-link-color-rgb: 14, 14, 13;
    --bs-link-hover-color-rgb: 214, 58, 18;
    padding: clamp(40px, 6vw, 72px) 0 clamp(64px, 8vw, 104px);
}
.article-shell .container { max-width: 1200px; padding-left: 24px; padding-right: 24px; }
@media (max-width: 600px) { .article-shell .container { padding-left: 16px; padding-right: 16px; } }
.article-shell .col-lg-10 { max-width: 880px; flex: 0 0 auto; width: 100%; }
.article-shell .row.justify-content-center > .col-lg-10 { margin: 0 auto; }

/* Type */
.article-shell h2, .article-shell .h1, .article-shell h2.h1 {
    font-family: var(--font-display); font-weight: 400 !important; font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    line-height: 1.08; letter-spacing: -0.01em; margin-top: 8px;
}
.article-shell h3, .article-shell .h3, .article-shell .h4, .article-shell h4 {
    font-family: var(--font-display); font-weight: 400 !important; font-size: 1.6rem; line-height: 1.15;
}
.article-shell h5, .article-shell .h5, .article-shell h6 {
    font-family: var(--font-body); font-weight: 600 !important; font-size: 1.05rem; line-height: 1.35;
}
.article-shell .fw-bold { font-weight: 600 !important; }
.article-shell p, .article-shell li { color: var(--ink-2); }
.article-shell .lead { font-size: 1.2rem; line-height: 1.6; font-weight: 400; color: var(--ink); }
.article-shell .text-muted { color: var(--muted) !important; }
.article-shell .text-dark { color: var(--ink) !important; }
.article-shell .text-white { color: var(--on-ink) !important; }
.article-shell a { color: var(--ink); text-decoration-color: var(--signal); text-underline-offset: 3px; }
.article-shell a:hover { color: var(--signal); }
.article-shell .text-decoration-none { text-decoration: none; }

/* Colour utilities collapse onto ink + signal */
.article-shell .text-primary, .article-shell .text-danger, .article-shell .text-warning,
.article-shell .text-info, .article-shell .text-success { color: var(--signal) !important; }
.article-shell [class*="bg-"][class*="-subtle"], .article-shell .bg-light, .article-shell .bg-light-custom,
.article-shell .bg-primary, .article-shell .bg-opacity-10, .article-shell .bg-gradient-subtle { background: transparent !important; }
.article-shell .bg-primary.bg-opacity-10 { border: 1px solid var(--rule); color: var(--signal) !important; }
.article-shell .shadow-sm, .article-shell .shadow, .article-shell .shadow-lg { box-shadow: none !important; }
.article-shell [class*="rounded"] { border-radius: 0 !important; }
.article-shell .hover-lift:hover { transform: none; }

/* Badges become mono tags */
.article-shell .badge {
    font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted) !important; background: transparent !important; border: 1px solid var(--rule); border-radius: 0; padding: 6px 10px;
}

/* Cards and panels become ruled boxes */
.article-shell .card,
.article-shell .toc-card,
.article-shell .capability-signal-panel,
.article-shell .capability-toc,
.article-shell .evidence-strip,
.article-shell .destination-card,
.article-shell .boardroom-test,
.article-shell .scenario-card,
.article-shell .measure-card,
.article-shell .insight-card,
.article-shell .references-panel {
    background: transparent !important; border: 1px solid var(--rule) !important; border-radius: 0 !important; box-shadow: none !important;
}
.article-shell .insight-card, .article-shell .scenario-card, .article-shell .measure-card { height: 100%; padding: 1.75rem; }
.article-shell .card:hover { border-color: var(--ink) !important; }
.article-shell .capability-signal-panel, .article-shell .boardroom-test { border-left: 2px solid var(--signal) !important; }
.article-shell .toc-card h4, .article-shell .capability-toc h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.article-shell .capability-toc-icon { display: none; }
.article-shell .toc-card a { text-decoration: none; }

.article-shell .article-blockquote {
    border-left: 2px solid var(--signal); margin: 0 0 2rem; padding: 4px 0 4px 24px; background: none;
    font-family: var(--font-display); font-size: 1.6rem; line-height: 1.25; color: var(--ink); font-style: normal;
}
.article-shell .section-divider { border-bottom: 1px solid var(--ink) !important; }
.article-shell .section-number, .article-shell .framework-number {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--signal); font-weight: 500;
}

/* Dark framework panel */
.article-shell .outcome-framework { background: var(--ink) !important; color: var(--on-ink); border: 0; }
.article-shell .outcome-framework h3, .article-shell .outcome-framework h4, .article-shell .outcome-framework h5 { color: var(--on-ink); }
.article-shell .framework-step { border: 1px solid var(--on-ink-rule); padding: 1.5rem; height: 100%; }
.article-shell .framework-number { display: inline-block; margin-bottom: .9rem; color: var(--signal-on-ink); }
.article-shell .outcome-framework .text-muted, .article-shell .outcome-framework p { color: var(--on-ink-muted) !important; }

.article-shell .evidence-stat { font-family: var(--font-mono); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 500; letter-spacing: -.03em; line-height: 1; color: var(--signal); margin-bottom: .5rem; }
.article-shell .insight-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule); color: var(--signal); margin-bottom: 1rem; }

.article-shell .references-list { list-style: none; padding: 0; }
.article-shell .references-list li { padding: .6rem 0 .6rem 1.1rem; border-bottom: 1px solid var(--rule-soft); font-size: .92rem; color: var(--muted); position: relative; }
.article-shell .references-list li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 6px; height: 6px; background: var(--signal); }

/* "Keep moving" concentric graphic */
.article-shell .destination-graphic { position: relative; width: 220px; height: 220px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.article-shell .destination-ring { position: absolute; border-radius: 999px; border: 1px solid var(--ink); }
.article-shell .destination-ring-one { width: 220px; height: 220px; border-style: dashed; border-color: var(--rule); }
.article-shell .destination-ring-two { width: 156px; height: 156px; border-color: var(--rule); }
.article-shell .destination-ring-three { width: 96px; height: 96px; }
.article-shell .destination-core {
    position: relative; width: 84px; height: 84px; border-radius: 999px; background: var(--signal); color: #fff;
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; padding: 8px;
}

/* Icons */
.article-shell .fas, .article-shell .far, .article-shell .fab { color: var(--signal); }

/* Article header */
.article-head .meta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.article-head .display { font-size: clamp(2.4rem, 5.4vw, 4.4rem); max-width: 18em; }