/* Hero lead — widened to match h1's max-width (560px) so longer article
     summaries wrap the same number of lines as the homepage hero, keeping
     hero height consistent (736px) across all blog pages. Desktop only —
     unscoped this used to also win on mobile (same specificity, later in
     the cascade than base.css's own mobile rule) and silently stretched
     the mobile lead panel to 560px instead of the intended 220px. */
  @media(min-width:861px){ .hero p.lead{max-width:560px;} }

  /* Article inline photo (e.g. mid-article illustration) */
  .article-inline-photo{max-width:72ch;margin:36px auto;border-radius:var(--radius);overflow:hidden;}
  .article-inline-photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;}
  .article-inline-photo figcaption{margin-top:10px;font-size:13px;color:var(--muted);text-align:center;}

  /* Blog article typography */
  .article-body{max-width:72ch;margin:0 auto;}
  .article-body h2{font-size:26px;margin:44px 0 16px;}
  .article-body h2:first-child{margin-top:0;}
  .article-body p{color:var(--muted);font-size:16px;line-height:1.75;margin:0 0 18px;}
  .article-body ul{color:var(--muted);font-size:16px;line-height:1.75;margin:0 0 18px;padding-left:22px;}
  .article-body li{margin-bottom:8px;}
  .article-meta{color:var(--gold);font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;}
  .article-cta{
    background:var(--navy);color:#f2f0e8;border-radius:var(--radius);
    padding:32px;margin:40px 0;max-width:72ch;
  }
  .article-cta h3{margin:0 0 10px;color:#fff;font-size:20px;}
  .article-cta p{color:#cdd8e6;margin:0 0 18px;font-size:15px;line-height:1.6;}
  /* .btn.primary is styled for light cards (translucent gold on white,
     navy text) — on this dark navy block that text is nearly invisible.
     Give it a solid, high-contrast look here instead. */
  .article-cta .btn.primary{background:var(--gold);border-color:var(--gold);color:#151b12;}
  .article-cta .btn.primary:hover{background:#dab662;border-color:#dab662;}
  .article-cta .btn.primary:active{background:#c9a24b;border-color:#c9a24b;}
  .blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;}
  .blog-card{
    background:var(--paper);border:1px solid var(--divider);border-radius:var(--radius);
    padding:26px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;
  }
  .blog-card .article-meta{margin-bottom:0;}
  .blog-card h3{font-size:19px;margin:0;color:var(--ink);}
  .blog-card p{color:var(--muted);font-size:14px;line-height:1.55;margin:0;}
  .blog-card .read-more{font-size:13px;color:var(--accent);font-weight:600;margin-top:auto;}