:root { --article-ink: #0f172a; --article-mid: #475569; }
html { scroll-behavior: auto; }
body { background: var(--bg-light); }
.skip-link { position:absolute; left:24px; top:-80px; padding:12px 18px; background:white; z-index:10; }
.skip-link:focus { top:12px; outline:3px solid var(--accent); }
.preview-header { background:white; border-bottom:1px solid var(--border); }
.preview-header-inner { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.preview-brand { display:flex; align-items:center; gap:22px; min-width:0; }
.preview-brand img { flex-shrink:0; width:160px; height:40px; object-fit:contain; }
.preview-brand-text { border-left:1px solid var(--border); padding-left:22px; line-height:1.5; color:var(--primary); }
.preview-brand-text span { display:block; font-size:14px; font-weight:600; }
.preview-brand-text small { font-size:12px; color:var(--text-mid); }
.preview-status { color:var(--text-mid); font-size:12px; white-space:nowrap; }
.articles-hero { padding:65px 0 69px; color:white; background:var(--metallic-blue-gradient); text-align:center; }
.hero-eyebrow { display:block; font-family:'Inter',sans-serif; color:#a8dbf5; font-size:12px; font-weight:700; letter-spacing:.16em; margin-bottom:16px; }
.articles-hero h1 { color:white; font-size:clamp(32px,4vw,44px); font-weight:700; letter-spacing:.025em; line-height:1.3; margin:0; }
.articles-section { padding:48px 0 72px; }
.articles-heading { display:flex; align-items:center; justify-content:flex-start; gap:20px; margin-bottom:26px; }
.articles-heading h2 { color:var(--primary); font-size:25px; font-weight:700; line-height:1.4; flex-shrink:0; white-space:nowrap; }
.articles-heading label { font:inherit; color:inherit; margin:0; }
.articles-heading select { width:160px; flex:0 0 160px; min-height:44px; max-width:100%; padding:9px 36px 9px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:white; color:var(--primary); font:inherit; font-size:15px; cursor:pointer; }
.articles-heading select:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.article-card[hidden] { display:none; }
.articles-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; align-items:stretch; }
.article-card { min-width:0; border:1px solid var(--border); border-radius:var(--radius-sm); background:white; box-shadow:0 8px 24px rgba(15,23,42,.035); }
.article-card-link { display:flex; flex-direction:column; height:100%; border-radius:var(--radius-sm); transition:box-shadow .2s,border-color .2s; }
.article-card-link:hover { box-shadow:0 12px 28px rgba(15,23,42,.1); }
.article-card-link:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.article-image { aspect-ratio:16 / 9; background:#f1f5f9; overflow:hidden; border-radius:7px 7px 0 0; border-bottom:1px solid var(--border); }
.article-image img { width:100%; height:100%; object-fit:cover; }
.article-image--poc { background:#102b4f; }
.article-image--poc img,.article-image--diagram img { object-fit:contain; }
.article-image--diagram { background:white; padding:12px; }
.article-card-body { display:flex; flex:1; flex-direction:column; gap:18px; padding:22px; }
.article-card h3 { margin:0; color:var(--article-ink); font-size:21px; font-weight:700; line-height:1.55; overflow-wrap:anywhere; }
.article-read { display:flex; align-items:center; gap:12px; min-height:44px; margin-top:auto; color:var(--primary); font-size:14px; font-weight:700; }
.article-read span { font-size:20px; }
.preview-footer { border-top:1px solid var(--border); background:white; padding:26px 0; color:var(--text-mid); font-size:13px; }
.preview-footer span { margin-left:12px; }
@media (max-width:960px) { .articles-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } }
@media (max-width:600px) {
 .container { padding-left:20px; padding-right:20px; }
 .preview-header-inner { min-height:72px; gap:12px; }
 .preview-brand { gap:12px; }
 .preview-brand img { width:128px; height:32px; }
 .preview-brand-text { display:none; }
 .articles-hero { padding:42px 0 46px; }
 .hero-eyebrow { font-size:10px; letter-spacing:.1em; margin-bottom:14px; }
 .articles-hero h1 { font-size:32px; }
 .articles-section { padding:32px 0 48px; }
 .articles-heading { margin-bottom:22px; }
 .articles-heading h2 { font-size:23px; }
 .articles-grid { grid-template-columns:minmax(0,1fr); gap:24px; }
 .article-card-body { padding:20px; gap:14px; }
 .article-card h3 { font-size:21px; }
 .preview-footer span { display:block; margin-left:0; }
}
@media (prefers-reduced-motion:reduce) { a,.article-card-link { transition:none; } }