/* Advisory Monks Consulting — blog article template
   Also extracted from a duplicated inline <style> block (see style.css),
   but kept in its own file loaded AFTER eleven.css/realism.css/
   transitions.css rather than merged into style.css.

   Reason: eleven.css has its own (non-!important) .article-body h2/h3/p
   and a few other .article-* rules that are meant to patch the ones
   below. In the original markup this file's rules lived in <body>, after
   every <head> stylesheet, so on equal-specificity ties they always won
   over eleven.css's patches - eleven.css never actually took effect on
   .article-body typography. Loading this after eleven.css here preserves
   that exact precedence; merging it into style.css (which loads BEFORE
   eleven.css) silently let eleven.css's patches through instead and
   changed every article page's spacing - caught via a before/after
   pixel-diff across the site before this shipped. */

.article-page{padding:130px 0 80px;}
.article-container{max-width:780px;margin:0 auto;padding:0 clamp(20px,4vw,56px);}
.article-back{display:inline-flex;align-items:center;gap:8px;font-size:0.85rem;color:var(--brown-muted);margin-bottom:32px;transition:color 0.2s;cursor:pointer;}
.article-back:hover{color:var(--terracotta);}
.article-category{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.16em;color:var(--terracotta);margin-bottom:14px;}
.article-title{font-family:var(--font-display);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:400;line-height:1.12;letter-spacing:-0.025em;margin-bottom:20px;}
.article-meta{display:flex;align-items:center;gap:16px;font-size:0.82rem;color:var(--brown-faint);margin-bottom:40px;padding-bottom:32px;border-bottom:1px solid rgba(44,36,25,0.06);}
.article-author{display:flex;align-items:center;gap:10px;}
.article-avatar{width:36px;height:36px;border-radius:50%;background:var(--terracotta-light);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.8rem;color:var(--terracotta);}
.article-body h2{font-family:var(--font-display);font-size:1.5rem;font-weight:600;margin:40px 0 16px;color:var(--brown);}
.article-body h3{font-family:var(--font-display);font-size:1.15rem;font-weight:600;margin:28px 0 12px;}
.article-body p{font-size:0.97rem;color:var(--brown-muted);line-height:1.85;margin-bottom:20px;}
.article-body ul{margin:0 0 20px 20px;}
.article-body ul li{font-size:0.97rem;color:var(--brown-muted);line-height:1.85;margin-bottom:8px;list-style:disc;}
.article-callout{background:var(--cream-dark);border-left:3px solid var(--terracotta);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:20px 24px;margin:32px 0;}
.article-callout p{color:var(--brown);font-weight:500;margin:0;}
.article-cta{background:var(--brown);border-radius:var(--radius-xl);padding:40px;text-align:center;margin-top:56px;}
.article-cta h3{font-family:var(--font-display);font-size:1.4rem;font-weight:400;color:white;margin-bottom:10px;}
.article-cta p{font-size:0.88rem;color:rgba(250,245,237,0.5);margin-bottom:24px;line-height:1.7;}
