/* Card-grid index + individual article pages — overlays site.css */

.section-title {
  font-size: 22px; font-weight: 700; margin: 36px 0 4px;
  letter-spacing: -.01em; color: var(--text);
}
.section-sub {
  font-size: 13px; margin: 0 0 18px;
  letter-spacing: .03em;
}
.card-section { padding: 0 0 14px; }

.card-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.article-card {
  display: flex; flex-direction: column;
  background: var(--panel, #14171f);
  border: 1px solid var(--border, rgba(255,255,255,.1));
  border-radius: 12px;
  padding: 20px 22px 18px;
  text-decoration: none;
  color: var(--text, #f0f6ff);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  position: relative;
  overflow: hidden;
  min-height: 220px;
}
.article-card:hover {
  border-color: var(--amber, #fbbf24);
  background: rgba(251,191,36,.04);
  transform: translateY(-2px);
  text-decoration: none;
}
.card-emoji {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 10px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
}
.card-title {
  font-size: 16px; font-weight: 700; margin: 0 0 8px;
  line-height: 1.3; color: var(--text, #f0f6ff);
}
.card-blurb {
  font-size: 13.5px; line-height: 1.55;
  color: var(--dim, #9aa6b8);
  margin: 0 0 14px;
  flex: 1;
}
.card-cta {
  font-size: 12px;
  color: var(--amber, #fbbf24);
  font-weight: 600;
  letter-spacing: .04em;
  margin-top: auto;
  transition: transform .12s ease;
}
.article-card:hover .card-cta { transform: translateX(3px); }

/* Individual article pages */
.article-page {
  max-width: 820px;
  padding: 30px 18px 60px;
}
.back-link { margin: 8px 0 18px; }
.back-link a {
  font-size: 13px; color: var(--dim, #9aa6b8);
  letter-spacing: .03em;
}
.back-link a:hover { color: var(--amber, #fbbf24); }

.article-page .ibe-article {
  background: var(--panel, #14171f);
  border: 1px solid var(--border, rgba(255,255,255,.1));
  border-radius: 14px;
  padding: 28px 32px;
  margin: 0;
  scroll-margin-top: 24px;
}
.article-page .ibe-article header {
  border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.article-page .ibe-article header .pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: rgba(251,191,36,.12); color: var(--amber, #fbbf24);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.article-page .ibe-article h2 {
  font-size: 28px;
  margin: 12px 0 6px;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.article-page .ibe-article .meta {
  color: var(--dim, #9aa6b8);
  font-size: 13px;
  margin: 0;
}
.article-page .ibe-article .lede {
  font-size: 17px;
  color: var(--text, #f0f6ff);
  border-left: 3px solid var(--amber, #fbbf24);
  padding: 4px 0 4px 14px;
  margin: 0 0 16px;
  font-style: italic;
  line-height: 1.6;
}
.article-page .ibe-article p,
.article-page .ibe-article li {
  line-height: 1.75;
  color: var(--text, #f0f6ff);
  font-size: 16px;
}
.article-page .ibe-article p { margin: 0 0 14px; }
.article-page .ibe-article h3 {
  margin: 26px 0 10px;
  font-size: 19px;
  color: var(--amber, #fbbf24);
}
.article-page .ibe-article ul { margin: 0 0 14px 22px; }
.article-page .ibe-article ul li { margin-bottom: 6px; }
.article-page .ibe-article .callout {
  background: rgba(251,191,36,.06);
  border: 1px solid rgba(251,191,36,.25);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 18px 0;
}
.article-page .ibe-article .callout strong { color: var(--amber, #fbbf24); }
.article-page .ibe-article .share-row {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 14px;
  border-top: 1px solid var(--border, rgba(255,255,255,.08));
}
.article-page .ibe-article .share-row a {
  font-size: 12px; padding: 6px 10px; border-radius: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border, rgba(255,255,255,.1));
  color: var(--dim, #9aa6b8);
}
.article-page .ibe-article .share-row a:hover {
  color: var(--amber, #fbbf24);
  border-color: var(--amber, #fbbf24);
  text-decoration: none;
}

.eyebrow {
  color: var(--amber, #fbbf24);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin: 0 0 8px;
}