/* ============================================================
   Blog stylesheet — additive only. Loaded ONLY on /blog/ pages,
   alongside styles.css. Nothing here touches an existing selector,
   so no other page on the site is affected by this file.
   ============================================================ */

/* breadcrumb */
.bc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:"Cinzel",serif;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--harbour);margin-bottom:22px}
.bc a{color:var(--harbour)}
.bc a:hover{color:var(--champagne)}
.bc span{color:rgba(159,174,192,.5)}
.bc b{color:var(--brass);font-weight:600}

/* blog post hero meta row (byline / date / read time) */
.blogmeta{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:20px;font-family:"Cinzel",serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.68)}
.blogmeta b{color:var(--champagne);font-weight:600}
.blogmeta span::before{content:"·";margin-right:22px;color:var(--brass)}
.blogmeta span:first-child::before{content:none;margin-right:0}

/* category chip on hero */
.blog-cat{display:inline-block;font-family:"Cinzel",serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--midnight);background:var(--brass);padding:6px 14px;font-weight:600}

/* table of contents */
.toc{border:1px solid rgba(211,172,94,.3);border-left:3px solid var(--brass);background:rgba(211,172,94,.06);padding:26px 28px;margin:0 0 48px}
.toc b{display:block;font-family:"Cinzel",serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:14px}
.toc ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.toc a{color:var(--cream);font-size:16.5px}
.toc a:hover{color:var(--champagne)}

/* article typography — the reading column */
.article{max-width:76ch;margin:0 auto}
.article > p, .article > ul, .article > ol, .article > blockquote{margin-bottom:26px;font-size:19px;line-height:1.75;color:var(--cream)}
.article h2{font-size:clamp(24px,3vw,34px);color:var(--champagne);margin:56px 0 20px;line-height:1.2}
.article h2:first-child{margin-top:0}
.article h3{font-family:"Cinzel",serif;font-size:19px;font-weight:600;color:var(--champagne);margin:34px 0 14px;letter-spacing:.01em}
.article ul,.article ol{padding-left:26px;display:flex;flex-direction:column;gap:10px}
.article li{font-size:19px;line-height:1.65;color:var(--cream)}
.article li::marker{color:var(--brass)}
.article strong{color:var(--champagne);font-weight:600}
.article a{border-bottom:1px solid rgba(211,172,94,.4)}
.article a:hover{border-color:var(--brass)}
.article blockquote{border-left:3px solid var(--brass);padding:4px 0 4px 26px;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:22px;color:var(--champagne)}
.article .lead-graf{font-size:22px;color:var(--champagne);line-height:1.6}
.article figure{margin:36px 0}
.article figure img{width:100%;border:1px solid rgba(211,172,94,.25)}
.article figcaption{font-size:14px;color:var(--harbour);margin-top:10px;text-align:center}

/* related posts grid — dark card variant */
.bcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.bcard{background:var(--navy);border:1px solid rgba(211,172,94,.22);padding:30px 28px;display:flex;flex-direction:column;gap:12px;transition:transform .5s var(--e),border-color .5s}
.bcard:hover{transform:translateY(-6px);border-color:var(--brass)}
.bcard em{font-family:"Cinzel",serif;font-style:normal;font-size:10px;letter-spacing:.2em;color:var(--brass);text-transform:uppercase}
.bcard h3{font-family:"Cinzel",serif;font-size:19px;font-weight:600;color:var(--champagne);line-height:1.3;margin:0}
.bcard p{margin:0;font-size:15.5px;color:var(--harbour);line-height:1.55}
.bcard .brd{font-family:"Cinzel",serif;font-size:10.5px;letter-spacing:.14em;color:var(--brass);text-transform:uppercase;margin-top:auto}

/* blog index listing cards (white, matches .ccard pattern used on courses.html) */
.blist{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.bpost{background:#fff;border:1px solid rgba(12,30,56,.14);display:flex;flex-direction:column;overflow:hidden;transition:transform .5s var(--e);}
.bpost:hover{transform:translateY(-6px)}
.bpost img{width:100%;height:200px;object-fit:cover}
.bpost .bp-in{padding:26px 26px 30px;display:flex;flex-direction:column;gap:10px;flex-grow:1}
.bpost em{font-family:"Cinzel",serif;font-style:normal;font-size:10px;letter-spacing:.18em;color:#7D5B1F;text-transform:uppercase}
.bpost h3{font-size:21px;color:var(--ink);margin:0;line-height:1.28}
.bpost p{font-size:15.5px;color:#3A4A5C;line-height:1.55;flex-grow:1;margin:0}
.bpost .bp-meta{font-family:"Cinzel",serif;font-size:10.5px;letter-spacing:.1em;color:#8A6A20;text-transform:uppercase}

/* pillar/featured post */
.bfeatured{display:grid;grid-template-columns:1fr 1fr;gap:0;background:#fff;border:1px solid rgba(12,30,56,.14);overflow:hidden}
.bfeatured img{width:100%;height:100%;min-height:300px;object-fit:cover}
.bfeatured .bf-in{padding:44px 42px;display:flex;flex-direction:column;gap:16px;justify-content:center}
.bfeatured em{font-family:"Cinzel",serif;font-style:normal;font-size:10.5px;letter-spacing:.2em;color:#7D5B1F;text-transform:uppercase}
.bfeatured h2{font-size:clamp(22px,2.6vw,30px);color:var(--ink);margin:0;line-height:1.24}
.bfeatured p{font-size:17px;color:#3A4A5C;line-height:1.6;margin:0}
@media(max-width:900px){.bfeatured{grid-template-columns:1fr}.bfeatured img{min-height:220px}}

/* author box */
.abox{display:flex;gap:20px;align-items:flex-start;border-top:1px solid rgba(211,172,94,.22);border-bottom:1px solid rgba(211,172,94,.22);padding:30px 4px;margin:56px 0}
.abox .aic{width:56px;height:56px;border-radius:50%;background:var(--brass);color:var(--midnight);font-family:"Cinzel",serif;font-weight:600;font-size:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.abox b{font-family:"Cinzel",serif;font-size:16px;color:var(--champagne);display:block;margin-bottom:6px}
.abox p{margin:0;font-size:15.5px;color:var(--harbour);line-height:1.6;max-width:60ch}

@media(max-width:760px){
  .toc{padding:20px 22px}
  .abox{flex-direction:column;gap:12px}
}