/* =============================================================================
   blog.css — GEX Levels blog (index + posts)
   Scoped under body.page-blog so it only affects /blog and /blog/*. Reuses the
   landing-2026 design tokens (--ld-bg, --ld-ink, --ld-gold, --ld-sp-*, etc.)
   defined in landing.css, which must be loaded before this file on every blog
   page (same convention as the other page-specific stylesheets on this site).
   ========================================================================== */

/* ----- Post hero breadcrumb -------------------------------------------------- */
body.page-blog .ld-eyebrow__link { color: inherit; text-decoration: none; }
body.page-blog .ld-eyebrow__link:hover { text-decoration: underline; }

/* ----- Post index grid ----------------------------------------------------- */
body.page-blog .ld-blog-grid {
  display: grid;
  gap: var(--ld-sp-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 780px) {
  body.page-blog .ld-blog-grid { grid-template-columns: 1fr; }
}

body.page-blog .ld-blog-card {
  display: flex;
  flex-direction: column;
  gap: var(--ld-sp-3);
  padding: var(--ld-sp-6) var(--ld-sp-5);
  border: 1px solid var(--ld-line);
  border-radius: var(--ld-r-3);
  background: var(--ld-surface);
  text-decoration: none;
  transition: border-color 180ms var(--ld-ease), transform 180ms var(--ld-ease);
}
body.page-blog .ld-blog-card:hover {
  border-color: var(--ld-line-2);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  body.page-blog .ld-blog-card:hover { transform: none; }
}
body.page-blog .ld-blog-card__meta {
  font-family: var(--ld-font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ld-ink-fade);
}
body.page-blog .ld-blog-card__title {
  margin: 0;
  font-size: 20px;
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--ld-ink);
}
body.page-blog .ld-blog-card__excerpt {
  margin: 0;
  color: var(--ld-ink-dim);
  font-size: 14.5px;
  line-height: 1.6;
}
body.page-blog .ld-blog-card__read {
  margin-top: auto;
  color: var(--ld-gold);
  font-size: 13.5px;
  font-weight: 600;
}

/* ----- Article body --------------------------------------------------------- */
body.page-blog .ld-article {
  max-width: 720px;
  margin: 0 auto;
}
body.page-blog .ld-article__meta {
  display: flex;
  gap: var(--ld-sp-3);
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--ld-font-mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ld-ink-fade);
  margin: 0 0 var(--ld-sp-4);
}
body.page-blog .ld-article__lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ld-ink-dim);
  margin: 0 0 var(--ld-sp-6);
}
body.page-blog .ld-article h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ld-ink);
  margin: var(--ld-sp-8) 0 var(--ld-sp-3);
}
body.page-blog .ld-article h3 {
  font-size: 18px;
  line-height: 1.3;
  color: var(--ld-ink);
  margin: var(--ld-sp-6) 0 var(--ld-sp-2);
}
body.page-blog .ld-article p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ld-ink-dim);
  margin: 0 0 var(--ld-sp-4);
}
body.page-blog .ld-article strong { color: var(--ld-ink); font-weight: 600; }
body.page-blog .ld-article em { color: var(--ld-ink); font-style: italic; }
body.page-blog .ld-article a {
  color: var(--ld-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.page-blog .ld-article ul,
body.page-blog .ld-article ol {
  margin: 0 0 var(--ld-sp-4);
  padding-left: 1.3em;
  color: var(--ld-ink-dim);
  font-size: 16px;
  line-height: 1.7;
  display: grid;
  gap: 6px;
}
body.page-blog .ld-article li::marker { color: var(--ld-gold); }
body.page-blog .ld-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--ld-sp-5);
  font-size: 14.5px;
}
body.page-blog .ld-article th,
body.page-blog .ld-article td {
  border: 1px solid var(--ld-line);
  padding: 10px 12px;
  text-align: left;
  color: var(--ld-ink-dim);
  vertical-align: top;
}
body.page-blog .ld-article th {
  color: var(--ld-ink);
  font-weight: 600;
  background: var(--ld-surface);
}
body.page-blog .ld-article hr {
  border: 0;
  border-top: 1px solid var(--ld-line);
  margin: var(--ld-sp-7) 0;
}
body.page-blog .ld-article-nav {
  display: flex;
  gap: var(--ld-sp-3);
  flex-wrap: wrap;
  margin-top: var(--ld-sp-6);
}

@media (max-width: 640px) {
  body.page-blog .ld-article h2 { margin-top: var(--ld-sp-6); }
}