:root{
  --navy:#000000; --navy-2:#0A0A0A; --navy-3:#161616;
  --gold:#C7A44D; --gold-deep:#C7A44D; --gold-light:#C7A44D;
  --paper:#FFFFFF; --bg:#F6F5F2; --ink:#111111; --muted:#5C574E;
  --line:#E7E3DB; --line-dark:rgba(255,255,255,.14);
  --font:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --radius:10px; --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{max-width:100%; font-family:var(--font); color:var(--ink); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased;}
img,svg{display:block; max-width:100%;}
a{color:inherit;}
.container{max-width:1200px; margin:0 auto; padding:0 24px;}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.eyebrow::before{content:''; width:24px; height:2px; background:var(--gold-deep); flex-shrink:0;}
.eyebrow.on-dark{color:var(--gold);}
.eyebrow.on-dark::before{background:var(--gold);}
h1,h2{font-family:var(--font); font-weight:800; line-height:1.15; letter-spacing:-.02em; color:var(--gold-deep);}
p{color:var(--muted);}
section{padding:80px 0;}
section.on-bg{background:var(--bg);}

/* HERO */
.blog-hero{background:var(--navy); color:#fff; padding:100px 0 70px; text-align:center;}
.blog-hero h1{font-size:clamp(30px,4.2vw,46px); color:#fff; max-width:640px; margin:0 auto;}
.blog-hero .lede{max-width:520px; margin:16px auto 0; font-size:17px; color:rgba(255,255,255,.75);}

/* POST GRID */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.blog-card{display:block; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit; transition:transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease;}
.blog-card:hover{transform:translateY(-6px); box-shadow:0 22px 34px -18px rgba(32,30,27,.24); border-color:var(--gold);}
.blog-card-img{position:relative; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(150deg, var(--navy) 0%, var(--navy-3) 100%);}
.blog-card-img img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease);}
.blog-card:hover .blog-card-img img{transform:scale(1.06);}
.blog-card-img-fallback{width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
.blog-card-img-fallback svg{width:34%; stroke:var(--gold);}
.blog-card-tag{position:absolute; top:14px; left:14px; background:var(--gold); color:var(--navy); font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:5px 12px; border-radius:999px;}
.blog-card-body{padding:22px 22px 26px;}
.blog-card-date{font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:8px;}
.blog-card h2{font-size:18px; line-height:1.3; margin-bottom:10px; color:var(--ink); letter-spacing:-.01em;}
.blog-card-body p{font-size:14px; margin-bottom:16px;}
.blog-card-more{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--gold-deep);}
.blog-card-more svg{width:15px; height:15px; stroke:var(--gold-deep); transition:transform .25s var(--ease);}
.blog-card:hover .blog-card-more svg{transform:translateX(4px);}

/* PAGINATION */
.blog-pagination{display:flex; justify-content:center; gap:8px; margin-top:56px; flex-wrap:wrap;}
.blog-pagination .page-numbers{display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 14px; border-radius:var(--radius); border:1px solid var(--line); background:var(--paper); color:var(--ink); text-decoration:none; font-size:14px; font-weight:600; transition:all .2s ease;}
.blog-pagination .page-numbers:hover{border-color:var(--gold); color:var(--gold-deep);}
.blog-pagination .page-numbers.current{background:var(--navy); border-color:var(--navy); color:#fff;}
.blog-pagination .page-numbers.dots{border:none; background:none;}

/* EMPTY STATE */
.blog-empty{text-align:center; padding:60px 0; color:var(--muted); font-size:16px;}

@media(max-width:960px){.blog-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.blog-grid{grid-template-columns:1fr;} .blog-hero{padding:76px 0 56px;}}