/* The journal extends Japston's existing blue heroes, Outfit headings and cards. */
.blog-page { --blog-ink:#173b58; --blog-copy:#496579; --blog-border:#d7e4ee; }
.blog-page .blog-hero { background-size:cover; background-position:center; }
.blog-page .blog-hero h1 > span { display:block; }
.blog-page .blog-latest,.blog-page .blog-reading-layout { margin-top:56px; margin-bottom:64px; }
.blog-page .blog-section-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:26px; }
.blog-page :is(.blog-section-heading,.blog-related) h2 { margin:12px 0 0; color:var(--blog-ink); font-family:Outfit,sans-serif; font-size:clamp(28px,3vw,40px); font-weight:500; letter-spacing:-.035em; }
.blog-page .blog-section-heading > p { color:var(--blog-copy); font-size:14px; margin:0 0 4px; }
.blog-page .blog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
.blog-page .blog-card { overflow:hidden; border:1px solid var(--blog-border); border-radius:26px; background:#fff; box-shadow:0 8px 28px #183b5e07; }
.blog-page .blog-card-photo { display:block; overflow:hidden; background:#e3eef5; }
.blog-page .blog-card-photo img { display:block; width:100%; aspect-ratio:16/9; height:auto; object-fit:cover; transition:transform 220ms ease; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) { .blog-page .blog-card:hover .blog-card-photo img { transform:scale(1.025); } }
.blog-page .blog-card-copy { padding:28px; }
.blog-page .blog-category { display:inline-block; padding:7px 12px; border-radius:20px; color:#245883; background:#eaf3fb; font-size:11px; font-weight:700; letter-spacing:.025em; }
.blog-page .blog-card:nth-child(even) .blog-category { color:#54663c; background:#eef4e6; }
.blog-page .blog-meta { display:flex; align-items:center; flex-wrap:wrap; gap:9px; color:#607386; font-size:12px; line-height:1.6; }
.blog-page .blog-card .blog-meta { margin-top:15px; }
.blog-page .blog-card h3 { margin:12px 0; font-family:Outfit,sans-serif; font-size:clamp(23px,2vw,29px); font-weight:500; line-height:1.22; letter-spacing:-.025em; color:var(--blog-ink); }
.blog-page .blog-card h3 a { color:inherit; text-decoration:none; }
.blog-page .blog-card h3 a:hover { color:#165fc4; }
.blog-page .blog-card-copy > p { color:var(--blog-copy); font-size:14px; line-height:1.8; margin:0 0 20px; }
.blog-page .blog-card .text-link { min-height:44px; color:#185bb4; }
.blog-page .blog-cta { margin-top:60px; margin-bottom:60px; padding:38px 42px; background:#e8eff9; border:1px solid #d2e0ef; color:var(--blog-ink); border-radius:28px; }
.blog-page .blog-cta h2 { color:var(--blog-ink); font-family:Outfit,sans-serif; font-weight:500; letter-spacing:-.03em; font-size:clamp(27px,3vw,38px); margin:12px 0; }
.blog-page .blog-cta p { color:var(--blog-copy); max-width:660px; margin:0; line-height:1.8; }
.blog-page .blog-cta .section-label { color:#3e6687; }
.blog-page .blog-cta .button { flex-shrink:0; background:#165fc4; color:#fff; border-color:#165fc4; }
.blog-page .blog-byline { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; margin-top:25px; font-size:13px; color:#355975; }
.blog-page .blog-reading-layout { display:grid; grid-template-columns:240px minmax(0,760px); gap:clamp(28px,5vw,80px); justify-content:center; align-items:start; }
.blog-page .blog-sidebar { position:sticky; top:132px; }
.blog-page .blog-toc { background:#f3f7fb; border:1px solid var(--blog-border); border-radius:20px; padding:21px 17px; }
.blog-page .blog-toc h2 { font:500 19px/1.3 Outfit,sans-serif; color:var(--blog-ink); margin:0 9px 14px; }
.blog-page .blog-toc a { display:block; border-radius:9px; padding:11px 9px; font-size:13px; line-height:1.55; color:#3d617c; text-decoration:none; min-height:44px; }
.blog-page .blog-toc a:hover { background:#e4edf6; color:#165fc4; }
.blog-page .blog-back { display:inline-flex; align-items:center; min-height:44px; font-size:13px; color:#245883; margin:14px 9px; }
.blog-page .blog-prose { min-width:0; color:#365266; font-size:16px; line-height:1.9; }
.blog-page .blog-prose p { margin:0 0 18px; }
.blog-page .blog-prose .blog-lead { font-size:19px; color:#284c68; line-height:1.8; margin:0 0 26px; }
.blog-page .blog-article-photo { margin:0 0 30px; }
.blog-page .blog-article-photo img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:22px; }
.blog-page .blog-article-photo figcaption { margin-top:12px; font-size:12px; line-height:1.65; color:#657988; }
.blog-page .blog-takeaway { padding:26px 28px; border-radius:20px; background:#e9f1e2; border:1px solid #d8e6cc; margin-bottom:38px; }
.blog-page .blog-takeaway .section-label { color:#486832; font-size:11px; }
.blog-page .blog-takeaway p { margin:12px 0 0; color:#36502c; font-size:17px; line-height:1.7; }
.blog-page .blog-content-section { margin-bottom:36px; scroll-margin-top:135px; }
.blog-page .blog-prose h2 { font-family:Outfit,sans-serif; font-size:29px; font-weight:500; color:var(--blog-ink); line-height:1.25; letter-spacing:-.025em; margin:0 0 17px; }
.blog-page .blog-prose a { color:#165bb0; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; overflow-wrap:anywhere; }
.blog-page .blog-prose a:hover { color:#0a3c7b; text-decoration-thickness:2px; }
.blog-page .blog-prose ul { padding-left:22px; margin:0 0 20px; }
.blog-page .blog-prose li { padding-left:4px; margin-bottom:13px; }
.blog-page .blog-sources { border-top:1px solid var(--blog-border); padding-top:28px; font-size:13px; scroll-margin-top:135px; }
.blog-page .blog-sources h2 { font-size:23px; }
.blog-page .blog-related { margin-top:64px; margin-bottom:64px; }
.blog-page .blog-related > h2 { margin-bottom:25px; }
.blog-page .blog-related .blog-card { display:grid; grid-template-columns:.8fr 1.2fr; }
.blog-page .blog-related .blog-card-photo img { height:100%; min-height:300px; }
.blog-page #latest-articles { scroll-margin-top:130px; }
.blog-page #main :focus-visible { outline:3px solid #2876aa; outline-offset:4px; }
@media(min-width:1001px) {
  .hero-art.interior-polished.solutions-page.blog-page .blog-hero { background-image:var(--intro-sky),var(--intro-readability),url('/assets/project-gallery/aftab-sb-bilal-gunj/rooftop-array-wide.jpg'); }
  .hero-art.interior-polished.blog-page .blog-article-hero { background-image:linear-gradient(115deg,#e9f3fff2,#eaf4f9eb),url('/assets/project-gallery/aftab-sb-bilal-gunj/rooftop-array-wide.jpg'); }
  .blog-page .blog-article-hero .page-intro-grid { display:block; }
  .blog-page .blog-article-hero .company-hero-copy { max-width:1000px; }
  .blog-page .blog-article-hero .page-intro-grid h1 { max-width:970px; font-size:clamp(40px,4vw,55px); }
  .blog-page .blog-article-hero .company-hero-copy > p { max-width:760px; }
}
@media(max-width:1000px) {
  .mobile-app.blog-page .company-hero { background:linear-gradient(120deg,#eaf4fff2,#e3f0ffdf),url('/assets/project-gallery/aftab-sb-bilal-gunj/rooftop-array-wide.jpg') center/cover; }
  .blog-page .blog-latest,.blog-page .blog-reading-layout { margin-top:32px; margin-bottom:38px; }
  .blog-page .blog-section-heading { display:block; margin-bottom:20px; }
  .blog-page .blog-section-heading > p { margin-top:10px; }
  .blog-page .blog-reading-layout { display:flex; flex-direction:column; gap:22px; }
  .blog-page .blog-sidebar { position:static; width:100%; }
  .blog-page .blog-toc { padding:18px 14px; }
  .blog-page .blog-toc a { padding-block:10px; }
  .blog-page .blog-back { margin:8px 0 0; }
  .blog-page .blog-prose { font-size:15px; line-height:1.85; width:100%; }
  .blog-page .blog-prose .blog-lead { font-size:17px; }
  .blog-page .blog-prose h2 { font-size:26px; }
  .blog-page .blog-byline { gap:8px 20px; }
  .blog-page .blog-content-section,.blog-page .blog-sources,.blog-page #latest-articles { scroll-margin-top:105px; }
  .blog-page .blog-cta { display:flex; flex-direction:column; align-items:stretch; gap:24px; padding:26px; margin-top:36px; margin-bottom:36px; }
  .blog-page .blog-related { margin-top:38px; margin-bottom:38px; }
}
@media(max-width:600px) {
  .blog-page .blog-grid { grid-template-columns:1fr; gap:22px; }
  .blog-page .blog-card { border-radius:22px; }
  .blog-page .blog-card-copy { padding:22px; }
  .blog-page .blog-card h3 { font-size:25px; }
  .blog-page .blog-takeaway { padding:22px; }
  .blog-page .blog-related .blog-card { display:block; }
  .blog-page .blog-related .blog-card-photo img { min-height:0; height:auto; }
  .blog-page .blog-article-hero h1 { font-size:30px; }
}