.articles { padding-block: 64px 82px; background-color: #f5f5f4; background-image: radial-gradient(#dededc .7px, transparent .7px); background-size: 14px 14px; line-height: 1.55; }
.articles-inner { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.articles h2 { margin: 0 0 26px; color: #555653; font-size: .88rem; font-weight: 750; letter-spacing: .13em; line-height: 1.2; text-transform: uppercase; }
.article-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.article-card { overflow: hidden; border: 1px solid #e8e8e6; border-radius: 4px; background: #fff; box-shadow: 0 8px 24px rgb(0 0 0 / 8%); transition: transform 160ms ease, box-shadow 160ms ease; }
.article-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgb(231 104 27 / 24%); }
.article-card-link { display: block; color: inherit; text-decoration: none; }
.article-card-link:focus-visible { outline: 3px solid var(--accent); outline-offset: -4px; border-radius: 3px; }
.article-card-image { display: block; width: 100%; aspect-ratio: 16 / 9; background: #e9e7e2; object-fit: cover; }
.article-card-content { padding: 20px 22px 22px; }
.article-card h3 { margin: 0; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.3; letter-spacing: -.025em; }
.article-card:hover h3, .article-card-link:focus-visible h3 { color: var(--accent-dark); }
.article-card-details { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.article-author { display: flex; min-width: 0; align-items: center; gap: 10px; font-size: .78rem; line-height: 1.35; }
.article-author img { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; object-fit: cover; }
.article-author strong, .article-author time { display: block; }
.article-author strong { font-weight: 650; }
.article-author time { margin-top: 2px; color: #777873; font-size: .7rem; }
.article-reading-time { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; color: #777873; font-size: .75rem; white-space: nowrap; }
.article-reading-time svg { width: 14px; height: 14px; }
.article-outcome { margin: 10px 0 0; color: var(--muted); }
.empty-state { margin: 22px 0 0; padding: 22px 24px; border: 1px dashed #c8c5bf; border-radius: 6px; color: var(--muted); }
@media (max-width: 900px) { .article-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .articles { padding-block: 52px 62px; }
  .articles-inner { width: min(100% - 36px, 1120px); }
  .article-list { grid-template-columns: 1fr; }
  .article-card-content { padding: 16px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) { .article-card { transition-duration: .01ms; } }