/* MT Agency blog — light "Clean Editorial" theme. Matches the main site. */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400&family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{
  --bg:#F8F5F0;--bg-white:#FFFFFF;--navy:#1B2A4A;--navy-deep:#0F1E35;--navy-soft:#253660;
  --gold:#C9A84C;--gold-dark:#A8872C;--gold-tint:rgba(201,168,76,.10);--gold-border:rgba(201,168,76,.28);
  --body:#1A1A1A;--muted:#6B6560;--border:#E4DDD4;--radius:0px;--nav-h:64px;--maxw:760px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--bg);color:var(--body);font-family:'IBM Plex Sans',system-ui,sans-serif;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--navy);text-decoration:none}
a:hover{color:var(--gold-dark)}
img{max-width:100%;height:auto;display:block}

/* nav */
.blog-nav{position:sticky;top:0;z-index:50;height:var(--nav-h);background:rgba(248,245,240,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.blog-nav .wrap{max-width:1100px;margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 24px}
.blog-nav .brand{display:flex;align-items:center;gap:10px;font-family:'Lora',serif;font-weight:700;color:var(--navy)}
.blog-nav .brand .dot{width:28px;height:28px;background:var(--navy);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.blog-nav .links a{margin-left:22px;font-size:14px;color:var(--body)}
.blog-nav .links a:hover{color:var(--navy)}

/* layout */
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wide{max-width:1100px}
main{padding:56px 0 80px}

/* article */
.hero-img{width:100%;border:1px solid var(--gold-border);margin-bottom:32px}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:14px}
h1{font-family:'Lora',serif;font-weight:700;font-size:clamp(28px,5vw,44px);line-height:1.15;color:var(--navy-deep);margin-bottom:18px}
.post-meta{font-size:13px;color:var(--muted);margin-bottom:8px;display:flex;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:22px;margin-bottom:30px}
.lead{font-size:20px;line-height:1.6;color:var(--navy-soft);margin-bottom:28px}
article h2{font-family:'Lora',serif;font-weight:600;font-size:26px;color:var(--navy);margin:40px 0 14px;padding-top:8px}
article h3{font-family:'Lora',serif;font-weight:600;font-size:20px;color:var(--navy-soft);margin:28px 0 10px}
article p{margin:0 0 18px}
article ul,article ol{margin:0 0 18px 24px}
article li{margin-bottom:8px}
article a{border-bottom:1px solid var(--gold-border)}
article blockquote{border-left:3px solid var(--gold);background:var(--gold-tint);padding:14px 20px;margin:0 0 22px;font-family:'Lora',serif;font-style:italic;color:var(--navy-deep)}
article code{font-family:'IBM Plex Mono',monospace;font-size:.9em;background:#EFE9DF;padding:2px 6px}
article pre{background:var(--navy-deep);color:#F2EBD9;padding:18px;overflow:auto;margin:0 0 22px;font-family:'IBM Plex Mono',monospace;font-size:14px}
article pre code{background:none;padding:0;color:inherit}
table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px}
th,td{border:1px solid var(--border);padding:10px 14px;text-align:left}
th{background:var(--navy);color:#fff;font-family:'IBM Plex Sans';font-weight:600}
tr:nth-child(even) td{background:#FCFAF6}

/* FAQ */
.faq{margin:44px 0 0;border-top:3px solid var(--gold)}
.faq h2{margin-top:26px}
.faq-item{border-bottom:1px solid var(--border);padding:16px 0}
.faq-item .q{font-family:'Lora',serif;font-weight:600;color:var(--navy);font-size:17px;margin-bottom:6px}
.faq-item .a{color:var(--body)}

/* cta */
.post-cta{margin:48px 0 0;background:var(--navy);color:#fff;padding:32px;border-top:3px solid var(--gold)}
.post-cta h3{color:#fff;font-family:'Lora',serif;margin-bottom:8px}
.post-cta p{color:#D9D4CC;margin-bottom:18px}
.btn{display:inline-block;background:var(--gold);color:var(--navy-deep);font-weight:600;padding:12px 26px;font-family:'IBM Plex Sans'}
.btn:hover{background:var(--gold-light);color:var(--navy-deep)}

/* index listing */
.index-head{text-align:center;padding:24px 0 40px}
.index-head h1{font-size:clamp(30px,5vw,46px)}
.index-head p{color:var(--muted);max-width:560px;margin:12px auto 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px}
.card{background:var(--bg-white);border:1px solid var(--border);border-top:3px solid var(--navy);transition:.25s ease}
.card:hover{border-top-color:var(--gold);box-shadow:0 12px 36px rgba(27,42,74,.12);transform:translateY(-3px)}
.card a{display:block;color:inherit}
.card .thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--border)}
.card .body{padding:20px}
.card .tags{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:8px}
.card h2{font-family:'Lora',serif;font-size:20px;color:var(--navy);line-height:1.25;margin-bottom:8px}
.card p{font-size:14px;color:var(--muted)}
.card .date{font-size:12px;color:var(--muted);margin-top:12px}

/* footer */
.blog-foot{border-top:3px solid var(--gold);background:var(--navy-deep);color:#D9D4CC;margin-top:80px;padding:40px 0;font-size:14px}
.blog-foot .wrap{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}
.blog-foot a{color:var(--gold-light)}

@media(max-width:640px){.blog-nav .links a{margin-left:14px}main{padding:36px 0 60px}}