.article-directory { width:min(100% - 30px,1140px); margin:46px auto 70px; }
.article-directory-hero { padding:clamp(32px,7vw,76px); border-radius:28px; color:white; background:radial-gradient(circle at 88% 20%,rgba(24,183,207,.55),transparent 24%),linear-gradient(135deg,#071a3d,#1463ff); box-shadow:0 25px 70px rgba(16,36,73,.16); }
.article-directory-hero p { margin:0 0 12px; color:#8ce9f2; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.article-directory-hero h1 { max-width:760px; margin:0; color:white; font-size:clamp(34px,5vw,62px); }
.article-directory-hero span { display:block; max-width:690px; margin-top:20px; color:#dce8fc; font-size:clamp(16px,2vw,20px); }
.article-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; margin-top:32px; }
.article-card { overflow:hidden; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 14px 42px rgba(16,36,73,.08); }
.article-card > img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.article-card-copy { display:flex; min-height:280px; flex-direction:column; padding:25px; }
.article-card-type { margin:0 0 10px; color:var(--blue); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.article-card h2 { margin:0; color:var(--navy); font:700 25px/1.2 "Space Grotesk",sans-serif; }
.article-card h2 a { color:inherit; text-decoration:none; }
.article-card-copy > p:not(.article-card-type) { color:var(--muted); }
.article-card-link { margin-top:auto; color:var(--blue); font-weight:800; text-decoration:none; }
.article-empty { margin-top:32px; padding:40px; border:1px dashed var(--line); border-radius:20px; background:#fff; text-align:center; }
@media (max-width:600px) { .article-directory { margin-top:20px; } .article-directory-hero { border-radius:20px; } .article-card-copy { min-height:0; } }