:root{
  --bg:#ffffff;
  --text:#0f1318;
  --muted: rgba(15,19,24,.62);
  --line: rgba(15,19,24,.10);
  --radius: 22px;
}

.blog{
  background: rgba(255,255,255,.98);
  color: var(--text);
  padding: 54px 0 80px;
}
.blog__inner{max-width: 980px}

/* Reading width */
.blog__section{max-width:720px}
.blog__section .blog__callout{max-width:720px}
.blog__section p,.blog__section ul,.blog__section ol{line-height:1.6}
.blog__section h1,.blog__section h2,.blog__section h3{font-weight:600}
.blog__hero{padding-bottom: 18px; border-bottom: 1px solid var(--line)}
.blog__hero .kicker{color: var(--muted)}
.blog__hero .lead{color: rgba(15,19,24,.84)}

.blog__section{margin-top: 24px}
.blog__section .h2{color: rgba(15,19,24,.90); font-size: clamp(20px, 2.2vw, 28px)}
.blog__section p{color: rgba(15,19,24,.86); line-height: 1.65}
.blog__section ul{color: rgba(15,19,24,.86); line-height: 1.65}

.blog__callout{margin-top: 18px; padding: 16px; border:1px solid var(--line); border-radius: var(--radius); background: rgba(0,0,0,.01)}
.blog__callout .h3{margin:0; color: rgba(15,19,24,.92)}
.blog__callout p{margin: 8px 0 0}

.blog__links{margin-top: 14px; display:flex; flex-wrap:wrap; gap:8px}
.blog__links a{display:inline-flex; align-items:center; padding:8px 10px; border-radius:999px; border:1px solid var(--line); text-decoration:none; color: rgba(15,19,24,.84); background: rgba(255,255,255,.92)}

.blog__cta{margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line)}

/* Author bio box (authority, minimal) */
.authorBox{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background: rgba(255,255,255,.92)}
.authorBox__k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color: var(--muted)}
.authorBox__t{margin-top:6px;font-weight:700;color: rgba(15,19,24,.92)}
.authorBox__d{margin-top:6px;color: rgba(15,19,24,.78);line-height:1.6}

/* Blog index cards (minimal, no hover theatrics) */
.blogIndex{margin-top: 18px; display:grid; grid-template-columns: repeat(2, 1fr); gap:12px}
@media (max-width: 900px){.blogIndex{grid-template-columns:1fr}}
.blogCard{display:block; padding:14px; border-radius: var(--radius); background: rgba(255,255,255,.92); border:1px solid var(--line); text-decoration:none}
.blogCard__k{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color: var(--muted)}
.blogCard__t{margin-top:8px; font-size:18px; letter-spacing:-.01em; color: rgba(15,19,24,.92)}
.blogCard__d{margin-top:8px; color: rgba(15,19,24,.78); line-height:1.6}