/* Blog styles — extends /assets/css/styles.css (tokens, fonts, nav, foot, finalcta, cookie) */

/* HEAD of list page */
.blog-hero{background:var(--blue); color:var(--white); position:relative; overflow:hidden; padding:64px 0 0 0;}
.blog-hero-inner{display:grid; grid-template-columns:1fr 320px; gap:48px; align-items:end; padding-bottom:56px;}
.blog-hero .eyebrow{color:rgba(255,255,255,0.6);}
.blog-hero h1{font-size:clamp(40px,7vw,92px); line-height:0.98; text-transform:uppercase; color:var(--lime); margin-top:18px;}
.blog-hero h1 span{color:var(--white);}
.blog-hero p{font-size:16px; line-height:1.6; color:rgba(255,255,255,0.82); margin:0;}
.blog-hero .spark-big{position:absolute; right:-40px; top:-30px; width:220px; height:220px; opacity:0.9;}
.blog-cats{background:var(--lime); transform:skewY(-1.2deg); margin:0 -2px -10px -2px;}
.blog-cats-inner{display:flex; gap:10px 26px; padding:14px 40px; max-width:1160px; margin:0 auto; transform:skewY(1.2deg); overflow-x:auto; white-space:nowrap;}
.blog-cats a{font-size:14px; font-weight:700; letter-spacing:0.02em; text-transform:uppercase; color:var(--graphite); opacity:0.6;}
.blog-cats a.on, .blog-cats a:hover{opacity:1; color:var(--graphite); border-bottom:2px solid var(--graphite);}

/* COVER (placeholder fills; real covers are PNG rendered by the cover pipeline) */
.cover{position:relative; display:block; overflow:hidden; aspect-ratio:16/10; background:var(--blue);}
.cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; margin:0;}

.featured .cover img{object-position:70% 50%;}

/* FEATURED */
.featured{display:grid; grid-template-columns:1.25fr 1fr; background:var(--graphite); color:var(--white); margin-top:56px;}
.featured .cover{aspect-ratio:auto; min-height:360px;}
.featured-body{padding:40px 40px 36px 40px; display:flex; flex-direction:column; justify-content:space-between; gap:24px;}
.featured-body h2{font-size:clamp(26px,3vw,38px); line-height:1.12; color:var(--white); margin-top:14px;}
.featured-body h2 a{color:var(--white);}
.featured-body h2 a:hover{color:var(--lime);}
.featured-body p{font-size:16px; line-height:1.6; color:rgba(255,255,255,0.78); margin:16px 0 0 0;}
.meta{font-size:13px; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
.featured .meta{color:rgba(255,255,255,0.55);}
.more{font-weight:600; font-size:15px; color:var(--lime);}
.more:hover{color:var(--white);}

/* GRID — first card in each row of 3 is a size accent via .wide */
.postgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:44px 32px; margin-top:64px; align-items:start;}
.post .cover{margin-bottom:18px;}
.post h3{font-family:"Akzidenz",sans-serif; font-weight:600; font-size:21px; line-height:1.28; margin:10px 0 10px 0; color:var(--graphite);}
.post h3 a{color:var(--graphite);}
.post h3 a:hover{color:var(--blue);}
.post p{font-size:15px; line-height:1.6; color:#4b4d52; margin:0 0 12px 0;}
.tag-cat{display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--blue); border-bottom:2px solid var(--lime);}
.featured .tag-cat{color:var(--lime); border-color:var(--lime);}
.post.wide{grid-column:span 2; display:grid; grid-template-columns:1.2fr 1fr; gap:28px; align-items:center;}
.post.wide .cover{margin:0;}

/* subscribe strip */
.subscribe{background:var(--warm); margin-top:80px;}
.subscribe-inner{display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; padding:48px 40px;}
.subscribe h2{font-size:clamp(24px,3vw,34px); max-width:560px; line-height:1.15;}
.subscribe p{margin:12px 0 0 0; font-size:16px; color:#4b4d52; max-width:520px;}

/* ARTICLE */
.article-head{padding-top:56px; padding-bottom:32px;}
.crumbs{font-size:13px; color:var(--muted); margin-bottom:22px;}
.crumbs a{color:var(--muted);}
.crumbs a:hover{color:var(--blue);}
.article-head h1{font-size:clamp(32px,5vw,58px); line-height:1.04; color:var(--graphite); margin:16px 0 22px 0;}
.article-head .lede{font-size:20px; line-height:1.55; color:#3a3c40; margin:0 0 22px 0;}
.article-head .meta{font-size:14px;}
.article-cover{max-width:1160px; margin:0 auto; padding:0 40px;}
.article-cover .cover{aspect-ratio:21/9;}
.prose{padding:48px 0 24px 0;}
.prose p, .prose li{font-size:18px; line-height:1.72; color:#2f3135;}
.prose p{margin:0 0 22px 0;}
.prose h2{font-size:clamp(26px,3vw,34px); line-height:1.15; margin:52px 0 18px 0; color:var(--graphite);}
.prose h3{font-family:"Akzidenz",sans-serif; font-weight:600; font-size:22px; margin:36px 0 12px 0;}
.prose ul, .prose ol{margin:0 0 24px 0; padding-left:24px;}
.prose li{margin-bottom:8px;}
.prose a{color:var(--blue); border-bottom:2px solid var(--lime);}
.prose a:hover{background:var(--lime); color:var(--graphite);}
.prose blockquote{margin:32px 0; padding:6px 0 6px 24px; border-left:6px solid var(--lime); font-size:21px; line-height:1.5; color:var(--graphite);}
.prose code{background:var(--warm); padding:2px 6px; font-size:0.9em;}
.prose pre{background:var(--graphite); color:#fff; padding:20px; overflow-x:auto; font-size:14px; line-height:1.55; margin:0 0 24px 0;}
.prose pre code{background:none; padding:0;}
.prose img{max-width:100%; height:auto; display:block; margin:28px 0;}
.prose table{border-collapse:collapse; width:100%; margin:0 0 24px 0; font-size:16px;}
.prose th, .prose td{border-bottom:1px solid #e6e4dc; padding:10px 12px; text-align:left;}
.prose th{background:var(--warm);}
.keypoints{background:var(--warm); border-left:6px solid var(--blue); padding:24px 28px; margin:0 0 40px 0;}
.keypoints .eyebrow{color:var(--blue);}
.keypoints ul{margin:12px 0 0 0; padding-left:20px;}
.keypoints li{font-size:17px; line-height:1.6; margin-bottom:6px;}

.author{display:flex; gap:20px; align-items:center; border-top:1px solid #e6e4dc; border-bottom:1px solid #e6e4dc; padding:28px 0; margin:24px 0 8px 0;}
.author img{width:84px; height:84px; object-fit:cover; filter:grayscale(1); border-radius:50%; flex:0 0 auto;}
.author b{display:block; font-size:17px;}
.author span{font-size:15px; line-height:1.55; color:#4b4d52;}

.related{padding-top:64px; padding-bottom:24px;}
.related h2{font-size:clamp(24px,3vw,32px); margin-bottom:28px;}

@media (max-width:900px){
  .foot-links{flex-wrap:wrap; gap:10px 22px;}
  .subscribe-inner{padding:36px 20px;}
  .blog-hero-inner{grid-template-columns:1fr; gap:20px;}
  .blog-hero .spark-big{width:130px; height:130px; right:-20px; top:-10px;}
  .featured{grid-template-columns:1fr;}
  .featured .cover{min-height:0; aspect-ratio:16/10;}
  .featured-body{padding:28px 24px;}
  .postgrid{grid-template-columns:1fr; gap:40px;}
  .post.wide{grid-column:auto; grid-template-columns:1fr; gap:0;}
  .post.wide .cover{margin-bottom:18px;}
  .blog-cats-inner{padding:14px 20px;}
  .article-cover{padding:0 20px;}
  .article-cover .cover{aspect-ratio:16/10;}
  .prose p, .prose li{font-size:17px;}
  .article-head .lede{font-size:18px;}
  .author{align-items:flex-start;}
}