/* Case Files (article pages + index). Uses the site's tokens from style.v*.css, so a rebrand carries over. */
.article-wrap { max-width: 760px; }

.article-head {
  background: var(--tan-light);
  border-bottom: 1px solid var(--line);
  padding-block: var(--space-lg) var(--space-md);
}
.crumbs { font-size: var(--fs-small); color: var(--ink-soft); }
.crumbs a { color: var(--navy); font-weight: 600; text-decoration: none; }
.crumbs a:hover { color: var(--brass-dark); text-decoration: underline; }
.crumbs span { margin-inline: 0.4rem; opacity: 0.6; }
.article-meta {
  margin: var(--space-md) 0 0.6rem;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass-dark);
}
.article-head h1 { font-size: var(--fs-h2); color: var(--navy); line-height: 1.04; }

.article-body { padding-block: var(--space-lg) var(--space-md); font-size: 1.0625rem; line-height: 1.7; }
.article-body p, .article-body li { color: var(--ink); }
.article-body p { margin: 0 0 1.15rem; }
.article-body h2 {
  font-family: var(--font-body); text-transform: none; font-weight: 800;
  font-size: 1.45rem; line-height: 1.25; color: var(--navy); margin: 2.2rem 0 0.7rem;
}
.article-body h3 {
  font-family: var(--font-body); text-transform: none; font-weight: 700;
  font-size: 1.2rem; color: var(--navy); margin: 1.8rem 0 0.5rem;
}
.article-body h4 { font-size: 1.05rem; color: var(--navy); margin: 1.4rem 0 0.4rem; font-family: var(--font-body); text-transform: none; font-weight: 700; }
.article-body ul, .article-body ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.article-body li { margin-bottom: 0.45rem; }
.article-body a { color: var(--navy); text-decoration-color: var(--brass); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.article-body a:hover { color: var(--brass-dark); }
.article-body blockquote {
  margin: 1.6rem 0; padding: 0.4rem 0 0.4rem 1.2rem;
  border-left: 4px solid var(--brass); color: var(--ink-soft); font-style: italic;
}
.article-body blockquote p { margin: 0; color: inherit; }
.article-body hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.article-body figure { margin: 1.6rem 0; }
.article-body figure img { width: 100%; height: auto; border-radius: var(--radius); }

.article-cta {
  margin-block: var(--space-md) var(--space-xl);
  padding: var(--space-md);
  background: var(--navy);
  color: var(--tan);
  border-radius: var(--radius);
}
.article-cta h2 { font-size: var(--fs-h3); color: var(--white); }
.article-cta p { margin: 0.7rem 0 1.2rem; color: var(--tan); }
.article-cta .article-cta-areas { margin: 1.2rem 0 0; font-size: var(--fs-small); opacity: 0.9; }
.article-cta .article-cta-areas a { color: var(--tan); }

/* Related + index cards */
.article-more { background: var(--tan-light); padding-block: var(--space-xl); border-top: 1px solid var(--line); }
.article-more h2 { font-size: var(--fs-h3); color: var(--navy); margin-bottom: var(--space-md); }
.article-grid { display: grid; gap: var(--space-md); }
@media (min-width: 780px) { .article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .article-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.article-card {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: var(--space-md);
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--navy);
  text-decoration: none; color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.article-card:hover { border-left-color: var(--brass); transform: translateY(-2px); }
.article-card-date { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--brass-dark); }
.article-card h3 { font-family: var(--font-body); text-transform: none; font-weight: 800; font-size: 1.2rem; line-height: 1.3; color: var(--navy); letter-spacing: normal; }
.article-card p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }
.article-card-more { margin-top: auto; padding-top: 0.4rem; font-weight: 700; color: var(--navy); }
.articles-empty { color: var(--ink-soft); }